Una inmersión profunda en Twenty Twenty-Two y los temas de bloques de WordPress

Publicado: 2021-12-20

Aunque un poco más tarde de lo planeado originalmente, obtendremos un nuevo tema predeterminado de WordPress. ¡Su nombre es Veinte Veintidós!

El nuevo tema predeterminado 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.

Le mostraremos nuestros resultados antes de resumir nuestros pensamientos para brindarle una descripción detallada de los entresijos del nuevo tema de WordPress.

Veinte veintidós vista previa
Una vista previa de Twenty Twenty-Two, el nuevo tema predeterminado de WordPress (Fuente de la imagen: WordPress.org)

Twenty Twenty-Two ha sido diseñado para ser el tema predeterminado más flexible, liviano y personalizable que haya existido. Proporciona un gran campo de juego para probar bloques, patrones y plantillas.

Al ser un tema de bloques, te ayudará a explorar mejor la 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 vienen con WordPress 5.9.

¡Tenemos que decir de inmediato que Twenty Twenty-Two es el primer tema de bloque predeterminado !

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

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

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

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

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

Pero hay mucho más que decir sobre los temas de bloque de Twenty Twenty-Two y WordPress. Por lo tanto, como capítulo adicional, proporcionaremos una descripción general rápida de cómo ampliar las funciones de Twenty Twenty-Two aprovechando el archivo theme.json .

Pongámonos manos a la obra y profundicemos en el nuevo tema predeterminado de WordPress Twenty Twenty-Two.

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

Varias funciones de edición completa del sitio se incorporan 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:

  • Crea y edita publicaciones y páginas usando más bloques y patrones
  • Personalice la configuración y los estilos definidos en el archivo theme.json a través de la interfaz de Estilos globales
  • Crear y editar plantillas para páginas y publicaciones.
  • Cree y edite elementos de plantilla para encabezado, pie de página y otras áreas de plantilla

Con todas estas características fusionadas en el núcleo, los principales colaboradores de WordPress han estado discutiendo la evolución de la arquitectura de la información y rediseñaron todo el flujo de edición del sitio.

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

Menú del editor
El nuevo menú Apariencia en WordPress 5.9

Traer las funciones de edición de estilo y plantilla en el mismo menú Apariencia debería optimizar la experiencia de edición. Debería facilitar la comprensión de que las funciones a las que accede se relacionan con la presentación de sus páginas.

¿Listo para sumergirte en el nuevo tema Twenty Twenty-Two? No busques más Haz clic para twittear

El elemento del menú Editor abre la plantilla de la página de inicio del sitio. Dependiendo de su configuración de lectura, esta puede ser su página de publicaciones más recientes o una página estática.

Editor del sitio en Twenty Twenty-Two
El editor de sitios en WordPress 5.9 con Twenty Twenty-Two

Ahora, al hacer clic en el ícono de WordPress en la esquina superior izquierda, se muestra un nuevo menú de navegación del editor de sitios, que incluye tres elementos de menú: Sitio , Plantillas y Partes de plantilla .

Miremos más de cerca.

El menú de navegación del Editor
El menú de navegación del Editor

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

Desde el elemento de menú Plantillas , obtendrá una lista de las plantillas disponibles. Puede hacer clic en cualquier plantilla de la lista para iniciarla en el editor.

Al momento de escribir este artículo, Twenty Twenty-Two proporciona 11 plantillas.

Veinte Veintidós plantillas
Veinte Veintidós plantillas.

Al hacer clic en el ícono de puntos suspensivos ( ) a la derecha, puede borrar sus personalizaciones.

Borrar personalizaciones de plantilla
Borrar personalizaciones de plantilla

A diferencia de las plantillas de temas, las plantillas personalizadas solo se pueden renombrar o eliminar (pero puede editar plantillas personalizadas en el editor de publicaciones).

Cambiar el nombre o eliminar plantillas personalizadas
Renombrar/eliminar plantillas personalizadas

El elemento del menú Elementos de plantilla enumera los elementos de plantilla disponibles que puede abrir en el editor para sus personalizaciones.

Encontrará cuatro piezas de plantilla añadidas a Twenty Twenty-Two de forma predeterminada. Al pasar el cursor sobre una plantilla modificada, se muestra una información sobre herramientas que le permite saber que la plantilla se ha personalizado.

