Como criar modelos Gutenberg

Uma das vantagens de criar páginas e postagens com o Gutenberg Blocks é a capacidade de salvá-los como modelos. Criar modelos para Gutenberg é uma ótima maneira de ajudar a acelerar o processo de publicação. Existem várias maneiras de criá-los. Neste artigo, veremos como criar modelos de Gutenberg.

Abordaremos três métodos para criá-los:

1. Criar um layout para adicionar à sua biblioteca Gutenberg para exportar ou clonar.
2. Criar um layout para copiar e colar quando quiser.
3. Criação de um layout para adicionar como layout padrão para páginas, postagens ou tipos de postagem personalizados.

Esses métodos nos permitem reutilizar apenas os blocos. Nenhuma outra configuração será incluída.

Por que criar modelos Gutenberg

Depois de projetar sua página ou layout de postagem, você pode salvar a lista de blocos com seus atributos para reutilizar. Isso lhe dá uma vantagem na criação de seu conteúdo, porque você não precisa se concentrar no layout. Os modelos de bloco permitem que você tenha um design consistente.

O modelo de bloco pode ter conteúdo de espaço reservado. Eles podem ser estáticos ou dinâmicos. Você pode definir o estado padrão de uma sessão do editor. Você pode até importar ou exportar seus modelos como arquivos JSON, para que possa reutilizar seus designs em vários sites ou compartilhá-los com outras pessoas. Você pode bloqueá-los para que os usuários possam adicionar conteúdo, mas não alterar os bloqueios.

Método 1: criar um modelo de layout

Os modelos de layout permitem que você use o recurso de seleção múltipla que foi originalmente adicionado para nos permitir mover ou excluir vários blocos ao mesmo tempo.

Podemos selecionar e adicionar um bloco por vez ou vários blocos por vez à nossa biblioteca de blocos reutilizáveis ​​globais. Isso facilita exportá-los como arquivos JSON.

Modelo de layout de exemplo

Eu criei um layout simples que posso usar como uma postagem de blog, análise de produto, etc. É fácil salvar isso na biblioteca para reutilizar.

Posicione o cursor no primeiro bloco que deseja incluir e arraste o mouse até o último bloco para realçá-los.

Acima do primeiro bloco, você verá três pontos à esquerda. Clique nos pontos e selecione Adicionar aos blocos reutilizáveis .

A barra de mensagem verde na parte superior mostrará que o bloco foi criado. Dê ao layout um nome que faça sentido para você e selecione Salvar .

A mensagem na barra verde mostrará que o bloco foi atualizado. Você criou o layout!

Para usá-lo, crie uma nova página ou postagem e abra as opções (três pontos). Em Ferramentas , selecione Gerenciar todos os blocos reutilizáveis .

Isso mostra uma lista de todos os seus blocos. Aqui, você pode exportar e importar seus blocos como arquivos JSON. Os blocos reutilizáveis ​​são globais. Se você editar, você editará o original. Para manter o original e criar uma nova postagem usando o layout, você precisará exportá-lo, renomeá-lo e importar o layout.

Postagens duplicadas

Felizmente, temos outra opção. Um plugin chamado Duplicate Post adiciona um recurso de clonagem para blocos de Gutenberg.

Nas configurações de Postagens Duplicadas , habilite Blocos .

Agora tenho uma opção de clonagem na biblioteca de blocos. Clone o layout desejado e edite-o. Cada layout é global, então você terá que clonar e editar cada vez que quiser usar o layout.

Método 2: uma maneira alternativa fácil de criar um modelo Gutenberg

Este método é apenas um truque simples, mas funciona. Primeiro, crie um layout que deseja reutilizar completo com qualquer conteúdo de espaço reservado.

Em seguida, mude para o editor de código. Para fazer isso, selecione os três pontos no canto superior direito. Em Editor , selecione Editor de código .

Destaque e copie o código.

Cole o código em um editor de texto e salve-o para reutilização.

Quando estiver pronto para usar o modelo, basta criar uma nova postagem, alternar para o editor de código e colar o código.

Agora tenho uma nova postagem na qual posso começar a adicionar conteúdo.

Método 3: criar um tipo de postagem personalizado

Um modelo de bloco é um argumento. Você pode adicionar o argumento a páginas e postagens ou pode criar um novo tipo de postagem. O layout será vinculado a esse tipo de postagem, portanto, quando você cria esse tipo de postagem, o layout é exibido por padrão.

Isso é ótimo para criar layouts para diferentes tipos de artigos. Por exemplo, você pode ter um tipo de postagem de revisão de produto, tipo de postagem de resumo de férias, tipo de postagem de receita, etc., e quando você carrega o tipo de postagem, ele fornece automaticamente o layout associado a ele.

A criação do modelo inclui:

• Configurando o estado padrão dinamicamente.
• Registrando-o como o layout padrão para um tipo de postagem específico.

Declarando o modelo

O próprio modelo será declarado como uma matriz de blockTypes. Isso é feito em JavaScript ou em PHP. Como mostra o manual do desenvolvedor de Gutenberg, seria assim:

const template = [

[ 'block/name', {} ], // [ blockName, attributes ]

];

Ou isto:

'template' => array(

array( 'block/name' ),

),

