Aunque un poco más tarde de lo previsto originalmente, vamos a tener un nuevo tema predeterminado de WordPress. ¡Su nombre es Twenty Twenty-Two!

El nuevo tema por defecto de WordPress viene con la próxima versión de WordPress 5.9. Teníamos curiosidad por saber más sobre el nuevo tema, así que instalamos y probamos Twenty Twenty-Two en un entorno de desarrollo local con WordPress 5.9.

Te mostraremos nuestros resultados antes de concluir nuestras reflexiones para ofrecerte un análisis en profundidad de los entresijos del nuevo tema de WordPress.

Twenty Twenty-Two preview
Una vista previa de Twenty Twenty-Two, el nuevo tema por defecto de WordPress (Fuente de la imagen: WordPress.org)

Twenty Twenty-Two ha sido diseñado para ser el tema por defecto más flexible, ligero y personalizable. Ofrece un amplio margen de maniobra para probar bloques, patrones y plantillas.

Al ser un tema de bloques, te ayudará a explorar mejor el Edición Completa del Sitio, los Estilos Globales, los bloques de Navegación y las nuevas galerías de imágenes, que son las características más esperadas que llegan con WordPress 5.9.

¡Tenemos que decir de inmediato que Twenty Twenty-Two es el primer tema de bloques por defecto!

Uno de los objetivos más ambiciosos del nuevo tema es empoderar a los usuarios. Con tantos patrones y plantillas disponibles desde el principio, los usuarios pueden construir diseños complejos con sólo unos pocos clics. El resto es sólo personalización de estilo.

Desde un punto de vista técnico, escribir sobre Twenty Twenty-Two no es muy diferente de escribir sobre las últimas y más potentes funciones que vienen con WordPress 5.9. Pero Twenty Twenty-Two nos proporciona una lupa para apreciar mejor las nuevas características de edición del sitio y tener una mejor idea del futuro de la plataforma.

Así que estamos aquí para presentarte el nuevo tema.

En primer lugar, exploraremos el nuevo flujo de edición del sitio que los usuarios experimentarán con WordPress 5.9 y Twenty Twenty-Two.

Después, nos sumergiremos en las principales características del tema de bloques implementadas en Twenty Twenty-Two. Conocerás los Estilos Globales, los patrones de bloques, las plantillas y las partes de las plantillas.

Pero hay mucho más que decir sobre Twenty Twenty-Two y los temas de bloques de WordPress. Así que, como capítulo extra, ofreceremos una rápida visión general de cómo ampliar las funciones de Twenty Twenty-Two aprovechando el archivo theme.json.

Pongamos manos a la obra y sumerjámonos en el nuevo tema por defecto de Twenty Twenty-Two para WordPress.

Twenty Twenty-Two trae un nuevo flujo de edición del sitio

Varias características de edición completa del sitio llegan al núcleo con WordPress 5.9. Los propietarios de sitios que utilicen la última versión de WordPress con un tema de bloque como Twenty Twenty-Two instalado pronto podrán:

  • Crear y editar entradas y páginas utilizando más bloques y patrones
  • Personalizar los ajustes y estilos definidos en el archivo theme.json a través de la interfaz de Estilos Globales
  • Crear y editar plantillas para páginas y entradas
  • Crear y editar partes de plantillas para la cabecera, el pie de página y otras áreas de la plantilla

Con todas estas características incorporadas al núcleo, los colaboradores del núcleo de WordPress han estado discutiendo la evolución de la arquitectura de la información y han rediseñado todo el Flujo de Edición del Sitio.

Lo primero que notarás una vez que hayas activado Twenty Twenty-Two es que el punto de entrada al editor del sitio ya no se encuentra en el menú principal de tu panel de control de WordPress, sino que se ha trasladado al menú Apariencia.

Editor menu
El nuevo menú Apariencia en WordPress 5.9

Reunir las funciones de edición de plantillas y estilos en el mismo menú Apariencia debería agilizar la experiencia de edición. Debería facilitar la comprensión de que las funciones a las que estás accediendo están relacionadas con la presentación de tus páginas.

