Novedades en WordPress 6.0: nuevos bloques, cambio de estilo, edición de plantillas, API de fuentes web y más

Tabla de Contenidos

Estamos a un poco de distancia del lanzamiento de WordPress 6.0 y, como de costumbre, echamos un vistazo detrás de las cortinas para darles a nuestros lectores una idea de lo que pueden esperar del próximo lanzamiento importante de WordPress.

Digamos de inmediato que, si WordPress 5.9 nos trajo al corazón de la fase 2 de Gutenberg, WordPress 6.0 pretende consolidar las herramientas de personalización ya disponibles.Pero la nueva versión no será sólo eso. 

Como señaló Matias Ventura en la hoja de ruta preliminar 6.0 , la introducción del editor del sitio fue un paso importante, pero también solo un primer paso en el viaje.

Con WordPress 6.0, podemos esperar, de hecho, mejoras considerables en varias áreas del CMS, desde la usabilidad hasta el rendimiento, incluidas las siguientes:

  • Arquitectura de la información mejorada y experiencia de navegación del modelo
  • Creación de modelos mejorada
  • Una nueva interfaz de usuario de navegación
  • Un nuevo modo de navegación para el editor del sitio.
  • Estilos globales alternativos
  • Un bloque de navegación mejorado
  • Nuevas herramientas de diseño.
  • Y mucho más…

Pero espera, eso no es todo. WordPress 6.0 también trae una cantidad impresionante de cambios, funciones y correcciones de errores, incluidas más de 400 actualizaciones y 500 correcciones de errores para el editor. Se han corregido más de 189 tickets, incluidas 91 nuevas funciones y mejoras.

Sí, hay mucho que decir. Así que no esperemos más y descubramos las novedades de WordPress 6.0.

ABI DE FUENTES WEB

Una nueva API de fuentes web ahora proporciona una forma estandarizada de cargar fuentes web en WordPress, lo que garantiza el rendimiento y la privacidad del usuario.

A partir de WordPress 6.0 , solo puede registrar una fuente web nueva desde su theme.json .

Usar el theme.json es bastante simple. Todo lo que necesita hacer es agregar una nueva familia de fuentes a la sección typography. El siguiente código proporciona un ejemplo de registro de fuente web:

"typography": {
	"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"
		},
		{
			"fontFamily": ""Inter", sans-serif",
			"name": "Inter",
			"slug": "inter",
			"fontFace": [
				{
					"fontFamily": "Inter",
					"fontWeight": "200 900",
					"fontStyle": "normal",
					"fontStretch": "normal",
					"src": [ "file:./assets/fonts/inter/Inter.ttf" ]
				}
			]
		}
	]
}

Con el código anterior, hemos agregado la fuente Inter al conjunto predeterminado de fontFamiliesTwenty Twenty-Two. Si desea probarlo usted mismo, descargue la fuente web Inter de Google Fonts en la carpeta ./assets/fonts , luego agregue el código anterior a la sección theme.jsonsettings.typography de Twenty Twenty-Two. Una vez que haya terminado, guarde el archivo y regrese a la interfaz de edición del sitio.

La siguiente imagen muestra el resultado en el editor.

Se ha registrado una nueva familia tipográfica en Twenty Twenty-Two.
Se ha registrado una nueva familia tipográfica en Twenty Twenty-Two.

La API de Webfont guarda solo las fuentes necesarias para representar bloques en la página actual, lo que es especialmente útil con las fuentes Webfont definidas en variaciones de estilo . Además, la API optimiza la cantidad de solicitudes HTTP al registrar y poner en cola las fuentes por familia de fuentes .

Puede leer más sobre la nueva API en la solicitud de extracción de la API de Webfonts y el estado de la API de Webfonts para WordPress .

CAMBIO DE ESTILOS GLOBALES

Las variaciones de estilo global son una de las características más esperadas de WordPress 6.0. Los autores de temas ahora pueden agrupar varios conjuntos de estilos globales con sus temas, lo que permite a los usuarios cambiar entre variaciones de estilo con un solo clic.

Es un poco como tener temas secundarios listos para usar, con un conjunto predefinido de estilos para cada uno.

