Twenty Twenty-Four é o mais novo tema padrão do WordPress que será lançado com o WordPress versão 6.4.

A ideia por trás do Twenty Twenty-Four é servir como um tema padrão adequado a qualquer tipo de site, independentemente do tópico do site. Ele foi criado para três casos de uso: proprietários de pequenas empresas, fotógrafos e artistas, e escritores e blogueiros.

Mais do que um tema, o Twenty Twenty-Four é uma coleção de templates e padrões que, combinados, permitem criar uma grande variedade de sites. Dessa forma, você pode considerar o Twenty Twenty-Four um tema multiúso, embora seja absolutamente minimalista.

Como você pode esperar, o Twenty Twenty-Four é um tema de bloco totalmente compatível com todas as coisas incríveis que vêm com o WordPress 6.4, incluindo o bloco de detalhes e o texto vertical.

Após essa rápida introdução ao novo tema padrão do WordPress, exploraremos neste artigo os diversos templates, padrões e estilos para mostrar como criar um site atraente, responsivo, utilizável e acessível com o Twenty Twenty-Four.

Agora, abra o Site Editor, pressione Cmd + k e digite Templates.

Lançamento de templates no WordPress 6.4.
Lançamento de templates no WordPress 6.4.

O tema WordPress Twenty Twenty-Four

O Twenty Twenty-Four nos dá um exemplo perfeito de um tema de bloco do WordPress. Ao acessar a pasta do tema na instalação do WordPress, você encontrará um arquivo functions.php extremamente simples, cuja única finalidade é enfileirar um punhado de folhas de estilo para blocos específicos.

O arquivo de funções do Twenty Twenty-Four é um bom exemplo de como otimizar um tema, garantindo que recursos específicos sejam incorporados somente quando forem necessários. O código a seguir enfileira a folha de estilo button-outline.css somente quando um botão está na página:

if ( ! function_exists( 'twentytwentyfour_block_styles' ) ) :
	/**
	 * Register custom block styles
	 *
	 * @return void
	 * @since Twenty Twenty-Four 1.0
	 *
	 */
	function twentytwentyfour_block_styles() {
		/**
		 * The wp_enqueue_block_style() function allows us to enqueue a stylesheet
		 * for a specific block. These will only get loaded when the block is rendered
		 * (both in the editor and on the front end), improving performance
		 * and reducing the amount of data requested by visitors.
		 *
		 * See https://make.wordpress.org/core/2021/12/15/using-multiple-stylesheets-per-block/ for more info.
		 */
		wp_enqueue_block_style(
			'core/button',
			array(
				'handle' => 'twentytwentyfour-button-style-outline',
				'src'    => get_template_directory_uri() . '/assets/css/button-outline.css',
				'ver'    => wp_get_theme()->get( 'Version' ),
			)
		);
	}
	...
endif;

O tema não fornece nenhuma funcionalidade ao seu site WordPress, e você dependerá totalmente dos plugins para adicionar comportamento às suas páginas. Assim, o arquivo functions.php do Twenty Twenty-Four cuida apenas do enfileiramento de folhas de estilo específicas para blocos específicos.

Continuando com nossa exploração da pasta do tema Twenty Twenty-Four, você notará que o arquivo style.css inclui apenas um cabeçalho com os detalhes necessários para que o tema funcione corretamente, não contendo nenhum bloco CSS:

/*
Theme Name: Twenty Twenty-Four
Theme URI: https://wordpress.org/themes/twentytwentyfour
Author: the WordPress team
Author URI: https://wordpress.org
Description: Twenty Twenty-Four is designed to be flexible, versatile, and applicable to any website. Its collection of templates and patterns is tailored to different needs, such as presenting a business, blogging, and writing or showcasing work. A multitude of possibilities open up with just a few adjustments to color and typography. Twenty Twenty-Four comes with style variations and full-page designs to help speed up the site-building process, is fully compatible with the site editor, and takes advantage of new design tools introduced in WordPress 6.4.
Requires at least: 6.2
Tested up to: 6.4
Requires PHP: 7.0
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: twentytwentyfour
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, translation-ready, wide-blocks, block-styles, style-variations, accessibility-ready, blog, portfolio, news
*/

Você também encontrará uma pasta assets, que contém uma pasta fonts, um conjunto de imagens e uma pasta css, que inclui a folha de estilo button-outline.css.

O estilo padrão do Twenty Twenty-Four usa duas fontes: Cardo para títulos e Inter para outros elementos de texto.

Visualização da fonte Cardo no Google Fonts.
Visualização da fonte Cardo no Google Fonts.

As famílias de fontes Jost e Instrument Sans também estão disponíveis e são usadas em algumas variações de estilo.

A seguir, você encontrará quatro pastas que contêm a verdadeira essência do tema padrão do Twenty Twenty-Four:

  • styles
  • patterns
  • parts
  • templates

Estilos globais

Seção de estilos do Twenty Twenty-Four.
Seção de estilos do Twenty Twenty-Four.

O Twenty Twenty-Four vem com um conjunto de seis combinações diferentes de variações de estilo. Você pode explorar cada estilo na seção Styles do Site Editor ou no painel Browse styles (Procurar estilos) no modo de edição.

