{"id":72462,"date":"2025-08-07T05:26:12","date_gmt":"2025-08-07T08:26:12","guid":{"rendered":"https:\/\/kinsta.com\/pt\/?p=72462&#038;preview=true&#038;preview_id=72462"},"modified":"2025-08-12T04:04:46","modified_gmt":"2025-08-12T07:04:46","slug":"variacoes-estilo-blocos-gutenberg","status":"publish","type":"post","link":"https:\/\/kinsta.com\/pt\/blog\/variacoes-estilo-blocos-gutenberg\/","title":{"rendered":"Como Personalizar Blocos do Gutenberg com Varia\u00e7\u00f5es de Estilo (Style Variations) e Varia\u00e7\u00f5es de Bloco (Block Variations)"},"content":{"rendered":"<p>O Gutenberg evoluiu e se tornou um editor avan\u00e7ado e altamente personaliz\u00e1vel. Al\u00e9m de seus robustos <a href=\"https:\/\/kinsta.com\/pt\/blog\/editor-gutenberg-wordpress\/\">recursos prontos para uso<\/a>, os desenvolvedores WordPress agora podem aproveitar um rico conjunto de APIs para integrar recursos personalizados em seus sites com facilidade. Essa extensibilidade permite um n\u00edvel impressionante de desenvolvimento sob medida, possibilitando criar experi\u00eancias on-line altamente personalizadas e ricas em recursos.<\/p>\n<p>Este artigo explora dois recursos de desenvolvimento WordPress menos conhecidos, por\u00e9m poderosos: <strong>Varia\u00e7\u00f5es de Estilo<\/strong> (Style Variations) e <strong>Varia\u00e7\u00f5es de Bloco<\/strong> (Block Variations).<\/p>\n<p>Embora sua utilidade possa parecer pouco evidente no in\u00edcio, voc\u00ea vai se surpreender com o quanto eles podem ser \u00fateis e como um pequeno investimento de tempo permitir\u00e1 integr\u00e1-los perfeitamente ao seu fluxo de trabalho.<\/p>\n<p>Voc\u00ea ter\u00e1 uma compreens\u00e3o pr\u00e1tica do que eles s\u00e3o e de como us\u00e1-los por meio de um projeto do mundo real. Voc\u00ea pode implementar esse projeto em seu site WordPress simplesmente copiando e colando o c\u00f3digo deste tutorial e, eventualmente, adicionando personaliza\u00e7\u00f5es.<\/p>\n<p>Antes de come\u00e7armos o projeto, vamos revisar rapidamente os pr\u00e9-requisitos:<\/p>\n<ul>\n<li><strong>Ambiente de desenvolvimento local do WordPress:<\/strong> qualquer um serve, mas recomendamos fortemente o <a href=\"https:\/\/kinsta.com\/pt\/devkinsta\/\">DevKinsta<\/a>, a su\u00edte de desenvolvimento local da Kinsta. Ela \u00e9 f\u00e1cil de usar e oferece diversas configura\u00e7\u00f5es e <a href=\"https:\/\/kinsta.com\/pt\/blog\/adminer\/\">ferramentas<\/a> para criar e gerenciar rapidamente um site WordPress local.<\/li>\n<li><strong>Node.js e npm:<\/strong> s\u00e3o essenciais, pois o editor de blocos \u00e9 constru\u00eddo com React e requer um processo de build.<\/li>\n<li><strong>Habilidades b\u00e1sicas de desenvolvimento de frontend:<\/strong> ser\u00e1 \u00fatil que voc\u00ea tenha um conhecimento b\u00e1sico de Node.js, JavaScript (com React), PHP e CSS.<\/li>\n<\/ul>\n<p>Embora esse projeto n\u00e3o seja muito complexo, voc\u00ea deve estar preparado para escrever algum c\u00f3digo. O <a href=\"https:\/\/github.com\/carlodaniele\/image-hacker\" target=\"_blank\" rel=\"noopener noreferrer\">c\u00f3digo completo<\/a> tamb\u00e9m est\u00e1 dispon\u00edvel no GitHub.<\/p>\n<p>Vamos come\u00e7ar!<br \/>\n<div><\/div><kinsta-auto-toc heading=\"Table of Contents\" exclude=\"last\" list-style=\"arrow\" selector=\"h2\" count-number=\"-1\"><\/kinsta-auto-toc><\/p>\n<h2>Estilos de bloco vs Varia\u00e7\u00f5es de bloco<\/h2>\n<p><strong>Estilos de bloco<\/strong> e <strong>Varia\u00e7\u00f5es de bloco<\/strong>\u00a0s\u00e3o dois recursos poderosos do WordPress para desenvolvedores. Embora seus nomes pare\u00e7am bastante semelhantes, eles diferem em termos de finalidade e uso.<\/p>\n<p>Os <strong>Estilos de bloco<\/strong>, tamb\u00e9m conhecidos como varia\u00e7\u00f5es de estilo, s\u00e3o conjuntos predefinidos de estilos CSS que permitem que voc\u00ea altere a apar\u00eancia de um bloco com um \u00fanico clique. Depois de registrar um estilo de bloco, um bot\u00e3o aparece na barra lateral do bloco para atribuir um conjunto de estilos pr\u00e9-criados ao bloco. Voc\u00ea pode ativar e desativar os estilos e visualizar o bloco no editor em tempo real.<\/p>\n<figure id=\"attachment_196255\" aria-describedby=\"caption-attachment-196255\" style=\"width: 1698px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-196255 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2025\/06\/image-block-default-style-variations.jpg\" alt=\"Exemplo: O bloco de imagem nativo possui duas varia\u00e7\u00f5es de estilo padr\u00e3o.\" width=\"1698\" height=\"1092\"><figcaption id=\"caption-attachment-196255\" class=\"wp-caption-text\">Exemplo: O bloco de imagem nativo possui duas varia\u00e7\u00f5es de estilo padr\u00e3o.<\/figcaption><\/figure>\n<p><strong>As varia\u00e7\u00f5es de estilo n\u00e3o alteram os atributos do bloco. Elas modificam apenas a apar\u00eancia de um bloco, atribuindo uma classe CSS ao elemento envolvente do bloco.<\/strong><\/p>\n<p>As varia\u00e7\u00f5es de bloco s\u00e3o uma ferramenta mais poderosa porque permitem que voc\u00ea crie uma vers\u00e3o pr\u00e9-configurada de um bloco com atributos e blocos internos. Elas tamb\u00e9m aparecem no inseridor de blocos do editor. Essencialmente, uma varia\u00e7\u00e3o de bloco aparece para o usu\u00e1rio como se fosse um bloco aut\u00f4nomo, completamente independente do bloco sobre o qual foi criado.<\/p>\n<p><strong>As varia\u00e7\u00f5es de bloco permitem a personaliza\u00e7\u00e3o da apar\u00eancia, das configura\u00e7\u00f5es iniciais e da estrutura de um bloco.<\/strong><\/p>\n<p>Com tudo isso em mente, vamos utilizar essas ferramentas para levar os blocos do Gutenberg ao pr\u00f3ximo n\u00edvel!<\/p>\n<h2>Um efeito Polaroid animado em um bloco de Imagem nativo<\/h2>\n<p>Agora, analisaremos no nosso projeto! Vamos estender o bloco de imagem nativo (<em>core Image block<\/em>) com um plugin Gutenberg para:<\/p>\n<ul>\n<li><strong>Implementar uma varia\u00e7\u00e3o de estilo Polaroid:<\/strong> os usu\u00e1rios podem aplicar um efeito Polaroid encantador \u00e0s suas imagens com um \u00fanico clique na barra lateral de configura\u00e7\u00f5es do bloco.<\/li>\n<li><strong>Adicionar uma Anima\u00e7\u00e3o de Hover:<\/strong> Aprimoraremos as imagens no estilo Polaroid com uma sutil anima\u00e7\u00e3o ao passar o mouse.<\/li>\n<li><strong>Criar uma varia\u00e7\u00e3o do bloco &#8220;Animated Polaroid&#8221;:<\/strong> Isso permitir\u00e1 que os usu\u00e1rios insiram rapidamente imagens Polaroid pr\u00e9-configuradas com um efeito de foco diretamente do inseridor de blocos.<\/li>\n<\/ul>\n<p>Pronto para come\u00e7ar? Vamos configurar o nosso plugin!<\/p>\n<div><\/div><kinsta-auto-toc list-style=\"decimal\" selector=\"h3\" count-number=\"-1\" sub-toc=\"true\"><\/kinsta-auto-toc>\n<figure id=\"attachment_196838\" aria-describedby=\"caption-attachment-196838\" style=\"width: 1953px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-196838 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2025\/07\/front-end-animation.jpg\" alt=\"Um efeito de anima\u00e7\u00e3o em um bloco de imagem.\" width=\"1953\" height=\"1248\"><figcaption id=\"caption-attachment-196838\" class=\"wp-caption-text\">Um efeito de anima\u00e7\u00e3o em um bloco de imagem.<\/figcaption><\/figure>\n<h3>Configura\u00e7\u00e3o do ambiente<\/h3>\n<p>Antes de come\u00e7armos, precisamos configurar um ambiente de desenvolvimento WordPress com o Node.js. Presumimos que voc\u00ea j\u00e1 tenha instalado seu ambiente local de desenvolvimento WordPress e as vers\u00f5es mais recentes do <a href=\"https:\/\/kinsta.com\/pt\/blog\/como-instalar-o-node-js\/\">Node.js<\/a> e do <a href=\"https:\/\/kinsta.com\/pt\/blog\/npm-gerenciador-pacotes-node\/\">npm<\/a>. Se voc\u00ea precisar de ajuda, confira nosso tutorial sobre <a href=\"https:\/\/kinsta.com\/pt\/blog\/plugin-gutenberg\/#how-to-create-a-block-editor-plugin-without-creating-a-custom-block\">como criar um plugin Gutenberg para adicionar funcionalidade ao editor de blocos<\/a>.<\/p>\n<h4>Etapa 1 &#8211; Criar a estrutura b\u00e1sica do plugin<\/h4>\n<p>Para este tutorial, chamaremos nosso plugin de <strong>Image Hacker<\/strong>.<\/p>\n<p>Navegue at\u00e9 o diret\u00f3rio <code>plugins<\/code> e crie uma nova pasta <code>image-hacker<\/code>. Dentro dessa pasta, crie um novo arquivo <code>image-hacker.php<\/code> (o arquivo principal do plugin) e uma subpasta <code>src<\/code>, onde voc\u00ea desenvolver\u00e1 os recursos do plugin.<\/p>\n<p>Esta \u00e9 a estrutura b\u00e1sica do seu plugin:<\/p>\n<pre><code>\/wp-content\/plugins\/\n\u2514\u2500\u2500 \/image-hacker\/\n\t\u251c\u2500\u2500 image-hacker.php\n\t\u2514\u2500\u2500 \/src\/<\/code><\/pre>\n<h4>Etapa 2 &#8211; Criar o c\u00f3digo PHP<\/h4>\n<p>Em seguida, voc\u00ea precisa garantir que o WordPress reconhe\u00e7a seu plugin. Para fazer isso, adicione o seguinte c\u00f3digo em <code>image-hacker.php<\/code>:<\/p>\n<pre><code class=\"language-php\">&lt;?php\n\/**\n * Plugin Name: Image Hacker\n * Description: Adds new features to the core Image block\n * Version:     1.0.0\n * Author:      Your Name\n * License:     GPL-2.0-or-later\n * License URI: https:\/\/www.gnu.org\/licenses\/gpl-2.0.html\n * Text Domain: image-hacker\n *\/\n\nif ( ! defined( 'ABSPATH' ) ) {\n\texit; \/\/ Exit if accessed directly.\n}<\/code><\/pre>\n<h4>Etapa 3 &#8211; Inicializar o npm e instalar as depend\u00eancias<\/h4>\n<p>Abra sua ferramenta de linha de comando favorita e navegue at\u00e9 o diret\u00f3rio do seu plugin. Uma vez l\u00e1, execute o seguinte comando:<\/p>\n<pre><code class=\"language-bash\">npm init -y<\/code><\/pre>\n<p>Esse comando inicializa um novo arquivo <code>package.json<\/code>, que inclui as depend\u00eancias e os scripts do seu projeto.<\/p>\n<p>Em seguida, voc\u00ea precisa instalar os scripts do WordPress e as ferramentas de build, como webpack e Babel:<\/p>\n<pre><code class=\"language-bash\">npm install @wordpress\/plugins @wordpress\/scripts --save-dev<\/code><\/pre>\n<p>Esse comando adiciona uma pasta <code>node_modules<\/code> com depend\u00eancias do Node e um arquivo <code>package-lock.json<\/code>. A imagem abaixo mostra a estrutura atual do seu projeto no <a href=\"https:\/\/kinsta.com\/pt\/blog\/extensoes-vscode-extensions\/\">Visual Studio Code<\/a>:<\/p>\n<figure id=\"attachment_196256\" aria-describedby=\"caption-attachment-196256\" style=\"width: 1880px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-196256 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2025\/06\/gutenberg-plugin-basic-structure.jpg\" alt=\"Um plugin do Gutenberg no Visual Studio Code.\" width=\"1880\" height=\"759\"><figcaption id=\"caption-attachment-196256\" class=\"wp-caption-text\">Um plugin do Gutenberg no Visual Studio Code.<\/figcaption><\/figure>\n<p>Em seguida, abra o arquivo <code>package.json<\/code> e atualize a propriedade <code>scripts<\/code> da seguinte forma:<\/p>\n<pre><code class=\"language-json\">{\n\t\"name\": \"image-hacker\",\n\t\"version\": \"1.0.0\",\n\t\"main\": \"index.js\",\n\t\"scripts\": {\n\t\t\"build\": \"wp-scripts build\",\n\t\t\"start\": \"wp-scripts start\"\n\t},\n\t\"keywords\": [],\n\t\"author\": \"\",\n\t\"license\": \"ISC\",\n\t\"description\": \"\",\n\t\"devDependencies\": {\n\t\t\"@wordpress\/plugins\": \"^7.25.0\",\n\t\t\"@wordpress\/scripts\": \"^30.18.0\"\n\t}\n}<\/code><\/pre>\n<p>Observe que as vers\u00f5es de <code>devDependencies<\/code> podem ser diferentes das mencionadas acima e dependem das vers\u00f5es reais instaladas em seu ambiente.<\/p>\n<h4>Etapa 4 &#8211; Criar os arquivos-fonte do plugin<\/h4>\n<p>O pr\u00f3ximo passo \u00e9 criar os arquivos-fonte do plugin. Acesse a pasta <code>src<\/code> e adicione os seguintes arquivos:<\/p>\n<ul>\n<li><code>index.js<\/code><\/li>\n<li><code>style.scss<\/code><\/li>\n<li><code>editor.scss<\/code><\/li>\n<\/ul>\n<p>Agora, a estrutura do plugin deve ter a seguinte apar\u00eancia:<\/p>\n<pre><code>\/wp-content\/plugins\/\n\u2514\u2500\u2500 \/image-hacker\/\n\t\u251c\u2500\u2500 \/node-modules\/\n\t\u251c\u2500\u2500 image-hacker.php\n\t\u251c\u2500\u2500 package.json\n\t\u251c\u2500\u2500 package-lock.json\n\t\u2514\u2500\u2500 \/src\/\n\t\t\u251c\u2500\u2500 index.js\n\t\t\u251c\u2500\u2500 style.scss\n\t\t\u2514\u2500\u2500 editor.scss<\/code><\/pre>\n<p>Agora, abra o painel de controle do WordPress e navegue at\u00e9 a tela <strong>Plugins<\/strong>. Encontre o plugin <strong>Image Hacker<\/strong> e ative-o.<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>O <code>editor.scss<\/code> \u00e9 o arquivo em que voc\u00ea declarar\u00e1 os estilos de bloco somente para o editor, enquanto o <code>style.scss<\/code> cont\u00e9m estilos de bloco para o editor e o frontend. N\u00e3o usaremos o arquivo <code>editor.scss<\/code> neste projeto.<\/p>\n<\/aside>\n\n<h4>Etapa 5 &#8211; Incluir ativos (assets) no arquivo do plugin<\/h4>\n<p>Em seguida, voc\u00ea precisa incluir os ativos do plugin no arquivo principal do plugin. Adicione o seguinte no <code>image-hacker.php<\/code>:<\/p>\n<pre><code class=\"language-php\">\/**\n * Enqueue block editor assets.\n *\/\nfunction image_hacker_enqueue_editor_assets() {\n\t$asset_file = include( plugin_dir_path( __FILE__ ) . 'build\/index.asset.php');\n\n\t\/\/ Enqueue the script with our modifications\n\twp_enqueue_script(\n\t\t'image-hacker-script',\n\t\tplugins_url( 'build\/index.js', __FILE__ ),\n\t\tarray( 'wp-plugins', 'wp-edit-post' ),\n\t\tfilemtime( plugin_dir_path( __FILE__ ) . 'build\/index.js' )\n\t);\n\n\t\/\/ Enqueue the editor-only styles\n\twp_enqueue_style(\n\t\t'image-hacker-editor-style',\n\t\tplugins_url( 'build\/editor.css', __FILE__ ),\n\t\t[],\n\t\tfilemtime( plugin_dir_path( __FILE__ ) . 'build\/editor.css' )\n\t);\n}\nadd_action( 'enqueue_block_editor_assets', 'image_hacker_enqueue_editor_assets' );\n\n\/**\n * Enqueue frontend and editor assets.\n *\/\nfunction image_hacker_enqueue_assets() {\n\t$asset_file = include( plugin_dir_path( __FILE__ ) . 'build\/index.asset.php');\n\n\t\/\/ Enqueue styles for both frontend and editor\n\twp_enqueue_style(\n\t\t'image-hacker-style',\n\t\tplugins_url( 'build\/style-index.css', __FILE__ ),\n\t\t[],\n\t\tfilemtime( plugin_dir_path( __FILE__ ) . 'build\/style-index.css' )\n\t);\n}\nadd_action( 'enqueue_block_assets', 'image_hacker_enqueue_assets' );<\/code><\/pre>\n<p>O que este c\u00f3digo faz:<\/p>\n<ul>\n<li>O hook <code>enqueue_block_editor_assets<\/code> carrega o script <code>index.js<\/code> e o arquivo <code>editor.css<\/code> apenas no<\/li>\n<li>O hook <code>enqueue_block_assets<\/code> carrega o arquivo <code>style.css<\/code> no editor e no frontend.<\/li>\n<\/ul>\n<p>Observe que esse c\u00f3digo inclui os ativos <code>.js<\/code> e <code>.css<\/code> localizados na pasta <code>\/build\/<\/code> do plugin. Isso significa que, para fazer isso funcionar, voc\u00ea precisa executar o Comando build em sua ferramenta de linha de comando:<\/p>\n<pre><code class=\"language-bash\">npm run build<\/code><\/pre>\n<p>Observe tamb\u00e9m que, quando voc\u00ea importar um arquivo chamado <code>style.scss<\/code> para <code>index.js<\/code>, o arquivo CSS compilado n\u00e3o se chamar\u00e1 <code>style.css<\/code>, mas sim <code>style-index.css<\/code>.<\/p>\n<h3>Registrar o estilo do bloco<\/h3>\n<p>Voc\u00ea concluiu a configura\u00e7\u00e3o do seu ambiente de desenvolvimento. Agora, voc\u00ea pode passar para a parte interessante do projeto e registrar sua varia\u00e7\u00e3o de estilo para o bloco de imagem.<\/p>\n<p><a href=\"https:\/\/developer.wordpress.org\/themes\/features\/block-style-variations\/\" target=\"_blank\" rel=\"noopener noreferrer\">Existem v\u00e1rias maneiras de registrar estilos de bloco<\/a>, e a escolha depende dos seus objetivos e prefer\u00eancias. Seguiremos a abordagem em JavaScript. Abra seu arquivo <code>\/src\/index.js<\/code> e cole o seguinte c\u00f3digo:<\/p>\n<pre><code class=\"language-javascript\">\/\/ Import the function to register block styles.\nimport { registerBlockStyle } from '@wordpress\/blocks';\n\n\/\/ Import the function to run code only when the DOM is ready.\nimport domReady from '@wordpress\/dom-ready';\n\n\/\/ This line tells the build process to include and compile our SCSS file.\nimport '.\/style.scss';\n\n\/**\n * Use domReady to run code only when the DOM is ready.\n *\/\ndomReady(() =&gt; {\n\t\/\/ Register our new style variation for the core image block.\n\tregisterBlockStyle('core\/image', {\n\t\tname: 'polaroid',\n\t\tlabel: 'Polaroid',\n\t});\n});<\/code><\/pre>\n<p>O uso de <code>registerBlockStyle<\/code> junto com <code>domReady<\/code>\u00a0garante que a varia\u00e7\u00e3o de estilo seja registrada somente quando o DOM estiver totalmente carregado. Consulte tamb\u00e9m a <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/block-api\/block-styles\/\" target=\"_blank\" rel=\"noopener noreferrer\">documenta\u00e7\u00e3o<\/a> <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/packages\/packages-dom-ready\/\" target=\"_blank\" rel=\"noopener noreferrer\">oficial<\/a>.<\/p>\n<p>Quando o estilo <code>Polaroid<\/code> \u00e9 selecionado, o WordPress adiciona automaticamente a classe <code>.is-style-polaroid<\/code> ao elemento <em>wrapper<\/em> do bloco.<\/p>\n<p>A pr\u00f3xima etapa \u00e9 fornecer o CSS para sua varia\u00e7\u00e3o de estilo. Abra seu site <code>\/src\/style.scss<\/code> e adicione o seguinte c\u00f3digo:<\/p>\n<pre><code class=\"language-css\">.wp-block-image.is-style-polaroid {\n\tpadding: 15px 15px 70px 15px;\n\tbackground-color: white;\n\tbox-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);\n\tmax-width: 360px;\n\ttransform: rotate(-3deg);\n\ttransition: transform 0.3s ease-in-out;\n\n\tfigure { \n\t\tmargin: 0 !important; \n\t}\n\t\n\timg { \n\t\tdisplay: block; \n\t\twidth: 100%; \n\t\theight: auto; \n\t}\n\t\n\tfigcaption {\n    \tposition: absolute; \n    \tbottom: 15px; \n    \tleft: 0; \n    \tright: 0;\n    \ttext-align: center; \n    \tfont-family: 'Permanent Marker', cursive;\n    \tcolor: #333; \n    \tfont-size: 18px;\n\t}\n}<\/code><\/pre>\n<p>Salve o c\u00f3digo, execute <code>npm run build<\/code> e acesse o painel do WordPress. Crie um novo artigo ou p\u00e1gina e adicione uma imagem. Com a imagem selecionada, clique no r\u00f3tulo <strong>Styles (Estilos)<\/strong> na barra lateral do bloco e selecione <strong>Polaroid<\/strong>.<\/p>\n<figure id=\"attachment_196692\" aria-describedby=\"caption-attachment-196692\" style=\"width: 1988px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-196692 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2025\/06\/style-variation.jpg\" alt=\"Uma nova varia\u00e7\u00e3o de estilo para o bloco Image.\" width=\"1988\" height=\"1186\"><figcaption id=\"caption-attachment-196692\" class=\"wp-caption-text\">Uma nova varia\u00e7\u00e3o de estilo para o bloco imagem.<\/figcaption><\/figure>\n<p>Adicione uma legenda, salve o artigo e verifique o resultado no frontend. Voc\u00ea ver\u00e1 uma imagem no estilo Polaroid com uma bela legenda em it\u00e1lico.<\/p>\n<figure id=\"attachment_196903\" aria-describedby=\"caption-attachment-196903\" style=\"width: 1952px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-196903 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2025\/07\/is-style-polaroid.jpg\" alt=\"O elemento de figura com a classe is_style_polaroid.\" width=\"1952\" height=\"1296\"><figcaption id=\"caption-attachment-196903\" class=\"wp-caption-text\">O elemento de figura com a classe is_style_polaroid.<\/figcaption><\/figure>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>Devido \u00e0 alta especificidade dos seletores, algumas propriedades (por exemplo, <code>max-width<\/code>) podem n\u00e3o ser aplicadas no editor. Se precisar que elas sejam aplicadas no editor, voc\u00ea pode adicionar os estilos adequados ao arquivo <code>editor.scss<\/code>.<\/p>\n<\/aside>\n\n<h3>Construindo a l\u00f3gica<\/h3>\n<p>A pr\u00f3xima etapa \u00e9 criar a l\u00f3gica para animar a imagem. Criaremos uma anima\u00e7\u00e3o simples usando a propriedade CSS <code>transform<\/code>. Para come\u00e7ar, adicione o seguinte bloco ao seu arquivo <code>src\/style.scss<\/code>:<\/p>\n<pre><code class=\"language-css\">.wp-block-image.is-style-polaroid.has-image-animation:hover {\n\ttransform: rotate(0deg) scale(1.05);\n}<\/code><\/pre>\n<p>Esse c\u00f3digo garante que o efeito hover seja aplicado somente se o bloco for uma imagem Polaroid e tiver uma classe <code>has-image-animation<\/code> aplicada a partir do bot\u00e3o de altern\u00e2ncia (<em>toggle<\/em>) na barra de ferramentas.<\/p>\n<p>Agora, precisamos da l\u00f3gica para adicionar essa classe CSS ao cont\u00eainer da imagem, que \u00e9 um elemento <code>&lt;figure&gt;<\/code>. Para isso, ser\u00e3o necess\u00e1rios alguns <em>filters<\/em> e fun\u00e7\u00f5es de <em>callback<\/em>.<\/p>\n<p>Primeiro, adicione a seguinte linha ao seu arquivo <code>src\/index.js<\/code>:<\/p>\n<pre><code class=\"language-javascript\">import { addFilter } from '@wordpress\/hooks';<\/code><\/pre>\n<h4>Etapa 1. Adicionar um novo atributo ao bloco de imagem<\/h4>\n<p>Voc\u00ea usar\u00e1 o <code>addFilter<\/code> para manipular o bloco de imagem nativo (core\/image). Primeiro, voc\u00ea adicionar\u00e1 um novo atributo <code>imageAnimation<\/code> ao bloco de imagem:<\/p>\n<pre><code class=\"language-javascript\">function addImageAnimationAttribute( settings, name ) {\n\tif ( name !== 'core\/image' ) {\n\t\treturn settings;\n\t}\n\tsettings.attributes = {\n\t\t...settings.attributes,\n\t\timageAnimation: {\n\t\t\ttype: 'boolean',\n\t\t\tdefault: false,\n\t\t},\n\t};\n\treturn settings;\n}\n\naddFilter(\n\t'blocks.registerBlockType',\n\t'image-hacker\/add-image-animation-attribute',\n\taddImageAnimationAttribute\n);<\/code><\/pre>\n<p>A fun\u00e7\u00e3o <code>addImageAnimationAttribute<\/code> recebe dois argumentos:<\/p>\n<ul>\n<li><code>settings<\/code> &#8211; Um array contendo as configura\u00e7\u00f5es atuais do bloco (incluindo atributos).<\/li>\n<li><code>name<\/code> &#8211; O nome do bloco cujos atributos voc\u00ea deseja modificar.<\/li>\n<\/ul>\n<p>A fun\u00e7\u00e3o retorna o objeto\u00a0 de configura\u00e7\u00f5es\/atributos atualizado.<\/p>\n<h4>Etapa 2. Adicionar um bot\u00e3o de altern\u00e2ncia (<em>toggle<\/em>) \u00e0 barra de ferramentas do bloco de imagem<\/h4>\n<p>Em seguida, voc\u00ea precisar\u00e1 adicionar um controle \u00e0 barra de ferramentas do bloco Imagem para ativar a anima\u00e7\u00e3o.<\/p>\n<p>Primeiro, adicione o seguinte <code>import<\/code>\u00a0ao arquivo <code>index.js<\/code>:<\/p>\n<pre><code class=\"language-javascript\">import { createHigherOrderComponent } from '@wordpress\/compose';\nimport { Fragment } from '@wordpress\/element';\nimport { BlockControls } from '@wordpress\/block-editor';\nimport { ToolbarGroup, ToolbarButton } from '@wordpress\/components';\nimport { __ } from '@wordpress\/i18n';<\/code><\/pre>\n<p>Em seguida, adicione o seguinte c\u00f3digo ao final do arquivo:<\/p>\n<pre><code class=\"language-javascript\">const withPolaroidControls = createHigherOrderComponent((BlockEdit) =&gt; {\n\treturn (props) =&gt; {\n\t\tif (props.name !== 'core\/image') {\n\t\t\treturn &lt;BlockEdit {...props} \/&gt;;\n\t\t}\n\n\t\tconst { attributes, setAttributes, isSelected } = props;\n\t\tconst { imageAnimation, className, lightbox } = attributes;\n\n\t\treturn (\n\t\t\t&lt;Fragment&gt;\n\t\t\t\t&lt;BlockEdit {...props} \/&gt;\n\n\t\t\t\t&lt;BlockControls&gt;\n\t\t\t\t\t&lt;ToolbarGroup&gt;\n\t\t\t\t\t\t&lt;ToolbarButton\n\t\t\t\t\t\t\ticon=\"format-image\"\n\t\t\t\t\t\t\tlabel={__('Toggle Animation', 'image-hacker')}\n\t\t\t\t\t\t\tisActive={imageAnimation}\n\t\t\t\t\t\t\tonClick={() =&gt;\n\t\t\t\t\t\t\t\tsetAttributes({ imageAnimation: !imageAnimation })\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\/&gt;\n\t\t\t\t\t&lt;\/ToolbarGroup&gt;\n\t\t\t\t&lt;\/BlockControls&gt;\n\t\t\t&lt;\/Fragment&gt;\n\t\t);\n\t};\n}, 'withPolaroidControls');\n\naddFilter(\n\t'editor.BlockEdit',\n\t'image-hacker\/with-polaroid-controls',\n\twithPolaroidControls\n);<\/code><\/pre>\n<p>O que este c\u00f3digo faz:<\/p>\n<ul>\n<li>A fun\u00e7\u00e3o <code>createHigherOrderComponent<\/code> <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/packages\/packages-compose\/#createhigherordercomponent\" target=\"_blank\" rel=\"noopener noreferrer\">cria um componente de ordem superior<\/a> (HOC) que envolve o <code>BlockEdit<\/code>, componente principal respons\u00e1vel por exibir blocos no editor.<\/li>\n<li>O HOC intercepta o componente e verifica se ele \u00e9 um bloco de imagem. Isso garante que todas as edi\u00e7\u00f5es que voc\u00ea fizer se apliquem somente ao bloco de Imagem.<\/li>\n<li>Usamos a atribui\u00e7\u00e3o de desestrutura\u00e7\u00e3o para extrair as propriedades e os atributos necess\u00e1rios dos objetos <code>props<\/code> e <code>attributes<\/code>.<\/li>\n<li>Usamos <a href=\"https:\/\/developer.wordpress.org\/block-editor\/getting-started\/fundamentals\/block-in-the-editor\/\" target=\"_blank\" rel=\"noopener noreferrer\"><code>BlockControls<\/code><\/a>, <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/components\/toolbar-group\/\" target=\"_blank\" rel=\"noopener noreferrer\"><code>ToolbarGroup<\/code><\/a>\u00a0e <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/components\/toolbar-button\/\" target=\"_blank\" rel=\"noopener noreferrer\"><code>ToolbarButton<\/code><\/a> para adicionar um bot\u00e3o <strong>Toggle Animation<\/strong> \u00e0 barra de ferramentas do bloco.<\/li>\n<li><code>isActive<\/code> define o estado padr\u00e3o de <code>imageAnimation<\/code><\/li>\n<li><code>onClick<\/code> alterna o valor <code>imageAnimation<\/code>.<\/li>\n<\/ul>\n<figure id=\"attachment_196750\" aria-describedby=\"caption-attachment-196750\" style=\"width: 1668px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-196750 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2025\/07\/custom-block-toolbar-button.jpg\" alt=\"Um bot\u00e3o personalizado foi adicionado \u00e0 barra de ferramentas do bloco.\" width=\"1668\" height=\"588\"><figcaption id=\"caption-attachment-196750\" class=\"wp-caption-text\">Um bot\u00e3o personalizado foi adicionado \u00e0 barra de ferramentas do bloco.<\/figcaption><\/figure>\n<p>Agora voc\u00ea tem um atributo e um bot\u00e3o. No entanto, se voc\u00ea clicar no bot\u00e3o, nada acontecer\u00e1.<\/p>\n<h4>Etapa 3. Adicionar a classe CSS ao elemento wrapper<\/h4>\n<p>A pr\u00f3xima etapa \u00e9 aplicar a classe <code>has-image-animation<\/code> ao elemento <code>figure<\/code> que envolve a imagem. Para fazer isso, voc\u00ea precisa de um filtro que permita atribuir a classe CSS \u00e0 imagem no frontend.<\/p>\n<p>Acrescente o seguinte c\u00f3digo ao arquivo <code>index.js<\/code>:<\/p>\n<pre><code class=\"language-javascript\">function addAnimationFrontendClass(extraProps, blockType, attributes) {\n\tif (blockType.name === 'core\/image' && attributes.imageAnimation) {\n\t\textraProps.className = `${extraProps.className || ''} has-image-animation`;\n\t}\n\treturn extraProps;\n}\n\naddFilter(\n\t'blocks.getSaveContent.extraProps',\n\t'image-hacker\/add-animation-frontend-class',\n\taddAnimationFrontendClass\n);<\/code><\/pre>\n<p>Esse c\u00f3digo adiciona dinamicamente a classe CSS <code>has-image-animation<\/code> ao elemento <code>figure<\/code> quando o atributo <code>imageAnimation<\/code> \u00e9 definido como <code>true<\/code>.<\/p>\n<p>Vamos tentar entender o que acontece em detalhes.<\/p>\n<ul>\n<li><code>addFilter<\/code> intercepta o hook do editor para modificar dados ou comportamentos.<\/li>\n<li><code>blocks.getSaveContent.extraProps<\/code> <code>extraProps<\/code> \u00e9 um hook especial que permite que voc\u00ea adicione atributos HTML extras ao elemento <em>wrapper<\/em>.<\/li>\n<li><code>image-hacker\/add-animation-class<\/code> \u00e9 o nome exclusivo do seu filtro.<\/li>\n<li><code>addAnimationFrontendClass<\/code> \u00e9 o nome da fun\u00e7\u00e3o callback que \u00e9 executada sempre que o hook <code>blocks.getSaveContent.extraProps<\/code> \u00e9 executado. Essa fun\u00e7\u00e3o recebe 3 argumentos:\n<ul>\n<li><code>extraProps<\/code>: um objeto que cont\u00e9m as propriedades do elemento envolvente do bloco, como <code>className<\/code>.<\/li>\n<li><code>blockType<\/code>: um objeto com detalhes do bloco, como <code>name<\/code> (<code>core\/image<\/code>).<\/li>\n<li><code>attributes<\/code>: um objeto de atributos de bloco<\/li>\n<\/ul>\n<\/li>\n<li>A l\u00f3gica da fun\u00e7\u00e3o garante que o c\u00f3digo seja executado somente quando <code>blockType.name === 'core\/image'<\/code> e <code>attributes.imageAnimation<\/code> forem <code>true<\/code>.<\/li>\n<li>Se ambas as condi\u00e7\u00f5es forem verdadeiras, a fun\u00e7\u00e3o retornar\u00e1 um novo objeto <code>props<\/code> com <code>has-image-animation<\/code> anexado ao objeto de classe existente.<\/li>\n<\/ul>\n<p>Agora, voc\u00ea pode tentar fazer isso sozinho. Adicione uma imagem ao seu conte\u00fado, selecione o estilo Polaroid na barra lateral do bloco e clique no bot\u00e3o <strong>Toggle Animation (Alternar anima\u00e7\u00e3o)<\/strong> na barra de ferramentas do bloco. Salve sua postagem e verifique o resultado no frontend. Sua imagem dever\u00e1 girar quando voc\u00ea passar o mouse sobre ela.<\/p>\n<figure id=\"attachment_196905\" aria-describedby=\"caption-attachment-196905\" style=\"width: 1954px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-196905 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2025\/07\/is-style-polaroid-has-image-animation.jpg\" alt=\"is_style_polaroid e has_image_animation Classes CSS adicionadas ao bloco Image.\" width=\"1954\" height=\"1184\"><figcaption id=\"caption-attachment-196905\" class=\"wp-caption-text\">is_style_polaroid e has_image_animation Classes CSS adicionadas ao bloco Image.<\/figcaption><\/figure>\n<h3>Registrar varia\u00e7\u00e3o de bloco<\/h3>\n<p>As varia\u00e7\u00f5es de bloco s\u00e3o vers\u00f5es pr\u00e9-configuradas de um bloco, com um conjunto de atributos e blocos aninhados. O WordPress trata as varia\u00e7\u00f5es de bloco como blocos independentes, tornando-os dispon\u00edveis no inseridor de blocos e marcando-os com um \u00edcone personalizado.<\/p>\n<p>Voc\u00ea pode usar uma varia\u00e7\u00e3o de bloco para criar uma nova vers\u00e3o do bloco de Imagem com o estilo Polaroid aplicado por padr\u00e3o.<\/p>\n<p>O primeiro passo \u00e9 importar a fun\u00e7\u00e3o <code>registerBlockVariation<\/code> no seu arquivo <code>\/src\/index.js<\/code>:<\/p>\n<pre><code class=\"language-javascript\">import { registerBlockStyle, registerBlockVariation } from '@wordpress\/blocks';<\/code><\/pre>\n<p>Em seguida, voc\u00ea adiciona uma chamada \u00e0 fun\u00e7\u00e3o <code>registerBlockVariation<\/code> dentro de <code>domReady()<\/code>, logo abaixo de <code>registerBlockStyle<\/code>:<\/p>\n<pre><code class=\"language-javascript\">domReady(() =&gt; {\n\t\/\/ Register a style variation for the image block.\n\tregisterBlockStyle('core\/image', {\n\t\tname: 'polaroid',\n\t\tlabel: 'Polaroid',\n\t});\n\n\t\/\/ Register a block variation of the image block\n\tregisterBlockVariation('core\/image', {\n\t\tname: 'animated-polaroid',\n\t\ttitle: 'Animated Polaroid',\n\t\ticon: 'image-filter',\n\t\tattributes: {\n\t\t\tclassName: 'is-style-polaroid',\n\t\t\timageAnimation: true,\n\t\t},\n\t\tscope: ['inserter'],\n\t});\n});<\/code><\/pre>\n<p>A fun\u00e7\u00e3o <code>registerBlockVariation<\/code> cria uma varia\u00e7\u00e3o para um bloco existente. Ela aceita dois argumentos: o nome do bloco e um objeto que define a varia\u00e7\u00e3o. (Consulte tamb\u00e9m a <a href=\"https:\/\/developer.wordpress.org\/news\/2023\/08\/an-introduction-to-block-variations\/\" target=\"_blank\" rel=\"noopener noreferrer\">introdu\u00e7\u00e3o \u00e0s varia\u00e7\u00f5es de bloco<\/a> e a <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/block-api\/block-variations\/\" target=\"_blank\" rel=\"noopener noreferrer\">documenta\u00e7\u00e3o da API Block Variations<\/a>).<\/p>\n<p>Salve o arquivo, execute o comando build para aplicar as altera\u00e7\u00f5es e retorne ao painel do WordPress. Crie um novo post e pesquise pelo bloco <strong>Animated Polaroid<\/strong> no inseridor de blocos.<\/p>\n<figure id=\"attachment_196842\" aria-describedby=\"caption-attachment-196842\" style=\"width: 1362px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-196842 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2025\/07\/block-inserter.jpg\" alt=\"Uma varia\u00e7\u00e3o de bloco no inseridor de blocos.\" width=\"1362\" height=\"876\"><figcaption id=\"caption-attachment-196842\" class=\"wp-caption-text\">Uma varia\u00e7\u00e3o de bloco no inseridor de blocos.<\/figcaption><\/figure>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>Devido \u00e0 complexidade do ambiente e \u00e0 especificidade dos seletores, n\u00e3o adicionaremos o c\u00f3digo que gera a anima\u00e7\u00e3o no editor de blocos. Por essa raz\u00e3o, a anima\u00e7\u00e3o n\u00e3o funcionar\u00e1 no editor.<\/p>\n<\/aside>\n\n<h3>Testes e depura\u00e7\u00e3o<\/h3>\n<p>Vamos fazer alguns testes. Adicione uma ou mais imagens a uma nova postagem. Selecione o estilo Polaroid para cada imagem, ative a anima\u00e7\u00e3o e adicione links. Al\u00e9m disso, execute testes com o bloco Galeria (Gallery).<\/p>\n<p>Tudo parece funcionar como esperado. No entanto, ao adicionar um link, com efeito lightbox a uma imagem com o estilo Polaroid, o resultado visual n\u00e3o \u00e9 satisfat\u00f3rio.<\/p>\n<p>Esse comportamento estranho parece estar relacionado a um problema de compatibilidade entre o lightbox do WordPress e as transi\u00e7\u00f5es CSS.<\/p>\n<p>Para evitar um processo de depura\u00e7\u00e3o longo e complexo, pode ser interessante desativar a op\u00e7\u00e3o &#8220;<strong>Ampliar ao clicar<\/strong>&#8221; e exibir um aviso notificando o usu\u00e1rio de que o lightbox foi desativado.<\/p>\n<p>Primeiro, voc\u00ea precisa importar alguns recursos adicionais. Abaixo voc\u00ea encontra a lista completa de recursos importados do arquivo <code>\/src\/index.js<\/code>:<\/p>\n<pre><code class=\"language-javascript\">import { registerBlockStyle, registerBlockVariation } from '@wordpress\/blocks';\nimport domReady from '@wordpress\/dom-ready';\nimport { addFilter } from '@wordpress\/hooks';\nimport { createHigherOrderComponent } from '@wordpress\/compose';\nimport { Fragment, useEffect } from '@wordpress\/element';\nimport { InspectorControls, BlockControls } from '@wordpress\/block-editor';\nimport { PanelBody, Notice, ToolbarGroup, ToolbarButton } from '@wordpress\/components';\nimport { __ } from '@wordpress\/i18n';\nimport { useDispatch } from '@wordpress\/data';\nimport '.\/style.scss';<\/code><\/pre>\n<p>Adicionamos as seguintes importa\u00e7\u00f5es:<\/p>\n<ul>\n<li><code>useEffect<\/code> de <code>@wordpress\/element<\/code>. (<a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/packages\/packages-element\/#useeffect\" target=\"_blank\" rel=\"noopener noreferrer\">documenta\u00e7\u00e3o<\/a>)<\/li>\n<li><code>InspectorControls<\/code> de <code>@wordpress\/block-editor<\/code> (<a href=\"https:\/\/github.com\/WordPress\/gutenberg\/blob\/HEAD\/packages\/block-editor\/src\/components\/inspector-controls\/README.md\" target=\"_blank\" rel=\"noopener noreferrer\">documenta\u00e7\u00e3o<\/a>).<\/li>\n<li><code>PanelBody<\/code> e <code>Notice<\/code> de <code>@wordpress\/components<\/code> (<a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/components\/panel\/\" target=\"_blank\" rel=\"noopener noreferrer\">documenta\u00e7\u00e3o<\/a>).<\/li>\n<li><code>useDispatch<\/code> de <code>@wordpress\/data<\/code>. (<a href=\"https:\/\/developer.wordpress.org\/news\/2022\/12\/application-state-managed-withdispatch-withselect-and-compose-101\/\" target=\"_blank\" rel=\"noopener noreferrer\">Blog do desenvolvedor WordPress<\/a>)<\/li>\n<\/ul>\n<p>Agora, altere a fun\u00e7\u00e3o <code>withPolaroidControls<\/code> da seguinte forma:<\/p>\n<pre><code class=\"language-javascript\">const withPolaroidControls = createHigherOrderComponent((BlockEdit) =&gt; {\n\treturn (props) =&gt; {\n\t\tif (props.name !== 'core\/image') {\n\t\t\treturn &lt;BlockEdit {...props} \/&gt;;\n\t\t}\n\n\t\tconst { attributes, setAttributes, isSelected } = props;\n\t\tconst { imageAnimation, className, lightbox } = attributes;\n\n\t\tconst isPolaroid = className?.includes('is-style-polaroid');\n\n\t\tconst { createNotice } = useDispatch('core\/notices');\n\n\t\tuseEffect(() =&gt; {\n\t\t\tif (isPolaroid && lightbox?.enabled) {\n\t\t\t\t\/\/ Disable the lightbox to prevent the conflict.\n\t\t\t\tsetAttributes({ lightbox: { ...lightbox, enabled: false } });\n\n\t\t\t\t\/\/ Show the user a temporary 'snackbar' notice.\n\t\t\t\tcreateNotice(\n\t\t\t\t\t'warning', \/\/ The type of notice (info, success, warning, error)\n\t\t\t\t\t__('Lightbox disabled for Polaroid style.', 'image-hacker'),\n\t\t\t\t\t{\n\t\t\t\t\t\ttype: 'snackbar',\n\t\t\t\t\t\tisDismissible: true,\n\t\t\t\t\t}\n\t\t\t\t);\n\t\t\t}\n\t\t}, [isPolaroid, lightbox]);\n\n\t\treturn (\n\t\t\t&lt;Fragment&gt;\n\t\t\t\t&lt;BlockEdit {...props} \/&gt;\n\n\t\t\t\t&lt;BlockControls&gt;\n\t\t\t\t\t&lt;ToolbarGroup&gt;\n\t\t\t\t\t\t&lt;ToolbarButton\n\t\t\t\t\t\t\ticon=\"format-image\"\n\t\t\t\t\t\t\tlabel={__('Toggle Animation', 'image-hacker')}\n\t\t\t\t\t\t\tisActive={imageAnimation}\n\t\t\t\t\t\t\tonClick={() =&gt;\n\t\t\t\t\t\t\t\tsetAttributes({ imageAnimation: !imageAnimation })\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\/&gt;\n\t\t\t\t\t&lt;\/ToolbarGroup&gt;\n\t\t\t\t&lt;\/BlockControls&gt;\n\n\t\t\t\t{isSelected && isPolaroid && (\n\t\t\t\t\t&lt;InspectorControls&gt;\n\t\t\t\t\t\t&lt;PanelBody title={__('Polaroid Style', 'image-hacker')}&gt;\n\t\t\t\t\t\t\t&lt;Notice status=\"info\" isDismissible={false}&gt;\n\t\t\t\t\t\t\t\t{__(\n\t\t\t\t\t\t\t\t\t'The \"Expand on click\" (lightbox) feature is disabled for this style to prevent visual conflicts.',\n\t\t\t\t\t\t\t\t\t'image-hacker'\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t&lt;\/Notice&gt;\n\t\t\t\t\t\t&lt;\/PanelBody&gt;\n\t\t\t\t\t&lt;\/InspectorControls&gt;\n\t\t\t\t)}\n\t\t\t&lt;\/Fragment&gt;\n\t\t);\n\t};\n}, 'withPolaroidControls');<\/code><\/pre>\n<p data-start=\"5396\" data-end=\"5421\">Entendendo o c\u00f3digo:<\/p>\n<ul>\n<li><code>useEffect<\/code> \u00e9 um Hook do React que &#8220;permite sincronizar um componente com um sistema externo.&#8221; O c\u00f3digo \u00e9 executado depois que o componente \u00e9 renderizado e sempre que um valor no array de depend\u00eancia <code>[isPolaroid, lightbox]<\/code> mudar. A verifica\u00e7\u00e3o s\u00f3 \u00e9 executada quando o usu\u00e1rio aplica ou remove o estilo Polaroid, ou ativa, ou desativa o lightbox (<a href=\"https:\/\/react.dev\/reference\/react\/useEffect\" target=\"_blank\" rel=\"noopener noreferrer\">documenta\u00e7\u00e3o do React<\/a>).<\/li>\n<li>A condi\u00e7\u00e3o <code>if (isPolaroid() && lightbox.enabled)<\/code> garante que o c\u00f3digo seja executado somente se a imagem tiver o estilo Polaroid e a op\u00e7\u00e3o lightbox estiver ativada.<\/li>\n<li>Se a condi\u00e7\u00e3o for <code>true<\/code>, o lightbox ser\u00e1 desativado e um aviso tempor\u00e1rio ser\u00e1 exibido. (Consulte tamb\u00e9m Refer\u00eancia de <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/data\/data-core-notices\/\" target=\"_blank\" rel=\"noopener noreferrer\">dados de avisos<\/a>.)<\/li>\n<li>A condi\u00e7\u00e3o <code>isSelected && isPolaroid<\/code> um novo painel na barra de ferramentas do bloco de imagem para notificar os usu\u00e1rios de que o lightbox est\u00e1 desativado.<br \/>\nDiferente do aviso do tipo snackbar, esse painel exibe um alerta permanente.<\/li>\n<\/ul>\n<figure id=\"attachment_196858\" aria-describedby=\"caption-attachment-196858\" style=\"width: 2184px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-196858 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2025\/07\/enlarge-on-click-disabled.jpg\" alt=\"A op\u00e7\u00e3o Ampliar ao clicar est\u00e1 desativada.\" width=\"2184\" height=\"1406\"><figcaption id=\"caption-attachment-196858\" class=\"wp-caption-text\">A op\u00e7\u00e3o Ampliar ao clicar est\u00e1 desativada.<\/figcaption><\/figure>\n<h2>Resumo<\/h2>\n<p>Neste tutorial, analisamos alguns dos mais interessantes e poderosos recursos para desenvolvedores do editor de blocos WordPress, aplicados em um projeto real: estendemos o bloco de imagem nativo com funcionalidades que n\u00e3o est\u00e3o dispon\u00edveis por padr\u00e3o, adicionando estilos personalizados e efeitos de anima\u00e7\u00e3o.<\/p>\n<p>Adotamos uma abordagem de aprimoramento progressivo, criando uma varia\u00e7\u00e3o de estilo para o bloco de imagem. Isso permite que os usu\u00e1rios apliquem facilmente um visual cl\u00e1ssico de Polaroid \u00e0s suas imagens.<\/p>\n<p data-start=\"514\" data-end=\"667\">Em seguida, adicionamos um bot\u00e3o dedicado \u00e0 barra de ferramentas do bloco de imagem, permitindo criar um efeito de anima\u00e7\u00e3o atraente ao passar o mouse.<\/p>\n<p data-start=\"669\" data-end=\"811\">Por fim, encerramos criando uma varia\u00e7\u00e3o de bloco pr\u00e9-configurada com o estilo Polaroid e as configura\u00e7\u00f5es de anima\u00e7\u00e3o aplicadas por padr\u00e3o.<\/p>\n<p data-start=\"813\" data-end=\"975\">Esperamos que as ideias e t\u00e9cnicas apresentadas neste tutorial ajudem voc\u00ea a criar personaliza\u00e7\u00f5es realmente surpreendentes para os blocos nativos do Gutenberg!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>O Gutenberg evoluiu e se tornou um editor avan\u00e7ado e altamente personaliz\u00e1vel. Al\u00e9m de seus robustos recursos prontos para uso, os desenvolvedores WordPress agora podem aproveitar &#8230;<\/p>\n","protected":false},"author":36,"featured_media":72463,"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-72462","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>Domine as Varia\u00e7\u00f5es de Estilos e de Blocos no Gutenberg<\/title>\n<meta name=\"description\" content=\"Quer aprender a personalizar o Gutenberg e adicionar recursos avan\u00e7ados aos seus blocos com varia\u00e7\u00f5es de estilo e de bloco? Ent\u00e3o n\u00e3o perca este tutorial!\" \/>\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\/variacoes-estilo-blocos-gutenberg\/\" \/>\n<meta property=\"og:locale\" content=\"pt_PT\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Como Personalizar Blocos do Gutenberg com Varia\u00e7\u00f5es de Estilo (Style Variations) e Varia\u00e7\u00f5es de Bloco (Block Variations)\" \/>\n<meta property=\"og:description\" content=\"Quer aprender a personalizar o Gutenberg e adicionar recursos avan\u00e7ados aos seus blocos com varia\u00e7\u00f5es de estilo e de bloco? Ent\u00e3o n\u00e3o perca este tutorial!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/pt\/blog\/variacoes-estilo-blocos-gutenberg\/\" \/>\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-08-07T08:26:12+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-08-12T07:04:46+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2025\/08\/gutenberg-style-variations-and-block-variations-1.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=\"Carlo Daniele\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"Quer aprender a personalizar o Gutenberg e adicionar recursos avan\u00e7ados aos seus blocos com varia\u00e7\u00f5es de estilo e de bloco? Ent\u00e3o n\u00e3o perca este tutorial!\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2025\/08\/gutenberg-style-variations-and-block-variations-1.png\" \/>\n<meta name=\"twitter:creator\" content=\"@carlodaniele\" \/>\n<meta name=\"twitter:site\" content=\"@kinsta_pt\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Carlo Daniele\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tempo estimado de leitura\" \/>\n\t<meta name=\"twitter:data2\" content=\"19 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/variacoes-estilo-blocos-gutenberg\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/variacoes-estilo-blocos-gutenberg\/\"},\"author\":{\"name\":\"Carlo Daniele\",\"@id\":\"https:\/\/kinsta.com\/pt\/#\/schema\/person\/962dde02ea6f5df089b5d8d0853bbc63\"},\"headline\":\"Como Personalizar Blocos do Gutenberg com Varia\u00e7\u00f5es de Estilo (Style Variations) e Varia\u00e7\u00f5es de Bloco (Block Variations)\",\"datePublished\":\"2025-08-07T08:26:12+00:00\",\"dateModified\":\"2025-08-12T07:04:46+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/variacoes-estilo-blocos-gutenberg\/\"},\"wordCount\":2867,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/pt\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/variacoes-estilo-blocos-gutenberg\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2025\/08\/gutenberg-style-variations-and-block-variations-1.png\",\"inLanguage\":\"pt-PT\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/variacoes-estilo-blocos-gutenberg\/\",\"url\":\"https:\/\/kinsta.com\/pt\/blog\/variacoes-estilo-blocos-gutenberg\/\",\"name\":\"Domine as Varia\u00e7\u00f5es de Estilos e de Blocos no Gutenberg\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/pt\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/variacoes-estilo-blocos-gutenberg\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/variacoes-estilo-blocos-gutenberg\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2025\/08\/gutenberg-style-variations-and-block-variations-1.png\",\"datePublished\":\"2025-08-07T08:26:12+00:00\",\"dateModified\":\"2025-08-12T07:04:46+00:00\",\"description\":\"Quer aprender a personalizar o Gutenberg e adicionar recursos avan\u00e7ados aos seus blocos com varia\u00e7\u00f5es de estilo e de bloco? Ent\u00e3o n\u00e3o perca este tutorial!\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/variacoes-estilo-blocos-gutenberg\/#breadcrumb\"},\"inLanguage\":\"pt-PT\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/pt\/blog\/variacoes-estilo-blocos-gutenberg\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-PT\",\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/variacoes-estilo-blocos-gutenberg\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2025\/08\/gutenberg-style-variations-and-block-variations-1.png\",\"contentUrl\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2025\/08\/gutenberg-style-variations-and-block-variations-1.png\",\"width\":1470,\"height\":735},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/variacoes-estilo-blocos-gutenberg\/#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 Personalizar Blocos do Gutenberg com Varia\u00e7\u00f5es de Estilo (Style Variations) e Varia\u00e7\u00f5es de Bloco (Block Variations)\"}]},{\"@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\/962dde02ea6f5df089b5d8d0853bbc63\",\"name\":\"Carlo Daniele\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-PT\",\"@id\":\"https:\/\/kinsta.com\/pt\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/429e5568f88110fd9a409b84cb22197e?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/429e5568f88110fd9a409b84cb22197e?s=96&d=mm&r=g\",\"caption\":\"Carlo Daniele\"},\"description\":\"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.\",\"sameAs\":[\"https:\/\/frammentidicodice.com\/\",\"https:\/\/x.com\/carlodaniele\"],\"url\":\"https:\/\/kinsta.com\/pt\/blog\/author\/carlodaniele\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Domine as Varia\u00e7\u00f5es de Estilos e de Blocos no Gutenberg","description":"Quer aprender a personalizar o Gutenberg e adicionar recursos avan\u00e7ados aos seus blocos com varia\u00e7\u00f5es de estilo e de bloco? Ent\u00e3o n\u00e3o perca este tutorial!","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\/variacoes-estilo-blocos-gutenberg\/","og_locale":"pt_PT","og_type":"article","og_title":"Como Personalizar Blocos do Gutenberg com Varia\u00e7\u00f5es de Estilo (Style Variations) e Varia\u00e7\u00f5es de Bloco (Block Variations)","og_description":"Quer aprender a personalizar o Gutenberg e adicionar recursos avan\u00e7ados aos seus blocos com varia\u00e7\u00f5es de estilo e de bloco? Ent\u00e3o n\u00e3o perca este tutorial!","og_url":"https:\/\/kinsta.com\/pt\/blog\/variacoes-estilo-blocos-gutenberg\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/kinstapt\/","article_published_time":"2025-08-07T08:26:12+00:00","article_modified_time":"2025-08-12T07:04:46+00:00","og_image":[{"width":1470,"height":735,"url":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2025\/08\/gutenberg-style-variations-and-block-variations-1.png","type":"image\/png"}],"author":"Carlo Daniele","twitter_card":"summary_large_image","twitter_description":"Quer aprender a personalizar o Gutenberg e adicionar recursos avan\u00e7ados aos seus blocos com varia\u00e7\u00f5es de estilo e de bloco? Ent\u00e3o n\u00e3o perca este tutorial!","twitter_image":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2025\/08\/gutenberg-style-variations-and-block-variations-1.png","twitter_creator":"@carlodaniele","twitter_site":"@kinsta_pt","twitter_misc":{"Escrito por":"Carlo Daniele","Tempo estimado de leitura":"19 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/pt\/blog\/variacoes-estilo-blocos-gutenberg\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/pt\/blog\/variacoes-estilo-blocos-gutenberg\/"},"author":{"name":"Carlo Daniele","@id":"https:\/\/kinsta.com\/pt\/#\/schema\/person\/962dde02ea6f5df089b5d8d0853bbc63"},"headline":"Como Personalizar Blocos do Gutenberg com Varia\u00e7\u00f5es de Estilo (Style Variations) e Varia\u00e7\u00f5es de Bloco (Block Variations)","datePublished":"2025-08-07T08:26:12+00:00","dateModified":"2025-08-12T07:04:46+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/pt\/blog\/variacoes-estilo-blocos-gutenberg\/"},"wordCount":2867,"publisher":{"@id":"https:\/\/kinsta.com\/pt\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/pt\/blog\/variacoes-estilo-blocos-gutenberg\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2025\/08\/gutenberg-style-variations-and-block-variations-1.png","inLanguage":"pt-PT"},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/pt\/blog\/variacoes-estilo-blocos-gutenberg\/","url":"https:\/\/kinsta.com\/pt\/blog\/variacoes-estilo-blocos-gutenberg\/","name":"Domine as Varia\u00e7\u00f5es de Estilos e de Blocos no Gutenberg","isPartOf":{"@id":"https:\/\/kinsta.com\/pt\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/pt\/blog\/variacoes-estilo-blocos-gutenberg\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/pt\/blog\/variacoes-estilo-blocos-gutenberg\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2025\/08\/gutenberg-style-variations-and-block-variations-1.png","datePublished":"2025-08-07T08:26:12+00:00","dateModified":"2025-08-12T07:04:46+00:00","description":"Quer aprender a personalizar o Gutenberg e adicionar recursos avan\u00e7ados aos seus blocos com varia\u00e7\u00f5es de estilo e de bloco? Ent\u00e3o n\u00e3o perca este tutorial!","breadcrumb":{"@id":"https:\/\/kinsta.com\/pt\/blog\/variacoes-estilo-blocos-gutenberg\/#breadcrumb"},"inLanguage":"pt-PT","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/pt\/blog\/variacoes-estilo-blocos-gutenberg\/"]}]},{"@type":"ImageObject","inLanguage":"pt-PT","@id":"https:\/\/kinsta.com\/pt\/blog\/variacoes-estilo-blocos-gutenberg\/#primaryimage","url":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2025\/08\/gutenberg-style-variations-and-block-variations-1.png","contentUrl":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2025\/08\/gutenberg-style-variations-and-block-variations-1.png","width":1470,"height":735},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/pt\/blog\/variacoes-estilo-blocos-gutenberg\/#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 Personalizar Blocos do Gutenberg com Varia\u00e7\u00f5es de Estilo (Style Variations) e Varia\u00e7\u00f5es de Bloco (Block Variations)"}]},{"@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\/962dde02ea6f5df089b5d8d0853bbc63","name":"Carlo Daniele","image":{"@type":"ImageObject","inLanguage":"pt-PT","@id":"https:\/\/kinsta.com\/pt\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/429e5568f88110fd9a409b84cb22197e?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/429e5568f88110fd9a409b84cb22197e?s=96&d=mm&r=g","caption":"Carlo Daniele"},"description":"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.","sameAs":["https:\/\/frammentidicodice.com\/","https:\/\/x.com\/carlodaniele"],"url":"https:\/\/kinsta.com\/pt\/blog\/author\/carlodaniele\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/posts\/72462","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\/36"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/comments?post=72462"}],"version-history":[{"count":9,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/posts\/72462\/revisions"}],"predecessor-version":[{"id":72491,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/posts\/72462\/revisions\/72491"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/72462\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/72462\/translations\/it"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/72462\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/72462\/translations\/de"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/72462\/translations\/jp"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/72462\/translations\/nl"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/72462\/translations\/es"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/72462\/translations\/pt"},{"href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/72462\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/media\/72463"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/media?parent=72462"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/tags?post=72462"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/topic?post=72462"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}