Twenty Twenty-Four es el nuevo tema predeterminado de WordPress que se incluirá en la próxima versión WordPress 6.4.

La idea que hay detrás de Twenty Twenty-Four es la de un tema predeterminado adecuado para cualquier tipo de sitio, sea cual sea su temática. El tema está adaptado a tres casos de uso: propietarios de pequeñas empresas, fotógrafos y artistas, y escritores y blogueros.

Más que un tema, Twenty Twenty-Four es una colección de plantillas y patrones que, combinados entre sí, te permiten crear una amplia variedad de sitios web. Como tal, puedes considerar Twenty Twenty-Four un tema polivalente, aunque sea un tema absolutamente minimalista.

Como puedes esperar, Twenty Twenty-Four es un tema de bloques totalmente compatible con todas las cosas increíbles que vienen con WordPress 6.4, incluido el bloque de detalles y el texto vertical.

Tras esta rápida introducción del nuevo tema predeterminado de WordPress, en este artículo exploraremos las numerosas plantillas, patrones y estilos para mostrarte cómo crear un sitio web atractivo, adaptable, usable y accesible con Twenty Twenty-Four.

Ahora, inicia el Editor de Sitios, teclea Cmd + k, y entra en Plantillas.

Launching templates in WordPress 6.4
Iniciar las plantillas en WordPress 6.4

El Tema Twenty Twenty-Four de WordPress

Twenty Twenty-Four nos ofrece un ejemplo perfecto de tema de WordPress en bloque. Cuando accedas a la carpeta del tema en tu instalación de WordPress, encontrarás un archivo functions.php extremadamente sencillo, cuyo único propósito es poner en cola un puñado de hojas de estilo para bloques específicos.

El archivo functions de Twenty Twenty-Four es un buen ejemplo de cómo optimizar un tema asegurándose de que los recursos específicos se incrustan sólo cuando son necesarios. El siguiente código solicita la hoja de estilo button-outline.css sólo cuando hay un botón en la 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;

El tema no proporciona ninguna funcionalidad a tu sitio web WordPress, y dependerás completamente de los plugins para añadir comportamiento a tus páginas. Por tanto, el archivo functions.php de Twenty Twenty-Four sólo se encarga de poner en cola hojas de estilo específicas para bloques concretos.

Continuando con nuestra exploración de la carpeta del tema Twenty Twenty-Four, observarás que el archivo style.css sólo incluye una cabecera con los detalles necesarios para que el tema funcione correctamente y no contiene ningún bloque 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
*/

También encontrarás una carpeta assets, que contiene una carpeta fonts, un conjunto de imágenes y una carpeta css, que incluye la hoja de estilo button-outline.css.

El estilo por defecto de Twenty Twenty-Four utiliza dos fuentes: Cardo para los titulares e Inter para otros elementos de texto.

Cardo font preview on Google Fonts
Vista previa de la fuente Cardo en Google Fonts

Las familias de fuentes Jost e Instrument Sans también están disponibles y se utilizan en un par de variaciones de estilo. A continuación, encontrarás cuatro carpetas que contienen el verdadero jugo del tema predeterminado Twenty Twenty-Four:

  • styles
  • patterns
  • parts
  • templates

Estilos Globales

Twenty Twenty-Four Styles section
Sección de Estilos de Twenty Twenty-Four

Twenty Twenty-Four viene con un conjunto de seis combinaciones diferentes de variaciones de estilo. Puedes explorar cada estilo en la sección Styles del Editor de Sitios o en el panel Explorar estilos en modo edición.

Twenty Twenty-Four Browse styles panel
Panel pare explorar estilos de Twenty Twenty-Four

El estilo predeterminado se define en el archivo theme.json y viene con 11 colores, 12 degradados, 5 combinaciones de colores duotono y dos familias de fuentes: Inter para el cuerpo del contenido, y Cardo para los encabezados.

Twenty Twenty-Four default gradients and duotones
Degradados y duotonos por defecto de Twenty Twenty-Four

Cada variación añade combinaciones de estilo específicas.