Registrando o modelo em tipos de postagem personalizados

O tipo de postagem personalizada também pode registrar o modelo. Pode ser assim:

function myplugin_register_book_post_type() {

$args = array(

'public' => true,

'label'  => 'Books',

'show_in_rest' => true,

'template' => array(

array( 'core/image', array(

'align' => 'left',

) ),

array( 'core/heading', array(

'placeholder' => 'Add Author...',

) ),

array( 'core/paragraph', array(

'placeholder' => 'Add Description...',

) ),

),

);

register_post_type( 'book', $args );

}

add_action( 'init', 'myplugin_register_book_post_type' );

A matriz identifica de onde vem o bloco e o nome do bloco. Neste exemplo, o array usa 'core / paragraph'. Isso significa que o bloco vem do núcleo do WordPress (ao contrário de um plugin) e seu nome é parágrafo (identificando qual bloco usar).

Registrando o modelo em páginas e postagens

Se você adicionar o modelo a páginas ou postagens, ele será carregado automaticamente sempre que você criar uma página ou postagem. Eu prefiro adicioná-los a tipos de postagem personalizados específicos porque você tem mais liberdade criativa e agiliza o processo de criação de conteúdo, tornando os modelos mais fáceis de encontrar.

Se decidir adicioná-los a páginas ou postagens, você pode usar este código:

function my_add_template_to_posts() {

$post_type_object = get_post_type_object( 'post' );

$post_type_object->template = array(

array( 'core/paragraph', array(

'placeholder' => 'Add Description...',

) ),

);

$post_type_object->template_lock = 'all';

}

add_action( 'init', 'my_add_template_to_posts' );

Modelos de aninhamento

Você pode até aninhar modelos em blocos de contêiner (por exemplo, blocos de colunas). Isso é feito atribuindo um modelo aninhado ao próprio bloco. Por exemplo:

$template = array(

array( 'core/paragraph', array(

'placeholder' => 'Add a root-level paragraph',

) ),

array( 'core/columns', array(), array(

array( 'core/column', array(), array(

array( 'core/image', array() ),

) ),

array( 'core/column', array(), array(

array( 'core/paragraph', array(

'placeholder' => 'Add a inner paragraph'

) ),

) ),

) )

);

Travando o modelo

Você pode bloquear o modelo usando este código:

'template_lock' => 'all', // or 'insert' to allow moving

Modelo de exemplo com um tipo de postagem personalizado

Quero criar o tipo de postagem personalizado chamado Livros que vimos acima. Ele exibirá o modelo de layout e incluirá uma imagem, título e parágrafo.

O código será colado no arquivo functions.php. Sempre use um tema filho ao adicionar código aos arquivos PHP. Caso contrário, o código será substituído quando você atualizar o tema.

Você terá que escrever o código manualmente (recomendo usar os exemplos de código que mostrei). Uma opção é criar o layout desejado e, em seguida, visualizar o código (clique nos três pontos no canto superior direito e selecione Editor de código na seção Editor ). Isso mostrará os blocos com seus atributos do layout que você já fez para que possa saber com antecedência como organizar os blocos em seu código.

Acesse Theme Functions (functions.php) e cole o código. Colei o código bem no final. Este é um site de teste e não pretendo manter o código, então não usei um tema filho.

Um novo tipo de postagem é adicionado ao menu do painel chamado Livros. Inclui uma lista e um link Adicionar novo . Cliquei em Adicionar novo e meu novo modelo foi adicionado ao editor, onde posso simplesmente começar a adicionar conteúdo.

Os blocos são colocados na ordem em que aparecem no código e incluem os atributos aos quais foram atribuídos. Você pode colocar quantos blocos quiser no código e fornecer a eles os atributos que desejar. Você pode criar quantos tipos de postagem personalizados desejar e cada um pode ter um layout padrão exclusivo. Este exemplo inclui texto de espaço reservado.

Reflexões finais

Esta é a nossa visão sobre como criar modelos Gutenberg. Todos os três métodos funcionam muito bem. Os modelos reutilizáveis ​​ou um dos métodos de duplicação podem ser uma escolha melhor se você não quiser criar novos tipos de post personalizados. Eu gosto dos tipos de postagem personalizados porque torna mais fácil escolher o tipo de conteúdo que você deseja criar e os modelos são pré-classificados para você.

Os tipos de postagem personalizados são fáceis de fazer se você estiver familiarizado com o código e são os mais convenientes de usar no WordPress. A principal desvantagem na criação de modelos para adicionar ao seu functions.php é que você está criando o layout no código, e não no editor de Gutenberg, portanto, não é visual.

Gosto que você possa adicionar conteúdo pré-fabricado aos seus modelos. Isso é ótimo para texto de espaço reservado para mostrar aos colaboradores quais informações vão para onde. Os modelos reutilizáveis ​​são uma ótima maneira de acelerar e agilizar seu processo de fluxo de trabalho, e são uma ótima maneira de criar páginas e layouts de postagem para compartilhar.

Nós queremos ouvir de você. Você criou modelos de Gutenberg? Conte-nos sobre sua experiência nos comentários abaixo.

Imagem em destaque via Nadia Snopek / shutterstock.com