Twenty Twenty-Three es el nuevo tema por defecto de WordPress que se lanza con WordPress 6.1.
Se trata de un tema minimalista sin imágenes ni funcionalidades adicionales. Da lo mejor de sí mismo como tema de inicio para crear plantillas y variaciones de estilo y también para probar todas las características introducidas con las últimas versiones de WordPress. El tema podría verse como un entorno real de desarrollo y pruebas, aunque el estilo minimalista, la capacidad de respuesta y la ligereza lo convierten en una buena opción para crear blogs y sitios web adecuados para una amplia variedad de propósitos.
En su introducción al tema Twenty Twenty-Two, Kjell Reigstad escribió sobre el futuro de los temas por defecto:
Las innovaciones como theme.json, las plantillas de bloques y los patrones de bloques están haciendo que el desarrollo de temas sea mucho más sencillo, y están proporcionando nuevas formas para que los usuarios personalicen sus sitios. Hay razones para creer que la comunidad puede aprovechar todo esto para crear soluciones de personalización y temas más frecuentes y diversos para nuestros usuarios en los próximos años.
Y Channing Ritter hizo la siguiente propuesta:
¿Qué pasaría si, en lugar de hacer hincapié en el tema en sí, destacáramos un conjunto de variaciones de estilo diseñadas por los miembros de la comunidad? Podríamos utilizar Twenty Twenty-Two como base para un nuevo tema despojado y mínimo, un lienzo en blanco para dejar que brille una gama diversa de variaciones de estilo.
Y eso es lo que está ocurriendo con el nuevo tema por defecto Twenty Twenty-Three. La comunidad ha sido llamada a participar activamente en el diseño del tema por defecto de WordPress, y eso nos gusta porque hace que el nuevo tema sea el resultado de un trabajo realmente participativo.
Pero antes de descubrir las variaciones de estilo que vienen con el nuevo tema por defecto de WordPress, vamos a conocer las características básicas de Twenty Twenty-Three y para qué puede servir.
Diseños y Estilos de Página
Como se ha mencionado anteriormente, Twenty Twenty-Three es una versión reducida de Twenty Twenty-Two. Lo que llama la atención del nuevo tema por defecto es su sencillez y ligereza. Twenty Twenty-Three es flexible y se adapta perfectamente a las últimas funciones de edición de sitios de Gutenberg, como la edición de plantillas, las variaciones de Estilos Globales, la Tipografía Fluida y los patrones de bloques.
Por lo tanto, no te sorprenderá que en las capturas de pantalla que se muestran en este artículo, veas páginas mínimas sin ningún tipo de campanas y silbatos, pero perfectamente adecuadas para la personalización y las pruebas.
Para darte un ejemplo de ello, la siguiente imagen muestra páginas de una sola entrada con y sin imágenes destacadas.
La siguiente imagen compara la página de inicio con una página de archivo.
Aunque el nuevo tema es una versión simplificada de Twenty Twenty-Two, en comparación con el anterior tema por defecto, Twenty Twenty-Three presenta algunas diferencias clave.
En primer lugar, se ha reducido el tamaño de los encabezados y se ha sustituido la fuente serif por defecto por una fuente sans serif del sistema.
También se ha aplicado una paleta de colores diferente. Puedes ver la nueva definición de la paleta de Twenty Twenty-Three en el siguiente código del theme.json:
{
"settings": {
"appearanceTools": true,
"color": {
"palette": [
{
"color": "#ffffff",
"name": "Base",
"slug": "base"
},
{
"color": "#000000",
"name": "Contrast",
"slug": "contrast"
},
{
"color": "#9DFF20",
"name": "Primary",
"slug": "primary"
},
{
"color": "#345C00",
"name": "Secondary",
"slug": "secondary"
},
{
"color": "#F6F6F6",
"name": "Tertiary",
"slug": "tertiary"
}
]
},
}
}
Pero la principal característica del nuevo tema por defecto es su conjunto de variaciones de estilo. Twenty Twenty-Three viene con diez variaciones de estilo globales, cada una de las cuales muestra una combinación diferente de colores, familia de fuentes y tamaños de fuente.
Encontrarás los archivos JSON correspondientes en la carpeta de estilos de Twenty Twenty-Three.
Las vistas previas completas de las plantillas de página, los estilos y las variaciones de estilo de Twenty Twenty-Three están disponibles en Figma.
Tipografía de Twenty Twenty-Three
En un tema minimalista como Twenty-Three, la tipografía desempeña un papel fundamental para que el texto sea legible, el sitio sea atractivo y, en definitiva, proporcione a los visitantes una experiencia de navegación gratificante, independientemente del dispositivo y del tamaño de la pantalla.
Para ello, Twenty Twenty-Three incluye un nuevo conjunto de familias de fuentes y utiliza la tipografía fluida introducida con WordPress 6.1.
Tipos de letra
Twenty Twenty-Three presenta un nuevo conjunto de tipos de letra que se utilizan en variaciones de estilo y se caracterizan por su sencillez y variedad:
- Fuente del sistema –
var(--wp--preset--font-family--system-font) - IBM Plex Mono –
var(--wp--preset--font-family--ibm-plex-mono) - Inter –
var(--wp--preset--font-family--inter) - Fuente Serif Pro –
var(--wp--preset--font-family--source-serif-pro) - DM Sans –
var(--wp--preset--font-family--dm-sans)
IBM Plex Mono forma parte del conjunto de fuentes IBM Plex, el nuevo tipo de letra corporativo de IBM publicado bajo la licencia SIL Open Font License (OFL). Puedes ver una vista previa de la misma en los sitios web de Adobe Fonts e IBM.
Inter es una familia tipográfica gratuita y de código abierto creada y diseñada para pantallas de ordenador por Rasmus Andersson. Puedes previsualizar y descargar la familia de fuentes en el sitio web de Rasmus Andersson o en Google Fonts.
Source Serif Pro es un tipo de letra de Adobe Originals y puedes utilizarlo gratuitamente con una cuenta de Adobe Fonts (lee más sobre las licencias de fuentes de Adobe).
DM Sans es otro tipo de letra con licencia SIL Open Font License (OFL), que fue encargado por Google a Colophon Foundry, y diseñado por Colophon Foundry, Jonny Pinhorn e Indian Type Foundry.
Tipografía fluida y espaciado
Twenty Twenty-Three utiliza los preajustes de tipografía fluida y espaciado introducidos con WordPress 6.1.
El nuevo tema predeterminado de WordPress ofrece un gran ejemplo de implementación de tipografía fluida en los temas de WordPress y puedes utilizarlo como plantilla para añadir compatibilidad con esta función en tus temas.
El siguiente código muestra las definiciones de las propiedades settings.typography.fluid y settings.typography.fontSizes[] en el theme.json:
"settings": {
...
"typography": {
"fluid": true,
"fontSizes": [
{
"fluid": {
"min": "0.875rem",
"max": "1rem"
},
"size": "1rem",
"slug": "small"
},
{
"fluid": {
"min": "1rem",
"max": "1.125rem"
},
"size": "1.125rem",
"slug": "medium"
},
{
"size": "1.75rem",
"slug": "large",
"fluid": false
},
{
"size": "2.25rem",
"slug": "x-large",
"fluid": false
},
{
"size": "10rem",
"slug": "xx-large",
"fluid": {
"min": "4rem",
"max": "20rem"
}
}
]
}
}El ajuste typography.fluid añade soporte para la tipografía fluida, mientras que typography.fontSizes[].fluid establece el valor mínimo y máximo del tamaño de la fuente.
Además de la tipografía fluida, Twenty-Three también admite el espaciado fluido.
Antes de WordPress 6.1, sólo era posible establecer valores de espaciado personalizados en el editor. Esto significa que antes de WordPress 6.1 los autores de temas no podían especificar valores fijos para el relleno, el margen y el espacio. Esto daba lugar a varias limitaciones. Por ejemplo, no era posible transferir fácilmente los ajustes de espaciado entre diferentes temas o mantener los valores de espaciado al copiar y pegar contenido y patrones de bloques entre diferentes sitios.
Los temas pueden declarar la compatibilidad con el espaciado fluido mediante los nuevos ajustes de spacing.spacingScale e spacing.spacingSizes (lee más en Theme.json: Añadir preajustes de tamaño de espaciado). En Twenty Twenty-Three esto se hace con los siguientes ajustes:
"settings": {
"spacing": {
"spacingScale": {
"steps": 0
},
"spacingSizes": [
{
"size": "clamp(1.5rem, 5vw, 2rem)",
"slug": "30",
"name": "30"
},
{
"size": "clamp(1.8rem, 1.8rem + ((1vw - 0.48rem) * 2.885), 3rem)",
"slug": "40",
"name": "40"
},
{
"size": "clamp(2.5rem, 8vw, 6.5rem)",
"slug": "50",
"name": "50"
},
{
"size": "clamp(3.75rem, 10vw, 7rem)",
"slug": "60",
"name": "60"
},
{
"size": "clamp(5rem, 5.25rem + ((1vw - 0.48rem) * 9.096), 8rem)",
"slug": "70",
"name": "70"
},
{
"size": "clamp(7rem, 14vw, 11rem)",
"slug": "80",
"name": "80"
}
],
"units": [
"%",
"px",
"em",
"rem",
"vh",
"vw"
]
}
}El siguiente vídeo muestra la tipografía fluida en acción en Twenty Twenty-Three.
Puedes consultar los preajustes de tipografía y espaciado en Especificación de diseño.
Plantillas y partes de plantillas
Con Twenty Twenty-Three, verás en acción todas las funciones y mejoras de edición del sitio que llegan con WordPress 6.1.
Esto es especialmente cierto con las plantillas y las partes de plantillas.
Cuando inicies el Editor de Sitios con Twenty Twenty-Three funcionando en tu sitio web, verás una lista de once plantillas y cuatro partes de plantillas.
La imagen siguiente muestra la plantilla 404 en el editor del sitio.
Encontrarás los archivos HTML correspondientes en las carpetas de plantillas y partes de Twenty Twenty-Three.
La siguiente imagen muestra la parte de la plantilla Comentarios en modo de edición:
Encontrarás plantillas personalizadas y partes de plantillas definidas en el theme.json.
Plantillas personalizadas
Además de las plantillas predeterminadas, Twenty Twenty-Three proporciona las siguientes plantillas personalizadas:
- En blanco
- Blog (Alternativa)
- 404
- Con imagen destacada
- Con bloque de portada
Estas plantillas se definen en el theme .json de la siguiente manera:
{
"customTemplates": [
{
"name": "blank",
"postTypes": [
"page",
"post"
],
"title": "Blank"
},
{
"name": "blog-alternative",
"postTypes": [
"page"
],
"title": "Blog (Alternative)"
},
{
"name": "404",
"postTypes": [
"page"
],
"title": "404"
},
{
"name": "with-featured-image",
"postTypes": [
"page",
"post"
],
"title": "With Featured Image"
},
{
"name": "with-cover-block",
"postTypes": [
"page",
"post"
],
"title": "With Cover Block"
}
],
}Partes de la plantilla
Las partes de las plantillas se definen como sigue.
{
"templateParts": [
{
"area": "header",
"name": "header",
"title": "Header"
},
{
"area": "footer",
"name": "footer",
"title": "Footer"
},
{
"area": "uncategorized",
"name": "comments",
"title": "Comments"
},
{
"area": "uncategorized",
"name": "post-meta",
"title": "Post Meta"
}
]
}Estilos Globales y Variaciones de Estilo
Como se ha mencionado anteriormente, a partir de WordPress 6.0, los autores de temas pueden agrupar varios conjuntos de estilos con sus temas, lo que permite a los usuarios cambiar entre las variaciones de estilo sin cambiar su tema.
Esta gran función de WordPress es la principal característica del nuevo tema por defecto, ya que Twenty Twenty-Three ofrece diez combinaciones de estilo preconfiguradas para elegir.
Puedes navegar por estos estilos en la interfaz de Estilo Global de tu Editor de Sitios. Aquí puedes
- Cambia el estilo global desde el panel Examinar estilos.
- Personalizar la configuración de la tipografía: texto, enlaces, encabezados y botones
- Editar los colores por defecto o cambiar el color de elementos específicos
- Personalizar el diseño del área de contenido principal
- Personaliza la apariencia de elementos específicos
Merece la pena señalar de nuevo que en la creación de tantas variaciones de estilo, la participación de la comunidad fue crucial. Tras el inicio del proyecto Twenty Twenty-Three, se recibieron 38 propuestas de 19 colaboradores de 8 países diferentes (puedes explorar todos los proyectos en GitHub).
De las 38, se han seleccionado 10 variaciones de estilo:
- Pitch es una versión oscura del estilo por defecto que utiliza la familia tipográfica Inter de Rasmus Andersson.
- Canary utiliza un único tamaño de letra y un ancho de columna estrecho. También utiliza un interesante efecto de borde-radio.
- Eléctrico utiliza un color en negrita para toda la tipografía del sitio.
- Peregrinaje es una versión oscura de color del tema base.
- Marigold es una variación suave y agradable del estilo básico.
- Block-Out presenta un efecto de duotono en las imágenes.
- Whisper presenta algunos elementos personalizados, como el borde alrededor de la página, los estilos de los botones y los subrayados únicos de los enlaces.
- Sherbet tiene un aspecto único, brillante y colorido
- Grapes fue seleccionado por su agradable combinación de paleta de colores y tipo de letra.
- Aubergine es un llamativo fondo bicolor más oscuro.
Lo mejor de las variaciones de estilo es que no tienes que ser necesariamente un desarrollador de front-end para crear tus estilos.
Si te sientes cómodo con la codificación, puedes elegir uno de los archivos .json que se encuentran en la carpeta de estilos de Twenty Twenty-Three y utilizarlo como plantilla para construir tu variación de estilo.
Pero si la codificación no es lo tuyo, puedes utilizar el plugin oficial Create Block Theme, que puedes descargar gratuitamente del directorio de plugins de WordPress.org.
Primero, instala y activa el plugin, y luego navega al editor de estilos. Una vez aquí, personaliza los colores, la tipografía y el diseño según tus preferencias y guarda los cambios.
Una vez que estés satisfecho con tus cambios, busca Crear Tema en Bloque en Apariencia en el menú de administración de WordPress.
Marca el último elemento de la lista: Crear una variación de estilo. Se te pedirá que asignes un nombre a tu variación de estilo. Introduce el nombre y haz clic en Crear Tema. Esto creará un nuevo archivo .json en la carpeta de estilos del tema.
Ahora puedes personalizar aún más tu estilo e incluso exportarlo a otras instalaciones de WordPress.
El plugin Create Block Theme es una valiosa herramienta para aprovechar al máximo las funciones de creación de temas y plantillas disponibles en las últimas versiones de WordPress. Ya que estás en ello, puedes echar un vistazo a las demás opciones:
- Exportar Twenty Twenty-Three
- Crear un hijo de Twenty Twenty-Three
- Clonar el Twenty Twenty-Three
- Sobrescribir Twenty Twenty-Three
- Crear un tema en blanco
- Crear una variación de estilo
Resumen
Aunque a primera vista el nuevo tema predeterminado de WordPress puede parecer una especie de caja vacía sin funciones, si lo miras con detenimiento, es mucho más que eso, ya que te permite aprovechar al máximo las últimas funciones de edición de sitios de WordPress.
En Twenty Twenty-Three, verás muchas plantillas y partes de plantillas para personalizar, un conjunto de 10 variaciones de estilo para utilizar como base para crear sitios web únicos, y compatibilidad con todas las nuevas funciones disponibles en WordPress 6.1, empezando por la tipografía fluida y el sistema de plantillas mejorado.
Con Twenty Twenty-Three, la sensación es que la diferencia entre la apariencia del sitio y la funcionalidad es ahora muy marcada. La única función del tema es regular la apariencia del sitio, dejando la adición de funcionalidad a los plugins. Y desde este punto de vista, Twenty Twenty-Three hace un gran trabajo, ofreciendo a los usuarios de WordPress todas las últimas funciones de edición de sitios Gutenberg. Personalizar el aspecto de un sitio web nunca ha sido tan fácil.
Ahora depende de ti. ¿Has utilizado ya el nuevo tema en un entorno de staging? ¿Has probado ya a crear variaciones de estilo personalizadas? Comparte tu opinión con nosotros en los comentarios.
Deja una respuesta