Veinte Veintidós partes de la plantilla
Veinte Veintidós partes de la plantilla.

Puede borrar estas personalizaciones haciendo clic en el icono de puntos suspensivos ( ) a la derecha.

Borrar personalizaciones de piezas de plantilla
Borrar personalizaciones de piezas de plantilla

Edición de plantillas y elementos de plantilla

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

Aquí puede agregar o editar fácilmente bloques y patrones, y sus cambios se aplicarán automáticamente a cada página que use esa plantilla.

Edición de la plantilla de publicación única
Edición de la plantilla de publicación única

La siguiente imagen muestra la plantilla de página 404 en el editor. Es una plantilla bastante simple, que incluye solo un encabezado, un párrafo y un cuadro de búsqueda. Aún así, nos da una buena comprensión de cómo funciona la interfaz de usuario.

plantilla de bloque 404
Plantilla de bloque 404 de Twenty Twenty-Two en el editor de plantillas

Aquí, puede realizar ediciones y personalizar plantillas para que se ajusten mejor a sus necesidades. Por ejemplo, es posible que desee agregar un patrón de cuadrícula de publicaciones de imágenes para aumentar la participación de sus visitantes e invitarlos a explorar el contenido de su sitio web.

cuadrícula de publicaciones de imágenes
Personalización de la plantilla de bloque 404 de Twenty Twenty-Two

El menú desplegable del encabezado 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 en la barra lateral Configuración .

Áreas de plantilla en Twenty Twenty-Two
Áreas de plantilla en Twenty Twenty-Two

Al hacer clic en cualquier área de la plantilla (por ejemplo, Encabezado), accederá directamente a la parte de la plantilla que desea editar.

Si hace clic en el icono de puntos suspensivos de la derecha, accederá al editor de piezas de plantilla aislada .

El editor de elementos de plantilla aislado
El icono de puntos suspensivos inicia el editor de elementos de plantilla aislada

El editor de partes de la plantilla también proporciona un par de controladores que se pueden arrastrar, lo que le permite verificar cómo se comporta la plantilla en diferentes resoluciones de pantalla.

Ajuste de la dimensión de vista previa de la parte de la plantilla
Ajuste de la dimensión de vista previa de la parte de la plantilla

Una vez que esté satisfecho con los cambios, guárdelos y vuelva al editor de plantillas principal para verificar el resultado final.

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

  • Conceptos de edición de sitios IA: cómo mostrar y acceder a nuevas funciones
  • Conceptos de edición de sitios iA – Parte 2

Twenty Twenty-Two en su núcleo: una descripción general rápida de theme.json

Para comprender completamente cómo funcionan Twenty Twenty-Two y los temas de bloques (como Bricksy), echemos un vistazo a la nueva configuración de temas y al mecanismo de estilo basado en el archivo theme.json .

Introducido con WordPress 5.8, este nuevo mecanismo permite a los desarrolladores de temas configurar el editor y agregar compatibilidad con funciones 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 de version describe la versión de la especificación, que actualmente es 2 .

Ajustes

La sección de settings define la configuración a nivel global o de bloque. La configuración definida en el nivel superior afecta a todos los bloques, pero los bloques pueden anular individualmente la configuración global. En Twenty Twenty-Two encontrarás los siguientes ajustes:

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

Los valores predeterminados de configuración se denominan ajustes preestablecidos y se utilizan para generar propiedades personalizadas de CSS y nombres de clase basados ​​en una convención de nomenclatura específica:

  • Propiedad personalizada de 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 ajustes preestablecidos, las propiedades personalizadas de CSS correspondientes se pueden usar para diseñar bloques y elementos en la sección de styles .

Estilos

La sección de styles es donde los temas definen los estilos predeterminados de bloques y elementos. Vea, por ejemplo, los siguientes estilos Veinte Veintidós para el bloque principal de botones:

 { "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)" } } } } }

Notará las propiedades personalizadas de CSS utilizadas en las declaraciones de propiedad.

Plantillas personalizadas

La sección customTemplates es donde un tema declara sus plantillas personalizadas. Los campos de name y title son obligatorios. Los temas también pueden declarar qué tipo de publicación puede usar la plantilla configurando 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á los archivos .html correspondientes en la carpeta de plantillas de bloque .

carpeta de plantillas de bloque tt2
Carpeta de plantillas de bloques de Twenty Twenty-Two