Para agregar una variación de estilo a su tema de bloque, agregará un archivo JSON alternativo a un directorio de estilos ubicado en la raíz de su tema.

Los temas que admiten variaciones de estilos globales muestran un nuevo elemento Examinar estilos en la barra lateral Estilos globales . Esto abre un panel donde los usuarios de temas encuentran una lista de estilos disponibles.

Explorar estilos en WordPress 6.0.
Explorar estilos en WordPress 6.0.

Elija un estilo global de la lista y el estilo se aplicará automáticamente a todo su sitio web.

Elija un estilo con un clic en WordPress 6.0.
Elija un estilo con un clic en WordPress 6.0.

La nueva función permite a los desarrolladores de temas crear un número ilimitado de variaciones de estilo y se combina perfectamente con la nueva API de Webfonts.

La siguiente imagen muestra un estilo personalizado del ejemplo anterior, con una fuente diferente aplicada a los títulos.

Una variación de estilo con una fuente personalizada en WordPress 6.0.
Una variación de estilo con una fuente personalizada en WordPress 6.0.

Si desea probarlo usted mismo, agregue un directorio de estilos a la raíz de su tema de bloque, cree un nuevo archivo JSON con un nombre significativo, ábralo en su editor de código favorito y agregue el siguiente código:

{
	"version": 2,
	"settings": {
		"color": {
			"duotone": [
				{
					"colors": [ "#143F6B", "#EFEFEF" ],
					"slug": "foreground-and-background",
					"name": "Foreground and background"
				},
				{
					"colors": [ "#143F6B", "#FEB139" ],
					"slug": "foreground-and-secondary",
					"name": "Foreground and secondary"
				},
				{
					"colors": [ "#143F6B", "#F6F54D" ],
					"slug": "foreground-and-tertiary",
					"name": "Foreground and tertiary"
				},
				{
					"colors": [ "#F55353", "#EFEFEF" ],
					"slug": "primary-and-background",
					"name": "Primary and background"
				},
				{
					"colors": [ "#F55353", "#FEB139" ],
					"slug": "primary-and-secondary",
					"name": "Primary and secondary"
				},
				{
					"colors": [ "#F55353", "#F6F54D" ],
					"slug": "primary-and-tertiary",
					"name": "Primary and tertiary"
				}
			],
			"palette": [
				{
					"slug": "foreground",
					"color": "#143F6B",
					"name": "Foreground"
				},
				{
					"slug": "background",
					"color": "#EFEFEF",
					"name": "Background"
				},
				{
					"slug": "primary",
					"color": "#F55353",
					"name": "Primary"
				},
				{
					"slug": "secondary",
					"color": "#FEB139",
					"name": "Secondary"
				},
				{
					"slug": "tertiary",
					"color": "#F6F54D",
					"name": "Tertiary"
				}
			]
		},
		"typography": {
			"fontFamilies": [
				{
					"fontFamily": ""Inter", sans-serif",
					"name": "Inter",
					"slug": "inter",
					"fontFace": [
						{
							"fontFamily": "Inter",
							"fontWeight": "200 900",
							"fontStyle": "normal",
							"fontStretch": "normal",
							"src": [ "file:./assets/fonts/inter/Inter.ttf" ]
						}
					]
				}
			]
		}
	},
	"styles": {
		"blocks": {
			"core/post-title": {
				"typography": {
					"fontFamily": "var(--wp--preset--font-family--inter)",
					"fontWeight": "700"
				}
			},
			"core/query-title": {
				"typography": {
					"fontFamily": "var(--wp--preset--font-family--inter)"
				}
			}
		},
		"elements": {
			"h1": {
				"typography": {
					"fontFamily": "var(--wp--preset--font-family--inter)",
					"fontWeight": "700"
				}
			},
			"h2": {
				"typography": {
					"fontFamily": "var(--wp--preset--font-family--inter)",
					"fontWeight": "700"
				}
			},
			"h3": {
				"typography": {
					"fontFamily": "var(--wp--preset--font-family--inter)",
					"fontWeight": "700"
				}
			},
			"h4": {
				"typography": {
					"fontFamily": "var(--wp--preset--font-family--inter)",
					"fontWeight": "700"
				}
			},
			"h5": {
				"typography": {
					"fontFamily": "var(--wp--preset--font-family--inter)",
					"fontWeight": "700"
				}
			},
			"h6": {
				"typography": {
					"fontFamily": "var(--wp--preset--font-family--inter)",
					"fontWeight": "700"
				}
			}
		},
		"typography": {
			"fontFamily": "var(--wp--preset--font-family--inter)"
		}
	}
}

