Registre um modelo de bloco para o WordPress Block Editor (Gutenberg)
No meu guia anterior, explorei o poder dos padrões de blocos. Os modelos de bloco são semelhantes, mas em vez de depender de seu cliente para inserir padrões de bloco no editor, ele fornece um layout completo assim que insere uma nova postagem.
Pré-requisitos
- Instalação do WordPress
- Editor de código
Crie seu modelo de bloco
Neste exemplo vou inserir o mesmo padrão de bloco que criei no meu guia anterior, mas como um modelo de bloco.
Nesse guia, copiamos o HTML da saída do editor. Neste guia, faremos algo um pouco diferente e criaremos uma matriz de namespaces, propriedades e conteúdo de blocos.
Em sua forma mais simples, um modelo de bloco se parece um pouco com isso:
$block_template = [
[ 'core/heading', [ 'level' => 2, 'content' => 'Example Block Template' ] ],
[ 'core/paragraph', [ 'content' => 'Lorem ipsum dolor sit amet labore cras venenatis.' ] ],
];
Como você pode ver, é um array, que contém blocos no seguinte padrão:
- Bloquear namespace
- Bloquear Atributos
No entanto, queremos usar blocos aninhados, então vamos passar um terceiro parâmetro para este array de blocos, que é o innerBlocks.
Quer apenas a colocação do bloco?
Observe que você pode deixar os atributos vazios, apenas para fornecer os blocos sem conteúdo definido.
A matriz para criar o mesmo bloco que criamos no guia de padrões de blocos, precisamos de uma matriz mais complexa, assim:
$block_template = [
[
'core/group',
[],
[
[
'core/heading',
[
'level' => 2,
'content' => 'Example Block Template',
]
],
[
'core/paragraph',
[
'content' => 'Lorem ipsum dolor sit amet labore cras venenatis.',
]
],
[
'core/columns',
[],
[
[
'core/column',
[],
[
[
'core/heading',
[
'level' => 3,
'content' => 'Sub Heading 1',
]
],
[
'core/paragraph',
[
'content' => 'Lorem ipsum dolor sit amet id erat aliquet diam ullamcorper tempus massa eleifend vivamus.',
]
],
]
],
[
'core/column',
[],
[
[
'core/heading',
[
'level' => 3,
'content' => 'Sub Heading 2',
]
],
[
'core/paragraph',
[
'content' => 'Morbi augue cursus quam pulvinar eget volutpat suspendisse dictumst mattis id.',
]
],
]
],
],
],
]
]
];
Registre o modelo de bloco
Registrando um modelo de bloco para um tipo de postagem existente
Para registrar um modelo de bloco para um tipo de postagem existente (como o posttipo de postagem), você pode usar o código abaixo para substituir o objeto de tipo de postagem.
function register_block_template() {
$post_type_object = get_post_type_object( 'post' );
$post_type_object->template = $block_template;
$post_type_object->template_lock = 'all';
}
add_action( 'init', 'register_block_template' );
Este código simplesmente define o modelo e (opcionalmente) o [template_lock](https://wholesomecode.ltd/#template-lock)tipo.
O código completo ficaria assim:
function register_block_template() {
$block_template = [
[
'core/group',
[],
[
[
'core/heading',
[
'level' => 2,
'content' => 'Example Block Template',
]
],
[
'core/paragraph',
[
'content' => 'Lorem ipsum dolor sit amet labore cras venenatis.',
]
],
[
'core/columns',
[],
[
[
'core/column',
[],
[
[
'core/heading',
[
'level' => 3,
'content' => 'Sub Heading 1',
]
],
[
'core/paragraph',
[
'content' => 'Lorem ipsum dolor sit amet id erat aliquet diam ullamcorper tempus massa eleifend vivamus.',
]
],
]
],
[
'core/column',
[],
[
[
'core/heading',
[
'level' => 3,
'content' => 'Sub Heading 2',
]
],
[
'core/paragraph',
[
'content' => 'Morbi augue cursus quam pulvinar eget volutpat suspendisse dictumst mattis id.',
]
],
]
],
],
],
]
]
];
$post_type_object = get_post_type_object( 'post' );
$post_type_object->template = $block_template;
$post_type_object->template_lock = 'all';
}
add_action( 'init', 'register_block_template' );
Registrando um modelo de bloco para um novo tipo de postagem
Se você estiver registrando um tipo de postagem, poderá passar o modelo para o templateargumento de register_post_type.
Você também pode passar o [template_lock](https://wholesomecode.ltd/#template-lock)argumento para register_post_type.
Bloqueio de modelo
O template_lockargumento pode fazer várias coisas dependendo do argumento que é passado para ele. Estes estão listados no guia de desenvolvimento do Gutenberg como:
all— impede todas as operações. Não é possível inserir novos blocos, mover blocos existentes ou deletar blocos.insert— impede a inserção ou remoção de blocos, mas permite mover os blocos existentes.
O bloqueio de modelo não funciona em blocos aninhados
O bloqueio de modelo funciona apenas em blocos de nível superior. Use isso a seu favor criando um layout que tenha títulos fixos, imagens e parágrafos e uma área de grupo para o seu cliente inserir o conteúdo que desejar.
Você também pode criar um modelo de bloco aninhado personalizado com InnerBlocks.
Você também pode limitar os blocos que você tem permissão para inserir em determinados tipos de postagem.
Use o modelo de bloco
Para usar o modelo de bloco, basta criar uma nova postagem (ou tipo de postagem personalizada, dependendo de como você configurou as coisas). O modelo será inserido e agora você terá áreas de conteúdo fixas em sua página.
Inserir uma postagem mostra o modelo de bloco
Você pode limitar os blocos disponíveis para vários tipos de postagem usando o código a seguir.
function filter_allowed_block_types( $allowed_block_types, $post) {
if ($post->post_type !== 'post') {
return $allowed_block_types;
}
$allowed_block_types = [
'core/column',
'core/columns',
'core/group',
'core/heading',
'core/paragraph',
];
return $allowed_block_types;
}
add_filter( 'allowed_block_types', 'filter_allowed_block_types', 10, 2 );
O código acima limita os blocos permitidos no posttipo de postagem ao seguinte:
-
Coluna (
core/column) -
Colunas (
core/columns) -
Grupo (
core/group) -
Título (
core/heading) -
Parágrafo (
core/paragraph) -
Precisa de algo mais flexível? Tente registrar um padrão de bloco em vez disso
-
Precisa de algo que se aplique a bloqueios infantis? Tente registrar um modelo do InnerBlocks