Partes de la plantilla

La sección templateParts incluye definiciones de elementos de 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 de name y title son obligatorios. Los temas también pueden declarar un término de area , donde la parte de la plantilla se representará en el editor.

Veinte Veintidós partes de la plantilla
Veinte Veintidós partes de la plantilla

Los archivos .html de elementos de plantilla se encuentran en la carpeta de elementos de plantilla .

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

Sumerjámonos en los estilos globales de Twenty Twenty-Two .

Estilos globales en veinte veintidós

Si observa el archivo Twenty Twenty-Two' style.css, se sorprenderá al notar que contiene un número mínimo de declaraciones CSS. El motivo 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á, presentando 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 ícono de Estilos ubicado en la esquina superior derecha del Editor (consulte también La interfaz de Estilos globales).

Al hacer clic en ese ícono, se muestra una nueva barra lateral de Estilos que incluye tres paneles separados:

  • Un panel de vista previa , que muestra una vista previa de sus personalizaciones
  • Un panel de estilos globales que brinda acceso a grupos específicos de controles para tipografía , colores y diseño
  • Un elemento de Bloques que brinda acceso a la configuración de estilo a nivel de bloque
Barra lateral de estilos
La barra lateral de Estilos en Twenty Twenty-Two

Paleta de colores de Twenty Twenty-Two

El panel Colores puede ayudarlo a editar las paletas disponibles y asignar o cambiar colores para Fondo , Texto o Enlaces .

En el panel Paleta , puede personalizar las paletas Tema o Predeterminado e incluso crear su propia paleta personalizada.

Ajustes de color TT2
Configuraciones de color en Twenty Twenty-Two

¿Ya encontraste el código que genera los controles de color?

Si no, abra el archivo theme.json de Twenty Twenty-Two en su editor de código favorito. Encontrará las siguientes declaraciones de 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 a continuación muestra cómo el código de arriba coincide con la paleta de colores de Twenty Twenty-Two.

paleta de colores tt2
Paleta de colores de Twenty Twenty-Two

Ahora supongamos que desea cambiar el color de fondo predeterminado para un bloque en particular. Elegir un color diferente para el fondo del bloque simplemente asignará una variable CSS diferente a la propiedad background-color del elemento. La siguiente imagen proporciona un ejemplo de eso:

propiedad personalizada TT2
Color primario de Twenty Twenty-Two usado como color de fondo

¡Y eso es todo! No necesitará agregar una sola línea de código CSS personalizado al Personalizador ni crear un tema secundario para eso.

Pero sigamos explorando los estilos globales de Twenty Twenty-Two con algunos ejemplos adicionales.

Ajustes de tipografía

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

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

Ajustes de tipografía TT2
Ajustes tipográficos en Twenty Twenty-Two

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

Abra el archivo theme.json de Twenty Twenty-Two y busque la sección de typography . Verá las siguientes configuraciones:

 { "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" } ] }, }

Puede esperar ver dos familias de fuentes y cinco tamaños de fuente del código anterior. Y habrías acertado.

Así es como el código anterior se traduce a la configuración de tipografía de estilos globales:

familia de fuentes y tamaño de fuente en TT2
Estilos tipográficos en Twenty Twenty-Two

Puede adivinar qué configuración genera el control de altura de línea . En Twenty Twenty-Two, no encontrará una configuración específica para eso porque está habilitada por la propiedad de herramientas de appearanceTools , que es un atajo para varias declaraciones de configuración (vea la siguiente sección).

Herramientas de diseño y apariencia

El último elemento en la barra lateral de Estilos globales es el Diseño . En el momento de escribir este artículo, solo incluye un control de padding .

Configuración de diseño en Twenty Twenty-Two
Configuración de diseño en Twenty Twenty-Two

En Twenty Twenty-Two, el panel Diseño está habilitado por la propiedad de configuración de las herramientas de appearanceTools , un valor booleano que se puede usar para habilitar varias configuraciones a la vez:

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

"appearanceTools": true simplemente reemplaza 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 es de esperar que comprenda cómo la configuración declarada en el archivo theme.json coincide con los controles de Estilos globales correspondientes.

Todavía falta una pieza de nuestro rompecabezas para obtener la imagen completa del nuevo tema predeterminado de WordPress: patrones de bloque .

