Neste artigo bastante esclarecedor, vamos mostrar como deixar o seu tema pronto para o Gutenberg, o novo editor do WordPress.
Em pouco tempo a versão 5.0 do WordPress está chegando e, com ela, está chegando também o novo editor, chamado Gutenberg. Se neste momento você está se sentindo como cachorro que caiu da mudança, se perguntando o que é esse tal de Gutenberg, eu preparei um artigo interessante explicando tudo tim tim por tim tim, com uma visão panorâmica do layout do novo editor.
Se você, como eu, também é desenvolvedor de temas, você vai gostar de saber que essa nova ferramenta do WordPress pretende trazer uma grande melhoria para a edição de conteúdo, mas vai exigir que você faça algumas pequenas mudanças para que o seu tema se adapte completamente.
Talvez o Gutenberg seja uma realidade quando você estiver lendo este artigo, especialmente se você já tiver instalado o WordPress 5.0 ou superior. Seja esse o caso ou não, você já deve estar se perguntando como deixar o seu tema pronto para ele.
Neste artigo guiarei você pelo processo passo a passo, com algumas dicas rápidas, mostrando as principais mudanças que você deve aplicar no seu tema para que ele entre de vez no jogo.
Você também pode se interessar em assistir a sequência de tutoriais que eu gravei apresentando o Gutenberg para os alunos do meu curso sobre criação de temas.
Como deixar o seu tema pronto para o Gutenberg?
Passo 1: Habilitando o novo editor
O editor Gutenberg estará disponível no core do WordPress a partir da versão 5.0. Porém, desde a versão 4.9.8 a página inicial da administração já mostra um convite para conhecer o novo editor:
Antes da versão 5.0, o Gutenberg estará disponível como um plugin. O objetivo é liberar a ferramenta para testes antes do lançamento oficial, pois ainda muitas funcionalidades ainda não estão suficientemente maduras. Por exemplo, o que acontecerá com os tipos de posts customizados (cpts), com as metaboxes, campos personalizados? Enfim, são muitas perguntas ainda.
Talvez seja por conta disso que o plugin ainda está com uma avaliação bastante baixa no repositório no momento em que escrevo este texto. Mas a equipe promete que ele estará amadurecido até o WordPress 5.0. Você pode testá-lo como se fosse um plugin qualquer do repositório. Apenas faça a instalação e ative a funcionalidade que ela estará pronta para uso. Você também pode optar por instalar direto no painel administrativo, clicando no link “Instalar o Gutenberg”, conforme mostrado na figura anterior.
Antes de habilitar o Gutenberg num site que esteja em produção, faça um backup! No momento ainda existem algumas incompatibilidades, principalmente com page builders, e você não vai querer que seu conteúdo fique quebrado por causa disso!
Você pode conhecer o editor acessando a opção Gutenberg, que será criada no menu da administração, clicando no item “Demo”, ou abrir diretamente um post que você já tenha na sua instalação. Ao fazer isso, seu post (ou página) será aberto com o layout do novo editor.
Caso você ainda não tenha testado o Gutenberg, eu preparei um artigo interessante com uma visão panorâmica do layout do novo editor. Lá você pode conferir as principais funcionalidades da nova ferramenta.
Passo 2: Habilitando suporte a imagens amplas (wide-images)
O Gutenberg gira em torno dos chamados blocos. Eles são basicamente como pecinhas de LEGO que você pode adicionar ao conteúdo (páginas ou posts), movimentando-os com facilidade em qualquer local do conteúdo.
O editor também traz uma novidade para a apresentação de alguns desses blocos chamada de “imagens amplas”, ou wide-images no original em inglês.
Além dos três alinhamentos tradicionais (à direita, ao centro e à esquerda), alguns blocos podem ser arranjados de acordo com outros dois tipos de alinhamentos chamados, respectivamente, largura ampla (wide width) e largura completa (full width).
Enquanto eu escrevo este texto, os seguintes blocos aceitam os dois alinhamentos:
- Citaçã0 (Pullquote)
- Galeria (Gallery)
- Imagem (Image)
- Imagem de capa (Cover Image)
- Video
- Tabela (Table)
- Colunas (Columns)
- Categorias (Categories) – somente largura ampla
- Códigos incorporados (Embed)
No entanto, para que eles se tornem disponíveis, você deve habilitar suporte chamando add_theme_support()no seu arquivo functions.php.
add_theme_support( 'align-wide' );Nada mais simples do que isso! Ao adicionar essa pequena linha, você conseguirá ver os dois novos tipos de alinhamento, por exemplo, ao clicar num bloco de imagem.
Todavia, boa parte das (ou senão todas as) funcionalidades para as quais você adiciona suporte necessitam de alguma customização. Você perceberá que o alinhamento amplo ou completo funciona muito bem dentro do editor. Porém, no frontend nada acontecerá quando você salvar o post, ou pedir para visualizá-lo.
Para que as imagens amplas funcionem também no frontend, teremos que adicionar alguma customização CSS no nosso tema. Essa customização afetará duas classes CSS novas chamadas alignwide e alignfull. Existem várias formas de fazer isso. Você pode aplicar as regras abaixo ao arquivo CSS principal do seu tema para ver algum resultado:
@media only screen and (min-width: 1140px) {
.alignfull, .alignwide {
margin-bottom: 2em;
}
.alignwide {
width: 75vw;
margin-left: calc( 50% - 75vw / 2 );
max-width: none;
}
}
.alignfull {
width: 100vw;
margin-left: calc( 50% - 50vw );
max-width: none;
}
.wp-block-image.alignfull img, .wp-block-image.alignwide img {
width: 100%;
}
Parte do código acima usa media queries para garantir que o que vem dentro dos parêntesis só será aplicado quando o viewport chegar aos 1140px. Esse valor em pixels corresponde ao tamanho do container principal do seu tema. No meu caso, como eu uso quase sempre Bootstrap nos meus temas, esse valor é de 1140px. Mas você pode claramente usar outros valores.
Talvez você não obtenha o mesmo efeito em blocos de vídeo incorporados, como os do YouTube ou Vimeo. Caso isso ocorra, eu escrevei um artigo explicando como resolver o problema. Vale a pena conferir.
Passo 3: Habilitando suporte a paleta de cores
Outro recurso interessante que pode ser customizado no Gutenberg é a paleta de cores, disponível para todos os elementos que aceitam alterações na cor de fundo e de texto, como parágrafos, cabeçalhos ou botões.
Por padrão o Gutenberg já traz uma paleta de cores, mas é possível habilitar suporte e customizar essa paleta. Isso pode ser muito útil caso você queira que o usuário do seu tema fique limitado ao uso de apenas algumas cores definidas previamente.
Para isso, vá até o seu arquivo functions.php e habilite um suporte chamado ‘editor-color-palette’. A implementação completa segue abaixo:
add_theme_support( 'editor-color-palette', array(
array(
'name' => __( 'Blood Red', 'theme-domain-do-tema' ),
'slug' => 'blood-red',
'color' => '#b9121b',
),
) );
O segundo array da função deve fornecer os valores para ‘name’, que é o nome correspondente à cor personalizada da sua paleta, ‘slug’, um nome curto que será usado para estilizar a cor, e ‘color’, que é o valor hexadecimal da cor. No exemplo acima, criamos uma entrada para uma cor chamada “Blood Red”, com slug ‘blood-red’, hexadecimal ‘#b9121b’.
É possível adicionar quantas cores você quiser. Basta apenas repetir o array com os mesmos argumentos, passando valores diferentes.
Mais uma vez, suas cores funcionarão maravilhosamente dentro do editor, mas não no frontend. Para que elas sejam mostradas no frontend, você deve adicionais mais algum CSS ao arquivo do seu tema. O fato principal a ser notado é que o nome do elemento CSS segue uma sintaxe específica. Cada elemento que usa uma cor criada por você deve começar com o prefixo has- seguido do slug da cor e de um contexto de uso, que pode ser background-color (para a cor de fundo) e color (para a cor da fonte).
No exemplo da cor que criamos acima, o seletor CSS que estilizará a cor do fundo terá o nome .has-blood-red-background-color. Já o seletor da cor da fonte terá o nome .has-blood-red-color. No seu CSS, bastará apenas passar os valores hexadecimais para cada uma das classes. Um exemplo:
.has-blood-red-background-color{
background-color: #b9121b;
}
.has-blood-red-color{
color: #b9121b;
}É possível também desabilitar totalmente o selector de cores que aparece ao lado da paleta de cores habilitando o suporte chamado ‘disable-custom-colors’:
add_theme_support( 'disable-custom-colors' );
Passo 4: Deixando o backend e o frontend similares
Nesse ponto você deve estar se perguntando se é possível deixar o backend e o frontend do seu tema visualmente parecidos. Talvez você tenha notado que as fontes e o tamanho do container do Gutenberg são muito diferentes do que você tem no frontend.
É possível deixar o visual do backend o mais próximo possível do que o usuário verá no site fazendo algumas alterações no Gutenberg. Isso é opcional, de acordo com a documentação do WordPress, mas é uma forte recomendação de marketplaces como o Theme Forest. Então, caso sua intenção seja disponibilizar seu tema para venda nesses mercados de temas, você deve encarar o trabalho de deixar ao menos os blocos nativos do Gutenberg idênticos aos da parte visual do seu tema. Neste artigo vou me restringir a dar uma base de conhecimento inicial para você.
Vamos iniciar nosso desafio adicionando uma nova folha de estilos. Este arquivo será usando apenas para estilizar blocos que estejam dentro do editor do Gutenberg, logo, apenas funcionará no admin do WordPress:
function seutema_estilos() {
wp_enqueue_style( 'seutema-estilos', get_template_directory_uri() . '/css/style-editor.css' );
}
add_action( 'enqueue_block_editor_assets', 'seutema_estilos' );Note que o código acima enfileira um novo arquivo chamado style-editor.css, que você deve criar dentro de uma pasta do seu tema chamada CSS de acordo com o exemplo. Esse arquivo é incluído na fila quando o gancho ‘enqueue_block_editor_assets’ se torna disponível na execução do WordPress. Esse gancho é novo e foi implementado com o fim de adicionar scripts/css especializado para uso no Gutenberg.
A partir daí, todo o CSS que você escrever deve estar limitado à classe .gutenberg-editor-page, ou .edit-post-visual-editor, pois essas classes dizem respeito, respectivamente, à página inteira do admin onde o Gutenberg esteja sendo usado ou à área específica do editor (onde ficam os blocos).
Mudando a largura do editor
Você pode optar por mudar a largura do editor, deixando-a do mesmo tamanho do container do frontend, ou escolhendo outros valores. A documentação do Gutenberg dá um exemplo bem didático de como fazer isso:
* Main column width */
body.gutenberg-editor-page .editor-post-title__block,
body.gutenberg-editor-page .editor-block-list__block {
max-width: 1400px;
}No exemplo acima, definimos 1400px para a área do título do post (classe .editor-post-title__block) e o container de toda área onde ficam os blocos (classe .editor-block-list__block). Você pode experimentar valores menores de pixels, pois o seu editor não precisa ficar idêntico ao frontend se você não quiser.
Mudando a largura dos blocos wide
É possível definir até qual largura o bloco wide chegará usando a propriedade max-width. Por exemplo:
/* Width of "wide" blocks */
body.gutenberg-editor-page .editor-block-list__block[data-align="wide"] {
max-width: 1080px;
}Para os blocos full não há razão para se preocupar, pois o Gutenberg já cuida disso para você.
Adicionando as mesmas fontes usadas no frontend
Se o seu tema estiver usando fontes web, como as fontes do Google por exemplo, você pode estar interessado em usá-las também no editor. Para adicionarmos as fontes, primeiramente devemos enfileirá-las. Você pode usar aquela mesma função criada anteriormente para adicionar o arquivo da fonte desejada. O exemplo abaixo chama a fonte Lato a partir do repositório do Google:
wp_enqueue_style( 'lato-font', 'https://fonts.googleapis.com/css?family=Lato:400,900' );
Com a fonte enfileirada, você pode agora usá-la para estilizar algum elemento do editor. Por exemplo, vamos estilizar todo o conteúdo de texto do editor usando a fonte Lato:
.edit-post-visual-editor,
.edit-post-visual-editor p {
font: 16px/1.6 'Lato', sans-serif;
margin-top: 0;
margin-bottom: 1rem !important;
}Conclusão – Para onde ir a partir daqui?
O Gutenberg já é uma realidade e você deve estar preparado para ela. Apesar disso, não existem motivos para pânico. Como você viu, muitos dos suportes ao Gutenberg podem ser opcionais caso você esteja criando temas apenas para você ou para um cliente único.
Porém, eu acredito que o primeiro passo que você deva dar é começar logo os testes do Gutenberg nos seus temas. Logo logo seus clientes vão querer saber o que é essa nova ferramenta e como eles poderão tirar proveito dela. Se seu tema não estiver minimamente preparado, você terá correr contra o tempo.
Meu curso sobre criação de temas oferece uma visão panorâmica sobre o funcionamento do editor e ainda ensina a criar um tema WordPress do zero para os interessados.
Outra coisa que pode te interessar é aprender a criar os seus próprios blocos para o Gutenberg, da mesma forma que hoje há criadores de temas que também criam plugins para serem usados nos temas deles. Para esse caso a melhor fonte de informação é indiscutivelmente o manual oficial do Gutenberg.
Você também poderá obter informações mais detalhadas sobre como integrar o seu tema ao Gutenberg lendo a documentação oficial. Eu aconselho especialmente a leitura dos links abaixo:
https://wordpress.org/gutenberg/handbook/extensibility/theme-support/
https://wordpress.org/gutenberg/handbook/reference/faq/
É isso aí, pessoal! Espero que tenham gostado dessa pequeno artigo. Acredito que ele pode ser de grande ajuda para quem lida diariamente com criação de temas WordPress.
Compartilhe o artigo com seus colegas e conte pra gente como está sendo a sua aventura integrando seu tema ao Gutenberg! Deixe seu comentário ou dúvida abaixo. Adoraria saber mais sobre a sua experiência.
