Blocos Gutenberg personalizados fáceis usando Blockstudio e ACF

Neste artigo rápido, quero ver como criar um bloco Gutenberg personalizado usando o Blockstudio. Blockstudio é uma estrutura de blocos moderna e flexível para WordPress. Com a adoção do Gutenberg, a capacidade de criar rapidamente blocos personalizados está se tornando cada vez mais importante. Este é um método incrivelmente fácil de criá-los - e embora você precise escrever código para fazê-lo, é muito mais simples e eficiente com o BS (quando comparado a outros métodos).

Essa ferramenta facilita não apenas adicionar o bloco, mas gerar campos personalizados (você pode escolher entre ACF Pro ou Metabox Blocks), salvar informações no banco de dados e aplicar estilos e scripts in-line com facilidade.

Vamos dar uma olhada rápida em como podemos fazer um bloco personalizado do Gutenberg usando essa estrutura em menos de 5 minutos (PS - eu nunca fiz um bloco personalizado antes).

O processo de fazer um bloco

Para este site, preciso de uma maneira fácil de adicionar código personalizado que seja exibido no frontend em uma interface fácil de entender.

Por alguns meses, tenho usado o elemento HTML do bloco de código SPX (é o que foi usado acima). É uma implementação muito simples, e algo que já está instalado neste site, pois uso SPX para alguns efeitos com Oxygen. No entanto, o SPX não vem com elementos Gutenberg. Por ser um elemento HTML, eu inseriria uma caixa HTML no Gutenberg e implementaria a exibição do código assim:

Funcionou, mas eu queria um bloco de código dedicado para Gutenberg. Então, usei Blockstudio + ACF para fazer isso:

(este é o bloco que estou usando no Gutenberg para inserir os blocos de código neste post)

Meu novo bloco essencialmente fornece uma GUI visual para inserir o código como eu estava fazendo com HTML. Mas, esse bloco facilita o gerenciamento e também oferece um campo de editor de código legal diretamente no Gutenberg.

Veja como foi feito:

Primeiro, instalei o Blockstudio (plugin) no Isotropic. Normalmente, ele procurará uma pasta dentro do seu tema para carregar seus arquivos de bloco personalizados. No entanto, o Oxygen Builder, que é o que este site é construído, desativa completamente o tema, então eu precisava criar um plugin personalizado a partir deste clichê oficial para que ele funcionasse neste site.

Se você instalá-lo a partir dessa fonte, tudo o que você precisa fazer é começar a adicionar blocos à pasta "Blocks" - e já existe um bloco de demonstração para você experimentar.

O processo de criação de um bloco usando esta estrutura tem 3 etapas - configurá-lo, adicionar os campos e adicionar a marcação.

Para mim, criei um arquivo chamado iso-custom-code.php na pasta Blocks e inseri o seguinte código (bem simples!):

A parte inicial do código fornece ao Gutenberg todas as informações necessárias para registrar o bloco no editor. Por exemplo, você pode dar um título e um ícone. A partir daí, adicionei dois campos personalizados. O primeiro é um campo de rádio que você pode usar para selecionar o tipo de código. O segundo campo é um campo do editor de código.

Este não é um campo ACF padrão, mas um complemento de terceiros que usa o método ACF geral para adicionar um tipo de campo personalizado. O que é realmente legal no Blockstudio é que esse campo personalizado funcionou imediatamente e é exibido diretamente no editor Gutenberg.

Vale a pena notar que você está realmente registrando os campos personalizados diretamente neste bloco. Você pode optar por aplicar um grupo de campos a um tipo de postagem, mas não há necessidade de entrar na interface de usuário do ACF e criar campos lá, como é feito na segunda parte deste código.

Os campos são adicionados da mesma forma que você faria com PHP normal, e a documentação é relativamente fácil de entender. Você provavelmente nem precisa conhecer essa linguagem de programação para poder descobrir - https://www.advancedcustomfields.com/resources/register-fields-via-php/

A marcação real é apenas uma inserção padrão de HTML e PHP de um campo ACF personalizado. E uma vez salvo, o Bloco Gutenberg personalizado será exibido no editor e renderizado no front-end. Não há absolutamente nenhum inchaço aqui, e a marcação definida no arquivo de bloco personalizado é a marcação que será exibida no front-end do site.

O benefício final é que você pode usar os recursos nativos do Gutenberg, pois os blocos que você cria são blocos reais do Gutenberg. Você pode copiar e colar, tornar reutilizável e muito mais. Razoavelmente, você pode construir um site inteiro usando essa ferramenta apenas em Gutenberg. Também não há bloqueio de fornecedor.

Considerações sobre BlockStudio

Pessoalmente, estou usando o Gutenberg para gerenciar, estruturar e construir todas as postagens do blog neste site. No entanto, para o design e modelagem abrangente do site, o Oxygen Builder é usado.

Blockstudio vem com uma biblioteca de alguns blocos bem construídos que você pode usar como ponto de partida para suas próprias criações. Isso é muito legal porque fornece uma tonelada de exemplos de código que você pode usar para modificar no que deseja construir. Claro que é um framework e entender o PHP subjacente e como ele funciona vai facilitar muito sua vida, mas na minha opinião você não precisa conhecê-lo para poder construir blocos com esta ferramenta. Tudo que você precisa saber é como copiar e colar de várias documentações, exemplos e fontes.

Tanto a documentação do ACF quanto do Blockstudio são incrivelmente bem escritas e fáceis de seguir. E se você estiver mais familiarizado com o plug-in de campo personalizado MetaBox, esse também funcionará.

Acho que o preço se justifica pela flexibilidade e poder desta ferramenta. Comecei a usá-lo recentemente e estou animado para experimentar os recursos avançados como Twind e Alpine.