Veinte veintidós patrones de bloques

Se podría decir que Twenty Twenty-Two es principalmente una colección de patrones, y prácticamente lo es. En Twenty Twenty-Two, encontrará toneladas de patrones de bloques listos para usar entre los que puede elegir para crear estructuras sorprendentes e impredecibles de bloques anidados para sus páginas web.

El término clave aquí es empoderamiento del usuario . Y eso encaja porque, con los patrones de bloques, puede crear todo tipo de cosas, desde una cartera atractiva hasta un sitio web promocional de una sola página, ¡incluso si no tiene ningún conocimiento de HTML o CSS!

Y WordPress 5.9 trae mejoras significativas al sistema de patrones con el nuevo Pattern Explorer, una herramienta que le permite buscar patrones en un modo de pantalla completa.

¿Necesita un alojamiento ultrarrápido, seguro y fácil de usar para los sitios de sus clientes? Kinsta está diseñado pensando en los desarrolladores de WordPress y proporciona muchas herramientas y un panel de control poderoso. Consulta nuestros planes

El explorador de patrones en Twenty Twenty-Two
El explorador de patrones en Twenty Twenty-Two

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

Directorio de patrones de WordPress
Directorio de patrones de WordPress

Twenty Twenty-Two incluye muchos patrones (más de 65) en cinco categorías.

Veinte Veintidós categorías de patrones
Veinte Veintidós categorías de patrones

Este sólido conjunto de patrones combina a la perfección con las plantillas y las partes de las plantillas que vienen con el nuevo tema predeterminado, lo que lo convierte en una experiencia de edición realmente asombrosa.

Imágenes en capas con duotono
Imágenes en capas con duotono
Video con encabezado y detalles
Video con encabezado y detalles
Dos imágenes con texto.
Dos imágenes con texto.

Si aún no ha tenido la oportunidad de experimentar con patrones de bloques, le mostraremos por qué se consideran herramientas tan poderosas con un ejemplo simple.

Suponga que desea eliminar el pie de página predeterminado de las plantillas Índice y Publicación única y reemplazarlo con un patrón de bloque Veintidós diferente.

Inicie el Editor del sitio desde el menú Apariencia o el botón de la barra de herramientas de la interfaz de WordPress para personalizar la plantilla de Índice.

Haga clic en el botón Índice para mostrar el menú desplegable del encabezado que muestra la lista de áreas de plantilla disponibles en la página. Haga clic en el botón de puntos suspensivos junto a Pie de página y luego en Editar pie de página .

El inspector de plantillas
El inspector de plantillas

Como se mencionó anteriormente, esto iniciará el editor de partes de plantillas aisladas.

Editor de partes de plantillas aisladas
El pie de página predeterminado Veinte Veintidós en el editor de elementos de plantilla aislada

Ahora abra el insertador de bloques y haga clic en Patrones .

Inicie la nueva herramienta Explorador de patrones , seleccione la categoría Veinte veintidós pies de página y elija el pie de página de su elección.

El explorador de patrones en Twenty Twenty-Two
El explorador de patrones en Twenty Twenty-Two

Ahora agregue y edite los bloques según sus necesidades.

Edición del pie de página en el editor de partes de plantillas aisladas
Edición del pie de página en el editor de partes de plantillas aisladas

Guarde el encabezado y vuelva a revisar su sitio cuando esté satisfecho con los cambios.

La siguiente imagen compara tres plantillas (Índice, Publicación única y Publicación única sin separadores) con diferentes personalizaciones de encabezado y pie de página:

Personalizaciones de encabezado y pie de página comparadas en diferentes plantillas de Twenty Twenty-Two
Personalizaciones de encabezado y pie de página comparadas en diferentes plantillas de Twenty Twenty-Two

Extendiendo Veinte Veintidós con un tema infantil

Crear un tema secundario para un tema de bloque es bastante diferente de crear un tema secundario para un tema clásico.

Pero una vez que tenga una buena comprensión de la estructura de un tema de bloque, no le resultará difícil crear un tema secundario para Twenty Twenty-Two o cualquier otro tema de bloque.

Entonces, averigüemos cómo personalizar la apariencia de su sitio web basado en Twenty Twenty-Two.

1. Configuración de un tema secundario para Twenty Twenty-Two

