WordPress 6.3 «Lionel» ya está disponible. Es la última gran versión de la Fase 2 de la hoja de ruta de WordPress.

Durante la segunda fase, el desarrollo se centró principalmente en el Editor de Sitios, se incrementaron las funcionalidades, mejoraron la interfaz y la usabilidad.

Ahora los creadores de sitios pueden crear diseños y gestionar contenidos dentro de la misma interfaz, sin tener que pasar de un área de administración a otra y sin tener que escribir una sola línea de código.

Con WordPress 6.3, 10 versiones del plugin Gutenberg se fusionan en el núcleo, y si no utilizas Gutenberg en tu sitio web, verás muchos cambios en la interfaz del Editor de Sitios.

Con WordPress 6.3, la experiencia de edición se ha mejorado significativamente. Varios cambios técnicos afectaron al Editor de Sitios, dando lugar a una nueva forma de explorar los temas en bloque y de utilizar el propio Editor de Sitios. Navegación mejorada, modo sin distracciones, previsualizaciones de temas de bloques, revisiones de estilos y plantillas, una nueva paleta de Comandos y mucho más.

Hay mucho que decir sobre WordPress 6.3. Así que no esperes más y descubramos las novedades de la versión final de la Fase 2.

Navegación Mejorada en el Editor de Sitios

Con WordPress 6.3, la navegación del Editor de Sitios se ha mejorado significativamente con la adición de nuevos puntos de entrada a diferentes áreas del editor. Antes de la versión 6.3, se podía acceder a estas secciones de administración desde puntos de acceso situados en distintos menús y pantallas de administración. El resultado de estos cambios es una experiencia de edición más sencilla y coherente.

La siguiente imagen compara el menú de navegación del editor en WordPress 6.2 y 6.3.

Navegación del Editor de Sitios en WordPress 6.2 Vs. 6.3
Navegación del Editor de Sitios en WordPress 6.2 Vs. 6.3

Lo primero que notarás en la imagen anterior son los dos botones que aparecen en la esquina superior derecha de la barra lateral del editor. El botón Ver sitio aparece al pasar el ratón por encima y proporciona un acceso rápido al frontend de tu sitio web WordPress. Se trata de una pequeña pero útil adición que te permite acceder rápidamente a las páginas del sitio independientemente de dónde te encuentres en el editor del sitio cuando el menú Navegación está abierto.

El botón Abrir paleta de comandos (el icono de la lente) proporciona acceso a una nueva función de WordPress 6.3, la Paleta de comandos (proporcionaremos más información al respecto más adelante).

Botones Ver sitio y Abrir paleta de comandos en el Editor de Sitios
Botones Ver sitio y Abrir paleta de comandos en el Editor de Sitios

La nueva Navegación del editor incluye los siguientes elementos.

Navegación

Una vez que hayas creado un menú de navegación, aparecerá en el menú Navegación del Editor de Sitios. Aquí, puedes mover los elementos del menú hacia arriba o hacia abajo o eliminarlos de un desplegable. También puedes arrastrar y soltar elementos para organizar el orden del menú.

Menús de navegación en el Editor de Sitios
Menús de navegación en el Editor de Sitios

Si haces clic en un elemento del menú, accederás a los detalles de la página. Aquí también puedes editar el contenido y el diseño de la página (ver más abajo).

Estilos

Desde el menú Estilos, puedes acceder a las variaciones de estilo en modo exploración. Aquí puedes previsualizar los estilos disponibles, aplicar uno y hacer tus personalizaciones.

Menú Estilos en WordPress 6.3
Menú Estilos en WordPress 6.3

El icono del ojo muestra el Libro de estilos, una función introducida en la versión 6.2 que proporciona una vista previa de los bloques disponibles con los distintos estilos aplicados sin salir de la interfaz del editor.

Puedes acceder fácilmente al Libro de Estilos desde el panel Estilos del editor de Sitios
Puedes acceder fácilmente al Libro de Estilos desde el panel Estilos del editor de Sitios

Páginas

El elemento de menú Páginas te da acceso a las 10 últimas páginas del sitio actualizadas, además de a varias funciones de edición. En esta sección, puedes crear nuevas páginas, editar el contenido y el diseño de las páginas existentes, acceder a los detalles de las páginas y mucho más.