En el momento de escribir esta entrada, Twenty Twenty-Four viene con las siguientes variaciones de estilo:

Ice: Esta variación es bastante similar al estilo por defecto. Utiliza la misma paleta de colores predeterminada con una fuente de sistema para los encabezados e Inter para el cuerpo.

Twenty Twenty-Four Ice style variation
Variación de estilo Twenty Twenty-Four Ice

Milky: Esta variación viene con las mismas familias de fuentes predeterminadas pero con una paleta de colores diferente.

Twenty Twenty-Four Milky color palette
Paleta de colores de Twenty Twenty-Four Lácteo

Mint: Mint añade una variación tanto en la paleta de colores como en las familias de fuentes. Utiliza Instrument Sans para los encabezados y Jost para el cuerpo.

The Mint variation changes font family and color palette
La variación Mint cambia la familia de fuentes y la paleta de colores

Onyx: Es la versión oscura del estilo por defecto. Añade una paleta personalizada, degradados y combinaciones duotono.

Onyx gradients and duotone combinations
Degradados Onyx y combinaciones duotono

Rust: Óxido utiliza una paleta de colores agradable. La tipografía se basa en las familias de fuentes predeterminadas, pero con distintos tamaños de fuente.

Twenty Twenty-Four Rust style variation
Variación del estilo deTwenty Twenty-Four

Sandstorm: Esta variación cambia varios elementos del estilo por defecto. Sandstorm tiene una paleta de 11 colores, utiliza las familias tipográficas Instrument Sans y Jost, y personaliza el aspecto de varios bloques y elementos HTML.

Sandstorm's color palette
Paleta de colores de Sandstorm

Plantillas

Twenty Twenty-Four templates in the Site Editor
Plantillas de Twenty Twenty-Four en el Editor de Sitios

Twenty Twenty-Four viene con once plantillas incorporadas. Puedes encontrar los archivos correspondientes en la carpeta de plantillas del directorio del tema:

  • single.html
  • single-con-barra-lateral.html
  • buscar.html
  • página.html
  • página-con-barra.html
  • página.html
  • página-sin-título.html
  • index.html
  • inicio.html
  • archivo.html
  • 404.html

Puedes acceder a la lista de plantillas para tus personalizaciones en la sección Plantillas del Editor de Sitios.

Ahora bien, si quieres profundizar en el código de las plantillas de Twenty Twenty-Four, sólo tienes que abrir una o dos de ellas en tu editor de código favorito. No es ninguna sorpresa que cada plantilla incluya uno o más patrones. Esto demuestra una vez más que Twenty Twenty-Four es más o menos una colección de patrones.

Toma por ejemplo index.html y ábrelo en tu editor. Deberías ver el siguiente 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"} /-->

La plantilla comienza con un elemento div que incluye la parte de plantilla header. Un elemento main con un encabezado y la plantilla posts-three-columns produce el cuerpo, mientras que la parte de plantilla footer construye el fondo de la página.

Ahora comparemos index.html con 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"} /-->

Verás que las dos plantillas son bastante similares. La única diferencia es que archive.html utiliza un bloque de título Archivo en lugar de un elemento H1. Ambas plantillas utilizan un patrón posts-three-columns para generar el contenido de la página.

Cambiando de tu editor HTML al editor del sitio de WordPress, puedes previsualizar y personalizar las plantillas del tema. La imagen de abajo muestra la plantilla Archivo en modo edición.

Editing Twenty Twenty-Four's Archive template
Editar la plantilla Archivo de Twenty Twenty-Four

Cuando estés satisfecho con tus cambios, haz clic en Guardar en la esquina superior derecha. Esto mostrará un nuevo panel en el que puedes confirmar tus cambios o descartarlos. Vuelve a hacer clic en Guardar y habrás terminado.

Partes de la Plantilla y Patrones

Twenty Twenty-Four patterns
Patrones de Twenty Twenty-Four

Puedes encontrar patrones y partes de plantillas en dos carpetas diferentes del directorio twentytwentyfour. La carpeta de patrones incluye más de 50 patrones, mientras que la carpeta de parts incluye seis piezas de plantilla.

