Neste artigo vou ensinar vocês como corrigir a exibição de vídeo incorporado no Gutenberg, um dos problemas que ainda incomodam um pouco o usuário do novo editor.
Como vocês sabem, ou pelo menos deveriam saber, o Gutenberg é o novo editor do WordPress. Para quem ficou surpreso com essa afirmação, leia o artigo que escrevi explicando como ele funciona em maiores detalhes.
Apesar da versatilidade do novo editor, alguns pequenos bugs ainda fazem com que a rejeição a ele ainda seja grande, pelo menos agora no começo, antes do lançamento oficial.
Corrigindo a exibição de vídeo incorporado no Gutenberg
Um dos primeiros problemas que encontrei ao adaptar um dos meus temas ao Gutenberg foi na implementação do recurso de imagens amplas (wide-images). Esse recurso disponibiliza dois novos tipos de alinhamentos no Gutenberg, chamados largura ampla (wide width) e largura completa (full width). Você pode obter mais informações sobre como implementá-lo no tema lendo um artigo que escrevi chamado “Como Deixar o Seu Tema Pronto Para o Gutenberg”.
Notei que o recurso funcionava muito bem para blocos como imagens, galerias e vídeos incorporados, mas somente dentro do editor. Fora dele, os vídeos não obedeciam os novos alinhamentos, apesar de o CSS já ter sido adicionado.
A primeira coisa que botei à prova foi o meu tema. Ativei um dos temas nativos do WordPress no lugar dele, o twentyseventeen, mas nada mudou. O que me leva a crer que a essa altura nem mesmo os temas nativos são 100% compatíveis com o Gutenberg. Fail!
A solução foi encontrada estudando o código de um dos temas disponíveis no repositório de temas chamado Atomic Blocks. Esse tema usa um script chamado FitVids para fazer com que o vídeo expanda corretamente. Assim, as classes alignwide e alignfull usadas na marcação HTML podem trazer o resultado esperado.
Vamos implementar a mesma solução enquanto não há uma correção oficial para o problema.
Adicionando FitVids no WordPress
A primeira ação nossa será visitar o repositório do Fitvids no Github: https://github.com/davatron5000/FitVids.js
Precisaremos de uma cópia do arquivo jquery.fitvids.js e do código jQuery que aciona o script com as configurações necessárias.
Faça uma cópia do arquivo jquery.fitvids.js e coloque dentro da pasta do seu tema. Por organização, eu colocarei o arquivo dentro de uma pasta chamada js. Precisamos de adicionar o script à fila para que ele seja incluído no head da página. Para isso, vamos usar o processo de enfileiramento do WordPress criando uma função no arquivo functions.php.
function adiciona_fitvids(){
wp_enqueue_script( 'fitvids', get_template_directory_uri() . '/js/jquery.fitvids.js', array( 'jquery' ), null, true );
}
add_action( 'wp_enqueue_scripts', 'adiciona_fitvids' );
A função acima adiciona o arquivo do jQuery que já vem instalado nativamente no WordPress. Assim, não há necessidade de adicionar o jQuery manualmente.
Precisamos agora de adicionar o código que aciona o FitVids. A maneira mais correta de fazer isso é adicionar mais uma linha na função criada acima, chamando novamente wp_enqueue_script()e enfileirando um novo arquivo somente com a chamada do script. Porém, você pode também optar por chamar o código antes do fechamento do <body>, o que equivale a adicionar o código no arquivo footer.php do seu tema. É o que faremos.
Antes do fechamento do <body>, no arquivo footer.php, adicione o seguinte código:
<script>
jQuery(document).ready(function( $ ) {
// Target your .container, .wrapper, .post, etc.
$(".is-type-video").fitVids();
});
</script>
Se você comparar este trecho de código com o que está no GitHub, notará que fizemos algumas alterações. Primeiramente, na linha do document ready, trocamos o $ de lugar, passando-o para dentro da função anônima. No lugar dele, passamos a string jQuery. Isso evita que tenhamos problemas de conflito no WordPress. Se passarmos do jeito que está no GitHub, a página não reconhecerá o $ (alias).
Outra coisa que alteramos foi o nome da classe sobre a qual o script agirá. Usamos a classe .is-type-video, pois ela abarcará todos os tipos de vídeos incorporados (YouTube, Vimeo, DailyMotion etc). Olhe novamente a imagem acima e você verá essa classe.
Salvando tudo, nós percebemos que agora o vídeo incorporado funciona de acordo com o esperado.
Se decidirmos que o vídeo terá largura ampla ou completa no editor Gutenberg, a alteração será percebida no frontend.
Espero que esta dica tenha sido útil pra você! Na verdade, espero que no futuro você não tenha mais que aplicar correções como essa…
Até a próxima!