Um mergulho profundo em Twenty Twenty-Two e WordPress Block Themes

Publicados: 2021-12-20

Embora um pouco mais tarde do que o planejado originalmente, estamos recebendo um novo tema padrão do WordPress. Seu nome é vinte e vinte e dois!

O novo tema padrão do WordPress vem com a próxima versão do WordPress 5.9. Estávamos curiosos para saber mais sobre o novo tema, então instalamos e testamos o Twenty Twenty-Two em um ambiente de desenvolvimento local executando o WordPress 5.9.

Mostraremos nossos resultados antes de encerrar nossos pensamentos para trazer uma visão geral detalhada dos prós e contras do novo tema do WordPress.

Vinte e vinte e dois prévia — Uma prévia do Twenty Twenty-Two, o novo tema padrão do WordPress (Fonte da imagem: WordPress.org)

Twenty Twenty-Two foi projetado para ser o tema padrão mais flexível, leve e personalizável de todos os tempos. Ele fornece um ótimo playground para testar blocos, padrões e modelos.

Sendo um tema de bloco, ajudará você a explorar melhor a Edição Completa do Site, Estilos Globais, Blocos de Navegação e as novas galerias de imagens, que são os recursos mais esperados do WordPress 5.9.

Temos que dizer imediatamente que Twenty Twenty-Two é o primeiro tema de bloco padrão !

Um dos objetivos mais ambiciosos do novo tema é capacitar os usuários . Com tantos padrões e modelos disponíveis, os usuários podem criar layouts complexos com apenas alguns cliques. O resto é apenas personalização de estilo.

Do ponto de vista técnico, escrever sobre o Twenty Twenty-Two não é muito diferente de escrever sobre os recursos mais recentes e poderosos que vêm com o WordPress 5.9. Mas o Twenty Twenty-Two nos oferece uma lupa para melhor apreciar os novos recursos de edição do site e ter uma ideia melhor do futuro da plataforma.

Então, aqui estamos nós para apresentá-lo ao novo tema.

Primeiro, exploraremos o novo fluxo de edição de sites que os usuários experimentarão com o WordPress 5.9 e o Twenty Twenty-Two.

Depois disso, vamos mergulhar nos recursos do tema do bloco principal implementados no Twenty Twenty-Two. Você conhecerá Global Styles , padrões de bloco , templates e peças de template .

Mas há muito mais a dizer sobre temas de bloco Twenty Twenty-Two e WordPress. Assim, como um capítulo de bônus, forneceremos uma visão geral rápida de como estender os recursos do Twenty Twenty-Two aproveitando o arquivo theme.json .

Aqui está uma primeira olhada no próximo tema padrão do WordPress! Estou animado por co-liderar ao lado de @jffng, e nós dois esperamos que você contribua e/ou apenas goste de usá-lo! https://t.co/covjrpgFIO
— kjellr (@kjellr) 6 de outubro de 2021

Vamos direto ao trabalho e mergulhar no novo tema padrão Twenty Twenty-Two WordPress.

Twenty Twenty-Two traz um novo fluxo de edição de site

Vários recursos de edição completa do site vêm para o núcleo do WordPress 5.9. Os proprietários de sites que usam a versão mais recente do WordPress com um tema de bloco como o Twenty Twenty-Two instalado em breve poderão:

Crie e edite postagens e páginas usando mais blocos e padrões
Personalize as configurações e estilos definidos no arquivo theme.json por meio da interface Global Styles
Crie e edite modelos para páginas e postagens
Crie e edite partes de modelo para cabeçalho, rodapé e outras áreas de modelo

Com todos esses recursos mesclados ao núcleo, os principais colaboradores do WordPress vêm discutindo a evolução da arquitetura da informação e redesenhando todo o fluxo de edição do site.

A primeira coisa que você pode notar depois de ativar o Twenty Twenty-Two é que o ponto de entrada para o editor do site não está mais localizado no menu principal do painel do WordPress, mas foi movido para o menu Aparência .

Menu do editor — O novo menu Aparência no WordPress 5.9