La adición más interesante aquí es que ahora es posible crear nuevas páginas sin salir de la interfaz del editor.

Cuando haces clic en el icono + del panel de Navegación, un nuevo modal en el centro de la página te permite establecer un título para la nueva página, mostrando también un tooltip con sugerencias para tu título.

Redactar una nueva página en WordPress 6.3
Redactar una nueva página en WordPress 6.3

Cuando haces clic en Crear borrador, se te redirige al editor de entradas con una nueva página cargada.

En Páginas, también puedes editar el contenido de la página directamente desde el Editor de Sitios.

Menú Páginas en WordPress 6.3
Menú Páginas en WordPress 6.3

Ahora puedes editar tanto el contenido como el estilo de la página en el mismo lugar. Esto te da un mayor control sobre todos los aspectos de la página y debería mejorar significativamente la experiencia de edición.

En el modo de edición, puedes cambiar fácilmente entre el editor de páginas y el editor de plantillas. Esto debería evitar cualquier confusión sobre lo que estás editando y permitirte determinar si tus cambios deben afectar sólo a la página actual o aplicarse también a las demás páginas que utilizan la misma plantilla.

La misma pantalla también muestra los detalles de la página.

Detalles de la página en el Editor de Sitios
Detalles de la página en el Editor de Sitios

Actualmente los detalles incluyen:

  • Estado
  • Slug
  • Plantilla
  • Patrones
  • Palabras
  • Tiempo de lectura
  • Última modificación

Plantillas

Aquí puedes acceder a las plantillas de las páginas. La estructura de la pantalla Plantillas no cambia mucho. Sin embargo, con WordPress 6.3, cuando creas una plantilla nueva, una nueva superposición modal te proporciona una lista de páginas para que elijas tu plantilla.

Un nuevo modal proporciona una lista de páginas predeterminadas para elegir al crear una nueva plantilla
Un nuevo modal proporciona una lista de páginas predeterminadas para elegir al crear una nueva plantilla

Como segundo paso, un nuevo modal proporciona una lista de patrones de bloques que puedes utilizar para construir tu plantilla.

Elegir un patrón en el proceso de creación de plantillas
Elegir un patrón en el proceso de creación de plantillas

Patrones

Denominada Biblioteca en una iteración anterior, la sección de administración Patrones refleja una serie de cambios notables que afectan al sistema de patrones de bloques. No se trata sólo de cambios en la interfaz de usuario. Se trata de una revisión general de toda la arquitectura de patrones de bloques.

Pantalla de patrones en WordPress 6.3
Pantalla de patrones en WordPress 6.3

En la sección de administración de Patrones, podrás gestionar las partes de plantilla y los patrones. Aquí encontrarás un menú que te da acceso a las partes de plantilla y a los patrones de bloque divididos por categorías. Un icono de candado identifica los patrones de temas que no pueden ser modificados por el usuario.

Partes de Plantilla y Patrones Temáticos en la nueva sección Patrones del Editor de Sitios
Partes de Plantilla y Patrones Temáticos en la nueva sección Patrones del Editor de Sitios

En esta sección, puedes crear nuevas partes de plantilla y patrones de bloque personalizados y gestionarlos junto con los patrones de tu tema.

Crear nuevas partes de plantilla y patrones de bloque en WordPress 6.3
Crear nuevas partes de plantilla y patrones de bloque en WordPress 6.3

Cuando haces clic en el botón Crear patrón, una nueva ventana emergente modal te permite asignar un nombre a tu patrón y establecer el tipo de patrón que vas a crear, sincronizado o no sincronizado.

Crear un patrón sincronizado en WordPress 6.3
Crear un patrón sincronizado en WordPress 6.3

Una vez que hayas creado al menos un patrón de bloque personalizado, puedes acceder a él desde Mis patrones, que aparecerá en la parte superior del menú Patrones.

Mis patrones en WordPress 6.3
Mis patrones en WordPress 6.3

Puedes seleccionar tu patrón de bloques y acceder a un nuevo panel en el que puedes ver los detalles del patrón. Moviendo el asa hacia la derecha o hacia la izquierda, puedes previsualizar el patrón en diferentes resoluciones y comprobar su capacidad de respuesta.

