Quando o editor de blocos Gutenberg foi lançado como parte do WordPress 5.0, lançou uma nova era de criação de conteúdo. As tarefas aparentemente simples, como criar layouts de várias colunas ou adicionar mídia incorporada, não exigem um plug-in do construtor de páginas ou código personalizado.
Gutenberg divide o conteúdo em ” blocos “, ou pequenas seções que podem ser reorganizadas com facilidade. Por padrão, o WordPress vem com uma boa seleção de blocos. Mas também permite que os desenvolvedores construam seus próprios blocos personalizados.
Os blocos personalizados Gutenberg podem mudar o jogo para desenvolvedores de temas. Em vez de depender de soluções alternativas ou de modelos de página rígidos, um bloco personalizado pode colocar conteúdo especializado em qualquer lugar da página. Elementos como depoimentos, menus de acordeão e tabelas de preços são apenas alguns exemplos do que pode ser alcançado.
Por mais que Gutenberg bloqueie o som personalizado, havia alguma preocupação inicial sobre a barreira à entrada. Blocos de construção nativamente requerem conhecimento do React , o que pode deixar de fora muitos desenvolvedores.
Felizmente, a comunidade de desenvolvedores do WordPress aprimorou ferramentas que contornam o requisito React / JavaScript. Eles permitem que você crie seus próprios blocos personalizados de maneira visual e os implemente no seu tema WordPress existente.
Hoje, apresentaremos algumas dessas ferramentas e mostraremos como é fácil começar.
Blocos personalizados Gutenberg: Ferramentas
Várias ferramentas chegaram ao mercado que permitem aos web designers criar blocos personalizados do Gutenberg sem JavaScript. Lembre-se, eles ainda exigem pelo menos algum conhecimento de código (HTML, CSS e PHP) – ou pelo menos como um tema WordPress funciona. Isso ocorre porque cada opção exige que você crie um arquivo PHP de código de bloco e, opcionalmente, adicione algum estilo para corresponder ao seu site.
Dito isto, cada um dos plugins do WordPress abaixo utiliza campos personalizados para criar conteúdo. Os campos personalizados existiam bem antes de Gutenberg aparecer. De fato, há muito tempo é prática comum utilizá-los como uma maneira de contornar as limitações do antigo Editor clássico.
O bom desse tipo de configuração é que os campos personalizados oferecem flexibilidade nos tipos de conteúdo que você pode criar. Misture isso com a portabilidade de um bloco de Gutenberg e você terá uma nova e poderosa ferramenta.
Campos personalizados avançados PRO
Os campos personalizados avançados existem há anos. Começou como uma interface de usuário útil para criar conjuntos de campos personalizados complexos e agora possui mais de 1 milhão de usuários ativos de sua versão gratuita .
A versão PRO comercialmente disponível do plug-in (o preço começa em US $ 49 por ano) evoluiu para permitir a criação personalizada de blocos Gutenberg. O recurso ACF Blocks permite que os desenvolvedores criem um conjunto de campos e o designem a um bloco personalizado.
Mais do que os outros plugins desta categoria, você precisará conhecer o PHP para aproveitar ao máximo o ACF Pro. No entanto, os usuários existentes do plug-in acharão o processo de criação de blocos muito familiar.
Lazy Blocks – Gutenberg Blocks Constructor
Lazy Blocks é um plugin gratuito do WordPress que oferece uma maneira visual de criar blocos personalizados. Assim como o ACF, o plug-in inclui vários tipos de campos personalizados (chamados de “controles”) para o seu bloco. Os campos de texto, imagem, arquivo, Editor Clássico, seletor de cores e repetidor são apenas alguns dos itens disponíveis. Há também uma API para criar seus próprios controles personalizados.
Outros recursos úteis incluem a capacidade de restringir seus blocos a tipos específicos de postagens, importar / exportar via JSON e modelos personalizados.
Block Lab
Com o Block Lab, a criação personalizada de blocos é um processo de três etapas. Primeiro, adicione um bloco no administrador – que é semelhante a adicionar qualquer outra página ou publicação. Em seguida, adicione a combinação desejada de campos personalizados (texto, imagem, botões de opção / caixas de seleção, URLs etc.) e defina as configurações como um ícone personalizado. Terceiro, crie um modelo de bloco para o seu tema e estilize-o ao seu gosto. A partir daí, seu bloco personalizado estará pronto para uso.
O plug-in está bem documentado e até oferece tutoriais para criar tipos de blocos específicos.
Um bloco personalizado simples usando o Block Lab
Por uma questão de simplicidade, faremos um test drive usando o Block Lab. No entanto, não deixe que isso o impeça de experimentar as outras opções, pois elas têm muito a oferecer.
Agora, vamos ao nosso exemplo. Vamos supor que você tenha um site WordPress com o plug-in do Block Lab instalado e ativado.
Em nosso projeto, criaremos um bloco de notificação simples que podemos usar para exibir informações importantes aos visitantes. Não será muito, apenas um plano de fundo colorido e algum texto. Mas, esperançosamente, fornecerá um vislumbre do que é possível com um bloco personalizado de Gutenberg.
1. Navegue para Block Lab> Add New para criar nosso novo bloco.
2. Começaremos adicionando um título (barra de notificação) e três campos:
- Cor de fundo – um campo de cor que permitirá escolher o fundo da nossa barra de notificação. Vamos atribuí-lo para exibição na área Inspetor do editor de blocos, que fica na barra lateral direita.
- Cor do texto – Outro campo de cor, desta vez para o nosso texto. Este também será exibido no Inspetor.
- Mensagem – Um campo de texto que exibirá nossa mensagem personalizada. Este campo será abrigado na área principal do Editor de Gutenberg.
Observe os nomes dos campos atribuídos a cada bloco, pois precisaremos deles daqui a pouco.
Também devemos mencionar que o plug-in nos permite escolher um ícone personalizado e categorizar nosso bloco. Isso nos ajudará a encontrá-lo quando quisermos adicioná-lo a uma página.
3. Com nossos campos e configurações, é hora de clicar no botão Publicar para salvar nosso bloco. Isso acionará uma mensagem de notificação, informando onde colocar nosso modelo de bloco personalizado dentro do nosso tema:
/wp-content/themes/YOURTHEME/blocks/block-notification-bar.php
4. Em seguida, precisaremos criar um modelo de bloco . Portanto, inicie o editor de código de sua escolha e crie um novo arquivo chamado block-notification-bar.phpe salve-o em uma nova /blocks/pasta dentro do seu tema.
Os modelos de bloco devem ser escritos do zero. Mas não se preocupe, não é muito difícil! O Block Lab documentou como fazer isso, com muitos exemplos.
No nosso caso, temos apenas dois tipos de bloco: Cor ( background-color; text-color) e Texto ( message). Usando a documentação como nosso guia, adicionaremos esse código ao nosso modelo de bloco personalizado:
| < div style = ” margin: 30px auto; padding: 5px 10px; background: <? php block_field ( ‘background-color’ ); // Cor do plano de fundo (campo de cor) ?> ” > | |
| < span style = ” color: <? php block_field ( ‘text-color’ ); // Cor do texto (campo de cor) ?> ” > <? php block_field ( ‘message’ ); // Mensagem (campo de texto) ?> </ Span > | |
| </ div > |
Certifique-se de salvar o arquivo e fazer o upload para o seu servidor web quando terminar.
5. Nosso bloco personalizado foi criado! Isso é realmente tudo o que existe. Agora, podemos adicioná-lo a uma página.
6. No front-end, temos uma barra de notificação básica que certamente chamará a atenção do usuário.
Indo além
Mesmo neste caso de uso muito simples, há um valor real na barra de notificação que criamos. Pode ser colocado em qualquer página ou publicação em nosso site e pode ser personalizado a cada vez.
Se quisermos expandir o que construímos, há muitas opções. A adição de itens como ícones , botões e a capacidade de vincular a outra página ou publicação vem à mente. Tudo isso é possível no Block Lab, bem como nos outros plugins mencionados acima. E o uso de CSS também pode melhorar muito a aparência.
Agora que você já experimentou o processo de criação de blocos personalizados, é hora de experimentar! Instale um dos plug-ins acima e veja como você pode aprimorar seu site WordPress.