Trazer os recursos de edição de modelo e estilo no mesmo menu Aparência deve simplificar a experiência de edição. Deve facilitar a compreensão de que os recursos que você está acessando estão relacionados à apresentação de suas páginas.

Pronto para mergulhar no novo tema Twenty Twenty-Two? Não procure mais Clique para Tweetar

O item de menu Editor abre o modelo de página inicial do site. Dependendo das suas configurações de leitura, esta pode ser sua página de postagens mais recentes ou uma página estática.

Editor do site no Twenty Twenty-Two — O editor do site no WordPress 5.9 com Twenty Twenty-Two

Agora, clicar no ícone do WordPress no canto superior esquerdo exibe um novo menu de navegação do editor do site, incluindo três itens de menu: Site , Templates e Template Parts .

Vamos olhar mais de perto.

A opção Site abre o modelo de página inicial (artigos de blog mais recentes ou página inicial estática).

No item de menu Modelos , você obterá uma lista dos modelos disponíveis. Você pode clicar em qualquer modelo na lista para iniciá-lo no editor.

No momento da redação deste artigo, Twenty Twenty-Two fornece 11 modelos.

Clicar no ícone de reticências ( ︙ ) à direita permite limpar suas personalizações.

Ao contrário dos modelos de tema, os modelos personalizados só podem ser renomeados ou removidos (mas você pode editar modelos personalizados no editor de postagem).

Renomeie ou exclua modelos personalizados — Renomear/excluir modelos personalizados

O item de menu Partes do modelo lista as partes do modelo disponíveis que você pode abrir no editor para suas personalizações.

Você encontrará quatro partes do modelo adicionadas ao Twenty Twenty-Two por padrão. Passar o cursor sobre um modelo modificado exibe uma dica de ferramenta informando que o modelo foi personalizado.

Você pode limpar essas personalizações clicando no ícone de reticências ( ︙ ) à direita.

Limpar personalizações de peças de modelo

Editando modelos e peças de modelo

O Editor fornece a interface para personalizar a estrutura de seus modelos e partes do modelo.

Aqui você pode facilmente adicionar ou editar blocos e padrões, e suas alterações serão aplicadas automaticamente a todas as páginas que usam esse modelo.

A imagem abaixo mostra o modelo de página 404 no editor. É um modelo bastante simples, incluindo apenas um título, um parágrafo e uma caixa de pesquisa. Ainda assim, isso nos dá uma boa compreensão de como a interface do usuário funciona.

modelo de bloco 404 — Modelo de bloco 404 do Twenty Twenty-Two no editor de modelo

Aqui, você pode fazer edições e personalizar modelos para atender melhor às suas necessidades. Por exemplo, você pode adicionar um padrão Grade de postagens de imagem para aumentar o envolvimento de seus visitantes e convidá-los a navegar pelo conteúdo do seu site.

grade de postagens de imagem — Personalizando o modelo de bloco 404 do Twenty Twenty-Two

A lista suspensa do cabeçalho na parte superior do editor de modelos exibe uma lista das áreas de modelos disponíveis. A mesma lista aparece na guia Modelo na barra lateral Configurações .

Ao clicar em qualquer área do modelo (por exemplo, Cabeçalho), você será levado diretamente para a parte do modelo que deseja editar.

Se você clicar no ícone de reticências à direita, acessará o editor de peças do modelo Isolado .

O editor de peças de modelo isolado — O ícone de reticências inicia o editor de peças de modelo isolado

O editor de peças do modelo também fornece um par de alças arrastáveis, permitindo que você verifique como o modelo se comporta em diferentes resoluções de tela.

Ajustando a dimensão de visualização da peça do modelo

Quando estiver satisfeito com suas alterações, salve suas edições e volte ao editor principal de modelos para verificar o resultado final.

Se você quiser se aprofundar na nova arquitetura de informações, confira os seguintes artigos:

Conceitos de IA de edição de site: como exibir e acessar novos recursos
Conceitos de edição de sites iA – Parte 2

Vinte e vinte e dois em sua essência: uma visão geral rápida do theme.json