La sección Detalles muestra el estado de sincronización del patrón actual.

Previsualizar un patrón de bloques personalizado en WordPress 6.3
Previsualizar un patrón de bloques personalizado en WordPress 6.3

En la parte inferior del menú Patrones, también encontrarás un par de enlaces: Gestionar todas las partes de la plantilla y Gestionar todos mis patrones. Estos enlaces proporcionan acceso directo a las partes de plantilla y a los patrones personalizados.

Esto es todo sobre la nueva interfaz de administración de Patrones en el Editor de Sitios. Ahora vamos a ver qué cambia en la estructura y funcionalidad del sistema de patrones de bloques.

Un Nuevo Sistema de Patrones de Bloques

A partir de WordPress 6.3 (y Gutenberg 16.1):

  • Los bloques reutilizables han pasado a llamarse Patrones sincronizados,
  • Los patrones de bloques regulares pasan a llamarse Patrones no sincronizados,
  • El tipo de entrada personalizada wp_block se ha ampliado para admitir campos personalizados y se ha añadido un nuevo metacampo wp_block_sync_status para almacenar el estado de sincronización de un patrón,
  • Se ha añadido una propiedad source al esquema y a la respuesta de los patrones de bloque para distinguir los patrones del núcleo y los del usuario,
  • Se ha ampliado la API REST con un nuevo atributo
wp-block-sync-status
El metacampo wp_block_sync_status se utiliza para almacenar el estado de sincronización de un patrón de bloques

Ahora está más claro que todos los cambios realizados en un patrón sincronizado se aplicarán a cada ocurrencia de ese bloque en todo tu sitio web.

Por el contrario, los cambios realizados en un patrón de bloques no sincronizado sólo afectarán a esa instancia específica del patrón y no se aplicarán a ninguna otra instancia que puedas haber añadido a otras entradas o páginas de tu sitio web.

Gracias al nuevo sistema de gestión de patrones, ahora puedes crear patrones de bloques sincronizados y no sincronizados directamente desde el editor del sitio o de la entrada, donde antes sólo era posible crear bloques reutilizables (ahora patrones sincronizados).

Para probar esta nueva función en el editor de entradas, abre tu panel de control de WordPress y ve a Entradas -> Añadir nuevo. Una vez allí, crea un nuevo grupo de bloques o simplemente selecciona los bloques que quieras añadir a tu patrón de bloques. A continuación, selecciona Crear patrón/bloque reutilizable en el menú emergente de la barra de herramientas de bloques.

Crear patrón/bloque reutilizable en el editor de entradas
Crear patrón/bloque reutilizable en el editor de entradas

Además, en el editor de sitios, un botón Crear patrón te permite crear una nueva pieza de plantilla o patrón.

Crear un nuevo patrón en el editor de Sitios
Crear un nuevo patrón en el editor de Sitios

Al hacer clic en Crear parte de plantilla, se abre un modal/ventana emergente para que añadas un nombre a tu parte de plantilla y el área de la página a la que está destinada la parte de plantilla.

Crear parte de plantilla en el editor de Sitios
Crear parte de plantilla en el editor de Sitios

Cuando haces clic en Crear patrón, un modal/pop-up diferente te permite establecer un nombre para tu patrón y elegir si quieres crear un patrón sincronizado o no sincronizado.

Crear patrón en el editor del Sitio
Crear patrón en el editor del Sitio

Confirma y construye tu parte de patrón o plantilla en el editor del Sitio.

Construir un patrón de bloques en el editor del Sitio
Construir un patrón de bloques en el editor del Sitio

Cuando estés satisfecho con tus ediciones, guarda el patrón de bloques y vuelve al editor del Sitio. Abre la sección Patrones y haz clic en Gestionar todos mis patrones. La pantalla Patrones mostrará tu nuevo patrón de bloques personalizado.

La pantalla Patrones en WordPress 6.3
La pantalla Patrones en WordPress 6.3

Los patrones de bloque también aprovechan los controles de relación de aspecto del bloque Imagen. Ahora, si estableces una relación de aspecto para una imagen, se conservará cuando cambies la imagen por otra de dimensiones diferentes. Esto será especialmente útil con los patrones de bloques , ya que no tendrás que preocuparte de las dimensiones de las imágenes cuando las sustituyas en los patrones de bloques.

