Construção de blocos sem JavaScript: testando ACF, Block Lab e Lazy Blocks

Publicados: 2019-05-17

Nem todo mundo é capaz ou está disposto a construir blocos em JavaScript ainda, e às vezes você tem que instalar três ou quatro coleções de blocos até encontrar os blocos que você gostaria.

Existe uma terceira forma: plugins que criam os blocos para você a partir de um conjunto de campos personalizados específicos, com um template para controlar a exibição de frontend dos blocos. As três opções mais populares para fazer isso incluem: Block Lab, ACF (Advanced Custom Fields) e Lazy Blocks.

Meu caso de uso para este teste é uma pequena tarefa que me propus a realizar com cada um dos plugins – criar um bloco para membros da equipe de uma empresa que inclua os seguintes campos: nome, sobrenome, foto de rosto, biografia, número de telefone, e endereço de e-mail e use o bloco em uma página em uma exibição de duas colunas com dois membros da equipe.

Para cada plugin vou demonstrar

como criar o Fieldgroup,
como criar o template para o frontend e
como usar os blocos para criar uma página de equipe.

Eu usei o Local by Flywheel como minha ferramenta de desenvolvimento local. O site de teste foi executado no WordPress 5.1.1, Gutenberg 5.4 e no Business Theme do WordPress.com

Depois de ler este post, você poderá selecionar o plugin que atende às suas necessidades.

Criando um bloco de equipe com o Block Lab

Membros da equipe XWP construíram o Block Lab e está disponível como um plugin gratuito com uma versão comercial. Eu usei o Block Lab primeiro, instalei o plugin e depois iniciei um novo bloco.

Aqui está o vídeo sobre como configurar os campos.

O próximo passo é configurar o modelo de bloco

Quando eu olhei para o local esperado, o modelo fará parte do diretório do tema em uma subpasta chamada /blocks/ Isso é algo que um desenvolvedor precisa lembrar, pois há algum bloqueio de conteúdo ao alternar os temas.

Para criar o template, abri meu editor de código, criei o arquivo block-team-member.php, e adicionei o HTML + e o PHP mínimo para referenciar os campos.

 <h2>
<?php block_field( 'first-name' );?> 
<?php block_field( 'sobrenome' );?>
</h2>
<p><img class="teamphoto" src="<?php block_field( 'picture'); ?>"
 alt="<?php block_field( 'first-name' );?> 
<?php block_field( 'last-name' );?> " largura="150"/>
<?php block_field( 'short-bio' ); ?></p>

<p><em>Você pode acessar <?php block_field( 'first-name' );?></em> 
<br/>via e-mail <span><a href="mailto:<?php block_field( 'email-address'); ?>">
<?php block_field( 'endereço de e-mail' ); ?></a></span>
 ou <br/>
via telefone: <span><?php block_field( 'extension' ); ?></span></p>

Na última etapa, finalizei a configuração deste bloco com as Propriedades do Bloco

Eu defino o ícone para uma pessoa,
selecionou os “Elementos de Layout” como Categoria e
adicionado "membro da equipe, equipe" como palavras-chave

Tudo isso é necessário para o Block inserter no editor.

Vamos ver como isso funciona.

Adicionei uma nova página chamada Conheça nossa equipe do Block Lab e adicionei os membros da equipe, usando o bloco “Team Member”.

Por enquanto, decidi ter todas as informações preenchidas dentro dos limites do editor de blocos. Durante a configuração do fieldgroup, também tive a opção de exibir controles de formulário na guia Block Options na barra lateral. No momento, determinei que é apenas uma preferência pessoal. Depois de clicar fora do bloco, o formulário desaparece e o bloco é renderizado de forma semelhante à sua representação de frontend.

Agora que tenho o bloco finalizado, posso adicionar mais membros da equipe à página. Decidi que gostaria deles em um bloco de colunas com duas colunas.

Até agora tudo bem. Não fiquei entusiasmado com o fato de a localização do modelo apontar para a pasta do tema.

Quando eu quiser mudar o tema, eu ainda gostaria de manter o bloco e o layout do bloco com meu site, então eu precisaria me certificar de copiar a pasta de blocos para o diretório do novo tema. Outra maneira é descrita na documentação do Blocklab no Github. Ele oferece dois filtros para alterar o local padrão do modelo:

“Para usar um template diferente dentro do seu tema, use o filtro block_lab_override_theme_template( $theme_template ). Para usar um template diferente fora do seu tema (por exemplo, em um plugin), use o filtro block_lab_template_path( $template_path ).”

Isso foi bastante fácil de configurar, mesmo se você não for um desenvolvedor PHP, provavelmente poderá usar a função block-field() do PHP e certifique-se de referenciar os nomes de campo corretos.

O Block Lab, em essência, fornece um método para criar os campos e configurar as propriedades do bloco em uma tela, e então você precisa adicionar o modelo de bloco correspondente a uma pasta /blocks/ no diretório do seu tema. É bastante direto.

