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 versión 5.9 de WordPress. 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 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.
Here’s a first look at the next WordPress default theme! I’m excited to be co-leading it alongside @jffng, and we both hope you'll contribute to it and/or just enjoy using it! 🐦🦆🐤🦉https://t.co/covjrpgFIO
— kjellr (@kjellr) October 6, 2021
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.
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.
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.
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.
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.
Si haces clic en el icono de la elipsis (︙) de la derecha, podrás borrar tus personalizaciones.
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).
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.
Puedes borrar estas personalizaciones haciendo clic en el icono de la elipsis (︙) de la derecha.
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.
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.
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.
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.
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.
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.
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:
- Conceptos de IA de edición del sitio: Cómo emerger y acceder a nuevas funciones
- Conceptos de IA de edición del sitio – Parte 2
Twenty Twenty-Two en su núcleo: Una rápida visión de theme.json
Para entender completamente cómo funcionan Twenty Twenty-Two y los temas en bloque (como Bricksy), echemos un vistazo al nuevo mecanismo de configuración y estilo del tema 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.
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.
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
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.
¿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.
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:
¡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.
¿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:
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.
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!
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.
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.
Twenty Twenty-Two incluye un montón de patrones (más de 65) en cinco categorías.
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.
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.
Como se ha mencionado anteriormente, esto lanzará el editor de la parte 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.
Ahora añade y edita los bloques según tus necesidades.
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:
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.
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.
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:
¡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.
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.
Deja una respuesta