|
Audio
|
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?