En el Editor de Sitios, las partes de plantilla y los patrones están todos incluidos en la misma sección Patrones.

Twenty Twenty-Four proporciona varios patrones que puedes utilizar para construir la página completa. Esto simplifica el flujo de trabajo de edición y te permite construir todo tu sitio web con pocas personalizaciones.

Algunos ejemplos son los patrones Página de inicio, Página Acerca de y Página de presentación del portafolio, que aparecen en la categoría de patrones Acerca de.

Full page patterns in Twenty Twenty-Four
Patrones de página completa en Twenty Twenty-Four

Digamos, por ejemplo, que quieres crear una página Acerca de. Gracias al patrón Acerca de de Twenty Twenty-Four, puedes crear una página nueva y elegir simplemente el patrón del insertador de bloques.

Adding a pattern to an empty page with Twenty Twenty-Four
Añadir un patrón a una página vacía con Twenty Twenty-Four

El patrón Acerca de proporciona todo el diseño de la página y tú sólo tienes que añadir tus personalizaciones, añadiendo o cambiando bloques, imágenes y texto en función de tus necesidades. Y si te preguntas qué ocurre con la estructura de tu página si cambias el tema, la respuesta es absolutamente nada. Una vez incluido en tu página, el tema pasa a formar parte del contenido y se almacena en la tabla posts de la base de datos de WordPress.

Previewing a Twenty Twenty-Four pattern with the Twenty Twenty-Three theme
Vista previa de un patrón Twenty Twenty-Four con el tema Twenty Twenty-Three

Cuando te desplaces por el menú de navegación Patrones, encontrarás la sección Partes de la plantilla, que incluye los elementos de menú Encabezado, Pie de página y General. Cada elemento es el punto de entrada a la categoría de partes de plantilla correspondiente. Twenty Twenty-Four proporciona un encabezado, tres pies de página y dos partes de plantilla generales.

Twenty Twenty-Four's patterns and template parts in the Site Editor
Patrones y partes de plantilla de Twenty Twenty-Four en el Editor de Sitios

Pero si abres las partes de plantilla de Twenty Twenty-Four en tu editor de código favorito, verás que la mayoría de ellas simplemente incluyen un patrón. Por ejemplo, la parte de plantilla Sidebar:

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

Esta parte de plantilla simplemente incluye el patrón Barra lateral. No encontrarás este patrón listado en tu sección de Patrones del Editor de Sitios porque es un patrón oculto. Si quieres bucear en el código, ve a la carpeta de patrones del tema, busca el archivo hidden-sidebar.php y ábrelo en tu editor de código.

La cabecera de este archivo confirma que se trata de un patrón oculto y que no es accesible a través del insertador de bloques:

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

Resumen

Si buscas un tema polivalente lleno de funciones y efectos especiales, Twenty Twenty-Four no es el tema para ti.

El nuevo tema predeterminado de WordPress es ligero, flexible y carece de campanas y silbatos, y es totalmente manejable desde el editor del sitio.

Con Twenty Twenty-Four no tendrás que tocar ni una sola línea de código, no requiere configuración. Para crear un sitio con Twenty Twenty-Four, sólo tienes que personalizar las plantillas desde el editor del sitio y elegir uno o varios patrones para poblar las páginas de tu sitio.

En esencia, Twenty Twenty-Four es una colección de patrones. Refleja el nuevo enfoque de la construcción de sitios y proporciona un gran ejemplo de cómo construir temas en bloque.

Ahora depende de ti. ¿Has instalado Twenty Twenty-Four en tu entorno de desarrollo? ¿Te gusta el nuevo enfoque de la creación de sitios de WordPress? Escríbenos en los comentarios y comparte tus opiniones.

Carlo Daniele Kinsta

Carlo es un diseñador y desarrollador de front-end freelance. Cuando escribe artículos y tutoriales, Carlo se ocupa principalmente de los estándares web, pero cuando juega con sitios web, su mejor compañero de trabajo es WordPress.