{"id":70345,"date":"2024-11-18T06:05:13","date_gmt":"2024-11-18T09:05:13","guid":{"rendered":"https:\/\/kinqsta.com\/pt\/?p=70345&#038;preview=true&#038;preview_id=70345"},"modified":"2024-11-22T10:22:13","modified_gmt":"2024-11-22T13:22:13","slug":"theme-json-propriedades-pares-chave-valor","status":"publish","type":"post","link":"https:\/\/kinqsta.com\/pt\/blog\/theme-json-propriedades-pares-chave-valor\/","title":{"rendered":"Trabalhando com Propriedades e Pares de Valores-chave no theme.json"},"content":{"rendered":"<p>Compreender a estrutura e as propriedades do arquivo <code><a href=\"https:\/\/kinqsta.com\/pt\/blog\/propriedade-blocks-theme-json\/\">theme.json<\/a><\/code> \u00e9 fundamental para o <a href=\"https:\/\/kinqsta.com\/pt\/blog\/conceitos-basicos-temas-wordpress\/\">desenvolvimento de temas<\/a> de bloco. Esse arquivo funciona como o principal centro de configura\u00e7\u00e3o de todos os temas baseados em blocos.<\/p>\n<p>Seja construindo um tema do zero, personalizando um tema existente, desenvolvendo uma varia\u00e7\u00e3o de estilo ou trabalhando em um tema filho (child theme), compreender como trabalhar com o <code>theme.json<\/code> \u00e9 essencial.<\/p>\n<p>Felizmente, o JSON (JavaScript Object Notation) \u00e9 um formato leg\u00edvel por humanos com uma estrutura hier\u00e1rquica que organiza as informa\u00e7\u00f5es de propriedades gerais a espec\u00edficas. No contexto do <code>theme.json<\/code>, a familiaridade com <a href=\"https:\/\/kinqsta.com\/pt\/blog\/melhores-praticas-css\/\">CSS (Cascading Style Sheets)<\/a> \u00e9 mais relevante do que um conhecimento aprofundado de <a href=\"https:\/\/kinqsta.com\/pt\/blog\/o-que-e-javascript\/\">JavaScript<\/a>.<\/p>\n<p>Este artigo tem como objetivo detalhar as propriedades prim\u00e1rias e secund\u00e1rias (aninhadas) no arquivo <code>theme.json<\/code>, focando nas propriedades principais de configura\u00e7\u00f5es e estilos. Esses s\u00e3o os elementos principais do arquivo e forneceremos explica\u00e7\u00f5es detalhadas e exemplos de c\u00f3digo para cada um deles.<\/p>\n<p>Estamos construindo sobre os fundamentos apresentados no nosso artigo anterior, <em><a href=\"https:\/\/kinqsta.com\/pt\/blog\/theme-json\/\">Liberando o poder do theme.json: Personalizando seu tema de WordPress como um profissional<\/a>, <\/em>particularmente na se\u00e7\u00e3o <em><a href=\"https:\/\/kinqsta.com\/pt\/blog\/theme-json\/#working-with-the-themejson-file-properties\">Trabalhando com as propriedades do arquivo theme.json<\/a><\/em>.<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>Para o desenvolvimento local de temas, voc\u00ea pode usar a ferramenta de desenvolvimento da Kinsta, <a href=\"https:\/\/kinqsta.com\/pt\/devkinsta\/\">DevKinsta<\/a>, que permite configurar rapidamente <a href=\"https:\/\/kinqsta.com\/pt\/blog\/instalar-wordpress-localmente\/\">um ambiente WordPress local<\/a> e implantar facilmente em sua <a href=\"https:\/\/kinqsta.com\/pt\/mykinsta\/\">conta Kinsta<\/a>.<\/p>\n<p>A Kinsta tamb\u00e9m fornece acesso a <a href=\"https:\/\/kinqsta.com\/pt\/docs\/hospedagem-de-wordpress\/ambiente-de-teste\/\">ambientes de teste<\/a>, permitindo que voc\u00ea gerencie e aperfei\u00e7oe seus projetos web sem problemas. Isso pode ser particularmente \u00fatil quando voc\u00ea estiver testando altera\u00e7\u00f5es em seu tema, incluindo atualiza\u00e7\u00f5es no arquivo <code>theme.json<\/code>.<\/p>\n<\/aside>\n\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>Como os estilos s\u00e3o renderizados em um tema de bloco<\/h2>\n<p>O WordPress usa um processo interno em cascata para renderizar estilos de um site. Quando v\u00e1rias fontes definem a mesma configura\u00e7\u00e3o ou estilo, o WordPress precisa determinar qual delas tem prioridade. Abaixo est\u00e1 a ordem de prioridade que o WordPress segue para decidir quais estilos ser\u00e3o aplicados:<\/p>\n<ol start=\"1\">\n<li><strong>N\u00facleo do WordPress<\/strong> &#8211; O arquivo de fallback <code>theme.json<\/code> est\u00e1 no diret\u00f3rio wp-includes. Esse arquivo \u00e9 atualizado com as principais vers\u00f5es do WordPress e n\u00e3o deve ser editado.<\/li>\n<li><strong>Tema<\/strong> &#8211; O principal arquivo <code>theme.json<\/code> usado pelos desenvolvedores de temas para definir as configura\u00e7\u00f5es, os estilos e outras propriedades do tema.<\/li>\n<li><strong>Varia\u00e7\u00f5es de estilo<\/strong> &#8211; Se um tema incluir varia\u00e7\u00f5es de estilo, cada uma ter\u00e1 seu pr\u00f3prio arquivo <code>theme.json<\/code> armazenado no subdiret\u00f3rio de estilos do tema.<\/li>\n<li><strong>Tema filho (child theme)<\/strong> &#8211; Assim como nos temas cl\u00e1ssicos, um child theme pode modificar um tema principal (parent theme) sem alterar seus arquivos (opcional).<\/li>\n<li><strong>Varia\u00e7\u00f5es de estilo do tema filho (child theme)<\/strong> &#8211; Semelhante \u00e0s varia\u00e7\u00f5es de estilo regulares, child theme pode ter seu pr\u00f3prio arquivo <code>theme.json<\/code> em seu subdiret\u00f3rio de estilos (opcional).<\/li>\n<li><strong>Estilos criados pelo usu\u00e1rio<\/strong> &#8211; S\u00e3o estilos personalizados adicionados por meio de editores do WordPress (para p\u00e1ginas, artigos ou para o site como um todo) e armazenados no banco de dados.<\/li>\n<\/ol>\n<p>A ordem em cascata garante que os estilos das fontes de maior prioridade substituam os das fontes de menor prioridade. Por exemplo, as configura\u00e7\u00f5es no arquivo <code>theme.json<\/code> do tema substituir\u00e3o o n\u00facleo do WordPress <code>theme.json<\/code>. Da mesma forma, a varia\u00e7\u00e3o de estilo de um tema filho (child theme) preceder\u00e1 a varia\u00e7\u00e3o de estilo do tema principal (parent theme).<\/p>\n<p>Os estilos criados pelo usu\u00e1rio (6) t\u00eam a prioridade mais alta, substituindo todos os outros estilos na cascata.<\/p>\n<p>Neste artigo, nosso foco \u00e9 o arquivo <code>theme.json<\/code> localizado no diret\u00f3rio raiz de qualquer tema de bloco do WordPress.<\/p>\n<h2>Uma refer\u00eancia para as propriedades prim\u00e1rias e seus valores-chave<\/h2>\n<p>Vamos explorar os sete objetos de n\u00edvel superior em <code>theme.json<\/code>, que agrupamos em tr\u00eas se\u00e7\u00f5es para facilitar a compreens\u00e3o das informa\u00e7\u00f5es.<\/p>\n<h3>Algumas defini\u00e7\u00f5es antes de come\u00e7armos<\/h3>\n<p>Ao trabalhar com o <code>theme.json<\/code>, voc\u00ea provavelmente encontrar\u00e1 defini\u00e7\u00f5es diferentes para componentes importantes. Para maior clareza, veja como os definimos neste artigo:<\/p>\n<ol start=\"1\">\n<li><strong>Se\u00e7\u00f5es<\/strong> &#8211; Agrupamentos de op\u00e7\u00f5es de n\u00edvel superior (tamb\u00e9m chamados de &#8220;objetos de n\u00edvel superior&#8221; em alguns artigos).<\/li>\n<li><strong>Objetos <\/strong>&#8211; Os principais elementos do arquivo <code>theme.json<\/code>, como <code>settings<\/code> e <code>styles<\/code>.<\/li>\n<li><strong>Propriedades<\/strong> &#8211; Os componentes dentro dos objetos. Por exemplo, o objeto <code>settings<\/code> cont\u00e9m 12 propriedades diferentes.<\/li>\n<li><strong>Pares de chave-valor<\/strong> &#8211; As propriedades s\u00e3o compostas por pares de chave-valor. Uma \u201cchave\u201d representa um atributo da propriedade e est\u00e1 entre aspas. Um \u201cvalor\u201d pode ser um booleano, string ou array.<\/li>\n<\/ol>\n<p>Quando mencionamos &#8220;por padr\u00e3o&#8221;, estamos nos referindo \u00e0s configura\u00e7\u00f5es padr\u00e3o no arquivo <code>theme.json<\/code> do n\u00facleo, localizado em <code>wp-includes\/theme.json<\/code>.<\/p>\n<p>Por fim, &#8220;usu\u00e1rios&#8221; refere-se a qualquer pessoa que use o <a href=\"https:\/\/kinqsta.com\/pt\/blog\/painel-administrativo-wordpress\/\">admin do WordPress<\/a> e que possa modificar as configura\u00e7\u00f5es nos editores de site, p\u00e1gina ou artigo.<\/p>\n<h3>Vis\u00e3o geral da sintaxe<\/h3>\n<ol start=\"1\">\n<li><strong>Booleans<\/strong> n\u00e3o s\u00e3o delimitados por aspas.<\/li>\n<li><strong>Strings<\/strong> s\u00e3o delimitadas por aspas duplas.<\/li>\n<li><strong>Arrays<\/strong> s\u00e3o envolvidos por colchetes <code>[]<\/code>.<\/li>\n<li><strong>Objetos<\/strong> s\u00e3o delimitados por chaves <code>{}<\/code>, contendo v\u00e1rias propriedades ou objetos aninhados.<\/li>\n<li><strong>V\u00edrgulas<\/strong> s\u00e3o usadas para separar m\u00faltiplos pares de chave-valor dentro de um objeto.<\/li>\n<\/ol>\n<p>Aqui est\u00e1 um exemplo de sintaxe t\u00edpica:<\/p>\n<pre><code class=\"language-json\">{\n    \"house\": {\n        \"rooms\": \"kitchen\"\n    }\n}<\/code><\/pre>\n<h3>Agrupando as propriedades<\/h3>\n<p>Organizamos as propriedades em tr\u00eas se\u00e7\u00f5es para facilitar a navega\u00e7\u00e3o:<\/p>\n<ol start=\"1\">\n<li>Propriedades b\u00e1sicas<\/li>\n<li>Propriedades de configura\u00e7\u00f5es e estilos<\/li>\n<li>Propriedades de templates e padr\u00f5es<\/li>\n<\/ol>\n<p>Para simplificar os exemplos, \u00e0s vezes omitimos os delimitadores externos dos objetos. Em vez de mostrar a estrutura completa:<\/p>\n<pre><code class=\"language-json\">{\n    \"settings\": {\n        \"appearanceTools\": false,\n        \"background\": {\n            \"backgroundImage\": true\n        }\n    }\n}<\/code><\/pre>\n<p>Podemos encurt\u00e1-la para:<\/p>\n<pre><code class=\"language-json\">\"appearanceTools\": false,\n\"background\": {\n    \"backgroundImage\": true\n}<\/code><\/pre>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>Alguns exemplos s\u00e3o usados para ilustrar conceitos e podem n\u00e3o representar o uso pr\u00e1tico no desenvolvimento de temas.<\/p>\n<\/aside>\n\n<h3>Propriedades b\u00e1sicas<\/h3>\n<p>No in\u00edcio de um arquivo <code>theme.json<\/code>, voc\u00ea normalmente encontrar\u00e1 duas propriedades principais: <code>$schema<\/code> e <code>version<\/code>. Essas propriedades s\u00e3o geralmente colocadas na parte superior do arquivo. A vers\u00e3o atual do schema \u00e9 3, introduzida com o <a href=\"https:\/\/kinqsta.com\/pt\/blog\/wordpress-6-6\/\">WordPress 6.6<\/a>.<\/p>\n<pre><code class=\"language-json\">\"$schema\": \"https:\/\/schemas.wp.org\/wp\/6.6\/<code>theme.json<\/code>\", \"version\": 3<\/code><\/pre>\n<h3>Propriedades de configura\u00e7\u00f5es e estilos<\/h3>\n<p>Se voc\u00ea estiver familiarizado com temas cl\u00e1ssicos, considere a propriedade de configura\u00e7\u00f5es como recursos e fun\u00e7\u00f5es que geralmente seriam definidos no arquivo <code><a href=\"https:\/\/kinqsta.com\/pt\/blog\/wordpress-functions-php\/\">functions.php<\/a><\/code> e expostas na se\u00e7\u00e3o <strong>Apar\u00eancia<\/strong> &gt; <strong>Personalizado<\/strong> do administrador do WordPress.<\/p>\n<p>Os estilos, por outro lado, s\u00e3o semelhantes \u00e0s propriedades CSS que costumavam residir no arquivo <code>styles.css<\/code>, controlando o layout e o design do tema.<\/p>\n<h4>Configura\u00e7\u00f5es<\/h4>\n<p>Com exce\u00e7\u00e3o das propriedades <code>block<\/code> e <code>elements<\/code>, todas as outras configura\u00e7\u00f5es s\u00e3o globais. Como muitas dessas configura\u00e7\u00f5es s\u00e3o booleanas, elas funcionam como alternadores para ativar ou desativar um recurso da interface do usu\u00e1rio.<\/p>\n<p>\u00c9 importante observar que nem todas as chaves se aplicam a todos os contextos. Por exemplo, n\u00e3o \u00e9 poss\u00edvel permitir que os usu\u00e1rios definam uma altura m\u00ednima para um bloco de par\u00e1grafos.<\/p>\n<h5>Ferramentas de apar\u00eancia<\/h5>\n<p>Essas configura\u00e7\u00f5es podem ser ativadas coletivamente ou individualmente usando <code>\"appearanceTools\": true<\/code>.<\/p>\n<p>A ativa\u00e7\u00e3o desse recurso exp\u00f5e v\u00e1rias op\u00e7\u00f5es de interface do usu\u00e1rio no <a href=\"https:\/\/kinqsta.com\/pt\/blog\/edicao-completa-sites-wordpress\/\">editor do WordPress<\/a>, economizando o tempo dos desenvolvedores. Por padr\u00e3o, essas ferramentas est\u00e3o desativadas (<code>\"appearanceTools\": false<\/code>).<\/p>\n<p>As chaves em <code>appearanceTools<\/code> incluem:<\/p>\n<ul>\n<li><code>background<\/code>\n<ul>\n<li><code>backgroundImage<\/code> &#8211; Permite que o usu\u00e1rio adicione uma imagem de fundo aos blocos.<\/li>\n<li><code>backgroundSize<\/code> &#8211; Define como a imagem de fundo \u00e9 dimensionada (cobrir, conter, etc.).<\/li>\n<\/ul>\n<\/li>\n<li><code>border<\/code>\n<ul>\n<li><code>color<\/code> &#8211; Permite a sele\u00e7\u00e3o de cores para as bordas.<\/li>\n<li><code>style<\/code> &#8211; Permite que o usu\u00e1rio escolha o estilo da borda (s\u00f3lida, tracejada, pontilhada, etc.).<\/li>\n<li><code>width<\/code> &#8211; Controla a espessura da borda.<\/li>\n<li><code>radius<\/code> &#8211; Permite que os usu\u00e1rios definam cantos arredondados ajustando o raio da borda.<\/li>\n<\/ul>\n<\/li>\n<li><code>color<\/code>\n<ul>\n<li><code>link<\/code> &#8211; Permite que voc\u00ea defina uma cor para os links dentro do conte\u00fado.<\/li>\n<li><code>heading<\/code> &#8211; Permite que os usu\u00e1rios definam cores para as tags de t\u00edtulo (<code>&lt;h1&gt;<\/code>, <code>&lt;h2&gt;<\/code>, etc.).<\/li>\n<li><code>button<\/code> &#8211; Controla a cor dos bot\u00f5es no tema.<\/li>\n<li><code>caption<\/code> &#8211; Permite definir uma cor personalizada para as legendas.<\/li>\n<\/ul>\n<\/li>\n<li><code>dimensions<\/code>\n<ul>\n<li><code>aspectRatio<\/code> &#8211; Permite que os usu\u00e1rios controlem a rela\u00e7\u00e3o entre largura e altura dos blocos.<\/li>\n<li><code>minHeight<\/code> &#8211; Permite definir uma altura m\u00ednima para os blocos.<\/li>\n<\/ul>\n<\/li>\n<li><code>position<\/code>\n<ul>\n<li><code>sticky<\/code> &#8211; Permite que o usu\u00e1rio torne um bloco aderente, o que significa que ele permanece fixo no lugar durante a rolagem.<\/li>\n<\/ul>\n<\/li>\n<li><code>spacing<\/code>\n<ul>\n<li><code>blockGap<\/code> &#8211; Controla o espa\u00e7amento entre os blocos.<\/li>\n<li><code>margin<\/code> &#8211; Permite que os usu\u00e1rios ajustem as margens em torno de um bloco.<\/li>\n<li><code>padding<\/code> &#8211; Controla o preenchimento dentro de um bloco, definindo o espa\u00e7o entre o conte\u00fado e a borda.<\/li>\n<\/ul>\n<\/li>\n<li><code>typography<\/code>\n<ul>\n<li><code>lineHeight<\/code> &#8211; Permite que os usu\u00e1rios ajustem a altura da linha (espa\u00e7o entre linhas de texto) para melhorar a legibilidade.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p><strong>Exemplo:<\/strong> Se voc\u00ea quiser que os usu\u00e1rios adicionem uma imagem de fundo e mantenham outras ferramentas de apar\u00eancia desativadas, use:<\/p>\n<pre><code class=\"language-json\">\"appearanceTools\": false,\n\"background\": {\n    \"backgroundImage\": true\n}<\/code><\/pre>\n<figure style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2024\/10\/background-img-block.png\" alt=\"A interface de usu\u00e1rio resultante permite que os usu\u00e1rios adicionem uma imagem de fundo a um bloco de grupo.\" width=\"1001\" height=\"471\"><figcaption class=\"wp-caption-text\">A interface de usu\u00e1rio resultante permite que os usu\u00e1rios adicionem uma imagem de fundo a um bloco de grupo.<\/figcaption><\/figure>\n<h5>Blocos<\/h5>\n<p>A propriedade <code>blocks<\/code> permite que os usu\u00e1rios habilitem configura\u00e7\u00f5es por bloco, que podem substituir as configura\u00e7\u00f5es globais.<\/p>\n<p><strong>Exemplo:<\/strong> Se <code>appearanceTools<\/code> estiver definido como <code>false<\/code>, mas voc\u00ea ainda quiser expor controles de borda para um bloco, use:<\/p>\n<pre><code class=\"language-json\">\"border\": {\n    \"color\": true,\n    \"style\": true,\n    \"width\": true,\n    \"radius\": true\n}<\/code><\/pre>\n<figure style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2024\/10\/border-shadow-block.png\" alt=\"Mostra a interface do usu\u00e1rio resultante que permite adicionar bordas.\" width=\"1001\" height=\"471\"><figcaption class=\"wp-caption-text\">Mostra a interface do usu\u00e1rio resultante que permite adicionar bordas.<\/figcaption><\/figure>\n<h5>Cor<\/h5>\n<p>Essa propriedade permite que os usu\u00e1rios definam op\u00e7\u00f5es de cores, como cor de fundo, cor do texto ou gradientes.<\/p>\n<p>Chaves na propriedade <code>color<\/code>:<\/p>\n<ul>\n<li><strong><code>background<\/code><\/strong> &#8211; Controla a cor de fundo de blocos ou elementos.<\/li>\n<li><strong><code>custom<\/code><\/strong> &#8211; Ativa ou desativa a capacidade dos usu\u00e1rios de selecionar cores personalizadas.<\/li>\n<li><strong><code>customDuotone<\/code><\/strong> &#8211; Permite que os usu\u00e1rios apliquem filtros duot\u00f4nicos personalizados \u00e0s imagens.<\/li>\n<li><strong><code>customGradient<\/code><\/strong> &#8211; Ativa op\u00e7\u00f5es de gradiente personalizadas.<\/li>\n<li><strong><code>defaultDuotone<\/code><\/strong> &#8211; Oferece op\u00e7\u00f5es de filtros duot\u00f4nicos padr\u00e3o para imagens.<\/li>\n<li><strong><code>defaultGradient<\/code><\/strong> &#8211; Define as op\u00e7\u00f5es de gradiente padr\u00e3o dispon\u00edveis para os usu\u00e1rios.<\/li>\n<li><strong><code>defaultPalette<\/code><\/strong> &#8211; Controla a paleta de cores padr\u00e3o do tema.<\/li>\n<li><strong><code>duotone<\/code><\/strong> &#8211; Permite filtros duot\u00f4nicos em imagens.<\/li>\n<li><strong><code>gradient<\/code><\/strong> &#8211; Habilita op\u00e7\u00f5es de gradiente para fundos ou outros elementos.<\/li>\n<li><strong><code>link<\/code><\/strong> &#8211; Define a cor dos links no tema.<\/li>\n<li><strong><code>text<\/code><\/strong> &#8211; Controla as op\u00e7\u00f5es de cores de texto.<\/li>\n<li><strong><code>heading<\/code><\/strong> &#8211; Define as cores dos cabe\u00e7alhos (por exemplo, h1, h2, etc.).<\/li>\n<li><strong><code>button<\/code><\/strong> &#8211; Controla as op\u00e7\u00f5es de cores dos bot\u00f5es.<\/li>\n<li><strong><code>caption<\/code><\/strong> &#8211; Define a cor da legenda para elementos de m\u00eddia.<\/li>\n<\/ul>\n<p>Vamos explorar alguns exemplos:<\/p>\n<p><strong>Exemplo 1:<\/strong> Se quiser desativar o seletor de cores para os usu\u00e1rios, voc\u00ea pode usar o seguinte:<\/p>\n<pre><code class=\"language-json\">\"color\": {\n    \"custom\": false\n}<\/code><\/pre>\n<figure style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2024\/10\/disable-color-picker.png\" alt=\"Desativando o seletor de cores UI.\" width=\"1001\" height=\"471\"><figcaption class=\"wp-caption-text\">Desativando o seletor de cores UI.<\/figcaption><\/figure>\n<p><strong>Exemplo 2:<\/strong> Para definir cores de tema prim\u00e1rias e secund\u00e1rias personalizadas, voc\u00ea pode usar esta configura\u00e7\u00e3o:<\/p>\n<pre><code class=\"language-json\">\"color\": {\n   \"palette\": [\n       { \"slug\": \"primary\", \"color\": \"#0000ff\", \"name\": \"Primary\" },\n       { \"slug\": \"secondary\", \"color\": \"#ff0000\", \"name\": \"Secondary\" }\n   ]\n}<\/code><\/pre>\n<figure style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2024\/10\/theme-color-setting.png\" alt=\"A interface do usu\u00e1rio (UI) resultante definindo as cores prim\u00e1rias e secund\u00e1rias do tema.\" width=\"1001\" height=\"471\"><figcaption class=\"wp-caption-text\">A interface do usu\u00e1rio (UI) resultante definindo as cores prim\u00e1rias e secund\u00e1rias do tema.<\/figcaption><\/figure>\n<h5>Dimens\u00f5es<\/h5>\n<p>Essa propriedade fornece op\u00e7\u00f5es para controlar as dimens\u00f5es do bloco, como largura, altura e propor\u00e7\u00e3o.<\/p>\n<p>Chaves na propriedade <code>dimensions<\/code>:<\/p>\n<ul>\n<li><strong><code>aspectRatio<\/code><\/strong> &#8211; Permite que os usu\u00e1rios definam ou bloqueiem a rela\u00e7\u00e3o de aspecto de um bloco (por exemplo, 16:9, 4:3).<\/li>\n<li><strong><code>defaultAspectRatios<\/code><\/strong> &#8211; Define as rela\u00e7\u00f5es de aspecto padr\u00e3o para os blocos.<\/li>\n<li><strong><code>minHeight<\/code><\/strong> &#8211; Permite que voc\u00ea defina uma altura m\u00ednima para os blocos.<\/li>\n<\/ul>\n<p>Por exemplo, para permitir que os usu\u00e1rios definam uma altura m\u00ednima para os blocos suportados, use o seguinte:<\/p>\n<pre><code class=\"language-json\">\"dimensions\": {\n    \"minHeight\": true\n}<\/code><\/pre>\n<figure style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2024\/10\/min-height-setting.png\" alt=\"Altura m\u00ednima definida na interface do usu\u00e1rio.\" width=\"1001\" height=\"471\"><figcaption class=\"wp-caption-text\">Altura m\u00ednima definida na interface do usu\u00e1rio.<\/figcaption><\/figure>\n<h5>Layout<\/h5>\n<p>A propriedade <code>layout<\/code> permite que os usu\u00e1rios definam op\u00e7\u00f5es relacionadas ao layout, como a largura do conte\u00fado e se os usu\u00e1rios podem personalizar o layout. Isso permite que os usu\u00e1rios definam op\u00e7\u00f5es de layout com essas chaves:<\/p>\n<ul>\n<li><strong><code>contentSize<\/code> <\/strong>&#8211; Define a largura padr\u00e3o dos blocos.<\/li>\n<li><strong><code>wideSize<\/code><\/strong>\u2063 &#8211; Define a largura dos blocos quando a op\u00e7\u00e3o de alinhamento amplo \u00e9 selecionada.<\/li>\n<li><strong><code>allowEditing<\/code><\/strong> &#8211; Determina se os usu\u00e1rios podem editar as op\u00e7\u00f5es de layout.<\/li>\n<li><strong><code>allowCustomContentAndWideSize<\/code>\u00a0<\/strong>&#8211; Permite a personaliza\u00e7\u00e3o de <code>contentSize<\/code> e <code>wideSize<\/code>.<\/li>\n<\/ul>\n<p><strong>Exemplo<\/strong>: Configure as op\u00e7\u00f5es de layout com larguras padr\u00e3o e ampla para blocos:<\/p>\n<pre><code class=\"language-json\">    \"contentSize\": \"620px\",\n    \"wideSize\": \"1000px\"\n}<\/code><\/pre>\n<figure style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2024\/10\/width-setting.png\" alt=\"Configura\u00e7\u00f5es de bloco padr\u00e3o e de largura resultantes.\" width=\"1001\" height=\"471\"><figcaption class=\"wp-caption-text\">Configura\u00e7\u00f5es de bloco padr\u00e3o e de largura resultantes.<\/figcaption><\/figure>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>Esses valores s\u00e3o pontos de partida que os usu\u00e1rios podem alterar.<\/p>\n<\/aside>\n\n<h5>Lightbox<\/h5>\n<p>A propriedade <code>lightbox<\/code> permite que os usu\u00e1rios ativem o recurso &#8220;Expand on click&#8221; para imagens, abrindo-as em uma visualiza\u00e7\u00e3o maior quando clicadas.<\/p>\n<p>Chaves na propriedade <code>lightbox<\/code>:<\/p>\n<ul>\n<li><strong><code>enabled<\/code><\/strong> &#8211; Ativa ou desativa o recurso de lightbox.<\/li>\n<li><strong><code>allowEditing<\/code><\/strong> &#8211; Permite que os usu\u00e1rios alternem a configura\u00e7\u00e3o da lightbox.<\/li>\n<\/ul>\n<p><strong>Exemplo: <\/strong>Para permitir que os usu\u00e1rios alternem o recurso de lightbox para imagens, use esta configura\u00e7\u00e3o:<\/p>\n<pre><code class=\"language-json\">\"blocks\": {\n    \"core\/image\": {\n        \"lightbox\": {\n            \"allowEditing\": true\n        }\n    }\n}<\/code><\/pre>\n<figure style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2024\/10\/lightbox-effect-toggle.png\" alt=\"Alternar para expor o efeito de lightbox.\" width=\"1001\" height=\"471\"><figcaption class=\"wp-caption-text\">Alternar para expor o efeito de lightbox.<\/figcaption><\/figure>\n<h5>Position<\/h5>\n<p>A propriedade <code>position<\/code> permite que os usu\u00e1rios controlem a posi\u00e7\u00e3o dos blocos, como, por exemplo, tornar um bloco fixo na p\u00e1gina.<\/p>\n<p><strong>Exemplo<\/strong>: Tornar um bloco fixo:<\/p>\n<pre><code class=\"language-json\">\"position\": {\n    \"sticky\": true\n}<\/code><\/pre>\n<h5>Shadow<\/h5>\n<p>Essa propriedade permite que os usu\u00e1rios apliquem efeitos de sombra aos blocos, usando predefini\u00e7\u00f5es ou sombras personalizadas.<\/p>\n<p>Teclas da propriedade <code>shadow<\/code>:<\/p>\n<ul>\n<li><strong><code>defaultPresets<\/code><\/strong> \u2014 Ativa ou desativa as predefini\u00e7\u00f5es de sombras padr\u00e3o.<\/li>\n<li><strong><code>presets<\/code><\/strong> \u2014 Permite que os usu\u00e1rios definam predefini\u00e7\u00f5es de sombras personalizadas.<\/li>\n<\/ul>\n<p>Aqui est\u00e1 um exemplo em que as sombras padr\u00e3o s\u00e3o desativadas e uma sombra personalizada chamada &#8220;Natural&#8221; \u00e9 definida:<\/p>\n<pre><code class=\"language-json\">\"shadow\": {\n    \"defaultPresets\": false,\n    \"presets\": [\n        { \"name\": \"Natural\", \"slug\": \"natural\", \"shadow\": \"6px 6px 9px rgba(0, 0, 0, 0.2)\" }\n    ]\n}<\/code><\/pre>\n<figure style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2024\/10\/shadow-setting.png\" alt=\"Configura\u00e7\u00e3o de op\u00e7\u00f5es de sombra na interface do usu\u00e1rio.\" width=\"1001\" height=\"471\"><figcaption class=\"wp-caption-text\">Configura\u00e7\u00e3o de op\u00e7\u00f5es de sombra na interface do usu\u00e1rio.<\/figcaption><\/figure>\n<p>Os n\u00fameros indicam as etapas de clique realizadas no editor do site para demonstrar a interface do usu\u00e1rio. A etapa final mostra a sombra &#8220;Natural&#8221;.<\/p>\n<h5>Spacing<\/h5>\n<p>Essa propriedade define como o espa\u00e7amento (preenchimento, margem, espa\u00e7o) \u00e9 controlado no editor.<\/p>\n<p>Teclas na propriedade <code>spacing<\/code>:<\/p>\n<ul>\n<li><strong><code>blockGap<\/code><\/strong> &#8211; Controla o espa\u00e7o entre os blocos.<\/li>\n<li><strong><code>margin<\/code><\/strong> &#8211; Permite que os usu\u00e1rios definam as margens em torno dos blocos.<\/li>\n<li><strong><code>padding<\/code> <\/strong>&#8211; Fornece op\u00e7\u00f5es para definir o preenchimento dentro dos blocos.<\/li>\n<li><strong><code>units<\/code> <\/strong>&#8211; Define as unidades dispon\u00edveis para espa\u00e7amento (por exemplo, px, rem).<\/li>\n<li><strong><code>customSpacingSize<\/code> <\/strong>&#8211; Permite que os usu\u00e1rios definam tamanhos de espa\u00e7amento personalizados.<\/li>\n<li><strong><code>spacingSizes<\/code> <\/strong>&#8211; Define uma gama de tamanhos de espa\u00e7amento predefinidos.<\/li>\n<li><strong><code>spacingScale<\/code> <\/strong>&#8211; Permite o dimensionamento de unidades de espa\u00e7amento.<\/li>\n<\/ul>\n<p><strong>Exemplo:<\/strong> Para limitar os usu\u00e1rios a duas unidades de medida (pixels e rem) para preenchimento, margens, larguras e alturas, e para expor os controles de espa\u00e7amento no editor do site, defina <code>appearanceTools<\/code> como <code>true<\/code> e configure desta forma:<\/p>\n<pre><code class=\"language-json\">\"spacing\": {\n    \"units\": [\"px\", \"rem\"]\n}<\/code><\/pre>\n<figure style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2024\/10\/measurement-limit.png\" alt=\"Limitando o uso de 2 unidades de medida.\" width=\"1001\" height=\"471\"><figcaption class=\"wp-caption-text\">Limitando o uso de 2 unidades de medida.<\/figcaption><\/figure>\n<h5>Typography<\/h5>\n<p>Essa propriedade controla as configura\u00e7\u00f5es relacionadas a texto do seu tema, como tamanho da fonte, peso e altura da linha.<\/p>\n<p>Teclas na propriedade <code>typography<\/code>:<\/p>\n<ul>\n<li><strong><code>defaultFontSizes<\/code>\u00a0<\/strong>&#8211; Define os tamanhos de fonte padr\u00e3o dispon\u00edveis para os usu\u00e1rios.<\/li>\n<li><code>customFontSize<\/code> &#8211; Ativa ou desativa a capacidade de definir tamanhos de fonte personalizados.<\/li>\n<li><code>fontStyle<\/code> &#8211; Controla o estilo da fonte (por exemplo, normal, it\u00e1lico).<\/li>\n<li><code>fontWeight<\/code> &#8211; Permite que os usu\u00e1rios definam o peso da fonte (por exemplo, negrito, claro).<\/li>\n<li><code>fluid<\/code> &#8211; Permite a tipografia fluida, ajustando o tamanho da fonte dinamicamente com base no tamanho da tela.<\/li>\n<li><code>letterSpacing<\/code> &#8211; Controla o espa\u00e7amento entre as letras.<\/li>\n<li><code>lineHeight<\/code> &#8211; Define a altura de cada linha de texto.<\/li>\n<li><code>textAlign<\/code> &#8211; Permite o controle do alinhamento do texto (por exemplo, esquerda, centro, direita).<\/li>\n<li><code>textDecoration<\/code> &#8211; Fornece op\u00e7\u00f5es de decora\u00e7\u00e3o de texto (por exemplo, sublinhado).<\/li>\n<li><code>writingMode<\/code> &#8211; Define o modo de escrita do texto (por exemplo, horizontal ou vertical).<\/li>\n<\/ul>\n<p>Exemplo: Para desativar os tamanhos de fonte personalizados e as op\u00e7\u00f5es ropCap, use o seguinte:<\/p>\n<pre><code class=\"language-json\">\"typography\": {\n    \"customFontSize\": false,\n    \"dropCap\": false\n}<\/code><\/pre>\n<figure style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2024\/10\/font-size-drop-cap-options.png\" alt=\"Removendo op\u00e7\u00f5es personalizadas de tamanho de fonte e DropCap.\" width=\"1001\" height=\"471\"><figcaption class=\"wp-caption-text\">Removendo op\u00e7\u00f5es personalizadas de tamanho de fonte e DropCap.<\/figcaption><\/figure>\n<p>Nesse caso, as duas teclas destacadas <strong>n\u00e3o<\/strong> aparecer\u00e3o no editor.<\/p>\n<h5>Alinhamentos com reconhecimento de preenchimento raiz<\/h5>\n<p>Quando definida como <code>true<\/code>, essa propriedade garante que os alinhamentos de blocos largos ou de largura total estejam cientes do preenchimento aplicado ao elemento raiz da p\u00e1gina (por exemplo, <code>&lt;html&gt;<\/code> ou <code>&lt;body&gt;<\/code>), garantindo o alinhamento adequado mesmo quando o preenchimento \u00e9 aplicado.<\/p>\n<p><strong>Exemplo:<\/strong><\/p>\n<pre><code class=\"language-json\">\"useRootPaddingAwareAlignments\": true<\/code><\/pre>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>Por padr\u00e3o, essa propriedade \u00e9 definida como <code>false<\/code>, resultando em um design nivelado.<\/p>\n<\/aside>\n\n<p>Quando definida como <code>true<\/code>, voc\u00ea tamb\u00e9m deve definir os valores de preenchimento superior, direito, inferior e esquerdo da raiz como um estilo. (Mais informa\u00e7\u00f5es sobre propriedades de estilo abaixo).<\/p>\n<pre><code class=\"language-json\">\"spacing\": {\n    \"padding\": {\n        \"top\": \"0\",\n        \"right\": \"100px\",\n        \"bottom\": \"0\",\n        \"left\": \"100px\"\n    }\n}<\/code><\/pre>\n<figure style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2024\/10\/use-root-padding-aware-alignments-default.png\" alt=\"O padr\u00e3o useRotPaddingAwareAignments.\" width=\"1001\" height=\"471\"><figcaption class=\"wp-caption-text\">O padr\u00e3o useRotPaddingAwareAignments.<\/figcaption><\/figure>\n<p>Aplicando a configura\u00e7\u00e3o <code>useRootPaddingAwareAlignements<\/code> juntamente com o preenchimento \u00e0 direita e \u00e0 esquerda do corpo (como no c\u00f3digo acima), voc\u00ea obt\u00e9m o seguinte resultado.<\/p>\n<figure style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2024\/10\/alignment-padding.png\" alt=\"Aplique o preenchimento \u00e0 esquerda e \u00e0 direita quando useRootPaddingAwareAlignments estiver definido como true.\" width=\"1001\" height=\"471\"><figcaption class=\"wp-caption-text\">Aplique o preenchimento \u00e0 esquerda e \u00e0 direita quando useRootPaddingAwareAlignments estiver definido como true.<\/figcaption><\/figure>\n<h4>Styles<\/h4>\n<p>A propriedade <code>styles<\/code> permite que voc\u00ea aplique estilos CSS \u00e0 raiz (padr\u00e3o), a elementos espec\u00edficos ou a blocos individuais em seu tema.<\/p>\n<h5>Estilos de plano de fundo<\/h5>\n<p>Voc\u00ea pode controlar as propriedades relacionadas ao plano de fundo, como imagens, posicionamento e anexos.<\/p>\n<p>Chaves comuns para plano de fundo:<\/p>\n<ul>\n<li><strong><code>backgroundImage<\/code>\u00a0<\/strong>&#8211; Define a imagem de fundo para o bloco ou elemento.<\/li>\n<li><strong><code>backgroundPosition<\/code><\/strong> &#8211; Define a posi\u00e7\u00e3o da imagem de fundo (por exemplo, centro, canto superior direito).<\/li>\n<li><strong><code>backgroundRepeat<\/code><\/strong> &#8211; Especifica se a imagem de fundo se repete (por exemplo, repetir, n\u00e3o repetir).<\/li>\n<li><strong><code>backgroundSize<\/code><\/strong> &#8211; Controla o tamanho da imagem de fundo (por exemplo, capa, conter).<\/li>\n<li><strong><code>backgroundAttachment<\/code><\/strong> &#8211; Especifica se a imagem de fundo \u00e9 fixa ou se rola com a p\u00e1gina.<\/li>\n<\/ul>\n<p>Por exemplo, voc\u00ea pode definir uma imagem de fundo para o seu tema:<\/p>\n<pre><code class=\"language-json\">\"background\": {\n   \"backgroundImage\": {\n       \"url\": \"https:\/\/joyofwp.com\/wp-content\/uploads\/2024\/09\/dots.png\"\n   }\n}<\/code><\/pre>\n<figure style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2024\/10\/bg-style-page.png\" alt=\"Adiciona um estilo de imagem de fundo a todas as p\u00e1ginas.\" width=\"1001\" height=\"471\"><figcaption class=\"wp-caption-text\">Adiciona um estilo de imagem de fundo a todas as p\u00e1ginas.<\/figcaption><\/figure>\n<h5>Bloquear estilos espec\u00edficos<\/h5>\n<p>Voc\u00ea pode aplicar estilos espec\u00edficos, como sombra, tipografia e bordas, a blocos individuais.<\/p>\n<p>Teclas para borda:<\/p>\n<ul>\n<li><code>color<\/code> &#8211; Define a cor da borda.<\/li>\n<li><code>radius<\/code> &#8211; Define o raio da borda para cantos arredondados.<\/li>\n<li><code>style<\/code> &#8211; Especifica o estilo da borda (por exemplo, s\u00f3lido, pontilhado).<\/li>\n<li><code>width<\/code> &#8211; Controla a largura da borda.<\/li>\n<li><code>top<\/code>, <code>right<\/code>, <code>bottom<\/code>, <code>left<\/code> &#8211; Permite que voc\u00ea defina estilos de borda individuais para cada lado.<\/li>\n<\/ul>\n<p>Por exemplo, o seguinte define uma borda vermelha s\u00f3lida de 20px em toda a p\u00e1gina:<\/p>\n<pre><code class=\"language-json\">\"border\": {\n   \"color\": \"#ff0000\",\n   \"width\": \"20px\",\n   \"style\": \"solid\"\n}<\/code><\/pre>\n<figure style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2024\/10\/add-border-styles.png\" alt=\"Adicionando um estilo de borda a todas as p\u00e1ginas.\" width=\"1001\" height=\"471\"><figcaption class=\"wp-caption-text\">Adicionando um estilo de borda a todas as p\u00e1ginas.<\/figcaption><\/figure>\n<p>Voc\u00ea tamb\u00e9m pode atribuir CSS personalizado a um bloco, elemento ou raiz espec\u00edficos.<br \/>\nPor exemplo, o c\u00f3digo abaixo aplica uma cor de texto vermelha a um bloco de tabela:<\/p>\n<pre><code class=\"language-json\">\"border\": {\n   \"color\": \"#ff0000\",\n   \"width\": \"20px\",\n   \"style\": \"solid\"\n}<\/code><\/pre>\n<figure style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2024\/10\/add-text-color-tables.png\" alt=\"Adi\u00e7\u00e3o de um estilo de cor de texto a todas as tabelas.\" width=\"1001\" height=\"471\"><figcaption class=\"wp-caption-text\">Adi\u00e7\u00e3o de um estilo de cor de texto a todas as tabelas.<\/figcaption><\/figure>\n<h5>Estilos de cores<\/h5>\n<p>A propriedade color permite que voc\u00ea controle as configura\u00e7\u00f5es de cor de fundo, gradiente e texto.<\/p>\n<p>Teclas para <code>color<\/code>:<\/p>\n<ul>\n<li><code>background<\/code> &#8211; Define a cor de fundo do bloco ou elemento.<\/li>\n<li><code>gradient<\/code> &#8211; Define um gradiente de fundo para o bloco.<\/li>\n<li><code>text<\/code> &#8211; Controla a cor do texto.<\/li>\n<\/ul>\n<p>O exemplo abaixo define um plano de fundo preto com texto branco em cada elemento de cada p\u00e1gina:<\/p>\n<pre><code class=\"language-json\">\"color\": {\n   \"background\": \"#000000\",\n   \"text\": \"#ffffff\"\n}<\/code><\/pre>\n<figure style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2024\/10\/text-bg-styling.png\" alt=\"Definindo o estilo de cor do texto e do plano de fundo para todas as p\u00e1ginas.\" width=\"1001\" height=\"471\"><figcaption class=\"wp-caption-text\">Definindo o estilo de cor do texto e do plano de fundo para todas as p\u00e1ginas.<\/figcaption><\/figure>\n<h5>CSS<\/h5>\n<p>A propriedade <code>css<\/code> permite que voc\u00ea anexe estilos personalizados a classes espec\u00edficas, permitindo um controle mais granular sobre os estilos do tema.<\/p>\n<p><strong>Exemplo<\/strong>: Aplique estilos personalizados a <code>wp-block-template-parts<\/code> e <code>wp-block-button<\/code> e adicione um efeito de foco para o bot\u00e3o:<\/p>\n<pre><code class=\"language-json\">\"css\": \".wp-block-template-part { background-color: #777777; padding: 20px; } .wp-block-button__link:hover { background-color: #ffffff; color: #000000; }\"<\/code><\/pre>\n<figure style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2024\/10\/btn-hover-style.png\" alt=\"Mostrando todos os bot\u00f5es no cabe\u00e7alho com um estado de foco para os estilos de texto e de plano de fundo.\" width=\"1001\" height=\"471\"><figcaption class=\"wp-caption-text\">Mostrando todos os bot\u00f5es no cabe\u00e7alho com um estado de foco para os estilos de texto e de plano de fundo.<\/figcaption><\/figure>\n<p>Como voc\u00ea pode ver, as partes do modelo do cabe\u00e7alho e do rodap\u00e9 s\u00e3o atribu\u00eddas a <code>background-color<\/code> e <code>padding<\/code>, enquanto o estado de foco do bot\u00e3o tem um fundo branco com texto preto.<\/p>\n<h5>Dimens\u00f5es<\/h5>\n<p>A propriedade <code>dimensions<\/code> permite que voc\u00ea controle a largura, a altura e a <a href=\"https:\/\/developer.wordpress.org\/news\/2024\/08\/05\/registering-custom-aspect-ratios-in-wordpress-6-6\/\" target=\"_blank\" rel=\"noopener noreferrer\">propor\u00e7\u00e3o<\/a> dos blocos.<\/p>\n<p>Chaves para dimens\u00f5es:<\/p>\n<ul>\n<li><strong><code>aspectRatios<\/code>\u00a0<\/strong>&#8211; Define rela\u00e7\u00f5es de aspecto personalizadas para elementos.<\/li>\n<li><strong><code>minHeight<\/code><\/strong> &#8211; Define a altura m\u00ednima dos blocos.<\/li>\n<\/ul>\n<p><strong>Exemplo<\/strong>: Criar uma rela\u00e7\u00e3o de aspecto personalizada de 3:7 para um bloco de imagem:<\/p>\n<pre><code class=\"language-json\">\"blocks\": {\n   \"core\/image\": {\n       \"dimensions\": {\n           \"aspectRatio\": \"custom\"\n       }\n   }\n}<\/code><\/pre>\n<p>No entanto, somente o que foi mencionado acima n\u00e3o \u00e9 suficiente. Voc\u00ea deve registrar o estilo &#8220;personalizado&#8221; nas se\u00e7\u00f5es de configura\u00e7\u00f5es.<\/p>\n<pre><code class=\"language-json\">\"dimensions\": {\n   \"defaultAspectRatios\": true,\n   \"aspectRatios\": [\n       {\n           \"name\": \"Custom Ratio 3:7\",\n           \"slug\": \"custom\",\n           \"ratio\": \"3\/7\"\n       }\n   ]\n}<\/code><\/pre>\n<figure style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2024\/10\/image-custom-ratio.png\" alt=\"Adi\u00e7\u00e3o de uma op\u00e7\u00e3o de estilo de propor\u00e7\u00e3o personalizada para todas as imagens.\" width=\"1001\" height=\"471\"><figcaption class=\"wp-caption-text\">Adi\u00e7\u00e3o de uma op\u00e7\u00e3o de estilo de propor\u00e7\u00e3o personalizada para todas as imagens.<\/figcaption><\/figure>\n<p>Aqui voc\u00ea pode ver que a op\u00e7\u00e3o &#8220;Custom Ratio&#8221; foi adicionada. Se voc\u00ea preferir remover as sete propor\u00e7\u00f5es de aspecto padr\u00e3o, remova <code>\"defaultAspectRatios\":true<\/code> da se\u00e7\u00e3o de configura\u00e7\u00f5es.<\/p>\n<h5>Estilos espec\u00edficos de elementos<\/h5>\n<p>A propriedade <code>elements<\/code> permite que voc\u00ea aplique estilos a elementos HTML espec\u00edficos, como links, bot\u00f5es ou cabe\u00e7alhos.<\/p>\n<p>Por exemplo, o c\u00f3digo abaixo desativa a decora\u00e7\u00e3o de texto (sublinhado) para todos os links:<\/p>\n<pre><code class=\"language-json\">\"elements\": {\n   \"link\": {\n       \"typography\": {\n           \"textDecoration\": \"none\"\n       }\n   }\n}<\/code><\/pre>\n<figure style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2024\/10\/disable-text-decoration.png\" alt=\"Desativando o estilo de decora\u00e7\u00e3o de texto para links.\" width=\"1001\" height=\"471\"><figcaption class=\"wp-caption-text\">Desativando o estilo de decora\u00e7\u00e3o de texto para links.<\/figcaption><\/figure>\n<h5>Filter<\/h5>\n<p>A propriedade <code>filter<\/code> permite que voc\u00ea aplique efeitos de filtro semelhantes aos do CSS (por exemplo, desfoque, brilho) a determinados blocos, como imagens.<\/p>\n<p><strong>Exemplo:<\/strong> Aplicar um filtro de desfoque e brilho a um bloco de imagem:<\/p>\n<pre><code class=\"language-json\">\"blocks\": {\n   \"core\/image\": {\n       \"filter\": {\n           \"duotone\": \"blur(5px) brightness(0.8)\"\n       }\n   }\n}<\/code><\/pre>\n<figure style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2024\/10\/blur-image.png\" alt=\"Adicionar um estilo de desfoque a todas as imagens.\" width=\"1001\" height=\"471\"><figcaption class=\"wp-caption-text\">Adicionar um estilo de desfoque a todas as imagens.<\/figcaption><\/figure>\n<p>Aqui, os efeitos de desfoque e brilho foram aplicados ao bloco de imagens. Outros valores de filtro dispon\u00edveis incluem:<\/p>\n<ul>\n<li><strong><code>contrast<\/code>\u00a0<\/strong>&#8211; Ajusta o contraste do elemento.<\/li>\n<li><strong><code>grayscale<\/code><\/strong> &#8211; Converte o elemento em escala de cinza.<\/li>\n<li><strong><code>invert<\/code><\/strong> &#8211; Inverte as cores do elemento.<\/li>\n<li><strong><code>opacity<\/code><\/strong> &#8211; Controla a transpar\u00eancia do elemento.<\/li>\n<li><strong><code>saturate<\/code><\/strong> &#8211; Aumenta ou diminui a satura\u00e7\u00e3o das cores.<\/li>\n<li><strong><code>sepia<\/code><\/strong> &#8211; Aplica um tom s\u00e9pia ao elemento.<\/li>\n<\/ul>\n<h5>Contorno<\/h5>\n<p>A propriedade <code>outline<\/code> define estilos para contornos desenhados fora da borda do elemento, sem afetar o espa\u00e7o do layout.<\/p>\n<p>Chaves para contorno:<\/p>\n<ul>\n<li><strong><code>color<\/code>\u00a0<\/strong>&#8211; Define a cor do contorno.<\/li>\n<li><strong><code>offset<\/code><\/strong> &#8211; Controla o espa\u00e7o entre a borda e o contorno.<\/li>\n<li><strong><code>style<\/code><\/strong> &#8211; Especifica o estilo do contorno (por exemplo, pontilhado, s\u00f3lido).<\/li>\n<li><strong><code>width<\/code><\/strong> &#8211; Define a largura do contorno.<\/li>\n<\/ul>\n<p><strong>Exemplo<\/strong>: Aplicar um contorno pontilhado vermelho a um bot\u00e3o:<\/p>\n<pre><code class=\"language-json\">\"elements\": {\n   \"button\": {\n       \"outline\": {\n           \"color\": \"#ff0000\",\n           \"style\": \"dotted\",\n           \"width\": \"4px\"\n       }\n   }\n}<\/code><\/pre>\n<figure style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2024\/10\/button-outline-style.png\" alt=\"Adicionar um estilo de contorno a todos os bot\u00f5es.\" width=\"1001\" height=\"471\"><figcaption class=\"wp-caption-text\">Adicionar um estilo de contorno a todos os bot\u00f5es.<\/figcaption><\/figure>\n<h5>Estilos de sombra<\/h5>\n<p>A propriedade <code>shadow<\/code> permite que voc\u00ea aplique sombras de caixa aos blocos, acrescentando profundidade e \u00eanfase aos elementos.<\/p>\n<p><strong>Exemplo<\/strong>: Aplicar uma sombra a todas as imagens:<\/p>\n<pre><code class=\"language-json\">\"blocks\": {\n   \"core\/image\": {\n       \"shadow\": \"0 10px 20px 0 rgb(0 0 225 \/ 0.50)\"\n   }\n}<\/code><\/pre>\n<figure style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2024\/10\/shadow-image.png\" alt=\"Adiciona uma sombra a todas as imagens.\" width=\"1001\" height=\"471\"><figcaption class=\"wp-caption-text\">Adiciona uma sombra a todas as imagens.<\/figcaption><\/figure>\n<h5>Estilos de espa\u00e7amento<\/h5>\n<p>A propriedade <code>spacing<\/code> gerencia os estilos de preenchimento, margem e espa\u00e7o de bloco do seu tema.<\/p>\n<p>Teclas para espa\u00e7amento:<\/p>\n<ul>\n<li><strong><code>blockGap<\/code>\u00a0<\/strong>&#8211; Controla o espa\u00e7o entre os blocos.<\/li>\n<li><strong><code>margin<\/code><\/strong> &#8211; Define as margens ao redor dos blocos.<\/li>\n<li><strong><code>padding<\/code><\/strong> &#8211; Controla o preenchimento dentro dos blocos.<\/li>\n<\/ul>\n<p>Este exemplo abaixo define o preenchimento personalizado nos lados esquerdo e direito:<\/p>\n<pre><code class=\"language-json\">\"spacing\": {\n   \"padding\": {\n       \"left\": \"min(6.5rem, 8vw)\",\n       \"right\": \"min(6.5rem, 8vw)\"\n   }\n}<\/code><\/pre>\n<figure style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2024\/10\/left-right-padding.png\" alt=\"Adiciona preenchimento \u00e0 esquerda e \u00e0 direita.\" width=\"1001\" height=\"471\"><figcaption class=\"wp-caption-text\">Adiciona preenchimento \u00e0 esquerda e \u00e0 direita.<\/figcaption><\/figure>\n<h5>Estilos de tipografia<\/h5>\n<p>A propriedade <code>typography<\/code> gerencia estilos de fonte, tamanhos e outras configura\u00e7\u00f5es relacionadas a texto.<\/p>\n<p>Chaves comuns para tipografia:<\/p>\n<ul>\n<li><strong><code>fontFamily<\/code>\u00a0<\/strong>&#8211; Define a fam\u00edlia da fonte para o texto.<\/li>\n<li><strong><code>fontSize<\/code><\/strong> &#8211; Define o tamanho da fonte.<\/li>\n<li><strong><code>fontStyle<\/code><\/strong> &#8211; Especifica o estilo da fonte (por exemplo, it\u00e1lico, normal).<\/li>\n<li><strong><code>fontWeight<\/code><\/strong> &#8211; Controla o peso (espessura) da fonte.<\/li>\n<li><code><strong>letterSpacing<\/strong><\/code> &#8211; Ajusta o espa\u00e7amento entre as letras.<\/li>\n<li><strong><code>lineHeight<\/code><\/strong> &#8211; Define a altura da linha (espa\u00e7amento entre linhas de texto).<\/li>\n<li><strong><code>textAlign<\/code><\/strong> &#8211; Define o alinhamento do texto (por exemplo, esquerda, centro, direita).<\/li>\n<li><strong><code>textColumns<\/code><\/strong> &#8211; Controla o n\u00famero de colunas de texto.<\/li>\n<li><strong><code>textDecoration<\/code><\/strong> &#8211; Define a decora\u00e7\u00e3o do texto (por exemplo, sublinhado).<\/li>\n<li><strong><code>writingMode<\/code><\/strong> &#8211; Define o modo de escrita (por exemplo, horizontal, vertical).<\/li>\n<li><strong><code>textTransform<\/code><\/strong> &#8211; Controla a transforma\u00e7\u00e3o do texto (por exemplo, mai\u00fasculas, min\u00fasculas).<\/li>\n<\/ul>\n<p>Por exemplo, voc\u00ea pode definir que todos os cabe\u00e7alhos tenham um peso de fonte de 300 e um estilo it\u00e1lico:<\/p>\n<pre><code class=\"language-json\">\"blocks\": {\n   \"core\/heading\": {\n       \"typography\": {\n           \"fontWeight\": \"300\",\n           \"fontStyle\": \"italic\"\n       }\n   }\n}<\/code><\/pre>\n<figure style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2024\/10\/heading-style.png\" alt=\"Todos os cabe\u00e7alhos incluem propriedades de estilo de it\u00e1lico e peso.\" width=\"1001\" height=\"471\"><figcaption class=\"wp-caption-text\">Todos os cabe\u00e7alhos incluem propriedades de estilo de it\u00e1lico e peso.<\/figcaption><\/figure>\n<h3>Propriedades de templates e padr\u00f5es<\/h3>\n<p>Essas tr\u00eas propriedades de n\u00edvel superior s\u00e3o usadas para registrar ativos personalizados no seu tema.<\/p>\n<h4>1. Templates personalizados<\/h4>\n<p>A propriedade <code>templates<\/code> \u00e9 usada para registrar templates personalizados para v\u00e1rios tipos de artigos.<\/p>\n<ul>\n<li><strong><code>name<\/code><\/strong> &#8211; O nome do arquivo <code>.html<\/code> ou <code>.php<\/code> localizado no subdiret\u00f3rio <code>templates<\/code>.<\/li>\n<li><strong><code>title<\/code><\/strong> &#8211; O t\u00edtulo que ser\u00e1 atribu\u00eddo ao template para facilitar a identifica\u00e7\u00e3o.<\/li>\n<li><strong><code>postTypes<\/code><\/strong> &#8211; Especifica o tipo de conte\u00fado (por exemplo, artigos, p\u00e1ginas) que o template \u00e9 usado para renderizar.<\/li>\n<\/ul>\n<h4>2. Partes do template<\/h4>\n<p>A propriedade <code>templateParts<\/code> \u00e9 usada para definir partes reutiliz\u00e1veis de templates (por exemplo, cabe\u00e7alhos, rodap\u00e9s).<\/p>\n<ul>\n<li><strong><code>name<\/code> <\/strong>&#8211; O nome do arquivo <code>.html<\/code> ou <code>.php<\/code> localizado no subdiret\u00f3rio <code>parts<\/code>.<\/li>\n<li><strong><code>title<\/code><\/strong> &#8211; O t\u00edtulo dado \u00e0 parte do template para facilitar a identifica\u00e7\u00e3o.<\/li>\n<li><strong><code>area<\/code><\/strong> &#8211; Especifica a qual parte da p\u00e1gina a parte do template se aplica (por exemplo, <code>header<\/code>, <code>footer<\/code>, <code>sidebar<\/code>).<\/li>\n<\/ul>\n<h4>3. Patterns<\/h4>\n<p>A propriedade <code>patterns<\/code> permite que voc\u00ea registre um array de slugs de padr\u00e3o do diret\u00f3rio de padr\u00f5es do WordPress, tornando-os dispon\u00edveis no tema.<\/p>\n<p>Veja a seguir como registrar um padr\u00e3o:<\/p>\n<pre><code class=\"language-json\">\"patterns\": [\n    \"my-custom-pattern-slug\"\n]<\/code><\/pre>\n<h2>Tr\u00eas exemplos pr\u00e1ticos de como trabalhar com theme.json<\/h2>\n<p>Aqui est\u00e3o algumas coisas que voc\u00ea pode querer fazer para um tema que est\u00e1 desenvolvendo.<\/p>\n<h3>1. Adicionar um padr\u00e3o<\/h3>\n<p>Veja como voc\u00ea pode incluir dois padr\u00f5es do diret\u00f3rio de padr\u00f5es do WordPress. Aqui \u00e9 mostrado o padr\u00e3o &#8220;Fullscreen Cover Image Gallery&#8221;:<\/p>\n<pre><code class=\"language-json\">\"patterns\": [\n   \"fullscreen-cover-image-gallery\",\n   \"hero-banner-with-overlap-images\"\n]<\/code><\/pre>\n<figure style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2024\/10\/pattern-wordpress.png\" alt=\"Demonstra a inser\u00e7\u00e3o de um padr\u00e3o do wordpress.org.\" width=\"1001\" height=\"471\"><figcaption class=\"wp-caption-text\">Demonstra a inser\u00e7\u00e3o de um padr\u00e3o do wordpress.org.<\/figcaption><\/figure>\n<p><strong>Observa\u00e7\u00f5es:<\/strong><\/p>\n<ul>\n<li>Os padr\u00f5es extra\u00eddos do diret\u00f3rio <strong>Patterns<\/strong> n\u00e3o ser\u00e3o exibidos na se\u00e7\u00e3o <strong>Pattern<\/strong> do editor do site. Esses padr\u00f5es estar\u00e3o dispon\u00edveis somente por meio do <strong>Inserter<\/strong>.<\/li>\n<li>Neste exemplo, inclu\u00edmos a propriedade de n\u00edvel superior <code>patterns<\/code> (em compara\u00e7\u00e3o com <code>settings<\/code> e <code>styles<\/code>, que foram omitidas em exemplos anteriores por brevidade.<\/li>\n<\/ul>\n<h3>2. Adicionar uma fonte personalizada<\/h3>\n<p>Fizemos o download de dois arquivos de fonte (<code>Roboto-Regular.ttf<\/code> e <code>Roboto-Bold.ttf<\/code>) da biblioteca do <a href=\"https:\/\/fonts.google.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Google Fonts<\/a> e os carregamos no subdiret\u00f3rio <code>assets\/fonts\/<\/code> do nosso tema.<\/p>\n<p>O c\u00f3digo a seguir registra as duas fontes, tornando-as dispon\u00edveis em todo o site:<\/p>\n<pre><code class=\"language-json\">\"settings\": {\n   \"typography\": {\n       \"fontFamilies\": [\n           {\n               \"fontFamily\": \"Roboto\",\n               \"name\": \"Roboto\",\n               \"slug\": \"roboto\",\n               \"fontFace\": [\n                   {\n                       \"fontFamily\": \"Roboto Regular\",\n                       \"fontWeight\": \"400\",\n                       \"fontStyle\": \"normal\",\n                       \"src\": [\n                           \"file.\/assets\/fonts\/Roboto-Regular.ttf\"\n                       ]\n                   },\n                   {\n                       \"fontFamily\": \"Roboto Bold\",\n                       \"fontWeight\": \"700\",\n                       \"fontStyle\": \"bold\",\n                       \"src\": [\n                           \"file.\/assets\/fonts\/Roboto-Bold.ttf\"\n                       ]      \n                   }  \n               ]\n           }\n       ]\n   }\n}<\/code><\/pre>\n<figure style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2024\/10\/google-font.png\" alt=\"Mostra a inclus\u00e3o de uma fonte do Google Fonts.\" width=\"1001\" height=\"471\"><figcaption class=\"wp-caption-text\">Mostra a inclus\u00e3o de uma fonte do Google Fonts.<\/figcaption><\/figure>\n<h3>3. Configurando sua paleta de cores<\/h3>\n<p>Se quiser restringir os usu\u00e1rios a uma paleta de cores espec\u00edfica, voc\u00ea pode configur\u00e1-la da seguinte forma. Gradientes e duotones tamb\u00e9m podem ser configurados conforme suas prefer\u00eancias.<\/p>\n<p><strong>Exemplo:<\/strong><\/p>\n<pre><code class=\"language-json\">\"settings\": {\n   \"color\": {\n       \"custom\": false,\n       \"defaultPalette\": false,\n       \"palette\": [\n           {\n               \"slug\": \"primary\",\n               \"color\": \"#1e8cbe\",\n               \"name\": \"Primary\"\n           },\n           {\n               \"slug\": \"secondary\",\n               \"color\": \"#21759b\",\n               \"name\": \"Secondary\"\n           },\n           {\n               \"slug\": \"tertiary\",\n               \"color\": \"#\",\n               \"name\": \"Tertiary\"\n           },\n           {\n               \"slug\": \"accent\",\n               \"color\": \"#464646\",\n               \"name\": \"Accent\"\n           }\n       ]\n   }\n}<\/code><\/pre>\n<figure style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2024\/10\/custom-theme-colors.png\" alt=\"Cores de tema personalizadas.\" width=\"1001\" height=\"471\"><figcaption class=\"wp-caption-text\">Cores de tema personalizadas.<\/figcaption><\/figure>\n<p>Voc\u00ea reconhece essas quatro cores? Elas fazem parte da hist\u00f3ria de cores do WordPress.<\/p>\n<h2>Resumo<\/h2>\n<p>Este artigo destaca o papel fundamental do <code>theme.json<\/code> no desenvolvimento de temas modernos do WordPress. Ao dominar o <code>theme.json<\/code>, voc\u00ea pode personalizar totalmente o design visual e a interface do usu\u00e1rio do seu tema sem precisar de substitui\u00e7\u00f5es complexas de <a href=\"https:\/\/kinqsta.com\/pt\/blog\/o-que-php\/\">PHP<\/a> ou CSS.<\/p>\n<p>Entender como usar efetivamente propriedades como <code>appearanceTools<\/code> proporciona maior controle e efici\u00eancia ao criar ou refinar temas de WordPress, tornando esse arquivo uma ferramenta essencial para desenvolvedores que desejam criar temas flex\u00edveis e f\u00e1ceis de usar.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Compreender a estrutura e as propriedades do arquivo theme.json \u00e9 fundamental para o desenvolvimento de temas de bloco. Esse arquivo funciona como o principal centro de &#8230;<\/p>\n","protected":false},"author":313,"featured_media":70346,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[],"topic":[1026,1036],"class_list":["post-70345","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","topic-desenvolvimento-wordpress","topic-temas-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>Trabalhando com Propriedades e Pares de Valores-chave no theme.json<\/title>\n<meta name=\"description\" content=\"Aprenda a trabalhar com propriedades e pares de chave-valor no theme.json para personalizar configura\u00e7\u00f5es e estilos de temas de blocos no 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:\/\/kinqsta.com\/pt\/blog\/theme-json-propriedades-pares-chave-valor\/\" \/>\n<meta property=\"og:locale\" content=\"pt_PT\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Trabalhando com Propriedades e Pares de Valores-chave no theme.json\" \/>\n<meta property=\"og:description\" content=\"Aprenda a trabalhar com propriedades e pares de chave-valor no theme.json para personalizar configura\u00e7\u00f5es e estilos de temas de blocos no WordPress.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinqsta.com\/pt\/blog\/theme-json-propriedades-pares-chave-valor\/\" \/>\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-11-18T09:05:13+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-11-22T13:22:13+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinqsta.com\/pt\/wp-content\/uploads\/sites\/3\/2024\/11\/working-with-properties-and-key-value-pairs-in-theme.json.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=\"Bud Kraus\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"Aprenda a trabalhar com propriedades e pares de chave-valor no theme.json para personalizar configura\u00e7\u00f5es e estilos de temas de blocos no WordPress.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinqsta.com\/pt\/wp-content\/uploads\/sites\/3\/2024\/11\/working-with-properties-and-key-value-pairs-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=\"Bud Kraus\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tempo estimado de leitura\" \/>\n\t<meta name=\"twitter:data2\" content=\"24 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinqsta.com\/pt\/blog\/theme-json-propriedades-pares-chave-valor\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinqsta.com\/pt\/blog\/theme-json-propriedades-pares-chave-valor\/\"},\"author\":{\"name\":\"Bud Kraus\",\"@id\":\"https:\/\/kinqsta.com\/pt\/#\/schema\/person\/8cce3d6bbd8a2aa46850235d997793ed\"},\"headline\":\"Trabalhando com Propriedades e Pares de Valores-chave no theme.json\",\"datePublished\":\"2024-11-18T09:05:13+00:00\",\"dateModified\":\"2024-11-22T13:22:13+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinqsta.com\/pt\/blog\/theme-json-propriedades-pares-chave-valor\/\"},\"wordCount\":4351,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinqsta.com\/pt\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinqsta.com\/pt\/blog\/theme-json-propriedades-pares-chave-valor\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinqsta.com\/pt\/wp-content\/uploads\/sites\/3\/2024\/11\/working-with-properties-and-key-value-pairs-in-theme.json.png\",\"inLanguage\":\"pt-PT\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinqsta.com\/pt\/blog\/theme-json-propriedades-pares-chave-valor\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinqsta.com\/pt\/blog\/theme-json-propriedades-pares-chave-valor\/\",\"url\":\"https:\/\/kinqsta.com\/pt\/blog\/theme-json-propriedades-pares-chave-valor\/\",\"name\":\"Trabalhando com Propriedades e Pares de Valores-chave no theme.json\",\"isPartOf\":{\"@id\":\"https:\/\/kinqsta.com\/pt\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinqsta.com\/pt\/blog\/theme-json-propriedades-pares-chave-valor\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinqsta.com\/pt\/blog\/theme-json-propriedades-pares-chave-valor\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinqsta.com\/pt\/wp-content\/uploads\/sites\/3\/2024\/11\/working-with-properties-and-key-value-pairs-in-theme.json.png\",\"datePublished\":\"2024-11-18T09:05:13+00:00\",\"dateModified\":\"2024-11-22T13:22:13+00:00\",\"description\":\"Aprenda a trabalhar com propriedades e pares de chave-valor no theme.json para personalizar configura\u00e7\u00f5es e estilos de temas de blocos no WordPress.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinqsta.com\/pt\/blog\/theme-json-propriedades-pares-chave-valor\/#breadcrumb\"},\"inLanguage\":\"pt-PT\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinqsta.com\/pt\/blog\/theme-json-propriedades-pares-chave-valor\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-PT\",\"@id\":\"https:\/\/kinqsta.com\/pt\/blog\/theme-json-propriedades-pares-chave-valor\/#primaryimage\",\"url\":\"https:\/\/kinqsta.com\/pt\/wp-content\/uploads\/sites\/3\/2024\/11\/working-with-properties-and-key-value-pairs-in-theme.json.png\",\"contentUrl\":\"https:\/\/kinqsta.com\/pt\/wp-content\/uploads\/sites\/3\/2024\/11\/working-with-properties-and-key-value-pairs-in-theme.json.png\",\"width\":1470,\"height\":735},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinqsta.com\/pt\/blog\/theme-json-propriedades-pares-chave-valor\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinqsta.com\/pt\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Desenvolvimento WordPress\",\"item\":\"https:\/\/kinqsta.com\/pt\/topicos\/desenvolvimento-wordpress\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Trabalhando com Propriedades e Pares de Valores-chave no theme.json\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinqsta.com\/pt\/#website\",\"url\":\"https:\/\/kinqsta.com\/pt\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Solu\u00e7\u00f5es de hospedagem Premium, r\u00e1pida e segura\",\"publisher\":{\"@id\":\"https:\/\/kinqsta.com\/pt\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinqsta.com\/pt\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"pt-PT\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinqsta.com\/pt\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinqsta.com\/pt\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-PT\",\"@id\":\"https:\/\/kinqsta.com\/pt\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinqsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinqsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinqsta.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:\/\/kinqsta.com\/pt\/#\/schema\/person\/8cce3d6bbd8a2aa46850235d997793ed\",\"name\":\"Bud Kraus\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-PT\",\"@id\":\"https:\/\/kinqsta.com\/pt\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/4720f5a00a3f527eda2576d524728bc2?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/4720f5a00a3f527eda2576d524728bc2?s=96&d=mm&r=g\",\"caption\":\"Bud Kraus\"},\"description\":\"Bud Kraus has been working with WordPress as an in-class and online instructor, site developer, and content creator since 2009. He has produced instructional videos and written many articles for WordPress businesses.\",\"url\":\"https:\/\/kinqsta.com\/pt\/blog\/author\/budkraus\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Trabalhando com Propriedades e Pares de Valores-chave no theme.json","description":"Aprenda a trabalhar com propriedades e pares de chave-valor no theme.json para personalizar configura\u00e7\u00f5es e estilos de temas de blocos no 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:\/\/kinqsta.com\/pt\/blog\/theme-json-propriedades-pares-chave-valor\/","og_locale":"pt_PT","og_type":"article","og_title":"Trabalhando com Propriedades e Pares de Valores-chave no theme.json","og_description":"Aprenda a trabalhar com propriedades e pares de chave-valor no theme.json para personalizar configura\u00e7\u00f5es e estilos de temas de blocos no WordPress.","og_url":"https:\/\/kinqsta.com\/pt\/blog\/theme-json-propriedades-pares-chave-valor\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/kinstapt\/","article_published_time":"2024-11-18T09:05:13+00:00","article_modified_time":"2024-11-22T13:22:13+00:00","og_image":[{"width":1470,"height":735,"url":"https:\/\/kinqsta.com\/pt\/wp-content\/uploads\/sites\/3\/2024\/11\/working-with-properties-and-key-value-pairs-in-theme.json.png","type":"image\/png"}],"author":"Bud Kraus","twitter_card":"summary_large_image","twitter_description":"Aprenda a trabalhar com propriedades e pares de chave-valor no theme.json para personalizar configura\u00e7\u00f5es e estilos de temas de blocos no WordPress.","twitter_image":"https:\/\/kinqsta.com\/pt\/wp-content\/uploads\/sites\/3\/2024\/11\/working-with-properties-and-key-value-pairs-in-theme.json-1024x512.png","twitter_creator":"@kinsta_pt","twitter_site":"@kinsta_pt","twitter_misc":{"Escrito por":"Bud Kraus","Tempo estimado de leitura":"24 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinqsta.com\/pt\/blog\/theme-json-propriedades-pares-chave-valor\/#article","isPartOf":{"@id":"https:\/\/kinqsta.com\/pt\/blog\/theme-json-propriedades-pares-chave-valor\/"},"author":{"name":"Bud Kraus","@id":"https:\/\/kinqsta.com\/pt\/#\/schema\/person\/8cce3d6bbd8a2aa46850235d997793ed"},"headline":"Trabalhando com Propriedades e Pares de Valores-chave no theme.json","datePublished":"2024-11-18T09:05:13+00:00","dateModified":"2024-11-22T13:22:13+00:00","mainEntityOfPage":{"@id":"https:\/\/kinqsta.com\/pt\/blog\/theme-json-propriedades-pares-chave-valor\/"},"wordCount":4351,"commentCount":0,"publisher":{"@id":"https:\/\/kinqsta.com\/pt\/#organization"},"image":{"@id":"https:\/\/kinqsta.com\/pt\/blog\/theme-json-propriedades-pares-chave-valor\/#primaryimage"},"thumbnailUrl":"https:\/\/kinqsta.com\/pt\/wp-content\/uploads\/sites\/3\/2024\/11\/working-with-properties-and-key-value-pairs-in-theme.json.png","inLanguage":"pt-PT","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinqsta.com\/pt\/blog\/theme-json-propriedades-pares-chave-valor\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinqsta.com\/pt\/blog\/theme-json-propriedades-pares-chave-valor\/","url":"https:\/\/kinqsta.com\/pt\/blog\/theme-json-propriedades-pares-chave-valor\/","name":"Trabalhando com Propriedades e Pares de Valores-chave no theme.json","isPartOf":{"@id":"https:\/\/kinqsta.com\/pt\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinqsta.com\/pt\/blog\/theme-json-propriedades-pares-chave-valor\/#primaryimage"},"image":{"@id":"https:\/\/kinqsta.com\/pt\/blog\/theme-json-propriedades-pares-chave-valor\/#primaryimage"},"thumbnailUrl":"https:\/\/kinqsta.com\/pt\/wp-content\/uploads\/sites\/3\/2024\/11\/working-with-properties-and-key-value-pairs-in-theme.json.png","datePublished":"2024-11-18T09:05:13+00:00","dateModified":"2024-11-22T13:22:13+00:00","description":"Aprenda a trabalhar com propriedades e pares de chave-valor no theme.json para personalizar configura\u00e7\u00f5es e estilos de temas de blocos no WordPress.","breadcrumb":{"@id":"https:\/\/kinqsta.com\/pt\/blog\/theme-json-propriedades-pares-chave-valor\/#breadcrumb"},"inLanguage":"pt-PT","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinqsta.com\/pt\/blog\/theme-json-propriedades-pares-chave-valor\/"]}]},{"@type":"ImageObject","inLanguage":"pt-PT","@id":"https:\/\/kinqsta.com\/pt\/blog\/theme-json-propriedades-pares-chave-valor\/#primaryimage","url":"https:\/\/kinqsta.com\/pt\/wp-content\/uploads\/sites\/3\/2024\/11\/working-with-properties-and-key-value-pairs-in-theme.json.png","contentUrl":"https:\/\/kinqsta.com\/pt\/wp-content\/uploads\/sites\/3\/2024\/11\/working-with-properties-and-key-value-pairs-in-theme.json.png","width":1470,"height":735},{"@type":"BreadcrumbList","@id":"https:\/\/kinqsta.com\/pt\/blog\/theme-json-propriedades-pares-chave-valor\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinqsta.com\/pt\/"},{"@type":"ListItem","position":2,"name":"Desenvolvimento WordPress","item":"https:\/\/kinqsta.com\/pt\/topicos\/desenvolvimento-wordpress\/"},{"@type":"ListItem","position":3,"name":"Trabalhando com Propriedades e Pares de Valores-chave no theme.json"}]},{"@type":"WebSite","@id":"https:\/\/kinqsta.com\/pt\/#website","url":"https:\/\/kinqsta.com\/pt\/","name":"Kinsta\u00ae","description":"Solu\u00e7\u00f5es de hospedagem Premium, r\u00e1pida e segura","publisher":{"@id":"https:\/\/kinqsta.com\/pt\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinqsta.com\/pt\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"pt-PT"},{"@type":"Organization","@id":"https:\/\/kinqsta.com\/pt\/#organization","name":"Kinsta","url":"https:\/\/kinqsta.com\/pt\/","logo":{"@type":"ImageObject","inLanguage":"pt-PT","@id":"https:\/\/kinqsta.com\/pt\/#\/schema\/logo\/image\/","url":"https:\/\/kinqsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinqsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinqsta.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:\/\/kinqsta.com\/pt\/#\/schema\/person\/8cce3d6bbd8a2aa46850235d997793ed","name":"Bud Kraus","image":{"@type":"ImageObject","inLanguage":"pt-PT","@id":"https:\/\/kinqsta.com\/pt\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/4720f5a00a3f527eda2576d524728bc2?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/4720f5a00a3f527eda2576d524728bc2?s=96&d=mm&r=g","caption":"Bud Kraus"},"description":"Bud Kraus has been working with WordPress as an in-class and online instructor, site developer, and content creator since 2009. He has produced instructional videos and written many articles for WordPress businesses.","url":"https:\/\/kinqsta.com\/pt\/blog\/author\/budkraus\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinqsta.com\/pt\/wp-json\/wp\/v2\/posts\/70345","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinqsta.com\/pt\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinqsta.com\/pt\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinqsta.com\/pt\/wp-json\/wp\/v2\/users\/313"}],"replies":[{"embeddable":true,"href":"https:\/\/kinqsta.com\/pt\/wp-json\/wp\/v2\/comments?post=70345"}],"version-history":[{"count":9,"href":"https:\/\/kinqsta.com\/pt\/wp-json\/wp\/v2\/posts\/70345\/revisions"}],"predecessor-version":[{"id":70441,"href":"https:\/\/kinqsta.com\/pt\/wp-json\/wp\/v2\/posts\/70345\/revisions\/70441"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinqsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/70345\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinqsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/70345\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinqsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/70345\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinqsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/70345\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinqsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/70345\/translations\/de"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinqsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/70345\/translations\/jp"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinqsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/70345\/translations\/nl"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinqsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/70345\/translations\/es"},{"href":"https:\/\/kinqsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/70345\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinqsta.com\/pt\/wp-json\/wp\/v2\/media\/70346"}],"wp:attachment":[{"href":"https:\/\/kinqsta.com\/pt\/wp-json\/wp\/v2\/media?parent=70345"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinqsta.com\/pt\/wp-json\/wp\/v2\/tags?post=70345"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinqsta.com\/pt\/wp-json\/wp\/v2\/topic?post=70345"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}