{"id":69861,"date":"2024-10-02T11:29:38","date_gmt":"2024-10-02T14:29:38","guid":{"rendered":"https:\/\/kinsta.com\/pt\/?p=69861&#038;preview=true&#038;preview_id=69861"},"modified":"2024-10-03T10:02:50","modified_gmt":"2024-10-03T13:02:50","slug":"propriedade-blocks-theme-json","status":"publish","type":"post","link":"https:\/\/kinsta.com\/pt\/blog\/propriedade-blocks-theme-json\/","title":{"rendered":"O Que os Desenvolvedores de WordPress Precisam Saber Sobre a Propriedade Blocks no theme.json"},"content":{"rendered":"<p>A introdu\u00e7\u00e3o da <a href=\"https:\/\/kinsta.com\/pt\/blog\/edicao-completa-sites-wordpress\/\">edi\u00e7\u00e3o completa de sites (FSE)<\/a> no WordPress destaca a import\u00e2ncia crescente do arquivo <code>theme.json<\/code>. Agora h\u00e1 uma hierarquia e uma estrutura totalmente novas a serem compreendidas, juntamente com as v\u00e1rias propriedades que ajudam voc\u00ea a criar seus designs. Em particular, a propriedade <code>blocks<\/code> em <code>theme.json<\/code> \u00e9 essencial se voc\u00ea quiser criar temas WordPress modernos e flex\u00edveis com blocos exclusivos.<\/p>\n<p>Neste guia, exploraremos os pr\u00f3s e contras da propriedade <code>blocks<\/code> no<code>theme.json<\/code> para que voc\u00ea possa trabalhar com Blocos, projet\u00e1-los e estiliz\u00e1-los para criar experi\u00eancias mais din\u00e2micas e personaliz\u00e1veis no WordPress.<\/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 propriedade blocks no theme.json<\/h2>\n<p>Antes de nos aprofundarmos nas complexidades da propriedade <code>blocks<\/code>, vamos primeiro entender sua fun\u00e7\u00e3o em <code>theme.json<\/code> e no desenvolvimento de temas do WordPress.<\/p>\n<figure id=\"attachment_184921\" aria-describedby=\"caption-attachment-184921\" style=\"width: 1200px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-184921 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/08\/theme-json-file.png\" alt=\"Uma janela de editor de c\u00f3digo exibindo uma parte do arquivo theme.json de um tema WordPress. A estrutura JSON define templates personalizados para as p\u00e1ginas \"blank\", \"blog-alternative\" e \"404\". O editor tem um tema escuro com realce de sintaxe, e o fundo mostra uma paisagem de floresta enevoada.\" width=\"1200\" height=\"970\"><figcaption id=\"caption-attachment-184921\" class=\"wp-caption-text\">O arquivo <strong>theme.json<\/strong> do Twenty Twenty-Three.<\/figcaption><\/figure>\n<p>Primeiro, <code>theme.json<\/code> \u00e9 o <a href=\"https:\/\/kinsta.com\/pt\/blog\/theme-json\/\">arquivo de configura\u00e7\u00e3o<\/a> que permite que voc\u00ea defina estilos e configura\u00e7\u00f5es globais para seus temas. Esse &#8220;hub central&#8221; permite que voc\u00ea controle v\u00e1rios aspectos da apar\u00eancia e do comportamento do seu tema, inclusive tipografia, cores e op\u00e7\u00f5es de layout. No entanto, ele pode fazer mais do que simplesmente fornecer a voc\u00ea ajustes cosm\u00e9ticos program\u00e1ticos.<\/p>\n<p>A propriedade <code>blocks<\/code> permite que voc\u00ea aplique controle granular sobre tipos de blocos individuais em vez de sobre o site como um todo. Voc\u00ea pode definir estilos, configura\u00e7\u00f5es e comportamentos padr\u00e3o para Blocos espec\u00edficos, o que garante consist\u00eancia em todo o tema e flexibilidade para os propriet\u00e1rios do site.<\/p>\n<h3>A rela\u00e7\u00e3o entre a propriedade de blocos e a edi\u00e7\u00e3o completa de sites<\/h3>\n<p>O FSE (Full Site Editing) \u00e9 uma abordagem mais visual para a constru\u00e7\u00e3o do seu site, com Blocos no n\u00facleo. No front-end, voc\u00ea tem a maioria das op\u00e7\u00f5es de estiliza\u00e7\u00e3o e personaliza\u00e7\u00e3o dispon\u00edveis para todo o seu site.<\/p>\n<figure id=\"attachment_184916\" aria-describedby=\"caption-attachment-184916\" style=\"width: 1200px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-184916 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/08\/full-site-editor.png\" alt=\"A tela principal do Editor de Sites do WordPress, exibindo uma p\u00e1gina inicial azul com o t\u00edtulo \"Um compromisso com inova\u00e7\u00e3o e sustentabilidade\". A p\u00e1gina apresenta uma imagem de arquitetura moderna e op\u00e7\u00f5es de personaliza\u00e7\u00e3o em uma barra lateral preta \u00e0 esquerda.\" width=\"1200\" height=\"750\"><figcaption id=\"caption-attachment-184916\" class=\"wp-caption-text\">A interface de edi\u00e7\u00e3o completa de sites no WordPress.<\/figcaption><\/figure>\n<p>A propriedade <code>blocks<\/code> \u00e9 uma parte crucial do arquivo <code>theme.json<\/code> por alguns motivos:<\/p>\n<ul>\n<li>Ela fornece uma maneira padronizada de definir estilos e configura\u00e7\u00f5es de blocos.<\/li>\n<li>Voc\u00ea pode criar sistemas de design coesos a partir de uma base program\u00e1tica.<\/li>\n<li>Voc\u00ea pode oferecer maior controle sobre a apar\u00eancia dos blocos sem a necessidade de <a href=\"https:\/\/kinsta.com\/pt\/blog\/css-wordpress\/\">CSS<\/a> personalizado.<\/li>\n<li>A propriedade ajuda voc\u00ea a criar padr\u00f5es e modelos de blocos.<\/li>\n<\/ul>\n<p>Os desenvolvedores podem usar a propriedade <code>blocks<\/code> para criar temas que aproveitem ao m\u00e1ximo a edi\u00e7\u00e3o completa de sites.<\/p>\n<h2>Como estruturar a propriedade blocks (e sua sintaxe)<\/h2>\n<p>A padroniza\u00e7\u00e3o que a propriedade <code>blocks<\/code> oferece ajuda quando se trata de estrutura e sintaxe. Voc\u00ea sempre a aninhar\u00e1 dentro do objeto <code>settings<\/code>:<\/p>\n<pre><code class=\"language-json\">{\n\"version\": 3,\n  \"settings\": {\n    \"blocks\": {\n      \"core\/paragraph\": {\n        \"typography\": {\n          \"fontSizes\": [\n            {\n              \"name\": \"Small\",\n              \"slug\": \"small\",\n              \"size\": \"13px\"\n            },\n            {\n              \"name\": \"Medium\",\n              \"slug\": \"medium\",\n              \"size\": \"20px\"\n             }\n           ]\n\u2026<\/code><\/pre>\n<p>O exemplo acima define tamanhos de fonte personalizados para um bloco de par\u00e1grafo. A divis\u00e3o dos principais componentes \u00e9 simples:<\/p>\n<ul>\n<li>Voc\u00ea aninha a propriedade <code>blocks<\/code> no objeto <code>settings<\/code>.<\/li>\n<li>Cada tipo de bloco tem um namespace e um nome (aqui, <code>core\/paragraph<\/code>).<\/li>\n<li>Em seguida, voc\u00ea especifica as configura\u00e7\u00f5es do bloco dentro do objeto.<\/li>\n<\/ul>\n<p>As configura\u00e7\u00f5es incluem a maior parte do que est\u00e1 dispon\u00edvel para estilos globais. Por exemplo, elas podem incluir tipografia, cor, espa\u00e7amento e muitas outras.<\/p>\n<h3>Defini\u00e7\u00e3o das configura\u00e7\u00f5es globais do bloco<\/h3>\n<p>Vamos ver como voc\u00ea pode definir as configura\u00e7\u00f5es globais e, em seguida, analisar como isso afeta a propriedade <code>blocks<\/code>. \u00c9 assim que voc\u00ea estabelecer\u00e1 uma base de design consistente em todo o seu tema.<\/p>\n<pre><code class=\"language-json\">{\n\"version\": 3,\n  \"settings\": {\n    \"typography\": {\n      \"fontSizes\": [\n        {\n          \"name\": \"Small\",\n          \"slug\": \"small\",\n          \"size\": \"13px\"\n        },\n        {\n          \"name\": \"Medium\",\n          \"slug\": \"medium\",\n          \"size\": \"20px\"\n        }\n\u2026<\/code><\/pre>\n<p>Neste exemplo, definimos os tamanhos de fonte globais dispon\u00edveis para todos os blocos. No Editor de Sites WordPress, voc\u00ea pode encontrar essas op\u00e7\u00f5es como parte da tela <strong>Tipografia <\/strong>&gt;<strong> Elementos <\/strong>&gt;<strong> Texto<\/strong>:<\/p>\n<figure id=\"attachment_184915\" aria-describedby=\"caption-attachment-184915\" style=\"width: 1200px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-184915 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/08\/elements-text.png\" alt=\"O Editor de Sites do WordPress mostrando as op\u00e7\u00f5es do painel Styles para texto. Ele exibe a sele\u00e7\u00e3o de fontes e as op\u00e7\u00f5es de personaliza\u00e7\u00e3o para Fonte, Tamanho, Apar\u00eancia, Altura da linha, Espa\u00e7amento entre letras e Caixa de letras.\" width=\"1200\" height=\"883\"><figcaption id=\"caption-attachment-184915\" class=\"wp-caption-text\">A maioria das configura\u00e7\u00f5es de tipografia do <strong>theme.json<\/strong> tamb\u00e9m pode ser acessada no Editor de Sites.<\/figcaption><\/figure>\n<p>Cada tamanho de fonte que voc\u00ea define em <code>theme.json<\/code> est\u00e1 relacionado a uma das op\u00e7\u00f5es de tamanho aqui:<\/p>\n<figure id=\"attachment_184922\" aria-describedby=\"caption-attachment-184922\" style=\"width: 1200px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-184922 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/08\/theme-json-font-size.png\" alt=\"Uma vis\u00e3o de perto de um editor de c\u00f3digo mostrando parte de um arquivo theme.json do WordPress. O c\u00f3digo vis\u00edvel define os tamanhos de fonte, incluindo Small, Medium e Large com seus respectivos tamanhos em unidades rem. O tamanho Large inclui uma configura\u00e7\u00e3o de tipografia fluida. O editor usa um tema escuro com realce de sintaxe em um fundo de floresta desfocado.\" width=\"1200\" height=\"729\"><figcaption id=\"caption-attachment-184922\" class=\"wp-caption-text\">Voc\u00ea define as predefini\u00e7\u00f5es de tamanho de fonte no arquivo <strong>theme.json<\/strong>.<\/figcaption><\/figure>\n<p>Obviamente, h\u00e1 muitas outras maneiras de personalizar seu tema a partir daqui. A ideia \u00e9 criar um design global que funcione em 80% dos casos de uso.<\/p>\n<p>Usando a propriedade <code>blocks<\/code>, voc\u00ea pode substituir esses estilos de bloco principais para cobrir os 20% finais. A tela <strong>Styles (Estilos)<\/strong> no Editor de Sites tamb\u00e9m permite que voc\u00ea personalize as configura\u00e7\u00f5es de design de cada bloco:<\/p>\n<figure id=\"attachment_184908\" aria-describedby=\"caption-attachment-184908\" style=\"width: 1200px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-184908 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/08\/block-styles-editor.png\" alt=\"Um close-up da interface do Editor de Sites do WordPress, mostrando as op\u00e7\u00f5es de Blocos de conte\u00fado, como Par\u00e1grafo, Imagem, T\u00edtulo e Galeria. A \u00e1rea principal de conte\u00fado exibe a p\u00e1gina inicial do site.\" width=\"1200\" height=\"838\"><figcaption id=\"caption-attachment-184908\" class=\"wp-caption-text\">O Editor de Sites permite que voc\u00ea edite as configura\u00e7\u00f5es de todos os Blocos principais do WordPress.<\/figcaption><\/figure>\n<p>Isso \u00e9 excelente para os usu\u00e1rios finais, mas de menor valor para um desenvolvedor. Estamos nos concentrando em usar o <code>theme.json<\/code> para trabalhar com a propriedade <code>blocks<\/code>.<\/p>\n<h2>Como personalizar tipos de blocos individuais<\/h2>\n<p>Embora as configura\u00e7\u00f5es globais sejam importantes para ajudar a manter a consist\u00eancia, o verdadeiro poder est\u00e1 no escopo da propriedade <code>blocks<\/code> para personaliza\u00e7\u00e3o. Essa configura\u00e7\u00e3o de n\u00edvel granular permite que voc\u00ea adapte a apar\u00eancia e o comportamento de blocos espec\u00edficos para corresponderem ao design do seu tema, assim como o Editor de Sites.<\/p>\n<p>Vejamos um exemplo de personaliza\u00e7\u00e3o do bloco Heading para o seu tema:<\/p>\n<pre><code class=\"language-json\">{\n\"version\": 3,\n  \"settings\": {\n    \"blocks\": {\n      \"core\/heading\": {\n        \"typography\": {\n          \"fontSizes\": [\n            {\n              \"name\": \"Small\",\n              \"slug\": \"small\",\n              \"size\": \"20px\"\n            },\n            {\n              \"name\": \"Medium\",\n              \"slug\": \"medium\",\n              \"size\": \"30px\"\n            },\n            {\n              \"name\": \"Large\",\n              \"slug\": \"large\",\n              \"size\": \"40px\"\n            }\n            ],\n            \"fontWeight\": \"bold\"\n            },\n            \"color\": {\n              \"palette\": [\n                {\n                  \"name\": \"Heading Primary\",\n                  \"slug\": \"heading-primary\",\n                  \"color\": \"#333333\"\n                },\n                {\n                  \"name\": \"Heading Secondary\",\n                  \"slug\": \"heading-secondary\",\n                  \"color\": \"#666666\"\n                }\n              ]\n\u2026<\/code><\/pre>\n<p>Voc\u00ea pode ver que os atributos refletem como voc\u00ea faria altera\u00e7\u00f5es globais. Vamos resumir o que estamos fazendo:<\/p>\n<ul>\n<li>Definimos tamanhos de fonte espec\u00edficos para os t\u00edtulos e os atribu\u00edmos a etiquetas de tamanho.<\/li>\n<li>O peso da fonte para todos os t\u00edtulos ser\u00e1 simplesmente negrito.<\/li>\n<li>Esses t\u00edtulos tamb\u00e9m receber\u00e3o uma paleta de cores personalizada.<\/li>\n<\/ul>\n<p>Isso garante que nossos t\u00edtulos tenham uma apar\u00eancia consistente em todo o design. Tamb\u00e9m podemos controlar esses elementos quando n\u00e3o sabemos como o usu\u00e1rio final os aplicar\u00e1, o que beneficia ainda mais o design consistente.<\/p>\n<h3>Usando a combina\u00e7\u00e3o correta de namespace e slug<\/h3>\n<p>Ao chamar tipos de blocos, \u00e9 fundamental que voc\u00ea use a combina\u00e7\u00e3o correta de namespace e slug. Sem isso, suas altera\u00e7\u00f5es n\u00e3o se aplicar\u00e3o aos blocos que voc\u00ea deseja direcionar.<\/p>\n<p>Cada bloco tem um namespace e um slug. Os blocos principais do WordPress t\u00eam geralmente o namespace <code>core<\/code>. A slug ser\u00e1 o nome do bloco:<\/p>\n<pre><code class=\"language-json\">\u2026\n\"blocks\": {\n  \"core\/image\": {\n\u2026<\/code><\/pre>\n<p>Se precisar saber a slug de um bloco, voc\u00ea pode consultar o arquivo <code>block.json<\/code> espec\u00edfico dele. Voc\u00ea pode encontr\u00e1-lo no diret\u00f3rio <code>wp-includes\/blocks<\/code>. Aqui, voc\u00ea ter\u00e1 v\u00e1rias pastas, cada uma das quais cont\u00e9m um arquivo <code>block.json<\/code>. Em cada uma delas, o namespace e o slug do bloco devem estar pr\u00f3ximos \u00e0 parte superior do arquivo:<\/p>\n<figure id=\"attachment_184910\" aria-describedby=\"caption-attachment-184910\" style=\"width: 1200px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-184910 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/08\/code-directory.png\" alt=\"Uma parte de uma janela do Finder do macOS exibindo o conte\u00fado do diret\u00f3rio de c\u00f3digo. Tamb\u00e9m h\u00e1 uma parte de um editor de c\u00f3digo com o arquivo block.json aberto. O c\u00f3digo vis\u00edvel define as propriedades para um bloco do WordPress chamado \"core\/code\", com o t\u00edtulo \"Code\" e uma descri\u00e7\u00e3o sobre exibir trechos de c\u00f3digo.\" width=\"1200\" height=\"518\"><figcaption id=\"caption-attachment-184910\" class=\"wp-caption-text\">O arquivo <strong>block.json<\/strong> conter\u00e1 os principais metadados de cada bloco individual.<\/figcaption><\/figure>\n<p>Se voc\u00ea navegar por esses diret\u00f3rios, perceber\u00e1 que o diret\u00f3rio <code>wp-includes<\/code> tem um arquivo <code>theme.json<\/code> pr\u00f3prio. Embora isso possa parecer confuso, \u00e9 simples de explicar.<\/p>\n<h2>Por que o theme.json inclui configura\u00e7\u00f5es personalizadas de blocos por padr\u00e3o<\/h2>\n<p>O pr\u00f3prio arquivo <code>theme.json<\/code> do WordPress pode parecer estranho em um primeiro momento, principalmente porque n\u00e3o \u00e9 um tema. No entanto, isso n\u00e3o \u00e9 por acaso. O principal motivo \u00e9 oferecer suporte \u00e0 compatibilidade retroativa com vers\u00f5es mais antigas do WordPress. <br><br>Por exemplo, o bloco de bot\u00f5es define um raio de borda:<\/p>\n<pre><code class=\"language-json\">\u2026\n\"blocks\": {\n  \"core\/button\": {\n    \"border\": {\n      \"radius\": true\n     }\n  },\n\u2026<\/code><\/pre>\n<p>Outros blocos ter\u00e3o configura\u00e7\u00f5es semelhantes para ajudar na consist\u00eancia entre diferentes vers\u00f5es do WordPress. No entanto, isso pode causar problemas no futuro se voc\u00ea n\u00e3o estiver ciente disso.<\/p>\n<p>Se voc\u00ea tentar definir configura\u00e7\u00f5es globais e se perguntar por que essas altera\u00e7\u00f5es n\u00e3o se aplicam a blocos espec\u00edficos, a compatibilidade com vers\u00f5es anteriores pode ser a resposta. Obviamente, voc\u00ea pode substituir essas configura\u00e7\u00f5es em seu pr\u00f3prio arquivo <code>theme.json<\/code> sem problemas.<\/p>\n<h2>Desenvolvimento de blocos personalizados com theme.json<\/h2>\n<p>O arquivo <code>theme.json<\/code> \u00e9 ideal para personalizar os blocos existentes, mas seus recursos tamb\u00e9m se estendem ao desenvolvimento de blocos personalizados. Voc\u00ea pode aproveitar o <code>theme.json<\/code> para definir estilos e configura\u00e7\u00f5es padr\u00e3o para qualquer um dos seus blocos personalizados. Isso ajuda voc\u00ea a oferecer uma integra\u00e7\u00e3o perfeita com o design do seu tema.<\/p>\n<p>Primeiro, por\u00e9m, voc\u00ea precisa <a href=\"https:\/\/kinsta.com\/pt\/blog\/blocos-personalizados-gutenberg\/\">criar o pr\u00f3prio bloco<\/a>. Isso est\u00e1 al\u00e9m do escopo deste artigo, mas, em resumo, h\u00e1 algumas facetas:<\/p>\n<ul>\n<li><strong>Construir o bloco.<\/strong> Isso envolve a configura\u00e7\u00e3o de um ambiente de desenvolvimento local e a cria\u00e7\u00e3o da estrutura de arquivos para todo o bloco.<\/li>\n<li><strong>Atualiza\u00e7\u00e3o do arquivo <code>block.json<\/code>.<\/strong> Aqui, voc\u00ea precisar\u00e1 alterar a identidade do bloco e adicionar <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/block-api\/block-supports\/\" target=\"_blank\" rel=\"noopener noreferrer\">suportes<\/a>. Esses \u00faltimos s\u00e3o maneiras de declarar o suporte a funcionalidades espec\u00edficas do WordPress. Por exemplo, voc\u00ea pode lidar com o alinhamento, implementar campos \u00e2ncora, trabalhar com v\u00e1rias configura\u00e7\u00f5es de tipografia e muito mais.<\/li>\n<li><strong>Ajuste os arquivos JavaScript do bloco.<\/strong> Tanto o <code>index.js<\/code> quanto o <code>edit.js<\/code> precisam de c\u00f3digo para informar ao WordPress como o bloco funciona e para permitir que ele apare\u00e7a no Editor de Sites.<\/li>\n<\/ul>\n<p>Talvez voc\u00ea tamb\u00e9m precise editar <code>render.php<\/code>, adicionar renderiza\u00e7\u00e3o est\u00e1tica e uma s\u00e9rie de outras tarefas. Nesse ponto, voc\u00ea pode aplicar quaisquer altera\u00e7\u00f5es estil\u00edsticas ao <code>theme.json<\/code> como em qualquer outro bloco. Por enquanto, vamos dar uma olhada mais de perto em <code>block.json<\/code>.<\/p>\n<h3>O arquivo block.json<\/h3>\n<p>Esse arquivo \u00e9 o que a equipe de desenvolvimento do WordPress chama de maneira &#8220;can\u00f4nica&#8221; de registrar Blocos para o lado do servidor e do cliente. Os metadados que voc\u00ea inclui aqui informam ao WordPress tudo sobre o tipo de bloco e seus arquivos de suporte:<\/p>\n<pre><code class=\"language-json\">{\n  \"$schema\": \"https:\/\/schemas.wp.org\/trunk\/block.json\",\n  \"apiVersion\": 3,\n  \"name\": \"my-plugin\/notice\",\n  \"title\": \"Notice\",\n  \"category\": \"text\",\n  \"parent\": [ \"core\/group\" ],\n  \"icon\": \"star\",\n  \"description\": \"Shows warning, error or success notices...\",\n  \"keywords\": [ \"alert\", \"message\" ],\n  \"version\": \"1.0.3\",\n  \"textdomain\": \"my-plugin\",\n  \"attributes\": {\n    \"message\": {\n      \"type\": \"string\",\n      \"source\": \"html\",\n      \"selector\": \".message\"\n    }\n  },\n\u2026<\/code><\/pre>\n<p>\u00c9 semelhante aos metadados que voc\u00ea colocaria na parte superior de um arquivo <a href=\"https:\/\/kinsta.com\/php\/\">PHP<\/a> para temas e plugins. Embora o arquivo use exclusivamente dados JSON, voc\u00ea ainda pode compartilhar c\u00f3digo por meio do PHP, <a href=\"https:\/\/kinsta.com\/javascript\/\">JavaScript<\/a> e CSS:<\/p>\n<pre><code class=\"language-json\">\u2026\n\"editorScript\": \"file:.\/index.js\",\n\"script\": \"file:.\/script.js\",\n\"viewScript\": [ \"file:.\/view.js\", \"example-shared-view-script\" ],\n\"editorStyle\": \"file:.\/index.css\",\n\"style\": [ \"file:.\/style.css\", \"example-shared-style\" ],\n\"viewStyle\": [ \"file:.\/view.css\", \"example-view-style\" ],\n\"render\": \"file:.\/render.php\"\n\u2026<\/code><\/pre>\n<p>Voltaremos a esse assunto mais tarde na se\u00e7\u00e3o sobre varia\u00e7\u00f5es. Para finalizar esta se\u00e7\u00e3o, voc\u00ea precisa saber como definir seu bloco personalizado como padr\u00e3o no WordPress. H\u00e1 algumas maneiras de fazer isso. A maneira cl\u00e1ssica \u00e9 <a href=\"https:\/\/kinsta.com\/pt\/blog\/tipos-publicacoes-personalizadas-wordpress\/\">registrar um tipo de post personalizado<\/a> e incluir os blocos nele. Entretanto, h\u00e1 alguns outros m\u00e9todos.<\/p>\n<p>Por exemplo, voc\u00ea pode atualizar um tipo de post existente para <a href=\"https:\/\/kinsta.com\/pt\/blog\/wordpress-templates-publicacao\/#how-to-create-a-custom-wordpress-post-template\">adicionar um modelo de bloco<\/a>. Aqui est\u00e1 um exemplo simples:<\/p>\n<pre><code class=\"language-php\">\u2026\nfunction load_post_type_patterns() {\n    \/\/ Define an initial pattern for the 'HypnoToad' post type\n    $post_type_object = get_post_type_object( 'hypnoToad' );\n    $post_type_object-&gt;template = array(\n    array(\n        'core\/block',\n\u2026<\/code><\/pre>\n<p>Outra maneira \u00e9 chamar o hook <code>default_content<\/code> e definir o bloco usando a marca\u00e7\u00e3o:<\/p>\n<pre><code class=\"language-php\">function toad_content( $content, $post ) {\n    if ( $post-&gt;post_type === 'hypnoToad' ) {\n        $content ='\n        &lt;div class=\"wp-block-columns\"&gt;&lt;!-- wp:column \u2192\n        &lt;div class=\"wp-block-column\"&gt;\n        &lt;p&gt;&lt;\/p&gt;\n        &lt;\/div&gt;\n        \n\n\n        &lt;div class=\"wp-block-column\"&gt;\n        &lt;p&gt;&lt;\/p&gt;\n        &lt;\/div&gt;\n        &lt;\/div&gt;\n        <!-- \/wp:columns -->';\n    }\n    return $content;\n}\nadd_filter( 'default_content', 'toad_content', 10, 2 );<\/code><\/pre>\n<p>Obviamente, voc\u00ea n\u00e3o usar\u00e1 apenas JSON, <a href=\"https:\/\/kinsta.com\/pt\/blog\/o-que-e-html\/\">HTML<\/a> e PHP. Voc\u00ea tamb\u00e9m usar\u00e1 outras linguagens para ajudar no design e na interatividade. A boa not\u00edcia \u00e9 que o WordPress oferece a voc\u00ea uma maneira descomplicada de fazer isso.<\/p>\n<h2>Usando propriedades CSS personalizadas para seus blocos<\/h2>\n<p>Voc\u00ea pode conseguir muito usando as propriedades, os atributos e os objetos existentes em <code>theme.json<\/code>, mas isso n\u00e3o cobrir\u00e1 todos os casos de uso. O arquivo fornece a propriedade <code>custom<\/code> que ajudar\u00e1 voc\u00ea a criar propriedades CSS relevantes:<\/p>\n<pre><code class=\"language-json\">{\n\"version\": 3,\n  \"settings\": {\n    \"custom\": {\n      \"toad\": \"hypno\"\n    }\n  }\n}<\/code><\/pre>\n<p>Aqui, voc\u00ea fornece um par chave-valor, que se transforma em uma vari\u00e1vel CSS no frontend:<\/p>\n<pre><code class=\"language-json\">body {\n    --wp--custom--toad: hypno;\n}<\/code><\/pre>\n<p>Observe que a vari\u00e1vel usar\u00e1 h\u00edfens duplos para separar seus elementos. Em geral, voc\u00ea sempre ver\u00e1 <code>--wp--custom--<\/code>, que marcar\u00e1 a chave no final. \u00c0s vezes, voc\u00ea definir\u00e1 vari\u00e1veis e propriedades com camel case:<\/p>\n<pre><code class=\"language-json\">{\n\"version\": 3,\n  \"settings\": {\n    \"custom\": {\n      \"hypnoToad\": \"active\"\n    }\n  }\n}<\/code><\/pre>\n<p>Aqui, o WordPress usar\u00e1 h\u00edfens para separar as palavras:<\/p>\n<pre><code class=\"language-json\">body {\n    --wp--custom--hypno-toad: active;\n}<\/code><\/pre>\n<p>Entre a propriedade <code>custom<\/code> e <code>block.json<\/code>, voc\u00ea tem total liberdade para criar seus Blocos como achar melhor, inclusive quaisquer varia\u00e7\u00f5es que queira incluir.<\/p>\n<h2>Um breve resumo sobre varia\u00e7\u00f5es de bloco, estilos e varia\u00e7\u00f5es de estilos de blocos<\/h2>\n<p>Antes de passarmos ao estilo usando a propriedade <code>blocks<\/code>, vamos dar uma olhada nas varia\u00e7\u00f5es. Voc\u00ea tem alguns tipos de varia\u00e7\u00e3o diferentes para seus designs, e as conven\u00e7\u00f5es de nomenclatura podem fazer com que voc\u00ea use o tipo errado para suas necessidades. Aqui est\u00e1 um detalhamento das diferen\u00e7as:<\/p>\n<ul>\n<li><strong>Varia\u00e7\u00f5es de bloco.<\/strong> Se o seu bloco tiver vers\u00f5es alternativas (pense em um bloco que exibir\u00e1 muitos links personalizados definidos pelo usu\u00e1rio), isso \u00e9 uma varia\u00e7\u00e3o de bloco. O bloco de m\u00eddia social \u00e9 um bom exemplo disso.<\/li>\n<li><strong>Varia\u00e7\u00f5es de estilo.<\/strong> Essas s\u00e3o vers\u00f5es alternativas do <code>theme.json<\/code> que funcionam em seu site global. N\u00e3o abordamos esse assunto aqui, mas a maioria dos temas de bloco os oferece para v\u00e1rias paletas de cores e configura\u00e7\u00f5es de tipografia.<\/li>\n<li><strong>Varia\u00e7\u00f5es de estilos de blocos.<\/strong> Essa funcionalidade central das varia\u00e7\u00f5es de estilo permite que voc\u00ea crie designs alternativos para um bloco.<\/li>\n<\/ul>\n<p>Voc\u00ea pode se perguntar se deve usar uma varia\u00e7\u00e3o de Bloco ou uma varia\u00e7\u00e3o de estilo de Bloco. A resposta \u00e9 simples: Se as mudan\u00e7as que voc\u00ea deseja fazer podem ser realizadas no <code>theme.json<\/code> ou com CSS, crie uma varia\u00e7\u00e3o de estilo de Bloco. Qualquer outra modifica\u00e7\u00e3o requer uma varia\u00e7\u00e3o de Bloco.<\/p>\n<h3>Varia\u00e7\u00f5es de bloco<\/h3>\n<p>Com as <a href=\"https:\/\/developer.wordpress.org\/themes\/features\/block-variations\/\" target=\"_blank\" rel=\"noopener noreferrer\">varia\u00e7\u00f5es de bloco<\/a>, voc\u00ea as registrar\u00e1 usando JavaScript. Criar um arquivo dentro do diret\u00f3rio de um tema \u00e9 uma boa ideia, mas voc\u00ea pode ir para qualquer lugar. Voc\u00ea precisa de uma linha para registrar uma varia\u00e7\u00e3o no seu arquivo JavaScript:<\/p>\n<pre><code class=\"language-js\">const registerBlockVariation = ( blockName, variation )<\/code><\/pre>\n<p>Para <code>blockName<\/code>, voc\u00ea precisar\u00e1 especificar o namespace aqui tamb\u00e9m, como faria com a propriedade <code>blocks<\/code>. No objeto <code>variation<\/code>, voc\u00ea adicionar\u00e1 o nome, o t\u00edtulo, a descri\u00e7\u00e3o, se a varia\u00e7\u00e3o est\u00e1 ativa por padr\u00e3o e muito mais. Para carregar o arquivo no Editor de Sites, basta chamar o hook <code>enqueue_block_editor_assets<\/code> e <a href=\"https:\/\/kinsta.com\/pt\/blog\/wp-enqueue-scripts\/\">enfileirar seu script<\/a> dentro dele.<\/p>\n<h3>Varia\u00e7\u00f5es de estilo de bloco<\/h3>\n<p>Quando se trata de varia\u00e7\u00f5es de estilo de bloco, voc\u00ea tem <a href=\"https:\/\/developer.wordpress.org\/themes\/features\/block-style-variations\" target=\"_blank\" rel=\"noopener noreferrer\">duas op\u00e7\u00f5es<\/a>:<\/p>\n<ul>\n<li>Use a fun\u00e7\u00e3o <code>register_block_style()<\/code> com PHP.<\/li>\n<li>Criar um arquivo JavaScript <code>block-editor.js<\/code>, usar a fun\u00e7\u00e3o <code>registerBlockStyle()<\/code> de forma semelhante \u00e0s varia\u00e7\u00f5es de bloco e enfileirar o script.<\/li>\n<\/ul>\n<p>Depois de registrar uma varia\u00e7\u00e3o de estilo de bloco, voc\u00ea pode direcionar o bloco usando a propriedade <code>variations<\/code>:<\/p>\n<pre><code class=\"language-json\">\u2026\n\"styles\": {\n  \"blocks\": {\n    \"core\/button\": {\n      \"variations\": {\n        \"outline\": {\n          \"border\": {\n            \"color\": \"var:preset|color|black\",\n            \"radius\": \"0\",\n            \"style\": \"solid\",\n            \"width\": \"3px\"\n          },\n\u2026<\/code><\/pre>\n<p>Isso significa que talvez voc\u00ea n\u00e3o precise de nenhum CSS personalizado &#8211; quase todos os aspectos do design de um bloco s\u00e3o poss\u00edveis por meio da propriedade <code>blocks<\/code>.<\/p>\n<h2>Como estilizar um bloco padr\u00e3o usando a propriedade blocks do in\u00edcio ao fim<\/h2>\n<p>Para demonstrar como a propriedade <code>blocks<\/code> funciona, vamos examinar um exemplo real. Nosso site usa o tema Twenty Twenty-Four e est\u00e1 usando a varia\u00e7\u00e3o de estilo padr\u00e3o:<\/p>\n<figure id=\"attachment_184912\" aria-describedby=\"caption-attachment-184912\" style=\"width: 1200px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-184912 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/08\/default-style-variation.png\" alt=\"O Editor de Sites do WordPress exibindo a p\u00e1gina inicial de um site no lado direito, com o menu de Estilos \u00e0 esquerda. H\u00e1 v\u00e1rias op\u00e7\u00f5es para escolher um esquema de cores alternativo, juntamente com op\u00e7\u00f5es de personaliza\u00e7\u00e3o da paleta.\" width=\"1200\" height=\"750\"><figcaption id=\"caption-attachment-184912\" class=\"wp-caption-text\">Em geral, cada tema vem com diversas varia\u00e7\u00f5es de estilo que proporcionam visuais diferentes.<\/figcaption><\/figure>\n<p>At\u00e9 o momento, isso parece ideal para n\u00f3s, embora os cabe\u00e7alhos e o corpo do texto pare\u00e7am ter cores muito semelhantes. Queremos alterar uma ou ambas as cores para diferenci\u00e1-las. Como usu\u00e1rio final ou propriet\u00e1rio do site, podemos corrigir isso na barra lateral de estilos do Editor de Sites. Se voc\u00ea for para <strong>Blocks <\/strong>&gt;<strong> Heading (Blocos<\/strong><strong>\u00a0<\/strong>&gt;<strong> T\u00edtulo)<\/strong>, poder\u00e1 clicar no elemento Text (Texto) e alterar a cor para algo mais adequado:<\/p>\n<figure id=\"attachment_184920\" aria-describedby=\"caption-attachment-184920\" style=\"width: 1200px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-184920 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/08\/styles-heading-editor.png\" alt=\"A interface do Editor de Sites do WordPress exibindo a p\u00e1gina inicial de um site. A \u00e1rea de conte\u00fado principal mostra um t\u00edtulo, uma breve descri\u00e7\u00e3o e um bot\u00e3o \"Sobre n\u00f3s\", todos em preto. Abaixo, h\u00e1 uma imagem arquitet\u00f4nica de um pr\u00e9dio moderno com ripas de madeira inclinadas. Na barra lateral direita, est\u00e3o as op\u00e7\u00f5es de Estilos, com um painel expans\u00edvel para selecionar a cor do texto.\" width=\"1200\" height=\"750\"><figcaption id=\"caption-attachment-184920\" class=\"wp-caption-text\">Voc\u00ea pode alterar as configura\u00e7\u00f5es de blocos individuais com facilidade no Editor de Sites.<\/figcaption><\/figure>\n<p>Entretanto, como desenvolvedor, voc\u00ea pode fazer isso em <code>theme.json<\/code>. <span style=\"margin: 0px;padding: 0px\">Como qualquer outro tema, a melhor abordagem \u00e9 <a href=\"https:\/\/kinsta.com\/pt\/blog\/tema-filho-no-wordpress\/\">criar um tema filho (child theme)<\/a>\u00a0para<\/span> preservar as altera\u00e7\u00f5es feitas. Uma segunda vantagem \u00e9 que seu arquivo <code>theme.json<\/code> ter\u00e1 uma apar\u00eancia mais limpa.<\/p>\n<p>Criaremos um diret\u00f3rio em <code>wp-content\/themes\/<\/code> e o chamaremos de <code>twentytwentyfour-child<\/code>. Aqui, adicione um arquivo <code>style.css<\/code> v\u00e1lido e um arquivo <code>theme.json<\/code> em branco.<\/p>\n<figure id=\"attachment_184909\" aria-describedby=\"caption-attachment-184909\" style=\"width: 1200px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-184909 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/08\/child-theme-directory.png\" alt=\"Uma janela do explorador de arquivos do macOS para o tema **twentytwentyfour-child** exibindo dois arquivos: **style.css** e **theme.json**, indicando a configura\u00e7\u00e3o de um tema filho para desenvolvimento no WordPress.\" width=\"1200\" height=\"614\"><figcaption id=\"caption-attachment-184909\" class=\"wp-caption-text\">Cada diret\u00f3rio de tema filho (child theme) precisa de um arquivo <strong>style.css<\/strong> e um arquivo <strong>theme.json<\/strong>.<\/figcaption><\/figure>\n<p>A partir daqui, voc\u00ea pode abrir o arquivo JSON e come\u00e7ar a trabalhar.<\/p>\n<h3>Criando e preenchendo um arquivo theme.json para o tema filho (child theme)<\/h3>\n<p>A principal diferen\u00e7a entre a cria\u00e7\u00e3o de um tema principal (parent theme) e um tema filho (child theme) com rela\u00e7\u00e3o a <code>theme.json<\/code> \u00e9 a estrutura do arquivo. Voc\u00ea n\u00e3o precisar\u00e1 declarar o esquema ou necessariamente colocar tudo dentro do objeto <code>settings<\/code>. Em nosso caso, temos que usar a propriedade <code>styles<\/code>:<\/p>\n<pre><code class=\"language-json\">{\n\"version\": 3,\n  \"styles\": {\n    \"blocks\": {}\n  }\n}<\/code><\/pre>\n<p>Em seguida, precisamos encontrar o namespace e o slug para o Heading Block. O <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/core-blocks\/\">Guia de Refer\u00eancia oficial dos Core Blocks<\/a> lista tudo isso e ainda nos informa quais atributos e propriedades o bloco suporta. O guia nos diz que podemos ajustar os valores <code>background<\/code>, <code>gradient<\/code>, <code>link<\/code> e <code>text<\/code> para a propriedade <code>color<\/code>.<\/p>\n<pre><code class=\"language-json\">\"blocks\": {\n  \"core\/heading\": {\n    \"color\": {}\n  }\n}<\/code><\/pre>\n<p>Com a estrutura conclu\u00edda, podemos come\u00e7ar a descobrir como reestilizar o texto.<\/p>\n<h3>Encontrar um esquema de cores e aplicar as altera\u00e7\u00f5es<\/h3>\n<p>Agora, precisamos de uma cor que atenda \u00e0s nossas necessidades. A varia\u00e7\u00e3o padr\u00e3o do Twenty Twenty-Four tem uma paleta excelente, e verific\u00e1-la em um verificador de contraste dedicado nos d\u00e1 algumas ideias:<\/p>\n<figure id=\"attachment_184918\" aria-describedby=\"caption-attachment-184918\" style=\"width: 1200px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-184918 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/08\/palette-contrast.png\" alt=\"A ferramenta de verifica\u00e7\u00e3o de contraste da paleta de cores Coolors mostra v\u00e1rias combina\u00e7\u00f5es de cores com amostras de texto para avaliar a acessibilidade e a legibilidade. Um quadrado com uma caixa destacada em vermelho mostra dois c\u00f3digos hexadecimais de cores contrastantes compat\u00edveis.\" width=\"1200\" height=\"820\"><figcaption id=\"caption-attachment-184918\" class=\"wp-caption-text\">Verificar se os esquemas de cores t\u00eam o contraste acess\u00edvel correto \u00e9 uma etapa fundamental no design de um tema.<\/figcaption><\/figure>\n<p>Em seguida, podemos adicionar a op\u00e7\u00e3o de cor do nosso bloco a <code>theme.json<\/code>. Como o tema principal do Twenty Twenty-Four usa propriedades CSS personalizadas para definir estilos de paleta, podemos chamar isso aqui tamb\u00e9m:<\/p>\n<pre><code class=\"language-json\">\u2026\n\"core\/paragraph\": {\n    \"color\": { \"text\": \"var(--wp--preset--color--contrast)\" },\n\u2026<\/code><\/pre>\n<p>Se precisar saber o nome de uma cor da paleta, voc\u00ea poder\u00e1 encontr\u00e1-lo no Editor de Sites, no seletor de cores:<\/p>\n<figure id=\"attachment_184919\" aria-describedby=\"caption-attachment-184919\" style=\"width: 1200px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-184919 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/08\/palette-editor-color.png\" alt=\"Um close-up da interface do seletor de cores do Text Elements. Ela mostra uma sele\u00e7\u00e3o de amostras de cores com c\u00f3digos de cores hexadecimais, com a cor Contraste definida como a op\u00e7\u00e3o principal.\" width=\"1200\" height=\"492\"><figcaption id=\"caption-attachment-184919\" class=\"wp-caption-text\">Voc\u00ea pode encontrar o nome de uma cor olhando para ela em uma paleta de cores do Editor de Sites.<\/figcaption><\/figure>\n<p>Depois de salvar as altera\u00e7\u00f5es, atualize o site e voc\u00ea ver\u00e1 o novo esquema de cores em vigor. Se isso n\u00e3o ocorrer, verifique se voc\u00ea est\u00e1 aninhando a propriedade <code>blocks<\/code> no objeto correto, pois esse \u00e9 um ponto de dificuldade comum.<\/p>\n<p>Ao analisar o site, o texto est\u00e1 com menos contraste e mais f\u00e1cil de ler. No entanto, ainda queremos ver uma defini\u00e7\u00e3o maior entre o bloco de par\u00e1grafos e os t\u00edtulos ao redor. A paleta padr\u00e3o do tema tem algumas outras cores mais ousadas. Vamos experimentar a cor Accent \/ 3 para o bloco de t\u00edtulo:<\/p>\n<pre><code class=\"language-json\">\"blocks\": {\n  \"core\/heading\": {\n    \"color\": { \"text\": \"var(--wp--preset--color--accent-3)\" }\n  },\n  \"core\/paragraph\": {\n    \"color\": { \"text\": \"var(--wp--preset--color--contrast)\" }\n  }\n}<\/code><\/pre>\n<p>Depois de salvar as altera\u00e7\u00f5es e atualizar o frontend, voc\u00ea ver\u00e1 que o Heading Block tem mais defini\u00e7\u00e3o:<\/p>\n<figure id=\"attachment_184907\" aria-describedby=\"caption-attachment-184907\" style=\"width: 1200px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-184907 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/08\/accent-color-heading.png\" alt=\"O Editor de Sites do WordPress exibindo a p\u00e1gina inicial de um site, incluindo uma imagem de cabe\u00e7alho com uma estrutura arquitet\u00f4nica moderna. O conte\u00fado principal exibe o texto \"Um compromisso com inova\u00e7\u00e3o e sustentabilidade\" em uma cor vermelho-alaranjada.\" width=\"1200\" height=\"677\"><figcaption id=\"caption-attachment-184907\" class=\"wp-caption-text\">Voc\u00ea ver\u00e1 que o Heading Block tem mais defini\u00e7\u00e3o: O frontend muda para o Heading Block com base nas configura\u00e7\u00f5es do <strong>theme.json<\/strong>.<\/figcaption><\/figure>\n<p>Isso n\u00e3o precisa ser o fim da sua edi\u00e7\u00e3o. Voc\u00ea pode at\u00e9 mesmo personalizar as op\u00e7\u00f5es do Editor de Sites em <code>theme.json<\/code>.<\/p>\n<h3>Como adicionar op\u00e7\u00f5es de atributos aos blocos<\/h3>\n<p>Os suportes de cada bloco determinam suas op\u00e7\u00f5es no Editor de Sites. Por exemplo, o Bloco de par\u00e1grafo tem como padr\u00e3o a desativa\u00e7\u00e3o da funcionalidade de capitular.<\/p>\n<figure id=\"attachment_184917\" aria-describedby=\"caption-attachment-184917\" style=\"width: 1200px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-184917 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/08\/no-drop-caps-option.png\" alt=\"O Editor de Sites do WordPress exibindo um close-up da barra lateral de op\u00e7\u00f5es \u00e0 direita. O painel flutuante de personaliza\u00e7\u00e3o de Tipografia mostra op\u00e7\u00f5es para fonte, tamanho, apar\u00eancia, altura da linha, espa\u00e7amento entre letras, decora\u00e7\u00e3o, orienta\u00e7\u00e3o e caixa de letras \u2014 mas sem a op\u00e7\u00e3o de capitular.\" width=\"1200\" height=\"633\"><figcaption id=\"caption-attachment-184917\" class=\"wp-caption-text\">O Editor de Sites n\u00e3o permite que voc\u00ea opte por implementar drop caps por padr\u00e3o.<\/figcaption><\/figure>\n<p>Podemos reativar essa op\u00e7\u00e3o no arquivo <code>theme.json<\/code> e na propriedade <code>blocks<\/code>. Ao analisar o material de refer\u00eancia, podemos aproveitar a propriedade typography para habilitar o drop caps.<\/p>\n<pre><code class=\"language-json\">\u2026\n\"core\/paragraph\": {\n  \"color\": { \"text\": \"var(--wp--preset--color--contrast)\" },\n  \"typography\": { \"dropCap\": true }\n\u2026<\/code><\/pre>\n<p>Assim que salvamos essas altera\u00e7\u00f5es e atualizamos o editor, a op\u00e7\u00e3o para ativar ou desativar o drop cap estar\u00e1 dispon\u00edvel para voc\u00ea:<\/p>\n<figure id=\"attachment_184914\" aria-describedby=\"caption-attachment-184914\" style=\"width: 1200px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-184914 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/08\/drop-cap.png\" alt=\"A interface do Editor de Blocos do WordPress exibindo um par\u00e1grafo de texto Lorem Ipsum com um **drop cap** grande. As op\u00e7\u00f5es de personaliza\u00e7\u00e3o de tipografia est\u00e3o vis\u00edveis na barra lateral direita, e o menu \"Mais elementos\" est\u00e1 aberto, mostrando a op\u00e7\u00e3o de **Drop cap** habilitada.\" width=\"1200\" height=\"750\"><figcaption id=\"caption-attachment-184914\" class=\"wp-caption-text\">Se voc\u00ea ativar a funcionalidade Drop Cap no Editor de Sites do WordPress, levar\u00e1 alguns segundos com o <strong>arquivo theme.json<\/strong>.<\/figcaption><\/figure>\n<p>O arquivo <code>theme.json<\/code> n\u00e3o \u00e9 apenas uma configura\u00e7\u00e3o para o design. Ele tamb\u00e9m pode ajudar a adicionar e remover funcionalidades do Editor de Sites.<\/p>\n<h2>Como a hospedagem gerenciada da Kinsta pode apoiar o desenvolvimento de temas WordPress<\/h2>\n<p>As complexidades do desenvolvimento de temas e do <code>theme.json<\/code> dependem de solu\u00e7\u00f5es de qualidade em toda a cadeia de desenvolvimento para que voc\u00ea possa aproveitar o potencial de desempenho aprimorado.<\/p>\n<p>Um ambiente de desenvolvimento local \u00e9 crucial, pois isso permite que voc\u00ea crie, gerencie e ajuste sites WordPress diretamente na sua m\u00e1quina. O <a href=\"https:\/\/kinsta.com\/pt\/devkinsta\/\">DevKinsta<\/a> pode ser uma grande ajuda nesse processo.<\/p>\n<figure id=\"attachment_184913\" aria-describedby=\"caption-attachment-184913\" style=\"width: 1200px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-184913 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/08\/devkinsta-interface.png\" alt=\"O painel de informa\u00e7\u00f5es do site no DevKinsta exibe detalhes t\u00e9cnicos, como a vers\u00e3o do WordPress, o servidor web e o tipo de banco de dados, al\u00e9m de op\u00e7\u00f5es para gerenciar o site.\" width=\"1200\" height=\"689\"><figcaption id=\"caption-attachment-184913\" class=\"wp-caption-text\">A interface do DevKinsta.<\/figcaption><\/figure>\n<p>O DevKinsta oferece muitos benef\u00edcios:<\/p>\n<ul>\n<li>Ele \u00e9 executado em cont\u00eaineres Docker, o que significa que voc\u00ea isola sua instala\u00e7\u00e3o do restante da m\u00e1quina. Dessa forma, voc\u00ea pode testar as configura\u00e7\u00f5es do <code>theme.json<\/code> e os blocos personalizados sem preocupa\u00e7\u00f5es.<\/li>\n<li>Voc\u00ea pode fazer itera\u00e7\u00f5es r\u00e1pidas em seu arquivo <code>theme.json<\/code> e ver os resultados imediatamente em seu ambiente local.<\/li>\n<li>Criar v\u00e1rios sites locais para testar seu tema em diferentes vers\u00f5es e configura\u00e7\u00f5es do WordPress \u00e9 muito f\u00e1cil.<\/li>\n<\/ul>\n<p>Al\u00e9m disso, voc\u00ea n\u00e3o usar\u00e1 nenhum dos recursos do seu servidor at\u00e9 que esteja satisfeito e pronto. Os <a href=\"https:\/\/kinsta.com\/pt\/blog\/ambiente-de-teste-kinsta\/\">ambientes de teste<\/a> da Kinsta fornecem a pr\u00f3xima etapa ideal. Voc\u00ea pode criar uma c\u00f3pia do seu site de produ\u00e7\u00e3o rapidamente e at\u00e9 mesmo transferi-la para o seu ambiente local para continuar trabalhando.<\/p>\n<p>Essa \u00e9 uma \u00f3tima maneira de realizar testes de desempenho para o seu tema, especialmente quando voc\u00ea combina o ambiente de teste com a ferramenta de <a href=\"https:\/\/kinsta.com\/pt\/docs\/hospedagem-de-wordpress\/monitoramento-wordpress\/ferramenta-apm\/\">Monitoramento de Desempenho de Aplicativos<\/a> (APM) da Kinsta.<\/p>\n<p>Voc\u00ea tamb\u00e9m pode aproveitar a integra\u00e7\u00e3o do Git da Kinsta em todos os seus ambientes. Isso permite que voc\u00ea fa\u00e7a push e pull de altera\u00e7\u00f5es nos reposit\u00f3rios e implemente a partir deles tamb\u00e9m.<\/p>\n<h2>Resumo<\/h2>\n<p>Entender a propriedade <code>blocks<\/code> em <code>theme.json<\/code> \u00e9 uma etapa necess\u00e1ria para todos os desenvolvedores de temas. Voc\u00ea pode usar um design global e torn\u00e1-lo mais exclusivo, coeso e relevante. Ter o escopo completo para trabalhar com o n\u00facleo individual e as configura\u00e7\u00f5es personalizadas do bloco ajuda cada usu\u00e1rio a aproveitar os recursos de edi\u00e7\u00e3o completa de sites. Al\u00e9m disso, ter essas op\u00e7\u00f5es dispon\u00edveis no Editor de Sites significa que os usu\u00e1rios finais podem fazer suas pr\u00f3prias altera\u00e7\u00f5es sem c\u00f3digo, enquanto voc\u00ea apresenta op\u00e7\u00f5es padr\u00e3o excepcionais.<br><br>Voc\u00ea tem alguma d\u00favida sobre o uso da propriedade <code>blocks<\/code> com o arquivo <code>theme.json<\/code>? Pergunte na se\u00e7\u00e3o de coment\u00e1rios abaixo!<\/p>","protected":false},"excerpt":{"rendered":"<p>A introdu\u00e7\u00e3o da edi\u00e7\u00e3o completa de sites (FSE) no WordPress destaca a import\u00e2ncia crescente do arquivo theme.json. Agora h\u00e1 uma hierarquia e uma estrutura totalmente novas &#8230;<\/p>\n","protected":false},"author":199,"featured_media":69862,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[],"topic":[1026,1039],"class_list":["post-69861","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","topic-desenvolvimento-wordpress","topic-design-sites-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>Principais Insights Sobre a Propriedade Blocks do theme.json para Desenvolvedores<\/title>\n<meta name=\"description\" content=\"Aprenda a usar a propriedade blocks do theme.json para aproveitar uma abordagem simplificada no desenvolvimento de temas WordPress.\" \/>\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\/propriedade-blocks-theme-json\/\" \/>\n<meta property=\"og:locale\" content=\"pt_PT\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"O Que os Desenvolvedores de WordPress Precisam Saber Sobre a Propriedade Blocks no theme.json\" \/>\n<meta property=\"og:description\" content=\"Aprenda a usar a propriedade blocks do theme.json para aproveitar uma abordagem simplificada no desenvolvimento de temas WordPress.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/pt\/blog\/propriedade-blocks-theme-json\/\" \/>\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=\"2024-10-02T14:29:38+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-10-03T13:02:50+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2024\/09\/blocks-property-in-theme-json.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1460\" \/>\n\t<meta property=\"og:image:height\" content=\"730\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Jeremy Holcombe\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"Aprenda a usar a propriedade blocks do theme.json para aproveitar uma abordagem simplificada no desenvolvimento de temas WordPress.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2024\/09\/blocks-property-in-theme-json-1024x512.png\" \/>\n<meta name=\"twitter:creator\" content=\"@kinsta_pt\" \/>\n<meta name=\"twitter:site\" content=\"@kinsta_pt\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jeremy Holcombe\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tempo estimado de leitura\" \/>\n\t<meta name=\"twitter:data2\" content=\"20 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/propriedade-blocks-theme-json\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/propriedade-blocks-theme-json\/\"},\"author\":{\"name\":\"Jeremy Holcombe\",\"@id\":\"https:\/\/kinsta.com\/pt\/#\/schema\/person\/4eee42881d7b5a73ebb4f58dd5223b21\"},\"headline\":\"O Que os Desenvolvedores de WordPress Precisam Saber Sobre a Propriedade Blocks no theme.json\",\"datePublished\":\"2024-10-02T14:29:38+00:00\",\"dateModified\":\"2024-10-03T13:02:50+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/propriedade-blocks-theme-json\/\"},\"wordCount\":3608,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/pt\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/propriedade-blocks-theme-json\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2024\/09\/blocks-property-in-theme-json.png\",\"inLanguage\":\"pt-PT\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/pt\/blog\/propriedade-blocks-theme-json\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/propriedade-blocks-theme-json\/\",\"url\":\"https:\/\/kinsta.com\/pt\/blog\/propriedade-blocks-theme-json\/\",\"name\":\"Principais Insights Sobre a Propriedade Blocks do theme.json para Desenvolvedores\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/pt\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/propriedade-blocks-theme-json\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/propriedade-blocks-theme-json\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2024\/09\/blocks-property-in-theme-json.png\",\"datePublished\":\"2024-10-02T14:29:38+00:00\",\"dateModified\":\"2024-10-03T13:02:50+00:00\",\"description\":\"Aprenda a usar a propriedade blocks do theme.json para aproveitar uma abordagem simplificada no desenvolvimento de temas WordPress.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/propriedade-blocks-theme-json\/#breadcrumb\"},\"inLanguage\":\"pt-PT\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/pt\/blog\/propriedade-blocks-theme-json\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-PT\",\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/propriedade-blocks-theme-json\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2024\/09\/blocks-property-in-theme-json.png\",\"contentUrl\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2024\/09\/blocks-property-in-theme-json.png\",\"width\":1460,\"height\":730},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/propriedade-blocks-theme-json\/#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\":\"O Que os Desenvolvedores de WordPress Precisam Saber Sobre a Propriedade Blocks no theme.json\"}]},{\"@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\/4eee42881d7b5a73ebb4f58dd5223b21\",\"name\":\"Jeremy Holcombe\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-PT\",\"@id\":\"https:\/\/kinsta.com\/pt\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/0e17001f3bb37dbbe54fceef9bb547fa?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/0e17001f3bb37dbbe54fceef9bb547fa?s=96&d=mm&r=g\",\"caption\":\"Jeremy Holcombe\"},\"description\":\"Senior Editor at Kinsta, WordPress Web Developer, and Content Writer. Outside of all things WordPress, I enjoy the beach, golf, and movies. I also have tall people problems.\",\"sameAs\":[\"https:\/\/www.linkedin.com\/in\/jeremyholcombe\/\"],\"url\":\"https:\/\/kinsta.com\/pt\/blog\/author\/jeremyholcombe\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Principais Insights Sobre a Propriedade Blocks do theme.json para Desenvolvedores","description":"Aprenda a usar a propriedade blocks do theme.json para aproveitar uma abordagem simplificada no desenvolvimento de temas WordPress.","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\/propriedade-blocks-theme-json\/","og_locale":"pt_PT","og_type":"article","og_title":"O Que os Desenvolvedores de WordPress Precisam Saber Sobre a Propriedade Blocks no theme.json","og_description":"Aprenda a usar a propriedade blocks do theme.json para aproveitar uma abordagem simplificada no desenvolvimento de temas WordPress.","og_url":"https:\/\/kinsta.com\/pt\/blog\/propriedade-blocks-theme-json\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/kinstapt\/","article_published_time":"2024-10-02T14:29:38+00:00","article_modified_time":"2024-10-03T13:02:50+00:00","og_image":[{"width":1460,"height":730,"url":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2024\/09\/blocks-property-in-theme-json.png","type":"image\/png"}],"author":"Jeremy Holcombe","twitter_card":"summary_large_image","twitter_description":"Aprenda a usar a propriedade blocks do theme.json para aproveitar uma abordagem simplificada no desenvolvimento de temas WordPress.","twitter_image":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2024\/09\/blocks-property-in-theme-json-1024x512.png","twitter_creator":"@kinsta_pt","twitter_site":"@kinsta_pt","twitter_misc":{"Escrito por":"Jeremy Holcombe","Tempo estimado de leitura":"20 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/pt\/blog\/propriedade-blocks-theme-json\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/pt\/blog\/propriedade-blocks-theme-json\/"},"author":{"name":"Jeremy Holcombe","@id":"https:\/\/kinsta.com\/pt\/#\/schema\/person\/4eee42881d7b5a73ebb4f58dd5223b21"},"headline":"O Que os Desenvolvedores de WordPress Precisam Saber Sobre a Propriedade Blocks no theme.json","datePublished":"2024-10-02T14:29:38+00:00","dateModified":"2024-10-03T13:02:50+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/pt\/blog\/propriedade-blocks-theme-json\/"},"wordCount":3608,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/pt\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/pt\/blog\/propriedade-blocks-theme-json\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2024\/09\/blocks-property-in-theme-json.png","inLanguage":"pt-PT","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/pt\/blog\/propriedade-blocks-theme-json\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/pt\/blog\/propriedade-blocks-theme-json\/","url":"https:\/\/kinsta.com\/pt\/blog\/propriedade-blocks-theme-json\/","name":"Principais Insights Sobre a Propriedade Blocks do theme.json para Desenvolvedores","isPartOf":{"@id":"https:\/\/kinsta.com\/pt\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/pt\/blog\/propriedade-blocks-theme-json\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/pt\/blog\/propriedade-blocks-theme-json\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2024\/09\/blocks-property-in-theme-json.png","datePublished":"2024-10-02T14:29:38+00:00","dateModified":"2024-10-03T13:02:50+00:00","description":"Aprenda a usar a propriedade blocks do theme.json para aproveitar uma abordagem simplificada no desenvolvimento de temas WordPress.","breadcrumb":{"@id":"https:\/\/kinsta.com\/pt\/blog\/propriedade-blocks-theme-json\/#breadcrumb"},"inLanguage":"pt-PT","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/pt\/blog\/propriedade-blocks-theme-json\/"]}]},{"@type":"ImageObject","inLanguage":"pt-PT","@id":"https:\/\/kinsta.com\/pt\/blog\/propriedade-blocks-theme-json\/#primaryimage","url":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2024\/09\/blocks-property-in-theme-json.png","contentUrl":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2024\/09\/blocks-property-in-theme-json.png","width":1460,"height":730},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/pt\/blog\/propriedade-blocks-theme-json\/#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":"O Que os Desenvolvedores de WordPress Precisam Saber Sobre a Propriedade Blocks no theme.json"}]},{"@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\/4eee42881d7b5a73ebb4f58dd5223b21","name":"Jeremy Holcombe","image":{"@type":"ImageObject","inLanguage":"pt-PT","@id":"https:\/\/kinsta.com\/pt\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/0e17001f3bb37dbbe54fceef9bb547fa?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/0e17001f3bb37dbbe54fceef9bb547fa?s=96&d=mm&r=g","caption":"Jeremy Holcombe"},"description":"Senior Editor at Kinsta, WordPress Web Developer, and Content Writer. Outside of all things WordPress, I enjoy the beach, golf, and movies. I also have tall people problems.","sameAs":["https:\/\/www.linkedin.com\/in\/jeremyholcombe\/"],"url":"https:\/\/kinsta.com\/pt\/blog\/author\/jeremyholcombe\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/posts\/69861","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\/199"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/comments?post=69861"}],"version-history":[{"count":9,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/posts\/69861\/revisions"}],"predecessor-version":[{"id":69896,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/posts\/69861\/revisions\/69896"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/69861\/translations\/en"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/69861\/translations\/jp"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/69861\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/69861\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/69861\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/69861\/translations\/de"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/69861\/translations\/nl"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/69861\/translations\/es"},{"href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/69861\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/media\/69862"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/media?parent=69861"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/tags?post=69861"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/topic?post=69861"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}