¿Listo para sumergirte en el nuevo tema Twenty Twenty-Two? 🚀 No busques más 👀Click to Tweet

El elemento de menú Editor abre la plantilla de la página de inicio del sitio. Dependiendo de tu configuración de lectura, ésta puede ser tu página de últimas publicaciones o una página estática.

Site editor in Twenty Twenty-Two
El editor del sitio en WordPress 5.9 con Twenty Twenty-Two

Ahora, al hacer clic en el icono de WordPress en la esquina superior izquierda, aparece un nuevo menú de navegación del editor del sitio, que incluye tres elementos de menú: Sitio, Plantillas y Partes de Plantilla.

Echemos un vistazo más de cerca.

The Editor navigation menu
El menú de navegación del editor

La opción Sitio abre la plantilla de la página de inicio (últimos artículos del blog o página de inicio estática).

En la opción de menú Plantillas, obtendrás una lista de las plantillas disponibles. Puedes hacer clic en cualquier plantilla de la lista para iniciarla en el editor.

En el momento de escribir este artículo, Twenty Twenty-Two ofrece 11 plantillas.

Twenty Twenty-Two templates
Plantillas de Twenty Twenty-Two.

Si haces clic en el icono de la elipsis () de la derecha, podrás borrar tus personalizaciones.

Clear template customizations
Borrar las personalizaciones de las plantillas

A diferencia de las plantillas de los temas, las plantillas personalizadas sólo pueden ser renombradas o eliminadas (pero puedes editar las plantillas personalizadas en el editor de entradas).

Rename or delete custom templates
Renombrar/eliminar plantillas personalizadas

El elemento de menú Partes de Plantilla enumera las partes de plantilla disponibles que puedes abrir en el editor para tus personalizaciones.

Encontrarás cuatro partes de plantilla añadidas a Twenty Twenty-Two por defecto. Si pasas el cursor por encima de una plantilla modificada, aparecerá una información sobre la herramienta que te permitirá saber que la plantilla ha sido personalizada.

Twenty Twenty-Two template parts
Partes de plantilla de Twenty Twenty-Two.

Puedes borrar estas personalizaciones haciendo clic en el icono de la elipsis () de la derecha.

Clear template part customizations
Borrar las personalizaciones de las partes de la plantilla

Editar plantillas y partes de plantillas

El Editor proporciona la interfaz para personalizar la estructura de tus plantillas y partes de plantillas.

Aquí puedes añadir o editar fácilmente bloques y patrones, y tus cambios se aplicarán automáticamente a cada página que utilice esa plantilla.

Editing the Single Post Template
Editando la plantilla de una entrada

La imagen de abajo muestra la plantilla de la página 404 en el editor. Es una plantilla bastante sencilla, que sólo incluye un encabezado, un párrafo y un cuadro de búsqueda. Aun así, nos da una buena idea de cómo funciona la interfaz de usuario.

404 block template
Plantilla del bloque 404 de Twenty Twenty-Two en el editor de plantillas

Aquí puedes hacer ediciones y personalizar las plantillas para que se adapten mejor a tus necesidades. Por ejemplo, puede que quieras añadir un patrón de publicaciones con imágenes para aumentar el compromiso de tus visitantes e invitarles a navegar por el contenido de tu sitio web.

grid of image posts
Personalizando la plantilla del bloque 404 de Twenty Twenty-Two

El desplegable de la cabecera en la parte superior del editor de plantillas muestra una lista de las áreas de Plantilla disponibles. La misma lista aparece en la pestaña Plantilla de la barra lateral de Configuración.

Template areas in Twenty Twenty-Two
Áreas de plantilla en Twenty Twenty-Two

Al hacer clic en cualquier área de la plantilla (por ejemplo, la cabecera), serás llevado directamente a la parte de la plantilla que quieras editar.

Si haces clic en el icono de la elipsis de la derecha, accederás al editor de partes de plantilla aisladas.