Puede encontrar el código completo utilizado en el ejemplo anterior en GitHub y gist .

Los desarrolladores pueden encontrar descripciones detalladas de estilos globales y Theme.json en los artículos de documentación de Configuración y estilos globales y Theme.json .

También puede ver la última versión de Twenty Twenty-Two , que ahora presenta tres nuevas variaciones de estilo .

Explora estilos en Twenty Twenty-Two.
Explora estilos en Twenty Twenty-Two.

COMPOSICIONES DE BLOQUES EN TODAS PARTES

Una cosa es cierta, las composiciones de bloques juegan un papel central en la fase actual del desarrollo de WordPress. Presentado por primera vez con WordPress 5.5 , las composiciones de bloques se han mejorado constantemente con el tiempo.

Además, a partir de WordPress 5.9, los borradores en el directorio de borradores han llegado a nuestros sitios web de WordPress, se obtienen dinámicamente del directorio de borradores y se cargan en el insertador de bloques .

Y ahora cualquiera puede convertirse en desarrollador de comp, gracias a una nueva herramienta en línea. El Creador de compilaciones le permite compilar, editar y enviar sus mejores compilaciones de bloques al Directorio de compilación . Todo lo que necesita para comenzar es una cuenta de WordPress.org .

Búsqueda de imágenes en Build Creator
Búsqueda de imágenes en Build Creator

Y WordPress 6.0 trae nuevas mejoras a las composiciones de bloques.

En primer lugar, las composiciones de bloques son más fáciles de encontrar en la edición de plantillas. Quick Inserter ahora solo muestra patrones de bloque  cuando accede a ellos en el nivel superior de una plantilla, es decir, cuando el bloque que está a punto de agregar a su plantilla es el descendiente directo del documento.

Esto es cuando se cumplen las siguientes condiciones:

  • Estás editando un modelo de bloques.
  • El insertador rápido está al nivel de la raíz
  • Agrega un bloque entre otros bloques (es decir, ni el primero ni el último bloque en la página)
Quick Inserter solo muestra construcciones de bloques en el Editor de modelos.
Quick Inserter solo muestra construcciones de bloques en el Editor de modelos.

Otra característica útil ahora permite a los desarrolladores de temas agregar composiciones recomendadas a theme.json . Para probarlo, busque en el directorio de compilaciones, encuentre las compilaciones que desea recomendar a los usuarios de su tema, luego tome el slug de la compilación de la URL y agréguelo a su theme.json así:

"patterns": [
	"image-with-angled-overlay-shape-call-to-action-button-and-description",
	"hero-section-with-overlap-image"
],

Los usuarios encontrarán sus composiciones recomendadas en Block Inserter.

Composiciones recomendadas en el inserto rápido.
Composiciones recomendadas en el inserto rápido.

Una característica poderosa relacionada con las composiciones que viene con WordPress 6.0 es el guardado implícito de las composiciones . Los temas ahora pueden guardar composiciones implícitamente declarándolas como archivos PHP en un nuevo directorio /patternsen la raíz del tema.

El proceso es muy simple:

  1. crea un nuevo directorio de patrones en la raíz de tu tema,
  2. crear un grupo de bloques en el editor de bloques,
  3. copie y pegue su HTML en un nuevo archivo de texto,
  4. agregue el siguiente encabezado,
  5. y guarde el archivo como PHP en su directorio de patrones .
<?php
/**
 * Title: My pattern
 * Slug: my-theme/my-pattern
 * Categories: text
 */
?>

Y es todo. Ahora tiene una nueva compilación de bloques que aparecerá en el insertador de bloques.

Ver  Tipografía en la web: elegir fuentes que hablen por tu marca
Una composición personalizada en la inserción rápida de bloques.
Una composición personalizada en la inserción rápida de bloques.

