Blog sobre WordPress
No Result
View All Result
  • Web Stories
  • Desenvolvimento
  • Infra
  • Mobile
  • Performance
  • Segurança
  • SEO
  • E-commerce
Cadastrar e-mail
  • Web Stories
  • Desenvolvimento
  • Infra
  • Mobile
  • Performance
  • Segurança
  • SEO
  • E-commerce
No Result
View All Result
Blog sobre WordPress
No Result
View All Result
banner-horizontal-3

Início » Desenvolvimento WordPress » Como habilitar recursos ocultos do Gutenberg no tema WordPress

Como habilitar recursos ocultos do Gutenberg no tema WordPress

Sendo o Gutenberg o maior investimento recente do WordPress, por que alguns recursos ficariam ocultos? Conheça o motivo, bem como quais são esses recursos.

Leandro Vieira by Leandro Vieira
3 anos ago
Reading Time: 5 min
1
Compartilhe no FacebookCompartilhe no LinkedIn
Audio

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

Conteúdo relacionado

Como criar Web Stories no WordPress

Como criar blocos reutilizáveis no Gutenberg

Anatomia do Gutenberg, o editor do WordPress

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

Exemplo de código para habilitar um dos recursos ocultados do Gutenberg
Exemplo de código para habilitar um dos recursos ocultados do Gutenberg

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?

Tags: functions.phpGutenbergthemewp-admin
Share8Share1SendShare
Previous Post

Como implementar a LGPD no WordPress e WooCommerce

Next Post

Como e por que chegamos ao QUIC e ao HTTP/3

Leandro Vieira

Leandro Vieira

Uma das grandes referências de WordPress no Brasil, entusiasta e evangelista da plataforma. Fundador e CEO da Apiki, empresa especializada no desenvolvimento web com WordPress.

Related Posts

As vantagens do editor Gutenberg para WordPress
Desenvolvimento WordPress

As vantagens do editor Gutenberg para WordPress

19 de agosto de 2020
Metodologia BPM para melhoria de processos dentro da empresa
Desenvolvimento WordPress

Metodologia BPM para melhoria de processos dentro da empresa

15 de janeiro de 2021
Scrum e PMBOK - aliados na gestão de projetos
Desenvolvimento WordPress

PMBOK e Scrum: grandes aliados na gestão de projetos

15 de janeiro de 2021
Os desafios da gestão em projetos digitais
Desenvolvimento WordPress

Os desafios da gestão em projetos digitais

15 de janeiro de 2021
Next Post
HTTP/3

Como e por que chegamos ao QUIC e ao HTTP/3

Design Adaptativo versus Design Responsivo

Não use Design Adaptativo. Considere o Design Responsivo

Comments 1

  1. Pingback: RESUMO

Deixe um comentário Cancelar resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

banner-lateral-3
Receba no seu e-mail uma série de conteúdos sobre Infra para WordPress.
  • Este campo é para fins de validação e não deve ser alterado.

Facebook LinkedIn Instagram Twitter Youtube Github RSS

Sobre a Apiki

Empresa especializada em WordPress com três unidades de negócios.

  1. Design e Desenvolvimento;
  2. Infra e Hospedagem;
  3. Suporte e manutenção.

Em resumo, só fazemos uma coisa em WordPress: tudo.

Páginas do Apiki.com

  • Apiki.com
  • Sobre a Apiki
  • Hospedagem
  • Desenvolvimento
  • UX & UI para WordPress
  • Growth em WordPress
  • Suporte
  • Atendimento

Páginas do Blog

  • Sobre
  • Newsletter
  • Desenvolvimento WordPress
  • Segurança para WordPress
  • WordPress Mobile
  • Infra para WordPress
  • WordPress SEO
  • WordPress Performance
  • E-commerce

© 2020 Apiki - Empresa especializada em WordPress.

No Result
View All Result
  • Web Stories
  • Desenvolvimento
  • Infra
  • Mobile
  • Performance
  • Segurança
  • SEO
  • E-commerce

© 2020 Apiki - Empresa especializada em WordPress.