The isolated template part editor
El icono de la elipsis lanza el editor de la parte de plantilla aislada

El editor de la parte de la plantilla también proporciona un par de tiradores arrastrables, que te permiten comprobar cómo se comporta la plantilla en diferentes resoluciones de pantalla.

Adjusting template part preview dimension
Ajustando la dimensión de la vista previa de la parte de la plantilla

Una vez que estés satisfecho con tus cambios, guarda tus ediciones y vuelve al editor principal de la plantilla para comprobar el resultado final.

Si quieres profundizar en la nueva arquitectura de la información, puedes consultar los siguientes artículos:

Twenty Twenty-Two en su núcleo: Una rápida visión de theme.json

Para entender bien cómo funcionan los temas de Twenty-Two y los bloques, echemos un vistazo al nuevo mecanismo de configuración y estilo de los temas basado en el archivo theme.json.

Introducido con WordPress 5.8, este nuevo mecanismo permite a los desarrolladores de temas configurar el editor y añadir soporte de características desde un punto de configuración central.

En Twenty Twenty-Two, el archivo theme.json tiene la siguiente estructura:

{
	"version": 2,
	"settings": {},
	"styles": {},
	"customTemplates": {},
	"templateParts": {}
}

Echemos un vistazo rápido a cada sección.

Versión

El campo version describe la versión de la especificación, que actualmente es 2.

Ajustes

La sección settings define los ajustes a nivel global o de bloque. Los ajustes definidos a nivel global afectan a todos los bloques, pero los bloques pueden anular individualmente los ajustes globales. En Veintidós encontrarás los siguientes ajustes:

{
	"settings": {
		"appearanceTools": true,
		"color": {
			"duotone": [...],
			"gradients": [...],
			"palette": [...]
		},
		"custom": {...},
		"spacing": {...},
		"typography": {
			"dropCap": false,
			"fontFamilies": [...],
			"fontSizes": [...]
		},
		"layout": {...}
	}
}

Los ajustes predeterminados se denominan preajustes y se utilizan para generar propiedades personalizadas CSS y nombres de clases basados en una convención de nomenclatura específica:

  • Propiedad personalizada CSS --wp--preset--{preset-category}--{preset-slug}
  • Nombre de la clase CSS .has-{preset-slug}-{preset-category}

Una vez que un tema ha definido sus preajustes, las propiedades personalizadas CSS correspondientes pueden utilizarse para dar estilo a los bloques y elementos en la sección styles.

Estilos

La sección styles es donde los temas definen los estilos por defecto de los bloques y elementos. Mira, por ejemplo, los siguientes estilos de Twenty Twenty-Two para el bloque central Button:

{
	"version": 2,
	"styles": {
		"blocks": {
			"core/button": {
				"border": {
					"radius": "0"
				},
				"color": {
					"background": "var(--wp--preset--color--primary)",
					"text": "var(--wp--preset--color--background)"
				},
				"typography": {
					"fontSize": "var(--wp--preset--typography--font-size--normal)"
				}
			}
		}
	}
}

Te darás cuenta de las propiedades personalizadas CSS utilizadas en las declaraciones de propiedades.

Plantillas personalizadas

La sección customTemplates es donde un tema declara sus plantillas personalizadas. Los campos name y title son obligatorios. Los temas también pueden declarar qué tipo de entrada puede utilizar la plantilla estableciendo la propiedad postTypes.

Twenty Twenty-Two proporciona cuatro plantillas personalizadas:

{
	"version": 2,
	"customTemplates": [
		{
			"name": "blank",
			"title": "Blank",
			"postTypes": [
				"page",
				"post"
			]
		},
		{
			"name": "page-large-header",
			"title": "Page (Large Header)",
			"postTypes": [
				"page"
			]
		},
		{
			"name": "single-no-separators",
			"title": "Single Post (No Separators)",
			"postTypes": [
				"post"
			]
		},
		{
			"name": "page-no-separators",
			"title": "Page (No Separators)",
			"postTypes": [
				"page"
			]
		}
	]
}

