El lanzamiento de WordPress 6.4 está previsto para el 7 de noviembre, y ha llegado el momento de que exploremos las funciones y mejoras más destacadas que incluirá la nueva versión de WordPress.
Entre las novedades más interesantes se incluyen los Hooks de Bloque, una mejor organización de los patrones, una paleta de Comandos rediseñada y mejorada, cambios en las páginas de adjuntos, un efecto lightbox en las imágenes y varias mejoras en el flujo de trabajo de redacción.
La carga mejorada de plantillas, las estrategias refinadas de carga de scripts y otras mejoras de rendimiento harán que tu sitio web de WordPress funcione más rápido, mientras que las mejoras de la Vista de Lista y varias actualizaciones de la interfaz de usuario del administrador la harán más usable y accesible.
WordPress 6.4 también trae un nuevo tema predeterminado con toneladas de patrones y plantillas listas para usar que agilizarán tu proceso de edición.
Son muchas cosas, ¿verdad? Así que no esperes más y descubramos las novedades de WordPress 6.4.
Hooks de Bloque
Los Hooks de Bloque (antes llamados Bloques de Autoinserción) permiten a los plugins interactuar automáticamente con el editor Gutenberg.
Más concretamente, gracias a los Hooks de Bloque, un bloque puede colocarse automáticamente en una posición específica cuando se añade otro bloque al contenido.
Dos principios guían la forma en que deben funcionar los Hooks de Bloque:
- No se debería pedir al usuario que inserte el bloque en el editor manualmente, y la inserción del bloque en el front end debería producirse inmediatamente después de la activación del plugin que proporciona el bloque enganchado (hooked). Desactivar el plugin debería eliminar automáticamente el bloque.
- El bloque debe ser visible en el editor, y el usuario debe poder controlar la inserción automática.
Para tener en cuenta ambos principios y preservar la información contenida en el código, los bloques enganchados sólo funcionan en plantillas y partes de plantillas no modificadas y en patrones proporcionados por temas, copiados del Directorio de Patrones o registrados con la función register_block_pattern. No funcionarán en el contenido de las entradas, en las plantillas y partes de plantillas modificadas, ni en los patrones generados por los usuarios.
Además, la nota del desarrollador advierte:
a partir de WordPress 6.4, no puedes insertar automáticamente bloques que tengan una función de guardar, o se producirán errores de validación de bloques. En términos coloquiales, esto significa que los Hooks de Bloque funcionan con bloques dinámicos, no con bloques estáticos.
Más información sobre bloques estáticos y dinámicos.
Puedes implementar Hooks de Bloque de dos formas: utilizando el archivo block.json o el nuevo filtro hooked_block_types.
Enganchar (Hooking) Bloques mediante block.json
Utilizar block.json es la forma rápida y sencilla de enganchar un bloque de terceros, pero no proporciona una gran flexibilidad, ya que un bloque insertado automáticamente mediante block.json se adjuntará a todas las instancias del objetivo incondicionalmente.
Puedes añadir bloques enganchados utilizando la nueva propiedad blockHooks, que toma un objeto de pares clave/valor donde la clave es el nombre del bloque con el que quieres hacer hook, y el valor especifica su posición relativa al bloque de destino.
Puedes establecer una de las siguientes posiciones:
beforedel bloque objetivoafterdel bloque destinofirstChilddel bloque contenedor de destinolastChilddel bloque contenedor de destino
Por ejemplo, puedes hacer hook de un bloque a cada bloque Spacer utilizando blockHooks de esta forma:
{
blockHooks: {
'core/spacer': 'after'
}
}Cuando utilices firstChild o lastChild con block.json, un nuevo panel Plugins en el inspector de bloques muestra los bloques que se van a insertar automáticamente, con conmutadores para activar/desactivar la inserción automática de bloques.
Enganchar Bloques Utilizando hooked_block_types
Una forma más flexible de hacer que los bloques se conecten a un objetivo es utilizar el nuevo filtro hooked_block_types. Te permite hacer hook de bloques incondicionalmente, igual que el método block.json, o basándote en una condición — por ejemplo, hacer hook de un bloque a un objetivo dependiendo de la plantilla, la parte de la plantilla o el patrón donde se encuentre.
La función callback de hooked_block_types acepta cuatro parámetros:
$hooked_blocks— Un array de bloques enganchados.$position— Puede serbefore,after,first_child, olast_child.$anchor_block— El nombre del bloque ancla.$context— La plantilla de bloque, la parte de la plantilla o el patrón al que pertenece el bloque ancla.
Para más información técnica sobre los Hooks de Bloque, consulta la nota de desarrollo.
Mejoras en el Sistema de Patrones
Los Bloques Patrón son una potente herramienta de diseño que puedes utilizar en tus contenidos o plantillas, permitiéndote construir complejas estructuras de bloques sin complicaciones. Puedes utilizar los patrones proporcionados por tu tema de bloques, o puedes añadir más patrones copiándolos del Directorio de Patrones.
También puedes crear tus patrones desde cero en la interfaz del editor de sitios/post. Y si te sientes cómodo programando, puedes añadir patrones a tu tema actual — o tema hijo — con un archivo .php. Hoy en día, los patrones son tan cruciales en WordPress que hemos publicado una guía en profundidad sobre todo lo relacionado con los patrones de bloque.
Dicho esto, vamos a descubrir las novedades del sistema de patrones con WordPress 6.4.
En primer lugar, las categorías de patrones. En la versión anterior de WordPress, cuando creabas un nuevo patrón, sólo podías establecer el nombre y el tipo de patrón, sincronizado o no sincronizado.
A partir de WordPress 6.4, también puedes añadir una categoría para tu patrón, de modo que pueda identificarse más fácilmente en el editor de sitios y entradas.
También es posible cambiar las categorías cuando editas el patrón.
Además, se ha eliminado la pestaña Patrones sincronizados del insertador de bloques, y ahora puedes acceder a todos tus patrones desde la misma pestaña Patrones.
También es más fácil importar o exportar patrones como JSON desde el editor del sitio.
Otros cambios mejoran la compatibilidad de los patrones con los temas clásicos y allanan el camino para futuras implementaciones.
Twenty Twenty-Four
Twenty Twenty-Four es el nuevo tema predeterminado de WordPress que viene con WordPress 6.4. Es un tema de WordPress multifuncional pero minimalista, adaptado a tres casos de uso principales: propietarios de pequeñas empresas, fotógrafos y artistas, y escritores y blogueros.
Twenty Twenty-Four no añade funcionalidad a tu sitio web. Es más bien una colección de plantillas y patrones que, combinados entre sí, te permiten crear una amplia variedad de sitios web.
Además, proporciona mucho contenido predeterminado con toneladas de ejemplos reales de estructuras de páginas que puedes editar y personalizar según tus necesidades.
Tenemos un artículo completo que trata sobre el nuevo tema Twenty Twenty-Four. Échale un vistazo para verlo más de cerca.
Nuevas Herramientas y Funciones de Diseño
Con WordPress 6.4, se incorporan al core varias herramientas y funciones de diseño. Entre las más interesantes se incluyen:
Controles de Color para el Bloque Contenido
El bloque Contenido es hijo del bloque Bucle de Consulta (Query Loop) y resulta especialmente útil cuando necesitas personalizar el aspecto del contenido de un bucle de consulta.
Está disponible en el editor de entradas cuando estás editando un Bucle de Consulta y en el editor del sitio cuando estás creando o editando una plantilla.
Con WordPress 6.4, el bloque Contenido se ha mejorado y ahora admite colores para el texto, el fondo y los enlaces.
Soporte para el Bloque Imagen de Fondo
Con WordPress 6.4 se ha añadido un nuevo soporte para el bloque Imagen de fondo, con el bloque Grupo activado por defecto.
Cuando un tema utiliza la función appearanceTools en theme.json, el panel Fondo muestra el correspondiente control Imagen de fondo, que también muestra una vista previa de la imagen de fondo.
Establecer una imagen de fondo añade la propiedad background-image al elemento div del bloque junto con una declaración background-size: cover que garantiza que la imagen cubra el bloque de grupo.
Tienes dos formas de añadir soporte de imagen de fondo a tus temas. La primera y más sencilla es optar por la propiedad appearanceTools. Esto habilita varias herramientas de diseño, incluidas las imágenes de fondo.
Si necesitas un control más granular sobre las herramientas de diseño, puedes utilizar la propiedad backgroundImage en tu theme.json de esta forma:
{
"settings": {
"background": {
"backgroundImage": true
}
}
}Efecto de Lightbox en las Imágenes
Un nuevo conmutador Expandir al hacer clic en el panel Ajustes de la imagen del bloque te permite activar/desactivar el efecto lightbox en tus imágenes. Esta es la primera iteración de esta funcionalidad, y debería mejorarse en futuras versiones.
El efecto lightbox también funciona con filtros duotono, pero es un poco confuso cuando se trata de galerías de imágenes. En el momento de escribir esto, no es posible activar el efecto lightbox a nivel de galería y debes activar la función en imágenes individuales.
Para implementar esta función con las versiones anteriores de WordPress, tenías que utilizar un plugin. Ahora forma parte del core y esto significa menos código de terceros para tu sitio web de WordPress.
Orientación Vertical del Texto
Una nueva opción de Orientación del texto permite que los temas admitan texto vertical. Si tu tema admite esta función, puedes activar el texto vertical de derecha a izquierda en los ajustes de Tipografía.
Esta función está desactivada por defecto. Los desarrolladores de temas pueden añadir soporte para la orientación del texto añadiendo un nuevo ajuste writingMode a su theme.json:
{
settings: {
"typography": {
"writingMode": true
}
}
}También puedes establecer un comportamiento predeterminado diferente para bloques específicos. El siguiente ejemplo muestra cómo establecer la orientación vertical-rl para todos los bloques de párrafo:
{
"styles": {
"blocks": {
"core/paragraph": {
"typography": {
"writingMode": "vertical-rl"
}
},
}
}
}Mejoras para el Bloque Notas al Pie de Página
WordPress 6.4 también introduce algunas mejoras en el bloque Notas al Pie de Página. Ahora admite el color del enlace, del fondo y del texto. También proporciona controles para la tipografía, las dimensiones y los bordes.
Los controles de color de texto y enlace están expandidos por defecto. Los demás controles se contraen al cargar la página.
Botones Permitidos en el Bloque Navegación
Los botones están ahora en la lista de elementos interiores permitidos del bloque Navegación.
Cuando creas un nuevo elemento de menú, puedes transformarlo fácilmente en un botón desde la barra de herramientas del bloque.
Mejoras en la Interfaz de Usuario y en el Flujo de Trabajo
WordPress 6.4 también introduce varias mejoras en la interfaz del editor, mejorando la experiencia de edición y agilizando el flujo de trabajo. Nuestros cambios favoritos incluyen:
Paleta de Comandos Mejorada
Introducida por primera vez con WordPress 6.3, la Paleta de Comandos te permite ejecutar acciones de uso frecuente en la interfaz del Editor de Sitios. WordPress 6.4 supone un nuevo paso adelante con una actualización del diseño y algunas mejoras adicionales.
Las imágenes siguientes muestran un ejemplo del diferente comportamiento de la Paleta de Comandos en WordPress 6.3 y 6.4.
Esta versión también añade algunos comandos nuevos y mejora la coherencia y la nomenclatura. Los nuevos comandos incluyen transformaciones de bloques y las opciones de duplicar, copiar, eliminar e insertar antes/después.
Un ligero cambio elimina los verbos del principio de muchos comandos. Esto mejora la capacidad de búsqueda y la claridad de varios comandos.
La nueva versión también añade comandos de selección de bloques. Para verlo en acción, selecciona unos cuantos bloques en el Editor de Sitios y pulsa cmd + k (MacOS) o ctrl + k (Windows) e introduce una clave de búsqueda como «transformar». Deberías ver las siguientes sugerencias:
Puedes ejecutar varios comandos en una selección de bloques. Por ejemplo, puedes agrupar unos cuantos bloques:
Y también puedes desagruparlos.
En el momento de escribir esto, los comandos de selección de bloques incluyen Añadir antes, Añadir después, Eliminar, Duplicar, Mover a, Agrupar, Desagrupar y Transformar a.
Vista de Lista Mejorada
La Vista de Lista te permite navegar por el contenido de la página y realizar varias acciones en bloques, grupos y patrones. Estas acciones incluyen Copiar, Duplicar, Agrupar y muchas más. Esto es especialmente útil con estructuras complejas de bloques anidados, ya que te permite expandir y contraer grupos de elementos y realizar varias acciones en bloques, grupos y patrones individuales.
A partir de WordPress 6.4, también puedes renombrar un grupo de bloques, previsualizar imágenes para los bloques Galería e Imagen, duplicar bloques utilizando el acceso directo cmd + shift + d (ctrl + shift + d en Windows).
Barras de Herramientas Fijadas
Al editar bloques con varios hijos, trabajar con los bloques interiores puede resultar complicado. Esto es especialmente cierto cuando se trata del bloque Navegación.
Antes de WordPress 6.4, al seleccionar bloques interiores, la barra de herramientas del bloque se movía a una posición diferente en la pantalla. Este comportamiento provocaba una mala experiencia de usuario para bloques como Navegación y Lista.
Desde WordPress 6.4, la barra de herramientas del bloque hijo está unida a la posición del padre. De esta forma, cuando cambias la selección entre bloques hermanos, la barra de herramientas permanece fija en la misma posición que el padre.
La barra de herramientas fijada se implementa actualmente en los bloques Navegación, Lista y Cita.
Mejoras de Rendimiento y Otros Cambios para Desarrolladores
Se han incorporado al core más de 100 actualizaciones de rendimiento, junto con varios cambios para los desarrolladores de temas. Exploremos algunos cambios interesantes.
Estrategias de Carga de Scripts
Las estrategias de carga de scripts se introdujeron con WordPress 6.3 y proporcionan una forma de evitar que un script se cargue en un orden inesperado en el árbol de dependencia de scripts mediante los atributos async y defer.
Con WordPress 6.4, las estrategias de carga de scripts se implementan para los scripts frontend en el core y en los temas incluidos.
Además, a partir de WordPress 6.4, los scripts «que se cargan con el atributo defer se han trasladado del pie de página a head para que se descubran antes mientras se carga el documento y puedan ejecutarse antes una vez cargado»
Cambios adicionales mejoran la seguridad del core y la mantenibilidad. Para una visión más técnica de la carga de scripts, consulta la nota de desarrollo de WP 6.4.
Cambios en las Páginas de Adjuntos
A partir de WordPress 6.4, las páginas de adjuntos para las nuevas instalaciones de WordPress están totalmente deshabilitadas.
Antes de WordPress 6.4, WordPress creaba automáticamente una página de adjuntos para cada archivo multimedia subido. Pero esto no tenía sentido en muchos sitios web. Esas páginas son indexadas por los motores de búsqueda y podrían suponer una mala experiencia para los usuarios.
A partir de WordPress 6.4, una opción de la base de datos wp_attachment_pages_enabled controla el comportamiento de las páginas de adjuntos.
Esta opción se establece en 1 para los sitios web existentes (páginas de adjuntos habilitadas) y en 0 para los sitios web nuevos (páginas de adjuntos deshabilitadas) a partir de WordPress 6.4.
Los administradores del sitio pueden cambiar ese valor a través de WP CLI:
wp option set wp_attachment_pages_enabled 0|1O visitando wp-admin/options.php en tu sitio web y cambiando el valor de la opción wp_attachment_pages_enabled.
Componente ProgressBar
Se ha introducido un componente básico horizontal ProgressBar para sustituir al componente Spinner utilizado anteriormente al cargar contenido en el editor del sitio.
Patrones de Carga en WordPress 6.4
Antes de WordPress 6.4, la función _register_theme_block_patterns() se utilizaba para registrar cualquier patrón que el tema activo pudiera proporcionar en su directorio de patrones. Debido a las extensas operaciones de archivo que requería esta función, su uso provocaba un problema de sobrecarga de recursos, especialmente notable con temas que proporcionaban toneladas de patrones, como Twenty Twenty-Four.
Para solucionar este problema, WordPress 6.4 introduce una nueva función _wp_get_block_patterns() que almacena los patrones en una caché transitoria. Gracias a la nueva función, las peticiones posteriores no necesitan búsquedas de archivos, lo que se traduce en importantes mejoras de rendimiento.
Los desarrolladores pueden omitir la caché de patrones activando el modo de desarrollo para un tema, actualizando el número de versión del tema, cambiando de tema o llamando al método WP_Theme::delete_caches().
Menos Comprobaciones de Existencia de Archivos
Anteriormente, algunas funciones de la API de Temas ejecutaban varias comprobaciones de la existencia de archivos dentro de un tema hijo antes de volver al tema padre.
Esto no era óptimo porque esas funciones no tenían en cuenta si el tema actual era un tema hijo o no.
Para evitar comprobaciones inútiles de existencia de archivos, se han actualizado varias funciones y métodos de la API de Temas, y ahora comprueban si el directorio de la hoja de estilos del tema actual coincide con el directorio de la plantilla antes de proceder a las comprobaciones de existencia de archivos.
Esto debería suponer una mejora significativa del rendimiento, especialmente con temas no hijos.
Otras mejoras de rendimiento afectan a las funciones get_block_theme_folders() y the_header_image_tag().
Nueva Función de Opciones
Las opciones se cargan por defecto automáticamente. Cuando un sitio web tiene demasiadas opciones, esto puede provocar un tiempo de respuesta lento del servidor y errores. Para evitar este comportamiento, los desarrolladores de plugins ahora pueden aprovechar varias funciones nuevas que permiten a los desarrolladores gestionar las opciones, mejorar el rendimiento y establecer un comportamiento predeterminado diferente.
Dos funciones permiten obtener varias opciones con una sola consulta a la base de datos.
prime_options() permite obtener varias opciones con una sola consulta a la base de datos. Los valores de las opciones se almacenan en la caché para que las siguientes llamadas a get_option() no requieran consultas adicionales a la base de datos.
prime_options() toma un array de nombres de opciones y no devuelve ningún valor de opción, ya que su única responsabilidad es actualizar la caché correspondiente.
prime_options_by_group() funciona de forma similar a prime_options() pero para un grupo de opciones específico.
Otras dos funciones permiten establecer valores de autocarga de opciones.
wp_set_option_autoload_values() se puede utilizar para establecer el valor de autocarga de una única opción.
wp_set_options_autoload_values() se puede utilizar para establecer valores de carga automática para varias opciones.
Cambios Adicionales para Desarrolladores
Los cambios adicionales para desarrolladores incluyen:
- Sustitución de las etiquetas de estilo codificadas por
wp_add_inline_style()(ver nota del desarrollador) - Valores configurables mínimo y máximo de viewport para tipografía fluida en theme.json (Ver nota del desarrollador)
- Desactivar los controles de diseño en theme.json (Ver nota del desarrollador)
- Establece el modo de edición de bloques utilizando el nuevo hook
useBlockEditingMode(Ver nota del desarrollador) - Se ha mejorado la función
wp_get_loading_optimization_attributes()y se han introducido nuevos filtros para controlar los atributos de optimización de la carga (Ver nota del desarrollador) - Una nueva API
registerInserterMediaCategorypermite a los desarrolladores de plugins registrar categorías de medios de inserción personalizadas y ofrecer más opciones a los usuarios. La API sólo permite añadir categorías multimedia de inserción personalizadas, pero no proporciona control sobre las categorías principales, excepto la categoríaOpenverse(Ver nota del desarrollador) - Dos nuevas funciones
wp_get_admin_notice()ywp_admin_notice()«reducen la carga de mantenimiento, fomentan la coherencia y permiten filtrar argumentos y mensajes para todas las notificaciones de los administradores» (Ver nota del desarrollador) - Se ha mejorado el sistema de caché de
WP_QueryyWP_Term_Query, reduciendo las consultas a la base de datos y mejorando la eficiencia general (Ver nota del desarrollador) - Se ha mejorado el marcado de las páginas de inicio de sesión y registro para optimizar su estructura y proporcionar a los desarrolladores más flexibilidad en las personalizaciones (Ver nota del desarrollador)
Resumen
La tercera versión de WordPress 2023 incluye un montón de funciones nuevas, nuevas herramientas de diseño y una serie de mejoras en la interfaz de usuario, correcciones de errores y otros pequeños cambios.
También introduce un nuevo tema predeterminado ligero y multifuncional con toneladas de patrones y plantillas que puedes personalizar para tus casos de uso específicos.
Ahora te toca a ti: ¿Has tenido ya la oportunidad de probar WordPress 6.4? Si quieres probar y/o contribuir a WordPress, te recomendamos nuestra suite gratuita de desarrollo local de WordPress, DevKinsta.
¿Qué funciones de la versión 6.4 te gustan más? Comparte tus opiniones en los comentarios más abajo.
Deja una respuesta