Como habilitar recursos ocultos do Gutenberg no tema WordPress

Todo tema tem suporte nativo ao editor do WP. No entanto, nem todos tem a disposição os recursos ocultos do Gutenberg.

Para habilitar essas funcionalidades, é preciso declarar a intenção.

Essa declaração é realizada através do arquivo functions.php e da função add_theme_support().

Através dessa função, manifestamos o desejo de habilitar os mecanismos ocultos, um por um.

Sendo o Gutenberg o maior investimento recente do WordPress, por que alguns recursos ficariam ocultos?

Por que o criador do tema precisa ter domínio sobre a plataforma, seus recursos e estilos. E não o inverso.

Algumas funcionalidades funcionam bem somente com a adição de alguns estilos. Sem essa estilização é impossível estruturar e refinar os componentes.

Portanto, os desenvolvedores de tema tem a opção de habilitar os recursos e estilos, bem como não ativá-los ou remover os indesejados.

Os recursos ocultos do Gutenberg

As funcionalidades passíveis de serem ativadas, até o presente o momento, estão relacionadas a estilização e alinhamentos.

As possibilidades são as seguintes.

• responsive-embeds;
• align-wide;
• editor-styles;
• dark-editor-style;
• editor-color-palette;
• disable-custom-colors;
• editor-font-sizes;
• disable-custom-font-sizes;
• wp-block-styles.

A função para declarar os recursos ocultos

A função add_theme_support() é uma velha conhecida dos desenvolvedores de tema.

Ela está disponível desde a versão 2.9.0 do WordPress. Já os recursos ocultos do Gutenberg chegaram na versão 5.0.

Essa função recebe dois parâmetros. Sendo o primeiro o recurso a ser habilitado. E o segundo, os argumentos para aprimorar a funcionalidade requerida.

Essa função deve ser chamada através do arquivo functions.php. Esse arquivo é especial e poderoso em temas WordPress.

É opcional atrelar a chamada da referida função a um hook. No entanto, se caso o for, considere a action “after_setup_theme“.

A composição indicada fica da seguinte forma.

function prefix_block_editor_configs()
{
	add_theme_support( 'nome-do-recurso', 'array-de-config-do-recurso' );
}

add_action( 'after_setup_theme', 'prefix_block_editor_configs' );

Onde temos “nome-do-recurso”, você deve informar a string relaciona a funcionalidade. Elas foram listadas logo acima.

Se você deseja um detalhamento sobre as possibilidades dos parâmetros de cada recurso, considere fazer uma análise do arquivo functions.php do tema padrão do WordPress, o Twenty Twenty.

E vou te dar uma dica para toda a vida ao trabalhar com o WordPress, os temas que vem com a plataforma, são grandes fontes de estudos e inspiração sobre como aplicar o potencial que a plataforma disponibiliza a cada versão.

A função para ocultar recursos do editor

Em alguns momentos, desejamos um site simples e super focado em alguma coisa.

Nesses casos, é natural querermos desabilitar alguns recursos. Dado que eles vão mais atrapalhar do que ajudar.

A mesma função que fazemos uso para habilitar os recursos ocultos do Gutenberg, também a utilizamos para voltá-lo a ser obscuro.

Um exemplo prático.

add_theme_support( 'disable-custom-colors' );

No exemplo, estamos tirando a possibilidade do usuário fazer uso do selecionador de cor ilimitada do Gutenberg. E dessa forma, permitiremos somente as que foram disponibilizadas para manter o projeto seguindo um guide visual desejado.

Como aplicar estilos no Gutenberg dentro do wp-admin

Os editores dos CMS de uma forma geral, fazem uso do conceito WYSIWYG (What You See Is What You Get), que em tradução livre significa “O que você vê é o que você obtém”.

Isso é muita verdade em vários aspectos, mas em um deles não.

Sabe quando você está dentro do wp-admin, editando seu conteúdo no Gutenberg, e quando visualiza o conteúdo no site, a estilização não fica condizente ao que você via quando editava o conteúdo?

Então, é o que estilo de fonte, cor e alinhamentos, por exemplo, estão diferentes no editor.

É possível definir quais estilos a serem usados, também, no editor. Dessa forma o WYSIWYG ficará ainda mais poderoso.

E para isso, você deve habilitar essa possibilidade. Assim:

add_theme_support( 'editor-styles' );

E para carregar o seu arquivo CSS com as declarações, faça assim:

add_editor_style( 'style-editor.css' );

Esse arquivo de estilos devem estar na pasta do seu tema. Uma última dica, se desejar trabalhar com a opção de fundo escuro, também é possível. Habilite-a desta forma:

add_theme_support( 'dark-editor-style' );

Conclusão

Recentemente abordei a Anatomia do editor Gutenberg. Acredite, este novo editor é poderoso e estar norteando os novos rumos da plataforma.

O WordPress sempre tem o cuidado de ser o mais compatível possível com a infinidade de temas e plugins disponíveis.

Por isso, ocultar recursos como os aqui habilitados se faz necessário.

E você, já tinha utilizado alguns desses recursos?