Crie modelos de bloco de Gutenberg para uma experiência melhor
Publicados: 2019-05-02
WordPress 5.x é a versão mais recente do CMS mais popular do mundo. Um recurso interessante da nova versão é o Editor Gutenberg, que está prestes a revolucionar a maneira como os WordPressers criam conteúdo na plataforma. Pelo menos essa é a versão oficial!
Independentemente do que você sinta sobre o editor de Gutenberg, é importante perceber que este editor não irá desaparecer nos próximos lançamentos do WordPress. A razão é simples: O editor “Clássico” do WordPress começou a mostrar sua idade. Além disso, a nova geração de usuários que estão familiarizados com editores disponíveis em outras plataformas semelhantes, se sente mais confortável com o editor de estilo Gutenberg do que com o editor clássico.
Personalização de blocos de Gutenberg
O editor de Gutenberg é baseado na ideia de 'blocos', componentes discretos que podem ser usados à vontade para adicionar a funcionalidade desejada ao conteúdo. Por meio desses blocos de Gutenberg, o usuário pode adicionar seções ajustáveis e gerenciáveis de forma independente que agregam valor para os leitores.
Uma vez que a personalização está no cerne do WordPress, o editor Gutenberg oferece suporte a modelos de blocos personalizados que ajudam os usuários a adicionar blocos personalizados a seus CMS.
Existem duas maneiras de criar modelos de bloco de Gutenberg personalizados. Observe que ambos os métodos requerem algum conhecimento de desenvolvimento WordPress.
Registrar blocos de Gutenberg
O primeiro método envolve a criação de modelos de blocos personalizados que podem ser usados para construir blocos pré-preenchidos. Para isso, adicione o seguinte código ao arquivo functions.php
add_action ('init', function () {
$ args = array (
'public' => true,
'label' => 'Notícias',
'show_in_rest' => true,
'template_lock' => 'all',
'template' => array (
array ('core / paragraph', array (
'placeholder' => 'Últimas notícias',
)),
array ('core / image', array (
'alinhar' => 'direita',
)),
),
);
register_post_type ('news', $ args);
});
Esta é a aparência deste modelo personalizado para o bloco de Gutenberg em ação:
No trecho de código acima, o parâmetro de array 'core / paragraph' é responsável pelo conteúdo do bloco. Da mesma forma, o parâmetro de matriz 'core / image' permite que você faça upload de imagens de três maneiras: Upload direto, Selecionando na Biblioteca de Mídia e Incorporando usando um URL.
O parâmetro 'show_in_rest' indica ao núcleo do WordPress que esse bloco personalizado deve ser obtido por meio da API REST do WordPress.
O argumento 'template_lock', quando definido como 'all', evita que os blocos personalizados sejam adicionados (ou removidos) ao modelo.
Quando se trata de adicionar um bloco personalizado a este modelo, use a sub-matriz 'template'. Por exemplo, considere o seguinte snippet:
'template' => array (
array ('core / header', array ('level' => '4', 'content' => 'Heading')),
array ('core / paragraph'),
)
Crie um plug-in Gutenberg
Ao trabalhar com modelos personalizados e modelos Gutenberg, a prática recomendada é criar um plug-in personalizado para o plug-in Gutenberg Editor personalizado.
Como todos os plug-ins, este plug-in estará localizado no diretório wp-content / plugins que contém pastas separadas para todos os plug-ins instalados no site.
Para criar o plugin, vá para o diretório wp-content / plugins e crie uma nova pasta. O nome da pasta deve ser o nome do plugin de modelo Gutenberg personalizado. Para o propósito deste tutorial, chamei meu plug-in de 'Blocos de Gutenberg'. Assim, o nome da pasta seria ' Gutenberg-Blocks '.
Nesta pasta, crie um arquivo chamado Gutenberg-blocks.php e o seguinte código para ele:
/ **
* Nome do plugin: Blocos de Gutenberg
* Autor: Muhammad Owais Alam
* Descrição: Este plugin permite aos usuários adicionar um modelo personalizado WordPress Gutenberg para o editor Gutenberg
* Versão: 1.0.0
* /
add_action ('init', function () {
$ args = array (
'public' => true,
'label' => 'Notícias',
'show_in_rest' => true,
'template_lock' => 'all',
'template' => array (
array ('core / paragraph', array (
'placeholder' => 'Últimas notícias',
)),
array ('core / image', array (
'alinhar' => 'direita',
)),
),
);
register_post_type ('news', $ args);
});
Observe que este código é apenas um guia e você pode alterar os detalhes para atender às suas necessidades. Quando instalado, este plugin aparecerá na lista de plugins disponíveis.
Exemplo de tema Gutenberg WordPress - Gutenberry
O novo editor sem distrações, Gutenberg, faz parte do núcleo do WordPress há quase um ano. No entanto, costumava ser muito difícil encontrar um tema de Gutenberg realizado e bem pensado na web até o lançamento de Gutenberry.
Gutenberry é atualmente um dos melhores temas 100% prontos para Gutenberg. Este tema limpo e minimalista foi criado em Gutenberg, trazendo a você uma facilidade de edição sem precedentes e velocidade exemplar. Por exemplo, o Google Speed classifica o Gutenberry A 97.
Este tema importante também vem com 5 designs de página inicial, todos criados para blogs modernos com integração de mídia avançada. Além disso, Gutenberry oferece toneladas de layouts de Blog e Post, mais de 10 widgets, formulários de trabalho e forte integração com a mídia social.
Aqui estão as características notáveis do tema de Gutenberg:
- Instalador de dados de amostra
- Suporte vitalício 24 horas por dia, 7 dias por semana
- Código-fonte otimizado
- Pronto para MailChimp
- Totalmente Responsivo
- Layouts de Módulos Alternativos
- 3 layouts de blog dinâmicos
Empacotando!
A personalização de modelos Gutenberg é uma ótima maneira de personalizar o editor Gutenberg para lidar com os requisitos personalizados. Como acontece com tudo que é WordPress, o processo de criação de um modelo Gutenberg personalizado é uma simples questão de adicionar código embutido ou configurar um plugin personalizado.