¡Prepara los fuegos artificiales! Con la versión 7.0, WordPress entra en una nueva y audaz era.
Probablemente sea el mayor avance de la plataforma en los últimos años.
WordPress 7.0 perfecciona la interfaz de administración e introduce nuevos bloques y herramientas para desarrolladores, como el editor de entradas iframed y los bloques exclusivos para PHP.
Prepárate una taza de café y ponte cómodo, porque esta va a ser una lectura larga y apasionante.
Integración con la IA
Con la versión 7.0, WordPress ha dado un gran salto evolutivo. Olvídate de la plataforma de blogs de sus inicios. Hoy, WordPress es una plataforma colaborativa preparada de forma nativa para la inteligencia artificial.
Este ambicioso proyecto tenía como objetivo proporcionar una infraestructura fiable y segura que permitiera a los usuarios de WordPress y a los desarrolladores de plugins interactuar con los Grandes Modelos del Lenguaje (LLMs) de forma estandarizada.
El nuevo modelo arquitectónico prepara el camino para el «WordPress de agentes». Se trata de un cambio hacia una usabilidad basada en agentes, en la que WordPress es capaz, de forma nativa, de interactuar con agentes de IA externos a través de interfaces estandarizadas y amigables para las máquinas.
Hay mucho que decir, pero antes de entrar en detalles sobre la integración de la IA, aquí tienes algunas definiciones preliminares.
Arquitectura de la IA de WordPress: Conceptos básicos
Para entender la arquitectura de la IA de WordPress 7.0, es esencial identificar cuatro componentes críticos.
- Cliente de IA: Una infraestructura de IA independiente del proveedor que proporciona una forma estandarizada para que el código PHP y JS de WordPress interactúe con los modelos generativos de IA. Como el Cliente de IA es independiente del proveedor, el sistema puede funcionar independientemente de cualquier proveedor de IA concreto.
- Proveedor de IA: La entidad o empresa que desarrolla, posee y gestiona Grandes Modelos del Lenguaje (LLMs), como Anthropic, Google y OpenAI.
- Conector: El componente que permite la integración entre WordPress y los proveedores de IA. WordPress 7.0 incluye 3 conectores predeterminados -OpenAI, Anthropic y Google — accesibles desde Ajustes > Conectores.
- API de Capacidades: Una nueva interfaz funcional diseñada para permitir que los plugins, los temas y el núcleo de WordPress expongan sus capacidades en formatos legibles tanto por humanos como por máquinas, permitiendo a los agentes de IA interactuar con las funcionalidades de WordPress (por ejemplo, crear entradas o añadir un extracto) de forma estructurada. Esto es lo que hace que WordPress 7.0 esté preparado para agentes de forma nativa.
Conectores
Las versiones anteriores de WordPress requerían un plugin para cada proveedor de IA que quisieras usar en tu sitio. WordPress 7.0 introduce una interfaz unificada para gestionar los conectores de IA en Ajustes > Conectores.
Ya no tienes que pegar tus claves API en varios sitios. Introduce tus claves una sola vez en la pantalla Conectores, y todos los plugins compatibles podrán usar esa conexión a través del Cliente de IA.
Además, la nueva interfaz te permite cambiar de proveedor de IA desde un solo lugar sin riesgo de que algo falle.
En la interfaz Conectores, haz clic en el botón Instalar para tu proveedor de IA e introduce tu clave API. Guarda la configuración y estarás listo para interactuar con el proveedor de IA en tu sitio de WordPress.
Si no sabes por dónde empezar, instala y activa el plugin AI Experiments. Este plugin te permite añadir imágenes destacadas, texto alternativo, extractos y mucho más, todo generado por IA.
La nueva integración de IA no sólo introduce una nueva interfaz de usuario, sino que también permite a los desarrolladores registrar nuevos proveedores de IA a través de la API de Conectores.
Ahora los desarrolladores pueden registrar y gestionar conectores utilizando las nuevas clases y métodos básicos. Una vez registrado, cada conector aparece como una tarjeta en la pantalla Conectores.
La nueva API también proporciona tres funciones públicas.
wp_is_connector_registered(): Comprueba si un conector está registrado.wp_get_connector(): Recupera los datos de un único conector.wp_get_connectors(): Recupera todos los conectores registrados.
Además, el nuevo hook wp_connectors_init te permite sobrescribir los metadatos de los conectores registrados.
Construir con el Cliente de IA
La pantalla Conectores ofrece la interfaz de IA. El Cliente de IA es el motor que lo hace funcionar: una capa de abstracción unificada que estandariza la forma en que WordPress interactúa con la IA. Ya sea OpenAI, Anthropic o Google Gemini, tu código sigue siendo el mismo. WordPress se encarga de la traducción, lo que te permite centrarte en la lógica de tu aplicación.
La nueva función wp_ai_client_prompt() es el núcleo de esta implementación.
Aquí tienes un ejemplo sencillo en PHP:
$ai_response = wp_ai_client_prompt( "Create a professional post about WordPress" )
->generate_text();
if ( is_wp_error( $ai_response ) ) {
wp_die( $ai_response->get_error_message() );
}
echo wp_kses_post( $ai_response );El siguiente ejemplo muestra cómo definir el esquema de respuesta para que los datos estén listos para su uso.
$taxonomy_schema = array(
'type' => 'object',
'properties' => array(
'category' => array( 'type' => 'string' ),
'tags' => array(
'type' => 'array',
'items' => array( 'type' => 'string' )
),
),
'required' => array( 'category', 'tags' ),
);
$post_body = "Working from a small tavern in Crete was a game-changer. I realized that Greece is becoming the ultimate hub for remote workers in 2026.";
$json = wp_ai_client_prompt( "Based on this text, suggest the most appropriate category and 3-5 relevant tags: $post_body" )
->using_temperature( 0.1 )
->as_json_response( $taxonomy_schema )
->generate_text();
if ( is_wp_error( $json ) ) {
return $json;
}
$suggested_taxonomies = json_decode( $json, true );En este código
- Con
as_json_response(), WordPress garantiza que el resultado sea JSON puro que se ajuste al esquema especificado ($taxonomy_schema). using_temperature()controla la respuesta de la IA, haciéndola más o menos determinista (o aleatoria). Una temperatura baja (0,1) produce una mayor precisión, mientras que una temperatura alta fomenta una respuesta más creativa.- El array
$suggested_taxonomiescontiene las categorías y etiquetas generadas por la IA. Puedes asignarlas automáticamente a tu entrada.
Una salida estructurada garantiza resultados predecibles y proporciona un formato ideal para su uso con la API de Capacidades. Por ejemplo, el código anterior podría utilizarse para crear automáticamente una entrada con la categoría y las etiquetas especificadas.
La API no sólo admite texto. Gracias al método generate_image(), el Cliente de IA también puede generar imágenes.
Puedes solicitar varios resultados con una sola llamada. Por ejemplo, puedes solicitar 3 opciones de texto o imagen pasando un valor numérico a los métodos generate_text() o generate_image(): al llamar a generate_image( 3 ) se obtienen 3 variaciones de la misma imagen.
La API también proporciona un conjunto de métodos que devuelven información adicional. Estos métodos devuelven un objeto GenerativeAiResult que contiene metadatos enriquecidos, como el uso del token, el proveedor y el modelo que respondió a la solicitud:
generate_text_result()generate_image_result()convert_text_to_speech_result()generate_speech_result()generate_video_result()
Como puedes ver, estos métodos ofrecen una serie de funciones adicionales, incluida la compatibilidad con la conversión de texto a voz, voz y vídeo.
Otros métodos de la API son:
using_max_tokens(): Limita la longitud de la respuesta (por ejemplo->using_max_tokens( 500 ))using_model_preference(): Establece un modelo específico (por ejemplo->using_model_preference( 'gemini-2.5-flash' ))
Si quieres un análisis más detallado y ver más ejemplos de código, échale un vistazo a la página del proyecto de GitHub de WP AI Client y a los cambios que se han hecho para preparar la versión 7.0 de WordPress.
Nuevos bloques y herramientas de diseño
WordPress 7.0 introduce nuevos bloques y herramientas de diseño que mejorarán considerablemente la experiencia de edición. A continuación te contamos las novedades y cómo cambiarán tus procesos de trabajo creativos.
Nuevo bloque Migas de pan
WordPress 7.0 introduce un nuevo bloquede Migas de Pan (Breadcrumbs) que refleja la jerarquía mostrada de la página.
En esencia, el nuevo bloque incluye un componente dinámico que consulta la estructura de datos de WordPress para identificar automáticamente la ubicación actual de los visitantes del sitio basándose en la jerarquía de la página (padre/hijo) o en los términos de la taxonomía de la entrada.
En la imagen de abajo, el bloque Migas de Pan muestra la jerarquía de categorías de una entrada de blog normal.
El bloque Migas de Pan también es compatible con el bloque Bucle de Consulta. Cuando añades un bloque Migas de Pan a un bloque Bucle de Consulta, el bloque muestra las rutas de las entradas individuales extraídas de la consulta.
El bloque Migas de Pan tiene algunas opciones de configuración que te permiten:
- Mostrar/ocultar el enlace a la página de inicio como punto de partida de la navegación.
- Mostrar/ocultar la miga de pan actual.
- Cambiar el separador de las migas de pan.
- Mostrar las migas de pan en la página de inicio.
- Elegir jerarquía de entradas (predeterminada) o jerarquía de términos de taxonomía.
El bloque Migas de Pan es compatible con las herramientas de diseño de Gutenberg e introduce dos filtros que permiten a los desarrolladores controlar las rutas de navegación mediante programación.
El nuevo filtro block_core_breadcrumbs_post_type_settings permite a los desarrolladores especificar qué taxonomía y qué término deben utilizarse en las migas de pan cuando una entrada tiene varias taxonomías o términos.
En el siguiente ejemplo, el filtro se utiliza para mostrar etiquetas en lugar de categorías:
add_filter( 'block_core_breadcrumbs_post_type_settings', function( $settings, $post_type ) {
if ( 'post' === $post_type ) {
$settings['taxonomy'] = 'post_tag';
}
return $settings;
}, 10, 2 );El filtro block_core_breadcrumbs_items permite a los desarrolladores modificar, añadir o eliminar elementos del rastro de migas de pan final antes de que se muestre. Estos son algunos ejemplos de uso:
- Sustituye el icono de Inicio por una imagen (un SVG, el logotipo de tu empresa, etc.) para ahorrar espacio o hacer que la salida del bloque sea más coherente con la marca de tu sitio.
- Acortar el título de una entrada en las migas de pan si es demasiado largo.
- Inyecta categorías o términos personalizados, por ejemplo, forzando un paso en el rastro de migas de pan.
El siguiente código utiliza el nuevo filtro para acortar las etiquetas de la ruta de navegación cuando superan los 20 caracteres:
add_filter( 'block_core_breadcrumbs_items', function( $items ) {
foreach ( $items as $key => $item ) {
if ( mb_strlen( $item['label'] ) > 20 ) {
// Truncate the string to 17 characters and append '...'
$items[$key]['label'] = mb_strimwidth( $item['label'], 0, 17, '...' );
}
}
return $items;
}, 10, 1 );Si quieres conocer más a fondo los filtros del bloque Migas de Pan y ver otros ejemplos de código, echa un vistazo a la nota para desarrolladores.
Nuevo bloque Icono
Un nuevo bloque Icono te permite añadir iconos SVG a tu contenido. El nuevo bloque pretende ofrecer una solución estándar nativa para gestionar el marcado y garantizar la coherencia de la accesibilidad, sin necesidad de instalar plugins de terceros sólo para añadir unos pocos iconos.
Actualmente, el nuevo bloque Icono viene con un conjunto predeterminado del que puedes seleccionar tus iconos. Sin embargo, hay planes para añadir la posibilidad de que los usuarios puedan añadir conjuntos de iconos de terceros en el futuro.
El bloque se basa en una nueva API de registro de iconos SVG del lado del servidor. Esto garantiza que las actualizaciones del registro de iconos se propaguen a todos los usuarios sin errores. La introducción del nuevo bloque de iconos va acompañada de un nuevo endpoint de la API /wp/v2/icons.
Superposiciones de navegación personalizables
Antes de WordPress 7.0, los menús de navegación móvil eran rígidos y no podías cambiar su diseño, estructura ni contenido predeterminado. WordPress 7.0 introduce las superposiciones de navegación (Navigation Overlays) personalizables, dándote control total. Puedes crear el menú usando bloques y patrones, e incluir el nuevo bloque Cerrar superposición de navegación para añadir un botón de cierre en cualquier parte del diseño.
Técnicamente, las superposiciones de navegación son partes de plantillas, y una vez que hayas creado la tuya, la encontrarás en la sección Patrones de la barra lateral del Editor de Sitios. Cada superposición se asigna a un bloque de Navegación, pero puedes asignar varios bloques de Navegación a la misma superposición.
Básicamente, son un lienzo de bloques que puede contener cualquier tipo de bloque. Puedes añadir un bloque de Navegación, pero depende totalmente de ti qué bloques añadas. Podrían ser iconos sociales, un campo de búsqueda, el logotipo de tu sitio y mucho más.
Las superposiciones de navegación sólo pueden utilizarse en el bloque Navegación. Para evitar su uso accidental en otras partes de una plantilla, están excluidas del insertador de bloques.
Puedes crear una superposición de navegación personalizada desde la sección Superposiciones de la barra lateral del bloque Navegación en el Editor de Sitios.
Cuando seleccionas el bloque Navegación, la barra lateral de la plantilla muestra los ajustes de la superposición de navegación divididos en dos secciones. La sección Contenido muestra los tipos de bloques incluidos en la superposición, mientras que la sección Diseño ofrece una variedad de diseños predefinidos.
La barra lateral del bloque está dividida en dos pestañas, una para los ajustes y otra para los estilos de la parte de la plantilla Superposición de Navegación.
La pestaña Estilos de la pestaña Bloques de la superposición de navegación es donde puedes personalizar el aspecto de tu superposición configurando los colores, la imagen de fondo, la tipografía, el tamaño, el borde y la sombra.
Los desarrolladores de temas pueden añadir fácilmente superposiciones de navegación predefinidas a sus temas. Pueden proporcionar tanto una parte de plantilla de superposición predeterminada (la propia superposición) como un conjunto de patrones de superposición (diseños preconstruidos que aparecen al editar una superposición de navegación).
Para obtener una descripción más detallada y ejemplos de código, consulta la nota de desarrollo oficial y este pull request.
Mejoras en el bloque Párrafo
Las nuevas funciones del bloque Párrafo ofrecen una mayor flexibilidad a la hora de dar estilo al texto.
En primer lugar, una nueva opción en la configuración de tipografía te permite ajustar la sangría de la primera línea.
Puedes controlar la sangría del texto para párrafos individuales, o puedes aplicarla a todos los párrafos mediante la configuración de Estilo Global en Editor > Estilos > Bloques > Párrafo.
Los desarrolladores de temas pueden activar/desactivar y controlar granularmente la sangría de línea dentro del archivo theme.json utilizando la nueva propiedad textIndent.
El bloque Párrafo ahora también admite alineación amplia y completa. La siguiente imagen muestra el nuevo control Alinear.
Otra novedad útil al bloque Párrafo es la compatibilidad con columnas de texto. Esta nueva opción está disponible en los ajustes de Tipografía de la barra lateral del bloque.
Vídeos de fondo incrustados para el bloque Portada
Con WordPress 7.0, puedes utilizar vídeos incrustados, como los de YouTube o Vimeo, como vídeos de fondo para el bloque Portada. Anteriormente, sólo podías utilizar vídeos subidos.
Esta funcionalidad es especialmente útil para quienes desean ahorrar ancho de banda alojando vídeos en plataformas externas.
Para añadir un vídeo alojado, haz clic en Añadir medios en la barra de herramientas del bloque Portada y, a continuación, selecciona Incrustar vídeo desde URL.
A continuación, se te pedirá que introduzcas la URL del vídeo.
Tu vídeo incrustado aparecerá como vídeo de fondo para tu bloque de Portada, tanto en el editor como en el frontend.
Bloque de cuadrícula responsivo
El bloque Cuadrícula se ha actualizado para que sea responsivo de forma nativa. En versiones anteriores de WordPress, los usuarios solo podían elegir entre los modos Automático y Manual. En el modo Automático, se podía establecer el ancho mínimo de columna para que el bloque fuera responsivo. En el modo Manual, se podía establecer el número de columnas, que se mantenía fijo.
A partir de WordPress 7.0, el bloque cuadrícula es responsivo de forma nativa. El número de columnas ahora se comporta como el máximo, y puedes ajustar el tamaño mínimo de las columnas y el número máximo de columnas sin que el bloque deje de ser responsivo.
Soporte CSS personalizado para bloques individuales
Ahora puedes añadir estilos personalizados a instancias de bloques concretos desde la configuración avanzada del bloque.
Cuando añades estilos personalizados a un bloque, WordPress añade automáticamente la clase has-custom-css. Si inspeccionas el bloque en el editor de código, verás un bloque de código similar al siguiente:
<!-- wp:image {
"id":848,
"sizeSlug":"large",
"linkDestination":"none",
"style":{ "css":"border: 4px solid blue;" }
} -->
<figure class="wp-block-image size-large has-custom-css">
<img src="http://example.com/wp-content/uploads/2026/03/example-768x1024.jpg" alt=" class="wp-image-848"/>
</figure>
<!-- /wp:image -->El estilo personalizado se carga después de los estilos predeterminados de WordPress y de los estilos globales, lo que garantiza que los cambios que realices no afecten al aspecto de otras instancias del mismo bloque.
Ocultar bloques según el área de visualización
En WordPress 7.0, puedes ocultar o mostrar los bloques individualmente dependiendo de si el usuario está en un dispositivo móvil, tableta o escritorio.
Esta primera iteración añade la nueva propiedad viewport a blockVisibility.
{
"metadata": {
"blockVisibility": {
"viewport": {
"mobile": false,
"tablet": true,
"desktop": true
}
}
}
}Puedes activar el control de visibilidad añadiendo el objeto JSON anterior al bloque directamente en el editor de código o mediante la paleta de comandos.
Una vez que hayas activado el control de visibilidad de bloques, puedes acceder a las opciones de visibilidad de bloques abriendo el modal desde la barra de herramientas de bloques, la barra lateral del inspector de bloques o la paleta de comandos.
Las próximas versiones deberían incluir puntos de ruptura configurables y la integración con theme.json para controlar la visibilidad de los bloques.
Opciones de estilo para el bloque Matemáticas (Math block)
Antes de WordPress 7.0, los usuarios no podían personalizar la apariencia del bloque de Matemáticas (Math block). La nueva versión de WordPress añade opciones de estilo de Color, Tipografía, Dimensiones y Bordes para el bloque Matemáticas.
La siguiente imagen muestra un ejemplo de estilo del bloque Matemáticas:
Actualizaciones del bloque HTML
El bloque HTML se ha rediseñado por completo. Ahora, cuando insertas un bloque HTML en tu contenido, aparece una ventana modal con tres pestañas separadas para introducir tu HTML, CSS y JavaScript.
Si necesitas más espacio, un botón en la esquina superior derecha de la ventana modal te permite activar o desactivar el modo de pantalla completa.
Mejoras en el bloque Imagen
El bloque Imagen se ha actualizado con varias mejoras que ofrecen mayores opciones de personalización.
El bloque Imagen ahora soporta el control de la relación de aspecto para la alineación ancha y completa (PR #74519). Esta nueva funcionalidad está disponible en la pestaña Estilos de la barra lateral de configuración del bloque.
Otra novedad útil es el control del punto focal. Con esta nueva funcionalidad, puedes ajustar la parte visible de una imagen al recortarla. (PR #73115)
El componente de recorte de imágenes en el editor se ha trasladado a un paquete específico, y ahora se puede utilizar en toda la aplicación, y no sólo en el editor de bloques (PR #73277)
Experiencia de administración mejorada
Con el lanzamiento de WordPress 7.0, se ha rediseñado y modernizado el área de administración de WordPress. Se trata de una mejora sustancial de la experiencia de administración, cuyo objetivo es hacer que la navegación del sitio sea más fluida, coherente y visualmente atractiva.
Mejoras visuales
Cuando abras el panel de administración de WordPress 7.0, notarás enseguida lo diferentes que se ven los elementos de la interfaz. Estos cambios han sido objeto de un amplio debate y se consideraron necesarios para modernizar el aspecto del panel de control y reducir las inconsistencias entre el panel antiguo y el editor de bloques.
El objetivo es modernizar el aspecto del panel de administración, reducir las inconsistencias entre las pantallas antiguas y las nuevas pantallas del editor de bloques y del editor del sitio, y alinearlo mejor con el sistema de diseño de WordPress al completo.
El rediseño visual se centró en una serie de componentes básicos que aparecen en toda el área de administración de WordPress. Como señaló Fabian Kaegy, se trata de cambios puramente visuales, sin actualizaciones arquitectónicas o funcionales.
Puedes explorar los nuevos menús, botones y transiciones de WordPress 7.0 en el Sistema de diseño de WordPress en Figma.
Revisiones visuales
Ahora las revisiones se presentan como vistas previas en una interfaz similar a la de un editor que resalta las diferencias visuales. Ya no necesitas leer todo el artículo para ver lo que ha cambiado, porque las diferencias entre versiones del mismo contenido se resaltan ahora a nivel de bloque. El sistema también identifica los cambios de estilo, facilitando la detección de ajustes en la paleta de colores, la tipografía, las dimensiones, etc.
Diferentes colores identifican distintos tipos de cambios:
- El amarillo resalta un bloque o texto que ha sido modificado.
- El rojo destaca un bloque o texto que ha sido eliminado.
- El verde identifica un bloque o texto que se ha añadido.
Con las revisiones, puedes ver toda la potencia de Yjs, porque al restaurar una versión anterior, el sistema sólo restaura los cambios realizados en el documento por bloques, no todo el contenido.
Se espera que el sistema mejore con futuras actualizaciones, y podemos esperar nuevas y potentes funcionalidades. Para obtener una visión general más detallada de lo que se ha hecho y de lo que podemos esperar en el futuro, échale un vistazo a esta entrada de Mathias Ventura de 2023, así como a los tickets #60096 y #61161.
Ver Transiciones
Con WordPress 7.0, el paquete boot —el componente encargado de inicializar el editor y gestionar las transiciones entre las distintas pantallas de administración— recibe una importante actualización. Gracias a esta nueva infraestructura, navegar entre las pantallas del panel de control ya no requiere recargas bruscas de la página, sino que ofrece elegantes transiciones que ofrecen una funcionalidad que mejora notablemente la experiencia de administración.
En términos técnicos, al implementar la API de transiciones de vista en el paquete boot, WordPress ahora puede gestionar animaciones de zoom y deslizamiento durante los cambios de estado. Esto evita tener que volver a cargar el lienzo cada vez que cambia la ruta, lo que garantiza una transición fluida en la navegación de nivel raíz.
Cambios para desarrolladores
WordPress 7.0 es algo más que una actualización visual: introduce cambios estructurales que simplifican drásticamente el flujo de trabajo de desarrollo. Entre los aspectos más destacados se incluyen la reducción del CSS personalizado gracias a un theme.json más potente, una gestión del diseño más predecible mediante el uso ampliado de iframes, y nuevas herramientas declarativas para las interfaces de administración, con una API mejorada de DataViews, DataForm y Field, y una nueva API de capacidades del lado del cliente que proporciona una forma estandarizada de exponer e interactuar con las capacidades de la aplicación mediante JavaScript.
Si eres desarrollador, estos son los cambios técnicos más significativos de WordPress 7.0 que debes conocer.
Soporte de pseudoclases en theme.json
Buenas noticias para los desarrolladores de temas. A partir de WordPress 7.0, puedes usar selectores de pseudoclases (:hover, :focus, :focus-visibley :active) directamente en tus bloques y variaciones de estilo en tu archivo theme.json.
Antes de WordPress 7.0, las pseudoclases sólo eran compatibles con elementos HTML como botones y enlaces, y su uso a nivel de bloque sólo era posible en CSS personalizado.
Para usar pseudoclases a nivel de bloque, tienes que añadir tu configuración de estilo en la sección styles de tu archivo theme.json. Aquí tienes un ejemplo sencillo del uso de pseudoclases para un bloque de botón (véase también PR #71418):
{
"version": 3,
"styles": {
"blocks": {
"core/button": {
"border": {
"width": "2px",
"style": "solid",
"color": "#000000"
},
":hover": {
"border": {
"color": "#ff4400"
},
"shadow": "0 8px 15px rgba(255, 68, 0, 0.3)",
"typography": {
"textDecoration": "underline"
}
},
":active": {
"filter": "brightness(0.8)",
"shadow": "none"
}
}
}
}
}La siguiente imagen muestra los distintos estados del bloque Botón.
El siguiente ejemplo muestra cómo utilizar pseudoclases para una variación del bloque en theme.json:
{
"version": 3,
"styles": {
"blocks": {
"core/button": {
"variations": {
"neon": {
"border": {
"width": "2px",
"style": "solid",
"color": "#00ff00"
},
"color": {
"text": "#00ff00",
"background": "transparent"
},
":hover": {
"border": {
"color": "#ffffff"
},
"shadow": "0 0 20px #00ff00, 0 0 40px #00ff00",
"color": {
"text": "#ffffff"
},
"typography": {
"textDecoration": "none"
}
},
":active": {
"filter": "brightness(1.5) blur(1px)",
"shadow": "0 0 10px #ffffff"
}
}
}
}
}
}
}Editor de entradas en iframe
A partir de WordPress 7.0, el editor de entradas se carga en un iframe si el contenido solo contiene bloques que utilizan la API de bloques versión 3 o superior. Antes de la versión 7.0, el editor de entradas solo se cargaba en un iframe si todos los bloques registrados (incluso los que no estaban incluidos en el contenido) utilizaban la API de bloques v3+.
La principal ventaja de cargar el editor en un iframe es que aísla los estilos de interfaz de usuario del editor de los estilos de contenido del tema. Sin un iframe, las hojas de estilo del editor y del tema coexisten en el mismo documento, lo que a menudo provoca problemas de compatibilidad y dificulta a los desarrolladores la coherencia visual entre el backend y el frontend.
Las principales ventajas del editor de entradas iframed son:
Aislamiento de estilos
- Sin interferencias de CSS: El iframe evita que los estilos del panel de administración de WordPress «se filtren» en el lienzo del editor y viceversa, lo que garantiza que el aspecto de los bloques no se vea afectado por la interfaz de usuario circundante.
- Sin necesidad de restablecer CSS: Los desarrolladores ya no necesitan restablecer manualmente las reglas CSS del administrador de WordPress para que el contenido del editor coincida con la apariencia del frontend.
- Sin prefijos: Los desarrolladores de temas ya no necesitan añadir prefijos o selectores de alta especificidad a sus reglas CSS para evitar romper la interfaz de administración.
Consistencia del diseño
- Unidades relativas a la ventana gráfica: Sin iframes, unidades como
vw(ancho de la ventana gráfica) yvh(altura de la ventana gráfica) se refieren a toda la página de administración (incluida la barra lateral); deben usarse solo en el área de trabajo del editor. - Consultas de medios nativas: Las consultas de medios funcionan de forma nativa dentro del iframe, reflejando el tamaño del área de trabajo del editor en lugar del de toda la ventana del navegador.
Experiencia del desarrollador
- Flujo de trabajo simplificado: Los creadores de temas y plugins pueden «trasladar» los estilos del frontend al editor con cambios mínimos o sin cambios.
- Selecciones persistentes: Los iframes mantienen visible la selección en el editor (por ejemplo, el texto seleccionado) incluso cuando el usuario interactúa con elementos de la interfaz de usuario, como los controles de la barra lateral.
- Previsibilidad: El editor en iframe también resuelve el problema de la inconsistencia visual, evitando que el editor cambie de modo de forma repentina en función de los plugins instalados.
Compatibilidad con versiones anteriores
Si una entrada contiene un bloque que utiliza versiones anteriores de la API, el iframe se elimina automáticamente para garantizar la compatibilidad con versiones anteriores. Para aprovechar estas mejoras, se recomienda a los desarrolladores de bloques que actualicen sus bloques a la versión 3 de la API de bloques .
Registro de bloques sólo en PHP
WordPress 7.0 introduce la posibilidad de registrar bloques exclusivamente a través de PHP con controles de inspección generados automáticamente. Esta novedad agiliza los flujos de trabajo de los desarrolladores y anima a los sitios que usan temas híbridos o funciones y shortcodes de PHP heredados a adoptar y desarrollar en el editor de bloques. Aquí tienes un ejemplo de un bloque registrado a través de PHP:
/**
* Render callback (frontend and editor)
*/
function my_php_only_block_render( $attributes ) {
return '<div>
<h3>🚀 PHP-only Block</h3>
<p>This block was created with only PHP!</p>
</div>';
}
/**
* Register the block on the 'init' hook.
*/
add_action( 'init', function() {
register_block_type( 'my-plugin/php-only-test-block', array(
'title' => 'My PHP-only Block',
'icon' => 'welcome-learn-more',
'category' => 'text',
'render_callback' => 'my_php_only_block_render',
'supports' => array(
// Automatically registers the block in the Editor JS (previously auto_ssr)
'auto_register' => true,
),
) );
});En el momento de escribir este artículo, los bloques exclusivos de PHP no son dinámicos y solo pueden utilizar controles de configuración específicos. Sin embargo, aún quedan muchos casos de uso por explorar. Por eso, hemos publicado un tutorial dedicado exclusivamente a los bloques exclusivos de PHP. Si eres desarrollador de PHP, vale la pena que le eches un vistazo.
Mejoras en las APIs DataViews, DataForm y Field
WordPress 7.0 introduce varias mejoras en DataViews, lo que supone un paso decisivo hacia una interfaz administrativa más moderna y modular. Esta actualización transforma la gestión de datos en una experiencia altamente personalizable con un enfoque declarativo. Ahora los desarrolladores pueden crear complejas interfaces personalizadas simplemente definiendo sus reglas en formato JSON, permitiendo que el núcleo genere la interfaz.
Entre las novedades se incluyen:
- Mejoras en la visualización de datos (DataViews): El nuevo diseño de Actividad utiliza un estilo actividad-alimentación-línea de tiempo. También hay un nuevo modo de vista compacta para las listas.
- Mejoras en los formularios (DataForm): Ahora está disponible el nuevo diseño Detalles, junto con iconos de edición para el diseño Panel. Estos iconos se pueden configurar para que aparezcan sólo cuando sea necesario.
- Mejoras en el control de datos (Field API): Está disponible la validación automática de campos, junto con nuevas opciones de personalización del formato para los tipos de campo numérico y de fecha.
A continuación se muestra un ejemplo de cómo definir una vista que agrupe y muestre datos en modo compacto:
const myCompactView = {
type: 'list',
layout: {
density: 'compact'
},
groupBy: {
field: 'status',
direction: 'desc',
showLabel: true
}
};Para obtener una descripción detallada de las mejoras introducidas en DataViews, DataForm y la API de campos, consulta la nota para desarrolladores.
API de capacidades del lado del cliente
WordPress 6.9 introdujo la API de capacidades, una nueva interfaz funcional que ofrece un registro estandarizado para que los plugins, los temas y el núcleo de WordPress interactúen con el sistema, exponiendo sus capacidades en formatos legibles tanto para personas como para máquinas.
Ahora, WordPress 7.0 introduce una API de JavaScript que te permite implementar funcionalidades del lado del cliente, como navegar o añadir bloques a tu contenido directamente desde JavaScript, de forma segura y estandarizada.
La nueva API de capacidades del lado del cliente se divide en dos paquetes.
@wordpress/core-abilities: Si tu plugin necesita acceder a las capacidades registradas del servidor, tendrás que conectarte al paquete@wordpress/core-abilities. Este paquete recupera todas las capacidades y categorías registradas a través de la API REST y las almacena en el repositorio@wordpress/abilities.@wordpress/abilities: Este paquete proporciona el almacén de capacidades sin cargar las capacidades registradas en el servidor. Si tu plugin solo necesita registrar capacidades del lado del cliente y no requiere acceso a las capacidades registradas en el servidor, debes poner en cola@wordpress/abilities.
Echa un vistazo a la nota para desarrolladores si quieres ver un análisis detallado de la nueva API de capacidades del lado del cliente y varios ejemplos de código.
Cambios en la API de interactividad
La API de interactividad es una API nativa de WordPress que permite a los desarrolladores añadir interactividad a sus sitios web de forma estandarizada. WordPress 7.0 mejora la API de interactividad con una nueva función watch() que te permite observar los cambios de estado mediante programación. Antes, solo era posible usar la directiva data-wp-watch para reaccionar ante los cambios de estado.
Otros cambios introducidos en WordPress 7.0 tienen que ver con el core/router.
Para obtener una descripción más detallada de los cambios en la API de interactividad, consulta la nota para desarrolladores.
Otros cambios para desarrolladores
Aquí tienes otros cambios para desarrolladores que merece la pena mencionar:
- A partir de WordPress 7.0, los atributos de bloque soportados por Block Bindings también admiten Pattern Overrides. Esto significa que puedes usar Pattern Overrides con cualquier bloque, incluidos los bloques personalizados.
- Los patrones y las partes de plantilla no sincronizados ahora están configurados como
contentOnlypor defecto. Los usuarios verán primero los controles para editar texto y archivos multimedia, sin riesgo de romper accidentalmente la estructura del bloque. Si has creado bloques personalizados y quieres que sigan siendo editables, asegúrate de establecer «role": "contentOnly"en el archivoblock.json. Los desarrolladores pueden desactivar esta funcionalidad mediante PHP utilizando el filtroblock_editor_settings_all, o mediante JavaScript estableciendodisableContentOnlyForUnsyncedPatternsentrue. - WordPress 7.0 deja de ser compatible con PHP 7.2 y 7.3. La versión mínima recomendada de PHP seguirá siendo la 8.3.
- Se ha mejorado significativamente el sistema de soporte de bloques Dimensiones. Puedes utilizar
widthy laheightcomo soportes de bloque estándar endimensionsenblock.json, y los temas pueden definir preajustes de tamaño de dimensiones en sutheme.json.
De cara al futuro: la versión 7.0 marca el inicio de una nueva era para WordPress
WordPress 7.0 no es solo una actualización; supone un punto de inflexión tanto para los usuarios como para los desarrolladores. Gracias a la integración de la IA y a la API de Capacidades, la IA ahora puede navegar por el panel de control, crear contenido nuevo y editar entradas existentes. Realmente creemos que nos encontramos en un momento histórico, y estamos deseando explorar estas herramientas basadas en IA y empezar a crear algo totalmente nuevo por nuestra cuenta.
Pero WordPress 7.0 es mucho más que IA. La experiencia de edición se ha rediseñado por completo y cuenta con una nueva arquitectura de revisiones a nivel de bloques, nuevos bloques del núcleo y actualizaciones importantes en el sistema de diseño.
Más allá de la integración de la IA, los desarrolladores se beneficiarán de mejoras que agilizan el flujo de trabajo de desarrollo y desbloquean posibilidades nunca vistas. Desde el editor iframed y la compatibilidad con pseudoclases en theme.json hasta la API de capacidades del lado del cliente y los bloques sólo para PHP, WordPress 7.0 proporciona multitud de herramientas para crear sitios y aplicaciones cada vez más potentes.
Para aprovechar al máximo el potencial de WordPress 7.0, necesitas un servicio de alojamiento de última generación optimizado para el rendimiento y la seguridad. En Kinsta, encontrarás todo lo que necesitas para llevar WordPress a su máximo potencial. Echa un vistazo a nuestros planes y encuentra el que mejor se adapte a las necesidades de tu sitio.