Para obtener una visión más completa del desarrollo de las composiciones de bloques, puede seguir el problema de seguimiento en GitHub .

FUNCIONES DE EDICIÓN DEL SITIO

El desarrollo de Full Site Edition no terminó con WordPress 5.9. WordPress 6.0 va un paso más allá al mejorar las funciones de creación de temas visuales y brindar nuevas opciones de plantilla para temas de bloque. Y más características están en camino.

Construcción visual de temas.

WordPress 6.0 presenta una herramienta de exportación de tema de bloque mejorada , que le permite descargar el tema actual con todos sus cambios y personalizaciones.

Si aún no ha utilizado la herramienta de exportación de temas de bloques, es una poderosa herramienta de edición de sitios que le permite exportar sus estilos y plantillas como un tema completo .

Cuando esté satisfecho con los cambios, desde la interfaz del editor del sitio, abra la barra lateral Opciones y busque la sección Herramientas . Aquí, un botón Exportar le permite descargar el tema actual con todas sus personalizaciones de estilos y plantillas en un archivo zip.

Exporte un tema desde la interfaz del editor.
Exporte un tema desde la interfaz del editor.

Luego puede exportar su tema e instalarlo en cualquier sitio web de WordPress.

Probamos la herramienta de exportación de temas mejorada en una instalación local de WordPress y descubrimos que casi todo funciona como se esperaba… 😅

De todos modos, la herramienta de exportación aún está en desarrollo, ya día de hoy solo podemos vislumbrar su enorme potencial. Considere la posibilidad de crear sus temas desde la interfaz del editor de su sitio web y distribuirlos en un número arbitrario de instalaciones. Y esto, seas o no desarrollador…

Todavía hay muchos problemas abiertos por solucionar, lo que nos hace pensar que pronto veremos varias mejoras. Si tiene curiosidad y desea obtener más información sobre la creación de temas visuales (como nosotros), puede seguir el problema de seguimiento en GitHub .

Más opciones de plantilla en temas basados ​​en bloques

En versiones anteriores de WordPress, teníamos un número limitado de tipos de plantillas disponibles.

Se agregó una nueva plantilla en WordPress 5.9.
Se agregó una nueva plantilla en WordPress 5.9.

Ahora, WordPress 6.0 presenta varios tipos de plantillas nuevas , que incluyen autor, categoría, fecha, etiqueta y taxonomía.

Se agregó una nueva plantilla en WordPress 6.0.
Se agregó una nueva plantilla en WordPress 6.0.

Esta adición debería simplificar el flujo de trabajo de edición de su sitio. Para probarlo, simplemente elija una nueva plantilla de la lista desplegable, agregue los bloques necesarios, guarde sus cambios y verifique cómo se ve el sitio. Sí, es tan simple como eso. Ahora considere esto en combinación con la función de exportación de temas mencionada anteriormente y tendrá una mejor comprensión de lo que podemos esperar pronto con la edición del sitio.

MEJORAS EN LA INTERFAZ Y LA USABILIDAD

WordPress 6.0 introduce una serie de cambios en la interfaz de usuario, muchos de los cuales están destinados a ordenar la barra lateral. En conjunto, estos cambios deberían tener un gran impacto en la experiencia de edición general. Solo mencionaremos algunos aquí, pero puede consultar las notas de la versión de Gutenberg para obtener una lista más completa de cambios (consulte Gutenberg 12.4 , 12.5 , 12.6 , 12.7 , 12.8 , 12.9 , 13.0 ).

La vista de lista se ve afectada por un número considerable de cambios que mejoran la usabilidad del componente.

Expandir la vista de lista al seleccionar

Cuando hace clic en un bloque en el editor, el bloque ahora se resalta automáticamente en la vista de lista. Si el bloque está anidado en un bloque principal, el bloque principal se expande y muestra el elemento en el árbol de bloques.

Bloque de grupo expandido en la vista de lista al seleccionar un bloque.
Bloque de grupo expandido en la vista de lista al seleccionar un bloque.

Vista de lista desplegada predeterminada

Antes de WordPress 6.0, cuando abre el panel Vista de lista, se expande de forma predeterminada.