Para entender completamente como Twenty Twenty-Two e temas de bloco (como Bricksy) funcionam, vamos dar uma olhada na nova configuração de tema e mecanismo de estilo baseado no arquivo theme.json .

Introduzido com o WordPress 5.8, esse novo mecanismo permite que os desenvolvedores de temas configurem o editor e adicionem suporte a recursos a partir de um ponto de configuração central.

No Twenty Twenty-Two, o arquivo theme.json tem a seguinte estrutura:

 { "version": 2, "settings": {}, "styles": {}, "customTemplates": {}, "templateParts": {} }

Vamos dar uma olhada rápida em cada seção.

Versão

O campo de version descreve a versão de especificação, que atualmente é 2 .

Definições

A seção de settings define as configurações no nível global ou de bloco. As configurações definidas no nível superior afetam todos os blocos, mas os blocos podem substituir individualmente as configurações globais. No Twenty Twenty-Two você encontrará as seguintes configurações:

 { "settings": { "appearanceTools": true, "color": { "duotone": [...], "gradients": [...], "palette": [...] }, "custom": {...}, "spacing": {...}, "typography": { "dropCap": false, "fontFamilies": [...], "fontSizes": [...] }, "layout": {...} } }

Os padrões de configurações são chamados de predefinições e são usados para gerar propriedades personalizadas CSS e nomes de classes com base em uma convenção de nomenclatura específica:

Propriedade personalizada CSS: --wp--preset--{preset-category}--{preset-slug}
Nome da classe CSS: .has-{preset-slug}-{preset-category}

Depois que um tema tiver definido suas predefinições, as propriedades personalizadas de CSS correspondentes podem ser usadas para estilizar blocos e elementos na seção de styles .

Estilos

A seção de styles é onde os temas definem os estilos padrão de bloco e elemento. Veja, por exemplo, os seguintes estilos Twenty Twenty-Two para o bloco Button principal:

 { "version": 2, "styles": { "blocks": { "core/button": { "border": { "radius": "0" }, "color": { "background": "var(--wp--preset--color--primary)", "text": "var(--wp--preset--color--background)" }, "typography": { "fontSize": "var(--wp--preset--typography--font-size--normal)" } } } } }

Você notará as propriedades personalizadas CSS usadas nas declarações de propriedade.

Modelos personalizados

A seção customTemplates é onde um tema declara seus modelos personalizados. Os campos de name e title são obrigatórios. Os temas também podem declarar qual tipo de postagem pode usar o modelo definindo a propriedade postTypes .

Twenty Twenty-Two fornece quatro modelos personalizados:

 { "version": 2, "customTemplates": [ { "name": "blank", "title": "Blank", "postTypes": [ "page", "post" ] }, { "name": "page-large-header", "title": "Page (Large Header)", "postTypes": [ "page" ] }, { "name": "single-no-separators", "title": "Single Post (No Separators)", "postTypes": [ "post" ] }, { "name": "page-no-separators", "title": "Page (No Separators)", "postTypes": [ "page" ] } ] }

Você encontrará os arquivos .html correspondentes na pasta block-templates .

pasta de modelos de bloco tt2 — Pasta **de templates de blocos** do Twenty Twenty-Two

Peças do modelo

A seção templateParts inclui definições de peças de template:

 { "version": 2, "templateParts": [ { "name": "header", "title": "Header", "area": "header" }, { "name": "header-large-dark", "title": "Header (Dark, large)", "area": "header" }, { "name": "header-small-dark", "title": "Header (Dark, small)", "area": "header" }, { "name": "footer", "title": "Footer", "area": "footer" } ] }

Os campos de name e title são obrigatórios. Os temas também podem declarar um termo de area , onde a parte do template será renderizada no editor.

Os arquivos .html de peças de modelo estão localizados na pasta de peças de modelo .

Agora que você sabe mais sobre o theme.json do Twenty Twenty-Two, podemos explorar mais detalhadamente os recursos do tema e a nova interface de edição.

Vamos mergulhar nos estilos globais do Twenty Twenty-Two .

Estilos globais em vinte e vinte e dois