Control de la relación de aspecto del bloque Imagen
Control de la relación de aspecto del bloque Imagen

Para una visión más detallada de los cambios realizados en el sistema de patrones de bloques, consulta los PRs #51078, #51144 y #50028.

Revisiones de Estilo Expuestas en el Editor de Sitios

El Editor de Sitios expone ahora un historial de revisiones que te permite examinar los cambios y elegir uno para restaurarlo.

Para acceder al historial de revisiones, haz clic en el nuevo botón Revisiones del panel Estilos.

Acceder al historial de revisiones en WordPress 6.3
Acceder al historial de revisiones en WordPress 6.3

Este panel proporciona una lista de revisiones en una línea de tiempo. También proporciona el nombre del autor de cada revisión y la fecha y hora de cada revisión en un tooltip. Puedes previsualizar todas las revisiones y elegir la que quieras restaurar.

Revisiones de estilo en WordPress 6.3
Revisiones de estilo en WordPress 6.3

Puedes navegar por las revisiones  en la interfaz de Estilos Globales, previsualizarlas y restaurar tu contenido en cualquier momento.

El desarrollo de las revisiones no se detiene aquí. A medida que avancemos hacia la Fase 3, las revisiones se verán afectadas por nuevas adiciones y mejoras que mejorarán aún más su usabilidad y desbloquearán nuevas funciones.

La Paleta de Comandos

La paleta de comandos es una nueva función que te permite ejecutar acciones de uso frecuente, como saltar a otras páginas o plantillas del editor, mediante comandos.

En el Editor de Sitios, haz clic en el icono de la lente o pulsa cmd + k (ctrl + k en Windows y Linux). Se abrirá la paleta de comandos.

Cuando empiezas a escribir un comando, la paleta Comandos te sugiere una serie de comandos entre los que puedes elegir. Esto proporciona una forma rápida de realizar tareas o acceder a áreas específicas del Editor de Sitios.

La paleta de comandos en WordPress 6.3
La paleta de comandos en WordPress 6.3

La primera implementación de esta función ofrece una función de búsqueda rápida y algunas acciones como navegar por el editor del sitio, crear una nueva entrada/página, alternar elementos de la interfaz de usuario, restablecer o eliminar una plantilla o una parte de una plantilla, y mucho más. En futuras iteraciones se añadirán más comandos.

La nueva herramienta desbloquea un sinfín de casos de uso. Por ejemplo, la paleta de comandos podría ser necesaria para mostrar opciones de diseño para entradas o páginas concretas.

También puedes registrar tus comandos personalizados gracias a la nueva API de la Paleta de comandos  para representar, registrar y anular el registro de comandos.

Existen diferentes formas de registrar comandos dependiendo del tipo de comando que estés registrando.

  • Comandos estáticos: Los desarrolladores pueden registrar comandos estáticos personalizados utilizando la acción wp.data.dispatch( wp.commands.store ).registerCommand o el gancho React wp.data.useCommand.
  • Comandos dinámicos: Estos comandos se incluyen en la lista de comandos en función del término de búsqueda introducido por el usuario en el campo de entrada de la paleta de comandos o cuando un comando sólo está disponible cuando se cumplen algunas condiciones.
  • Comandos contextuales: Estos comandos tienen prioridad en contextos específicos, lo que significa que aparecen automáticamente en el contexto adecuado (por ejemplo, cuando estás editando una plantilla). Los comandos Restablecer plantilla y Eliminar plantilla son ejemplos de comandos contextuales. De momento, se han implementado dos contextos:
    • site-editor: Este contexto se establece cuando navegas por el editor del sitio
    • site-editor-edit: Este contexto se establece cuando estás editando algo (plantilla, parte de plantilla o página) en el editor

Puedes obtener la lista de los comandos disponibles ejecutando wp.data.select( wp.commands.store ).getCommands() en la consola del navegador.

Listado de comandos en WordPress 6.3
Listado de comandos en WordPress 6.3

Inicialmente disponible en los editores de Post y de Sitio, la paleta de comandos debería extenderse a todo el admin en el futuro.

Para obtener una vista previa para desarrolladores de la Paleta de Comandos, consulta la Solicitud de devolución de llamada.