Vista de lista predeterminada en WordPress 5.9.
Vista de lista predeterminada en WordPress 5.9.

Pero dado que un artículo a menudo se compone de estructuras complejas de bloques anidados, el hecho de que el árbol de bloques se colapse al abrir la vista de Lista tiene mucho sentido.

Con la versión 6.0, la vista de lista está contraída de forma predeterminada en todos los editores , lo que hace que el árbol de bloques sea mucho más comprensible de un vistazo.

Vista de lista predeterminada en WordPress 6.0.
Vista de lista predeterminada en WordPress 6.0.

Centrarse en el botón Vista de lista

Al abrir el panel Vista de lista, el enfoque ahora regresa correctamente al botón Vista de lista . Esto es especialmente útil cuando navega a través de la vista de lista desde su teclado y da como resultado una experiencia de edición más fluida y fluida.

Selección múltiple de bloques y arrastrar y soltar

Otro cambio en la vista de lista le permite seleccionar varios bloques en el mismo nivel y arrastrarlos y soltarlos en otra posición en la lista.

Descripción general de los estilos de bloque

Antes de WordPress 6.0, las vistas previas de estilo de bloque se colocaban en la barra lateral de bloque, ocupando una parte considerable del panel Estilos.

Vista previa de Block Style en WordPress 5.9.
Vista previa de Block Style en WordPress 5.9.

Con 6.0, solo los nombres de variaciones de estilo aparecen en el panel Estilos, mientras que las vistas previas de estilo aparecen fuera de la barra lateral cuando se pasa el cursor sobre el nombre del estilo o se le da el foco.

Este cambio reduce las dimensiones de la barra lateral y debería hacer que los nombres de estilo sean más obvios.

Vista previa de Block Style en WordPress 6.0.
Vista previa de Block Style en WordPress 6.0.

Sección de tipografía de párrafo

En un esfuerzo por ordenar la barra lateral del bloque, el comando Capitular en el bloque Párrafo se ha movido de su sección a la sección Tipografía.

Con este cambio, todos los controles de configuración de tipografía ahora se colocan en la misma sección , lo que lleva a una experiencia de usuario más uniforme.

Configuración de tipografía en WordPress 5.9 vs WordPress 6.0.
Configuración de tipografía en WordPress 5.9 vs WordPress 6.0.

La configuración de borde y color se movió debajo del panel Herramientas

En un esfuerzo por poner orden en una barra lateral de configuración desordenada, los controles de configuración de borde y color se han movido al panel de herramientas y se pueden expandir y contraer en múltiples contextos.

El nuevo panel de configuración de bordes.
El nuevo panel de configuración de bordes.

Este cambio debería simplificar la experiencia de edición de bloques múltiples y brindar más consistencia a la barra lateral.

El panel Color en WordPress 6.0.
El panel Color en WordPress 6.0.

Recordatorio de la categoría en el panel de publicación del artículo

Cuando tiene prisa o publica regularmente una buena cantidad de publicaciones de blog, puede olvidarse fácilmente de las etiquetas o categorías. Si a menudo te encuentras en esta situación, encontrarás que el recordatorio de las etiquetas que aparecen en el panel de publicación de artículos es extremadamente útil.

Ahora, para ayudar a los administradores y autores del sitio a asegurarse de que sus publicaciones tengan asignadas las categorías necesarias, con WordPress 6.0 aparece una nueva Sugerencia: Asignar categoría en el panel de publicaciones cuando aún no se ha agregado una categoría al artículo.

La siguiente imagen compara el panel de publicación de publicaciones en WordPress 5.9 vs 6.0.

Panel de publicaciones en WordPress 5.9 vs.  6.0.
Panel de publicaciones en WordPress 5.9 vs. 6.0.

El editor de código agregado al editor del sitio.

Desde WordPress 6.0, el editor de código también está disponible en el editor del sitio. Al igual que con el editor de artículos , encontrará el editor de código en el menú Opciones.

WordPress 6.0 agrega el editor de código al editor del sitio.
WordPress 6.0 agrega el editor de código al editor del sitio.

Mejoras adicionales

Selección múltiple : ahora es posible seleccionar texto en varios bloques.

