{"id":290,"date":"2026-08-22T11:25:09","date_gmt":"2026-08-22T09:25:09","guid":{"rendered":"https:\/\/helloblog.io\/es\/wordpress-7-1-mary-lou-estilos-responsive-editor-multimedia-apis\/"},"modified":"2026-08-22T11:25:09","modified_gmt":"2026-08-22T09:25:09","slug":"wordpress-7-1-mary-lou-estilos-responsive-editor-multimedia-apis","status":"publish","type":"post","link":"https:\/\/helloblog.io\/es\/wordpress-7-1-mary-lou-estilos-responsive-editor-multimedia-apis\/","title":{"rendered":"WordPress 7.1 \u00abMary Lou\u00bb: estilos responsive, editor multimedia y nuevas APIs"},"content":{"rendered":"\n

WordPress 7.1, con nombre en clave \u00abMary Lou\u00bb, refuerza el trabajo diario en el escritorio y en el editor de bloques. La versi\u00f3n a\u00f1ade estilos responsive sin CSS personalizado, centraliza la edici\u00f3n de im\u00e1genes, mejora las notas colaborativas y abre nuevas posibilidades para desarrolladores de temas, bloques e integraciones.<\/p>\n\n\n\n <\/i><\/span>\n \n Descargar WordPress 7.1<\/span>\n wordpress-7.1.zip<\/span><\/span>\n <\/span>\n <\/i><\/span>\n <\/a>\n\n\n

Estilos responsive desde el editor<\/h2>\n\n\n\n

Ahora puedes definir c\u00f3mo se ve un bloque en distintos tama\u00f1os de pantalla desde Estilos globales o desde los ajustes del propio bloque. Estos controles se suman a las opciones existentes para mostrar u ocultar bloques, por lo que puedes adaptar una composici\u00f3n al m\u00f3vil, la tableta y el escritorio sin escribir CSS personalizado.<\/p>\n\n\n\n

El editor permite adem\u00e1s previsualizar el resultado en varios tama\u00f1os de viewport mientras trabajas. As\u00ed puedes comprobar el comportamiento de la maquetaci\u00f3n antes de publicar.<\/p>\n\n\n\n

\"Controles
Los estilos de bloque pueden variar seg\u00fan el tama\u00f1o de pantalla. \u2014 Forr\u00e1s: WordPress.org<\/em><\/figcaption><\/figure>\n\n\n\n

La barra de administraci\u00f3n llega a todos los editores<\/h2>\n\n\n\n

La barra de administraci\u00f3n acompa\u00f1a ahora toda la experiencia de edici\u00f3n. Mantiene visibles las herramientas habituales y la referencia de d\u00f3nde te encuentras tanto al editar una entrada como al modificar el dise\u00f1o del sitio.<\/p>\n\n\n\n

Tambi\u00e9n recibe peque\u00f1os ajustes visuales para unificar su aspecto entre el escritorio y los distintos editores.<\/p>\n\n\n\n

\"Barra
La navegaci\u00f3n de administraci\u00f3n se mantiene en todos los editores. \u2014 Forr\u00e1s: WordPress.org<\/em><\/figcaption><\/figure>\n\n\n\n

Un flujo \u00fanico para recortar y editar im\u00e1genes<\/h2>\n\n\n\n

El bot\u00f3n Recortar sigue siendo el punto de entrada, pero abre un nuevo modal de edici\u00f3n multimedia en lugar de la herramienta integrada anterior. Desde ese espacio puedes recortar libremente o con una proporci\u00f3n definida, voltear la imagen en horizontal o vertical, rotarla con precisi\u00f3n o con ajuste incremental y editar sus metadatos.<\/p>\n\n\n\n

\"Modal
La edici\u00f3n de im\u00e1genes re\u00fane recorte, rotaci\u00f3n, volteo y metadatos. \u2014 Forr\u00e1s: WordPress.org<\/em><\/figcaption><\/figure>\n\n\n\n

Notas en l\u00ednea con menciones y formato<\/h2>\n\n\n\n

Las notas admiten texto enriquecido: negrita, cursiva, c\u00f3digo y enlaces. Escribe @<\/code> para mencionar a un colaborador y notificarle dentro de la conversaci\u00f3n.<\/p>\n\n\n\n

Tambi\u00e9n puedes anclar una nota a un fragmento concreto de texto, no solo al bloque completo. Un mismo bloque admite varias conversaciones y las notas largas se pueden contraer para no saturar el margen durante una revisi\u00f3n.<\/p>\n\n\n\n

\"Notas
Las notas pueden se\u00f1alar texto concreto y mantener varias conversaciones por bloque. \u2014 Forr\u00e1s: WordPress.org<\/em><\/figcaption><\/figure>\n\n\n\n

Procesamiento multimedia m\u00e1s r\u00e1pido y m\u00e1s formatos<\/h2>\n\n\n\n

La compresi\u00f3n, el redimensionado y la generaci\u00f3n de miniaturas se ejecutan ahora en el navegador. WordPress usa una compilaci\u00f3n WebAssembly de libvips, es decir, c\u00f3digo nativo adaptado para ejecutarse en el navegador, para reducir la carga del servidor y generar archivos m\u00e1s peque\u00f1os.<\/p>\n\n\n\n

Este cambio evita l\u00edmites de memoria de PHP y tiempos de espera al subir im\u00e1genes grandes. La biblioteca multimedia a\u00f1ade adem\u00e1s compatibilidad nativa con AVIF, HEIC y mapas de ganancia HDR, formatos que ya producen c\u00e1maras y m\u00f3viles actuales.<\/p>\n\n\n\n

\"Carga
WordPress admite AVIF, HEIC y mapas de ganancia HDR de forma nativa. \u2014 Forr\u00e1s: WordPress.org<\/em><\/figcaption><\/figure>\n\n\n\n

Bloques y controles visuales nuevos<\/h2>\n\n\n\n

Crea listas de reproducci\u00f3n<\/h3>\n\n\n\n

El nuevo bloque Lista de reproducci\u00f3n re\u00fane varias pistas de audio en un \u00fanico reproductor. Puede mostrar una forma de onda opcional para dar una referencia visual de cada pista mientras se reproduce.<\/p>\n\n\n\n

\"Bloque
El bloque puede incluir una forma de onda opcional. \u2014 Forr\u00e1s: WordPress.org<\/em><\/figcaption><\/figure>\n\n\n\n

Define breakpoints en los temas de bloques<\/h3>\n\n\n\n

Los temas de bloques pueden establecer sus propios breakpoints de m\u00f3vil y tableta en theme.json<\/code>. Estos valores sustituyen los predeterminados para los estilos responsive y para la visibilidad de bloques.<\/p>\n\n\n\n

\"Configuraci\u00f3n
Los temas pueden sustituir los breakpoints predeterminados. \u2014 Forr\u00e1s: WordPress.org<\/em><\/figcaption><\/figure>\n\n\n\n

Organiza contenido con pesta\u00f1as<\/h3>\n\n\n\n

El nuevo bloque Pesta\u00f1as distribuye contenido relacionado en paneles con pesta\u00f1as. Resulta \u00fatil cuando necesitas presentar varias secciones sin mostrarlas todas a la vez ni recargar la p\u00e1gina.<\/p>\n\n\n\n

\"Bloque
Las pesta\u00f1as agrupan informaci\u00f3n relacionada en menos espacio. \u2014 Forr\u00e1s: WordPress.org<\/em><\/figcaption><\/figure>\n\n\n\n

Personaliza iconos y estados de botones<\/h3>\n\n\n\n

Puedes a\u00f1adir colecciones de iconos propias a la biblioteca disponible en el editor y usarlas junto a los iconos integrados en el bloque Icono. Adem\u00e1s, el bloque Botones permite definir en los controles de estilo su aspecto en los estados hover<\/code>, focus<\/code> y active<\/code>, tanto para un bot\u00f3n individual como para todos los botones.<\/p>\n\n\n\n

\"Biblioteca
Las colecciones personalizadas se integran con la biblioteca de iconos del editor. \u2014 Forr\u00e1s: WordPress.org<\/em><\/figcaption><\/figure>\n\n\n\n
\"Controles
Los botones admiten estilos para interacci\u00f3n, foco y estado activo. \u2014 Forr\u00e1s: WordPress.org<\/em><\/figcaption><\/figure>\n\n\n\n

Un lienzo de edici\u00f3n m\u00e1s predecible<\/h2>\n\n\n\n

El editor de entradas pasa a usar un iframe para todos los temas, igual que el Editor del sitio. Un iframe es un documento HTML aislado dentro de la interfaz, por lo que el lienzo de contenido se ejecuta separado de la administraci\u00f3n de WordPress.<\/p>\n\n\n\n

Los estilos del escritorio ya no interfieren con el contenido que editas. Las unidades relativas al viewport y las media queries se dirigen al lienzo, lo que hace m\u00e1s fiable el comportamiento de los dise\u00f1os responsive durante la edici\u00f3n.<\/p>\n\n\n\n

APIs y herramientas para desarrolladores<\/h2>\n\n\n\n

La API de iconos SVG pasa a ser p\u00fablica. Puedes registrar colecciones e iconos propios y reutilizarlos en el editor con wp_register_icon_collection()<\/code>, wp_register_icon()<\/code> y wp_get_icon()<\/code>.<\/p>\n\n\n\n

La Abilities API ampl\u00eda la infraestructura introducida en WordPress 6.9 con un ciclo de ejecuci\u00f3n filtrable, validaci\u00f3n personalizada y descubrimiento compartido. Estas piezas facilitan la creaci\u00f3n de integraciones y automatizaciones sobre WordPress, incluidas herramientas basadas en IA.<\/p>\n\n\n\n

Un nuevo sistema de dise\u00f1o aporta una base para tematizar interfaces de administraci\u00f3n: color, redondez y estilos de cursor. Los tokens de dise\u00f1o sem\u00e1nticos, valores con significado visual en vez de un valor fijo, y el componente React ThemeProvider<\/code> ayudan a que una interfaz de administraci\u00f3n personalizada conserve coherencia con WordPress.<\/p>\n\n\n\n

Los autores de temas tambi\u00e9n disponen de estilos responsive y de pseudoestados mediante theme.json<\/code>: hover<\/code>, focus<\/code>, focus-visible<\/code> y active<\/code>. La versi\u00f3n a\u00f1ade filtros para configurar las pantallas DataViews y DataForm que sustentan P\u00e1ginas, Plantillas, Partes y Patrones dentro del Editor del sitio.<\/p>\n\n\n\n

Accesibilidad<\/h2>\n\n\n\n

Las funciones wp_get_tooltip()<\/code> y wp_get_toggletip()<\/code> llevan tooltips accesibles a m\u00e1s zonas de la administraci\u00f3n, incluidas las cajas meta de las entradas y la pantalla de acceso. Un tooltip muestra ayuda contextual; un toggletip permite activar esa ayuda de forma expl\u00edcita.<\/p>\n\n\n\n

Los lectores de pantalla reciben etiquetas m\u00e1s claras y una navegaci\u00f3n m\u00e1s predecible en las tablas de listado de entradas. Los bloques Pesta\u00f1as y Lista de reproducci\u00f3n, junto con mejoras en la navegaci\u00f3n e interacci\u00f3n del editor, forman parte del trabajo de accesibilidad de esta versi\u00f3n.<\/p>\n\n\n\n

M\u00e1s mejoras de rendimiento<\/h2>\n\n\n\n

La conversi\u00f3n opcional de GIF a v\u00eddeo suele generar archivos m\u00e1s peque\u00f1os. Los indicadores de progreso de carga y los reintentos autom\u00e1ticos tambi\u00e9n hacen que las subidas resistan mejor los cortes de conexi\u00f3n.<\/p>\n\n\n\n

La biblioteca multimedia usa desplazamiento infinito de forma predeterminada, aunque cada usuario puede volver a la paginaci\u00f3n desde sus opciones. Los valores predeterminados de carga especulativa se pueden fijar mediante variables de entorno o constantes, de modo que el hosting y los propietarios del sitio controlen c\u00f3mo WordPress precarga p\u00e1ginas sin crear un plugin.<\/p>\n\n\n\n

Qu\u00e9 revisar al actualizar a WordPress 7.1<\/h2>\n\n\n\n
    \n\n
  1. Prueba los estilos responsive de tus bloques en los tama\u00f1os de viewport que utilice tu dise\u00f1o y, si mantienes un tema de bloques, revisa los breakpoints definidos en theme.json<\/code>.<\/li>\n\n\n
  2. Comprueba el aspecto de botones en hover<\/code>, focus<\/code>, focus-visible<\/code> y active<\/code>, especialmente si el tema ya declara estilos para esos pseudoestados.<\/li>\n\n\n
  3. Valida los flujos de subida y edici\u00f3n de im\u00e1genes con archivos grandes, AVIF, HEIC y contenido HDR.<\/li>\n\n\n
  4. Si desarrollas interfaces de administraci\u00f3n, eval\u00faa los tokens sem\u00e1nticos y ThemeProvider<\/code>; si creas automatizaciones, revisa el ciclo de ejecuci\u00f3n y la validaci\u00f3n de la Abilities API.<\/li>\n\n\n
  5. Consulta las notas de la versi\u00f3n 7.1<\/a> y la gu\u00eda de campo de WordPress 7.1<\/a> antes de desplegar cambios en producci\u00f3n.<\/li>\n\n<\/ol>\n\n\n
    \n

    Referencias \/ Fuentes<\/h2>\n