Painel de navegação de estilos do Twenty Twenty-Four.
Painel de navegação de estilos do Twenty Twenty-Four.

O estilo padrão é definido em theme.json e vem com 11 cores, 12 gradientes, 5 combinações duotone e duas famílias de fontes: Inter para o corpo do conteúdo e Cardo para os títulos.

Gradientes e duotones padrão do Twenty Twenty-Four.
Gradientes e duotones padrão do Twenty Twenty-Four.

Cada variação adiciona combinações de estilo específicas.

No momento em que este artigo está sendo escrito, o Twenty Twenty-Four vem com as seguintes variações de estilo:

Ice: variação bastante semelhante ao estilo padrão. Usa a mesma paleta de cores padrão com uma fonte de sistema para os títulos e Inter para o corpo.

Variação de estilo Ice do Twenty Twenty-Four.
Variação de estilo Ice do Twenty Twenty-Four.

Milky: essa variação vem com as mesmas famílias de fontes padrão, mas com uma paleta de cores diferente.

Paleta de cores Milky do Twenty Twenty-Four.
Paleta de cores Milky do Twenty Twenty-Four.

Mint: adiciona uma variação na paleta de cores e nas famílias de fontes. Usa Instrument Sans para os títulos e Jost para o corpo.

A variação Mint altera a família de fontes e a paleta de cores.
A variação Mint altera a família de fontes e a paleta de cores.

Onyx: esta é a versão escura do estilo padrão. Adiciona uma paleta personalizada, gradientes e combinações duotone.

Gradientes e combinações duotone da variação
Gradientes e combinações duotone da variação Onyx.

Rust: usa uma paleta de cores agradável. A tipografia é baseada nas famílias de fontes padrão, mas com tamanhos de fonte diferentes.

Variação Rust.
Variação Rust.

Sandstorm: essa variação altera vários elementos do estilo padrão. A Sandstorm define uma paleta de 11 cores, usa as famílias de fontes Instrument Sans e Jost, e personaliza a aparência de vários blocos e elementos HTML.

Paleta de cores da Sandstorm.
Paleta de cores da Sandstorm.

Templates

Templates do Twenty Twenty-Four no Site Editor.
Templates do Twenty Twenty-Four no Site Editor.

O Twenty Twenty-Four vem com onze templates incorporados. Você pode encontrar os arquivos correspondentes na pasta templates do diretório do tema:

  • single.html
  • single-with-sidebar.html
  • search.html
  • page.html
  • page-with-sidebar.html
  • page-wide.html
  • page-no-title.html
  • index.html
  • home.html
  • archive.html
  • 404.html

Você pode acessar a lista de templates para suas personalizações na seção Templates do Site Editor.

Agora, novamente, se você quiser se aprofundar no código dos templates do Twenty Twenty-Four, basta abrir um ou dois deles em seu editor de código favorito. Não é nenhuma surpresa que cada template inclua um ou mais padrões. Isso prova novamente que o Twenty Twenty-Four é mais ou menos uma coleção de padrões.

Pegue, por exemplo, o index.html e abra-o em seu editor. Você verá o seguinte código:

<!-- wp:group {"style":{"position":{"type":"sticky","top":"0px"}},"layout":{"type":"default"}} -->
<div class="wp-block-group">
	<!-- wp:template-part {"slug":"header"} /-->
</div>
<!-- /wp:group -->

<!-- wp:group {"tagName":"main","align":"full","layout":{"type":"constrained"}} -->
<main class="wp-block-group alignfull">
	<!-- wp:heading {"level":1,"align":"wide","style":{"spacing":{"padding":{"top":"var:preset|spacing|50"}}}} -->
	<h1 class="wp-block-heading alignwide" style="padding-top:var(--wp--preset--spacing--50)">Posts</h1>
	<!-- /wp:heading -->
	<!-- wp:pattern {"slug":"twentytwentyfour/posts-three-columns"} /-->
</main>
<!-- /wp:group -->

<!-- wp:template-part {"slug":"footer","area":"footer","tagName":"footer"} /-->

O template começa com um div que inclui a parte header do template. Um elemento main com um cabeçalho e o padrão posts-three-columns produz o corpo, enquanto a parte footer do template constrói a parte inferior da página.

Agora vamos comparar index.html com archive.html:

<!-- wp:group {"style":{"position":{"type":"sticky","top":"0px"}},"layout":{"type":"default"}} -->
<div class="wp-block-group">
	<!-- wp:template-part {"slug":"header"} /-->
</div>
<!-- /wp:group -->

<!-- wp:group {"tagName":"main","align":"full","layout":{"type":"constrained"}} -->
<main class="wp-block-group alignfull">

	<!-- wp:query-title {"type":"archive","align":"wide","style":{"typography":{"lineHeight":"1"},"spacing":{"padding":{"top":"var:preset|spacing|50"}}}} /-->

	<!-- wp:pattern {"slug":"twentytwentyfour/posts-three-columns"} /-->

</main>
<!-- /wp:group -->

