{"id":46017,"date":"2022-01-04T09:10:43","date_gmt":"2022-01-04T12:10:43","guid":{"rendered":"https:\/\/kinqsta.com\/pt\/?p=46017&#038;preview=true&#038;preview_id=46017"},"modified":"2023-08-22T06:00:52","modified_gmt":"2023-08-22T09:00:52","slug":"tema-twenty-twenty-two","status":"publish","type":"post","link":"https:\/\/kinqsta.com\/pt\/blog\/tema-twenty-twenty-two\/","title":{"rendered":"An\u00e1lise Detalhada do Twenty Twenty-Two e Temas de Blocos WordPress"},"content":{"rendered":"<p>Embora um pouco mais tarde do que o planejado originalmente, n\u00f3s estamos recebendo um novo tema padr\u00e3o do WordPress. Seu nome \u00e9 Twenty Twenty-Two!<\/p>\n<p>O novo tema padr\u00e3o do WordPress vem com a <a href=\"https:\/\/kinqsta.com\/pt\/blog\/wordpress-5-9\/\" target=\"_blank\" rel=\"noopener noreferrer\">vers\u00e3o do WordPress 5.9<\/a>. N\u00f3s est\u00e1vamos curiosos para saber mais sobre o novo tema, ent\u00e3o n\u00f3s instalamos e testamos o Twenty Twenty-Two em um <a href=\"https:\/\/kinqsta.com\/pt\/devkinsta\/\">ambiente de desenvolvimento local<\/a> rodando <a href=\"https:\/\/kinqsta.com\/pt\/blog\/wordpress-5-9\/\" target=\"_blank\" rel=\"noopener noreferrer\">o WordPress 5.9<\/a>.<\/p>\n<p>N\u00f3s mostraremos nossos resultados antes de encerrarmos nossos pensamentos para lhe trazer uma vis\u00e3o detalhada do novo tema do WordPress.<\/p>\n<figure id=\"attachment_110731\" aria-describedby=\"caption-attachment-110731\" style=\"width: 2560px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-110731 size-full\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2021\/12\/tt2.jpg\" alt=\"Uma pr\u00e9via do Twenty Twenty-Two, o novo tema padr\u00e3o do WordPress.\" width=\"2560\" height=\"1752\"><figcaption id=\"caption-attachment-110731\" class=\"wp-caption-text\">Uma pr\u00e9via do Twenty Twenty-Two, o novo tema padr\u00e3o do WordPress. (Imagem de origem: <a href=\"https:\/\/make.wordpress.org\/core\/2021\/10\/06\/introducing-twenty-twenty-two\/\">WordPress.org<\/a>)<\/figcaption><\/figure>\n<p><a href=\"https:\/\/make.wordpress.org\/core\/2021\/10\/06\/introducing-twenty-twenty-two\/\">Twenty Twenty-Two<\/a> foi projetado para ser o tema padr\u00e3o mais flex\u00edvel, leve e personaliz\u00e1vel de todos os tempos. Ele fornece um \u00f3timo playground para testar blocos, patterns (padr\u00f5es) e templates.<\/p>\n<p>Sendo um tema de blocos, ele o ajudar\u00e1 a explorar melhor a Edi\u00e7\u00e3o Completa do Site, Estilos Globais, Blocos de Navega\u00e7\u00e3o e as novas galerias de imagens, que s\u00e3o as caracter\u00edsticas mais esperadas que v\u00eam com o WordPress 5.9.<\/p>\n<p>Temos que dizer imediatamente que <strong>Twenty Twenty-Two \u00e9 o primeiro tema padr\u00e3o de bloco<\/strong>!<\/p>\n<p>Um dos objetivos mais ambiciosos do novo tema \u00e9 o de <strong>capacitar os usu\u00e1rios<\/strong>. Com tantos padr\u00f5es e templates dispon\u00edveis na caixa, os usu\u00e1rios podem construir layouts complexos com apenas alguns cliques. O resto \u00e9 apenas customiza\u00e7\u00e3o de estilo.<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-important\">\n            <h3>Important<\/h3>\n        <p>Twenty Twenty-Two ser\u00e1 lan\u00e7ado com o WordPress 5.9. O tema ainda est\u00e1 em desenvolvimento no momento desta reda\u00e7\u00e3o, e o que \u00e9 relatado aqui pode mudar significativamente antes do lan\u00e7amento final<\/p>\n<\/aside>\n\n<p>De um ponto de vista t\u00e9cnico, escrever sobre Twenty Twenty-Two n\u00e3o \u00e9 muito diferente de escrever sobre as \u00faltimas e mais poderosas caracter\u00edsticas que v\u00eam com o WordPress 5.9. Mas o Twenty Twenty-Two nos fornece uma lupa para melhor apreciar os novos recursos de edi\u00e7\u00e3o do site e ter uma id\u00e9ia melhor do futuro da plataforma.<\/p>\n<p>Ent\u00e3o aqui estamos n\u00f3s para apresentar a voc\u00ea o novo tema.<\/p>\n<p>Primeiro, n\u00f3s vamos explorar o <strong>novo fluxo de edi\u00e7\u00e3o do site<\/strong> que os usu\u00e1rios experimentar\u00e3o com o WordPress 5.9 e Twenty Twenty-Two.<\/p>\n<p>Depois disso, vamos mergulhar nas principais caracter\u00edsticas do tema de bloco implementado em Twenty Twenty-Two. Voc\u00ea vai conhecer <strong>Estilos Globais<\/strong>, <strong>padr\u00f5es de blocos<\/strong>, <strong>templates<\/strong> e <strong>partes do template<\/strong>.<\/p>\n<p>Mas h\u00e1 muito mais a dizer sobre os temas Twenty Twenty-Two e o WordPress Block. Ent\u00e3o, como um cap\u00edtulo b\u00f4nus, n\u00f3s vamos fornecer uma r\u00e1pida vis\u00e3o geral de como estender os recursos do Twenty Twenty-Two, aproveitando o arquivo <strong>theme.json.<\/strong><\/p>\n<p>https:\/\/twitter.com\/kjellr\/status\/1445800581189160968<\/p>\n<p>Vamos trabalhar e mergulhar no nov\u00edssimo tema Twenty Twenty-Two padr\u00e3o do WordPress\u00a0 .<\/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>Twenty Twenty-Two traz um novo fluxo de edi\u00e7\u00e3o do site<\/h2>\n<p>V\u00e1rios recursos completos de edi\u00e7\u00e3o do site entram no n\u00facleo com o WordPress 5.9. Os propriet\u00e1rios de sites usando a \u00faltima vers\u00e3o do WordPress com um tema de bloco como Twenty Twenty-Two instalado ser\u00e3o capazes de:<\/p>\n<ul>\n<li><a href=\"https:\/\/kinqsta.com\/pt\/blog\/editor-gutenberg-wordpress\/\">Criar e editar artigos e p\u00e1ginas<\/a> usando mais blocos e padr\u00f5es<\/li>\n<li>Personalizar as <a href=\"https:\/\/kinqsta.com\/pt\/blog\/wordpress-5-8\/#block-settings-and-styles-with-themejson\">configura\u00e7\u00f5es e estilos<\/a> definidos no arquivo <strong>theme.json<\/strong> atrav\u00e9s da interface Estilos globais<\/li>\n<li>Criar e editar templates para p\u00e1ginas e artigos<\/li>\n<li>Criar e editar partes do template para cabe\u00e7alho, rodap\u00e9 e outras \u00e1reas do template<\/li>\n<\/ul>\n<p>Com todas essas caracter\u00edsticas fundidas ao n\u00facleo, os colaboradores do n\u00facleo do WordPress t\u00eam discutido a <a href=\"https:\/\/make.wordpress.org\/design\/2021\/10\/15\/site-editing-ia-concepts-how-to-surface-and-access-new-features\/\">evolu\u00e7\u00e3o da arquitetura de informa\u00e7\u00e3o<\/a> e redesenhado todo o <a href=\"https:\/\/make.wordpress.org\/design\/2021\/10\/22\/site-editing-ia-concepts-part-2\/\">fluxo de edi\u00e7\u00e3o do site<\/a>.<\/p>\n<p>A primeira coisa que voc\u00ea pode notar depois de ativar o Twenty Twenty-Two \u00e9 que o ponto de entrada para o editor do site n\u00e3o est\u00e1 mais localizado no menu principal do seu painel do WordPress, mas foi movido sob o menu <strong>Apar\u00eancia<\/strong>.<\/p>\n<figure id=\"attachment_110738\" aria-describedby=\"caption-attachment-110738\" style=\"width: 1980px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-110738 size-full\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2021\/12\/editor-menu-wp-59.jpg\" alt=\"O novo menu Appearance no WordPress 5.9\" width=\"1980\" height=\"952\"><figcaption id=\"caption-attachment-110738\" class=\"wp-caption-text\">O novo menu Apar\u00eancia no WordPress 5.9<\/figcaption><\/figure>\n<p>Trazer os recursos de edi\u00e7\u00e3o de templates e estilos sob o mesmo menu <strong>Apar\u00eancia<\/strong>\u00a0deve racionalizar a experi\u00eancia de edi\u00e7\u00e3o. Deve facilitar a compreens\u00e3o de que as caracter\u00edsticas que voc\u00ea est\u00e1 acessando se relacionam com a <em>apresenta\u00e7\u00e3o<\/em> de suas p\u00e1ginas.<\/p>\n\n<p>O item do menu <strong>Editor<\/strong> abre o template da p\u00e1gina inicial do site. Dependendo da sua configura\u00e7\u00e3o de leitura, esta pode ser a sua \u00faltima p\u00e1gina de artigos ou uma p\u00e1gina est\u00e1tica.<\/p>\n<figure id=\"attachment_110740\" aria-describedby=\"caption-attachment-110740\" style=\"width: 2130px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-110740 size-full\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2021\/12\/tt2-site-editor.jpg\" alt=\"O editor do site no WordPress 5.9 com Twenty Twenty-Two\" width=\"2130\" height=\"1002\"><figcaption id=\"caption-attachment-110740\" class=\"wp-caption-text\">O editor do site no WordPress 5.9 com Twenty Twenty-Two<\/figcaption><\/figure>\n<p>Agora, clicando no \u00edcone do WordPress no canto superior esquerdo exibe um novo <a href=\"https:\/\/make.wordpress.org\/design\/2021\/10\/22\/site-editing-ia-concepts-part-2\/\">menu de navega\u00e7\u00e3o do editor do site<\/a>, incluindo tr\u00eas itens de menu: <strong>Site<\/strong>, <strong>Templates<\/strong> e <strong>Partes do template<\/strong>.<\/p>\n<p>Vamos dar uma olhada mais de perto.<\/p>\n<figure id=\"attachment_110741\" aria-describedby=\"caption-attachment-110741\" style=\"width: 2318px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-110741 size-full\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2021\/12\/editor-navigation-menu.jpg\" alt=\"O menu de navega\u00e7\u00e3o do Editor\" width=\"2318\" height=\"1046\"><figcaption id=\"caption-attachment-110741\" class=\"wp-caption-text\">O menu de navega\u00e7\u00e3o do Editor<\/figcaption><\/figure>\n<p>A op\u00e7\u00e3o <strong>Site<\/strong> abre o template da p\u00e1gina inicial (\u00faltimos artigos do blog ou p\u00e1gina inicial est\u00e1tica).<\/p>\n<p>No item de menu <strong>Templates<\/strong>, voc\u00ea ter\u00e1 uma lista dos templates dispon\u00edveis. Voc\u00ea pode clicar em qualquer template da lista para lan\u00e7\u00e1-lo no editor.<\/p>\n<p>A partir desta escrita, Twenty Twenty-Two fornece 11 templates.<\/p>\n<figure id=\"attachment_110746\" aria-describedby=\"caption-attachment-110746\" style=\"width: 2132px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-110746 size-full\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2021\/12\/tt2-templates.jpg\" alt=\"Twenty Twenty-Two templates\" width=\"2132\" height=\"1218\"><figcaption id=\"caption-attachment-110746\" class=\"wp-caption-text\">Twenty Twenty-Two templates<\/figcaption><\/figure>\n<p>Clicando no \u00edcone da elipse(<strong>\ufe19<\/strong>) \u00e0 direita, voc\u00ea pode limpar suas customiza\u00e7\u00f5es.<\/p>\n<figure id=\"attachment_111357\" aria-describedby=\"caption-attachment-111357\" style=\"width: 1378px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-111357 size-full\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2021\/12\/tt2-template-clear-customizations.jpg\" alt=\"Personaliza\u00e7\u00f5es claras do template.\" width=\"1378\" height=\"686\"><figcaption id=\"caption-attachment-111357\" class=\"wp-caption-text\">Personaliza\u00e7\u00f5es claras do template.<\/figcaption><\/figure>\n<p>Ao contr\u00e1rio dos templates de temas, os templates personalizados s\u00f3 podem ser renomeados ou removidos (mas voc\u00ea pode <a href=\"https:\/\/kinqsta.com\/pt\/blog\/wordpress-5-8\/#template-editing-mode\">editar os templates personalizados<\/a> no editor de artigos).<\/p>\n<figure id=\"attachment_111356\" aria-describedby=\"caption-attachment-111356\" style=\"width: 1368px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-111356 size-full\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2021\/12\/wp-59-delete-rename-custom-template.jpg\" alt=\"Renomear\/apagar gabaritos personalizados\" width=\"1368\" height=\"382\"><figcaption id=\"caption-attachment-111356\" class=\"wp-caption-text\">Renomear\/apagar gabaritos personalizados<\/figcaption><\/figure>\n<p>O item do menu <strong>partes do template<\/strong> lista as partes do template dispon\u00edveis que voc\u00ea pode abrir no editor para suas customiza\u00e7\u00f5es.<\/p>\n<p>Voc\u00ea encontrar\u00e1 quatro partes do template adicionado ao Twenty Twenty-Two por padr\u00e3o. Passar o cursor sobre um template modificado exibe uma dica de ferramenta para que voc\u00ea saiba que o template foi personalizado.<\/p>\n<figure id=\"attachment_110747\" aria-describedby=\"caption-attachment-110747\" style=\"width: 2128px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-110747 size-full\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2021\/12\/tt2-template-parts.jpg\" alt=\"Twenty Twenty-Two partes do do template.\" width=\"2128\" height=\"1120\"><figcaption id=\"caption-attachment-110747\" class=\"wp-caption-text\">Partes do template Twenty Twenty-Two.<\/figcaption><\/figure>\n<p>Voc\u00ea pode limpar estas customiza\u00e7\u00f5es clicando no \u00edcone da elipse(<strong>\ufe19<\/strong>) \u00e0 direita.<\/p>\n<figure id=\"attachment_111354\" aria-describedby=\"caption-attachment-111354\" style=\"width: 2214px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-111354 size-full\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2021\/12\/tt2-template-parts-clear-customizations.jpg\" alt=\"Personaliza\u00e7\u00f5es claras da pe\u00e7a template.\" width=\"2214\" height=\"1118\"><figcaption id=\"caption-attachment-111354\" class=\"wp-caption-text\">Personaliza\u00e7\u00f5es claras das partes do template.<\/figcaption><\/figure>\n<h3>Edi\u00e7\u00e3o de templates e partes do template<\/h3>\n<p>O <strong>Editor<\/strong> fornece a interface para personalizar a estrutura de seus <a href=\"https:\/\/developer.wordpress.org\/block-editor\/how-to-guides\/themes\/create-block-theme\/#required-files-and-file-structure\">templates e partes do template<\/a>.<\/p>\n<p>Aqui voc\u00ea pode facilmente adicionar ou editar blocos e padr\u00f5es, e suas mudan\u00e7as ser\u00e3o automaticamente aplicadas a cada p\u00e1gina que usar esse template.<\/p>\n<figure id=\"attachment_110836\" aria-describedby=\"caption-attachment-110836\" style=\"width: 2534px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-110836 size-full\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2021\/12\/editing-single-post-template.jpg\" alt=\"Editando o template \u00fanico de poste.\" width=\"2534\" height=\"1294\"><figcaption id=\"caption-attachment-110836\" class=\"wp-caption-text\">Editando o template \u00fanico de artigo.<\/figcaption><\/figure>\n<p>A imagem abaixo mostra o template de p\u00e1ginas 404\u00a0 no editor. \u00c9 um template bastante simples, incluindo apenas um cabe\u00e7alho, um par\u00e1grafo e uma caixa de pesquisa. Ainda assim, ele nos d\u00e1 uma boa compreens\u00e3o de como a IU funciona.<\/p>\n<figure id=\"attachment_110826\" aria-describedby=\"caption-attachment-110826\" style=\"width: 1796px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-110826 size-full\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2021\/12\/404-page-template.jpg\" alt=\"template de bloco 404 do Twenty Twenty Twenty-Two no editor de templates\" width=\"1796\" height=\"1350\"><figcaption id=\"caption-attachment-110826\" class=\"wp-caption-text\">template de bloco 404 do Twenty Twenty Twenty-Two no editor de templates<\/figcaption><\/figure>\n<p>Aqui, voc\u00ea pode fazer edi\u00e7\u00f5es e personalizar os templates de acordo com as suas necessidades. Por exemplo, voc\u00ea pode querer adicionar uma <strong>grade de<\/strong> <strong>padr\u00f5es de<\/strong> <strong>artigos de imagem<\/strong> para aumentar o envolvimento de seus visitantes e convid\u00e1-los a navegar pelo conte\u00fado do seu site.<\/p>\n<figure id=\"attachment_111351\" aria-describedby=\"caption-attachment-111351\" style=\"width: 2872px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-111351 size-full\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2021\/12\/grid-of-image-post-pattern.jpg\" alt=\"Personalizando o template de bloco 404 da Twenty Twenty-Two\" width=\"2872\" height=\"1314\"><figcaption id=\"caption-attachment-111351\" class=\"wp-caption-text\">Personalizando o template de bloco 404 da Twenty Twenty-Two<\/figcaption><\/figure>\n<p>O cabe\u00e7alho suspenso no topo do editor de templates exibe uma lista das <strong>\u00e1reas de templates<\/strong> dispon\u00edveis. A mesma lista aparece na aba <strong>Template<\/strong> na barra lateral <strong>Settings<\/strong>.<\/p>\n<figure id=\"attachment_110761\" aria-describedby=\"caption-attachment-110761\" style=\"width: 2242px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-110761 size-full\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2021\/12\/template-areas.jpg\" alt=\"\u00c1reas template em Twenty Twenty-Two\" width=\"2242\" height=\"1036\"><figcaption id=\"caption-attachment-110761\" class=\"wp-caption-text\">\u00c1reas template em Twenty Twenty-Two<\/figcaption><\/figure>\n<p>Ao clicar em qualquer \u00e1rea do template (por exemplo, cabe\u00e7alho), voc\u00ea ser\u00e1 levado diretamente para a parte do template que voc\u00ea deseja editar.<\/p>\n<p>Se voc\u00ea clicar no \u00edcone da elipse \u00e0 direita, voc\u00ea ter\u00e1 acesso ao <strong>editor de partes isoladas do template<\/strong>.<\/p>\n<figure id=\"attachment_110748\" aria-describedby=\"caption-attachment-110748\" style=\"width: 2292px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-110748 size-full\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2021\/12\/editing-template-parts.jpg\" alt=\"O \u00edcone da elipse lan\u00e7a o editor de partes isoladas do template\" width=\"2292\" height=\"1316\"><figcaption id=\"caption-attachment-110748\" class=\"wp-caption-text\">O \u00edcone da elipse lan\u00e7a o editor de partes isoladas do template<\/figcaption><\/figure>\n<p>O editor de partes do template tamb\u00e9m fornece um par de al\u00e7as arrast\u00e1veis, permitindo que voc\u00ea verifique como o template se comporta em diferentes resolu\u00e7\u00f5es de tela.<\/p>\n<figure id=\"attachment_110762\" aria-describedby=\"caption-attachment-110762\" style=\"width: 2130px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-110762 size-full\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2021\/12\/adjusting-preview-dimension-1.jpg\" alt=\"Ajuste da dimens\u00e3o de visualiza\u00e7\u00e3o da pe\u00e7a template\" width=\"2130\" height=\"1196\"><figcaption id=\"caption-attachment-110762\" class=\"wp-caption-text\">Ajuste da dimens\u00e3o de visualiza\u00e7\u00e3o da parte do template<\/figcaption><\/figure>\n<p>Quando voc\u00ea estiver satisfeito com suas mudan\u00e7as, salve suas edi\u00e7\u00f5es e volte para o editor principal de templates para verificar o resultado final.<\/p>\n<p>Se voc\u00ea quiser mergulhar mais profundamente na nova arquitetura de informa\u00e7\u00e3o, voc\u00ea pode querer verificar os seguintes artigos:<\/p>\n<ul>\n<li><a href=\"https:\/\/make.wordpress.org\/design\/2021\/10\/15\/site-editing-ia-concepts-how-to-surface-and-access-new-features\/\">Edi\u00e7\u00e3o dos conceitos de AI do site: Como vir \u00e0 tona e acessar novas funcionalidades<\/a><\/li>\n<li><a href=\"https:\/\/make.wordpress.org\/design\/2021\/10\/22\/site-editing-ia-concepts-part-2\/\">Edi\u00e7\u00e3o de conceitos do iA &#8211; Parte 2<\/a><\/li>\n<\/ul>\n<h2>Twenty Twenty-Two no seu n\u00facleo: Uma r\u00e1pida vis\u00e3o geral do <strong>theme.json<\/strong><\/h2>\n<p>Para entender completamente como Twenty Twenty-Two temas de bloco (como <a href=\"https:\/\/www.anarieldesign.com\/themes\/block-based-wordpress-theme\/\">Bricksy<\/a>) funcionam, vamos dar uma olhada na nova configura\u00e7\u00e3o de temas e mecanismo de estilo baseado no arquivo <strong>theme.json.<\/strong><\/p>\n<p>Introduzido com o <a href=\"https:\/\/kinqsta.com\/pt\/blog\/wordpress-5-8\/#block-settings-and-styles-with-themejson\">WordPress 5.8<\/a>, este novo mecanismo permite aos desenvolvedores de temas configurar o editor e adicionar suporte a recursos a partir de um <a href=\"https:\/\/make.wordpress.org\/core\/2021\/06\/25\/introducing-theme-json-in-wordpress-5-8\/\">ponto de configura\u00e7\u00e3o central<\/a>.<\/p>\n<p>Em Twenty Twenty-Two, o arquivo <strong>theme.json<\/strong> tem a seguinte estrutura:<\/p>\n<pre><code class=\"language-json\">{\n\t\"version\": 2,\n\t\"settings\": {},\n\t\"styles\": {},\n\t\"customTemplates\": {},\n\t\"templateParts\": {}\n}<\/code><\/pre>\n<p>Vamos dar uma r\u00e1pida olhada em cada se\u00e7\u00e3o.<\/p>\n<h3>Version<\/h3>\n<p>O campo <code>version<\/code> descreve a vers\u00e3o de especifica\u00e7\u00e3o, que atualmente \u00e9 <code>2<\/code>.<\/p>\n<h3>Settings<\/h3>\n<p>A se\u00e7\u00e3o <code>settings<\/code> <a href=\"https:\/\/developer.wordpress.org\/block-editor\/how-to-guides\/themes\/theme-json\/#settings\">define as configura\u00e7\u00f5es<\/a> no n\u00edvel global ou de bloco. As configura\u00e7\u00f5es definidas no n\u00edvel superior afetam todos os blocos, mas os blocos podem substituir individualmente as configura\u00e7\u00f5es globais. Em Twenty Twenty-Two voc\u00ea encontrar\u00e1 as seguintes configura\u00e7\u00f5es:<\/p>\n<pre><code class=\"language-json\">{\n\t\"settings\": {\n\t\t\"appearanceTools\": true,\n\t\t\"color\": {\n\t\t\t\"duotone\": [...],\n\t\t\t\"gradients\": [...],\n\t\t\t\"palette\": [...]\n\t\t},\n\t\t\"custom\": {...},\n\t\t\"spacing\": {...},\n\t\t\"typography\": {\n\t\t\t\"dropCap\": false,\n\t\t\t\"fontFamilies\": [...],\n\t\t\t\"fontSizes\": [...]\n\t\t},\n\t\t\"layout\": {...}\n\t}\n}<\/code><\/pre>\n<p>As <a href=\"https:\/\/developer.wordpress.org\/block-editor\/how-to-guides\/themes\/theme-json\/#css-custom-properties-presets-custom\">configura\u00e7\u00f5es padr\u00e3o<\/a> s\u00e3o chamadas <strong>predefini\u00e7\u00f5es<\/strong> e s\u00e3o usadas para <a href=\"https:\/\/developer.wordpress.org\/block-editor\/how-to-guides\/themes\/theme-json\/#the-naming-schema-of-css-custom-properties\">gerar propriedades personalizadas CSS<\/a> e nomes de classe baseados em uma <a href=\"https:\/\/developer.wordpress.org\/block-editor\/how-to-guides\/themes\/theme-json\/#the-naming-schema-of-css-custom-properties\">conven\u00e7\u00e3o de nomenclatura<\/a> espec\u00edfica:<\/p>\n<ul>\n<li>Propriedade personalizada do CSS <code>--wp--preset--{preset-category}--{preset-slug}<\/code><\/li>\n<li>Nome da classe do CSS <code>.has-{preset-slug}-{preset-category}<\/code><\/li>\n<\/ul>\n<p>Uma vez que um tema tenha definido suas predefini\u00e7\u00f5es, as propriedades personalizadas correspondentes do CSS podem ser usadas para estilizar blocos e elementos na se\u00e7\u00e3o <code>styles<\/code>.<\/p>\n<h3>Styles<\/h3>\n<p>A se\u00e7\u00e3o <code>styles<\/code> \u00e9 onde os temas definem <a href=\"https:\/\/developer.wordpress.org\/block-editor\/how-to-guides\/themes\/theme-json\/#styles\">os estilos padr\u00e3o<\/a> de blocos e elementos. Veja, por exemplo, os seguintes Twenty Twenty-Two Estilos para o Bloco de Bot\u00f5es do n\u00facleo:<\/p>\n<pre><code class=\"language-json\">{\n\t\"version\": 2,\n\t\"styles\": {\n\t\t\"blocks\": {\n\t\t\t\"core\/button\": {\n\t\t\t\t\"border\": {\n\t\t\t\t\t\"radius\": \"0\"\n\t\t\t\t},\n\t\t\t\t\"color\": {\n\t\t\t\t\t\"background\": \"var(--wp--preset--color--primary)\",\n\t\t\t\t\t\"text\": \"var(--wp--preset--color--background)\"\n\t\t\t\t},\n\t\t\t\t\"typography\": {\n\t\t\t\t\t\"fontSize\": \"var(--wp--preset--typography--font-size--normal)\"\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n}<\/code><\/pre>\n<p>Voc\u00ea vai notar as propriedades personalizadas CSS usadas nas declara\u00e7\u00f5es de propriedade.<\/p>\n<h3>Custom Templates<\/h3>\n<p>A se\u00e7\u00e3o <code>customTemplates<\/code> \u00e9 onde um tema declara seus <a href=\"https:\/\/developer.wordpress.org\/block-editor\/how-to-guides\/themes\/theme-json\/#customtemplates\">templates personalizados<\/a>. Os campos <code>name<\/code> e <code>title<\/code> s\u00e3o obrigat\u00f3rios. Os temas tamb\u00e9m podem declarar que tipo de post pode usar o template, definindo a propriedade <code>postTypes<\/code>.<\/p>\n<p>Twenty Twenty-Two fornece quatro templates personalizados:<\/p>\n<pre><code class=\"language-json\">{\n\t\"version\": 2,\n\t\"customTemplates\": [\n\t\t{\n\t\t\t\"name\": \"blank\",\n\t\t\t\"title\": \"Blank\",\n\t\t\t\"postTypes\": [\n\t\t\t\t\"page\",\n\t\t\t\t\"post\"\n\t\t\t]\n\t\t},\n\t\t{\n\t\t\t\"name\": \"page-large-header\",\n\t\t\t\"title\": \"Page (Large Header)\",\n\t\t\t\"postTypes\": [\n\t\t\t\t\"page\"\n\t\t\t]\n\t\t},\n\t\t{\n\t\t\t\"name\": \"single-no-separators\",\n\t\t\t\"title\": \"Single Post (No Separators)\",\n\t\t\t\"postTypes\": [\n\t\t\t\t\"post\"\n\t\t\t]\n\t\t},\n\t\t{\n\t\t\t\"name\": \"page-no-separators\",\n\t\t\t\"title\": \"Page (No Separators)\",\n\t\t\t\"postTypes\": [\n\t\t\t\t\"page\"\n\t\t\t]\n\t\t}\n\t]\n}<\/code><\/pre>\n<p>Voc\u00ea encontrar\u00e1 os arquivos <strong>.html<\/strong> correspondentes na pasta <strong>block-templates<\/strong>.<\/p>\n<figure id=\"attachment_111516\" aria-describedby=\"caption-attachment-111516\" style=\"width: 1224px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-111516 size-full\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2021\/12\/tt2-block-templates-folder.jpg\" alt=\"Pasta de Twenty Twenty-Two blocos de chapas\" width=\"1224\" height=\"587\"><figcaption id=\"caption-attachment-111516\" class=\"wp-caption-text\">Pasta da Twenty Twenty-Two <strong>block-templates<\/strong><\/figcaption><\/figure>\n<h3>Template Parts<\/h3>\n<p>A se\u00e7\u00e3o <code>templateParts<\/code> inclui as <a href=\"https:\/\/developer.wordpress.org\/block-editor\/how-to-guides\/themes\/theme-json\/#templateparts\">defini\u00e7\u00f5es das partes do template<\/a>:<\/p>\n<pre><code class=\"language-json\">{\n\t\"version\": 2,\n\t\"templateParts\": [\n\t\t{\n\t\t\t\"name\": \"header\",\n\t\t\t\"title\": \"Header\",\n\t\t\t\"area\": \"header\"\n\t\t},\n\t\t{\n\t\t\t\"name\": \"header-large-dark\",\n\t\t\t\"title\": \"Header (Dark, large)\",\n\t\t\t\"area\": \"header\"\n\t\t},\n\t\t{\n\t\t\t\"name\": \"header-small-dark\",\n\t\t\t\"title\": \"Header (Dark, small)\",\n\t\t\t\"area\": \"header\"\n\t\t},\n\t\t{\n\t\t\t\"name\": \"footer\",\n\t\t\t\"title\": \"Footer\",\n\t\t\t\"area\": \"footer\"\n\t\t}\n\t]\n}<\/code><\/pre>\n<p>Os campos <code>name<\/code> e <code>title<\/code> s\u00e3o obrigat\u00f3rios. Os temas tamb\u00e9m podem declarar um termo <code>area<\/code>, onde a parte template ser\u00e1 renderizada no editor.<\/p>\n<figure id=\"attachment_111360\" aria-describedby=\"caption-attachment-111360\" style=\"width: 1616px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-111360 size-full\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2021\/12\/tt2-template-parts-1.jpg\" alt=\"Twenty Twenty-Two partes do template\" width=\"1616\" height=\"1128\"><figcaption id=\"caption-attachment-111360\" class=\"wp-caption-text\">Twenty Twenty-Two partes do template<\/figcaption><\/figure>\n<p>Os arquivos <strong>.html<\/strong> das partes do template est\u00e3o localizados na pasta <strong>Template Parts<\/strong>.<\/p>\n<p>Agora que voc\u00ea sabe mais sobre o <strong>theme.json<\/strong> do Twenty Twenty-Two, n\u00f3s podemos explorar mais profundamente as funcionalidades do tema e a nova interface de edi\u00e7\u00e3o.<\/p>\n<p>Vamos mergulhar nos <strong>Estilos Globais do Twenty Twenty-Two<\/strong>.<\/p>\n<h2>Estilos globais Twenty Twenty-Two<\/h2>\n<p>Se voc\u00ea olhar para Twenty Twenty-Two <strong>style.css, voc\u00ea pode se surpreender ao notar que ele cont\u00e9m um n\u00famero m\u00ednimo de declara\u00e7\u00f5es CSS. A raz\u00e3o \u00e9 que <strong>os estilos s\u00e3o declarados no<\/strong> arquivo <strong> <em>theme.json<\/em><\/strong><\/strong> em temas baseados em blocos.<\/p>\n<p>O WordPress 5.9 vai levar as coisas um passo adiante, introduzindo um novo recurso que permite aos usu\u00e1rios do tema de blocos personalizar a apar\u00eancia dos elementos do site a partir de uma interface de usu\u00e1rio chamada <a href=\"https:\/\/kinqsta.com\/pt\/blog\/wordpress-5-8\/#block-settings-and-styles-with-themejson\">Global Styles (Estilos globais)<\/a>.<\/p>\n<p>A interface Estilos globais pode ser acessada a partir do novo \u00edcone <strong>Estilos <\/strong>colocado no canto superior direito do Editor (veja tamb\u00e9m <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/issues\/34574\">A Interface Global Styles (Estilos globais)<\/a>).<\/p>\n<p>Clicando nesse \u00edcone, aparece uma nova barra lateral de <strong>Estilos<\/strong> incluindo tr\u00eas pain\u00e9is separados:<\/p>\n<ul>\n<li>Um painel de <strong>pr\u00e9-visualiza\u00e7\u00e3o<\/strong>, mostrando uma pr\u00e9via das suas personaliza\u00e7\u00f5es<\/li>\n<li>Um painel de <strong>Estilos Globais<\/strong> fornecendo acesso a grupos espec\u00edficos de controles para <strong>Tipografia<\/strong>, <strong>Cores<\/strong> e <strong>Layout<\/strong><\/li>\n<li>Um item de <strong>blocos<\/strong> fornecendo acesso a configura\u00e7\u00f5es de estilo de n\u00edvel de bloco<\/li>\n<\/ul>\n<figure id=\"attachment_110852\" aria-describedby=\"caption-attachment-110852\" style=\"width: 1606px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-110852 size-full\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2021\/12\/styles-sidebar.jpg\" alt=\"A barra lateral Styles em Twenty Twenty-Two.\" width=\"1606\" height=\"1336\"><figcaption id=\"caption-attachment-110852\" class=\"wp-caption-text\">A barra lateral Styles em Twenty Twenty-Two.<\/figcaption><\/figure>\n<h3>Paleta de cores Twenty Twenty-Two<\/h3>\n<p>O painel de <strong>Cores<\/strong> pode ajud\u00e1-lo a editar as paletas dispon\u00edveis e atribuir ou mudar as cores para <strong>Fundo<\/strong>, <strong>Texto<\/strong> ou <strong>Links<\/strong>.<\/p>\n<p>No painel <strong>Paleta<\/strong>, voc\u00ea pode personalizar as paletas <strong>Tema<\/strong> ou <strong>Padr\u00e3o<\/strong> e at\u00e9 mesmo criar sua paleta personalizada.<\/p>\n<figure id=\"attachment_110941\" aria-describedby=\"caption-attachment-110941\" style=\"width: 1790px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-110941 size-full\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2021\/12\/tt2-color-settings.jpg\" alt=\"Configura\u00e7\u00f5es de cores em Twenty Twenty-Two\" width=\"1790\" height=\"1146\"><figcaption id=\"caption-attachment-110941\" class=\"wp-caption-text\">Configura\u00e7\u00f5es de cores em Twenty Twenty-Two<\/figcaption><\/figure>\n<p>Voc\u00ea j\u00e1 encontrou o c\u00f3digo que gera os controles de cor?<\/p>\n<p>Se n\u00e3o, abra o <strong>theme.json<\/strong> do Twenty Twenty-Two em seu <a href=\"https:\/\/kinqsta.com\/pt\/blog\/melhores-editores-texto\/\">editor de c\u00f3digo<\/a> favorito. Voc\u00ea encontrar\u00e1 as seguintes declara\u00e7\u00f5es de paleta de cores:<\/p>\n<pre><code class=\"language-json\">{\n\t\"version\": 2,\n\t\"settings\": {\n\t\t\"color\": {\n\t\t\t\"palette\": [\n\t\t\t\t{\n\t\t\t\t\t\"slug\": \"foreground\",\n\t\t\t\t\t\"color\": \"#000000\",\n\t\t\t\t\t\"name\": \"Foreground\"\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\t\"slug\": \"background\",\n\t\t\t\t\t\"color\": \"#ffffff\",\n\t\t\t\t\t\"name\": \"Background\"\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\t\"slug\": \"primary\",\n\t\t\t\t\t\"color\": \"#1a4548\",\n\t\t\t\t\t\"name\": \"Primary\"\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\t\"slug\": \"secondary\",\n\t\t\t\t\t\"color\": \"#ffe2c7\",\n\t\t\t\t\t\"name\": \"Secondary\"\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\t\"slug\": \"tertiary\",\n\t\t\t\t\t\"color\": \"#F6F6F6\",\n\t\t\t\t\t\"name\": \"Tertiary\"\n\t\t\t\t}\n\t\t\t]\n\t\t}\n\t}\n}<\/code><\/pre>\n<p>A imagem abaixo mostra como o c\u00f3digo acima combina com a paleta de cores dos Twenty Twenty-Two.<\/p>\n<figure id=\"attachment_111011\" aria-describedby=\"caption-attachment-111011\" style=\"width: 1314px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-111011 size-full\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2021\/12\/tt2-color-palette.jpg\" alt=\"A paleta de cores Twenty Twenty-Two\" width=\"1314\" height=\"972\"><figcaption id=\"caption-attachment-111011\" class=\"wp-caption-text\">A paleta de cores Twenty Twenty-Two<\/figcaption><\/figure>\n<p>Agora vamos assumir que voc\u00ea quer mudar a cor de fundo padr\u00e3o para um determinado bloco. Escolher uma cor diferente para o fundo do bloco simplesmente atribuir\u00e1 uma <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/--*\">vari\u00e1vel CSS<\/a> diferente para a propriedade <code>background-color<\/code> do elemento. A imagem abaixo fornece um exemplo disso:<\/p>\n<figure id=\"attachment_111012\" aria-describedby=\"caption-attachment-111012\" style=\"width: 2036px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-111012 size-full\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2021\/12\/tt2-custom-property.jpg\" alt=\"Twenty Twenty-Two cores prim\u00e1rias usadas como cor de fundo\" width=\"2036\" height=\"860\"><figcaption id=\"caption-attachment-111012\" class=\"wp-caption-text\">Twenty Twenty-Two cores prim\u00e1rias usadas como cor de fundo<\/figcaption><\/figure>\n<p>E isso \u00e9 tudo! Voc\u00ea n\u00e3o precisar\u00e1 adicionar uma \u00fanica linha de c\u00f3digo CSS personalizado ao Customizer ou criar um child theme (tema filho) para isso.<\/p>\n<p>Mas vamos continuar explorando os Estilos Globais do Twenty Twenty-Two com alguns exemplos adicionais.<\/p>\n<h3>Configura\u00e7\u00f5es de tipografia<\/h3>\n<p>O painel de <strong>tipografia<\/strong> \u00e9 onde voc\u00ea pode personalizar os estilos de tipografia para os elementos <strong>Texto<\/strong> e <strong>Links<\/strong> do seu site em n\u00edvel global.<\/p>\n<p>Cada item fornece acesso a um grupo de controles para que voc\u00ea possa personalizar a fam\u00edlia de fontes, tamanho e altura de linha.<\/p>\n<figure id=\"attachment_110847\" aria-describedby=\"caption-attachment-110847\" style=\"width: 1790px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-110847 size-full\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2021\/12\/tt2-typography-settings.jpg\" alt=\"Configura\u00e7\u00f5es tipogr\u00e1ficas em Twenty Twenty-Two\" width=\"1790\" height=\"1146\"><figcaption id=\"caption-attachment-110847\" class=\"wp-caption-text\">Configura\u00e7\u00f5es tipogr\u00e1ficas em Twenty Twenty-Two<\/figcaption><\/figure>\n<p>Voc\u00ea est\u00e1 se perguntando qual c\u00f3digo gera esses controles?<\/p>\n<p>Abra o Twenty Twenty-Two <strong>theme<\/strong><strong>.json<\/strong> e encontre a se\u00e7\u00e3o <code>typography<\/code>. Voc\u00ea ver\u00e1 as seguintes configura\u00e7\u00f5es:<\/p>\n<pre><code class=\"language-json\">{\n\t\"version\": 1,\n\t\"settings\": {\n\t\t\"appearanceTools\": true,\n\t\t\"typography\": {\n\t\t\t\"dropCap\": false,\n\t\t\t\"fontFamilies\": [\n\t\t\t\t{\n\t\t\t\t\t\"fontFamily\": \"-apple-system,BlinkMacSystemFont,\\\"Segoe UI\\\",Roboto,Oxygen-Sans,Ubuntu,Cantarell,\\\"Helvetica Neue\\\",sans-serif\",\n\t\t\t\t\t\"name\": \"System Font\",\n\t\t\t\t\t\"slug\": \"system-font\"\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\t\"fontFamily\": \"\\\"Source Serif Pro\\\", serif\",\n\t\t\t\t\t\"name\": \"Source Serif Pro\",\n\t\t\t\t\t\"slug\": \"source-serif-pro\"\n\t\t\t\t}\n\t\t\t],\n\t\t\t\"fontSizes\": [\n\t\t\t\t{\n\t\t\t\t\t\"name\": \"Small\",\n\t\t\t\t\t\"size\": \"1rem\",\n\t\t\t\t\t\"slug\": \"small\"\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\t\"name\": \"Normal\",\n\t\t\t\t\t\"size\": \"1.125rem\",\n\t\t\t\t\t\"slug\": \"normal\"\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\t\"name\": \"Medium\",\n\t\t\t\t\t\"size\": \"1.75rem\",\n\t\t\t\t\t\"slug\": \"medium\"\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\t\"name\": \"Large\",\n\t\t\t\t\t\"size\": \"clamp(1.75rem, 3vw, 2.25rem)\",\n\t\t\t\t\t\"slug\": \"large\"\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\t\"name\": \"Huge\",\n\t\t\t\t\t\"size\": \"clamp(2.5rem, 4vw, 3rem)\",\n\t\t\t\t\t\"slug\": \"huge\"\n\t\t\t\t}\n\t\t\t]\n\t\t},\n}<\/code><\/pre>\n<p>Voc\u00ea pode esperar ver duas fam\u00edlias de fontes e cinco tamanhos de fontes do c\u00f3digo acima. E voc\u00ea teria adivinhado direito.<\/p>\n<p>Aqui est\u00e1 como o c\u00f3digo acima se traduz para as configura\u00e7\u00f5es de <strong>tipografia de<\/strong> Estilos Globais:<\/p>\n<figure id=\"attachment_110848\" aria-describedby=\"caption-attachment-110848\" style=\"width: 1300px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-110848 size-full\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2021\/12\/font-family-font-size.jpg\" alt=\"Estilos de tipografia em Twenty Twenty-Two\" width=\"1300\" height=\"1196\"><figcaption id=\"caption-attachment-110848\" class=\"wp-caption-text\">Estilos de tipografia em Twenty Twenty-Two<\/figcaption><\/figure>\n<p>Voc\u00ea pode adivinhar qual configura\u00e7\u00e3o gera o controle da <strong>altura da linha<\/strong>. Em Twenty Twenty-Two, voc\u00ea n\u00e3o encontrar\u00e1 uma configura\u00e7\u00e3o espec\u00edfica para isso porque ela \u00e9 habilitada pela propriedade <code>appearanceTools<\/code>, que \u00e9 um atalho para v\u00e1rias declara\u00e7\u00f5es de configura\u00e7\u00e3o (veja pr\u00f3xima se\u00e7\u00e3o).<\/p>\n<h3>Layout e ferramentas de apar\u00eancia<\/h3>\n<p>O \u00faltimo elemento na barra lateral Estilos globais \u00e9 o <strong>Layout<\/strong>. No momento em que foi escrito, ele inclui apenas um controle <code>padding<\/code>.<\/p>\n<figure id=\"attachment_111192\" aria-describedby=\"caption-attachment-111192\" style=\"width: 1790px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-111192 size-full\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2021\/12\/layout.jpg\" alt=\"Configura\u00e7\u00f5es de layout em Twenty Twenty-Two\" width=\"1790\" height=\"1212\"><figcaption id=\"caption-attachment-111192\" class=\"wp-caption-text\">Configura\u00e7\u00f5es de layout no Twenty Twenty-Two<\/figcaption><\/figure>\n<p>No Twenty Twenty-Two, o painel Layout \u00e9 habilitado pela <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/pull\/36646\">propriedade de configura\u00e7\u00e3o<\/a> <code>appearanceTools<\/code>, um booleano que pode ser usado para <a href=\"https:\/\/github.com\/WordPress\/twentytwentytwo\/issues\/261\">habilitar v\u00e1rias configura\u00e7\u00f5es<\/a> ao mesmo tempo:<\/p>\n<pre><code class=\"language-json\">{\n\t\"settings\": {\n\t\t\"appearanceTools\": true\n\t}\n}<\/code><\/pre>\n<p><code>\"appearanceTools\": true<\/code> simplesmente substitui o <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/pull\/36646\">seguinte bloco de declara\u00e7\u00f5es<\/a>:<\/p>\n<pre><code class=\"language-json\">{\n\t'settings': {\n\t\t'border': {\n\t\t\t'color': true,\n\t\t\t'radius': true,\n\t\t\t'style': true,\n\t\t\t'width': true\n\t\t},\n\t\t'color': {\n\t\t\t'link': true\n\t\t},\n\t\t'spacing': {\n\t\t\t'blockGap': true,\n\t\t\t'margin': true,\n\t\t\t'padding': true\n\t\t},\n\t\t'typography': {\n\t\t\t'lineHeight': true\n\t\t}\n\t}\n}<\/code><\/pre>\n<p>OK &#8211; voc\u00ea agora espera entender como as configura\u00e7\u00f5es declaradas no arquivo <strong>theme.json<\/strong> combinam com os controles correspondentes do Estilos globais.<\/p>\n<p>Ainda falta uma pe\u00e7a do nosso quebra-cabe\u00e7a para obter a imagem completa do novo tema padr\u00e3o do WordPress: <strong>padr\u00f5es de blocos<\/strong>.<\/p>\n<h2>Padr\u00f5es de bloco Twenty Twenty-Two<\/h2>\n<p>Pode-se dizer que Twenty Twenty-Two \u00e9, na maioria das vezes, uma <a href=\"https:\/\/wordpress.org\/news\/2021\/11\/episode-21-all-things-block-themes\/\">cole\u00e7\u00e3o de padr\u00f5es<\/a> &#8211; e \u00e9 praticamente isso. No Twenty Twenty-Two, voc\u00ea encontrar\u00e1 toneladas de <a href=\"https:\/\/kinqsta.com\/pt\/blog\/novo-wordpress-5-5\/#block-patterns\">padr\u00f5es de bloco<\/a> prontos para uso que voc\u00ea pode escolher para construir estruturas incr\u00edveis e imprevis\u00edveis de blocos aninhados para suas p\u00e1ginas web.<\/p>\n<p>O termo chave aqui \u00e9 <strong>&#8220;capacita\u00e7\u00e3o do usu\u00e1rio&#8221;<\/strong>. E isso se encaixa porque, com padr\u00f5es de bloco, voc\u00ea pode construir todo tipo de coisa, desde um atraente portf\u00f3lio at\u00e9 um site promocional de uma \u00fanica p\u00e1gina, mesmo que voc\u00ea n\u00e3o tenha nenhum conhecimento de HTML ou CSS!<\/p>\n<p>E o WordPress 5.9 traz melhorias significativas para o sistema de padr\u00f5es com o novo <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/pull\/35773\">Pattern Explorer (Explorador de Padr\u00f5es)<\/a>, uma ferramenta que permite que voc\u00ea navegue pelos padr\u00f5es em um modal de tela cheia.<\/p>\n<figure id=\"attachment_111407\" aria-describedby=\"caption-attachment-111407\" style=\"width: 2442px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-111407 size-full\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2021\/12\/pattern-explorer.jpg\" alt=\"O Explorador de padr\u00f5es no Twenty Twenty-Two\" width=\"2442\" height=\"1378\"><figcaption id=\"caption-attachment-111407\" class=\"wp-caption-text\">O Explorador de padr\u00f5es do Twenty Twenty-Two<\/figcaption><\/figure>\n<p>A nova ferramenta tamb\u00e9m permite que voc\u00ea importe r\u00e1pido e facilmente padr\u00f5es de bloco diretamente do <a href=\"https:\/\/wordpress.org\/patterns\/\">Diret\u00f3rio de padr\u00f5es<\/a>. Isto abre novas possibilidades tanto para usu\u00e1rios do WordPress quanto para <a href=\"https:\/\/kinqsta.com\/pt\/blog\/blocos-personalizados-gutenberg\/\">desenvolvedores<\/a>, portanto, \u00e9 prov\u00e1vel que seu uso aumente consideravelmente no futuro.<\/p>\n<figure id=\"attachment_111408\" aria-describedby=\"caption-attachment-111408\" style=\"width: 2880px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-111408 size-full\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2021\/12\/wordpress-patterns-directory.jpg\" alt=\"Diret\u00f3rio de padr\u00f5es do WordPress\" width=\"2880\" height=\"2959\"><figcaption id=\"caption-attachment-111408\" class=\"wp-caption-text\">Diret\u00f3rio de padr\u00f5es do WordPress<\/figcaption><\/figure>\n<p>Twenty Twenty-Two inclui <a href=\"https:\/\/github.com\/WordPress\/twentytwentytwo\/pull\/204\">muitos padr\u00f5es<\/a> (mais de 65) em cinco categorias.<\/p>\n<figure id=\"attachment_111409\" aria-describedby=\"caption-attachment-111409\" style=\"width: 1522px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-111409 size-full\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2021\/12\/pattern-categories-dropdown.jpg\" alt=\"Twenty Twenty-Two categorias de padr\u00f5es\" width=\"1522\" height=\"1250\"><figcaption id=\"caption-attachment-111409\" class=\"wp-caption-text\">Twenty Twenty-Two categorias de padr\u00f5es<\/figcaption><\/figure>\n<p>Este s\u00f3lido conjunto de padr\u00f5es se emparelha perfeitamente com templates e partes do templates que v\u00eam com o novo tema padr\u00e3o, fazendo com que a experi\u00eancia de edi\u00e7\u00e3o seja realmente incr\u00edvel.<\/p>\n<figure id=\"attachment_111410\" aria-describedby=\"caption-attachment-111410\" style=\"width: 2880px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-111410 size-full\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2021\/12\/layered-images-with-duotone-pattern.jpg\" alt=\"Imagens em camadas com duotone\" width=\"2880\" height=\"1332\"><figcaption id=\"caption-attachment-111410\" class=\"wp-caption-text\">Imagens em camadas com duotone<\/figcaption><\/figure>\n<figure id=\"attachment_111411\" aria-describedby=\"caption-attachment-111411\" style=\"width: 2880px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-111411 size-full\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2021\/12\/video-with-header-and-details.jpg\" alt=\"V\u00eddeo com cabe\u00e7alho e detalhes\" width=\"2880\" height=\"2544\"><figcaption id=\"caption-attachment-111411\" class=\"wp-caption-text\">V\u00eddeo com cabe\u00e7alho e detalhes<\/figcaption><\/figure>\n<figure id=\"attachment_111412\" aria-describedby=\"caption-attachment-111412\" style=\"width: 2002px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-111412 size-full\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2021\/12\/two-images-with-text.jpg\" alt=\"Duas imagens com texto\" width=\"2002\" height=\"2160\"><figcaption id=\"caption-attachment-111412\" class=\"wp-caption-text\">Duas imagens com texto<\/figcaption><\/figure>\n<p>Se voc\u00ea ainda n\u00e3o teve a chance de experimentar com padr\u00f5es de blocos, n\u00f3s lhe mostraremos porque eles s\u00e3o considerados ferramentas t\u00e3o poderosas com um exemplo simples.<\/p>\n<p>Suponha que voc\u00ea queira remover o rodap\u00e9 padr\u00e3o dos templates \u00cdndice e Post \u00fanico e substitu\u00ed-lo por um padr\u00e3o diferente de blocos do Twenty Twenty-Two.<\/p>\n<p>Inicie o Editor do Site a partir do menu <strong>Apar\u00eancia<\/strong>\u00a0ou do bot\u00e3o da barra de ferramentas do WordPress frontend para personalizar o template do \u00cdndice.<\/p>\n<p>Clique no bot\u00e3o <strong>\u00cdndice<\/strong> para exibir a lista de \u00e1reas de templates dispon\u00edveis na p\u00e1gina. Clique no bot\u00e3o elipse ao lado do <strong>Rodap\u00e9<\/strong> e depois no bot\u00e3o <strong>Editar Rodap\u00e9<\/strong>.<\/p>\n<figure id=\"attachment_111413\" aria-describedby=\"caption-attachment-111413\" style=\"width: 1534px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-111413 size-full\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2021\/12\/template-inspector.jpg\" alt=\"O inspetor de template\" width=\"1534\" height=\"812\"><figcaption id=\"caption-attachment-111413\" class=\"wp-caption-text\">O inspetor de template<\/figcaption><\/figure>\n<p>Como mencionado acima, isto ir\u00e1 abrir o editor de partes isoladas do template.<\/p>\n<figure id=\"attachment_111414\" aria-describedby=\"caption-attachment-111414\" style=\"width: 2358px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-111414 size-full\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2021\/12\/isolated-template-part-editor.jpg\" alt=\"O editor de partes do template isoladas\" width=\"2358\" height=\"848\"><figcaption id=\"caption-attachment-111414\" class=\"wp-caption-text\">O editor de partes do template isoladas<\/figcaption><\/figure>\n<p>Agora abra o inseridor de blocos e clique em <strong>Patterns (padr\u00f5es)<\/strong>.<\/p>\n<p>Abra a nova ferramenta <strong>Pattern Explorer (Explorador de Padr\u00f5es)<\/strong>, selecione a categoria <strong>Rodap\u00e9s do Twenty Twenty-Two <\/strong>e escolha o rodap\u00e9 da sua escolha.<\/p>\n<figure id=\"attachment_111415\" aria-describedby=\"caption-attachment-111415\" style=\"width: 2360px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-111415 size-full\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2021\/12\/tt2-pattern-explorer.jpg\" alt=\"O explorador de padr\u00f5es em Twenty Twenty-Two\" width=\"2360\" height=\"1338\"><figcaption id=\"caption-attachment-111415\" class=\"wp-caption-text\">O explorador de padr\u00f5es em Twenty Twenty-Two<\/figcaption><\/figure>\n<p>Agora adicione e edite os blocos de acordo com suas necessidades.<\/p>\n<figure id=\"attachment_111416\" aria-describedby=\"caption-attachment-111416\" style=\"width: 2360px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-111416 size-full\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2021\/12\/new-footer-in-isolated-template-editor.jpg\" alt=\"Editando o rodap\u00e9 no editor de partes do template isolado\" width=\"2360\" height=\"996\"><figcaption id=\"caption-attachment-111416\" class=\"wp-caption-text\">Editando o rodap\u00e9 no editor de partes isoladas do template<\/figcaption><\/figure>\n<p>Salve o cabe\u00e7alho e verifique novamente o seu site quando voc\u00ea estiver satisfeito com suas mudan\u00e7as.<\/p>\n<p>A imagem abaixo compara tr\u00eas templates (Index, Single Post, e Single Post sem separadores) com diferentes personaliza\u00e7\u00f5es de cabe\u00e7alho e rodap\u00e9:<\/p>\n<figure id=\"attachment_111417\" aria-describedby=\"caption-attachment-111417\" style=\"width: 2400px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-111417 size-full\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2021\/12\/template-comparison.jpg\" alt=\"Customiza\u00e7\u00f5es de cabe\u00e7alho e rodap\u00e9 comparadas em diferentes Twenty Twenty-Two templates\" width=\"2400\" height=\"2223\"><figcaption id=\"caption-attachment-111417\" class=\"wp-caption-text\">Customiza\u00e7\u00f5es de cabe\u00e7alho e rodap\u00e9 comparadas em diferentes templates do Twenty Twenty-Two<\/figcaption><\/figure>\n<h2>Estendendo Twenty Twenty-Two com um child theme<\/h2>\n<p>Criar um <a href=\"https:\/\/developer.wordpress.org\/themes\/advanced-topics\/child-themes\/\">child theme para um tema bloco<\/a> \u00e9 bem diferente de criar um <a href=\"https:\/\/kinqsta.com\/pt\/blog\/tema-filho-no-wordpress\/\">child theme para um tema cl\u00e1ssico<\/a>.<\/p>\n<p>Mas uma vez que voc\u00ea tenha um bom entendimento da <a href=\"https:\/\/developer.wordpress.org\/block-editor\/how-to-guides\/themes\/block-theme-overview\/#what-is-the-structure-of-a-block-theme\">estrutura de um tema de bloco<\/a>, voc\u00ea n\u00e3o ter\u00e1 dificuldade de criar um child theme para Twenty Twenty-Two ou qualquer outro tema de bloco.<\/p>\n<p>Ent\u00e3o vamos descobrir como personalizar o visual do seu site Twenty Twenty-Two.<\/p>\n<div><\/div><kinsta-auto-toc list-style=\"decimal\" selector=\"h3\" count-number=\"3\" sub-toc=\"true\"><\/kinsta-auto-toc>\n<h3>1. Criando um child theme para o Twenty Twenty-Two<\/h3>\n<p>Em seu diret\u00f3rio <strong>\/wp-content\/themes<\/strong>, <a href=\"https:\/\/developer.wordpress.org\/themes\/advanced-topics\/child-themes\/#1-create-a-child-theme-folder\">crie uma nova pasta<\/a> e nomeie o que voc\u00ea quiser (de acordo com <a href=\"https:\/\/codex.wordpress.org\/Theme_Development#Theme_Development_Standards\">os padr\u00f5es de desenvolvimento de temas<\/a>). Neste exemplo, n\u00f3s chamamos a pasta child theme de <em>twentytwentytwo-child<\/em>.<\/p>\n<p><a href=\"https:\/\/developer.wordpress.org\/themes\/advanced-topics\/child-themes\/#2-create-a-stylesheet-style-css\">Agora voc\u00ea precisa de<\/a> um arquivo <strong>style.css.<\/strong> Abra seu editor de c\u00f3digo favorito e crie a seguinte style sheet (folha de estilos):<\/p>\n<pre><code class=\"language-css\">\/*\nTheme Name: Twenty Twenty-Two Child\nTheme URI: https:\/\/example.com\/\nAuthor: Your name\nAuthor URI: https:\/\/example.com\/\nDescription: A child theme for TT2.\nRequires at least: 5.8\nTested up to: 5.9\nRequires PHP: 5.6\nVersion: 0.2\nLicense: GNU General Public License v2 or later\nLicense URI: http:\/\/www.gnu.org\/licenses\/gpl-2.0.html\nText Domain: twentytwentytwo-child\nTemplate: twentytwentytwo\nTags: one-column, custom-colors, custom-menu, custom-logo, editor-style, featured-images, full-site-editing, block-patterns, rtl-language-support, sticky-post, threaded-comments\n\nTwenty Twenty-Two Child WordPress Theme, (C) 2021 WordPress.org\nTwenty Twenty-Two Child is distributed under the terms of the GNU GPL.\n*\/<\/code><\/pre>\n<p>Como sempre, voc\u00ea pode editar os campos de acordo com suas necessidades.<\/p>\n<p>O tema de seu filho agora est\u00e1 dispon\u00edvel para visualiza\u00e7\u00e3o. Voc\u00ea pode ativ\u00e1-lo na tela <strong>Apar\u00eancia &gt; Temas<\/strong>\u00a0admin.<\/p>\n<h3>2. Personalizando configura\u00e7\u00f5es globais<\/h3>\n<p>Desde o WordPress 5.9, os child themes com um arquivo <strong>theme.json<\/strong> herdam as configura\u00e7\u00f5es do parent theme. Se o child theme do\u00a0<strong>theme.json<\/strong> define um conjunto de estilos, ent\u00e3o esses estilos se aplicam em cima dos estilos do parent theme.<\/p>\n<p>Ent\u00e3o n\u00f3s podemos criar um arquivo <strong>theme.json<\/strong> que inclui apenas um pequeno bloco personalizado de defini\u00e7\u00f5es de configura\u00e7\u00e3o e estilo ao inv\u00e9s de redefinir todas as nossas escolhas originais.<\/p>\n<h4>Como declarar uma paleta de cores personalizada<\/h4>\n<p>Ao construir um child theme para Twenty Twenty-Two, a tarefa mais f\u00e1cil \u00e9 substituir a paleta de cores. Tudo o que voc\u00ea precisa fazer \u00e9 definir uma nova paleta de cores no <strong>theme.json<\/strong> do child theme, como mostrado abaixo:<\/p>\n<pre><code class=\"language-json\">{\n\"version\": 2,\n\t\"settings\": {\n\t\t\"color\": {\n\t\t\t\"palette\": [\n\t\t\t\t{\n\t\t\t\t\t\"slug\": \"foreground\",\n\t\t\t\t\t\"color\": \"#FFFFFF\",\n\t\t\t\t\t\"name\": \"Foreground\"\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\t\"slug\": \"background\",\n\t\t\t\t\t\"color\": \"#001F29\",\n\t\t\t\t\t\"name\": \"Background\"\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\t\"slug\": \"primary\",\n\t\t\t\t\t\"color\": \"#D6FDFF\",\n\t\t\t\t\t\"name\": \"Primary\"\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\t\"slug\": \"secondary\",\n\t\t\t\t\t\"color\": \"#FDFCDC\",\n\t\t\t\t\t\"name\": \"Secondary\"\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\t\"slug\": \"tertiary\",\n\t\t\t\t\t\"color\": \"#FED9B7\",\n\t\t\t\t\t\"name\": \"Tertiary\"\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\t\"slug\": \"accent\",\n\t\t\t\t\t\"color\": \"#E94435\",\n\t\t\t\t\t\"name\": \"Accent\"\n\t\t\t\t}\n\t\t\t]\n\t\t}\n\t}\n}<\/code><\/pre>\n<p>Salve seu arquivo e volte para o editor do site. A paleta de cores definida acima deve ter substitu\u00eddo a paleta de cores padr\u00e3o do Twenty Twenty-Two.<\/p>\n<figure id=\"attachment_111460\" aria-describedby=\"caption-attachment-111460\" style=\"width: 2264px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-111460 size-full\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2021\/12\/child-theme-color-palette.jpg\" alt=\"Uma paleta de cores com tema infantil\" width=\"2264\" height=\"1076\"><figcaption id=\"caption-attachment-111460\" class=\"wp-caption-text\">Uma paleta de cores com child theme<\/figcaption><\/figure>\n<p>As cores ser\u00e3o <a href=\"https:\/\/developer.wordpress.org\/block-editor\/how-to-guides\/themes\/theme-support\/#block-color-palettes\">mostradas em ordem na pr\u00f3pria paleta<\/a>, e seus nomes devem seguir as <a href=\"https:\/\/fullsiteediting.com\/lessons\/theme-json-color-options\/#h-frequently-asked-questions\">melhores pr\u00e1ticas<\/a> e <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/issues\/29568\">conven\u00e7\u00f5es de nomenclatura discutidas no Github<\/a>.<\/p>\n<p>Voc\u00ea pode ler muito mais sobre as op\u00e7\u00f5es de cores do <strong>theme.json<\/strong> nesta <a href=\"https:\/\/fullsiteediting.com\/lessons\/theme-json-color-options\/\">vis\u00e3o aprofundada por Carolina Nymark<\/a>.<\/p>\n<h4>Como declarar os filtros personalizados duot\u00f4nicos<\/h4>\n<p>Voc\u00ea tamb\u00e9m pode substituir as cores padr\u00e3o duot\u00f4nicos pelo seu conjunto personalizado de filtros.<\/p>\n<p>Para fazer isso, simplesmente adicione o seguinte c\u00f3digo \u00e0s configura\u00e7\u00f5es do <strong>theme.json<\/strong> do seu child theme no mesmo n\u00edvel da propriedade <code>palette<\/code>:<\/p>\n<pre><code class=\"language-json\">{\n\"version\": 2,\n\t\"settings\": {\n\t\t\"color\": {\n\t\t\t\"palette\": [...],\n\t\t\t\"duotone\": [\n\t\t\t\t{\n\t\t\t\t\t\"colors\": [\n\t\t\t\t\t\t\"#001F29\",\n\t\t\t\t\t\t\"#FFFFFF\"\n\t\t\t\t\t],\n\t\t\t\t\t\"slug\": \"default-filter\",\n\t\t\t\t\t\"name\": \"Default filter\"\n\t\t\t\t}\n\t\t\t]\n\t\t}\n\t}\n}<\/code><\/pre>\n<p>Salve seu arquivo e verifique o resultado no editor de blocos. Voc\u00ea s\u00f3 deve ver um \u00fanico filtro duot\u00f4nico.<\/p>\n<figure id=\"attachment_111461\" aria-describedby=\"caption-attachment-111461\" style=\"width: 1564px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-111461 size-full\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2021\/12\/child-theme-duotone-filter.jpg\" alt=\"Um filtro duot\u00f4nico tem\u00e1tico infantil\" width=\"1564\" height=\"1122\"><figcaption id=\"caption-attachment-111461\" class=\"wp-caption-text\">Um filtro duot\u00f4nico no child theme<\/figcaption><\/figure>\n<h3>3. Personaliza\u00e7\u00e3o de estilos de bloco<\/h3>\n<p>Como mencionamos anteriormente, com o WordPress 5.9, voc\u00ea agora pode personalizar as configura\u00e7\u00f5es e estilos do <strong>theme.json<\/strong> a partir da interface Estilos globais.<\/p>\n<p>Os estilos de bloco podem ser personalizados a partir da interface Estilos globais <strong>somente se o bloco declarar suporte a funcionalidades espec\u00edficas<\/strong> no arquivo <strong>block.json<\/strong> correspondente <strong>.<\/strong> Mas voc\u00ea pode substituir as configura\u00e7\u00f5es padr\u00e3o de bloco no <strong>theme.json<\/strong> do seu child theme.<\/p>\n<p>Agora suponha que voc\u00ea queira substituir os estilos Post Title e Group block. Tudo o que voc\u00ea precisa fazer \u00e9 definir os estilos que voc\u00ea quer adicionar ou substituir, como mostrado abaixo:<\/p>\n<pre><code class=\"language-json\">{\n\"version\": 2,\n\t\"settings\": {...},\n\t\"styles\": {\n\t\t\"blocks\": {\n\t\t\t\"core\/post-title\": {\n\t\t\t\t\"typography\": {\n\t\t\t\t\t\"fontFamily\": \"Roboto,Oxygen-Sans,Ubuntu,Cantarell,\\\"Helvetica Neue\\\",sans-serif\"\n\t\t\t\t},\n\t\t\t\t\"color\": {\n\t\t\t\t\t\"background\": \"var(--wp--preset--color--tertiary)\"\n\t\t\t\t},\n\t\t\t\t\"spacing\": {\n\t\t\t\t\t\"padding\": \"var(--wp--custom--spacing--small)\"\n\t\t\t\t}\n\t\t\t},\n\t\t\t\"core\/group\": {\n\t\t\t\t\"spacing\": {\n\t\t\t\t\t\"margin\": {\n\t\t\t\t\t\t\"top\": \"0\",\n\t\t\t\t\t\t\"bottom\": \"0\"\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n}<\/code><\/pre>\n<p>No exemplo acima, mudamos a fam\u00edlia de fontes, a cor de fundo e os valores de padding para <code>core\/post-title<\/code>, assim como as margens superior e inferior para <code>core\/group<\/code>.<\/p>\n<p>A imagem abaixo mostra o resultado como seria no site p\u00fablico:<\/p>\n<figure id=\"attachment_111462\" aria-describedby=\"caption-attachment-111462\" style=\"width: 2264px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-111462 size-full\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2021\/12\/child-theme-styles-post-title.jpg\" alt=\"Um bloco de t\u00edtulo de postagem personalizado\" width=\"2264\" height=\"832\"><figcaption id=\"caption-attachment-111462\" class=\"wp-caption-text\">Um bloco de t\u00edtulo de artigo personalizado<\/figcaption><\/figure>\n<p>E \u00e9 tudo para a revis\u00e3o!<\/p>\n<p>Por enquanto, n\u00e3o vamos ir al\u00e9m em child themes, pois isso iria al\u00e9m do escopo deste artigo. Enquanto isso, voc\u00ea encontrar\u00e1 mais exemplos de <a href=\"https:\/\/github.com\/WordPress\/theme-experiments\/tree\/add\/tt2-child-themes\">Twenty Twenty-Two child themes<\/a> no Github.<\/p>\n\n<h2>Resumo<\/h2>\n<p>Enquanto d\u00e1vamos uma olhada mais de perto no novo tema padr\u00e3o do WordPress Twenty Twenty-Two e suas caracter\u00edsticas (que o tornam o tema padr\u00e3o mais flex\u00edvel j\u00e1 lan\u00e7ado), n\u00f3s revelamos a nova arquitetura de informa\u00e7\u00e3o introduzida com o WordPress 5.9. N\u00f3s at\u00e9 mesmo tivemos uma pr\u00e9via da nova interface Estilos globais.<\/p>\n<p>H\u00e1 muitas novidades interessantes a caminho, e parece claro que o novo ambiente de edi\u00e7\u00e3o est\u00e1 ficando mais robusto, confi\u00e1vel e funcional com o tempo.<\/p>\n<p>Enquanto muitas novas funcionalidades do WordPress est\u00e3o a caminho, outras est\u00e3o desaparecendo ou diminuindo de import\u00e2ncia. Muitos usu\u00e1rios est\u00e3o se perguntando o que vai acontecer com o <a href=\"https:\/\/kinqsta.com\/pt\/blog\/como-personalizar-tema-wordpress\/#customizing-your-theme-via-the-customizer\">Customizer<\/a> e como melhor manter a compatibilidade retroativa com os temas existentes.<\/p>\n<p>Entretanto, voc\u00ea n\u00e3o deve esperar saltar de repente de temas tradicionais para bloquear temas em um \u00fanico limite. N\u00f3s temos atualmente quatro tipos diferentes de temas para escolher:<\/p>\n<ul>\n<li><strong>Temas de blocos<\/strong>: Temas desenhados para o FSE<\/li>\n<li><strong>Temas universais<\/strong>: Temas que funcionam tanto com o Customizer como com o Editor do Site<\/li>\n<li><strong>Temas H\u00edbridos<\/strong>: Temas cl\u00e1ssicos que suportam caracter\u00edsticas FSE como <strong>theme.json<\/strong><\/li>\n<li><strong>Temas cl\u00e1ssicos<\/strong>: Temas com templates PHP, functions.php, etc.<\/li>\n<\/ul>\n<p>Portanto, n\u00e3o tema por enquanto &#8211; ainda h\u00e1 muitas solu\u00e7\u00f5es para escolher se voc\u00ea ainda n\u00e3o se sente pronto para mudar para temas de <em>blocos<\/em>.<\/p>\n<p><em>E agora \u00e9 com voc\u00ea! Voc\u00ea est\u00e1 pronto para dar o grande salto e come\u00e7ar a usar temas de blocos agora mesmo? Compartilhe seus pensamentos conosco nos coment\u00e1rios abaixo.<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Embora um pouco mais tarde do que o planejado originalmente, n\u00f3s estamos recebendo um novo tema padr\u00e3o do WordPress. Seu nome \u00e9 Twenty Twenty-Two! O novo &#8230;<\/p>\n","protected":false},"author":36,"featured_media":46024,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[584,236],"topic":[1036],"class_list":["post-46017","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","tag-twenty-twenty-two","tag-wordpress-themes","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>An\u00e1lise Detalhada do Twenty Twenty-Two e Temas de Blocos WordPress<\/title>\n<meta name=\"description\" content=\"Twenty Twenty-Two \u00e9 o tema padr\u00e3o de bloco sendo introduzido com o WordPress 5.9. Confira todas as suas principais caracter\u00edsticas neste guia detalhado.\" \/>\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\/tema-twenty-twenty-two\/\" \/>\n<meta property=\"og:locale\" content=\"pt_PT\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"An\u00e1lise Detalhada do Twenty Twenty-Two e Temas de Blocos WordPress\" \/>\n<meta property=\"og:description\" content=\"Twenty Twenty-Two \u00e9 o tema padr\u00e3o de bloco sendo introduzido com o WordPress 5.9. Confira todas as suas principais caracter\u00edsticas neste guia detalhado.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinqsta.com\/pt\/blog\/tema-twenty-twenty-two\/\" \/>\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=\"2022-01-04T12:10:43+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-08-22T09:00:52+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinqsta.com\/pt\/wp-content\/uploads\/sites\/3\/2021\/12\/temas-twenty-twenty-two-1.jpeg\" \/>\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\/jpeg\" \/>\n<meta name=\"author\" content=\"Carlo Daniele\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"Twenty Twenty-Two \u00e9 o tema padr\u00e3o de bloco sendo introduzido com o WordPress 5.9. Confira todas as suas principais caracter\u00edsticas neste guia detalhado.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinqsta.com\/pt\/wp-content\/uploads\/sites\/3\/2021\/12\/temas-twenty-twenty-two-1.jpeg\" \/>\n<meta name=\"twitter:creator\" content=\"@carlodaniele\" \/>\n<meta name=\"twitter:site\" content=\"@kinsta_pt\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Carlo Daniele\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tempo estimado de leitura\" \/>\n\t<meta name=\"twitter:data2\" content=\"27 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinqsta.com\/pt\/blog\/tema-twenty-twenty-two\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinqsta.com\/pt\/blog\/tema-twenty-twenty-two\/\"},\"author\":{\"name\":\"Carlo Daniele\",\"@id\":\"https:\/\/kinqsta.com\/pt\/#\/schema\/person\/962dde02ea6f5df089b5d8d0853bbc63\"},\"headline\":\"An\u00e1lise Detalhada do Twenty Twenty-Two e Temas de Blocos WordPress\",\"datePublished\":\"2022-01-04T12:10:43+00:00\",\"dateModified\":\"2023-08-22T09:00:52+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinqsta.com\/pt\/blog\/tema-twenty-twenty-two\/\"},\"wordCount\":4300,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinqsta.com\/pt\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinqsta.com\/pt\/blog\/tema-twenty-twenty-two\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinqsta.com\/pt\/wp-content\/uploads\/sites\/3\/2021\/12\/temas-twenty-twenty-two-1.jpeg\",\"keywords\":[\"Twenty Twenty-Two\",\"wordpress themes\"],\"inLanguage\":\"pt-PT\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinqsta.com\/pt\/blog\/tema-twenty-twenty-two\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinqsta.com\/pt\/blog\/tema-twenty-twenty-two\/\",\"url\":\"https:\/\/kinqsta.com\/pt\/blog\/tema-twenty-twenty-two\/\",\"name\":\"An\u00e1lise Detalhada do Twenty Twenty-Two e Temas de Blocos WordPress\",\"isPartOf\":{\"@id\":\"https:\/\/kinqsta.com\/pt\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinqsta.com\/pt\/blog\/tema-twenty-twenty-two\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinqsta.com\/pt\/blog\/tema-twenty-twenty-two\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinqsta.com\/pt\/wp-content\/uploads\/sites\/3\/2021\/12\/temas-twenty-twenty-two-1.jpeg\",\"datePublished\":\"2022-01-04T12:10:43+00:00\",\"dateModified\":\"2023-08-22T09:00:52+00:00\",\"description\":\"Twenty Twenty-Two \u00e9 o tema padr\u00e3o de bloco sendo introduzido com o WordPress 5.9. Confira todas as suas principais caracter\u00edsticas neste guia detalhado.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinqsta.com\/pt\/blog\/tema-twenty-twenty-two\/#breadcrumb\"},\"inLanguage\":\"pt-PT\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinqsta.com\/pt\/blog\/tema-twenty-twenty-two\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-PT\",\"@id\":\"https:\/\/kinqsta.com\/pt\/blog\/tema-twenty-twenty-two\/#primaryimage\",\"url\":\"https:\/\/kinqsta.com\/pt\/wp-content\/uploads\/sites\/3\/2021\/12\/temas-twenty-twenty-two-1.jpeg\",\"contentUrl\":\"https:\/\/kinqsta.com\/pt\/wp-content\/uploads\/sites\/3\/2021\/12\/temas-twenty-twenty-two-1.jpeg\",\"width\":1460,\"height\":730,\"caption\":\"Um Mergulho Profundo nos Temas Twenty Twenty-Two e Blocos WordPress\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinqsta.com\/pt\/blog\/tema-twenty-twenty-two\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinqsta.com\/pt\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Temas WordPress\",\"item\":\"https:\/\/kinqsta.com\/pt\/topicos\/temas-wordpress\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"An\u00e1lise Detalhada do Twenty Twenty-Two e Temas de Blocos WordPress\"}]},{\"@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\/962dde02ea6f5df089b5d8d0853bbc63\",\"name\":\"Carlo Daniele\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-PT\",\"@id\":\"https:\/\/kinqsta.com\/pt\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/429e5568f88110fd9a409b84cb22197e?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/429e5568f88110fd9a409b84cb22197e?s=96&d=mm&r=g\",\"caption\":\"Carlo Daniele\"},\"description\":\"Carlo is a passionate lover of webdesign and front-end development. He has been playing with WordPress for more than 20 years, also in collaboration with Italian and European universities and educational institutions. He has written hundreds of articles and guides about WordPress, published both on Italian and international websites, as well as on printed magazines. You can find him on LinkedIn.\",\"sameAs\":[\"https:\/\/frammentidicodice.com\/\",\"https:\/\/x.com\/carlodaniele\"],\"url\":\"https:\/\/kinqsta.com\/pt\/blog\/author\/carlodaniele\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"An\u00e1lise Detalhada do Twenty Twenty-Two e Temas de Blocos WordPress","description":"Twenty Twenty-Two \u00e9 o tema padr\u00e3o de bloco sendo introduzido com o WordPress 5.9. Confira todas as suas principais caracter\u00edsticas neste guia detalhado.","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\/tema-twenty-twenty-two\/","og_locale":"pt_PT","og_type":"article","og_title":"An\u00e1lise Detalhada do Twenty Twenty-Two e Temas de Blocos WordPress","og_description":"Twenty Twenty-Two \u00e9 o tema padr\u00e3o de bloco sendo introduzido com o WordPress 5.9. Confira todas as suas principais caracter\u00edsticas neste guia detalhado.","og_url":"https:\/\/kinqsta.com\/pt\/blog\/tema-twenty-twenty-two\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/kinstapt\/","article_published_time":"2022-01-04T12:10:43+00:00","article_modified_time":"2023-08-22T09:00:52+00:00","og_image":[{"width":1460,"height":730,"url":"https:\/\/kinqsta.com\/pt\/wp-content\/uploads\/sites\/3\/2021\/12\/temas-twenty-twenty-two-1.jpeg","type":"image\/jpeg"}],"author":"Carlo Daniele","twitter_card":"summary_large_image","twitter_description":"Twenty Twenty-Two \u00e9 o tema padr\u00e3o de bloco sendo introduzido com o WordPress 5.9. Confira todas as suas principais caracter\u00edsticas neste guia detalhado.","twitter_image":"https:\/\/kinqsta.com\/pt\/wp-content\/uploads\/sites\/3\/2021\/12\/temas-twenty-twenty-two-1.jpeg","twitter_creator":"@carlodaniele","twitter_site":"@kinsta_pt","twitter_misc":{"Escrito por":"Carlo Daniele","Tempo estimado de leitura":"27 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinqsta.com\/pt\/blog\/tema-twenty-twenty-two\/#article","isPartOf":{"@id":"https:\/\/kinqsta.com\/pt\/blog\/tema-twenty-twenty-two\/"},"author":{"name":"Carlo Daniele","@id":"https:\/\/kinqsta.com\/pt\/#\/schema\/person\/962dde02ea6f5df089b5d8d0853bbc63"},"headline":"An\u00e1lise Detalhada do Twenty Twenty-Two e Temas de Blocos WordPress","datePublished":"2022-01-04T12:10:43+00:00","dateModified":"2023-08-22T09:00:52+00:00","mainEntityOfPage":{"@id":"https:\/\/kinqsta.com\/pt\/blog\/tema-twenty-twenty-two\/"},"wordCount":4300,"commentCount":0,"publisher":{"@id":"https:\/\/kinqsta.com\/pt\/#organization"},"image":{"@id":"https:\/\/kinqsta.com\/pt\/blog\/tema-twenty-twenty-two\/#primaryimage"},"thumbnailUrl":"https:\/\/kinqsta.com\/pt\/wp-content\/uploads\/sites\/3\/2021\/12\/temas-twenty-twenty-two-1.jpeg","keywords":["Twenty Twenty-Two","wordpress themes"],"inLanguage":"pt-PT","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinqsta.com\/pt\/blog\/tema-twenty-twenty-two\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinqsta.com\/pt\/blog\/tema-twenty-twenty-two\/","url":"https:\/\/kinqsta.com\/pt\/blog\/tema-twenty-twenty-two\/","name":"An\u00e1lise Detalhada do Twenty Twenty-Two e Temas de Blocos WordPress","isPartOf":{"@id":"https:\/\/kinqsta.com\/pt\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinqsta.com\/pt\/blog\/tema-twenty-twenty-two\/#primaryimage"},"image":{"@id":"https:\/\/kinqsta.com\/pt\/blog\/tema-twenty-twenty-two\/#primaryimage"},"thumbnailUrl":"https:\/\/kinqsta.com\/pt\/wp-content\/uploads\/sites\/3\/2021\/12\/temas-twenty-twenty-two-1.jpeg","datePublished":"2022-01-04T12:10:43+00:00","dateModified":"2023-08-22T09:00:52+00:00","description":"Twenty Twenty-Two \u00e9 o tema padr\u00e3o de bloco sendo introduzido com o WordPress 5.9. Confira todas as suas principais caracter\u00edsticas neste guia detalhado.","breadcrumb":{"@id":"https:\/\/kinqsta.com\/pt\/blog\/tema-twenty-twenty-two\/#breadcrumb"},"inLanguage":"pt-PT","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinqsta.com\/pt\/blog\/tema-twenty-twenty-two\/"]}]},{"@type":"ImageObject","inLanguage":"pt-PT","@id":"https:\/\/kinqsta.com\/pt\/blog\/tema-twenty-twenty-two\/#primaryimage","url":"https:\/\/kinqsta.com\/pt\/wp-content\/uploads\/sites\/3\/2021\/12\/temas-twenty-twenty-two-1.jpeg","contentUrl":"https:\/\/kinqsta.com\/pt\/wp-content\/uploads\/sites\/3\/2021\/12\/temas-twenty-twenty-two-1.jpeg","width":1460,"height":730,"caption":"Um Mergulho Profundo nos Temas Twenty Twenty-Two e Blocos WordPress"},{"@type":"BreadcrumbList","@id":"https:\/\/kinqsta.com\/pt\/blog\/tema-twenty-twenty-two\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinqsta.com\/pt\/"},{"@type":"ListItem","position":2,"name":"Temas WordPress","item":"https:\/\/kinqsta.com\/pt\/topicos\/temas-wordpress\/"},{"@type":"ListItem","position":3,"name":"An\u00e1lise Detalhada do Twenty Twenty-Two e Temas de Blocos WordPress"}]},{"@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\/962dde02ea6f5df089b5d8d0853bbc63","name":"Carlo Daniele","image":{"@type":"ImageObject","inLanguage":"pt-PT","@id":"https:\/\/kinqsta.com\/pt\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/429e5568f88110fd9a409b84cb22197e?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/429e5568f88110fd9a409b84cb22197e?s=96&d=mm&r=g","caption":"Carlo Daniele"},"description":"Carlo is a passionate lover of webdesign and front-end development. He has been playing with WordPress for more than 20 years, also in collaboration with Italian and European universities and educational institutions. He has written hundreds of articles and guides about WordPress, published both on Italian and international websites, as well as on printed magazines. You can find him on LinkedIn.","sameAs":["https:\/\/frammentidicodice.com\/","https:\/\/x.com\/carlodaniele"],"url":"https:\/\/kinqsta.com\/pt\/blog\/author\/carlodaniele\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinqsta.com\/pt\/wp-json\/wp\/v2\/posts\/46017","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\/36"}],"replies":[{"embeddable":true,"href":"https:\/\/kinqsta.com\/pt\/wp-json\/wp\/v2\/comments?post=46017"}],"version-history":[{"count":12,"href":"https:\/\/kinqsta.com\/pt\/wp-json\/wp\/v2\/posts\/46017\/revisions"}],"predecessor-version":[{"id":50298,"href":"https:\/\/kinqsta.com\/pt\/wp-json\/wp\/v2\/posts\/46017\/revisions\/50298"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinqsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/46017\/translations\/en"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinqsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/46017\/translations\/de"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinqsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/46017\/translations\/fr"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinqsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/46017\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinqsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/46017\/translations\/pt"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinqsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/46017\/translations\/es"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinqsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/46017\/translations\/nl"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinqsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/46017\/translations\/jp"},{"embeddable":true,"hreflang":"sv","title":"Swedish","href":"https:\/\/kinqsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/46017\/translations\/se"},{"embeddable":true,"hreflang":"da","title":"Danish","href":"https:\/\/kinqsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/46017\/translations\/dk"},{"href":"https:\/\/kinqsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/46017\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinqsta.com\/pt\/wp-json\/wp\/v2\/media\/46024"}],"wp:attachment":[{"href":"https:\/\/kinqsta.com\/pt\/wp-json\/wp\/v2\/media?parent=46017"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinqsta.com\/pt\/wp-json\/wp\/v2\/tags?post=46017"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinqsta.com\/pt\/wp-json\/wp\/v2\/topic?post=46017"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}