Criando um bloco de equipe com o ACF 5.8

ACF (Advanced Custom Fields) versão 5.8 saiu com um construtor de blocos (disponível apenas na versão Pro). Para meu teste eu usei o ACF 5.8 RC 1. A versão final já está disponível. Elliot Condon é o autor do plugin e a primeira versão foi lançada em 2011. O plugin se tornou uma ferramenta de desenvolvimento extremamente popular para freelancers e agências e tem mais de 1 milhão de instalações.

Seu sucesso e versatilidade tornam a criação do grupo de campo um processo mais complexo em comparação com os outros dois plugins. A versão Pro 5.8 contém a primeira versão de sua ferramenta de construção de blocos.

Esta é a visualização do administrador do grupo Field “Team Member”.

Agora, como faço isso em um bloco? A documentação é abrangente o suficiente. Nota: Neste teste eu fui em uma ordem um pouco diferente…

Comecei com o Grupo de Campo e precisei voltar para aquela tela de admin depois de cadastrar o bloco (veja abaixo) .

Usei dois arquivos. Primeiro, eu precisava registrar o bloco no functions.php do meu tema. Para o código de renderização do template/block eu usei content-block-team-member.php também para ser armazenado na pasta do tema ativo.

Você verá como esses dois se encaixam em um segundo. O resto do trabalho é feito pelo plugin no back-end.

Então vamos escrever o Block Code em PHP

O primeiro trecho é o registro do bloco. Eu dei um nome, título, uma descrição, aponte para o modelo de renderização, dei uma categoria, um ícone e algumas palavras-chave, sob as quais o produtor de conteúdo pode encontrar o bloco no Block Inserter. Rolei até o final do functions.php do meu tema e adicionei este trecho:

 function register_acf_blocks() {
   // registra um bloco de membro da equipe.
   acf_register_block(array(
       'nome' => 'acf-team-membro',
       'title' => __('ACF Team Member'),
       'description' => __('Um bloco de membro de equipe personalizado criado via ACF 5.8'),
       'render_template' => 'content-block-team-member.php',
       'categoria' => 'formatação',
       'icon' => 'comentários do administrador',
       'palavras-chave' => array( 'membro da equipe', 'equipe' ),
   ));
}
// Verifica se a função existe e conecta no setup.
if( function_exists('acf_register_block') ) {
   add_action('acf/init', 'register_acf_blocks');
}

Este código é direto da documentação e acabei de alterar alguns valores.

Na próxima seção eu criei o template de renderização de blocos. O nome do arquivo precisa corresponder ao atributo “render_template” no texto acima, que é “ content-block-team-member.php ”

Eu também apenas segui a documentação do ACF e alterei apenas alguns valores e atualizei o código de exibição.

 <?php
// cria o atributo id para um estilo específico
$id = 'membro da equipe' . $block['id'];

// cria a classe de alinhamento ("alignwide") da configuração do bloco ("wide")
$align_class = $block['align'] ? 'alinhar' . $block['align'] : '';

// Carregar valores e atribuir padrões para os campos do bloco.
$short_bio = get_field('short_bio') ?: 'a biografia curta vai aqui... ';
$first_name = get_field('first_name') ?: 'Primeiro nome';
$last_name = get_field('last_name') ?: 'Sobrenome';
$imagem = get_field('imagem');
$email_address = get_field('email_address');
$extensão = get_field('extensão');
?>

" class="team-membro ">
       
   
   " alt="" alt=" " largura="150"/>

Como comecei com o Fieldgroup, precisei voltar e ter certeza que o grupo está associado ao bloco que acabei de cadastrar. Abaixo da tela Fieldgroup criei uma regra para o Location: Necessário ler: “Mostrar este field group se o Block for igual a ACF Team Member.

Agora vamos ver como isso funciona no editor de blocos quando adiciono dois membros.

Foi uma experiência interessante. Você pode usar o formulário na seção do editor para inserir os dados. Outra opção é inserir os dados nos campos do formulário disponíveis na barra lateral e você verá a atualização do bloco em tempo real. Você pode alternar entre os dois métodos, mas clicando no botão “Mudar para editar” ou “Mudar para visualização”, dependendo do método que você está usando agora.

A interface do usuário do editor de blocos funciona bem. Vale a pena passar pela configuração e código mais elaborados necessários.

Criando um bloco de equipe com blocos preguiçosos

O terceiro plugin neste teste é chamado de “Lazy Blocks” por Nikita do nkdev.info, a mesma equipe que também publicou a coleção de blocos GhostKit.

Ele não apenas me permite armazenar informações em post_content, mas também tenho a opção de armazená-las na tabela post_meta.

Aqui está um vídeo de como usar a interface para criar os campos.

Como esta tela de administração está focada em obter todas as informações para criar os blocos, à esquerda criei meus campos e na barra lateral. Preenchi as informações necessárias para registrar um bloco com o editor.