Selección de texto de dos párrafos.
Selección de texto de dos párrafos.

Interfaz de usuario de bloqueo de bloque : un nuevo elemento de bloqueo en el menú desplegable Más configuraciones abre una ventana donde puede evitar que los usuarios muevan o eliminen bloques (o ambos).

Bloqueo de un grupo de bloques.
Bloqueo de un grupo de bloques.

Esto es especialmente útil en la edición de plantillas y bloques reutilizables, donde también puede restringir la edición de bloques.

Bloqueo de un bloque de grupo reutilizable.
Bloqueo de un bloque de grupo reutilizable.

Conservación de estilo : al transformar bloques o crear nuevos botones, ahora se conservan varios estilos.

Ver  Más de 15 canales de Youtube para desarrolladores web y diseñadores web

La siguiente imagen muestra un bloque de lista con diferentes estilos.

Un bloque de lista con diferentes estilos aplicados.
Un bloque de lista con diferentes estilos aplicados.

Cuando convierte el bloque Lista en párrafos, los nuevos bloques conservan los mismos estilos que los elementos de la lista anterior.

Transformación de una lista en párrafos.
Transformación de una lista en párrafos.

La misma mejora se aplica a los nuevos botones agregados a un bloque de botones , que ahora heredan el estilo de los botones adyacentes .

NUEVOS BLOQUES BÁSICOS

El número de bloques básicos aumenta constantemente. Si se pregunta qué bloques principales están disponibles actualmente, ahora hay una página de manual que proporciona una lista completa de los bloques principales incluidos en la extensión de Gutenberg. Para cada bloque, se proporcionan el nombre, la categoría, los medios y los atributos, junto con un enlace útil al código fuente que encantará a los desarrolladores de bloques .

Y vienen más bloques con WordPress 6.0. Encuentre aquí los bloques que puede esperar con la próxima versión.

Bucle de solicitud de comentarios

Al igual que el bloque de bucle de consulta, un nuevo bloque de bucle de consulta de comentarios  muestra los comentarios de las publicaciones . Este es un bloque avanzado que incluye varios bloques internos que puedes modificar y configurar por separado.

Como se muestra en la imagen a continuación, puede seleccionar cualquiera de los bloques contenidos en el bloque de bucle de consulta de comentarios para personalizar su apariencia como desee. También puede agregar otros bloques o mover o eliminar bloques existentes ( Código fuente ).

Configuración del bloque de bucle de solicitud de retroalimentación
Configuración del bloque de bucle de solicitud de retroalimentación

Lee mas

Un nuevo bloque  personalizable Leer más le permite personalizar diferentes aspectos del botón Leer más: bordes, colores, esquinas, tipografía y más ( código fuente ).

¿Tiene tiempo de inactividad y problemas con WordPress? ¡Kinsta es la solución de hospedaje diseñada para ahorrarle tiempo! Descubre nuestras características

Esta es una gran adición porque le permite agregar y personalizar el enlace Leer más fuera del contexto del bloque Snippet.

El nuevo bloque Leer más.
El nuevo bloque Leer más.

No hay resultado en el bucle de consulta

El bloque Sin resultados es un contenedor de bloques donde puede agregar cualquier texto o bloque para mostrar cuando la consulta no tiene resultados. Para agregar el bloque Sin resultados a un ciclo de consulta, simplemente seleccione el ciclo de consulta y haga clic en el ícono más en la esquina inferior derecha para iniciar la inserción rápida. Luego busque el bloque Sin resultados. El bloque no está disponible fuera del bucle de consulta ( código fuente ).

Se agregó el bloque Sin resultados al ciclo de consulta.
Se agregó el bloque Sin resultados al ciclo de consulta.

Avatar y biografía del autor del artículo.

WordPress 6.0 también introduce nuevos tipos de bloques para dividir el bloque Autor en sus componentes y usarlos por separado en su contenido.

El bloque Biografía del autor del artículo proporciona la descripción del autor ( Código fuente ).

El bloque Avatar simplemente muestra el avatar de una cuenta que le permite elegir entre los autores del sitio ( Código fuente ).

El bloque Avatar en WordPress 6.0.
El bloque Avatar en WordPress 6.0.