Características Adicionales y Mejoras del Editor de Sitios

Además de las características y mejoras comentadas en las secciones anteriores, WordPress 6.3 nos trae:

Vista previa del tema en el Editor de Sitios

A partir de la versión 6.3, un nuevo parámetro de theme_preview permite cargar todos los temas en bloque en el Editor de Sitios y previsualizarlos antes de activarlos.

Vista previa del tema Bloques TT1 en el Editor de Sitios
Vista previa del tema Bloques TT1 en el Editor de Sitios

Para previsualizar un tema de bloques, ve a la pantalla Apariencia > Temas y pasa el ratón por encima de cualquier tema de bloques. Deberías ver un botón de Vista previa en vivo encima de cada tema de bloques. Simplemente haz clic en este botón para iniciar la vista previa del tema en el Editor de Sitios. Para los temas que no son de bloque, el botón Vista previa en vivo abre el Personalizador de temas.

Mejoras en el estado de carga

Con WordPress 6.3, se ha mejorado el estado de carga del editor para evitar que el usuario interactúe con el editor antes de que esté completamente cargado.

Ahora el usuario no puede interactuar con el editor hasta que se haya completado la carga
Ahora el usuario no puede interactuar con el editor hasta que se haya completado la carga

Modo sin distracciones

WordPress 6.3 introduce un modo de edición Sin Distracciones en el editor del sitio. Es la misma función disponible en el editor de entradas desde WordPress 6.2

Modo sin distracciones en el editor de sitios
Modo sin distracciones en el editor de sitios

Puedes activar esta función en el panel de opciones del Editor de Sitios. Una vez activado el modo Sin distracciones, las barras laterales y las barras de herramientas desaparecen, dejándote vía libre para centrarte en tus ediciones.