Encontrarás los archivos .html correspondientes en la carpeta block-templates.

tt2 block-templates folder
Carpeta de plantillas por bloques de Twenty Twenty-Two

Partes de la plantilla

La sección templateParts incluye las definiciones de las partes de la plantilla:

{
	"version": 2,
	"templateParts": [
		{
			"name": "header",
			"title": "Header",
			"area": "header"
		},
		{
			"name": "header-large-dark",
			"title": "Header (Dark, large)",
			"area": "header"
		},
		{
			"name": "header-small-dark",
			"title": "Header (Dark, small)",
			"area": "header"
		},
		{
			"name": "footer",
			"title": "Footer",
			"area": "footer"
		}
	]
}

Los campos name y title son obligatorios. Los temas también pueden declarar un término area, en el que la parte de la plantilla se representará en el editor.

Twenty Twenty-Two template parts
Partes de plantilla de Twenty Twenty-Two

Los archivos .html de las partes de la plantilla se encuentran en la carpeta de template-parts.

Ahora que sabes más sobre el theme.json de Twenty Twenty-Two, podemos explorar más a fondo las características del tema y la nueva interfaz de edición.

Vamos a sumergirnos en los Estilos Globales de Twenty Twenty-Two.

Estilos globales en Twenty Twenty-Two

Si observas el style.css de Twenty Twenty-Two , te sorprenderá ver que contiene un número mínimo de declaraciones CSS. La razón es que los estilos se declaran en el archivo theme.json en los temas basados en bloques.

WordPress 5.9 llevará las cosas un paso más allá, introduciendo una nueva función que permite a los usuarios de temas de bloques personalizar la apariencia de los elementos del sitio desde una interfaz de usuario llamada Estilos Globales.

Se puede acceder a la interfaz de Estilos Globales desde el nuevo icono de Estilos situado en la esquina superior derecha del Editor (ver también La interfaz de Estilos Globales).

Al hacer clic en ese icono, aparece una nueva barra lateral de Estilos que incluye tres paneles independientes:

  • Un panel de vista previa, que muestra una vista previa de tus personalizaciones
  • Un panel de Estilos Globales que proporciona acceso a grupos específicos de controles para Tipografía, Colores y Diseño
  • Un elemento de Bloques que proporciona acceso a los ajustes de estilo a nivel de bloque
Styles sidebar
La barra lateral de Estilos en Twenty Twenty-Two

Paleta de colores de Twenty Twenty-Two

El panel de Colores puede ayudarte a editar las paletas disponibles y a asignar o cambiar los colores de Fondo, Texto o Enlaces.

En el panel Paleta, puedes personalizar las paletas del Tema o las predeterminadas e incluso crear tu paleta personalizada.

TT2 color settings
Configuración de colores en Twenty Twenty-Two

¿Has encontrado ya el código que genera los controles de color?

Si no es así, abre el archivo theme.json de Twenty-Two en tu editor de código favorito. Encontrarás las siguientes declaraciones de la paleta de colores:

{
	"version": 2,
	"settings": {
		"color": {
			"palette": [
				{
					"slug": "foreground",
					"color": "#000000",
					"name": "Foreground"
				},
				{
					"slug": "background",
					"color": "#ffffff",
					"name": "Background"
				},
				{
					"slug": "primary",
					"color": "#1a4548",
					"name": "Primary"
				},
				{
					"slug": "secondary",
					"color": "#ffe2c7",
					"name": "Secondary"
				},
				{
					"slug": "tertiary",
					"color": "#F6F6F6",
					"name": "Tertiary"
				}
			]
		}
	}
}

La imagen siguiente muestra cómo el código anterior coincide con la paleta de colores de Twenty Twenty-Two.

tt2 color palette
Paleta de colores enTwenty Twenty-Two

Supongamos ahora que quieres cambiar el color de fondo por defecto de un bloque concreto. Si eliges un color diferente para el fondo del bloque, simplemente asignarás una variable CSS diferente a la propiedad background-color del elemento. La imagen siguiente ofrece un ejemplo de ello:

TT2 custom property
El color principal de Twenty Twenty-Two utilizado como color de fondo

¡Y eso es todo! No tendrás que añadir ni una sola línea de código CSS personalizado en el Personalizador ni crear un tema hijo para ello.

Pero sigamos explorando los Estilos Globales de Twenty-Two con algunos ejemplos adicionales.

Configuración de la tipografía

El panel de Tipografía es donde puedes personalizar los estilos de tipografía para los elementos de Texto y Enlaces de tu sitio web a nivel global.

Cada elemento proporciona acceso a un grupo de controles para que puedas personalizar la familia de la fuente, el tamaño y la altura de la línea.

TT2 typography settings
Configuración de la tipografía en Twenty Twenty-Two

¿Te preguntas qué código genera estos controles?

Abre el archivo theme.json de Twenty Twenty-Two y busca la sección typography. Verás los siguientes ajustes:

{
	"version": 1,
	"settings": {
		"appearanceTools": true,
		"typography": {
			"dropCap": false,
			"fontFamilies": [
				{
					"fontFamily": "-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif",
					"name": "System Font",
					"slug": "system-font"
				},
				{
					"fontFamily": ""Source Serif Pro", serif",
					"name": "Source Serif Pro",
					"slug": "source-serif-pro"
				}
			],
			"fontSizes": [
				{
					"name": "Small",
					"size": "1rem",
					"slug": "small"
				},
				{
					"name": "Normal",
					"size": "1.125rem",
					"slug": "normal"
				},
				{
					"name": "Medium",
					"size": "1.75rem",
					"slug": "medium"
				},
				{
					"name": "Large",
					"size": "clamp(1.75rem, 3vw, 2.25rem)",
					"slug": "large"
				},
				{
					"name": "Huge",
					"size": "clamp(2.5rem, 4vw, 3rem)",
					"slug": "huge"
				}
			]
		},
}

Del código anterior puedes esperar ver dos familias de fuentes y cinco tamaños de fuente. Y habrás acertado.

Así es como el código anterior se traduce en la configuración de Tipografía de Estilos Globales:

font family and font size in TT2
Estilos de tipografía en Twenty Twenty-Two

Puedes adivinar qué ajuste genera el control de la altura de la línea. En Twenty Twenty-Two, no encontrarás un ajuste específico para ello porque está habilitado por la propiedad appearanceTools, que es un atajo para varias declaraciones de ajuste (ver la siguiente sección).

Herramientas de diseño y apariencia

El último elemento de la barra lateral de Estilos Globales es el Diseño. En el momento de escribir esto, sólo incluye un control padding.

Layout settings in Twenty Twenty-Two
Ajustes de diseño en Twenty Twenty-Two

En Twenty Twenty-Two, el panel Diseño se activa mediante la propiedad de ajuste appearanceTools, un booleano que puede utilizarse para activar varios ajustes a la vez:

{
	"settings": {
		"appearanceTools": true
	}
}

"appearanceTools": true simplemente sustituye el siguiente bloque de declaraciones:

{
	'settings': {
		'border': {
			'color': true,
			'radius': true,
			'style': true,
			'width': true
		},
		'color': {
			'link': true
		},
		'spacing': {
			'blockGap': true,
			'margin': true,
			'padding': true
		},
		'typography': {
			'lineHeight': true
		}
	}
}

Bien, ahora espero que entiendas cómo los ajustes declarados en el archivo theme.json coinciden con los controles de Estilos Globales correspondientes.

Todavía falta una pieza de nuestro rompecabezas para obtener la imagen completa del nuevo tema por defecto de WordPress: los patrones de bloques.

Patrones de bloques de Twenty Twenty-Two

Se podría decir que Twenty Twenty-Two es sobre todo una colección de patrones, y prácticamente lo es. En Twenty Twenty-Two, encontrarás toneladas de patrones de bloques listos para usar entre los que puedes elegir para construir estructuras sorprendentes e imprevisibles de bloques anidados para tus páginas web.

El término clave aquí es la capacitación del usuario. Y eso encaja porque, con los patrones de bloques, puedes construir todo tipo de cosas, desde un atractivo portafolio hasta un sitio web promocional de una sola página, ¡incluso si no tienes ningún conocimiento de HTML o CSS!

¿Necesita un alojamiento rápido, seguro y fácil de usar para sus clientes? Kinsta se ha creado pensando en los desarrolladores de WordPress y ofrece muchas herramientas y un potente panel de control. Consulte nuestros planes

Y WordPress 5.9 aporta mejoras significativas al sistema de patrones con el nuevo Explorador de patrones, una herramienta que te permite examinar los patrones en un modal a pantalla completa.

The Pattern Explorer in Twenty Twenty-Two
El explorador de patrones en Twenty Twenty-Two

La nueva herramienta también te permite importar rápida y fácilmente patrones de bloques directamente desde el Directorio de Patrones. Esto abre nuevas posibilidades tanto para los usuarios de WordPress como para los desarrolladores, por lo que es probable que su uso aumente considerablemente en el futuro.

WordPress Patterns directory
Directorio de patrones de WordPress

Twenty Twenty-Two incluye un montón de patrones (más de 65) en cinco categorías.

Twenty Twenty-Two pattern categories
Categorías de patrones de Twenty Twenty-Two

Este sólido conjunto de patrones combina perfectamente con las plantillas y partes de plantillas que vienen con el nuevo tema por defecto, lo que hace que la experiencia de edición sea realmente sorprendente.

Layered images with duotone
Imágenes en capas con duotono
Video with header and details
Vídeo con cabecera y detalles
Two images with text
Dos imágenes con texto

Si aún no has tenido la oportunidad de experimentar con los patrones de bloques, te mostraremos por qué se consideran herramientas tan poderosas con un sencillo ejemplo.

Supongamos que quieres eliminar el pie de página predeterminado de las plantillas Índice y Publicación única y sustituirlo por un patrón de bloques diferente de Twenty Twenty-Two.

Inicia el Editor del Sitio desde el menú Apariencia o el botón de la barra de herramientas del frontend de WordPress para personalizar la plantilla Índice.

Haz clic en el botón Índice para que aparezca el desplegable de la cabecera que muestra la lista de áreas de plantillas disponibles en la página. Haz clic en el botón de la elipsis junto al pie de página y luego en Editar pie de página.

The template inspector
El inspector de plantillas

Como se ha mencionado anteriormente, esto lanzará el editor de la parte de la plantilla aislada.

Isolated template part editor
El pie de página predeterminado de Twenty Twenty-Two en el editor de partes de la plantilla aislada

Ahora abre el insertador de bloques y haz clic en Patrones.

Inicia la nueva herramienta Explorador de patrones, selecciona la categoría Pies de página Twenty Twenty-Two y elige el pie de página que desees.

The pattern explorer in Twenty Twenty-Two
El explorador de patrones en Twenty Twenty-Two

Ahora añade y edita los bloques según tus necesidades.

Editing the footer in the isolated template part editor
Editando el pie de página en el editor de partes de la plantilla aislada

Guarda la cabecera y vuelve a revisar tu sitio cuando estés satisfecho con tus cambios.

La imagen de abajo compara tres plantillas (Índice, Publicación aislada y Publicación aislada sin separadores) con diferentes personalizaciones de cabecera y pie de página:

Header and footer customizations compared in different Twenty Twenty-Two templates
Personalizaciones de cabecera y pie de página comparadas en diferentes plantillas de Twenty Twenty-Two

Ampliar Twenty Twenty-Two con un tema hijo

Crear un tema hijo para un tema en bloque es bastante diferente a crear un tema hijo para un tema clásico.

Pero una vez que comprendas bien la estructura de un tema de bloques, no te resultará difícil crear un tema hijo para Twenty Twenty-Two o cualquier otro tema de bloques.

Así que vamos a ver cómo personalizar el aspecto de tu sitio web basado en Twenty Twenty-Two.

1. Configurar un tema hijo para Twenty Twenty-Two

En tu directorio /wp-content/themes, crea una nueva carpeta y ponle el nombre que quieras (según las normas de desarrollo de temas). En este ejemplo, hemos llamado a la carpeta del tema hijo twentytwentytwo-child.

Ahora necesitas un archivo style.css. Abre tu editor de código favorito y crea la siguiente hoja de estilos:

/*
Theme Name: Twenty Twenty-Two Child
Theme URI: https://example.com/
Author: Your name
Author URI: https://example.com/
Description: A child theme for TT2.
Requires at least: 5.8
Tested up to: 5.9
Requires PHP: 5.6
Version: 0.2
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: twentytwentytwo-child
Template: twentytwentytwo
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

Twenty Twenty-Two Child WordPress Theme, (C) 2021 WordPress.org
Twenty Twenty-Two Child is distributed under the terms of the GNU GPL.
*/

Como siempre, puedes editar los campos según tus necesidades.

Tu tema hijo ya está disponible para su previsualización. Puedes activarlo en la pantalla de administración Apariencia > Temas.

2. Personalizar la configuración global

Desde WordPress 5.9, los temas hijos con un archivo theme.json heredan la configuración del tema padre. Si el archivo theme.json del tema hijo define un conjunto de estilos, esos estilos se aplican sobre los estilos de su padre.

Así que podemos crear un archivo theme.json que incluya sólo un pequeño bloque personalizado de definiciones de ajustes y estilos en lugar de redefinir todas nuestras opciones originales.

Cómo declarar una paleta de colores personalizada

Al crear un tema hijo para Twenty Twenty-Two, la tarea más sencilla es sustituir la paleta de colores. Todo lo que tienes que hacer es definir una nueva paleta de colores en el theme.json de tu tema hijo, como se muestra a continuación:

{
"version": 2,
	"settings": {
		"color": {
			"palette": [
				{
					"slug": "foreground",
					"color": "#FFFFFF",
					"name": "Foreground"
				},
				{
					"slug": "background",
					"color": "#001F29",
					"name": "Background"
				},
				{
					"slug": "primary",
					"color": "#D6FDFF",
					"name": "Primary"
				},
				{
					"slug": "secondary",
					"color": "#FDFCDC",
					"name": "Secondary"
				},
				{
					"slug": "tertiary",
					"color": "#FED9B7",
					"name": "Tertiary"
				},
				{
					"slug": "accent",
					"color": "#E94435",
					"name": "Accent"
				}
			]
		}
	}
}

Guarda tu archivo y vuelve al editor del sitio. La paleta de colores definida anteriormente debería haber sustituido a la paleta de colores por defecto de Twenty Twenty-Two.

A child theme color palette
Paleta de colores de un tema hijo

Los colores se mostrarán en orden en la propia paleta, y sus nombres deben seguir las mejores prácticas y convenciones de nomenclatura comentadas en Github.

Puedes leer mucho más sobre las opciones de color de theme.json en este resumen en profundidad de Carolina Nymark.

Cómo declarar filtros de duotono personalizados

También puedes sustituir los colores duotono por defecto por tu conjunto de filtros personalizados.

Para ello, sólo tienes que añadir el siguiente código a la configuración del theme.json de tu tema hijo en el mismo nivel que la propiedad palette:

{
"version": 2,
	"settings": {
		"color": {
			"palette": [...],
			"duotone": [
				{
					"colors": [
						"#001F29",
						"#FFFFFF"
					],
					"slug": "default-filter",
					"name": "Default filter"
				}
			]
		}
	}
}

Guarda tu archivo y comprueba el resultado en el editor de bloques. Sólo deberías ver un único filtro duotono.

A child theme duotone filter
Un filtro duotono del tema hijo

3. Personalizar los estilos de los bloques

Como hemos mencionado antes, con WordPress 5.9, ahora puedes personalizar la configuración y los estilos del theme.json desde la interfaz de Estilos Globales.

Los estilos de bloque se pueden personalizar desde la interfaz de Estilos Globales sólo si el bloque declara el soporte de una funcionalidad específica en el archivo block.json correspondiente. Pero puedes anular la configuración por defecto del bloque en el theme.json de tu tema hijo.

Ahora supongamos que quieres anular los estilos del bloque Post-title y Group. Todo lo que tienes que hacer es definir los estilos que quieres añadir o anular, como se muestra a continuación:

{
"version": 2,
	"settings": {...},
	"styles": {
		"blocks": {
			"core/post-title": {
				"typography": {
					"fontFamily": "Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif"
				},
				"color": {
					"background": "var(--wp--preset--color--tertiary)"
				},
				"spacing": {
					"padding": "var(--wp--custom--spacing--small)"
				}
			},
			"core/group": {
				"spacing": {
					"margin": {
						"top": "0",
						"bottom": "0"
					}
				}
			}
		}
	}
}

En el ejemplo anterior, hemos cambiado la familia de fuentes, el color de fondo y los valores de relleno de core/post-title, así como los márgenes superior e inferior de core/group.

La imagen de abajo muestra el resultado tal y como se vería en el sitio público:

A customized Post Title block
Un bloque de título de entrada personalizado

¡Y eso es todo para la revisión!

No profundizaremos más en los temas hijo por ahora, ya que iría más allá del alcance de este post. Mientras tanto, encontrarás más ejemplos de temas hijo de Twenty Twenty-Two en Github.

Twenty Twenty-Two ha sido diseñado para ser el tema por defecto más flexible, ligero y personalizable de la historia ✨ - y hay más cosas que te encantarán en esta guía 👇Click to Tweet

Resumen

Mientras analizábamos el nuevo tema predeterminado de WordPress Twenty Twenty-Two y sus características (que lo convierten en el tema predeterminado más flexible jamás lanzado), desvelamos la nueva arquitectura de la información introducida con WordPress 5.9. Incluso pudimos echar un vistazo a la nueva interfaz de Estilos Globales.

Hay muchas características nuevas e interesantes en camino, y parece claro que el nuevo entorno de edición se está volviendo más robusto, fiable y funcional con el tiempo.

Mientras que muchas nuevas características de WordPress están en camino, otras están desapareciendo o disminuyendo su importancia. Muchos usuarios se preguntan qué ocurrirá con el Personalizador y cuál es la mejor manera de mantener la compatibilidad con los temas existentes.

Sin embargo, no es de esperar que se pase de repente de los temas tradicionales a los temas en bloque de un plumazo. Actualmente tenemos cuatro tipos diferentes de temas entre los que elegir:

  • Temas de bloque: Temas diseñados para FSE
  • Temas universales: Temas que funcionan tanto con el Personalizador como con el Editor de Sitios
  • Temas híbridos: Temas clásicos que admiten funciones de FSE como theme.json
  • Temas clásicos: Temas con plantillas PHP, functions.php, etc.

Así que no temas por ahora: todavía hay muchas soluciones entre las que elegir si aún no te sientes preparado para cambiar a los temas en bloque.

¡Y ahora depende de ti! ¿Estás preparado para dar el gran salto y empezar a usar temas de bloques ahora mismo? Comparte tu opinión con nosotros en los comentarios.


Ahorra tiempo, costes y maximiza el rendimiento del sitio con:

  • Ayuda instantánea de expertos en alojamiento de WordPress, 24/7.
  • Integración de Cloudflare Enterprise.
  • Alcance de audiencia global con 34 centros de datos en todo el mundo.
  • Optimización con nuestra herramienta de monitoreo de rendimiento de aplicación integrada.

Todo esto y mucho más, en un plan sin contratos a largo plazo, migraciones asistidas y una garantía de devolución del dinero de 30 días. Conozca nuestros planes o habla con el departamento de ventas para encontrar el plan más adecuado para ti.