Este bloque es especialmente útil para mostrar el avatar de un autor fuera del contexto del bloque de información del autor o de los comentarios. Por ejemplo, puede usarlo en una página dedicada a todos los autores o en una página que muestre reseñas de sus usuarios/lectores.

MEJORAS A LOS BLOQUES EXISTENTES

WordPress 6.0 también introduce varios cambios y mejoras a los bloques existentes que potencialmente tendrán un gran impacto en su flujo de trabajo de edición. El bloque de Navegación se verá afectado por varios cambios, pero también verá mejoras en otros bloques, incluidos el bucle de consulta, la imagen destacada, el grupo y los íconos sociales.

Mejoras en el bloque de navegación

En los últimos meses, el bloque de navegación ha recibido varias mejoras y ahora tiene una interfaz mucho más fácil de usar.

En primer lugar, se ha agregado una vista previa enriquecida al bloque Enlace de navegación. Cuando agrega un enlace que apunta a un recurso disponible públicamente, al hacer clic en el botón de enlace en la barra de herramientas del bloque, aparece una imagen de vista previa de ese recurso.

Vista previa enriquecida de los enlaces de navegación.
Vista previa enriquecida de los enlaces de navegación.

Algunos cambios adicionales afectan la experiencia de edición general.

Ahora, cuando agrega un nuevo menú y solo hay un menú de navegación, por defecto es el único menú disponible . Este cambio debería acelerar su flujo de trabajo de edición si solo tiene un menú de navegación.

Los enlaces de navegación ya tenían un campo de descripción donde los usuarios podían ingresar texto que describía sus enlaces de navegación. Sin embargo, en versiones anteriores de WordPress, los temas no podían admitir esta función.

Ahora, con WordPress 6.0, <span class="wp-block-navigation-item__description">aparece una después de la etiqueta del enlace.

La descripción del vínculo de navegación aparece después de la etiqueta del vínculo.
La descripción del vínculo de navegación aparece después de la etiqueta del vínculo.

En Twenty Twenty-Two, el elemento .wp-block-navigation-item__descriptionestá oculto a través de CSS, pero los temas pueden agregar una propiedad display: blockpara mostrar la descripción del enlace.

Descripción del enlace de navegación en WordPress 6.0 y Twenty Twenty-Two.
Descripción del enlace de navegación en WordPress 6.0 y Twenty Twenty-Two.

Filtros de bucle de consulta e imágenes destacadas

La sección de configuración de filtros de bucle de consulta ahora muestra campos de entrada para taxonomías personalizadas. Esto permite a los usuarios filtrar el tipo de publicación actual por una o más taxonomías personalizadas registradas para el tipo de publicación seleccionado.

Ahora también es posible filtrar artículos en función de varios autores , mientras que en versiones anteriores solo podía seleccionar un autor de una lista desplegable.

Configuración del filtro de bucle de consulta en WordPress 6.0.
Configuración del filtro de bucle de consulta en WordPress 6.0.

Además, ahora también puede establecer las dimensiones de la imagen destacada dentro de un bloque Query Loop .

Controlar las dimensiones de la imagen destacada en un bloque de bucle de consulta.
Controlar las dimensiones de la imagen destacada en un bloque de bucle de consulta.

Compatibilidad con tipografía y bordes en bloques de grupos receptivos

Los bloques de grupos y filas ahora admiten ajustes tipográficos . Este cambio permite a los usuarios aplicar la misma configuración de tipografía a un grupo completo de bloques a la vez, ahorrando unos pocos clics cuando se trata de formatear un grupo que contiene múltiples bloques anidados.

Configuración de tipografía para un bloque de grupo.
Configuración de tipografía para un bloque de grupo.

El bloque Agrupar se ha mejorado aún más y ahora puede agrupar bloques fácilmente en una pila o fila con un solo clic.

Simplemente seleccione los bloques que desea agrupar y elija uno de los tres comandos disponibles en la barra de herramientas de bloques: Agrupar , Fila , Apilar .

Una vez que haya agrupado los bloques, un nuevo panel en la barra lateral de configuración muestra descripciones de las variaciones del grupo, lo que le permite cambiar las variaciones con solo unos pocos clics.