Se você olhar para Twenty Twenty-Two' style.css, você pode se surpreender ao notar que ele contém um número mínimo de declarações CSS. A razão é que os estilos são declarados no arquivo theme.json em temas baseados em blocos .

O WordPress 5.9 trará as coisas um passo adiante, introduzindo um novo recurso que permite que os usuários do tema de bloco personalizem a aparência dos elementos do site a partir de uma interface de usuário chamada Global Styles.

A interface de Estilos Globais pode ser acessada a partir do novo ícone Estilos localizado no canto superior direito do Editor (veja também A Interface de Estilos Globais).

Clicar nesse ícone exibe uma nova barra lateral de Estilos , incluindo três painéis separados:

Um painel de visualização , mostrando uma visualização de suas personalizações
Um painel Estilos Globais que fornece acesso a grupos específicos de controles para Tipografia , Cores e Layout
Um item Blocos que fornece acesso às configurações de estilo no nível do bloco

Paleta de cores Twenty Twenty-Two's

O painel Cores pode ajudá-lo a editar as paletas disponíveis e atribuir ou alterar cores para Fundo , Texto ou Links .

No painel Paleta , você pode personalizar as paletas Tema ou Padrão e até criar sua paleta personalizada.

Configurações de cores TT2 — Configurações de cores em Twenty Twenty-Two

Você já encontrou o código que gera os controles de cores?

Caso contrário, abra o theme.json do Twenty Twenty-Two em seu editor de código favorito. Você encontrará as seguintes declarações de paleta de cores:

 { "version": 2, "settings": { "color": { "palette": [ { "slug": "foreground", "color": "#000000", "name": "Foreground" }, { "slug": "background", "color": "#ffffff", "name": "Background" }, { "slug": "primary", "color": "#1a4548", "name": "Primary" }, { "slug": "secondary", "color": "#ffe2c7", "name": "Secondary" }, { "slug": "tertiary", "color": "#F6F6F6", "name": "Tertiary" } ] } } }

A imagem abaixo mostra como o código acima corresponde à paleta de cores do Twenty Twenty-Two.

paleta de cores tt2 — Paleta de cores do Twenty Twenty-Two

Agora vamos supor que você deseja alterar a cor de fundo padrão para um bloco específico. Escolher uma cor diferente para o plano de fundo do bloco simplesmente atribuirá uma variável CSS diferente à propriedade background-color do elemento. A imagem abaixo fornece um exemplo disso:

Propriedade personalizada TT2 — A cor primária de Twenty Twenty-Two usada como cor de fundo

E isso é tudo! Você não precisará adicionar uma única linha de código CSS personalizado ao Personalizador ou criar um tema filho para isso.

Mas vamos continuar explorando os estilos globais do Twenty Twenty-Two com alguns exemplos adicionais.

Configurações de tipografia

O painel Tipografia é onde você pode personalizar os estilos de tipografia para os elementos Texto e Links do seu site em nível global.

Cada item fornece acesso a um grupo de controles para você personalizar a família da fonte, o tamanho e a altura da linha.

Configurações de tipografia TT2 — Configurações de tipografia em Twenty Twenty-Two

Você está se perguntando qual código gera esses controles?

