O Guia Completo dos Padrões de Blocos de Gutenberg (III)

Esta é a terceira e última parte do guia completo sobre padrões de blocos que inclui os seguintes tópicos:

1. Introdução aos padrões de bloco
2. Inserir um padrão em uma página
3. Padrões pré-definidos e outros disponíveis em diretórios
4. Adicione padrões disponíveis em diretórios ao seu site
5. Como criar um padrão do zero
6. Como criar um padrão se você não for um desenvolvedor
7. Como transformar blocos reutilizáveis ​​em padrões de bloco
8. Temas usando padrões de bloco
9. Documentação oficial.

Na primeira parte vimos os 4 primeiros pontos de todos os tópicos abordados no guia: o que é um padrão de bloco, como inserir padrões pré-definidos em suas páginas e onde encontrar e como copiar padrões que estão disponíveis em alguns diretórios . Na segunda parte vimos o ponto 5 em detalhes: como podemos criar um padrão do zero usando código. E neste último post, veremos os últimos 4 pontos: como podemos criar um padrão sem ser um desenvolvedor, como podemos converter blocos reutilizáveis ​​em padrões de bloco, quais temas usam padrões de bloco e, finalmente, onde você pode encontrar documentação oficial sobre padrões.

6. Como criar um padrão se você não for um desenvolvedor

Embora já tenhamos visto no post anterior os passos que você teve que seguir para criar um padrão com código, neste ponto veremos que você pode criar padrões sem ser um desenvolvedor. E sim, faremos isso com um plugin. Na verdade, existe mais de um plugin para criar padrões:

• Block Patter Builder por Justin Tadlock,
• BlockMeister – Block Patter Builder por BlockMeister,
• Blocos Gutenberg do Construtor de Páginas – CoBlocks da GoDaddy

Todos os três funcionam de maneira semelhante, com algumas pequenas diferenças. Após instalar qualquer um deles, novas opções aparecem no menu de administração do WordPress para que você possa criar um novo padrão e gerenciar a lista de padrões criados.

No caso do plugin Block Patterns Builder (ou seja, a imagem à esquerda), o menu Block Patterns aparece com duas opções: uma para criar um novo padrão e outra para listar e editar padrões existentes. No caso do plugin BlockMeister (representado na imagem do meio), ele também adiciona uma terceira opção para gerenciar as categorias dos padrões. E no caso do CoBlock (mostrado na última imagem), seu menu aparece em Aparência .

Em todos os três plugins, criar um novo padrão abre o mesmo editor que você usa para editar qualquer página ou postagem. Basta dar um nome ao padrão e definir os blocos que você deseja que ele tenha. Quando seu padrão estiver pronto, basta salvá-lo.

A captura de tela anterior mostra o editor de padrão de bloco fornecido pelo plug-in BlockMeister. Como você pode ver, ele oferece várias propriedades adicionais na barra lateral direita: nome, slug, descrição, largura do padrão e categorias. O plugin Justin Tadlock, por outro lado, não permite que você adicione a categoria. E CoBlocks também permite adicionar propriedades adicionais de padrões.

Com qualquer um dos três plugins, após salvar seu padrão, ele ficará disponível clicando no botão + no editor de postagem e página para que você possa inseri-lo quando precisar.

Como você pode ver, é muito fácil criar os padrões que você deseja ter disponíveis em seus designs de página, desde que você esteja usando o plugin certo para isso.

7. Como transformar blocos reutilizáveis ​​em padrões de blocos

Se você usa o Gutenberg há algum tempo e projeta páginas com ele, aposto que também criou alguns blocos reutilizáveis ​​para replicar um determinado design em várias páginas. Pelo menos eu fiz! Lembro-me que a primeira vez que ouvi falar em padrões, pensei que eram praticamente iguais a blocos reutilizáveis… mas não são: existem algumas diferenças relevantes entre os dois conceitos.

Um bloco reutilizável é um bloco (ou grupo de blocos) que pode ser inserido em diferentes páginas, sendo o seu conteúdo o mesmo em todas elas. Ou seja, se você modificá-lo posteriormente, todas as suas instâncias deverão ser atualizadas. Portanto, se você deseja que um bloco reutilizável seja diferente do resto, primeiro você deve convertê-lo em um bloco normal.

Um padrão de bloco, por outro lado, é projetado para ser personalizado – ele serve como um design básico que você deve ajustar após inseri-lo. As opções são ilimitadas, é claro. A ideia do padrão é fornecer um ponto de partida sobre como você pode combinar blocos para torná-los atraentes.

Se você criou blocos reutilizáveis ​​com a ideia de convertê-los em blocos normais e depois personalizá-los convenientemente, faz mais sentido converter esses blocos em padrões de bloco. Como podemos fazer isso?

O plugin Reusable Block Extended do JB Audras nos fornece essa funcionalidade. Vamos ver como fazemos isso.

Após instalar o plugin, aparecerá uma opção de menu para gerenciar os blocos reutilizáveis. Se você clicar em Todos os Blocos Reutilizáveis ​​você verá a lista dos blocos que você definiu.

Como você pode ver na imagem acima, a lista de blocos reutilizáveis ​​mostra dois blocos e, para cada um deles, informa onde eles estão sendo usados, o shortcode e a função PHP para que você possa usá-los, e um botão para você pode convertê-lo em um padrão de bloco.

Após clicar no botão Converter em padrão de bloco , o padrão será criado para você e estará disponível em seu editor na categoria Convertido de blocos reutilizáveis .

8. Temas usando padrões de bloco

No momento da redação deste artigo, já existem 14 temas com padrões de blocos personalizados no diretório de temas do WordPress.org, e a lista está crescendo rapidamente.

• Twenty Twenty-One Versão 1.0 por WordPress.org
• C9 Starter Versão 2.4.4 por covertnine
• C9 Work Versão 2.3.1 por covertnine
• Seedlet Versão 1.1.2 da Automattic
• ExS Versão 0.9.0 por exstheme
• Cordero Versão 1.2.2 por uxl
• Bigwigs Versão 0.7.1 por Dinev Dmitry
• emulsão Versão 1.6.9 por nobita
• Twenty Twenty Versão 1.6 por WordPress.org
• VW Health Coaching Versão 0.6.5 da VW THEMES
• Twenty Nineteen Versão 4.9.6 por WordPress.org
• Escritos Versão 1.3.0 por Dinev Dmitry
• Twenty Seventeen Versão 2.5 por WordPress.org
• Twenty Sixteen Versão 2.3 por WordPress.org

Aproveito esta oportunidade para mencionar que se você é um desenvolvedor de temas e deseja eliminar os blocos pré-definidos (padrões de bloco de núcleo) que vêm no WordPress 5.5, você pode fazê-lo com o seguinte código:

 remove_theme_support( 'core-block-patterns' );

9. Documentação Oficial

Finalmente, aqui você tem alguns links úteis sobre padrões de blocos:

• Para o usuário final – Vídeo introdutório para bloquear padrões para entender o que são padrões, como acessá-los, como adicioná-los em postagens e páginas e entender como personalizá-los para seu conteúdo. Este vídeo é um workshop publicado pela equipe de treinamento do WordPress.
• Para o usuário final – Documentação de padrão de bloco criada pela equipe de documentação.
• Para Desenvolvedores – Block Patterns na documentação da Block API, publicada pelo Gutenberg Team e que já contei no post anterior.

E é isso! Espero que você tenha achado este guia útil. Se você acha que alguma informação está faltando, sinta-se à vontade para me dizer na seção de comentários abaixo.

Imagem em destaque por Patrick Hendry no Unsplash .