Correção da sensibilidade do botão/link “Responder” nos comentários do WordPress

Em fevereiro de 2019, o WordPress 5.1 introduziu um novo comportamento na área de comentários. A partir dali, o botão/link “Responder” ficou mais… sensível.

Diferentemente de outros links, que só são ativados pelo toque depois que o usuário tira o dedo da tela, o “Responder” passou a ser ativado com o mero toque, o que não só não é algo esperado, como causa transtornos a quem acompanha a área de comentários pelo celular.

No último post livre, revelei estar trabalhando em um novo leiaute para o site e pedi opiniões do que está ruim e/ou pode ser melhorado no atual. A sensibilidade excessiva do link “Responder” foi o item mais citado. (O que me deixou orgulhoso, visto que o resto do leiaute parece ok à maioria!)

↗️ Reclamações dos leitores

A falha do link “Responder” foi registrada no sistema de falhas do WordPress em 29 de março de 2019. E… ainda está lá. A última atualização é de meados de junho, uma automática, de outra falha, e só porque o Google agora orienta uma configuração distinta da que o WordPress vem entregando há três anos.

↗️ Comment reply link uses inconvenient eventlistener

No debate da falha, o leitor André Gil propôs uma solução: um código JavaScript que altera o comportamento padrão do link “Responder” no WordPress.

Rodei o teste na nossa instalação de testes (como deve ser!) e… deu certo! Logo em seguida levei o código ao ambiente de produção e é isso, com menos de dez linhas de códigos, resolvemos (o André resolveu) a maior dor de cabeça dos nossos leitores que curtem comentar pelo celular.

Por que isso ainda não foi corrigido no WordPress? Não sei. Talvez alguém ali ache ok esse comportamento maluco. De qualquer forma, se você tem uma instalação WordPress também e quiser corrigir, basta colar este código no seu `functions.php`:

function fix_reply_link_comments() {  
	if ( have_comments() ) { ?>
		<script type="text/javascript">
			window.addEventListener('load', function() {
				document.getElementById('comments').addEventListener('touchstart', function(e) {
					if( e.target.className === 'comment-reply-link' ) {
						e.stopPropagation();
					}
				}, true);
			});
		</script>
	<?php } 
}
add_action('wp_footer', 'fix_reply_link_comments'); 

início