En su directorio /wp-content/themes , cree una nueva carpeta y asígnele el nombre que desee (de acuerdo con los estándares de desarrollo de temas). En este ejemplo, llamamos a la carpeta de tema hijo veinteveintidós-hijo .

Ahora necesita un archivo style.css . Abra su editor de código favorito y cree la siguiente hoja de estilo:

 /* 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, puede editar los campos según sus necesidades.

Su tema hijo ya está disponible para la vista previa. Puede activarlo en la pantalla de administración Apariencia > Temas .

2. Personalización de la configuración global

Desde WordPress 5.9, los temas secundarios con un archivo theme.json heredan la configuración del tema principal. Si el archivo theme.json del niño define un conjunto de estilos, esos estilos se aplican sobre los estilos de sus padres.

Por lo tanto, podemos crear un archivo theme.json que incluya solo un pequeño bloque personalizado de configuraciones y definiciones de estilo en lugar de redefinir todas nuestras opciones originales.

Cómo declarar una paleta de colores personalizada

Al crear un tema secundario para Twenty Twenty-Two, la tarea más fácil es reemplazar la paleta de colores. Todo lo que necesita hacer es definir una nueva paleta de colores en el archivo theme.json de su 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" } ] } } }

Guarde su archivo y vuelva al editor del sitio. La paleta de colores definida anteriormente debería haber reemplazado la paleta de colores predeterminada de Twenty Twenty-Two.

Una paleta de colores de tema infantil
Una paleta de colores de tema infantil

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

Puede leer mucho más sobre las opciones de color de theme.json en esta descripción detallada de Carolina Nymark.

Cómo declarar filtros de duotono personalizados

También puede reemplazar los colores de duotono predeterminados con su conjunto personalizado de filtros.

Para hacer eso, simplemente agregue el siguiente código a la configuración de theme.json de su hijo al mismo nivel que la propiedad de la palette :

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

Guarde su archivo y verifique el resultado en el editor de bloques. Solo debería ver un único filtro de duotono.

Un filtro de duotono de tema hijo
Un filtro de duotono de tema hijo

3. Personalización de estilos de bloque

Como mencionamos anteriormente, con WordPress 5.9, ahora puede personalizar la configuración y los estilos de theme.json desde la interfaz de Estilos globales.

Los estilos de bloque se pueden personalizar desde la interfaz de estilos globales solo si el bloque declara compatibilidad con una funcionalidad específica en el archivo block.json correspondiente. Pero puede anular la configuración de bloqueo predeterminada en el theme.json de su tema secundario.

Ahora suponga que desea anular los estilos de bloque Título de la publicación y Grupo. Todo lo que necesita hacer es definir los estilos que desea agregar 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, cambiamos la familia de fuentes, el color de fondo y los valores de relleno para core/post-title , así como los márgenes superior e inferior para core/group .

La siguiente imagen muestra el resultado como se vería en el sitio público:

Un bloque de título de publicación personalizado
Un bloque de título de publicación personalizado

¡Y eso es todo por la reseña!

No profundizaremos más en los temas secundarios por ahora, ya que iría más allá del alcance de esta publicación. Mientras tanto, encontrará más ejemplos de temas secundarios de Twenty Twenty-Two en Github.

Twenty Twenty-Two ha sido diseñado para ser el tema predeterminado más flexible, liviano y personalizable de la historia, y hay aún más para amar en esta guía Haz clic para twittear

Resumen

Mientras observamos más de cerca 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), revelamos la nueva arquitectura de información introducida con WordPress 5.9. Incluso vimos un adelanto de la nueva interfaz de estilos globales.

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

Si bien muchas características nuevas de WordPress están en camino, otras están desapareciendo o perdiendo importancia. Muchos usuarios se preguntan qué sucederá con el Personalizador y cuál es la mejor manera de mantener la compatibilidad con versiones anteriores de los temas existentes.

Sin embargo, no debe esperar saltar repentinamente de los temas tradicionales a los temas de bloque de un solo salto. Actualmente tenemos cuatro tipos diferentes de temas para elegir:

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

Por lo tanto, no tema por ahora: todavía hay muchas soluciones para elegir si aún no se siente listo para cambiar a temas de bloqueo.

¡Y ahora te toca a ti! ¿Estás listo para dar el gran salto y comenzar a usar temas de bloques ahora mismo? Comparta sus pensamientos con nosotros en los comentarios a continuación.