Embora um pouco mais tarde do que o planejado originalmente, nós estamos recebendo um novo tema padrão do WordPress. Seu nome é Twenty Twenty-Two!

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

Nós mostraremos nossos resultados antes de encerrarmos nossos pensamentos para lhe trazer uma visão detalhada do novo tema do WordPress.

Uma prévia do Twenty Twenty-Two, o novo tema padrão do WordPress.
Uma prévia do Twenty Twenty-Two, o novo tema padrão do WordPress. (Imagem de origem: 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, patterns (padrões) e templates.

Sendo um tema de blocos, ele o ajudará a explorar melhor a Edição Completa do Site, Estilos Globais, Blocos de Navegação e as novas galerias de imagens, que são as características mais esperadas que vêm com o WordPress 5.9.

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

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

De um ponto de vista técnico, escrever sobre Twenty Twenty-Two não é muito diferente de escrever sobre as últimas e mais poderosas características que vêm com o WordPress 5.9. Mas o Twenty Twenty-Two nos fornece uma lupa para melhor apreciar os novos recursos de edição do site e ter uma idéia melhor do futuro da plataforma.

Então aqui estamos nós para apresentar a você o novo tema.

Primeiro, nós vamos explorar o novo fluxo de edição do site que os usuários experimentarão com o WordPress 5.9 e Twenty Twenty-Two.

Depois disso, vamos mergulhar nas principais características do tema de bloco implementado em Twenty Twenty-Two. Você vai conhecer Estilos Globais, padrões de blocos, templates e partes do template.

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

Vamos trabalhar e mergulhar no novíssimo tema Twenty Twenty-Two padrão do WordPress  .

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

Vários recursos completos de edição do site entram no núcleo com o WordPress 5.9. Os proprietários de sites usando a última versão do WordPress com um tema de bloco como Twenty Twenty-Two instalado serão capazes de:

  • Criar e editar artigos e páginas usando mais blocos e padrões
  • Personalizar as configurações e estilos definidos no arquivo theme.json através da interface Estilos globais
  • Criar e editar templates para páginas e artigos
  • Criar e editar partes do template para cabeçalho, rodapé e outras áreas do template

Com todas essas características fundidas ao núcleo, os colaboradores do núcleo do WordPress têm discutido a evolução da arquitetura de informação e redesenhado 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 seu painel do WordPress, mas foi movido sob o menu Aparência.

O novo menu Appearance no WordPress 5.9
O novo menu Aparência no WordPress 5.9

Trazer os recursos de edição de templates e estilos sob o mesmo menu Aparência deve racionalizar a experiência de edição. Deve facilitar a compreensão de que as características que você está acessando se relacionam com a apresentação de suas páginas.

O item do menu Editor abre o template da página inicial do site. Dependendo da sua configuração de leitura, esta pode ser a sua última página de artigos ou uma página estática.

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

Agora, clicando 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 Partes do template.

Vamos dar uma olhada mais de perto.

O menu de navegação do Editor
O menu de navegação do Editor

A opção Site abre o template da página inicial (últimos artigos do blog ou página inicial estática).

No item de menu Templates, você terá uma lista dos templates disponíveis. Você pode clicar em qualquer template da lista para lançá-lo no editor.

A partir desta escrita, Twenty Twenty-Two fornece 11 templates.

Twenty Twenty-Two templates
Twenty Twenty-Two templates

Clicando no ícone da elipse() à direita, você pode limpar suas customizações.

Personalizações claras do template.
Personalizações claras do template.

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

Renomear/apagar gabaritos personalizados
Renomear/apagar gabaritos personalizados

O item do menu partes do template lista as partes do template disponíveis que você pode abrir no editor para suas customizações.

Você encontrará quatro partes do template adicionado ao Twenty Twenty-Two por padrão. Passar o cursor sobre um template modificado exibe uma dica de ferramenta para que você saiba que o template foi personalizado.

Twenty Twenty-Two partes do do template.
Partes do template Twenty Twenty-Two.

Você pode limpar estas customizações clicando no ícone da elipse() à direita.

Personalizações claras da peça template.
Personalizações claras das partes do template.

Edição de templates e partes do template

O Editor fornece a interface para personalizar a estrutura de seus templates e partes do template.

Aqui você pode facilmente adicionar ou editar blocos e padrões, e suas mudanças serão automaticamente aplicadas a cada página que usar esse template.

Editando o template único de poste.
Editando o template único de artigo.

A imagem abaixo mostra o template de páginas 404  no editor. É um template bastante simples, incluindo apenas um cabeçalho, um parágrafo e uma caixa de pesquisa. Ainda assim, ele nos dá uma boa compreensão de como a IU funciona.

template de bloco 404 do Twenty Twenty Twenty-Two no editor de templates
template de bloco 404 do Twenty Twenty Twenty-Two no editor de templates

Aqui, você pode fazer edições e personalizar os templates de acordo com as suas necessidades. Por exemplo, você pode querer adicionar uma grade de padrões de artigos de imagem para aumentar o envolvimento de seus visitantes e convidá-los a navegar pelo conteúdo do seu site.

Personalizando o template de bloco 404 da Twenty Twenty-Two
Personalizando o template de bloco 404 da Twenty Twenty-Two

O cabeçalho suspenso no topo do editor de templates exibe uma lista das áreas de templates disponíveis. A mesma lista aparece na aba Template na barra lateral Settings.

Áreas template em Twenty Twenty-Two
Áreas template em Twenty Twenty-Two

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

Se você clicar no ícone da elipse à direita, você terá acesso ao editor de partes isoladas do template.

O ícone da elipse lança o editor de partes isoladas do template
O ícone da elipse lança o editor de partes isoladas do template

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

Ajuste da dimensão de visualização da peça template
Ajuste da dimensão de visualização da parte do template

Quando você estiver satisfeito com suas mudanças, salve suas edições e volte para o editor principal de templates para verificar o resultado final.

Se você quiser mergulhar mais profundamente na nova arquitetura de informação, você pode querer verificar os seguintes artigos:

Twenty Twenty-Two no seu núcleo: Uma rápida visão geral do theme.json

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

Introduzido com o WordPress 5.8, este novo mecanismo permite aos desenvolvedores de temas configurar o editor e adicionar suporte a recursos a partir de um ponto de configuração central.

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

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

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

Version

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

Settings

A seção 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. Em Twenty Twenty-Two você encontrará as seguintes configurações:

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

As configurações padrão são chamadas predefinições e são usadas para gerar propriedades personalizadas CSS e nomes de classe baseados em uma convenção de nomenclatura específica:

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

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

Styles

A seção styles é onde os temas definem os estilos padrão de blocos e elementos. Veja, por exemplo, os seguintes Twenty Twenty-Two Estilos para o Bloco de Botões do núcleo:

{
	"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ê vai notar as propriedades personalizadas CSS usadas nas declarações de propriedade.

Custom Templates

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

Twenty Twenty-Two fornece quatro templates 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 Twenty Twenty-Two blocos de chapas
Pasta da Twenty Twenty-Two block-templates

Template Parts

A seção templateParts inclui as definições das partes do 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 name e title são obrigatórios. Os temas também podem declarar um termo area, onde a parte template será renderizada no editor.

Twenty Twenty-Two partes do template
Twenty Twenty-Two partes do template

Os arquivos .html das partes do template estão localizados na pasta Template Parts.

Agora que você sabe mais sobre o theme.json do Twenty Twenty-Two, nós podemos explorar mais profundamente as funcionalidades do tema e a nova interface de edição.

Vamos mergulhar nos Estilos Globais do Twenty Twenty-Two.

Estilos globais Twenty Twenty-Two

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 vai levar as coisas um passo adiante, introduzindo um novo recurso que permite aos usuários do tema de blocos personalizar a aparência dos elementos do site a partir de uma interface de usuário chamada Global Styles (Estilos globais).

A interface Estilos globais pode ser acessada a partir do novo ícone Estilos colocado no canto superior direito do Editor (veja também A Interface Global Styles (Estilos globais)).

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

  • Um painel de pré-visualização, mostrando uma prévia das suas personalizações
  • Um painel de Estilos Globais fornecendo acesso a grupos específicos de controles para Tipografia, Cores e Layout
  • Um item de blocos fornecendo acesso a configurações de estilo de nível de bloco
A barra lateral Styles em Twenty Twenty-Two.
A barra lateral Styles em Twenty Twenty-Two.

Paleta de cores Twenty Twenty-Two

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

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

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

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

Se não, 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 combina com a paleta de cores dos Twenty Twenty-Two.

A paleta de cores Twenty Twenty-Two
A paleta de cores Twenty Twenty-Two

Agora vamos assumir que você quer mudar a cor de fundo padrão para um determinado bloco. Escolher uma cor diferente para o fundo do bloco simplesmente atribuirá uma variável CSS diferente para a propriedade background-color do elemento. A imagem abaixo fornece um exemplo disso:

Twenty Twenty-Two cores primárias usadas como cor de fundo
Twenty Twenty-Two cores primárias usadas como cor de fundo

E isso é tudo! Você não precisará adicionar uma única linha de código CSS personalizado ao Customizer ou criar um child theme (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 de 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 que você possa personalizar a família de fontes, tamanho e altura de linha.

Configurações tipográficas em Twenty Twenty-Two
Configurações tipográficas em Twenty Twenty-Two

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

Abra o Twenty Twenty-Two theme.json e encontre a seção 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 fontes do código acima. E você teria adivinhado direito.

Aqui está como o código acima se traduz para as configurações de tipografia de Estilos Globais:

Estilos de tipografia em Twenty Twenty-Two
Estilos de tipografia em Twenty Twenty-Two

Você pode adivinhar qual configuração gera o controle da altura da linha. Em 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 próxima seção).

Layout e ferramentas de aparência

O último elemento na barra lateral Estilos globais é o Layout. No momento em que foi escrito, ele inclui apenas um controle padding.

Configurações de layout em Twenty Twenty-Two
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 – você agora espera entender como as configurações declaradas no arquivo theme.json combinam com os controles correspondentes do Estilos globais.

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

Padrões de bloco Twenty Twenty-Two

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

O termo chave aqui é “capacitação do usuário”. E isso se encaixa porque, com padrões de bloco, você pode construir todo tipo de coisa, desde um atraente portfólio até um site promocional de uma única página, 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 (Explorador de Padrões), uma ferramenta que permite que você navegue pelos padrões em um modal de tela cheia.

O Explorador de padrões no Twenty Twenty-Two
O Explorador de padrões do Twenty Twenty-Two

A nova ferramenta também permite que você importe rápido e facilmente padrões de bloco diretamente do Diretório de padrões. Isto abre novas possibilidades tanto para usuários do WordPress quanto para desenvolvedores, portanto, é provável que seu uso aumente consideravelmente no futuro.

Diretório de padrões do WordPress
Diretório de padrões do WordPress

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

Twenty Twenty-Two categorias de padrões
Twenty Twenty-Two categorias de padrões

Este sólido conjunto de padrões se emparelha perfeitamente com templates e partes do templates que vêm com o novo tema padrão, fazendo com que a experiência de edição seja realmente incrível.

Imagens em camadas com duotone
Imagens em camadas com duotone
Vídeo com cabeçalho e detalhes
Vídeo com cabeçalho e detalhes
Duas imagens com texto
Duas imagens com texto

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

Suponha que você queira remover o rodapé padrão dos templates Índice e Post único e substituí-lo por um padrão diferente de blocos do Twenty Twenty-Two.

Inicie o Editor do Site a partir do menu Aparência ou do botão da barra de ferramentas do WordPress frontend para personalizar o template do Índice.

Clique no botão Índice para exibir a lista de áreas de templates disponíveis na página. Clique no botão elipse ao lado do Rodapé e depois no botão Editar Rodapé.

O inspetor de template
O inspetor de template

Como mencionado acima, isto irá abrir o editor de partes isoladas do template.

O editor de partes do template isoladas
O editor de partes do template isoladas

Agora abra o inseridor de blocos e clique em Patterns (padrões).

Abra a nova ferramenta Pattern Explorer (Explorador de Padrões), selecione a categoria Rodapés do Twenty Twenty-Two e escolha o rodapé da sua escolha.

O explorador de padrões em Twenty Twenty-Two
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 partes do template isolado
Editando o rodapé no editor de partes isoladas do template

Salve o cabeçalho e verifique novamente o seu site quando você estiver satisfeito com suas mudanças.

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

Customizações de cabeçalho e rodapé comparadas em diferentes Twenty Twenty-Two templates
Customizações de cabeçalho e rodapé comparadas em diferentes templates do Twenty Twenty-Two

Estendendo Twenty Twenty-Two com um child theme

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

Mas uma vez que você tenha um bom entendimento da estrutura de um tema de bloco, você não terá dificuldade de criar um child theme para Twenty Twenty-Two ou qualquer outro tema de bloco.

Então vamos descobrir como personalizar o visual do seu site Twenty Twenty-Two.

1. Criando um child theme para o Twenty Twenty-Two

Em seu diretório /wp-content/themes, crie uma nova pasta e nomeie o que você quiser (de acordo com os padrões de desenvolvimento de temas). Neste exemplo, nós chamamos a pasta child theme de twentytwentytwo-child.

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

/*
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.

O tema de seu filho agora está disponível para visualização. Você pode ativá-lo na tela Aparência > Temas admin.

2. Personalizando configurações globais

Desde o WordPress 5.9, os child themes com um arquivo theme.json herdam as configurações do parent theme. Se o child theme do theme.json define um conjunto de estilos, então esses estilos se aplicam em cima dos estilos do parent theme.

Então nós podemos criar um arquivo theme.json que inclui apenas um pequeno bloco personalizado de definições de configuração e estilo ao invés de redefinir todas as nossas escolhas originais.

Como declarar uma paleta de cores personalizada

Ao construir um child theme 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 child theme, como 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.

Uma paleta de cores com tema infantil
Uma paleta de cores com child theme

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 aprofundada por Carolina Nymark.

Como declarar os filtros personalizados duotônicos

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

Para fazer isso, simplesmente adicione o seguinte código às configurações do theme.json do seu child theme no mesmo nível da propriedade 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ê só deve ver um único filtro duotônico.

Um filtro duotônico temático infantil
Um filtro duotônico no child theme

3. Personalização de estilos de bloco

Como mencionamos anteriormente, com o WordPress 5.9, você agora pode personalizar as configurações e estilos do theme.json a partir da interface Estilos globais.

Os estilos de bloco podem ser personalizados a partir da interface Estilos globais somente se o bloco declarar suporte a funcionalidades específicas no arquivo block.json correspondente . Mas você pode substituir as configurações padrão de bloco no theme.json do seu child theme.

Agora suponha que você queira substituir os estilos Post Title e Group block. Tudo o que você precisa fazer é definir os estilos que você quer adicionar ou substituir, como 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, mudamos a família de fontes, a cor de fundo e os valores de padding para core/post-title, assim como as margens superior e inferior para core/group.

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

Um bloco de título de postagem personalizado
Um bloco de título de artigo personalizado

E é tudo para a revisão!

Por enquanto, não vamos ir além em child themes, pois isso iria além do escopo deste artigo. Enquanto isso, você encontrará mais exemplos de Twenty Twenty-Two child themes no Github.

Resumo

Enquanto dávamos uma olhada mais de perto no novo tema padrão do WordPress Twenty Twenty-Two e suas características (que o tornam o tema padrão mais flexível já lançado), nós revelamos a nova arquitetura de informação introduzida com o WordPress 5.9. Nós até mesmo tivemos uma prévia da nova interface Estilos globais.

Há muitas novidades interessantes a caminho, e parece claro que o novo ambiente de edição está ficando mais robusto, confiável e funcional com o tempo.

Enquanto muitas novas funcionalidades do WordPress estão a caminho, outras estão desaparecendo ou diminuindo de importância. Muitos usuários estão se perguntando o que vai acontecer com o Customizer e como melhor manter a compatibilidade retroativa com os temas existentes.

Entretanto, você não deve esperar saltar de repente de temas tradicionais para bloquear temas em um único limite. Nós temos atualmente quatro tipos diferentes de temas para escolher:

  • Temas de blocos: Temas desenhados para o FSE
  • Temas universais: Temas que funcionam tanto com o Customizer como com o Editor do Site
  • Temas Híbridos: Temas clássicos que suportam características FSE como theme.json
  • Temas clássicos: Temas com templates PHP, functions.php, etc.

Portanto, não tema por enquanto – ainda há muitas soluções para escolher se você ainda não se sente pronto para mudar para temas de blocos.

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

Carlo Daniele Kinsta

Carlo é um apaixonado por webdesign e desenvolvimento frontend. Ele tem mais de 10 anos de experiência com WordPress e colaborou com diversas universidades e instituições educacionais na Itália e na Europa. Carlo já publicou inúmeros artigos e guias sobre WordPress, tanto em sites italianos quanto internacionais, além de revistas impressas. Você pode seguir ele no LinkedIn e no X.