Abra o theme.json do Twenty Twenty-Two e encontre a seção de typography . Você verá as seguintes configurações:

 { "version": 1, "settings": { "appearanceTools": true, "typography": { "dropCap": false, "fontFamilies": [ { "fontFamily": "-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Oxygen-Sans,Ubuntu,Cantarell,\"Helvetica Neue\",sans-serif", "name": "System Font", "slug": "system-font" }, { "fontFamily": "\"Source Serif Pro\", serif", "name": "Source Serif Pro", "slug": "source-serif-pro" } ], "fontSizes": [ { "name": "Small", "size": "1rem", "slug": "small" }, { "name": "Normal", "size": "1.125rem", "slug": "normal" }, { "name": "Medium", "size": "1.75rem", "slug": "medium" }, { "name": "Large", "size": "clamp(1.75rem, 3vw, 2.25rem)", "slug": "large" }, { "name": "Huge", "size": "clamp(2.5rem, 4vw, 3rem)", "slug": "huge" } ] }, }

Você pode esperar ver duas famílias de fontes e cinco tamanhos de fonte no código acima. E você teria adivinhado certo.

Veja como o código acima se traduz nas configurações de tipografia de estilos globais:

família de fontes e tamanho da fonte em TT2 — Estilos de tipografia em Twenty Twenty-Two

Você pode adivinhar qual configuração gera o controle de altura da linha . No Twenty Twenty-Two, você não encontrará uma configuração específica para isso porque ela é habilitada pela propriedade appearanceTools , que é um atalho para várias declarações de configuração (veja a próxima seção).

Ferramentas de layout e aparência

O último elemento na barra lateral Estilos Globais é o Layout . No momento da redação deste artigo, ele inclui apenas um controle de padding .

Configurações de layout no Twenty Twenty-Two

No Twenty Twenty-Two, o painel Layout é habilitado pela propriedade de configuração appearanceTools , um booleano que pode ser usado para habilitar várias configurações ao mesmo tempo:

 { "settings": { "appearanceTools": true } }

"appearanceTools": true simplesmente substitui o seguinte bloco de declarações:

 { 'settings': { 'border': { 'color': true, 'radius': true, 'style': true, 'width': true }, 'color': { 'link': true }, 'spacing': { 'blockGap': true, 'margin': true, 'padding': true }, 'typography': { 'lineHeight': true } } }

OK — agora você espera que entenda como as configurações declaradas no arquivo theme.json correspondem aos controles de Estilos Globais correspondentes.

Ainda falta uma peça do nosso quebra-cabeça para obter uma visão completa do novo tema padrão do WordPress: padrões de bloco .

Vinte e vinte e dois padrões de blocos

Pode-se dizer que Twenty Twenty-Two é principalmente uma coleção de padrões – e praticamente é. No Twenty Twenty-Two, você encontrará toneladas de padrões de blocos prontos para usar que você pode escolher para construir estruturas incríveis e imprevisíveis de blocos aninhados para suas páginas da web.

O termo-chave aqui é empoderamento do usuário . E isso se encaixa porque, com padrões de blocos, você pode construir todo tipo de coisa, desde um portfólio atraente até um site promocional de página única, mesmo que você não tenha nenhum conhecimento de HTML ou CSS!

E o WordPress 5.9 traz melhorias significativas para o sistema de padrões com o novo Pattern Explorer, uma ferramenta que permite navegar por padrões em um modal de tela cheia.

Precisa de hospedagem extremamente rápida, segura e amigável ao desenvolvedor para os sites de seus clientes? Kinsta é construído com os desenvolvedores do WordPress em mente e fornece muitas ferramentas e um painel poderoso. Confira nossos planos

O Explorador de Padrões em Vinte e Vinte e Dois

A nova ferramenta também permite que você importe padrões de bloco de maneira rápida e fácil diretamente do Diretório de padrões. Isso abre novas possibilidades para usuários e desenvolvedores do WordPress, portanto, seu uso provavelmente aumentará consideravelmente no futuro.

Twenty Twenty-Two inclui muitos padrões (mais de 65) em cinco categorias.

Vinte e vinte e duas categorias de padrões

Este conjunto sólido de padrões combina perfeitamente com modelos e peças de modelo que vêm com o novo tema padrão, proporcionando uma experiência de edição verdadeiramente incrível.

Se você ainda não teve a chance de experimentar padrões de blocos, mostraremos por que eles são considerados ferramentas tão poderosas com um exemplo simples.

Suponha que você queira remover o rodapé padrão dos modelos Index e Single Post e substituí-lo por um padrão de bloco Twenty Twenty-Two diferente.

Inicie o Editor do site no menu Aparência ou no botão da barra de ferramentas frontend do WordPress para personalizar o modelo de índice.

Clique no botão Índice para exibir o menu suspenso de cabeçalho mostrando a lista de áreas de modelo disponíveis na página. Clique no botão de reticências ao lado de Rodapé e depois em Editar Rodapé .

Como mencionado acima, isso iniciará o editor de partes do modelo isolado.

Editor de peças de modelo isolado — O rodapé padrão Twenty Twenty-Two no editor de peças de modelo isolado

Agora abra o bloco de inserção e clique em Patterns .

Inicie a nova ferramenta Pattern Explorer , selecione a categoria Twenty Twenty-Two Footers e escolha o rodapé de sua escolha.

O explorador de padrões em Twenty Twenty-Two

Agora adicione e edite os blocos de acordo com suas necessidades.

Editando o rodapé no editor de peças de modelo isolado

Salve o cabeçalho e verifique novamente seu site quando estiver satisfeito com suas alterações.

A imagem abaixo compara três modelos (Index, Single Post e Single Post sem separadores) com diferentes personalizações de cabeçalho e rodapé:

Personalizações de cabeçalho e rodapé comparadas em diferentes modelos Twenty Twenty-Two

Estendendo vinte e vinte e dois com um tema infantil

Criar um tema filho para um tema de bloco é bem diferente de criar um tema filho para um tema clássico.

Mas uma vez que você tenha uma boa compreensão da estrutura de um tema de bloco, você não achará difícil criar um tema filho para Twenty Twenty-Two ou qualquer outro tema de bloco.

Então, vamos descobrir como personalizar a aparência do seu site baseado no Twenty Twenty-Two.

1. Configurando um tema filho para vinte e vinte e dois

Em seu diretório /wp-content/themes , crie uma nova pasta e nomeie-a como quiser (de acordo com os padrões de desenvolvimento de temas). Neste exemplo, chamamos a pasta do tema filho twentytwentytwo-child .

Agora você precisa de um arquivo style.css . Abra seu editor de código favorito e crie a seguinte folha de estilo:

 /* Theme Name: Twenty Twenty-Two Child Theme URI: https://example.com/ Author: Your name Author URI: https://example.com/ Description: A child theme for TT2. Requires at least: 5.8 Tested up to: 5.9 Requires PHP: 5.6 Version: 0.2 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: twentytwentytwo-child Template: twentytwentytwo Tags: one-column, custom-colors, custom-menu, custom-logo, editor-style, featured-images, full-site-editing, block-patterns, rtl-language-support, sticky-post, threaded-comments Twenty Twenty-Two Child WordPress Theme, (C) 2021 WordPress.org Twenty Twenty-Two Child is distributed under the terms of the GNU GPL. */

Como sempre, você pode editar os campos de acordo com suas necessidades.

Seu tema filho já está disponível para visualização. Você pode ativá-lo na tela de administração Aparência > Temas .

2. Personalizando as configurações globais

Desde o WordPress 5.9, os temas filhos com um arquivo theme.json herdam as configurações do tema pai. Se o theme.json do filho definir um conjunto de estilos, esses estilos serão aplicados sobre os estilos do pai.

Assim, podemos criar um arquivo theme.json que inclua apenas um pequeno bloco personalizado de configurações e definições de estilo, em vez de redefinir todas as nossas escolhas originais.

Como declarar uma paleta de cores personalizada

Ao construir um tema filho para Twenty Twenty-Two, a tarefa mais fácil é substituir a paleta de cores. Tudo o que você precisa fazer é definir uma nova paleta de cores no theme.json do seu filho, conforme mostrado abaixo:

 { "version": 2, "settings": { "color": { "palette": [ { "slug": "foreground", "color": "#FFFFFF", "name": "Foreground" }, { "slug": "background", "color": "#001F29", "name": "Background" }, { "slug": "primary", "color": "#D6FDFF", "name": "Primary" }, { "slug": "secondary", "color": "#FDFCDC", "name": "Secondary" }, { "slug": "tertiary", "color": "#FED9B7", "name": "Tertiary" }, { "slug": "accent", "color": "#E94435", "name": "Accent" } ] } } }

Salve seu arquivo e volte para o editor do site. A paleta de cores definida acima deve ter substituído a paleta de cores padrão do Twenty Twenty-Two.

As cores serão mostradas em ordem na própria paleta, e seus nomes devem seguir as melhores práticas e convenções de nomenclatura discutidas no Github.

Você pode ler muito mais sobre as opções de cores do theme.json nesta visão geral detalhada de Carolina Nymark.

Como declarar filtros Duotone personalizados

Você também pode substituir as cores duotônicas padrão por seu conjunto personalizado de filtros.

Para fazer isso, basta adicionar o seguinte código às configurações do theme.json do seu filho no mesmo nível da propriedade da palette :

 { "version": 2, "settings": { "color": { "palette": [...], "duotone": [ { "colors": [ "#001F29", "#FFFFFF" ], "slug": "default-filter", "name": "Default filter" } ] } } }

Salve seu arquivo e verifique o resultado no editor de blocos. Você deve ver apenas um único filtro duotônico.

3. Personalizando estilos de bloco

Como mencionamos anteriormente, com o WordPress 5.9, agora você pode personalizar as configurações e estilos do theme.json na interface Global Styles.

Os estilos de bloco podem ser personalizados na interface Global Styles somente se o bloco declarar suporte para uma funcionalidade específica no arquivo block.json correspondente. Mas você pode substituir as configurações de bloco padrão no theme.json do seu tema filho.

Agora suponha que você deseja substituir os estilos de bloco Post Title e Group. Tudo o que você precisa fazer é definir os estilos que deseja adicionar ou substituir, conforme mostrado abaixo:

 { "version": 2, "settings": {...}, "styles": { "blocks": { "core/post-title": { "typography": { "fontFamily": "Roboto,Oxygen-Sans,Ubuntu,Cantarell,\"Helvetica Neue\",sans-serif" }, "color": { "background": "var(--wp--preset--color--tertiary)" }, "spacing": { "padding": "var(--wp--custom--spacing--small)" } }, "core/group": { "spacing": { "margin": { "top": "0", "bottom": "0" } } } } } }

No exemplo acima, alteramos a família de fontes, a cor do plano de fundo e os valores de preenchimento para core/post-title , bem como as margens superior e inferior para core/group .

A imagem abaixo mostra o resultado como ficaria no site público:

Um bloco de título de postagem personalizado

E isso é tudo para a revisão!

Não vamos nos aprofundar nos temas filhos por enquanto, pois isso iria além do escopo deste post. Enquanto isso, você encontrará mais exemplos de temas filhos Twenty Twenty-Two no Github.

Twenty Twenty-Two foi projetado para ser o tema padrão mais flexível, leve e personalizável de todos os tempos - e há ainda mais para amar neste guia Click to Tweet

Resumo

Ao examinar mais de perto o novo tema padrão do WordPress Twenty Twenty-Two e seus recursos (que o tornam o tema padrão mais flexível já lançado), revelamos a nova arquitetura de informações introduzida com o WordPress 5.9. Até demos uma espiada na nova interface Global Styles.

Há muitos novos recursos interessantes a caminho, e parece claro que o novo ambiente de edição está ficando mais robusto, confiável e funcional ao longo do tempo.

Enquanto muitos novos recursos do WordPress estão a caminho, outros estão desaparecendo ou diminuindo em importância. Muitos usuários ficam imaginando o que acontecerá com o Personalizador e a melhor forma de manter a compatibilidade com os temas existentes.

No entanto, você não deve esperar saltar repentinamente de temas tradicionais para bloquear temas em um único limite. Atualmente, temos quatro tipos diferentes de temas para escolher:

Temas de bloco : Temas projetados para FSE
Temas universais : Temas que funcionam com o Personalizador e o Editor do Site
Temas híbridos: temas clássicos que suportam recursos FSE como theme.json
Temas clássicos : Temas com templates PHP, functions.php, etc.

Portanto, não tenha medo por enquanto - ainda há muitas soluções para escolher se você ainda não se sentir pronto para mudar para temas de bloco.

E agora é com você! Você está pronto para dar o grande salto e começar a usar temas de bloco agora mesmo? Compartilhe seus pensamentos conosco nos comentários abaixo.