Wp-rocket: Compatibilidade de bloco LazyLoad e JetPack Compare Images
Antes de enviar um problema, verifique se você concluiu as seguintes etapas:
- Verifique se você está usando a versão mais recente - sim
- Usou o recurso de pesquisa para garantir que o bug não foi relatado antes -sim
Descreva o bug
As imagens não estão sendo exibidas quando adicionadas com o bloco JetPack Compare Image.
A marcação é cortada, então apenas o pixel svg fica visível quando eu inspeciono o elemento, mas não a fonte da imagem.
Capturas de tela:
Com LazyLoad desativado: https://jmp.sh/O7wBHsF
Com LazyLoad ativado: https://jmp.sh/ZOZZB7N
Reproduzir
Passos para reproduzir o comportamento:
- Crie uma postagem com um bloco Compare Image.
- Ativar LazyLoad no WP Rocket
- Abra a página e as imagens não serão exibidas como na captura de tela aqui: https://jmp.sh/RrOeolq
Comportamento esperado
As imagens devem ser exibidas como aqui: https://jmp.sh/14xZcAi
Solução atual
Exclua o nome da classe class="image-compare da opção LazyLoad.
Bloqueie a marcação no código-fonte antes que o LL seja aplicado: https://jmp.sh/HnYusFT
Contexto adicional
O bloco Comparar funciona com o JetPack lazy-load e com o núcleo do WordPress lazy-load porque as imagens não estão sendo lazyloaded, ou seja, excluídas.
Tíquete relacionado: https://secure.helpscout.net/conversation/1351509800/217772/
Slack: https://wp-media.slack.com/archives/G01BGNQU7AP/p1606920475010500
Possivelmente, adicionar essa exclusão LazyLoad automaticamente seria uma solução do nosso lado?
Ou a compatibilidade precisa ser feita pelo JetPack?
Backlog Grooming (para uso da equipe de desenvolvimento WP Media apenas)
- [] Reproduza o problema
- [] Identifique a causa raiz
- [] Defina uma solução
- [] Estimar o esforço
NataliaDrause
Todos 4 comentários
Reproduza o problema ✅
Reproduzido no site de teste local
Identifique a causa raiz ✅
O código gerado a partir do próprio plugin está correto, como pode ser visto no código-fonte:
<img id="1756" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20801%20801'%3E%3C/svg%3E" alt="" width="801" height="801" class="image-compare__image-before" data-lazy-src="https://tests.local/wp-content/uploads/2019/05/tshirt.jpg"/>
<noscript>
<img id="1756" src="https://tests.local/wp-content/uploads/2019/05/tshirt.jpg" alt="" width="801" height="801" class="image-compare__image-before"/>
</noscript>
<img id="1757" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20801%20800'%3E%3C/svg%3E" alt="" width="801" height="800" class="image-compare__image-after" data-lazy-src="https://tests.local/wp-content/uploads/2019/05/vneck-tee.jpg"/>
<noscript>
<img id="1757" src="https://tests.local/wp-content/uploads/2019/05/vneck-tee.jpg" alt="" width="801" height="800" class="image-compare__image-after"/>
</noscript>
O problema está acontecendo depois que o script de comparação é ativado e não funciona corretamente com a marcação lazyloaded.
Defina uma solução ✅
Adicionar image-compare__ à exclusão em RocketLazyload\Images::getExcludedAttributes() excluirá essas imagens do lazyload e resolverá o problema.
Esses dados de fixação podem ser adicionados aos nossos testes automatizados para validação e prevenção de regressão.
Faça uma estimativa do esforço ✅
Esforço [XS]
Tabrisrp
em 17 dez. 2020
Relacionado: https://secure.helpscout.net/conversation/1372584429/224759/
adicionar image-compare__ à lista de exclusão resolveu o problema.
NataliaDrause
em 28 dez. 2020
@ engahmeds3ed @piotrbak Isso pode estar pronto para o 3.8.3 para o lançamento na próxima semana? Devo atualizar o marco?
arunbasillal
em 15 jan. 2021
@arunbasillal Do meu ponto de vista, vou iniciar o controle de qualidade em alguns minutos
piotrbak
em 15 jan. 2021
Questões relacionadas
leurdo
·
4Comentários
vmanthos
·
3Comentários
maximejobin
·
4Comentários
vmanthos
·
5Comentários
webtrainingwheels
·
5Comentários
Comentários muito úteis
@arunbasillal Do meu ponto de vista, vou iniciar o controle de qualidade em alguns minutos