Baseado na ideia de que coisas simples devem ser intuitivas enquanto coisas complexas devem ser possíveis, o Twenty Twenty-Five é um tema padrão do WordPress flexível e facilmente extensível, projetado para ajudar as pessoas a contar histórias, graças aos seus diversos padrões e estilos.
O Twenty Twenty-Five será lançado junto com o WordPress 6.7. Ele vem com um amplo conjunto de imagens inspiradoras do Openverse, o repositório gratuito de imagens compartilhadas pela e para a comunidade WordPress. Essas imagens estão incorporadas nos padrões de blocos do Twenty Twenty-Five, prontas para serem usadas para contar histórias que evocam “ideias de impermanência, a passagem do tempo e a evolução contínua.”
A função central dos padrões no Twenty Twenty-Five é uma evidência de como o desenvolvimento de temas em blocos está se concentrando cada vez mais na interface do editor do site e menos na escrita de códigos PHP e JavaScript.
Agora, até mesmo usuários sem habilidades avançadas de codificação podem criar um tema. Você só precisa ter uma boa noção de como o theme.json funciona e de como criar padrões de blocos.
Os templates e partes de template que você verá no Twenty Twenty-Five são coleções de blocos aninhados, padrões e partes de template que compõem os elementos estruturais de cada tipo de layout.
O Twenty Twenty-Five é um excelente exemplo da filosofia de democratização do design, e este artigo mostrará a você sua estrutura em detalhes.
O Twenty Twenty-Five é um excelente exemplo para você aprender tudo sobre os temas de blocos do WordPress e, se tiver lido nossa introdução ao theme.json, poderá criar seus próprios temas do WordPress e compartilhá-los com todo o ecossistema.
Mas vamos direto ao ponto e começaremos nossa jornada pelo Twenty Twenty-Five, o próximo tema padrão do WordPress.
Padrões e partes de templates
O Twenty Twenty-Five fornece vários padrões de blocos e partes de templates que ajudam os usuários do WordPress a criar seus artigos e páginas em minutos. Esses padrões e partes de templates foram projetados para várias finalidades, como landing page, produtos e serviços, eventos, call to action (CTA), páginas sobre e muito mais.
Na pasta do tema, você encontrará os arquivos correspondentes nos diretórios parts e patterns. Ao abrir qualquer arquivo de parte de template, você verá que cada parte de template inclui apenas um link para um padrão de bloco. Aqui está o código da parte do template header.html:
<!-- wp:pattern {"slug":"twentytwentyfive/header"} /-->As partes de template também precisam ser registradas, por isso, você as encontrará listadas no theme.json do Twenty Twenty-Five, sob a propriedade templateParts.
{
"templateParts": [
{
"area": "header",
"name": "header",
"title": "Header"
},
{
"area": "footer",
"name": "footer",
"title": "Footer"
},
{
"area": "footer",
"name": "footer-newsletter",
"title": "Footer Newsletter"
},
{
"area": "uncategorized",
"name": "right-aligned-sidebar",
"title": "Right Aligned Sidebar"
},
{
"area": "uncategorized",
"name": "sidebar",
"title": "Sidebar"
}
]
}A propriedade area determina a seção da página em que uma parte de template se encaixa e a categoria correspondente, name é o slug da parte de template e title é a string de texto usada para criar uma etiqueta que identifica a parte de template na tela.
A pasta patterns do tema Twenty Twenty-Five inclui um bom número de arquivos .php. Você pode abrir qualquer um desses arquivos e verificar o código para saber como o padrão de bloco é criado.
Esses padrões fornecem excelentes exemplos de recursos avançados do WordPress recentemente adicionados ao núcleo. Por exemplo, o arquivo copyright.php inclui o seguinte código:
<!-- wp:paragraph {
"metadata":{
"bindings":{
"content":{
"source":"twentytwentyfive/copyright"
}
}
},
"className":"copyright",
"textColor":"primary",
"fontSize":"small"
} -->
<p class="copyright has-primary-color has-text-color has-small-font-size"></p>
<!-- /wp:paragraph -->Você pode ver rapidamente que esse padrão usa o recurso Block Bindings introduzido no WordPress 6.5 para gerar dinamicamente o conteúdo do texto Copyright.
Aqui, o atributo content do padrão Copyright está conectado a uma fonte definida no tema Twenty Twenty-Five.
Se você estiver se perguntando onde essa string de texto está definida, verifique o arquivo functions.php do Twenty Twenty-Five e encontre o seguinte código:
/**
* Register block binding sources.
*/
if ( ! function_exists( 'twentytwentyfive_register_block_bindings' ) ) :
/**
* Register the copyright block binding source.
*
* @since Twenty Twenty-Five 1.0
* @return void
*/
function twentytwentyfive_register_block_bindings() {
register_block_bindings_source(
'twentytwentyfive/copyright',
array(
'label' => _x( '© YEAR', 'Label for the copyright placeholder in the editor', 'twentytwentyfive' ),
'get_value_callback' => 'twentytwentyfive_copyright_binding',
)
);
}
endif;
add_action( 'init', 'twentytwentyfive_register_block_bindings' );'© YEAR' gera a string de texto exibida na página, enquanto o callback twentytwentyfive_copyright_binding fornece a string de texto formatada:
/**
* Register block binding callback function for the copyright.
*/
if ( ! function_exists( 'twentytwentyfive_copyright_binding' ) ) :
/**
* Callback function for the copyright block binding source.
*
* @since Twenty Twenty-Five 1.0
* @return string Copyright text.
*/
function twentytwentyfive_copyright_binding() {
$copyright_text = sprintf(
/* translators: 1: Copyright symbol or word, 2: Year */
esc_html__( '%1$s %2$s', 'twentytwentyfive' ),
'©',
wp_date( 'Y' ),
);
return $copyright_text;
}
endif;Se tudo isso parece um pouco complicado, pense em como é fácil para o usuário criar layouts complexos simplesmente usando os elementos disponíveis.
Pense também em como é fácil para um desenvolvedor criar templates e padrões de blocos gerando seu código diretamente no editor do site. E a integração com a API Block Bindings abre as portas para infinitas possibilidades de integração com fontes de dados externas.
O Twenty Twenty-Five oferece outros bons exemplos de uso de padrões de blocos. Por exemplo, você pode criar layouts avançados simplesmente juntando padrões existentes em outros padrões.
Ao procurar padrões no Editor de Sites, você pode ver vários layouts de página de destino na categoria de padrão Pages.
Esses padrões são layouts pré-criados e estão prontos para você usar em suas páginas. Quando você cria uma nova página, o editor exibe uma sobreposição na qual você pode escolher um padrão de bloco. Talvez você queira começar com um padrão de Landing page e personalizá-lo de acordo com suas necessidades.
Você também pode alterar o template de página padrão e usar aquele que melhor se adapta ao seu projeto.
Agora vamos nos aprofundar no código da Landing page para Livro. Vá até a pasta patterns do Twenty Twenty-Five e abra page-landing-book.php. Você deverá ver o seguinte código:
<?php
/**
* Title: Landing page for Book
* Slug: twentytwentyfive/page-landing-book
* Categories: twentytwentyfive_page, featured
* Keywords: starter
* Block Types: core/post-content
* Post Types: page, wp_template
* Viewport width: 1400
* Description: A landing page for the book with a hero section, pre-order links, locations, FAQs and newsletter signup.
*
* @package WordPress
* @subpackage Twenty_Twenty_Five
* @since Twenty Twenty-Five 1.0
*/
?>
<!-- wp:pattern {"slug":"twentytwentyfive/hero-book"} /-->
<!-- wp:pattern {"slug":"twentytwentyfive/cta-book-links"} /-->
<!-- wp:pattern {"slug":"twentytwentyfive/banner-about-book"} /-->
<!-- wp:pattern {"slug":"twentytwentyfive/cta-book-locations"} /-->
<!-- wp:pattern {"slug":"twentytwentyfive/text-faqs"} /-->
<!-- wp:pattern {"slug":"twentytwentyfive/newsletter-sign-up"} /-->Você verá o seguinte código: É apenas uma coleção de padrões de blocos. Isso deve demonstrar como é fácil criar layouts complexos tanto para desenvolvedores quanto para usuários. Os desenvolvedores podem criar partes de templates complexos e padrões de blocos simplesmente aninhando padrões pré-construídos em outros padrões com apenas alguns cliques. Criar uma Landing page nunca foi tão fácil.
Estilos
O Twenty Twenty-Five apresenta um conjunto variado de fontes compatíveis com vários idiomas e um bom número de paletas de cores predefinidas agrupadas como variações de estilo.
Fontes
O Twenty Twenty-Five inclui 9 fontes com muitas variantes. Você pode selecionar as fontes que deseja usar em seu site na interface de estilos globais, em Tipografia.
Essas famílias de fontes são armazenadas na pasta Twenty Twenty-Five assets/fonts e registradas em theme.json.
O fragmento abaixo registra cinco variantes da família de fontes Fira Code:
{
"settings": {
"typography": {
"fontFamilies": [
{
"name": "Fira Code",
"slug": "fira-code",
"fontFamily": "\"Fira Code\", monospace",
"fontFace": [
{
"src": [
"file:./assets/fonts/fira-code/FiraCode-Light.woff2"
],
"fontWeight": "300",
"fontStyle": "normal",
"fontFamily": "\"Fira Code\""
},
{
"src": [
"file:./assets/fonts/fira-code/FiraCode-Regular.woff2"
],
"fontWeight": "400",
"fontStyle": "normal",
"fontFamily": "\"Fira Code\""
},
{
"src": [
"file:./assets/fonts/fira-code/FiraCode-Medium.woff2"
],
"fontWeight": "500",
"fontStyle": "normal",
"fontFamily": "\"Fira Code\""
},
{
"src": [
"file:./assets/fonts/fira-code/FiraCode-SemiBold.woff2"
],
"fontWeight": "600",
"fontStyle": "normal",
"fontFamily": "\"Fira Code\""
},
{
"src": [
"file:./assets/fonts/fira-code/FiraCode-Bold.woff2"
],
"fontWeight": "700",
"fontStyle": "normal",
"fontFamily": "\"Fira Code\""
}
]
},
...
}
}
}A imagem a seguir mostra as variantes da fonte Fira Code no editor do site.
O Twenty Twenty-Five também vem com 8 tipos de tipografia. Basta selecionar uma delas na seção Tipografia da interface de Estilos Globais, e ela será aplicada em todo o seu site.
Se você escolher a opção de tipografia número 7, “Platypi & Literata”, essas duas fontes serão automaticamente aplicadas a todos os elementos do seu site: Literata será usada para a maioria dos elementos de texto, enquanto Platypi será aplicada ao título do site, cabeçalhos e blocos de botão.
Essa predefinição está registrada no arquivo typography-preset-6.json em styles/typography:
{
"version": 3,
"$schema": "https://schemas.wp.org/trunk/theme.json",
"title": "Platypi & Literata",
"slug": "typography-preset-6",
"styles": {
"typography": {
"fontFamily": "var:preset|font-family|literata",
"fontSize": "var:preset|font-size|large",
"fontStyle": "normal",
"fontWeight": "300",
"letterSpacing": "-0.24px",
"lineHeight": "1.3"
},
"blocks": {
"core/site-title": {
"typography": {
"fontFamily": "var:preset|font-family|platypi",
"fontWeight": "800",
"letterSpacing": "-0.6px"
}
},
"core/post-title": {
"typography": {
"fontWeight": "800",
"letterSpacing": "-0.96px"
}
},
"core/query-title": {
"typography": {
"fontWeight": "800"
}
}
},
"elements": {
"heading": {
"typography": {
"fontFamily": "var:preset|font-family|platypi",
"fontWeight": "800"
}
},
"button": {
"typography": {
"fontFamily": "var:preset|font-family|platypi",
"fontWeight": "800"
}
}
}
}
}Cores
O Twenty Twenty-Five fornece uma paleta padrão com 8 cores. Essas cores são definidas em theme.json da seguinte forma:
{
"settings": {
"color": {
"palette": [
{
"color": "#FFFFFF",
"name": "Base",
"slug": "base"
},
{
"color": "#111111",
"name": "Contrast",
"slug": "contrast"
},
{
"color": "#FFEE58",
"name": "Accent 1",
"slug": "accent-1"
},
{
"color": "#F6CFF4",
"name": "Accent 2",
"slug": "accent-2"
},
{
"color": "#503AA8",
"name": "Accent 3",
"slug": "accent-3"
},
{
"color": "#686868",
"name": "Primary",
"slug": "primary"
},
{
"color": "#FBFAF3",
"name": "Secondary",
"slug": "secondary"
},
{
"color": "#11111133",
"name": "Opacity 20%",
"slug": "opacity-20"
}
]
},
...
}
O Twenty Twenty-Five também oferece 8 paletas de cores adicionais definidas como variações de estilo. Você pode encontrá-las na pasta styles/colors do tema.
A imagem abaixo mostra a paleta de cores Sunrise.
Templates
O Twenty Twenty-Five também oferece um conjunto considerável de templates para você criar qualquer tipo de blog. Você pode criar blogs pessoais com uma quantidade consistente de texto, blogs de fotos e portfólios com várias estruturas de layout e blogs mais estruturados destinados a uma variedade de finalidades.
As imagens a seguir mostram uma prévia dos templates de blog do Twenty Twenty-Five da Figma. Aqui estão alguns dos templates de blogs pessoais.
E aqui estão alguns dos templates de fotoblog.
Os templates Twenty Twenty-Five são minimalistas e projetados para oferecer uma interface simples e clara. Assim como as partes de template, os templates são fortemente baseados em padrões de blocos. Para ter uma ideia, abra um dos arquivos .html que você pode encontrar na pasta templates do tema Twenty Twenty-Five e verifique o código. Abaixo está o código-fonte do arquivo archive.html:
<!-- wp:template-part {"slug":"header","area":"header","tagName":"header"} /-->
<!-- wp:group {"tagName":"main","style":{"spacing":{"margin":{"top":"var:preset|spacing|60"}}},"layout":{"type":"constrained"}} -->
<main class="wp-block-group" style="margin-top:var(--wp--preset--spacing--60)">
<!-- wp:query-title {"type":"archive"} /-->
<!-- wp:term-description /-->
<!-- wp:pattern {"slug":"twentytwentyfive/posts-personal-blog"} /-->
<!-- wp:pattern {"slug":"twentytwentyfive/more-posts"} /-->
</main>
<!-- /wp:group -->
<!-- wp:template-part {"slug":"footer","tagName":"footer"} /-->O conteúdo da página de arquivo é gerado pelos blocos Query title e Term description e pelos padrões List of posts, 1 coluna (posts-personal-blog) e Mais posts (more-posts).
Com base nesse código, você pode facilmente criar um template personalizado para o seu site. Como exemplo, se você quiser substituir a lista de posts por um layout de fotoblog, pode fazer isso facilmente alterando o padrão usado neste template.
No Editor de sites, navegue até a seção Templates e clique em Add New template. Você será solicitado a selecionar o tipo de conteúdo ao qual o seu template deve ser aplicado. Neste exemplo, selecionamos Category Archives.
Em seguida, você deve decidir se o template será usado para todas as categorias ou para uma categoria específica. Por fim, você verá um ou mais templates para começar e fazer suas edições.
Mas você também pode criar tudo do zero. Neste exemplo, estamos fazendo uma pequena alteração no código do arquivo archive.html e usando o padrão twentytwentyfive/photo-blog-posts em vez de twentytwentyfive/posts-personal-blog. A página de arquivo de categoria do WordPress agora exibe uma galeria de fotos.
Resumo
O Twenty Twenty-Five, o próximo tema padrão a ser lançado com o WordPress 6.7, foi projetado com uma filosofia de simplicidade para os usuários e flexibilidade para os desenvolvedores. Graças aos seus padrões e estilos de blocos diversos e versáteis, esse tema tem como objetivo ajudar os usuários a contar histórias interessantes. Ele inclui muitas imagens inspiradoras do Openverse que são perfeitamente integradas aos padrões de blocos do tema.
A estrutura do tema gira em torno de coleções de blocos, padrões e partes de templates aninhados, o que torna mais fácil do que nunca projetar layouts complexos sem conhecimento avançado de codificação.
O Twenty Twenty-Five é mais um passo para democratizar o design. Seja você um desenvolvedor experiente ou um iniciante, o Twenty Twenty-Five fornece uma base sólida para explorar temas de blocos e, com o conhecimento certo, você pode até criar seu próprio tema para compartilhar com a comunidade WordPress.
É a sua vez. Você já testou o Twenty Twenty-Five em um ambiente de desenvolvimento? Compartilhe suas impressões conosco nos comentários abaixo.
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.
Deixe um comentário