<!-- wp:template-part {"slug":"footer","area":"footer","tagName":"footer"} /-->

Você perceberá que os dois templates são bastante semelhantes. A única diferença é que o archive.html usa um bloco Archive title em vez de um elemento H1. Ambos os templates usam um padrão posts-three-columns para gerar o conteúdo da página.

Trocando o editor HTML pelo editor de sites do WordPress, você pode visualizar e personalizar os templates do tema. A imagem abaixo mostra o template Archive no modo de edição.

Editando o template Archive do Twenty Twenty-Four.
Editando o template Archive do Twenty Twenty-Four.

Quando estiver satisfeito com as alterações, clique em Save no canto superior direito. Isso mostrará um novo painel no qual você poderá confirmar as alterações ou descartá-las. Clique em Save novamente e pronto.

Partes e padrões de templates

Padrões Twenty Twenty-Four.
Padrões Twenty Twenty-Four.

Você pode encontrar padrões e partes de templates em duas pastas diferentes do diretório twentytwentyfour. A pasta patterns inclui mais de 50 padrões, enquanto a pasta parts inclui seis partes de templates.

No Site Editor, as partes de templates e os padrões estão todos incluídos na mesma seção Patterns.

O Twenty Twenty-Four fornece vários padrões que você pode usar para criar a página inteira. Isso simplifica o fluxo de trabalho de edição e permite que você crie todo o seu site com poucas personalizações.

Exemplos disso são os padrões Home page (Página inicial), About page (Página Sobre) e Portfolio Overview Page (Página de visão geral do portfólio), listados na categoria de padrões About.

Padrões de página inteira no Twenty Twenty-Four.
Padrões de página inteira no Twenty Twenty-Four.

Digamos, por exemplo, que você queira criar uma página Sobre. Graças ao padrão About do Twenty Twenty-Four, você pode criar uma nova página e simplesmente escolher o padrão no inseridor de blocos.

Adicionando um padrão a uma página vazia com o Twenty Twenty-Four.
Adicionando um padrão a uma página vazia com o Twenty Twenty-Four.

O padrão About fornece todo o layout da página e você só precisa adicionar suas personalizações, acrescentando ou trocando blocos, imagens e texto com base em suas necessidades. E se você está se perguntando o que acontece com a estrutura da sua página se o tema mudar, a resposta é absolutamente nada. Uma vez incluído em sua página, o padrão se torna parte do conteúdo e é armazenado na tabela posts do banco de dados do WordPress.

Pré-visualização de um padrão Twenty Twenty-Four com o tema Twenty Twenty-Three.
Pré-visualização de um padrão Twenty Twenty-Four com o tema Twenty Twenty-Three.

Ao rolar para baixo no menu de navegação Patterns, você encontrará a seção Template Parts, que inclui os itens de menu Header (Cabeçalho), Footer (Rodapé) e General. Cada item é o ponto de entrada para a correspondente categoria da parte de template. O Twenty Twenty-Four fornece um cabeçalho, três rodapés e duas partes de template gerais.

Os padrões e as partes de template do Twenty Twenty-Four no Site Editor.
Os padrões e as partes de template do Twenty Twenty-Four no Site Editor.

Mas se você abrir as partes de template do Twenty Twenty-Four em seu editor de código favorito, verá que a maioria delas simplesmente inclui um padrão. Veja a parte do template Sidebar, por exemplo:

<!-- wp:pattern {"slug":"twentytwentyfour/sidebar"} /-->

Essa parte de template inclui simplesmente o padrão Sidebar. Você não encontrará esse padrão listado na seção Patterns do Site Editor porque ele é um padrão oculto. Se você quiser se aprofundar no código, navegue até a pasta patterns do tema, localize o arquivo hidden-sidebar.php e abra-o em seu editor de código.

O cabeçalho desse arquivo confirma que ele é um padrão oculto e não pode ser acessado por meio do inseridor de blocos:

<?php
/**
 * Title: sidebar
 * Slug: twentytwentyfour/sidebar
 * Categories: hidden
 * Inserter: no
 */
?>

Resumo

Se você está procurando um tema multiúso cheio de recursos e efeitos especiais, o Twenty Twenty-Four pode não ser o tema ideal para você.

O novo tema padrão do WordPress é leve, flexível e não tem recursos supérfluos meramente decorativos, além de ser totalmente gerenciável pelo editor do site.

Com o Twenty Twenty-Four, você não precisará tocar em uma única linha de código, e não terá de mexer em nenhuma configuração. Para criar um site com o Twenty Twenty-Four, você só precisa personalizar os templates no editor de sites e escolher um ou mais padrões para preencher as páginas do seu site.

Em sua essência, o Twenty Twenty-Four é uma coleção de padrões. Ele reflete a nova abordagem de criação de sites e fornece um ótimo exemplo de como criar temas de blocos.

Agora é com você. Você instalou o Twenty Twenty-Four em seu ambiente de desenvolvimento? Gostou da nova abordagem para criação de sites no WordPress? Deixe uma mensagem abaixo nos comentários e compartilhe suas ideias.

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.