Na era Gutenberg, o processo de design não está estritamente vinculado aos temas de WordPress. O CMS oferece aos usuários todas as ferramentas de design necessárias para criar um ótimo layout do site, e o bloco pretende ser algo que acrescente ainda mais ferramentas de construção e design.
Os modelos de blocos são um recurso que libera ainda mais poderes na criação de sites. De acordo com o Manual do Editor de Blocos:
Um modelo de bloco é definido como uma lista de itens de bloco. Esses blocos podem ter atributos predefinidos, conteúdo de espaço reservado e ser estáticos ou dinâmicos. Os modelos de bloco permitem que você especifique um estado inicial padrão para uma sessão do editor.
Em outras palavras, os modelos de bloco são coleções pré-construídas de blocos usados para definir um estado padrão dinamicamente no cliente.
👉 Os modelos de bloco são diferentes dos arquivos de modelo.
Os arquivos de modelo são arquivos PHP, como index.php, page.php e single.php, e funcionam da mesma forma com temas clássicos e de bloco, de acordo com a hierarquia de modelos do WordPress. Nos temas clássicos, esses arquivos são escritos em PHP e HTML. Nos temas de bloco, eles são inteiramente feitos de blocos.
👉 Os modelos de bloco são diferentes dos padrões de bloco.
Os padrões de blocos precisam ser adicionados manualmente às suas páginas, enquanto os modelos de blocos fornecem automaticamente o layout inicial e os padrões quando você ou os membros da sua equipe criam uma nova publicação.
Você também pode vincular modelos de bloco específicos aos seus tipos de publicação personalizados e bloquear alguns blocos ou recursos para forçar os usuários a usar seus padrões ou evitar erros.
Você tem algumas maneiras de criar modelos de bloco. Você pode usar a API de blocos para declarar uma array de tipos de blocos via PHP ou pode criar um tipo de bloco personalizado usando o componente InnerBlocks.
Vamos começar!
Como criar um modelo de bloco usando PHP
Se você é um desenvolvedor à moda antiga, pode definir um modelo de bloco personalizado usando um plugin ou o functions.php do seu tema. Se optar por usar um plugin, abra seu editor de código favorito, crie um novo arquivo PHP e adicione o seguinte código:
<?php
/*
* Plugin Name: My Block Templates
* Plugin URI: https://example.com/
* Description: An example plugin
* Version: 1.0
* Requires at least: 5.5
* Requires PHP: 8.0
* Author: Your name
* Author URI: https://author.example.com/
* License: GPL v2 or later
* License URI: https://www.gnu.org/licenses/gpl-2.0.html
* Update URI: https://example.com/my-plugin/
*/
function myplugin_register_my_block_template() {
$post_type_object = get_post_type_object( 'post' );
$post_type_object->template = array(
array( 'core/image' ),
array( 'core/heading' ),
array( 'core/paragraph' )
);
}
add_action( 'init', 'myplugin_register_my_block_template' );No código acima, get_post_type_object recupera um tipo de artigo pelo nome.
Salve seu arquivo na pasta wp-content/plugins, navegue até a tela Plugins no painel do WordPress e ative o plugin My Block Templates.
Agora, ao criar um novo artigo, o editor já abre com seu modelo de bloco, que inclui uma imagem, um título e um texto.
Você também pode adicionar uma array de configurações para cada bloco e criar estruturas aninhadas de blocos. A função a seguir cria um modelo de bloco mais avançado com blocos internos e configurações:
function myplugin_register_my_block_template() {
$block_template = array(
array( 'core/image' ),
array( 'core/heading', array(
'placeholder' => 'Add H2...',
'level' => 2
) ),
array( 'core/paragraph', array(
'placeholder' => 'Add paragraph...'
) ),
array( 'core/columns',
array(),
array(
array( 'core/column',
array(),
array(
array( 'core/image' )
)
),
array( 'core/column',
array(),
array(
array( 'core/heading', array(
'placeholder' => 'Add H3...',
'level' => 3
) ),
array( 'core/paragraph', array(
'placeholder' => 'Add paragraph...'
) )
)
)
)
)
);
$post_type_object = get_post_type_object( 'post' );
$post_type_object->template = $block_template;
}
add_action( 'init', 'myplugin_register_my_block_template' );Você pode ver o resultado do código acima na imagem a seguir:
Até agora, usamos apenas os blocos principais. Mas você também pode incluir blocos personalizados ou padrões de blocos em seus modelos de blocos, conforme mostrado no exemplo a seguir:
function myplugin_register_my_block_template() {
$post_type_object = get_post_type_object( 'page' );
$post_type_object->template = array(
array( 'core/pattern', array(
'slug' => 'my-plugin/my-block-pattern'
) )
);
}
add_action( 'init', 'myplugin_register_my_block_template' );Não há muita diferença caso você decida criar um modelo de bloco padrão para um tipo de artigo personalizado já registrado. Basta alterar o tipo de artigo de get_post_type_object para o nome do tipo de artigo personalizado, conforme mostrado no exemplo a seguir:
<?php
function myplugin_register_my_block_template() {
$post_type_object = get_post_type_object( 'book' );
$post_type_object->template = array(
array( 'core/image' ),
array( 'core/heading' ),
array( 'core/paragraph' )
);
}
add_action( 'init', 'myplugin_register_my_block_template' );Agora que você sabe como criar modelos de bloco, podemos seguir em frente e explorar mais casos de uso. Vamos nos aprofundar um pouco mais.
Modelos de bloco com tipos de artigo personalizados
Como mencionamos anteriormente, você pode anexar um modelo de bloco a um tipo de artigo personalizado. Você pode fazer isso depois que o tipo de artigo personalizado já tiver sido registrado, mas talvez prefira definir um modelo de bloco no registro do tipo de artigo personalizado.
Nesse caso, você pode usar os argumentos template e template_lock da função register_post_type da função:
function myplugin_register_book_post_type() {
$args = array(
'label' => esc_html__( 'Books' ),
'labels' => array(
'name' => esc_html__( 'Books' ),
'singular_name' => esc_html__( 'Book' ),
),
'public' => true,
'publicly_queryable' => true,
'show_ui' => true,
'show_in_rest' => true,
'rest_namespace' => 'wp/v2',
'has_archive' => true,
'show_in_menu' => true,
'show_in_nav_menus' => true,
'supports' => array( 'title', 'editor', 'thumbnail' ),
'template' => array(
array( 'core/paragraph', array(
'placeholder' => 'Add paragraph...'
) ),
array( 'core/columns',
array(),
array(
array( 'core/column',
array(),
array(
array( 'core/image' )
)
),
array( 'core/column',
array(),
array(
array( 'core/heading', array(
'placeholder' => 'Add H3...',
'level' => 3
) ),
array( 'core/paragraph', array(
'placeholder' => 'Add paragraph...'
) )
)
)
)
)
)
);
register_post_type( 'book', $args );
}
add_action( 'init', 'myplugin_register_book_post_type' );E é isso. A imagem abaixo mostra o modelo de bloco na interface do editor para um tipo de artigo personalizado.
Quando terminar com o layout, você pode querer mexer nas configurações do bloco para ajustar o comportamento e a aparência do seu modelo de bloco.
Ajustando o modelo de bloco com atributos de bloco
Definimos um modelo de bloco como uma lista de blocos. Cada item na lista deve ser um array contendo o nome do bloco e um array de atributos opcionais. Com arrays aninhados, você pode querer adicionar um terceiro array para blocos dependentes.
Um modelo com um bloco de Colunas pode ser representado da seguinte forma:
$template = array( 'core/columns',
// attributes
array(),
// nested blocks
array(
array( 'core/column' ),
array( 'core/column' )
)
);Como mencionado acima, o segundo array da lista é um array opcional de atributos de bloco. Esses atributos permitem que você personalize a aparência do seu modelo para que você ou seus usuários possam se concentrar no conteúdo da publicação sem se preocupar com o layout e o design da página.
Para começar, você pode usar o editor de blocos para criar uma estrutura de blocos que possa ser usada como referência para o seu modelo.
Adicione seus blocos, personalize o layout e os estilos e, em seguida, passe para o editor de código e encontre os delimitadores de blocos.
Delimitadores de bloco armazenam configurações e estilos do bloco em pares chave/valor. Você pode simplesmente copiar e colar chaves e valores da marcação do bloco para preencher seu array de atributos:
$template = array( 'core/columns',
array(
'verticalAlignment' => 'center',
'align' => 'wide',
'style' => array(
'border' => array(
'width' => '2px',
'radius' => array(
'topLeft' => '12px',
'topRight' => '12px',
'bottomLeft' => '12px',
'bottomRight' => '12px'
)
)
),
'backgroundColor' => 'tertiary'
),
array(
array( 'core/column' ),
array( 'core/column' )
)
);Repita o processo para cada bloco no modelo e você terá terminado.
$template = array(
array( 'core/paragraph', array(
'placeholder' => 'Add paragraph...'
) ),
array( 'core/columns',
array(
'verticalAlignment' => 'center',
'align' => 'wide',
'style' => array(
'border' => array(
'width' => '2px',
'radius' => array(
'topLeft' => '12px',
'topRight' => '12px',
'bottomLeft' => '12px',
'bottomRight' => '12px'
)
)
),
'backgroundColor' => 'tertiary',
'lock' => array(
'remove' => true,
'move' => true
)
),
array(
array( 'core/column',
array( 'verticalAlignment' => 'center' ),
array(
array( 'core/image',
array(
'style' => array( 'border' => array( 'radius' => '8px' ) )
)
)
)
),
array( 'core/column',
array( 'verticalAlignment' => 'center' ),
array(
array( 'core/heading', array(
'placeholder' => 'Add H3...',
'level' => 3
) ),
array( 'core/paragraph', array(
'placeholder' => 'Add paragraph...'
) )
)
)
)
)
);Bloqueando blocos
Você pode bloquear blocos específicos ou todos os blocos incluídos em seu modelo usando a propriedade template_lock do $post_type_object.
O bloqueio de modelos pode ser muito útil quando você tem um blog com vários autores e deseja impedir que todos ou determinados usuários alterem o layout do modelo de bloco.
No exemplo a seguir, estamos bloqueando todos os blocos do modelo de bloco:
function myplugin_register_my_block_template() {
$post_type_object = get_post_type_object( 'post' );
$post_type_object->template = array(
array( 'core/image' ),
array( 'core/heading' ),
array( 'core/paragraph' )
);
$post_type_object->template_lock = 'all';
}
add_action( 'init', 'myplugin_register_my_block_template' );Os blocos bloqueados mostram um ícone de bloqueio na barra de ferramentas de blocos e na exibição de lista:
Os usuários podem desbloquear blocos no menu Options, disponível na barra de ferramentas de blocos.
Quando você clica em Unlock, um pop-up modal permite que você ative/desative o movimento, impeça a remoção ou ambos:
template_lock Você pode assumir um dos seguintes valores:
all– Impede que os usuários adicionem novos blocos, movam e removam blocos existentesinsert– Impede que os usuários adicionem novos blocos e removam blocos existentescontentOnly– Os usuários só podem editar o conteúdo dos blocos incluídos no modelo. Observe que o sitecontentOnlysó pode ser usado no nível do padrão ou do modelo e deve ser gerenciado com código. (Consulte também APIs de bloqueio).
Se quiser bloquear blocos específicos, você pode usar o atributo lock em cada bloco:
function myplugin_register_my_block_template() {
$post_type_object = get_post_type_object( 'post' );
$post_type_object->template = array(
array( 'core/image' ),
array( 'core/heading' ),
array( 'core/paragraph', array(
'lock' => array(
'remove' => true,
'move' => true
)
) )
);
}
add_action( 'init', 'myplugin_register_my_block_template' );O atributo lock pode assumir um dos seguintes valores:
remove: Impede que os usuários removam um bloco.move: Impede que os usuários movam um bloco.
E você também pode usar lock em conjunto com template_lock para ajustar o comportamento dos blocos incluídos no modelo de bloco. No exemplo a seguir, estamos bloqueando todos os blocos, exceto o cabeçalho:
function myplugin_register_my_block_template() {
$post_type_object = get_post_type_object( 'post' );
$post_type_object->template = array(
array( 'core/image' ),
array( 'core/heading', array(
'lock' => array(
'remove' => false,
'move' => false
)
) ),
array( 'core/paragraph' )
);
$post_type_object->template_lock = 'all';
}
add_action( 'init', 'myplugin_register_my_block_template' );A imagem abaixo mostra o modelo de bloco com blocos bloqueados e desbloqueados:
Os desenvolvedores de blocos também podem usar o atributo lock na definição do bloco no nível attributes (consulte também Bloqueio individual de blocos).
Impedindo que os usuários desbloqueiem blocos
Se você testou o código discutido até agora no artigo, deve ter percebido que pode desbloquear os blocos incluídos no seu modelo (ou qualquer outro bloco) na interface do editor. Por padrão, todos os usuários com acesso de edição podem bloquear ou desbloquear blocos e, ao fazer isso, você ignora as configurações do modelo.
Você pode controlar se os blocos podem ser bloqueados ou desbloqueados usando o filtro block_editor_settings_all filtro.
O filtro enviará qualquer configuração para o Editor inicializado, o que significa que qualquer configuração do editor usada para configurar o editor na inicialização pode ser filtrada por um plugin WordPress em PHP antes de ser enviada.
A função de callback que você usará com esse filtro recebe dois parâmetros:
$settings: Uma array de configurações do editor.$context: Uma instância da classeWP_Block_Editor_Context, um objeto que contém informações sobre um editor de blocos sendo renderizado.
O que você precisa fazer é filtrar $settings['canLockBlocks'], definindo como true ou false, conforme mostrado no exemplo a seguir:
add_filter( 'block_editor_settings_all',
function( $settings, $context ) {
if ( $context->post && 'book' === $context->post->post_type ) {
$settings['canLockBlocks'] = false;
}
return $settings;
}, 10, 2
);Você pode excluir funções de usuário específicas do bloqueio/desbloqueio de blocos executando uma verificação condicional nos recursos atuais do usuário.
No exemplo a seguir, estamos verificando se o usuário atual pode editar os artigos de outros (em outras palavras, se a função do usuário atual é Editor ou superior):
add_filter( 'block_editor_settings_all',
function( $settings, $context ) {
if ( $context->post && 'book' === $context->post->post_type ) {
$settings['canLockBlocks'] = current_user_can( 'edit_others_posts' );
}
return $settings;
}, 10, 2
);As imagens a seguir comparam o estado inicial do editor para um administrador e um autor. Primeiro, Admin:
Agora, o Author:
E você pode verificar qualquer condição no usuário atual. No exemplo a seguir, estamos impedindo que um usuário específico bloqueie/desbloqueie blocos:
add_filter( 'block_editor_settings_all',
function( $settings, $context ) {
$user = wp_get_current_user();
if ( in_array( $user->user_email, [ '[email protected]' ], true ) ) {
$settings['canLockBlocks'] = false;
}
return $settings;
}, 10, 2
);Você pode combinar mais condições para ter um controle granular sobre quem tem permissão para bloquear/desbloquear blocos em seu modelo e quem não tem. Esse é um aspecto do que chamamos de “Experiência Personalizada“.
Mas atenção! Já experimentou editar o conteúdo do seu artigo pelo editor de código? Você pode se surpreender ao descobrir que usuários que não podem destravar blocos pela interface gráfica ainda assim podem modificar o conteúdo usando o editor de código.
Desativando o editor de código para funções de usuário específico
Por padrão, todos os usuários que podem editar conteúdo podem acessar o editor de código. Isso pode anular suas configurações de bloqueio e alguns usuários podem arruinar ou excluir o layout do modelo.
Você também pode usar block_editor_settings_all para filtrar a configuração codeEditingEnabled para impedir que funções de usuário específicas acessem o editor de código. Aqui está o código:
add_filter( 'block_editor_settings_all',
function( $settings, $context ) {
if ( $context->post && 'book' === $context->post->post_type ) {
$settings['canLockBlocks'] = current_user_can( 'edit_others_posts' );
$settings['codeEditingEnabled'] = current_user_can( 'edit_others_posts' );
}
return $settings;
}, 10, 2
);Com esse código em vigor, os usuários que não tiverem o recurso edit_others_posts não terão permissão para acessar o editor de código. A imagem abaixo mostra a barra de ferramentas Opções para um autor.
É isso que você precisa saber para criar modelos de blocos via PHP. Agora, se você é um desenvolvedor de blocos Gutenberg e adora trabalhar com JavaScript, pode preferir optar por uma abordagem diferente.
Como criar um modelo usando JavaScript
Adicionar um modelo de bloco a um artigo funciona de forma diferente se você decidir usar JavaScript. Você ainda pode construir um modelo, mas precisa criar um bloco personalizado e usar o componente InnerBlocks, conforme discutido em nosso guia de desenvolvimento de blocos Gutenberg.
O InnerBlocks exporta um par de componentes que podem ser usados em implementações de blocos para permitir o conteúdo de blocos aninhados. – Fonte: InnerBlocks
Como isso funciona?
Você pode usar o InnerBlocks em seus blocos personalizados da mesma forma que qualquer outro componente do Gutenberg.
Primeiro você precisa incluí-lo em um pacote junto com outras dependências:
import { registerBlockType } from '@wordpress/blocks';
import { useBlockProps, InnerBlocks } from '@wordpress/block-editor';Em seguida, você definirá as propriedades do InnerBlocks. No exemplo a seguir, declararemos uma constante TEMPLATE que você usará para definir o valor da propriedade template do elemento InnerBlocks:
const TEMPLATE = [
[ 'core/paragraph', { 'placeholder': 'Add paragraph...' } ],
[ 'core/columns', { verticalAlignment: 'center' },
[
[
'core/column',
{ templateLock: 'all' },
[
[ 'core/image' ]
]
],
[
'core/column',
{ templateLock: 'all' },
[
[
'core/heading',
{'placeholder': 'Add H3...', 'level': 3}
],
[
'core/paragraph',
{'placeholder': 'Add paragraph...'}
]
],
]
]
]
];
registerBlockType( metadata.name, {
title: 'My Template',
category: 'widgets',
edit: ( props ) => {
return(
<div>
<InnerBlocks
template={ TEMPLATE }
templateLock="insert"
/>
</div>
)
},
save() {
const blockProps = useBlockProps.save();
return(
<div { ...blockProps }>
<InnerBlocks.Content />
</div>
)
}
} );Esse código é bastante simples. Você deve notar que usamos o atributo templateLock duas vezes, primeiro no nível do bloco e depois dentro do elemento InnerBlocks. Para obter a lista completa das propriedades disponíveis, consulte a referênciaInnerBlocks e o Manual do Editor de Blocos.
Agora, experimente você mesmo.
Primeiro, crie uma instalação local de WordPress usando o DevKinsta ou qualquer outro ambiente de desenvolvimento local.
Em seguida, inicie sua ferramenta de linha de comando, navegue até a pasta de Plugins e execute o seguinte comando:
npx @wordpress/create-block template-blockVocê pode alterar o nome do bloco para o que quiser. Se você preferir controlar todo e qualquer aspecto do seu bloco inicial, basta seguir as instruções fornecidas em nosso guia definitivo de desenvolvimento de blocos.
Quando a instalação estiver concluída, execute os seguintes comandos:
cd template-block
npm startAbra o painel de controle do WordPress e navegue até a tela Plugins. Encontre e ative o plugin Template Block.
Em seu editor de código favorito, abra o arquivo index.js que você encontra na pasta src. Copie e cole o código acima, salve o index.js e, de volta ao painel do WordPress, crie um novo artigo ou página.
Abra o inseridor de blocos e role para baixo até a seção Widgets. Lá você deve encontrar seu bloco personalizado.
Adicione ao artigo, personalize o conteúdo e salve o artigo.
Se você mudar para o editor de código, verá a seguinte marcação:
<!-- wp:create-block/template-block -->
<div class="wp-block-create-block-template-block"><!-- wp:paragraph {"placeholder":"Add paragraph..."} -->
<p></p>
<!-- /wp:paragraph -->
<!-- wp:columns {"verticalAlignment":"center"} -->
<div class="wp-block-columns are-vertically-aligned-center"><!-- wp:column {"templateLock":"all"} -->
<div class="wp-block-column"><!-- wp:image -->
<figure class="wp-block-image"><img alt=""/></figure>
<!-- /wp:image --></div>
<!-- /wp:column -->
<!-- wp:column {"templateLock":"all"} -->
<div class="wp-block-column"><!-- wp:heading {"level":3,"placeholder":"Add H3..."} -->
<h3 class="wp-block-heading"></h3>
<!-- /wp:heading -->
<!-- wp:paragraph {"placeholder":"Add paragraph..."} -->
<p></p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div>
<!-- /wp:create-block/template-block -->Agora, visualize o resultado em seu navegador favorito. Se a aparência do bloco precisar ser melhorada, você pode simplesmente alterar os estilos no arquivo style.scss.
Quando você estiver satisfeito com suas personalizações, interrompa o processo e execute npm run build. Todos os arquivos do seu projeto serão compactados e estarão disponíveis para produção na nova pasta build.
Isso é fácil e poderoso, não é?
Agora você pode criar modelos avançados de blocos que podem ser incluídos em seu conteúdo com apenas alguns cliques.
Resumo
Adicionar um modelo de bloco ao seu artigo ou tipos de artigos personalizados pode acelerar e melhorar significativamente a experiência de criação e edição no seu site WordPress. Modelos de bloco são especialmente úteis em sites com múltiplos usuários, onde vários usuários têm permissão para criar conteúdo e você precisa que eles sigam o mesmo formato.
Isso também permite que você crie layouts uniformes sem ter que adicionar manualmente um padrão de bloco toda vez que criar um novo artigo. Pense em um site de avaliações ou receitas, onde cada página deve respeitar a mesma estrutura.
Combinando o conhecimento que você terá adquirido na criação de blocos personalizados estáticos ou dinâmicos, padrões de blocos e modelos de bloco, você sempre poderá identificar a solução mais eficiente e eficaz para construir qualquer tipo de site WordPress.
Agora é com você. Já explorou os modelos de bloco? Em qual caso você acha que eles são mais adequados? Por favor, compartilhe sua experiência nos comentários abaixo.
Carlo is a passionate lover of webdesign and front-end development. He has been playing with WordPress for more than 20 years, also in collaboration with Italian and European universities and educational institutions. He has written hundreds of articles and guides about WordPress, published both on Italian and international websites, as well as on printed magazines. You can find him on LinkedIn.
Deixe um comentário