Twenty Twenty-Three é o novíssimo tema padrão do WordPress sendo lançado com WordPress 6.1.
É um tema minimalista, sem imagens ou funcionalidades adicionais. Ele dá o seu melhor como tema inicial para construir templates e variações de estilo e também testar todas as funcionalidades introduzidas com as últimas versões do WordPress. O tema pode ser visto como um verdadeiro ambiente de desenvolvimento e teste, embora o estilo minimalista, a capacidade de resposta e a leveza o tornem uma boa opção para a criação de blogs e sites adequados para uma grande variedade de propósitos.
Em sua introdução ao tema Twenty Twenty-Two, Kjell Reigstad escreveu sobre o futuro dos temas padrão:
Inovações como theme.json, modelos de blocos e padrões de blocos estão tornando o desenvolvimento de temas muito mais simples, e estão fornecendo novas maneiras para os usuários customizarem seus sites. Há razões para acreditar que a comunidade pode alavancar tudo isso para construir temas mais frequentes e diversificados e soluções de customização para nossos usuários nos próximos anos.
E Channing Ritter fez a seguinte proposta:
E se, ao invés de enfatizarmos o tema em si, nós destacamos um conjunto de variações de estilo com opiniões criadas por membros da comunidade? Poderíamos usar Twenty Twenty-Two como base para um novo tema que é despojado e mínimo – uma tela em branco para deixar brilhar uma gama diversificada de variações de estilo.
E é isso que está acontecendo com o novo tema padrão do Twenty Twenty-Three. A comunidade foi chamada para participar ativamente no projeto do tema padrão do WordPress, e gostamos disso porque ele faz do novo tema o resultado de um trabalho genuinamente participativo.
Mas antes de descobrir as variações de estilo que vêm em conjunto com o novo tema padrão do WordPress, vamos descobrir as funcionalidades básicas do Twenty Twenty-Three e para que ele pode ser adequado.
Layouts e estilos de página
Como mencionado acima, Twenty Twenty-Three é uma versão despojada de Twenty Twenty-Two. O que é marcante no novo tema padrão é sua simplicidade e leveza. O Twenty Twenty-Three é flexível e perfeitamente adequado aos mais recentes recursos de edição do site do Gutenberg, tais como edição de modelos, variações de Estilos Globais, Tipografia de Fluidos e padrões de blocos.
Portanto, não será surpresa que nas telas mostradas neste artigo, você verá páginas mínimas sem sinos e apitos, mas perfeitamente adequadas para personalização e testes.
Para lhe dar um exemplo disso, a imagem abaixo mostra páginas com e sem imagens em destaque.
A imagem a seguir compara a página inicial com uma página de arquivo.
Mesmo que o novo tema seja uma versão simplificada do Twenty Twenty-Two, comparado com o tema padrão anterior, Twenty Twenty-Three apresenta algumas diferenças-chave.
Primeiro, o tamanho dos cabeçalhos foi reduzido e a fonte serif padrão foi substituída por uma fonte sans serif do sistema.
Além disso, uma paleta de cores diferentes foi aplicada. Você pode ver a nova definição da paleta Twenty Twenty-Three no seguinte código do theme.json:
{
"settings": {
"appearanceTools": true,
"color": {
"palette": [
{
"color": "#ffffff",
"name": "Base",
"slug": "base"
},
{
"color": "#000000",
"name": "Contrast",
"slug": "contrast"
},
{
"color": "#9DFF20",
"name": "Primary",
"slug": "primary"
},
{
"color": "#345C00",
"name": "Secondary",
"slug": "secondary"
},
{
"color": "#F6F6F6",
"name": "Tertiary",
"slug": "tertiary"
}
]
},
}
}
Mas a principal característica do novo tema padrão é seu conjunto de variações de estilo. Twenty Twenty-Three vem com dez variações globais de estilo, cada uma delas mostrando uma combinação diferente de cores, família de fontes e tamanhos de fontes.
Você encontrará os arquivos JSON correspondentes na pasta Twenty Twenty-Three styles.
Visualizações completas dos modelos de página, estilos e variações de estilo de Twenty Twenty-Three estão disponíveis na Figma.
Tipografias do Twenty Twenty-Three
Em um tema mínimo como Twenty Twenty-Three, a tipografia desempenha um papel fundamental para tornar o texto legível, o site atraente, oferecendo aos visitantes uma experiência de navegação gratificante, independentemente do dispositivo e do tamanho da tela.
Para este propósito, Twenty Twenty-Three vem com um novo conjunto de famílias de fontes e usa a tipografia fluida introduzida com o WordPress 6.1.
Tipografias
Twenty Twenty-Three apresenta um novo conjunto de fontes usadas em variações de estilo e caracterizadas pela simplicidade e variedade:
- Fonte do Sistema –
var(--wp--preset--font-family--system-font) - IBM Plex Mono –
var(--wp--preset--font-family--ibm-plex-mono) - Inter –
var(--wp--preset--font-family--inter) - Fonte Serif Pro –
var(--wp--preset--font-family--source-serif-pro) - DM Sans –
var(--wp--preset--font-family--dm-sans)
IBM Plex Mono é parte do conjunto de fontes IBM Plex, a nova fonte corporativa IBM typeface lançada sob a licença SIL Open Font License (OFL). Você pode ver uma prévia dela no Adobe Fonts e nos sites da IBM.
Inter é uma família de fontes gratuitas e de código aberto criada e projetada para telas de computador por Rasmus Andersson. Você pode visualizar e baixar a família de fontes no site do Rasmus Andersson ou no Google Fonts.
Source Serif Pro é um tipo de letra da Adobe Originals e você pode usá-lo gratuitamente com uma conta Adobe Fonts (leia mais sobre o licenciamento de fontes da Adobe).
DM Sans é outro tipo de letra licenciado sob a SIL Open Font License (OFL), que foi encomendado pelo Google à Colophon Foundry, e projetado pela Colophon Foundry, Jonny Pinhorn, e Indian Type Foundry.
Tipografia e espaçamento de fluidos
Twenty Twenty-Three usa Typography Fluid e Spacing Presets introduzidos com WordPress 6.1.
O novo tema padrão do WordPress fornece um grande exemplo de implementação de tipografia fluida nos temas do WordPress e você pode usá-lo como modelo para adicionar suporte a este recurso em seus temas.
O código a seguir mostra settings.typography.fluid e settings.typography.fontSizes[] definições de propriedades no theme.json:
"settings": {
...
"typography": {
"fluid": true,
"fontSizes": [
{
"fluid": {
"min": "0.875rem",
"max": "1rem"
},
"size": "1rem",
"slug": "small"
},
{
"fluid": {
"min": "1rem",
"max": "1.125rem"
},
"size": "1.125rem",
"slug": "medium"
},
{
"size": "1.75rem",
"slug": "large",
"fluid": false
},
{
"size": "2.25rem",
"slug": "x-large",
"fluid": false
},
{
"size": "10rem",
"slug": "xx-large",
"fluid": {
"min": "4rem",
"max": "20rem"
}
}
]
}
}A configuração typography.fluid adiciona suporte para tipografia de fluidos enquanto typography.fontSizes[].fluid define o valor mínimo e máximo do tamanho da fonte.
Além da tipografia de fluidos, Twenty Twenty-Three também suporta o espaçamento entre fluidos.
Antes do WordPress 6.1, só era possível definir valores de espaçamento personalizados no editor. Isto significa que antes do WordPress 6.1 os autores do tema não conseguiam especificar valores fixos para padding, margem e espaço. Isto resultou em várias limitações. Por exemplo, não era possível transferir facilmente configurações de espaçamento entre diferentes temas ou manter valores de espaçamento ao copiar e colar conteúdo e padrões de blocos entre diferentes sites.
Os temas podem declarar o suporte a espaçamento de fluidos usando as novas configurações spacing.spacingScale e spacing.spacingSizes (leia mais em Theme.json: Adicionar predefinições de tamanho de espaçamento). Em Twenty Twenty-Three, isto é feito com as seguintes configurações:
"settings": {
"spacing": {
"spacingScale": {
"steps": 0
},
"spacingSizes": [
{
"size": "clamp(1.5rem, 5vw, 2rem)",
"slug": "30",
"name": "30"
},
{
"size": "clamp(1.8rem, 1.8rem + ((1vw - 0.48rem) * 2.885), 3rem)",
"slug": "40",
"name": "40"
},
{
"size": "clamp(2.5rem, 8vw, 6.5rem)",
"slug": "50",
"name": "50"
},
{
"size": "clamp(3.75rem, 10vw, 7rem)",
"slug": "60",
"name": "60"
},
{
"size": "clamp(5rem, 5.25rem + ((1vw - 0.48rem) * 9.096), 8rem)",
"slug": "70",
"name": "70"
},
{
"size": "clamp(7rem, 14vw, 11rem)",
"slug": "80",
"name": "80"
}
],
"units": [
"%",
"px",
"em",
"rem",
"vh",
"vw"
]
}
}O vídeo abaixo mostra a Tipografia de fluidos em ação no Twenty Twenty-Three.
Você pode verificar tipografia e espaçamento pré-definidos na Especificação de Design.
Templates e Partes do template
Com o Twenty Twenty-Three, você verá em ação todas as funcionalidades e melhorias de edição do site vindo com o WordPress 6.1.
Isso é particularmente verdadeiro com os modelos e as partes do template.
Quando você abrir o Editor do Site com Twenty Twenty-Three rodando no seu site, você verá uma lista de onze templates e quatro partes de templates.
A imagem abaixo mostra o template 404 no editor do site.
Você encontrará os arquivos HTML correspondentes em Twenty Twenty-Three templates e partes do template.
A imagem abaixo mostra a parte do template de comentários no modo de edição:
Você encontrará templates personalizados e partes de templates definidos no theme.json.
Templates personalizados
Além dos templates padrão, o Twenty Twenty-Three fornece os seguintes templates personalizados:
- Em branco
- Blog (Alternativa)
- 404
- Com Imagem em Destaque
- Com Bloco de Cobertura
Estes modelos são definidos no theme.json da seguinte forma:
{
"customTemplates": [
{
"name": "blank",
"postTypes": [
"page",
"post"
],
"title": "Blank"
},
{
"name": "blog-alternative",
"postTypes": [
"page"
],
"title": "Blog (Alternative)"
},
{
"name": "404",
"postTypes": [
"page"
],
"title": "404"
},
{
"name": "with-featured-image",
"postTypes": [
"page",
"post"
],
"title": "With Featured Image"
},
{
"name": "with-cover-block",
"postTypes": [
"page",
"post"
],
"title": "With Cover Block"
}
],
}Partes do template
As partes do template são definidas como se segue.
{
"templateParts": [
{
"area": "header",
"name": "header",
"title": "Header"
},
{
"area": "footer",
"name": "footer",
"title": "Footer"
},
{
"area": "uncategorized",
"name": "comments",
"title": "Comments"
},
{
"area": "uncategorized",
"name": "post-meta",
"title": "Post Meta"
}
]
}Estilos globais e variações de estilo
Como mencionado acima, a partir do WordPress 6.0, os autores de temas podem agrupar vários conjuntos de estilos com seus temas, permitindo que os usuários alternem entre variações de estilo sem alterar seu tema.
Esta grande característica do WordPress é a principal característica do novo tema padrão, pois o Twenty Twenty-Three fornece dez combinações de estilo pré-construído para escolher.
Você pode navegar por estes estilos na interface Global Style do Editor do seu Site. Aqui você pode:
- Mudar o estilo global a partir do painel de estilos Browse.
- Personalizar configurações de tipografia – texto, links, cabeçalhos e botões
- Editar cores padrão ou mudar a cor de elementos específicos
- Personalizar o layout da área principal do conteúdo
- Personalizar a aparência de elementos específicos
Vale notar novamente que na criação de tantas variações de estilo, o envolvimento da comunidade foi crucial. Após o início do projeto Twenty Twenty-Three, 38 submissões foram recebidas de 19 colaboradores de 8 países diferentes (você pode explorar todos os projetos no GitHub).
De 38, 10 variações de estilo foram selecionadas:
- Pitch é uma versão escura do estilo padrão que usa a família Inter font de Rasmus Andersson.
- Canary usa um único tipo de tamanho e uma largura de coluna estreita. Ele também usa um interessante efeito border-radius.
- Electric usa uma cor arrojada para toda a tipografia em todo o site.
- Pilgrimage é uma versão escura e colorida do tema base.
- Marigold é uma variação suave e agradável do estilo básico.
- Block-Out apresenta um efeito duotone nas imagens.
- Whisper mostra alguns elementos personalizados, como a borda ao redor da página, estilos de botões e o link único que sublinha.
- Sherbet tem um visual brilhante e colorido
- Grapes foram selecionadas por sua agradável combinação de paleta de cores e tipo de fonte.
- Aubergine é um fundo de cor dividida atraente que é mais escuro.
A coisa mais legal sobre variações de estilo é que você não precisa necessariamente ser um desenvolvedor frontend para criar seus estilos.
Caso você se sentir confortável com a codificação, você pode escolher um dos arquivos .json encontrados na pasta Twenty Twenty-Three styles e usá-lo como um template para construir sua variação de estilo.
Mas caso a codificação não é o seu forte, você pode usar o plugin oficial Create Block Theme, que você pode baixar gratuitamente do diretório de plugins do WordPress.org.
Primeiro, instale e ative o plugin, depois navegue até o editor de estilo. Uma vez aqui, personalize cores, tipografia e layout de acordo com suas preferências e salve suas mudanças.
Quando você estiver satisfeito com suas mudanças, encontre Create Block Theme em Appearance no menu de administração do WordPress.
Verifique o último item abaixo na lista: Create a style variation. Você será solicitado a atribuir um nome à sua variação de estilo. Digite o nome e clique em Create Theme. Isto criará um novo arquivo .json na pasta de estilos do tema.
Agora você pode personalizar ainda mais o seu estilo e até mesmo exportá-lo para outras instalações do WordPress.
O plugin Create Block Theme é uma ferramenta valiosa para tirar o máximo proveito dos recursos de criação de temas e modelos disponíveis com as últimas versões do WordPress. Já que você está nele, você pode dar uma olhada em todas as outras opções:
- Export Twenty Twenty-Three
- Create child of Twenty Twenty-Three
- Clone Twenty Twenty-Three
- Overwrite Twenty Twenty-Three
- Create blank theme
- Create a style variation
Resumo
Enquanto à primeira vista o novo tema padrão do WordPress pode parecer uma espécie de caixa vazia sem recursos, em uma inspeção mais detalhada, é muito mais do que isso, pois ele permite que você aproveite ao máximo os últimos recursos de edição do site WordPress.
Em Twenty Twenty-Three, você verá muitos templates e partes do template para personalizar, um conjunto de 10 variações de estilo para usar como base para a criação de sites únicos, e suporte para todas as novas funcionalidades disponíveis no WordPress 6.1, começando com Tipografia de fluidos e Sistema de Templates Melhorados.
Com Twenty Twenty-Three, a sensação é que a diferença entre a aparência e a funcionalidade do site agora é muito forte. A única função do tema é regular a aparência do site, deixando a adição de funcionalidade para os plugins. E deste ponto de vista, Twenty Twenty-Three faz um ótimo trabalho, oferecendo aos usuários de WordPress todas as últimas funcionalidades de edição do site do Gutenberg. Personalizar a aparência de um site nunca foi tão fácil.
Você já usou o novo tema em um ambiente de teste? Você já tentou criar variações de estilo personalizadas? Compartilhe suas ideias 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