Un bloque Fila muestra bloques horizontalmente.
Un bloque Fila muestra bloques horizontalmente.

WordPress 6.0 también introduce soporte de margen para bloques de grupo , lo que permite a los usuarios controlar los márgenes superior e inferior por separado .

Control de margen con un bloque de grupo.
Control de margen con un bloque de grupo.

Imagen destacada en el bloque Portada

Ahora puede usar imágenes destacadas en bloques de portada porque con WordPress 6.0 se agregó un interruptor Usar imagen destacada a la barra de herramientas del bloque. Con este nuevo control, puede cambiar de la imagen actual a la imagen destacada con solo un clic.

Usa la imagen destacada con un bloque de portada.
Usa la imagen destacada con un bloque de portada.

Mostrar/ocultar etiquetas en íconos sociales

Una pequeña pero útil mejora del bloque de iconos sociales ahora permite a los usuarios habilitar/deshabilitar etiquetas de enlaces de iconos .

Un comando Mostrar etiqueta habilita/deshabilita etiquetas en íconos sociales.
Un comando Mostrar etiqueta habilita/deshabilita etiquetas en íconos sociales.

Al habilitar esta opción, puede mostrar el nombre del servicio predeterminado o establecer etiquetas personalizadas por separado para sus íconos.

Mostrar etiqueta habilitada.
Mostrar etiqueta habilitada.

Mejoras de bloques adicionales

La próxima versión de WordPress también trae una gran cantidad de mejoras a muchos otros bloques.

Por ejemplo, ahora puede controlar los bordes de los bloques Columnas (Gutenberg 12.7 ).

Controles de borde para el bloque Columnas.
Controles de borde para el bloque Columnas.

Otra mejora útil de UX le permite insertar enlaces internos usando un simple disparador de teclado [[.

Agregar enlaces internos en WordPress 6.0 es más fácil.
Agregar enlaces internos en WordPress 6.0 es más fácil.

Ahora es más fácil controlar el espacio alrededor de las imágenes en un bloque de galería con el nuevo control de espacio entre bloques .

Imágenes sin espacio entre bloques.
Imágenes sin espacio entre bloques.
Imágenes con espacio entre bloques.
Imágenes con espacio entre bloques.

Pero estas son solo algunas de las mejoras que verás a partir de WordPress 6.0. Para obtener una lista completa, consulte las notas de la versión de Gutenberg.

¿Ya sabes qué características vienen con WordPress 6.0? No… ? 🙀 Entonces no te pierdas este análisis en profundidad de WordPress 6.0 🎉HAZ CLIC PARA TWITTEAR

RESUMEN

Como se mencionó anteriormente, ahora podemos decir que estamos en medio de la fase dos del desarrollo de Gutenberg, la fase de personalización .

La edición completa del sitio ahora es parte del núcleo de WordPress y la versión 6.0 y posteriores traerán más mejoras a lo que ya tenemos y podemos usar en este momento. Todo esto tendrá un gran impacto en el ecosistema de WordPress y en la web en su conjunto, teniendo en cuenta también que en el momento de escribir este artículo,

WordPress es utilizado por el 64,2% de todos los sitios web cuyo sistema de gestión de contenido conocemos. Esto representa el 43,0% de todos los sitios web. (Fuente W3Techs)

Nos detendremos aquí por ahora. Notre liste de fonctionnalités et d’améliorations à venir avec WordPress 6.0 ne peut pas être épuisée en un seul article, mais nous espérons avoir au moins mis en évidence les ajouts qui auront le plus grand impact sur la façon dont nous utilisons WordPress au jour le día.

¡Ahora nos gustaría concluir este artículo con algunas preguntas para nuestros lectores!

Contacta con Nosotros

    Si le ha gustado este artículo, no olvide visitar nuestro blog. También puede visitar nuestra web y observar cómo trabajamos.

    PÍDENOS PRESUPUESTO AHORA

    Explícanos tu proyecto y te ayudaremos a ponerlo en marcha.

    Somos la Agencia líder en diseño de páginas web, diseño de tiendas online, posicionamiento SEO, campañas SEM y redes sociales.

    © 2024 · Diseño Web Barcelona · Todos los derechos reservados