Adem\u00e1s del editor, WordPress 5.4 introduce interesantes mejoras en la Herramienta de Salud del Sitio<\/a> y en la API REST<\/a>, mientras que un par de caracter\u00edsticas esperadas con WordPress 5.4 han sido retrasadas y deber\u00edan ser incluidas en el N\u00facleo con la pr\u00f3xima versi\u00f3n de WordPress 5.5<\/a> (ver Native Lazy Loading en im\u00e1genes<\/a> y bloque de navegaci\u00f3n<\/a>).<\/p>\n Puede que quiera guardar las siguientes fechas y enlaces del ciclo de desarrollo de WordPress 5.4<\/a>:<\/p>\n Entonces, \u00bfqu\u00e9 hay de nuevo en WordPress con WordPress 5.4?<\/p>\n Un n\u00famero considerable de las versiones del plugin de Gutenberg<\/a> se han fusionado en el n\u00facleo, de 6,6 a 7,5. As\u00ed que, si no est\u00e1 usando el plugin de Gutenberg, encontrar\u00e1 toneladas de nuevas caracter\u00edsticas, mejoras y correcciones de errores en el editor de bloques al actualizar a WordPress 5.4.<\/p>\n Pero hay m\u00e1s que bloques y caracter\u00edsticas en el editor con mejoras en el rendimiento general que se reportan:<\/p>\n El equipo de editores de bloques ha logrado una reducci\u00f3n del 14% en el tiempo de carga y del 51% en el tiempo de mecanograf\u00eda, para un post particularmente grande (~ 36.000 palabras, ~1.000 bloques) desde WordPress 5.3.<\/p><\/blockquote>\n Eso es un mont\u00f3n de cosas incre\u00edbles, as\u00ed que vamos a sumergirnos.<\/p>\n Podemos estar de acuerdo en el hecho de que el editor de bloques todav\u00eda est\u00e1 en desarrollo, pero WordPress 5.4 trae toneladas de cambios que mejoran la usabilidad del editor tanto en el escritorio como en el m\u00f3vil.<\/p>\n Algunos de estos cambios se refieren estrictamente a la interfaz, entre ellos el modo de pantalla completa activado por defecto, la mejora de la selecci\u00f3n de bloques, la facilidad para cambiar entre el modo de edici\u00f3n y el modo de selecci\u00f3n, la barra de herramientas m\u00f3vil fija y las migas de pan para la navegaci\u00f3n por bloques. Dos nuevos bloques y configuraciones de opciones adicionales a\u00f1aden m\u00e1s funcionalidades al editor.<\/p>\n Aqu\u00ed hay una lista r\u00e1pida de las caracter\u00edsticas y mejoras de nuestro editor de bloques favorito que viene con WordPress 5.4:<\/p>\n Inicialmente llamado Social Links, el bloque de Social Icons<\/strong> permite a los autores a\u00f1adir r\u00e1pidamente iconos con enlaces a perfiles sociales<\/a> y proporciona un buen n\u00famero de bloques de iconos sociales infantiles para elegir. Este bloque ha sido experimental durante un tiempo y es estable desde Gutenberg 7.5<\/a>.<\/p>\n El bloque de Iconos Sociales viene con tres estilos predefinidos para sus personalizaciones visuales: Predeterminado<\/strong>, S\u00f3lo logos<\/strong> y Forma de p\u00edldora<\/strong>.<\/p>\n Desde que se introdujeron por primera vez como una caracter\u00edstica experimental en Gutenberg 6.5 (y se fusionaron en WordPress 5.3<\/a>), los Iconos Sociales han sido a\u00f1adidos a Gutenberg 7.5 y puede que no funcionen como se esperaba si se est\u00e1 ejecutando una versi\u00f3n anticuada del plugin de Gutenberg.<\/p>\n Seg\u00fan Jorge Costa<\/a>, hay dos maneras de prevenir los problemas con los iconos sociales:<\/p>\n A\u00f1adido al editor de bloques en Gutenberg 7.2<\/a>, el bloque de botones<\/strong> reemplaza al bloque de un solo bot\u00f3n<\/a>, y permite a los usuarios de WordPress a\u00f1adir m\u00e1s botones a su contenido dentro del mismo contenedor del bloque.<\/p>\n Los botones individuales vienen con dos estilos preestablecidos para elegir y varias opciones adicionales para afinar el aspecto de sus botones.<\/p>\n Con WordPress 5.4, los propietarios de sitios web adquieren un control m\u00e1s profundo sobre el aspecto y la sensaci\u00f3n de su llamada a la acci\u00f3n gracias a la adici\u00f3n de fondos graduales<\/a>, que tambi\u00e9n vienen con un pu\u00f1ado de ajustes de gradientes disponibles para que los administradores de los sitios web los utilicen como puntos de partida para futuras personalizaciones.<\/p>\n WordPress 5.4 a\u00f1ade una nueva presentaci\u00f3n de diapositivas de bienvenida con informaci\u00f3n b\u00e1sica sobre el editor de bloques y un enlace a la documentaci\u00f3n en l\u00ednea<\/a> (a\u00f1adida con Gutenberg 7.1<\/a>).<\/p>\n El modal s\u00f3lo es visible justo despu\u00e9s de actualizarse a 5.4. Si quiere activarlo de nuevo, s\u00f3lo tiene que abrir el men\u00fa de M\u00e1s herramientas y opciones<\/strong> del bot\u00f3n superior derecho y encontrar el enlace de la Gu\u00eda<\/strong> de bienvenida.<\/p>\n A partir de WordPress 5.4, el editor se abre en modo de pantalla completa por defecto<\/a> en las nuevas instalaciones y dispositivos. Puede activar o desactivar el modo de pantalla completa<\/strong> haciendo clic en el men\u00fa M\u00e1s herramientas y opciones,<\/strong> como se muestra en la siguiente imagen.<\/p>\n Por ahora, esta preferencia se almacena localmente, lo que significa que se sobrescribir\u00e1 cada vez que cambien las preferencias, como sucede cuando se accede a la p\u00e1gina web en modo de inc\u00f3gnito.\u00a0En el futuro, esta preferencia deber\u00eda almacenarse en la base de datos, haciendo que la elecci\u00f3n del usuario sea persistente en cualquier contexto.<\/p>\n Obs\u00e9rvese que la decisi\u00f3n<\/a> de tener el editor en modo de pantalla completa por defecto no se aprecia un\u00e1nimemente, ya que se considera que puede resultar confuso para los principiantes y los usuarios no avanzados. Revisa este post<\/a> si quieres saber m\u00e1s sobre las preocupaciones de la gente en modo de pantalla completa.<\/p>\n Los desarrolladores del editor de bloques pueden controlar el modo de pantalla completa de forma programada con s\u00f3lo unas pocas l\u00edneas de JavaScript:<\/p>\n Si normalmente escribe art\u00edculos de forma larga<\/a>, deber\u00eda apreciar el soporte de color del texto en l\u00ednea. Antes de esta actualizaci\u00f3n, nos vimos obligados a codificar en modo HTML los bloques de texto enriquecido para cambiar el color de las palabras y las cadenas.<\/p>\n A partir de WordPress 5.4, podemos seleccionar palabras y subcadenas en bloques de RichText y cambiar r\u00e1pidamente sus colores usando el selector de colores incorporado.<\/p>\n WordPress 5.4 a\u00f1ade una larga lista de caracter\u00edsticas y mejoras relacionadas con el color al editor de bloques. Como se ha visto anteriormente, ya no estamos limitados a los colores s\u00f3lidos. Varios bloques ahora soportan fondos de degradado y conjuntos predefinidos de degradados.<\/p>\n Aqu\u00ed hay una lista r\u00e1pida de algunas mejoras relacionadas con el color:<\/p>\n Otra adici\u00f3n notable al editor del bloque es el soporte para im\u00e1genes destacadas en el bloque de \u00daltimas Publicaciones (Gutenberg 7.5<\/a>).<\/p>\n Esta es s\u00f3lo la m\u00e1s reciente de varias mejoras a\u00f1adidas al bloque de \u00daltimos Mensajes a lo largo del tiempo y marca otro paso<\/a> hacia \u00abbloques din\u00e1micos o globales m\u00e1s complejos\u00bb.<\/p>\n Con WordPress 5.4, el bloque de \u00daltimas Publicaciones le permite sacar publicaciones de una categor\u00eda espec\u00edfica pero no le permite construir consultas m\u00e1s avanzadas por categor\u00eda\/etiqueta\/tipo de publicaci\u00f3n y\/o incluir\/excluir publicaciones individuales.<\/p>\n Esperamos ver m\u00e1s mejoras con este bloque en el futuro.<\/p>\n Disponible para los usuarios de Gutenberg desde la versi\u00f3n 6.7<\/a>, y ahora fusionada con el N\u00facleo, la nueva barra de migas de pan tiene como objetivo simplificar la navegaci\u00f3n de los bloques anidados.<\/p>\n La imagen de abajo muestra varios bloques anidados y el nuevo men\u00fa de migas de pan<\/a> en la parte inferior.<\/p>\n Los desarrolladores de temas y bloques deben estar al tanto de muchos cambios introducidos en el editor de bloques con WordPress 5.4. Estos cambios incluyen:<\/p>\n Los desarrolladores de bloques y los usuarios avanzados pueden ahora a\u00f1adir atajos personalizados al editor de bloques.<\/p>\n Se ha introducido<\/a> un nuevo paquete llamado Los desarrolladores<\/a> pueden a\u00f1adir sus atajos personalizados llamando a la acci\u00f3n Esto agregar\u00e1 autom\u00e1ticamente el atajo personalizado a los atajos modales disponibles en el bot\u00f3n M\u00e1s herramientas y opciones en<\/strong> la esquina superior derecha del editor.<\/p>\n Entonces, podemos adjuntar un manejador de atajos de teclado<\/a> usando la funci\u00f3n useShortcut:<\/p>\n Puede leer m\u00e1s sobre los atajos de teclado en el blog Make WordPress Core<\/a>.<\/p>\n WordPress 5.4 introduce fondos de gradiente con un pu\u00f1ado de preajustes para los botones y bloques de cobertura. Esto sucede gracias a las nuevas APIs de temas gradientes<\/a>.<\/p>\n Las nuevas API ofrecen la opci\u00f3n de soporte de temas con de Puede desactivar los degradados personalizados utilizando la opci\u00f3n de soporte de temas de La funcionalidad de los gradientes puede ser eliminada completamente usando tanto los WordPress 5.4 introduce varios cambios de estructura DOM que los desarrolladores de temas deben tener en cuenta.<\/p>\n Para una vista detallada sobre los cambios de DOM y CSS, ver Markup y cambios relacionados con el estilo<\/a> en WordPress 5.4<\/p>\n Con el nuevo paquete @wordpress\/create-block Package for Block Scaffolding, los desarrolladores tienen una nueva forma de generar la estructura de directorios para un plugin de edici\u00f3n de bloques. Esta estructura incluye t\u00edpicamente index.php, index.js y style.css.<\/p>\n Los desarrolladores de bloques pueden ahora simplemente ejecutar el siguiente comando:<\/p>\n Las Colecciones de Bloques<\/a> proveen una forma de agrupar visualmente las colecciones de bloques en el insertador del editor de bloques. Las colecciones son diferentes de las categor\u00edas y proporcionan una forma adicional de agrupar bloques.<\/p>\n El nuevo API proporciona una nueva funci\u00f3n:<\/p>\n Introducida con Gutenberg 7.3<\/a> y ahora fusionada en el n\u00facleo<\/a>, la nueva API permite a los desarrolladores de temas y bloques organizar mejor los bloques, facilitando a los usuarios el descubrimiento y la adici\u00f3n de bloques al contenido.<\/p>\n\n
\u00bfQu\u00e9 hay de nuevo con el Editor de Bloques?<\/h2>\n
\n
Nuevas caracter\u00edsticas y mejoras del Editor de bloques<\/h3>\n
\n
Los nuevos iconos sociales bloquean<\/h4>\n
![\"Los](\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2020\/03\/iconos-sociales.jpg\")
![\"Estilos](\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2020\/03\/estilos-de-iconos-sociales.jpg\")
\n
Bloque de nuevos botones<\/h4>\n
![\"El](\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2020\/03\/el-nuevo-bloque-de-botones.png\")
![\"Configuraci\u00f3n](\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2020\/03\/configuracion-de-los-botones.jpg\")
![\"Caracter\u00edsticas](\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2020\/03\/caracteristicas-de-color-renovadas.jpg\")
Una gu\u00eda de bienvenida Modal<\/h4>\n
![\"Bienvenido](\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2020\/03\/bienvenido-guia-modal.jpg\")
![\"Modo](\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2020\/03\/modo-de-pantalla.jpg\")
Modo de pantalla completa activado por defecto<\/h4>\n
![\"Modo](\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2020\/03\/modo-de-pantalla-completa.png\")
const isFullscreenMode = wp.data.select( 'core\/edit-post' ).isFeatureActive( 'fullscreenMode' );\n\nif ( isFullscreenMode ) {\n\twp.data.dispatch( 'core\/edit-post' ).toggleFeature( 'fullscreenMode' );\n}<\/code><\/pre>\nSoporte de color de texto en l\u00ednea en bloques de texto enriquecido<\/h4>\n
![\"Opci\u00f3n](\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2020\/03\/opcion-de-color-de-texto-enriquecido.jpg\")
![\"Selector](\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2020\/03\/selector-de-colores-richtext.jpg\")
Opciones de color adicionales para varios bloques<\/h4>\n
\n
![\"Bloque](\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2020\/03\/bloque-de-cubierta.jpg\")
Im\u00e1genes destacadas en el bloque de \u00faltimas publicaciones<\/h4>\n
![\"Bloqueo](\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2020\/03\/bloqueo-de-las-ultimas-publicaciones.jpg\")
Una nueva barra de migas de pan para la navegaci\u00f3n en bloque<\/h4>\n
![\"](\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2020\/03\/el-nuevo-menu-de-migas-de-pan.jpg\")
Cambios en el editor de bloques para los desarrolladores de temas y bloques<\/h3>\n
\n
Atajos de teclado del editor de bloques<\/h4>\n
@wordpress\/keyboard-shortcuts<\/code> para centralizar el registro, la eliminaci\u00f3n y la documentaci\u00f3n de los atajos de edici\u00f3n.<\/p>\nregisterShortcut<\/code> de esta manera:<\/p>\nwp.data.dispatch( 'core\/keyboard-shortcuts' ).registerShortcut( {\n\n\t\/\/ Shortcut identifier\n\tname: 'plugin\/shortcut-test',\n\n\t\/\/ Shortcut category (possible values global, block, selection)\n\tcategory: 'global',\n\n\t\/\/ Shortcut description\n\tdescription: 'My first shortcut',\n\n\t\/\/ The key combination that triggers the shortcut\n\tkeyCombination: {\n\n\t\t\/\/ Available modifiers:\n\t\t\/\/ primary, primaryShift, primaryAlt,\n\t\t\/\/ secondary, access, ctrl, alt,\n\t\t\/\/ ctrlShift, shift, shiftAlt\n\t\tmodifier: 'alt',\n\t\tcharacter: 'w',\n\t},\n\n\t\/\/ An alias for the key combination\n\taliases: [\n\t\t{\n\t\t\tmodifier: 'primary',\n\t\t\tcharacter: 'q',\n\t\t},\n\t],\n} );<\/code><\/pre>\n![\"Se](\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2020\/03\/mi-primer-atajo.jpg\")
import { useShortcut } from '@wordpress\/keyboard-shortcuts';\nimport { useCallback } from '@wordpress\/element';\n\nconst MyComponent = () => {\n\tuseShortcut(\n\n\t\t'plugin\/shortcut-test',\n\n\t\tuseCallback(\n\t\t\t( event ) => {\n\t\t\t\t\/\/ Do something\n\t\t\t},\n\t\t\t[]\n\t\t)\n\t);\n}<\/code><\/pre>\nAPIs de temas graduales<\/h4>\n
editor-gradient-presets<\/code>, que permite a los desarrolladores de temas anular los preajustes predeterminados y definir los suyos propios<\/a>:<\/p>\nadd_theme_support(\n\t'editor-gradient-presets',\n\tarray(\n\t\tarray(\n\t\t\t'name'\t\t=> __( 'CadetBlue to Chartreuse', 'themeLangDomain' ),\n\t\t\t'gradient'\t=> 'linear-gradient(135deg,rgba(95,158,160,1) 0%,rgb(127,255,0) 100%)',\n\t\t\t'slug'\t\t=> 'cedetblue-chartreuse'\n\t\t),\n\t\tarray(\n\t\t\t'name'\t\t=> __( 'Chocolate to Coral', 'themeLangDomain' ),\n\t\t\t'gradient'\t=> 'linear-gradient(135deg,rgba(210,105,30,1) 0%,rgba(255,127,80,1) 100%)',\n\t\t\t'slug'\t\t=> 'chocolate-to-coral',\n\t\t),\n\t\tarray(\n\t\t\t'name'\t\t=> __( 'DarkMagenta to DarkOrchid', 'themeLangDomain' ),\n\t\t\t'gradient'\t=> 'linear-gradient(135deg,rgb(139,0,139) 0%,rgb(153,50,204) 100%)',\n\t\t\t'slug'\t\t=> 'darkmagenta-to-darkorchid',\n\t\t),\n\t\tarray(\n\t\t\t'name'\t\t=> __( 'DeepSkyBlue to DodgerBlue', 'themeLangDomain' ),\n\t\t\t'gradient'\t=> 'linear-gradient(135deg,rgba(0,191,255,1) 0%,rgba(30,144,255,1) 100%)',\n\t\t\t'slug'\t\t=> 'deepskyblue-to-dodgerblue',\n\t\t),\n\t)\n);<\/code><\/pre>\n![\"Preajustes](\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2020\/03\/preajustes-de-gradientes-personalizados.jpg\")
\n
name<\/code>: una etiqueta significativa para la punta de la herramienta que proporciona informaci\u00f3n sobre el gradiente. Esto es particularmente \u00fatil para los lectores de pantalla y los usuarios que tienen dificultad para distinguir ciertos colores.<\/li>\ngradient<\/code>: Valores CSS para el gradiente.<\/li>\nslug<\/code>: un identificador para generar clases CSS<\/a> utilizadas en el editor de bloques.<\/li>\n<\/ul>\n![\"Preajustes](\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2020\/03\/preajustes-de-gradiente-personalizados.jpg\")
disable-custom-gradients<\/code>:<\/p>\nadd_theme_support( 'disable-custom-gradients' );<\/code><\/pre>\ndisable-custom-gradients<\/code> los editor-gradient-presets<\/code>:<\/p>\nadd_theme_support( 'disable-custom-gradients' );\nadd_theme_support( 'editor-gradient-presets', array() );<\/code><\/pre>\nCambios de marca y estilo en el editor de bloques<\/h4>\n
\n
editor-<\/code> heredado ha sido eliminado de los scripts de editor de bloque y ahora los desarrolladores s\u00f3lo deben usar el prefijo block-editor-<\/code>.<\/li>\nedit-post-layout__content<\/code> ha sido eliminada del DOM del editor de bloques.<\/li>\ndiv<\/code> envoltorios de buceo han sido retirados de RichText y los bloques como redundante. Este cambio aporta una mejora significativa del rendimiento y simplifica el \u00e1rbol DOM, lo que deber\u00eda ser apreciado por los desarrolladores de temas<\/a>\u00a0y bloques.<\/li>\nAndamios de bloques<\/h4>\n
$ npm init @wordpress\/block block-name<\/code><\/pre>\nBloquear las colecciones<\/h4>\n
registerBlockCollection( namespace, { title, icon } );<\/code><\/pre>\n\n
namespace<\/code>: matched against a block prefix.<\/li>\ntitle<\/code>: this is the label shown in the block inserter.<\/li>\nicon<\/code>: this is the icon shown with the title in the block inserter.<\/li>\n<\/ul>\nVariaciones de bloque<\/h4>\n