{"id":62773,"date":"2023-09-04T11:24:01","date_gmt":"2023-09-04T14:24:01","guid":{"rendered":"https:\/\/kinsta.com\/pt\/?p=62773&preview=true&preview_id=62773"},"modified":"2023-09-11T05:01:07","modified_gmt":"2023-09-11T08:01:07","slug":"modelos-de-blocos-do-wordpress","status":"publish","type":"post","link":"https:\/\/kinsta.com\/pt\/blog\/modelos-de-blocos-do-wordpress\/","title":{"rendered":"Como Criar Modelos de Blocos do WordPress"},"content":{"rendered":"

Na era Gutenberg<\/a>, o processo de design n\u00e3o est\u00e1 estritamente vinculado aos temas de WordPress<\/a>. O CMS oferece aos usu\u00e1rios todas as ferramentas de design necess\u00e1rias para criar um \u00f3timo layout do site, e o bloco pretende ser algo que acrescente ainda mais ferramentas de constru\u00e7\u00e3o e design.<\/p>\n

Os modelos de blocos s\u00e3o um recurso que libera ainda mais poderes na cria\u00e7\u00e3o de sites. De acordo com o Manual do Editor de Blocos<\/a>:<\/p>\n

Um modelo de bloco \u00e9 definido como uma lista de itens de bloco. Esses blocos podem ter atributos predefinidos, conte\u00fado de espa\u00e7o reservado e ser est\u00e1ticos ou din\u00e2micos. Os modelos de bloco permitem que voc\u00ea especifique um estado inicial padr\u00e3o para uma sess\u00e3o do editor.<\/em><\/p><\/blockquote>\n

Em outras palavras, os modelos de bloco s\u00e3o cole\u00e7\u00f5es pr\u00e9-constru\u00eddas de blocos usados para definir um estado padr\u00e3o dinamicamente no cliente.<\/p>\n

\ud83d\udc49 Os modelos de bloco s\u00e3o diferentes dos arquivos de modelo.<\/strong><\/p>\n

Os arquivos de modelo s\u00e3o arquivos PHP, como index.php<\/strong>, page.php<\/strong> e single.php<\/strong>, e funcionam da mesma forma com temas cl\u00e1ssicos e de bloco, de acordo com a hierarquia de modelos do WordPress<\/a>. Nos temas cl\u00e1ssicos, esses arquivos s\u00e3o escritos em PHP e HTML. Nos temas de bloco, eles s\u00e3o inteiramente feitos de blocos.<\/p>\n

\ud83d\udc49 Os modelos de bloco s\u00e3o diferentes dos padr\u00f5es de bloco.<\/strong><\/p>\n

Os padr\u00f5es de blocos<\/a> precisam ser adicionados manualmente \u00e0s suas p\u00e1ginas, enquanto os modelos de blocos fornecem automaticamente o layout inicial e os padr\u00f5es quando voc\u00ea ou os membros da sua equipe criam uma nova publica\u00e7\u00e3o.<\/p>\n

Voc\u00ea tamb\u00e9m pode vincular modelos de bloco espec\u00edficos aos seus tipos de publica\u00e7\u00e3o personalizados e bloquear alguns blocos ou recursos para for\u00e7ar os usu\u00e1rios a usar seus padr\u00f5es ou evitar erros.<\/p>\n

Voc\u00ea tem algumas maneiras de criar modelos de bloco. Voc\u00ea pode usar a API de blocos<\/a> para declarar uma array de tipos de blocos via PHP ou pode criar um tipo de bloco personalizado usando o componente InnerBlocks<\/code>.<\/p>\n

Vamos come\u00e7ar!<\/p>\n

<\/div><\/kinsta-auto-toc>\n

Como criar um modelo de bloco usando PHP<\/h2>\n

Se voc\u00ea \u00e9 um desenvolvedor \u00e0 moda antiga, pode definir um modelo de bloco personalizado usando um plugin ou o functions.php<\/a> do seu tema. Se optar por usar um plugin, abra seu editor de c\u00f3digo<\/a> favorito, crie um novo arquivo PHP e adicione o seguinte c\u00f3digo:<\/p>\n

<?php\n\/*\n * Plugin Name:       My Block Templates\n * Plugin URI:        https:\/\/example.com\/\n * Description:       An example plugin\n * Version:           1.0\n * Requires at least: 5.5\n * Requires PHP:      8.0\n * Author:            Your name\n * Author URI:        https:\/\/author.example.com\/\n * License:           GPL v2 or later\n * License URI:       https:\/\/www.gnu.org\/licenses\/gpl-2.0.html\n * Update URI:        https:\/\/example.com\/my-plugin\/\n *\/\n\nfunction myplugin_register_my_block_template() {\n\t$post_type_object = get_post_type_object( 'post' );\n\t$post_type_object->template = array(\n\t\tarray( 'core\/image' ),\n\t\tarray( 'core\/heading' ),\n\t\tarray( 'core\/paragraph' )\n\t);\n}\nadd_action( 'init', 'myplugin_register_my_block_template' );<\/code><\/pre>\n
No c\u00f3digo acima, get_post_type_object<\/code><\/a> recupera um tipo de artigo pelo nome.<\/p>\n
Salve seu arquivo na pasta wp-content\/plugins<\/strong>, navegue at\u00e9 a tela Plugins no painel do WordPress<\/a> e ative o plugin My Block Templates<\/strong>.<\/p>\n
Agora, ao criar um novo artigo, o editor j\u00e1 abre com seu modelo de bloco, que inclui uma imagem, um t\u00edtulo e um texto.<\/p>\n
\"A
Um modelo de bloco carregado automaticamente no editor de artigos.<\/figcaption><\/figure>\n
Voc\u00ea tamb\u00e9m pode adicionar uma array de configura\u00e7\u00f5es para cada bloco e criar estruturas aninhadas de blocos. A fun\u00e7\u00e3o a seguir cria um modelo de bloco mais avan\u00e7ado com blocos internos e configura\u00e7\u00f5es:<\/p>\n
function myplugin_register_my_block_template() {\n\n\t$block_template = array(\n\t\tarray( 'core\/image' ),\n\t\tarray( 'core\/heading', array(\n\t\t\t'placeholder'\t=> 'Add H2...',\n\t\t\t'level'\t\t\t=> 2\n\t\t) ),\n\t\tarray( 'core\/paragraph', array(\n\t\t\t'placeholder'\t=> 'Add paragraph...'\n\t\t\t\n\t\t) ),\n\t\tarray( 'core\/columns', \n\t\t\tarray(), \n\t\t\tarray( \n\t\t\t\tarray( 'core\/column',\n\t\t\t\t\tarray(),\n\t\t\t\t\tarray(\n\t\t\t\t\t\tarray( 'core\/image' )\n\t\t\t\t\t)\n\t\t\t\t), \n\t\t\t\tarray( 'core\/column',\n\t\t\t\t\tarray(),\n\t\t\t\t\tarray(\n\t\t\t\t\t\tarray( 'core\/heading', array(\n\t\t\t\t\t\t\t'placeholder'\t=> 'Add H3...',\n\t\t\t\t\t\t\t'level'\t\t\t=> 3\n\t\t\t\t\t\t) ),\n\t\t\t\t\t\tarray( 'core\/paragraph', array(\n\t\t\t\t\t\t\t'placeholder'\t=> 'Add paragraph...'\n\t\t\t\t\t\t) )\n\t\t\t\t\t) \n\t\t\t\t)\n\t\t\t) \n\t\t)\n\t);\n\t$post_type_object = get_post_type_object( 'post' );\n\t$post_type_object->template = $block_template;\n}\nadd_action( 'init', 'myplugin_register_my_block_template' );<\/code><\/pre>\n
Voc\u00ea pode ver o resultado do c\u00f3digo acima na imagem a seguir:<\/p>\n
\"A
Um modelo de bloco mais avan\u00e7ado.<\/figcaption><\/figure>\n
At\u00e9 agora, usamos apenas os blocos principais. Mas voc\u00ea tamb\u00e9m pode incluir blocos personalizados<\/a> ou padr\u00f5es de blocos<\/a> em seus modelos de blocos, conforme mostrado no exemplo a seguir:<\/p>\n
function myplugin_register_my_block_template() {\n\t$post_type_object = get_post_type_object( 'page' );\n\t$post_type_object->template = array(\n\t\tarray( 'core\/pattern', array(\n\t\t\t'slug' => 'my-plugin\/my-block-pattern'\n\t\t) ) \n\t);\n}\nadd_action( 'init', 'myplugin_register_my_block_template' );<\/code><\/pre>\n
N\u00e3o h\u00e1 muita diferen\u00e7a caso voc\u00ea decida criar um modelo de bloco padr\u00e3o para um tipo de artigo personalizado j\u00e1 registrado. Basta alterar o tipo de artigo de get_post_type_object<\/code> para o nome do tipo de artigo personalizado, conforme mostrado no exemplo a seguir:<\/p>\n
<?php\nfunction myplugin_register_my_block_template() {\n\t$post_type_object = get_post_type_object( 'book' );\n\t$post_type_object->template = array(\n\t\tarray( 'core\/image' ),\n\t\tarray( 'core\/heading' ),\n\t\tarray( 'core\/paragraph' )\n\t);\n}\nadd_action( 'init', 'myplugin_register_my_block_template' );<\/code><\/pre>\n
Agora que voc\u00ea sabe como criar modelos de bloco, podemos seguir em frente e explorar mais casos de uso. Vamos nos aprofundar um pouco mais.<\/p>\n
<\/div><\/kinsta-auto-toc>\n
Modelos de bloco com tipos de artigo personalizados<\/h3>\n
Como mencionamos anteriormente, voc\u00ea pode anexar um modelo de bloco a um tipo de artigo personalizado. Voc\u00ea pode fazer isso depois que o tipo de artigo personalizado j\u00e1 tiver sido registrado, mas talvez prefira definir um modelo de bloco no registro do tipo de artigo personalizado<\/a>.<\/p>\n
Nesse caso, voc\u00ea pode usar os argumentos template<\/code> e template_lock<\/code> da fun\u00e7\u00e3o register_post_type<\/code><\/a> da fun\u00e7\u00e3o:<\/p>\n
function myplugin_register_book_post_type() {\n\t$args = array(\n\t\t'label' => esc_html__( 'Books' ),\n\t\t'labels' => array(\n\t\t\t'name' => esc_html__( 'Books' ),\n\t\t\t'singular_name' => esc_html__( 'Book' ),\n\t\t),\n\t\t'public' => true,\n\t\t'publicly_queryable' => true,\n\t\t'show_ui' => true,\n\t\t'show_in_rest' => true,\n\t\t'rest_namespace' => 'wp\/v2',\n\t\t'has_archive' => true,\n\t\t'show_in_menu' => true,\n\t\t'show_in_nav_menus' => true,\n\t\t'supports' => array( 'title', 'editor', 'thumbnail' ),\n\t\t'template' => array(\n\t\t\tarray( 'core\/paragraph', array(\n\t\t\t\t'placeholder'\t=> 'Add paragraph...'\n\t\t\t) ),\n\t\t\tarray( 'core\/columns', \n\t\t\t\tarray(), \n\t\t\t\tarray( \n\t\t\t\t\tarray( 'core\/column',\n\t\t\t\t\t\tarray(),\n\t\t\t\t\t\tarray(\n\t\t\t\t\t\t\tarray( 'core\/image' )\n\t\t\t\t\t\t)\n\t\t\t\t\t), \n\t\t\t\t\tarray( 'core\/column',\n\t\t\t\t\t\tarray(),\n\t\t\t\t\t\tarray(\n\t\t\t\t\t\t\tarray( 'core\/heading', array(\n\t\t\t\t\t\t\t\t'placeholder'\t=> 'Add H3...',\n\t\t\t\t\t\t\t\t'level'\t\t\t=> 3\n\t\t\t\t\t\t\t) ),\n\t\t\t\t\t\t\tarray( 'core\/paragraph', array(\n\t\t\t\t\t\t\t\t'placeholder'\t=> 'Add paragraph...'\n\t\t\t\t\t\t\t) )\n\t\t\t\t\t\t) \n\t\t\t\t\t)\n\t\t\t\t)\n\t\t\t)\n\t\t)\n\t);\n\tregister_post_type( 'book', $args );\n}\nadd_action( 'init', 'myplugin_register_book_post_type' );<\/code><\/pre>\n
E \u00e9 isso. A imagem abaixo mostra o modelo de bloco na interface do editor para um tipo de artigo personalizado.<\/p>\n
\"A
Um modelo de bloco para um tipo de artigo personalizado.<\/figcaption><\/figure>\n
Quando terminar com o layout, voc\u00ea pode querer mexer nas configura\u00e7\u00f5es do bloco para ajustar o comportamento e a apar\u00eancia do seu modelo de bloco.<\/p>\n
Ajustando o modelo de bloco com atributos de bloco<\/h3>\n
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\u00ea pode querer adicionar um terceiro array para blocos dependentes.<\/p>\n
Um modelo com um bloco de Colunas pode ser representado da seguinte forma:<\/p>\n
$template = array( 'core\/columns', \n\t\/\/ attributes\n\tarray(), \n\t\/\/ nested blocks\n\tarray(\n\t\tarray( 'core\/column' ),\n\t\tarray( 'core\/column' ) \n\t) \n);<\/code><\/pre>\n
Como mencionado acima, o segundo array da lista \u00e9 um array opcional de atributos de bloco. Esses atributos permitem que voc\u00ea personalize a apar\u00eancia do seu modelo para que voc\u00ea ou seus usu\u00e1rios possam se concentrar no conte\u00fado da publica\u00e7\u00e3o sem se preocupar com o layout e o design da p\u00e1gina.<\/p>\n
Para come\u00e7ar, voc\u00ea pode usar o editor de blocos para criar uma estrutura de blocos que possa ser usada como refer\u00eancia para o seu modelo.<\/p>\n
\"A
Um layout de bloco no editor de blocos.<\/figcaption><\/figure>\n
Adicione seus blocos, personalize o layout e os estilos e, em seguida, passe para o editor de c\u00f3digo e encontre os delimitadores de blocos.<\/p>\n
\"The
O delimitador de bloco de um bloco de Colunas.<\/figcaption><\/figure>\n
Delimitadores de bloco armazenam configura\u00e7\u00f5es e estilos do bloco em pares chave\/valor. Voc\u00ea pode simplesmente copiar e colar chaves e valores da marca\u00e7\u00e3o do bloco para preencher seu array de atributos:<\/p>\n
$template = array( 'core\/columns', \n\tarray(\n\t\t'verticalAlignment'\t=> 'center',\n\t\t'align'\t\t\t\t=> 'wide',\n\t\t'style'\t\t\t\t=> array( \n\t\t\t'border'\t=> array(\n\t\t\t\t'width'\t=> '2px',\n\t\t\t\t'radius'\t=> array(\n\t\t\t\t\t'topLeft'\t\t=> '12px', \n\t\t\t\t\t'topRight'\t\t=> '12px', \n\t\t\t\t\t'bottomLeft'\t=> '12px', \n\t\t\t\t\t'bottomRight'\t=> '12px'\n\t\t\t\t)\n\t\t\t)\n\t\t),\n\t\t'backgroundColor' => 'tertiary'\n\t),\n\tarray(\n\t\tarray( 'core\/column' ),\n\t\tarray( 'core\/column' ) \n\t) \n);<\/code><\/pre>\n
Repita o processo para cada bloco no modelo e voc\u00ea ter\u00e1 terminado.<\/p>\n
$template = array(\n\tarray( 'core\/paragraph', array(\n\t\t'placeholder'\t=> 'Add paragraph...'\n\t) ),\n\tarray( 'core\/columns', \n\t\tarray(\n\t\t\t'verticalAlignment'\t=> 'center',\n\t\t\t'align'\t\t\t\t=> 'wide',\n\t\t\t'style'\t\t\t\t=> array( \n\t\t\t\t'border'\t=> array(\n\t\t\t\t\t'width'\t\t=> '2px',\n\t\t\t\t\t'radius'\t=> array(\n\t\t\t\t\t\t'topLeft'\t\t=> '12px', \n\t\t\t\t\t\t'topRight'\t\t=> '12px', \n\t\t\t\t\t\t'bottomLeft'\t=> '12px', \n\t\t\t\t\t\t'bottomRight'\t=> '12px'\n\t\t\t\t\t)\n\t\t\t\t)\n\t\t\t),\n\t\t\t'backgroundColor' => 'tertiary',\n\t\t\t'lock' => array(\n\t\t\t\t'remove'\t=> true,\n\t\t\t\t'move'\t\t=> true\n\t\t\t)\n\t\t), \n\t\tarray( \n\t\t\tarray( 'core\/column',\n\t\t\t\tarray( 'verticalAlignment'\t=> 'center' ),\n\t\t\t\tarray(\n\t\t\t\t\tarray( 'core\/image', \n\t\t\t\t\t\tarray(\n\t\t\t\t\t\t\t'style'\t=> array( 'border' => array( 'radius' => '8px' ) ) \n\t\t\t\t\t\t) \n\t\t\t\t\t)\n\t\t\t\t)\n\t\t\t), \n\t\t\tarray( 'core\/column',\n\t\t\t\tarray( 'verticalAlignment'\t=> 'center' ),\n\t\t\t\tarray(\n\t\t\t\t\tarray( 'core\/heading', array(\n\t\t\t\t\t\t'placeholder'\t=> 'Add H3...',\n\t\t\t\t\t\t'level'\t\t\t=> 3\n\t\t\t\t\t) ),\n\t\t\t\t\tarray( 'core\/paragraph', array(\n\t\t\t\t\t\t'placeholder'\t=> 'Add paragraph...'\n\t\t\t\t\t) )\n\t\t\t\t) \n\t\t\t)\n\t\t)\n\t)\n);<\/code><\/pre>\n
Bloqueando blocos<\/h3>\n
Voc\u00ea pode bloquear blocos espec\u00edficos ou todos os blocos inclu\u00eddos em seu modelo usando a propriedade template_lock<\/code> do $post_type_object<\/code>.<\/p>\n
O bloqueio de modelos pode ser muito \u00fatil quando voc\u00ea tem um blog com v\u00e1rios autores e deseja impedir que todos ou determinados usu\u00e1rios alterem o layout do modelo de bloco.<\/p>\n
No exemplo a seguir, estamos bloqueando todos os blocos do modelo de bloco:<\/p>\n
function myplugin_register_my_block_template() {\n\t$post_type_object = get_post_type_object( 'post' );\n\t$post_type_object->template = array(\n\t\tarray( 'core\/image' ),\n\t\tarray( 'core\/heading' ),\n\t\tarray( 'core\/paragraph' )\n\t);\n\t$post_type_object->template_lock = 'all';\n}\nadd_action( 'init', 'myplugin_register_my_block_template' );<\/code><\/pre>\n
Os blocos bloqueados mostram um \u00edcone de bloqueio na barra de ferramentas de blocos e na exibi\u00e7\u00e3o de lista:<\/p>\n
\"A
Um bloco de t\u00edtulo bloqueado.<\/figcaption><\/figure>\n
Os usu\u00e1rios podem desbloquear blocos no menu Options, dispon\u00edvel na barra de ferramentas de blocos.<\/p>\n
\"Unlocking
Desbloqueio de um bloco.<\/figcaption><\/figure>\n
Quando voc\u00ea clica em Unlock<\/strong>, um pop-up modal permite que voc\u00ea ative\/desative o movimento, impe\u00e7a a remo\u00e7\u00e3o ou ambos:<\/p>\n
\"Locking
Op\u00e7\u00f5es de bloqueio.<\/figcaption><\/figure>\n
template_lock<\/code> Voc\u00ea pode assumir um dos seguintes valores<\/a>:<\/p>\n