Basado en la idea de que las cosas sencillas deben ser intuitivas mientras que las complejas deben ser posibles, Twenty Twenty-Five es un tema predeterminado de WordPress flexible y fácilmente ampliable, creado para ayudar a la gente a contar historias, gracias a sus numerosos patrones y estilos.
Twenty Twenty-Five llegará con WordPress 6.7. Viene con un amplio conjunto de imágenes inspiradoras de Openverse, el repositorio gratuito de imágenes compartidas por y para la comunidad de WordPress. Estas imágenes están incrustadas en los patrones de bloques de Twenty Twenty-Five y listas para ser utilizadas para contar historias que evoquen «ideas relacionadas con lo efímero, el paso del tiempo y la evolución continua».
El papel central de los patrones en Twenty Twenty-Five es una prueba de cómo el desarrollo de temas de bloques se centra cada vez más en la interfaz del editor del sitio y menos en escribir código PHP y JavaScript.
Ahora, incluso los usuarios sin conocimientos avanzados de programación pueden crear un tema. Sólo necesitas tener una buena noción de cómo funciona theme.json y de cómo crear patrones de bloques.
Las plantillas y partes de plantillas que verás en Twenty Twenty-Five son colecciones de bloques anidados, patrones y partes de plantillas que constituyen los elementos estructurales de cada tipo de diseño.
Twenty Twenty-Five constituye un excelente ejemplo de la filosofía de democratización del diseño, y este artículo te mostrará su estructura en detalle.
Twenty Twenty-Five proporciona un ejemplo excelente para que aprendas todo sobre los temas de bloques de WordPress, y si has leído nuestra introducción a theme.json podrás crear tus propios temas de WordPress y compartirlos con todo el ecosistema.
Pero vayamos al grano y comencemos nuestro viaje por Twenty Twenty-Five, el próximo tema predeterminado de WordPress.
Patrones y partes de la plantilla
Twenty Twenty-Five proporciona una serie de patrones de bloques y partes de plantillas que ayudan a los usuarios de WordPress a construir sus entradas y páginas en cuestión de minutos. Estos patrones y partes de plantillas se han diseñado para diversos fines, como páginas de destino, productos y servicios, eventos, llamadas a la acción, páginas acerca de y mucho más.
En la carpeta del tema, encontrarás los archivos correspondientes en los directorios parts y patterns. Cuando abras cualquier archivo de parte de plantilla, verás que cada parte de plantilla sólo incluye un enlace a un patrón de bloques. Aquí tienes el código de la parte de plantilla header.html:
<!-- wp:pattern {"slug":"twentytwentyfive/header"} /-->
Las partes de plantilla también necesitan estar registradas, por lo que las encontrarás listadas en theme.json de Twenty Twenty-Five bajo la propiedad 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"
}
]
}La propiedad area determina la sección de la página en la que encaja una parte de plantilla y la categoría correspondiente, name es el slug de la parte de plantilla y title es la cadena de texto que se utiliza para crear la etiqueta que identifica la parte de plantilla en la pantalla.
La carpeta patterns del tema Twenty Twenty-Five incluye un buen número de archivos .php. Puedes abrir cualquiera de estos archivos y comprobar el código para aprender cómo se construyen los bloques de plantilla. Estos patrones proporcionan excelentes ejemplos de potentes funciones de WordPress añadidas recientemente al core. Por ejemplo, el archivo copyright.php incluye el siguiente 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 -->
Puedes ver a simple vista que este patrón utiliza la función Block Bindings introducida en WordPress 6.5 para generar dinámicamente el contenido del texto Copyright.
Aquí, el atributo content del patrón Copyright está conectado a una fuente definida en el tema Twenty Twenty-Five.
Si te preguntas dónde está definida esta cadena de texto, consulta el archivo functions.php de Twenty Twenty-Five y encuentra el siguiente 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' genera la cadena de texto que se muestra en la página, mientras que la llamada de retorno twentytwentyfive_copyright_binding proporciona la cadena de texto formateada:
/**
* 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;Si todo esto te parece un poco complicado, piensa en lo fácil que es para el usuario crear diseños complejos simplemente utilizando los elementos disponibles en la caja.
Y piensa también en lo fácil que es para un desarrollador crear plantillas y patrones de bloques generando su código directamente en el editor del Sitio. Y la integración con la API Block Bindings abre la puerta a infinitas posibilidades de integración con fuentes de datos externas.
Twenty Twenty-Five ofrece otros buenos ejemplos de uso de los patrones de bloques. Por ejemplo, puedes construir diseños avanzados simplemente juntando patrones existentes en otros patrones.
Cuando exploras patrones en el editor de Sitios, puedes ver varios diseños de páginas de aterrizaje en la categoría de patrones Páginas.
Estos patrones son diseños preconstruidos y están listos para que los utilices en tus páginas. Cuando creas una nueva página, el editor muestra una superposición en la que puedes elegir un patrón de bloque. Puede que quieras empezar con un patrón de página de aterrizaje y personalizarlo en función de tus necesidades.
También puedes cambiar el patrón de página predeterminado y utilizar el que mejor se adapte a tu proyecto.
Ahora vamos a sumergirnos en el código de la página de Aterrizaje para el patrón Libro. Dirígete a la carpeta patterns de Twenty Twenty-Five y abre page-landing-book.php. Deberías ver el siguiente 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"} /-->Es sólo una colección de patrones de bloques. Esto debería demostrar lo fácil que es crear plantillas complejas tanto para desarrolladores como para usuarios. Los desarrolladores pueden crear partes de plantillas complejas y patrones de bloques simplemente anidando patrones preconstruidos en otros patrones con sólo unos clics. Construir una página de destino nunca ha sido tan fácil.
Estilos
Twenty Twenty-Five cuenta con un variado conjunto de fuentes que soportan varios lenguajes y un buen número de paletas de colores predefinidas agrupadas como variaciones de estilo.
Fuentes
Twenty Twenty-Five incluye 9 fuentes con muchas variantes. Puedes seleccionar las fuentes que quieras utilizar en tu sitio web en la interfaz de Estilos globales, en Tipografía.
Estas familias de fuentes están almacenadas en la carpeta assets/fonts de Twenty Twenty-Five y registradas en theme.json.
El siguiente fragmento registra cinco variantes de la familia tipográfica 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\""
}
]
},
...
}
}
}La siguiente imagen muestra las variantes de la fuente Fira Code en el editor del sitio.
Twenty Twenty-Five también incluye 8 tipos de tipografía. Sólo tienes que elegir una en la sección Tipografía de la interfaz de Estilos globales y se aplicará a todo tu sitio web.
Si seleccionas la tipografía número 7, «Platypi & Literata», estas dos fuentes se aplicarán automáticamente a todos los elementos de tu sitio web: Literata se aplica a la mayoría de los elementos de texto y Platypi se aplica al título del sitio, a los encabezados y a los bloques de botones.
Este preajuste está registrado en el archivo typography-preset-6.json en 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"
}
}
}
}
}Colores
Twenty Twenty-Five proporciona una paleta predeterminada con 8 colores. Estos colores se definen en theme.json como sigue:
{
"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"
}
]
},
...
}
Twenty Twenty-Five también proporciona 8 paletas de colores adicionales definidas como variaciones de estilo. Puedes encontrarlas en la carpeta styles/colors del tema.
La siguiente imagen muestra la paleta de colores Sunrise.
Plantillas
Twenty Twenty-Five también proporciona un conjunto considerable de plantillas para que puedas crear cualquier tipo de blog. Puedes crear blogs personales que incluyan una cantidad considerable de texto, blogs de fotos y portfolios con diversas estructuras de diseño, y blogs más estructurados orientados a diversos fines.
Las siguientes imágenes muestran vistas previas de las plantillas de blog Twenty Twenty-Five de Figma. Aquí tienes algunas de las plantillas de blogs personales.
Y aquí tienes algunas de las plantillas de fotoblog.
Las plantillas Twenty Twenty-Five son minimalistas y están diseñadas para ofrecer una interfaz sencilla y clara. Al igual que las partes de las plantillas, éstas se basan en gran medida en patrones de bloques. Para hacerte una idea, abre uno de los archivos .html que puedes encontrar en la carpeta templates del tema Twenty Twenty-Five y comprueba el código. A continuación se muestra el código fuente del archivo 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"} /-->El contenido de la página de archivo está generado por los bloques Query title (Título de la consulta) y Term description (Descripción del término) y los patrones List of posts (Lista de entradas), 1 columna (posts-personal-blog) y Más entradas (more-posts).
Basándote en este código, puedes crear fácilmente una plantilla personalizada para tu sitio web. Por ejemplo, si quieres sustituir la lista de entradas por un diseño de blog de fotos, puedes hacerlo fácilmente cambiando el patrón utilizado en esta plantilla.
En el Editor del sitio, ve a la sección Plantillas y haz clic en Añadir nueva plantilla. Se te pedirá que selecciones el tipo de contenido al que debe aplicarse tu plantilla. En este ejemplo, hemos seleccionado Archivos de categoría.
A continuación, debes decidir si la plantilla se utilizará para todas las categorías o para una categoría específica. Por último, se te mostrarán una o varias plantillas para que empieces con ellas y hagas tus ediciones.
Pero también puedes construirlo todo desde cero. En este ejemplo, estamos haciendo un pequeño cambio en el código del archivo archive.html y utilizando el patrón twentytwentyfive/photo-blog-posts en lugar de twentytwentyfive/posts-personal-blog. La página de archivo de categorías de WordPress ahora muestra una galería de fotos.
Resumen
Twenty Twenty-Five, el próximo tema predeterminado que se lanzará con WordPress 6.7, está diseñado con una filosofía de simplicidad para los usuarios y flexibilidad para los desarrolladores. Gracias a sus diversos y versátiles patrones de bloques y estilos, este tema pretende ayudar a los usuarios a contar historias convincentes. Incluye muchas imágenes inspiradoras de Openverse que se integran perfectamente en los patrones de bloques del tema.
La estructura del tema gira en torno a colecciones de bloques anidados, patrones y partes de plantillas, lo que facilita más que nunca el diseño de composiciones complejas sin conocimientos avanzados de programación.
Twenty Twenty-Five es un paso más hacia la democratización del diseño. Tanto si eres un desarrollador experimentado como un principiante, Twenty Twenty-Five proporciona una base sólida para explorar los temas de bloques y, con los conocimientos adecuados, puedes incluso crear tu propio tema para compartirlo con la comunidad de WordPress.
Ahora te toca a ti. ¿Has probado ya Twenty Twenty-Five en un entorno de desarrollo? Comparte tus sensaciones con nosotros en los comentarios.
Deja una respuesta