Mejoras adicionales de la interfaz de usuario

  • Un nuevo componente de <ViewLink> muestra ahora un botón para abrir cualquier tipo de entrada publicada en una nueva ventana. Se trata de una función pequeña pero útil que te permite ver el tipo de entrada actual sin tener que buscar el enlace en la barra lateral de configuración (PR #50260)
  • Se han mejorado las descripciones de las plantillas para explicar mejor qué hace exactamente cada plantilla. Esto debería ayudar a los usuarios a elegir la plantilla adecuada para personalizarla en el Editor de Sitios.
  • Antes, los ajustes del controles Duotone sólo estaban disponibles en la barra de herramientas de bloques. Con la 6.3, los controles Duotone están ahora disponibles a través de la barra lateral de ajustes (PR #49838)
  • Antes de WordPress 6.3, las fuentes grandes no se escalaban lo suficiente en pantallas pequeñas. Ahora, la tipografía fluida se escala suavemente gracias a un factor de escala logarítmica utilizado para calcular un tamaño de fuente mínimo para pantallas pequeñas (PR #49707)

Nuevos Bloques y Herramientas de Diseño Mejoradas

WordPress 6.3 también ofrece dos bloques útiles que deberían hacer felices a muchos redactores de contenidos.

Nuevo bloque de Notas a pie de página

WordPress 6.3 también nos trae un bloque de notas a pie de página superútil.

Añadir una nota al pie de página a un bloque de texto
Añadir una nota al pie de página a un bloque de texto

Con esta gran incorporación, añadir una nota al pie a un bloque de texto (párrafo, encabezado y listas) requiere sólo un par de clics. Coloca el cursor donde quieras añadir el enlace y haz clic en el botón Notas a pie de página disponible en el menú contextual del bloque. Esto añadirá una nota al pie de la página en la parte inferior de la página.

El bloque Notas al pie de página en WordPress 6.3
El bloque Notas al pie de página en WordPress 6.3

El bloque Notas al pie de página añade, elimina y reordena automáticamente tus notas al pie de página a medida que editas el texto, lo que resulta extremadamente útil, especialmente con artículos de formato largo.

Nuevo bloque Detalles

Ahora puedes ocultar una parte del contenido hasta que el lector esté preparado para leer tus FAQ, ver tu vídeo o escuchar tu magnífico podcast gracias al nuevo bloque Detalles.

Un bloque Detalles vacío con resumen y contenido oculto
Un bloque Detalles vacío con resumen y contenido oculto

El nuevo bloque consta de dos elementos separados: resumen y contenido oculto. Por defecto, el contenido está oculto, pero puedes cambiar la configuración en la barra lateral de configuración del bloque.

Un bloque Detalles con resumen y contenido de vídeo
Un bloque Detalles con resumen y contenido de vídeo

El bloque utiliza un elemento details con un texto enriquecido summary y un div que contiene el elemento oculto (ver también PR #45055).

Mejoras en el Bloque de Portada

El Bloque de Portada se ha mejorado con un par de características de diseño que facilitan su uso y abren más posibilidades de personalización.

En primer lugar, el Bloque de Portada es ahora compatible con la herramienta de diseño del color del texto. Gracias a esta incorporación, los usuarios y los autores de temas pueden cambiar el color de todos los bloques interiores simplemente ajustando el color del texto en el Bloque de Portada. Además, facilita el manejo de las transformaciones desde el bloque Medios y Texto, ya que ahora los colores de texto se pasan suavemente a los bloques resultantes.

El bloque de Portada admite ahora la herramienta de diseño del color del texto
El bloque de Portada admite ahora la herramienta de diseño del color del texto

Otra adición al bloque de Portada que llega con WordPress 6.3 es la compatibilidad con todas las herramientas de diseño relacionadas con los bordes. Esta adición debería reducir la necesidad de personalizar el estilo de los bloques.

Controles de borde para el bloque de Portada
Controles de borde para el bloque de Portada

WordPress 6.3 también añade compatibilidad con el diseño limitado/de flujo al bloque de Portada, que ahora se puede gestionar igual que el bloque Grupo. Este cambio añade coherencia a la gestión del diseño y debería facilitar las personalizaciones tanto a los usuarios como a los desarrolladores de temas.

Ajustes de diseño para el bloque de Portada
Ajustes de diseño para el bloque de Portada

Sin embargo, los desarrolladores de temas deben realizar algunas pruebas en sus temas existentes, ya que el sistema de diseño de bloques puede anular las implementaciones personalizadas.

Filtro Duotono mejorado

Algunos cambios mejoran la forma de utilizar el filtro duotono.

En primer lugar, ahora puedes establecer un filtro duotono globalmente desde el panel Estilo del Editor de Sitios. Antes sólo podías aplicar filtros duotono globalmente desde el archivo theme.json.

Aplicar el filtro duotono en el panel Estilo del Editor de Sitios
Aplicar el filtro duotono en el panel Estilo del Editor de Sitios

Esto es posible porque ahora los valores de duotono se establecen utilizando barras de color en lugar de valores de color. Esto también significa que puedes establecer los valores de duotono una vez y aplicarlos independientemente del tema o variación de tema actual, siempre que utilice el mismo slug.

Por último, para los más expertos en tecnología, ahora los estilos Duotone se generan utilizando el motor de estilos de WordPress y se almacenan con CSS compatible con bloques en lugar de estar inline.

Mejoras adicionales

  • El bloque Botón ahora admite color, estilo y anchura de borde (PR #44574)
  • Se ha añadido el control de la longitud del extracto al bloque Post Excerpt – https://github.com/WordPress/gutenberg/pull/44964
  • Ahora puedes controlar la relación de aspecto del bloque Imagen destacada de la entrada (PR #47854)
  • La interfaz de Estilos Globales incluye ahora controles de color y tipografía para el elemento Pie de foto (PR #49141)
  • Se ha añadido una variación de la Fecha de modificación de la entrada al bloque Fecha de la entrada. Es útil si quieres añadir rápidamente la fecha de modificación de la entrada en lugar de la fecha de publicación (PR #49111)
  • Ahora se puede sustituir el logotipo del sitio desde la barra lateral (PR #49992)

Mejoras de Rendimiento y Cambios para Desarrolladores

WordPress 6.3 también trae muchos cambios y nuevas funciones destinadas a mejorar el rendimiento del sitio y los flujos de trabajo de los desarrolladores. Entre las muchas adiciones, hemos elegido las siguientes:

Se elimina la compatibilidad con PHP 5

A partir de WordPress 6.3, PHP 5 dejará de ser compatible. La nueva versión mínima soportada será PHP 7.0.0. La versión recomendada de PHP es 7.4 o superior. La versión 7.4 es también la versión más utilizada en el 50,8% de los sitios web de WordPress.

Versiones de PHP utilizadas en sitios WordPress existentes en julio de 2023
Versiones de PHP utilizadas en sitios WordPress existentes en julio de 2023 (Fuente de la imagen: WordPress.org)

Esto es importante no sólo para los desarrolladores, sino para todos los usuarios de WordPress, ya que mejora la seguridad y el rendimiento de tu sitio web.

Esta es también la razón por la que el alojamiento de Kinsta sólo permite versiones compatibles de PHP. Regularmente ejecutamos nuestras pruebas de rendimiento de las versiones compatibles de PHP para comprobar las mejoras de rendimiento que se producen con las versiones más recientes.

Versiones de PHP soportadas en julio de 2023
Versiones de PHP soportadas en julio de 2023 (Fuente de la imagen: PHP.net)

Mejoras de rendimiento en la carga de imágenes

A partir de WordPress 6.3, el atributo fetchpriority con un valor de "high" se asigna a la imagen para determinar si es la imagen LCP (Largest Contentful Pain), mientras que el Largest Contentful Pain es una métrica que informa del tiempo de renderizado del elemento más grande dentro de la ventana gráfica.

El atributo fetchpriority indica al navegador que dé prioridad a esta imagen, incluso antes de que se haya calculado el diseño.

Otra mejora es la gestión automática de la carga lenta de imágenes con el atributo loading. Este atributo se introdujo por primera vez en WordPress 5.5, luego se mejoró con WordPress 5.9 para omitir el atributo loading="lazy" para la primera imagen de contenido (consulta mejoras en el rendimiento de la carga diferida en WordPress 5.9). Ahora, con WordPress 6.3, deberían haberse solucionado todos los problemas residuales, lo que se traduce en una buena mejora del rendimiento.

Los atributos fetchpriority y loading están ahora controlados por la nueva función wp_get_loading_optimization_attributes(). Esta función devuelve una matriz asociativa de atributos para optimizar el rendimiento de la carga. Actualmente, los posibles atributos devueltos por esta función son:

  • loading con un valor de "lazy"
  • fetchpriority con un valor de "high"

Ten en cuenta que ningún elemento debe tener ambos atributos, ya que son mutuamente excluyentes. En caso de que un elemento contenga ambos atributos, se activará una advertencia.

Para una visión más detallada de la función wp_get_loading_optimization_attributes() y de los atributos fetchpriority y loading con ejemplos de uso, consulta Mejoras en el rendimiento de las imágenes en WordPress 6.3.

Compatibilidad con los atributos async y defer de

HTML 5
async y defer son dos atributos de HTML 5 que indican al navegador que descargue JavaScript sin pausar el análisis del HTML.

Hay una diferencia clave entre ambos atributos:

  • Los scripts con el atributo async se ejecutan de forma asíncrona en cuanto se cargan. Una vez cargado el script, el navegador pausa el análisis del HTML y ejecuta el script.
  • Los scripts con el atributo defer sólo se ejecutan cuando finaliza el análisis de la página.

A partir de WordPress 6.3, ahora puedes registrar scripts con los atributos async y defer utilizando el parámetro booleano $in_footer de las funciones wp_register_script() o wp_enqueue_script() (consulta también Cómo poner en cola tus activos en WordPress).

Este parámetro se ha sobrecargado y ahora acepta un nuevo parámetro de matriz $args que te permite especificar una estrategia de carga para tus scripts.

Aquí tienes un ejemplo de cómo definir una estrategia de aplazamiento en el archivo PHP de un plugin utilizando wp_register_script (el código sería el mismo con wp_enqueue_script):

wp_register_script( 
	'custom-script', 
	plugins_url( '/js/custom-script.js' , __FILE__ ), 
	array(), 
	'1.0.0', 
	array(
		'strategy' => 'defer'
	) 
);

Se garantiza la compatibilidad con versiones anteriores, por lo que puedes seguir indicando a WordPress que cargue tu script en el pie de página:

wp_register_script( 
	'custom-script', 
	plugins_url( '/js/custom-script.js' , __FILE__ ), 
	array(), 
	'1.0.0', 
	array(
		'in_footer' => true,
		'strategy' => 'defer'
	) 
);

Gracias a las nuevas implementaciones, ahora es posible evitar que un script se cargue en un orden inesperado en el árbol de dependencia de scripts, lo que no era posible con las herramientas disponibles antes de WordPress 6.3. Para una visión más detallada de los cambios en la API de Scripts, con ejemplos adicionales y detalles técnicos, consulta la nota de desarrollo de Simon Dowdles.

Modo de desarrollo

WordPress 6.3 introduce un nuevo modo de desarrollo que los desarrolladores pueden activar mediante una nueva constante WP_DEVELOPMENT_MODE. Esta nueva constante se recomienda para cualquier sitio de desarrollo y su valor depende del tipo de desarrollo que se esté llevando a cabo.

WP_DEVELOPMENT_MODE puede tomar uno de los siguientes valores posibles:

  • core – Se utiliza para indicar que un sitio web se utiliza como entorno de desarrollo principal.
  • plugin – Se utiliza para el desarrollo de plugins.
  • theme – Se utiliza para el desarrollo de temas.
  • all – Se utiliza para indicar que un sitio web se utiliza para los tres tipos de desarrollo.
  • Una cadena vacía es el valor por defecto e indica que el sitio web no se utiliza como entorno de desarrollo.

WP_DEVELOPMENT_MODE sólo debe utilizarse en instalaciones de desarrollo. No es relevante en producción.

El modo de desarrollo afecta a algunos aspectos de bajo nivel del comportamiento de WordPress. En el momento de escribir esto, la única diferencia se refiere al almacenamiento en caché del archivo theme.json, que se omite cuando WP_DEVELOPMENT_MODE está configurado en 'theme'.

WP_DEVELOPMENT_MODE funciona de forma diferente a las constantes WP_DEBUG y WP_ENVIRONMENT_TYPE que se suelen utilizar en desarrollo, ya que WP_DEBUG y WP_ENVIRONMENT_TYPE no afectan al comportamiento de WordPress en modo alguno. Probablemente usarías WP_DEVELOPMENT_MODE cuando WP_ENVIRONMENT_TYPE es 'development' o 'local', ya que el desarrollo nunca debería ocurrir en sitios web en vivo.

Puedes activar el modo de desarrollo de esta forma:

define( 'WP_DEVELOPMENT_MODE', 'theme' );

WordPress 6.3 también introduce una nueva función wp_in_development_mode() que te permite comprobar si tu sitio web está en modo desarrollo. La nueva función también permite comprobar el tipo de desarrollo actualmente activado, gracias a un parámetro $mode cuyos valores posibles son 'core', 'plugin', y 'theme':

if ( wp_in_development_mode( 'theme' ) ) { ... }

También puedes comprobar el valor actual de WP_DEVELOPMENT_MODE en el panel de Información de la herramienta Salud del Sitio.

Cambios adicionales para desarrolladores

Resumen

Con WordPress 6.3, llegamos al final de la Fase 2: Personalización de la hoja de ruta de desarrollo de Gutenberg. Esta nueva versión nos trae mejoras significativas en la experiencia de edición, incluyendo nuevas funciones de edición dentro del editor del sitio, un sistema de patrones de bloques nuevo y más flexible, nuevos bloques, mejor rendimiento, mejoras en la accesibilidad y la internacionalización, y mucho más.

Con la próxima versión de WordPress, prevista para noviembre de 2023, entramos en la Fase 3: Colaboración, cuyo objetivo principal es aportar capacidades avanzadas de colaboración al editor.

Si quieres probar y/o contribuir a WordPress, lo que debes utilizar es nuestra suite local gratuita de desarrollo de WordPress, DevKinsta.

Ahora te toca a ti: ¿Has probado ya WordPress 6.3 en tu entorno de desarrollo? ¿Qué funciones de la versión 6.3 te gustan más? Comparte tu opinión en los comentarios.

Carlo Daniele Kinsta

Carlo es un diseñador y desarrollador de front-end freelance. Cuando escribe artículos y tutoriales, Carlo se ocupa principalmente de los estándares web, pero cuando juega con sitios web, su mejor compañero de trabajo es WordPress.