Por baixo, consegui adicionar o HTML para frontend e backend. A sintaxe é ainda mais fácil do que Block Lab e, claro, muito mais fácil do que a modelagem do ACF.

Não precisei adicionar nenhum código ao functions.php do meu tema nem precisei criar arquivos adicionais com o código do meu modelo.

Você pode adicionar tudo aqui, auxiliado por realce de sintaxe e tags de mesclagem em vez de chamadas de função. A documentação mostra várias maneiras de escrever seu código de modelo. Eu sou definitivamente um fã de Handlebars (modelagem semântica), pois está neste contexto muito mais próximo das tags de mesclagem de outros sistemas.

Copiei/colei o mesmo código na guia “Editor HTML”, para poder ver a exibição do frontend abaixo dos campos do formulário.

Vamos usá-lo.

Isso parece funcionar. Foi um pouco estranho que o formulário não desaparecesse quando eu desmarquei o bloco. Ocupa muito espaço no editor. Embora eu quisesse ter os membros da equipe em um bloco de duas colunas, não consegui arrastar e soltar os dois blocos em um bloco de colunas. Eu mencionei isso no meu tópico de suporte e nK respondeu: “…ocultar controles quando o bloco não está selecionado é um bom recurso, que já foi adicionado no ACF Blocks e será adicionado no Lazy Blocks em breve.” Aqui você tem - tudo no devido tempo.

Conclusão: Complexo, Evoluído ou Fácil.

O ACF 5.8 possui um recurso de construção de blocos muito robusto, e todos que usam o plugin para construir sites ficarão muito felizes em poder criar blocos dinâmicos para seus clientes. É bem pensado e desenvolvedores de todos os conjuntos de habilidades começarão a trabalhar rapidamente.

Alguém que não é bem versado em PHP terá seu quinhão de tentativa e erro para fazer tudo funcionar. Ficará ainda mais complicado quando os requisitos para os blocos forem mais envolvidos e além do caso de uso deste teste. Esta não é uma ferramenta para iniciantes do WordPress ou implementadores de sites DIY que não escrevem muito código.

Por enquanto, apenas a versão ACF 5.8 Pro vem com o recurso construtor de blocos. Condon está pensando em torná-lo um plugin autônomo. (Veja o que os Twitteratti pensam sobre a ideia…)

O Block Lab está em seus estágios iniciais de desenvolvimento. Ele consegue abstrair a maior parte da arquitetura de blocos e reduz a quantidade de código que precisa ser escrito. A documentação é muito útil. O modelo é armazenado em um arquivo separado e precisa ser mantido com o restante dos arquivos do tema. Se nós da minha empresa o usássemos para qualquer um de nossos projetos, armazenaríamos o arquivo de modelo com um de nossos plugins auxiliares, para que nossos clientes possam alternar temas sem perder o conteúdo e a exibição dos blocos construídos com o Block Lab.

A versão Pro possui recursos adicionais, como campos de repetidor, importação/exportação de blocos, campos de objeto do usuário, campo de mapa e muitos outros recursos de bloco.

XWP é uma agência que trabalha com clientes corporativos na hospedagem VIP do WordPress.com e outras corporações. Os membros de sua equipe estão contribuindo para outras grandes ideias no espaço WordPress, incluindo o Customizer, AMP e Tide. Espero que o plug-in permaneça e cresça com o Gutenberg Fase 2 em um sistema robusto para implementadores de sites, agências e desenvolvedores de temas.

Lazy Blocks é uma delícia de configurar e, como mencionado, sou fã da sintaxe de modelagem do Handelbars. É fácil de aprender mesmo para iniciantes e, com um pouco de prática, um proprietário de site poderá criar blocos Gutenberg específicos para seu site. O manuseio de blocos no editor, embora funcionando, é um pouco desajeitado, pois a exibição não alterna entre o estado de seleção de bloco e o estado de desmarcação no momento.

Se houver um requisito de ter campos adicionais para uma página ou uma seção de uma postagem, o Lazy Blocks é uma ótima ferramenta para prototipar e passar rapidamente da ideia à prova de conceito.

A única ressalva: não consegui descobrir quem são as pessoas por trás do nkdev.info e o nome Nikita. O site apenas revela que é uma empresa jovem, mas nada mais. Se você usar o plug-in, certifique-se de ter o Plano B em vigor, caso os desenvolvedores abandonem o plug-in antes que ele decole.

O ACF 5.8 é bastante complexo; Block Lab é muito flexível e apenas semi-complexo; e Lazy Blocks tem um nome adequado e é o mais fácil de usar. Nenhum deles permite que você saia sem escrever código, pois cada bloco precisa de alguma saída de exibição em HTML.

Deixe-me saber o que você pensa sobre esses três plugins geradores de blocos. Além disso, se você encontrou outro plugin que permite construir blocos sem entrar em Javascript, quero saber sobre isso! Por favor, compartilhe seus pensamentos e descobertas nos comentários!