{"id":71554,"date":"2025-04-03T13:59:51","date_gmt":"2025-04-03T16:59:51","guid":{"rendered":"https:\/\/kinsta.com\/pt\/?p=71554&#038;preview=true&#038;preview_id=71554"},"modified":"2025-04-17T04:03:15","modified_gmt":"2025-04-17T07:03:15","slug":"extendendo-blocos-nativos-do-wp","status":"publish","type":"post","link":"https:\/\/kinsta.com\/pt\/blog\/extendendo-blocos-nativos-do-wp\/","title":{"rendered":"Como Estender Blocos Nativos do WordPress com a API de Blocos"},"content":{"rendered":"<p>Em 2018, o WordPress introduziu o <a href=\"https:\/\/kinsta.com\/pt\/blog\/editor-gutenberg-wordpress\/\">editor Gutenberg<\/a> com a <a href=\"https:\/\/kinsta.com\/pt\/blog\/wordpress-5-0\/\">vers\u00e3o 5.0<\/a>, trazendo uma nova maneira de criar p\u00e1ginas e artigos usando &#8220;blocos&#8221;. No in\u00edcio, esses blocos eram bem b\u00e1sicos, mas, com o passar dos anos, <a href=\"https:\/\/kinsta.com\/pt\/blog\/wordpress-6-6\/#other-improvements-to-the-block-editor\">eles evolu\u00edram<\/a> para oferecer mais flexibilidade e uma melhor experi\u00eancia de edi\u00e7\u00e3o.<\/p>\n<p>Ainda assim, h\u00e1 momentos em que um bloco n\u00e3o faz exatamente o que voc\u00ea precisa. Talvez voc\u00ea queira remover certos recursos, adicionar novos, aplicar um estilo espec\u00edfico por padr\u00e3o ou tornar algumas configura\u00e7\u00f5es mais f\u00e1ceis de acessar. Em casos como esse, <a href=\"https:\/\/kinsta.com\/pt\/blog\/blocos-personalizados-gutenberg\/\">criar um bloco personalizado<\/a> do zero pode parecer uma op\u00e7\u00e3o, mas, sejamos honestos, \u00e9 um exagero para pequenos ajustes. N\u00e3o seria mais f\u00e1cil se voc\u00ea pudesse simplesmente modificar os blocos que j\u00e1 existem?<\/p>\n<p>\u00c9 a\u00ed que entra a <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/block-api\/\" target=\"_blank\" rel=\"noopener noreferrer\">API de blocos<\/a>. Este artigo explica como voc\u00ea pode ampliar os blocos principais do WordPress usando a API de blocos, fornecendo exemplos pr\u00e1ticos que podem ser usados em projetos reais.<\/p>\n<div><\/div><kinsta-auto-toc heading=\"Table of Contents\" exclude=\"last\" list-style=\"arrow\" selector=\"h2\" count-number=\"-1\"><\/kinsta-auto-toc>\n<h2>Entendendo a API de blocos do WordPress<\/h2>\n<p>A API de blocos do WordPress \u00e9 a base do editor de blocos, permitindo que os <a href=\"https:\/\/kinsta.com\/pt\/blog\/tipos-de-desenvolvedores\/\">desenvolvedores<\/a> criem, modifiquem e ampliem os blocos. A API oferece v\u00e1rias maneiras de voc\u00ea interagir com os blocos. Voc\u00ea pode:<\/p>\n<ul>\n<li><strong>Modificar as configura\u00e7\u00f5es do bloco<\/strong> &#8211; Alterar atributos, valores padr\u00e3o e comportamentos do bloco.<\/li>\n<li><strong data-start=\"349\" data-end=\"399\">Adicionar ou remover compatibilidades de bloco<\/strong> &#8211; Ativar ou desativar recursos como tipografia, cores e espa\u00e7amento.<\/li>\n<li><strong data-start=\"473\" data-end=\"509\">Inserir controles personalizados<\/strong> &#8211; Adicionar novas op\u00e7\u00f5es dentro do painel de configura\u00e7\u00f5es do bloco.<\/li>\n<li><strong>Criar varia\u00e7\u00f5es de blocos<\/strong> &#8211; Crie vers\u00f5es pr\u00e9-configuradas de blocos existentes para acelerar a cria\u00e7\u00e3o de conte\u00fado.<\/li>\n<\/ul>\n<p>Cada bloco no WordPress, seja ele um <a href=\"https:\/\/wordpress.org\/documentation\/article\/Paragraph-block\/\" target=\"_blank\" rel=\"noopener noreferrer\">par\u00e1grafo<\/a>, <a href=\"https:\/\/wordpress.org\/documentation\/article\/image-block\/\" target=\"_blank\" rel=\"noopener noreferrer\">imagem<\/a> ou <a href=\"https:\/\/wordpress.org\/documentation\/article\/button-block\/\" target=\"_blank\" rel=\"noopener noreferrer\">bot\u00e3o<\/a>, \u00e9 definido por um conjunto de atributos e configura\u00e7\u00f5es armazenados em um arquivo <code>block.json<\/code>. Esse arquivo cont\u00e9m <a href=\"https:\/\/kinsta.com\/pt\/blog\/como-adicionar-meta-boxes-e-meta-fields\/\">metadados<\/a> sobre o bloco, inclusive o nome, a categoria, os atributos padr\u00f5es e os recursos que ele suporta.<\/p>\n<p>O WordPress permite que voc\u00ea modifique esses valores usando <a href=\"https:\/\/kinsta.com\/php\/\">PHP<\/a> ou <a href=\"https:\/\/kinsta.com\/pt\/blog\/o-que-e-javascript\/\">JavaScript<\/a>, mas este artigo explica como usar <a href=\"https:\/\/learn.wordpress.org\/lesson\/filter-hooks\/\" target=\"_blank\" rel=\"noopener noreferrer\">hooks de filtro<\/a> na API de Blocos. Isso garante que suas modifica\u00e7\u00f5es sejam registradas no servidor sem a necessidade de <a href=\"https:\/\/kinsta.com\/pt\/blog\/wp-enqueue-scripts\/\">carregar arquivos JavaScript adicionais<\/a>.<\/p>\n<p>Por exemplo, se voc\u00ea quiser ativar ou desativar determinados recursos de um bloco, a melhor maneira de fazer isso \u00e9 usar o <a href=\"https:\/\/kinsta.com\/pt\/blog\/hooks-wordpress\/#hooks-vs-actions-vs-filters\">filtro<\/a> <code>register_block_type_args<\/code> no PHP. Esse m\u00e9todo permite que voc\u00ea ajuste as configura\u00e7\u00f5es do bloco dinamicamente sem modificar diretamente o arquivo <code>block.json<\/code>.<\/p>\n<h2>Modificando as compatibilidades de blocos<\/h2>\n<p>Os blocos do WordPress v\u00eam com suportes predefinidos, que controlam as op\u00e7\u00f5es do editor. Alguns blocos, como o <a href=\"https:\/\/wordpress.org\/documentation\/article\/image-block\/\" target=\"_blank\" rel=\"noopener noreferrer\">bloco de Imagem<\/a> (<code>core\/image<\/code>), t\u00eam <a href=\"https:\/\/kinsta.com\/pt\/blog\/wordpress-6-3\/#enhanced-duotone-filter\">filtros duotone<\/a> ativados por padr\u00e3o, permitindo que os usu\u00e1rios apliquem sobreposi\u00e7\u00f5es de cores.<\/p>\n<figure style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2025\/02\/image-block-duotone.png\" alt=\"Bloco de Imagem do WordPress com filtro Duotone aplicado.\" width=\"1001\" height=\"471\"><figcaption class=\"wp-caption-text\">Bloco de Imagem do WordPress com filtro Duotone aplicado.<\/figcaption><\/figure>\n<p>No entanto, o <a href=\"https:\/\/wordpress.org\/documentation\/article\/media-text-block\/\">bloco M\u00eddia e Texto<\/a> (<code>core\/media-text<\/code>) n\u00e3o oferece suporte ao duotone por padr\u00e3o, mesmo permitindo a inser\u00e7\u00e3o de uma imagem. Isso significa que, embora seja poss\u00edvel aplicar um filtro duotone a um bloco de Imagem isolado, n\u00e3o \u00e9 poss\u00edvel fazer o mesmo quando a imagem est\u00e1 dentro de um bloco de M\u00eddia e Texto.<\/p>\n<figure style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2025\/02\/media-text-block.png\" alt=\"Bloco de M\u00eddia e Texto do WordPress sem suporte a Duotone.\" width=\"1001\" height=\"471\"><figcaption class=\"wp-caption-text\">Bloco M\u00eddia e Texto sem suporte ao Duotone.<\/figcaption><\/figure>\n<p>Como o bloco de M\u00eddia e Texto pode conter uma imagem, faz sentido ativar os filtros duotone. Podemos fazer isso modificando o array <code>supports<\/code>\u00a0e especificando o seletor CSS correto para que o filtro seja aplicado adequadamente. Para ativar esse suporte, usamos o filtro <code data-start=\"1025\" data-end=\"1051\">register_block_type_args<\/code> em PHP.<\/p>\n<p>Adicione o seguinte c\u00f3digo ao arquivo <code>functions.php<\/code> do seu tema:<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-important\">\n            <h3>Important<\/h3>\n        <p>Se for adicionar isso ao arquivo <code data-start=\"1181\" data-end=\"1196\">functions.php<\/code> do seu tema, o ideal \u00e9 utilizar um <strong>child theme (tema filho)<\/strong> para evitar perder suas altera\u00e7\u00f5es em futuras atualiza\u00e7\u00f5es do tema.<\/p>\n<p>Como alternativa, se voc\u00ea for um <strong>usu\u00e1rio Kinsta<\/strong>, recomendamos testar isso em um <strong>ambiente de teste<\/strong> antes de aplic\u00e1-lo ao seu site ativo. Isso garante que tudo funcione corretamente sem afetar seu site ativo.<\/p>\n<\/aside>\n\n<pre><code class=\"language-php\">function enable_duotone_for_media_text_block($args, $block_type) {\n\t\n\t\/\/ Only modify the Media & Text block\n\tif ( 'core\/media-text' === $block_type ) {\n\t\t$args['supports'] ??= [];\n\t\t$args['supports']['filter'] ??= [];\n\t\t$args['supports']['filter']['duotone'] = true;\n\n\t\t$args['selectors'] ??= [];\n\t\t$args['selectors']['filter'] ??= [];\n\t\t$args['selectors']['filter']['duotone'] = '.wp-block-media-text .wp-block-media-text__media';\n\t}\n\n\treturn $args;\n}\nadd_filter('register_block_type_args', 'enable_duotone_for_media_text_block', 10, 2);<\/code><\/pre>\n<p>O c\u00f3digo acima ativa o filtro duotone dentro do array <code>supports<\/code> e define o seletor CSS correto para aplicar o efeito duotone \u00e0s imagens dentro do Bloco M\u00eddia e Texto. A fun\u00e7\u00e3o <code>add_filter()<\/code> usa <code>10<\/code> como a prioridade (quando o filtro \u00e9 executado) e <code>2<\/code> para especificar o n\u00famero de argumentos passados (<code>$args<\/code>, <code>$block_type<\/code>).<\/p>\n<p>Ap\u00f3s salvar o arquivo e recarregar o editor do WordPress, voc\u00ea dever\u00e1 ver os controles do <strong data-start=\"440\" data-end=\"451\">Duotone<\/strong> dispon\u00edveis na se\u00e7\u00e3o <strong data-start=\"473\" data-end=\"484\">Filtros<\/strong>.<\/p>\n<figure style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2025\/02\/duotone-added-media-text.png\" alt=\"Filtro duotone ativado para o bloco M\u00eddia e Texto.\" width=\"1001\" height=\"471\"><figcaption class=\"wp-caption-text\">Filtro Duotone ativado.<\/figcaption><\/figure>\n<p>Ativar o filtro duotone para o bloco M\u00eddia e Texto usando <code data-start=\"599\" data-end=\"625\">register_block_type_args<\/code> \u00e9 uma forma eficaz de modificar o comportamento do bloco de forma din\u00e2mica. No entanto, o WordPress oferece outro m\u00e9todo para ajustar as configura\u00e7\u00f5es de blocos: <strong data-start=\"788\" data-end=\"826\">sobrescrever os metadados do bloco<\/strong> usando <code data-start=\"834\" data-end=\"855\">block_type_metadata<\/code>.<\/p>\n<p>Ambas as abordagens permitem personalizar blocos, mas atuam em momentos diferentes do processo de registro do bloco.<\/p>\n<p>Por exemplo, digamos que voc\u00ea queira ajustar o <a href=\"https:\/\/wordpress.org\/documentation\/article\/Paragraph-block\/\" target=\"_blank\" rel=\"noopener noreferrer\">bloco Par\u00e1grafo<\/a> (<code>core\/paragraph<\/code>) de modo que ele suporte apenas ajustes de margem e desative o preenchimento. Uma maneira de fazer isso \u00e9 usar <code>register_block_type_args<\/code>:<\/p>\n<pre><code class=\"language-php\">function modify_paragraph_spacing_args($args, $block_type) {\n    if ($block_type === 'core\/paragraph') {\n        $args['supports']['spacing'] = [\n            'margin' =&gt; true,\n            'padding' =&gt; false\n        ];\n    }\n    return $args;\n}\nadd_filter('register_block_type_args', 'modify_paragraph_spacing_args', 10, 2);<\/code><\/pre>\n<p>Esse m\u00e9todo funciona bem na maioria dos casos. No entanto, como a modifica\u00e7\u00e3o ocorre ap\u00f3s o bloco j\u00e1 ter sido registrado, ela pode ser sobrescrita por outros <a href=\"https:\/\/kinsta.com\/pt\/blog\/plugin-wordpress\/\">plugins<\/a> ou <a href=\"https:\/\/kinsta.com\/pt\/blog\/que-e-u-tema-wordpress\/\">temas<\/a>\u00a0que alterem o mesmo bloco posteriormente.<\/p>\n<p>Uma abordagem mais estruturada nesse caso poderia ser substituir os metadados do bloco diretamente usando <code>block_type_metadata<\/code>:<\/p>\n<pre><code class=\"language-php\">function mytheme_modify_paragraph_spacing($metadata) {\n    if ($metadata['name'] === 'core\/paragraph') {\n        $metadata['supports']['spacing'] = [\n            'margin' =&gt; true,\n            'padding' =&gt; false\n        ];\n    }\n    return $metadata;\n}\nadd_filter('block_type_metadata', 'mytheme_modify_paragraph_spacing');<\/code><\/pre>\n<p>Nenhuma das duas abordagens \u00e9 intrinsecamente melhor do que a outra \u2014 tudo depende de quando voc\u00ea deseja modificar o bloco e de qu\u00e3o persistente deseja que essa altera\u00e7\u00e3o seja.<\/p>\n<h2>Registro de estilos de bloco<\/h2>\n<p>Muitos blocos do WordPress j\u00e1 v\u00eam com estilos predefinidos que o usu\u00e1rio pode aplicar diretamente no editor. Um bom exemplo \u00e9 o <a href=\"https:\/\/wordpress.org\/documentation\/article\/image-block\/\">bloco Imagem<\/a> (<code>core\/image<\/code>), que inclui o estilo <strong>Rounded<\/strong>\u00a0por padr\u00e3o. No entanto, o raio aplicado nesse estilo costuma ser exagerado, fazendo com que a imagem fique mais oval do que visualmente refinada.<\/p>\n<figure style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2025\/02\/image-block-rounded.png\" alt=\"Estilo arredondado padr\u00e3o para o bloco de imagem\" width=\"1001\" height=\"471\"><figcaption class=\"wp-caption-text\">Estilo arredondado padr\u00e3o.<\/figcaption><\/figure>\n<p>Em vez de ajustar manualmente o raio da borda para cada imagem, uma abordagem melhor \u00e9 personalizar o estilo arredondado de modo que ele aplique um raio de canto mais refinado, talvez adicionando uma <a href=\"https:\/\/kinsta.com\/pt\/blog\/contorno-de-texto-com-css\/\">sombra<\/a> sutil para um visual moderno. Assim, os usu\u00e1rios podem aplicar um estilo profissional com apenas um clique, sem precisar modificar configura\u00e7\u00f5es toda vez.<\/p>\n<p>Vamos usar o estilo <strong>Rounded<\/strong> no bloco Imagem e personaliz\u00e1-lo para que os cantos sejam ligeiramente arredondados em vez de excessivamente curvados, e uma sutil sombra de caixa seja adicionada para dar uma apar\u00eancia mais refinada.<\/p>\n<p>Como o editor de blocos permite o registro e o cancelamento do registro de estilos de blocos, podemos remover o estilo <strong>Rounded<\/strong> padr\u00e3o e substitu\u00ed-lo por uma vers\u00e3o personalizada.<\/p>\n<p>Veja como fazer isso:<\/p>\n<pre><code class=\"language-php\">function modify_image_block_rounded_style() {\n    \/\/ Remove the default \"Rounded\" style\n    unregister_block_style( 'core\/image', 'rounded' );\n\n    \/\/ Register a new \"Rounded\" style with custom CSS\n    register_block_style(\n        'core\/image',\n        array(\n            'name'         =&gt; 'rounded',\n            'label'        =&gt; __( 'Rounded', 'your-text-domain' ),\n            'inline_style' =&gt; '\n                .wp-block-image.is-style-rounded img {\n                    border-radius: 20px; \/* Adjust this value *\/\n                    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); \/* Optional shadow *\/\n                }\n            ',\n        )\n    );\n}\nadd_action( 'init', 'modify_image_block_rounded_style' );<\/code><\/pre>\n<p>O c\u00f3digo substitui o estilo padr\u00e3o excessivamente arredondado por uma vers\u00e3o refinada que aplica <code>border-radius: 20px;<\/code> para cantos mais suaves e <code>box-shadow<\/code> para uma eleva\u00e7\u00e3o sutil.<\/p>\n<figure style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2025\/02\/adjust-rounded-img-block.png\" alt=\"Estilo arredondado refinado com sombra sutil.\" width=\"1001\" height=\"471\"><figcaption class=\"wp-caption-text\">Estilo arredondado refinado.<\/figcaption><\/figure>\n<h3>Usando um arquivo CSS externo em vez de inline_style<\/h3>\n<p>Embora o <a href=\"https:\/\/kinsta.com\/pt\/blog\/melhores-praticas-css\/#2-inline-css-vs-external-css-vs-internal-css\">estilo inline<\/a> funcione bem para estilos simples, ele n\u00e3o \u00e9 ideal para manuten\u00e7\u00e3o. A melhor pr\u00e1tica \u00e9 definir o estilo em um arquivo CSS externo e carreg\u00e1-lo com o WordPress.<\/p>\n<p>Para fazer isso, crie um novo arquivo CSS, por exemplo, <code>custom-block-styles.css<\/code>, e adicione o seguinte:<\/p>\n<pre><code class=\"language-css\">\/* Custom Rounded Image Block Style *\/\n.wp-block-image.is-style-rounded img {\n    border-radius: 20px; \/* Adjusted rounded corners *\/\n    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); \/* Subtle shadow *\/\n}<\/code><\/pre>\n<p>Enfileire esse arquivo CSS no <code data-start=\"2593\" data-end=\"2608\">functions.php<\/code>:<\/p>\n<pre><code class=\"language-php\">function enqueue_custom_block_styles() {\n    wp_enqueue_style(\n        'custom-block-styles',\n        get_template_directory_uri() . '\/css\/custom-block-styles.css',\n        array(),\n        '1.0'\n    );\n}\nadd_action('wp_enqueue_scripts', 'enqueue_custom_block_styles');\nadd_action('enqueue_block_editor_assets', 'enqueue_custom_block_styles');<\/code><\/pre>\n<p>Agora, em vez de usar o estilo em linha, voc\u00ea pode registrar o estilo sem incorporar o <a href=\"https:\/\/kinsta.com\/pt\/blog\/melhores-praticas-css\/\">CSS<\/a> diretamente no PHP:<\/p>\n<pre><code class=\"language-php\">register_block_style(\n    'core\/image',\n    array(\n        'name'  =&gt; 'rounded',\n        'label' =&gt; __( 'Rounded', 'your-text-domain' ),\n        'style_handle' =&gt; 'custom-block-styles'\n    )\n);<\/code><\/pre>\n<p>Dessa forma, voc\u00ea pode modificar estilos sem tocar no PHP.<\/p>\n<h2>Registrando varia\u00e7\u00f5es de bloco<\/h2>\n<p>As <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/block-api\/block-variations\/\" target=\"_blank\" rel=\"noopener noreferrer\">varia\u00e7\u00f5es de bloco<\/a> permitem criar vers\u00f5es predefinidas de um bloco com configura\u00e7\u00f5es personalizadas, facilitando a aplica\u00e7\u00e3o de designs consistentes com apenas um clique. Em vez de ajustar manualmente as configura\u00e7\u00f5es toda vez que usar um bloco, voc\u00ea pode inserir uma varia\u00e7\u00e3o que j\u00e1 vem com os atributos, estilos e configura\u00e7\u00f5es corretos.<\/p>\n<p>Alguns blocos principais do WordPress realmente funcionam dessa forma. O <a href=\"https:\/\/wordpress.org\/documentation\/article\/embed-block\/\">bloco Incorporar (Embed)<\/a>, por exemplo, n\u00e3o \u00e9 um \u00fanico bloco \u2014 ele \u00e9 composto por varia\u00e7\u00f5es espec\u00edficas para diferentes plataformas, como <a href=\"https:\/\/wordpress.org\/documentation\/article\/youtube-embed\/\" target=\"_blank\" rel=\"noopener noreferrer\">YouTube<\/a>, <a href=\"https:\/\/wordpress.org\/documentation\/article\/Twitter-embed\/\" target=\"_blank\" rel=\"noopener noreferrer\">Twitter<\/a> e <a href=\"https:\/\/wordpress.org\/documentation\/article\/Spotify-embed\/\" target=\"_blank\" rel=\"noopener noreferrer\">Spotify<\/a>. Da mesma forma, os <a href=\"https:\/\/wordpress.org\/documentation\/article\/Row-block\/\">blocos Linha (Row)<\/a> e <a href=\"https:\/\/wordpress.org\/documentation\/article\/stack-block\/\">Pilha (Stack)<\/a> s\u00e3o apenas varia\u00e7\u00f5es do <a href=\"https:\/\/wordpress.org\/documentation\/article\/group-block\/\">bloco Grupo (Group)<\/a>, cada um com configura\u00e7\u00f5es de layout distintas.<\/p>\n<p>Essa abordagem mant\u00e9m as coisas modulares, permitindo que o WordPress forne\u00e7a experi\u00eancias personalizadas enquanto usa uma estrutura subjacente compartilhada.<\/p>\n<h3>Criando uma varia\u00e7\u00e3o de Depoimento para o bloco de Cita\u00e7\u00e3o (Quote)<\/h3>\n<p class data-start=\"936\" data-end=\"1303\">Embora o WordPress n\u00e3o tenha um bloco de Depoimento dedicado, o <a href=\"https:\/\/wordpress.org\/documentation\/article\/quote-block\/\">bloco de Cita\u00e7\u00e3o<\/a> (<code data-start=\"1079\" data-end=\"1091\">core\/quote<\/code>) pode ser adaptado para essa finalidade. Em vez de fazer com que os usu\u00e1rios adicionem manualmente uma imagem, alinhem o texto e formatem tudo, podemos definir uma varia\u00e7\u00e3o de Depoimento para o bloco de Cita\u00e7\u00e3o.<\/p>\n<p class data-start=\"1305\" data-end=\"1536\">Essa varia\u00e7\u00e3o inclui automaticamente um bloco de Imagem, um bloco de Cita\u00e7\u00e3o e dois blocos de Par\u00e1grafo para o nome da pessoa e a empresa. Isso garante que cada depoimento siga o mesmo formato estruturado sem exigir ajustes extras.<\/p>\n<p class data-start=\"1538\" data-end=\"1796\">Para registrar uma varia\u00e7\u00e3o de bloco no WordPress, usamos <code data-start=\"1596\" data-end=\"1622\">registerBlockVariation()<\/code> em JavaScript. Como as varia\u00e7\u00f5es de bloco s\u00e3o tratadas no lado do cliente, precisamos carregar um arquivo JavaScript que registre nossa varia\u00e7\u00e3o personalizada de Depoimento.<\/p>\n<p class data-start=\"1798\" data-end=\"2042\">Para implementar isso, crie um arquivo JavaScript (como <code data-start=\"1854\" data-end=\"1882\">custom-block-variations.js<\/code>) que defina a varia\u00e7\u00e3o de Depoimento para o bloco de Cita\u00e7\u00e3o. Voc\u00ea pode criar esse arquivo no diret\u00f3rio <code data-start=\"1987\" data-end=\"1999\">assets\/js\/<\/code> do seu tema e adicionar o seguinte c\u00f3digo:<\/p>\n<pre><code class=\"language-js\">wp.domReady(() =&gt; {\n    wp.blocks.registerBlockVariation(\n        'core\/quote',\n        {\n            name: 'testimonial',\n            title: 'Testimonial',\n            description: 'A variation of the Quote block for testimonials.',\n            category: 'text',\n            attributes: {\n                className: 'is-style-testimonial',\n            },\n            innerBlocks: [\n                ['core\/image', { align: 'center', width: 100, height: 100 }],\n                ['core\/quote'],\n                ['core\/paragraph', { placeholder: 'Name', align: 'center', fontSize: 'medium', className: 'testimonial-name' }],\n                ['core\/paragraph', { placeholder: 'Company \/ Role', align: 'center', fontSize: 'small', className: 'testimonial-company' }]\n            ],\n            scope: ['inserter'],\n        }\n    );\n\n    \/\/ Inject inline styles for the editor preview\n    const style = document.createElement('style');\n    style.innerHTML = `\n        .wp-block-quote.is-style-testimonial {\n            background-color: #f9f9f9;\n            padding: 24px;\n            border: none !important;\n            border-radius: 8px;\n            text-align: center;\n            font-size: 1.2em;\n            font-style: normal;\n            color: #333;\n            box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);\n            display: flex;\n            flex-direction: column;\n            align-items: center;\n        }\n\n        .wp-block-quote.is-style-testimonial p {\n            margin-bottom: 12px;\n            font-size: 1.1em;\n        }\n\n        .wp-block-quote.is-style-testimonial cite {\n            font-weight: bold;\n            display: block;\n            margin-top: 10px;\n            color: #0073aa;\n        }\n\n        .wp-block-quote.is-style-testimonial .wp-block-image {\n            display: flex;\n            justify-content: center;\n            margin: 0 auto 12px;\n        }\n\n        .wp-block-quote.is-style-testimonial .wp-block-image img {\n            width: 100px;\n            height: 100px;\n            object-fit: cover;\n            border-radius: 12px;\n        }\n\n        .wp-block-quote.is-style-testimonial .testimonial-name {\n            font-weight: bold;\n            font-size: 1.2em;\n            margin-top: 12px;\n            color: #222;\n        }\n\n        .wp-block-quote.is-style-testimonial .testimonial-company {\n            font-size: 0.9em;\n            color: #555;\n        }\n    `;\n    document.head.appendChild(style);\n});<\/code><\/pre>\n<p class data-start=\"0\" data-end=\"408\">No c\u00f3digo acima, <code data-start=\"17\" data-end=\"43\">registerBlockVariation()<\/code> define a varia\u00e7\u00e3o de Depoimento (Testimonial) do bloco de Cita\u00e7\u00e3o (Quote), pr\u00e9-carregando um bloco de Imagem, um bloco de Cita\u00e7\u00e3o e dois blocos de Par\u00e1grafo para o nome da pessoa e a empresa. O bloco de Imagem \u00e9 centralizado com 100\u00d7100 pixels para manter uniformidade nas fotos de perfil, enquanto o bloco de Cita\u00e7\u00e3o permanece inalterado como texto do depoimento.<\/p>\n<p class data-start=\"410\" data-end=\"691\">Uma classe personalizada (<code data-start=\"436\" data-end=\"458\">is-style-testimonial<\/code>) \u00e9 aplicada para estiliza\u00e7\u00e3o, fornecendo ao bloco um fundo claro, sombra sutil e texto centralizado. A borda esquerda padr\u00e3o \u00e9 removida e a imagem mant\u00e9m sua propor\u00e7\u00e3o com cantos levemente arredondados para um visual mais refinado.<\/p>\n<p class data-start=\"693\" data-end=\"833\">Em seguida, como o arquivo JavaScript precisa ser carregado no editor de blocos, devemos enfileir\u00e1-lo (enqueue) no <code data-start=\"817\" data-end=\"832\">functions.php<\/code>.<\/p>\n<pre><code class=\"language-php\">function enqueue_custom_block_variations() {\n    wp_enqueue_script(\n        'custom-block-variations',\n        get_template_directory_uri() . '\/assets\/js\/custom-block-variations.js',\n        array( 'wp-blocks', 'wp-dom-ready', 'wp-edit-post' ),\n        filemtime( get_template_directory() . '\/assets\/js\/custom-block-variations.js' ),\n        true\n    );\n}\nadd_action( 'enqueue_block_editor_assets', 'enqueue_custom_block_variations' );<\/code><\/pre>\n<p class data-start=\"1283\" data-end=\"1369\">Isso garante que a varia\u00e7\u00e3o de bloco de Depoimento apare\u00e7a no editor de blocos.<\/p>\n<p class data-start=\"1371\" data-end=\"1617\">Embora o c\u00f3digo JavaScript assegure que o bloco apare\u00e7a corretamente no editor, tamb\u00e9m precisamos aplicar os estilos no frontend para que os depoimentos sejam exibidos corretamente quando publicados. Adicione o seguinte c\u00f3digo ao <code data-start=\"1601\" data-end=\"1616\">functions.php<\/code>:<\/p>\n<pre><code class=\"language-php\">function register_testimonial_block_style() {\n    register_block_style(\n        'core\/quote',\n        array(\n            'name'  =&gt; 'testimonial',\n            'label' =&gt; __( 'Testimonial', 'your-text-domain' ),\n            'inline_style' =&gt; '\n                .wp-block-quote.is-style-testimonial {\n                    background-color: #f9f9f9;\n                    padding: 24px;\n                    border: none !important;\n                    border-radius: 8px;\n                    text-align: center;\n                    font-size: 1.2em;\n                    font-style: normal;\n                    color: #333;\n                    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);\n                    display: flex;\n                    flex-direction: column;\n                    align-items: center;\n                }\n\n                .wp-block-quote.is-style-testimonial .wp-block-image img {\n                    width: 100px;\n                    height: 100px;\n                    object-fit: cover;\n                    border-radius: 12px;\n                }\n\n                .wp-block-quote.is-style-testimonial .testimonial-name {\n                    font-weight: bold;\n                    font-size: 1.2em;\n                    margin-top: 12px;\n                    color: #222;\n                }\n\n                .wp-block-quote.is-style-testimonial .testimonial-company {\n                    font-size: 0.9em;\n                    color: #555;\n                }\n            ',\n        )\n    );\n}\nadd_action( 'init', 'register_testimonial_block_style' );<\/code><\/pre>\n<p>Agora, sempre que um usu\u00e1rio inserir um bloco de depoimento, ele j\u00e1 incluir\u00e1 os campos de <strong>imagem<\/strong>, <strong>cita\u00e7\u00e3o<\/strong>, <strong>nome<\/strong> e <strong>empresa<\/strong>, todos pr\u00e9-formatados e estilizados corretamente. Isso elimina a necessidade de ajustes manuais, garantindo que todos os depoimentos sigam a mesma estrutura limpa e profissional.<\/p>\n<figure style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2025\/02\/testimonial-block.png\" alt=\"Varia\u00e7\u00e3o do bloco de Depoimento no WordPress.\" width=\"1001\" height=\"471\"><figcaption class=\"wp-caption-text\">Varia\u00e7\u00e3o do bloco de depoimento.<\/figcaption><\/figure>\n<p>Em vez de for\u00e7ar os usu\u00e1rios a criar depoimentos do zero, essa varia\u00e7\u00e3o de bloco oferece um fluxo de trabalho simplificado que aprimora a cria\u00e7\u00e3o de conte\u00fado e mant\u00e9m a consist\u00eancia do design do site.<\/p>\n<h2>Caso de uso avan\u00e7ado: Combinando as APIs de Supports e Styles para criar bot\u00f5es com identidade visual da marca<\/h2>\n<p class data-start=\"740\" data-end=\"1080\">Agora que voc\u00ea j\u00e1 sabe o que cada API faz e como funciona, que tal ir um pouco al\u00e9m? Em vez de usar a API de Supports ou a de Styles separadamente, podemos combin\u00e1-las para resolver um problema comum: manter a consist\u00eancia visual do design ao mesmo tempo em que damos ao usu\u00e1rio uma forma estruturada de aplicar os estilos corretos.<\/p>\n<p class data-start=\"1082\" data-end=\"1451\">Vamos considerar um cen\u00e1rio real: uma empresa quer que todos os bot\u00f5es do seu site sigam regras r\u00edgidas da identidade visual. Eles n\u00e3o querem que os usu\u00e1rios escolham cores aleat\u00f3rias, alterem o espa\u00e7amento ou usem tipografias diferentes. No entanto, querem manter certa flexibilidade \u2014 permitindo que os usu\u00e1rios escolham entre dois estilos de bot\u00e3o pr\u00e9-aprovados:<\/p>\n<ol start=\"1\">\n<li class data-start=\"1453\" data-end=\"1541\">\n<p class data-start=\"1455\" data-end=\"1541\"><strong data-start=\"1455\" data-end=\"1473\">Bot\u00e3o Prim\u00e1rio<\/strong> \u2014 O principal call-to-action, com fundo s\u00f3lido e estilo marcante.<\/p>\n<\/li>\n<li class data-start=\"1542\" data-end=\"1659\">\n<p class data-start=\"1544\" data-end=\"1659\"><strong data-start=\"1544\" data-end=\"1564\">Bot\u00e3o Secund\u00e1rio<\/strong> \u2014 Um bot\u00e3o mais discreto, com borda e apar\u00eancia menos destacada, ideal para a\u00e7\u00f5es secund\u00e1rias.<\/p>\n<\/li>\n<\/ol>\n<p>Para fazer isso, precisamos:<\/p>\n<ul>\n<li>Usar a API Styles para definir os dois estilos de bot\u00e3o.<\/li>\n<li>Usar a API Supports para remover configura\u00e7\u00f5es desnecess\u00e1rias, garantindo que os usu\u00e1rios n\u00e3o substituam manualmente a marca alterando as cores, o espa\u00e7amento ou a tipografia.<\/li>\n<\/ul>\n<p>Combinando as duas APIs, permitimos escolhas estruturadas e, ao mesmo tempo, evitamos que os usu\u00e1rios quebrem o sistema de design.<\/p>\n<h3>Etapa 1: Definindo estilos personalizados para bot\u00f5es<\/h3>\n<p>Comece adicionando o seguinte c\u00f3digo ao arquivo <code>functions.php<\/code>:<\/p>\n<pre><code class=\"language-php\">function register_custom_button_styles() {\n    register_block_style(\n        'core\/button',\n        array(\n            'name'  =&gt; 'primary-button',\n            'label' =&gt; __( 'Primary Button', 'your-text-domain' ),\n            'inline_style' =&gt; '\n                .wp-block-button.is-style-primary-button .wp-block-button__link {\n                    background-color: #4D4D4D;\n                    color: #ffffff;\n                    padding: 12px 24px;\n                    border-radius: 4px;\n                    font-size: 1em;\n                    font-weight: 500;\n                    text-transform: none;\n                    box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.1);\n                }\n            ',\n        )\n    );\n\n    register_block_style(\n        'core\/button',\n        array(\n            'name'  =&gt; 'secondary-button',\n            'label' =&gt; __( 'Secondary Button', 'your-text-domain' ),\n            'inline_style' =&gt; '\n                .wp-block-button.is-style-secondary-button .wp-block-button__link {\n                    background-color: transparent;\n                    color: #4D4D4D;\n                    padding: 12px 24px;\n                    border: 1px solid #4D4D4D;\n                    border-radius: 4px;\n                    font-size: 1em;\n                    font-weight: 500;\n                    text-transform: none;\n                    box-shadow: none;\n                }\n            ',\n        )\n    );\n}\nadd_action( 'init', 'register_custom_button_styles' );<\/code><\/pre>\n<p>Agora, ao inserir um bloco de Bot\u00e3o, os usu\u00e1rios ver\u00e3o as op\u00e7\u00f5es <strong data-start=\"1692\" data-end=\"1710\">Bot\u00e3o Prim\u00e1rio<\/strong> e <strong data-start=\"1713\" data-end=\"1733\">Bot\u00e3o Secund\u00e1rio<\/strong> como estilos dispon\u00edveis.<\/p>\n<figure style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2025\/02\/custom-button-styles.png\" alt=\"Estilos de bot\u00f5es personalizados: Prim\u00e1rio e secund\u00e1rio.\" width=\"1001\" height=\"471\"><figcaption class=\"wp-caption-text\">Estilos de bot\u00f5es personalizados.<\/figcaption><\/figure>\n<p>O bot\u00e3o principal tem um fundo cinza escuro s\u00f3lido, enquanto o bot\u00e3o secund\u00e1rio tem um fundo transparente com uma borda. Ambos mant\u00eam padding, bordas arredondadas e estiliza\u00e7\u00e3o de fonte consistentes \u2014 garantindo uma apar\u00eancia profissional em todo o site.<\/p>\n<h3>Etapa 2: Restringindo a personaliza\u00e7\u00e3o dos bot\u00f5es<\/h3>\n<p>Embora os estilos dos bot\u00f5es estejam agora predefinidos, os usu\u00e1rios ainda podem substitu\u00ed-los manualmente usando as configura\u00e7\u00f5es do editor de blocos do WordPress. Se eles alterarem as cores, o preenchimento ou a <a href=\"https:\/\/kinsta.com\/pt\/blog\/tipografia-wordpress-theme-json\/\">tipografia<\/a>, os bot\u00f5es poder\u00e3o n\u00e3o corresponder mais \u00e0s diretrizes da marca.<\/p>\n<p>Podemos usar a API de suporte para desativar essas op\u00e7\u00f5es de personaliza\u00e7\u00e3o, evitando que os usu\u00e1rios fa\u00e7am altera\u00e7\u00f5es n\u00e3o intencionais. Adicione isso a <code>functions.php<\/code>:<\/p>\n<pre><code class=\"language-php\">function restrict_button_customization($args, $block_type) {\n    if ($block_type === 'core\/button') {\n        \/\/ Disable specific color settings (text, background, link)\n        $args['supports']['color'] = [\n            'text'       =&gt; false, \n            'background' =&gt; false, \n            'link'       =&gt; false,  \n        ];\n\n        \/\/ Disable typography settings (font size, font weight, line height)\n        $args['supports']['typography'] = false;\n\n        \/\/ Disable spacing settings (padding, margin)\n        $args['supports']['spacing'] = false;\n\n    }\n    return $args;\n}\nadd_filter('register_block_type_args', 'restrict_button_customization', 10, 2);<\/code><\/pre>\n<p>Com isso em vigor:<\/p>\n<ul>\n<li>Os usu\u00e1rios n\u00e3o podem alterar as cores dos bot\u00f5es, portanto, todos os bot\u00f5es devem aderir ao esquema de cores da marca.<\/li>\n<li>Os controles de tipografia s\u00e3o removidos, mantendo a formata\u00e7\u00e3o do texto consistente.<\/li>\n<li>Os ajustes de espa\u00e7amento s\u00e3o desativados, impedindo que os usu\u00e1rios modifiquem o preenchimento e as margens.<\/li>\n<\/ul>\n<figure style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2025\/02\/new-primary-button.png\" alt=\"Bot\u00e3o prim\u00e1rio estilizado no WordPress.\" width=\"1001\" height=\"471\"><figcaption class=\"wp-caption-text\">Bot\u00e3o prim\u00e1rio com estilo.<\/figcaption><\/figure>\n<p>Agora, em vez de permitir que os usu\u00e1rios criem uma mistura aleat\u00f3ria de estilos de bot\u00e3o, eles simplesmente escolher\u00e3o entre os estilos prim\u00e1rio e secund\u00e1rio, mantendo o design profissional e estruturado.<\/p>\n<h2>Resumo<\/h2>\n<p>Este artigo abordou apenas a superf\u00edcie do que \u00e9 poss\u00edvel com a personaliza\u00e7\u00e3o de blocos no WordPress. A plataforma oferece uma ampla variedade de APIs que facilitam a extens\u00e3o e a customiza\u00e7\u00e3o de blocos, permitindo que desenvolvedores adaptem a experi\u00eancia do editor sem perder a estrutura nem a facilidade de uso.<\/p>\n<p>Se voc\u00ea quer dominar a personaliza\u00e7\u00e3o de blocos, h\u00e1 muito mais a explorar. Consulte a <a href=\"https:\/\/developer.wordpress.org\/\">documenta\u00e7\u00e3o oficial para desenvolvedores WordPress<\/a>, participe de <a href=\"https:\/\/kinsta.com\/pt\/blog\/guia-wordcamps\/\">WordCamps e encontros<\/a> e continue aprendendo com \u00f3timos recursos, como o <a href=\"https:\/\/kinsta.com\/pt\/blog\/\">blog da Kinsta<\/a>, onde regularmente detalhamos conceitos avan\u00e7ados do WordPress.<\/p>\n<p>Claro, contar com uma hospedagem confi\u00e1vel torna todo esse processo de testes e experimenta\u00e7\u00f5es muito mais tranquilo. Seja para testar novas modifica\u00e7\u00f5es em blocos ou para administrar um site de alto tr\u00e1fego, a Kinsta garante desempenho, seguran\u00e7a e escalabilidade. Na verdade, fomos recentemente <a href=\"https:\/\/kinsta.com\/pt\/blog\/premio-g2\/\">classificados como l\u00edderes em Hospedagem de WordPress pela G2<\/a>, gra\u00e7as a mais de <a href=\"https:\/\/www.g2.com\/products\/kinsta\/reviews\">930 avalia\u00e7\u00f5es de clientes<\/a>.<\/p>\n<p>Isso diz muito por si s\u00f3: voc\u00ea pode <a href=\"https:\/\/kinsta.com\/pt\/precos\/\">confiar na Kinsta para potencializar sua experi\u00eancia com WordPress<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Em 2018, o WordPress introduziu o editor Gutenberg com a vers\u00e3o 5.0, trazendo uma nova maneira de criar p\u00e1ginas e artigos usando &#8220;blocos&#8221;. No in\u00edcio, esses &#8230;<\/p>\n","protected":false},"author":287,"featured_media":71555,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[],"topic":[1026],"class_list":["post-71554","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","topic-desenvolvimento-wordpress"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v24.6 (Yoast SEO v24.6) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Como Estender Blocos Nativos do WordPress com a API de Blocos<\/title>\n<meta name=\"description\" content=\"Aprenda a estender blocos nativos do WordPress com facilidade usando a API de Blocos para personalizar configura\u00e7\u00f5es, estilos e funcionalidades.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kinsta.com\/pt\/blog\/extendendo-blocos-nativos-do-wp\/\" \/>\n<meta property=\"og:locale\" content=\"pt_PT\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Como Estender Blocos Nativos do WordPress com a API de Blocos\" \/>\n<meta property=\"og:description\" content=\"Aprenda a estender blocos nativos do WordPress com facilidade usando a API de Blocos para personalizar configura\u00e7\u00f5es, estilos e funcionalidades.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/pt\/blog\/extendendo-blocos-nativos-do-wp\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/kinstapt\/\" \/>\n<meta property=\"article:published_time\" content=\"2025-04-03T16:59:51+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-04-17T07:03:15+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2025\/03\/how-to-extend-core-wordpress-blocks-with-blocks-api.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1470\" \/>\n\t<meta property=\"og:image:height\" content=\"735\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Joel Olawanle\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"Aprenda a estender blocos nativos do WordPress com facilidade usando a API de Blocos para personalizar configura\u00e7\u00f5es, estilos e funcionalidades.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2025\/03\/how-to-extend-core-wordpress-blocks-with-blocks-api.png\" \/>\n<meta name=\"twitter:creator\" content=\"@olawanle_joel\" \/>\n<meta name=\"twitter:site\" content=\"@kinsta_pt\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Joel Olawanle\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tempo estimado de leitura\" \/>\n\t<meta name=\"twitter:data2\" content=\"17 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/extendendo-blocos-nativos-do-wp\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/extendendo-blocos-nativos-do-wp\/\"},\"author\":{\"name\":\"Joel Olawanle\",\"@id\":\"https:\/\/kinsta.com\/pt\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07\"},\"headline\":\"Como Estender Blocos Nativos do WordPress com a API de Blocos\",\"datePublished\":\"2025-04-03T16:59:51+00:00\",\"dateModified\":\"2025-04-17T07:03:15+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/extendendo-blocos-nativos-do-wp\/\"},\"wordCount\":2642,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/pt\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/extendendo-blocos-nativos-do-wp\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2025\/03\/how-to-extend-core-wordpress-blocks-with-blocks-api.png\",\"inLanguage\":\"pt-PT\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/extendendo-blocos-nativos-do-wp\/\",\"url\":\"https:\/\/kinsta.com\/pt\/blog\/extendendo-blocos-nativos-do-wp\/\",\"name\":\"Como Estender Blocos Nativos do WordPress com a API de Blocos\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/pt\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/extendendo-blocos-nativos-do-wp\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/extendendo-blocos-nativos-do-wp\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2025\/03\/how-to-extend-core-wordpress-blocks-with-blocks-api.png\",\"datePublished\":\"2025-04-03T16:59:51+00:00\",\"dateModified\":\"2025-04-17T07:03:15+00:00\",\"description\":\"Aprenda a estender blocos nativos do WordPress com facilidade usando a API de Blocos para personalizar configura\u00e7\u00f5es, estilos e funcionalidades.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/extendendo-blocos-nativos-do-wp\/#breadcrumb\"},\"inLanguage\":\"pt-PT\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/pt\/blog\/extendendo-blocos-nativos-do-wp\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-PT\",\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/extendendo-blocos-nativos-do-wp\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2025\/03\/how-to-extend-core-wordpress-blocks-with-blocks-api.png\",\"contentUrl\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2025\/03\/how-to-extend-core-wordpress-blocks-with-blocks-api.png\",\"width\":1470,\"height\":735},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/extendendo-blocos-nativos-do-wp\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/pt\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Desenvolvimento WordPress\",\"item\":\"https:\/\/kinsta.com\/pt\/topicos\/desenvolvimento-wordpress\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Como Estender Blocos Nativos do WordPress com a API de Blocos\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinsta.com\/pt\/#website\",\"url\":\"https:\/\/kinsta.com\/pt\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Solu\u00e7\u00f5es de hospedagem Premium, r\u00e1pida e segura\",\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/pt\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinsta.com\/pt\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"pt-PT\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinsta.com\/pt\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/pt\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-PT\",\"@id\":\"https:\/\/kinsta.com\/pt\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/pt\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/kinstapt\/\",\"https:\/\/x.com\/kinsta_pt\",\"https:\/\/www.instagram.com\/kinstahosting\/\",\"https:\/\/www.linkedin.com\/company\/kinsta\/\",\"https:\/\/www.pinterest.com\/kinstahosting\/\",\"https:\/\/www.youtube.com\/c\/Kinsta\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/kinsta.com\/pt\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07\",\"name\":\"Joel Olawanle\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-PT\",\"@id\":\"https:\/\/kinsta.com\/pt\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/051bf577ce2c837846a1db9eef184758?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/051bf577ce2c837846a1db9eef184758?s=96&d=mm&r=g\",\"caption\":\"Joel Olawanle\"},\"description\":\"Joel is a Frontend developer working at Kinsta as a Technical Editor. He is a passionate teacher with love for open source and has written over 300 technical articles majorly around JavaScript and it's frameworks.\",\"sameAs\":[\"https:\/\/joelolawanle.com\/\",\"https:\/\/www.linkedin.com\/in\/olawanlejoel\/\",\"https:\/\/x.com\/olawanle_joel\",\"https:\/\/www.youtube.com\/@joelolawanle\"],\"gender\":\"male\",\"knowsAbout\":[\"JavaScript\",\"React\",\"Next.js\"],\"knowsLanguage\":[\"English\"],\"jobTitle\":\"Technical Editor\",\"worksFor\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/pt\/blog\/author\/joelolawanle\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Como Estender Blocos Nativos do WordPress com a API de Blocos","description":"Aprenda a estender blocos nativos do WordPress com facilidade usando a API de Blocos para personalizar configura\u00e7\u00f5es, estilos e funcionalidades.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/kinsta.com\/pt\/blog\/extendendo-blocos-nativos-do-wp\/","og_locale":"pt_PT","og_type":"article","og_title":"Como Estender Blocos Nativos do WordPress com a API de Blocos","og_description":"Aprenda a estender blocos nativos do WordPress com facilidade usando a API de Blocos para personalizar configura\u00e7\u00f5es, estilos e funcionalidades.","og_url":"https:\/\/kinsta.com\/pt\/blog\/extendendo-blocos-nativos-do-wp\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/kinstapt\/","article_published_time":"2025-04-03T16:59:51+00:00","article_modified_time":"2025-04-17T07:03:15+00:00","og_image":[{"width":1470,"height":735,"url":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2025\/03\/how-to-extend-core-wordpress-blocks-with-blocks-api.png","type":"image\/png"}],"author":"Joel Olawanle","twitter_card":"summary_large_image","twitter_description":"Aprenda a estender blocos nativos do WordPress com facilidade usando a API de Blocos para personalizar configura\u00e7\u00f5es, estilos e funcionalidades.","twitter_image":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2025\/03\/how-to-extend-core-wordpress-blocks-with-blocks-api.png","twitter_creator":"@olawanle_joel","twitter_site":"@kinsta_pt","twitter_misc":{"Escrito por":"Joel Olawanle","Tempo estimado de leitura":"17 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/pt\/blog\/extendendo-blocos-nativos-do-wp\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/pt\/blog\/extendendo-blocos-nativos-do-wp\/"},"author":{"name":"Joel Olawanle","@id":"https:\/\/kinsta.com\/pt\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07"},"headline":"Como Estender Blocos Nativos do WordPress com a API de Blocos","datePublished":"2025-04-03T16:59:51+00:00","dateModified":"2025-04-17T07:03:15+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/pt\/blog\/extendendo-blocos-nativos-do-wp\/"},"wordCount":2642,"publisher":{"@id":"https:\/\/kinsta.com\/pt\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/pt\/blog\/extendendo-blocos-nativos-do-wp\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2025\/03\/how-to-extend-core-wordpress-blocks-with-blocks-api.png","inLanguage":"pt-PT"},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/pt\/blog\/extendendo-blocos-nativos-do-wp\/","url":"https:\/\/kinsta.com\/pt\/blog\/extendendo-blocos-nativos-do-wp\/","name":"Como Estender Blocos Nativos do WordPress com a API de Blocos","isPartOf":{"@id":"https:\/\/kinsta.com\/pt\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/pt\/blog\/extendendo-blocos-nativos-do-wp\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/pt\/blog\/extendendo-blocos-nativos-do-wp\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2025\/03\/how-to-extend-core-wordpress-blocks-with-blocks-api.png","datePublished":"2025-04-03T16:59:51+00:00","dateModified":"2025-04-17T07:03:15+00:00","description":"Aprenda a estender blocos nativos do WordPress com facilidade usando a API de Blocos para personalizar configura\u00e7\u00f5es, estilos e funcionalidades.","breadcrumb":{"@id":"https:\/\/kinsta.com\/pt\/blog\/extendendo-blocos-nativos-do-wp\/#breadcrumb"},"inLanguage":"pt-PT","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/pt\/blog\/extendendo-blocos-nativos-do-wp\/"]}]},{"@type":"ImageObject","inLanguage":"pt-PT","@id":"https:\/\/kinsta.com\/pt\/blog\/extendendo-blocos-nativos-do-wp\/#primaryimage","url":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2025\/03\/how-to-extend-core-wordpress-blocks-with-blocks-api.png","contentUrl":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2025\/03\/how-to-extend-core-wordpress-blocks-with-blocks-api.png","width":1470,"height":735},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/pt\/blog\/extendendo-blocos-nativos-do-wp\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/pt\/"},{"@type":"ListItem","position":2,"name":"Desenvolvimento WordPress","item":"https:\/\/kinsta.com\/pt\/topicos\/desenvolvimento-wordpress\/"},{"@type":"ListItem","position":3,"name":"Como Estender Blocos Nativos do WordPress com a API de Blocos"}]},{"@type":"WebSite","@id":"https:\/\/kinsta.com\/pt\/#website","url":"https:\/\/kinsta.com\/pt\/","name":"Kinsta\u00ae","description":"Solu\u00e7\u00f5es de hospedagem Premium, r\u00e1pida e segura","publisher":{"@id":"https:\/\/kinsta.com\/pt\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinsta.com\/pt\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"pt-PT"},{"@type":"Organization","@id":"https:\/\/kinsta.com\/pt\/#organization","name":"Kinsta","url":"https:\/\/kinsta.com\/pt\/","logo":{"@type":"ImageObject","inLanguage":"pt-PT","@id":"https:\/\/kinsta.com\/pt\/#\/schema\/logo\/image\/","url":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinsta.com\/pt\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/kinstapt\/","https:\/\/x.com\/kinsta_pt","https:\/\/www.instagram.com\/kinstahosting\/","https:\/\/www.linkedin.com\/company\/kinsta\/","https:\/\/www.pinterest.com\/kinstahosting\/","https:\/\/www.youtube.com\/c\/Kinsta"]},{"@type":"Person","@id":"https:\/\/kinsta.com\/pt\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07","name":"Joel Olawanle","image":{"@type":"ImageObject","inLanguage":"pt-PT","@id":"https:\/\/kinsta.com\/pt\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/051bf577ce2c837846a1db9eef184758?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/051bf577ce2c837846a1db9eef184758?s=96&d=mm&r=g","caption":"Joel Olawanle"},"description":"Joel is a Frontend developer working at Kinsta as a Technical Editor. He is a passionate teacher with love for open source and has written over 300 technical articles majorly around JavaScript and it's frameworks.","sameAs":["https:\/\/joelolawanle.com\/","https:\/\/www.linkedin.com\/in\/olawanlejoel\/","https:\/\/x.com\/olawanle_joel","https:\/\/www.youtube.com\/@joelolawanle"],"gender":"male","knowsAbout":["JavaScript","React","Next.js"],"knowsLanguage":["English"],"jobTitle":"Technical Editor","worksFor":"Kinsta","url":"https:\/\/kinsta.com\/pt\/blog\/author\/joelolawanle\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/posts\/71554","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/users\/287"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/comments?post=71554"}],"version-history":[{"count":9,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/posts\/71554\/revisions"}],"predecessor-version":[{"id":71687,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/posts\/71554\/revisions\/71687"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/71554\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/71554\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/71554\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/71554\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/71554\/translations\/de"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/71554\/translations\/jp"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/71554\/translations\/nl"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/71554\/translations\/es"},{"href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/71554\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/media\/71555"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/media?parent=71554"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/tags?post=71554"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/topic?post=71554"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}