Son muchas cosas, \u00bfverdad? As\u00ed que no esperes m\u00e1s y descubramos las novedades de WordPress 6.4.<\/p>\n
Hooks de Bloque<\/h2>\n
Los Hooks de Bloque<\/a> (antes llamados Bloques de Autoinserci\u00f3n<\/a>) permiten a los plugins interactuar autom\u00e1ticamente con el editor Gutenberg<\/a>.<\/p>\n M\u00e1s concretamente, gracias a los Hooks de Bloque, un bloque puede colocarse autom\u00e1ticamente en una posici\u00f3n espec\u00edfica cuando se a\u00f1ade otro bloque al contenido.<\/p>\n Dos principios gu\u00edan la forma en que deben funcionar los Hooks de Bloque:<\/p>\n Para tener en cuenta ambos principios y preservar la informaci\u00f3n contenida en el c\u00f3digo, los bloques enganchados s\u00f3lo funcionan en plantillas y partes de plantillas no modificadas y en patrones proporcionados por temas, copiados del Directorio de Patrones o registrados con la funci\u00f3n Adem\u00e1s, la nota del desarrollador<\/a> advierte:<\/p>\n a partir de WordPress 6.4, no puedes insertar autom\u00e1ticamente bloques que tengan una funci\u00f3n de guardar, o se producir\u00e1n errores de validaci\u00f3n de bloques. En t\u00e9rminos coloquiales, esto significa que los Hooks de Bloque funcionan con bloques din\u00e1micos, no con bloques est\u00e1ticos.<\/p><\/blockquote>\n M\u00e1s informaci\u00f3n sobre bloques est\u00e1ticos y din\u00e1micos<\/a>.<\/p>\n Puedes implementar Hooks de Bloque de dos formas: utilizando el archivo block.json<\/strong> o el nuevo filtro Utilizar block.json<\/strong> es la forma r\u00e1pida y sencilla de enganchar un bloque de terceros, pero no proporciona una gran flexibilidad, ya que un bloque insertado autom\u00e1ticamente mediante block.json<\/strong> se adjuntar\u00e1 a todas las instancias del objetivo incondicionalmente.<\/p>\n Puedes a\u00f1adir bloques enganchados utilizando la nueva propiedad Puedes establecer una de las siguientes posiciones:<\/p>\n Por ejemplo, puedes hacer hook de un bloque a cada bloque Spacer utilizando\u00a0 Cuando utilices Una forma m\u00e1s flexible de hacer que los bloques se conecten a un objetivo es utilizar el nuevo filtro La funci\u00f3n callback de Para m\u00e1s informaci\u00f3n t\u00e9cnica sobre los Hooks de Bloque, consulta la nota de desarrollo<\/a>.<\/p>\n Los Bloques Patr\u00f3n son una potente herramienta de dise\u00f1o que puedes utilizar en tus contenidos o plantillas, permiti\u00e9ndote construir complejas estructuras de bloques sin complicaciones. Puedes utilizar los patrones proporcionados por tu tema de bloques, o puedes a\u00f1adir m\u00e1s patrones copi\u00e1ndolos del Directorio de Patrones<\/a>.<\/p>\n Tambi\u00e9n puedes crear tus patrones desde cero en la interfaz del editor de sitios\/post. Y si te sientes c\u00f3modo programando, puedes a\u00f1adir patrones a tu tema actual \u2014 o tema hijo<\/a> \u2014 con un archivo .php. Hoy en d\u00eda, los patrones son tan cruciales en WordPress que hemos publicado una gu\u00eda en profundidad sobre todo lo relacionado con los patrones de bloque<\/a>.<\/p>\n Dicho esto, vamos a descubrir las novedades del sistema de patrones con WordPress 6.4.<\/p>\n En primer lugar, las categor\u00edas de patrones. En la versi\u00f3n anterior de WordPress, cuando creabas un nuevo patr\u00f3n, s\u00f3lo pod\u00edas establecer el nombre y el tipo de patr\u00f3n, sincronizado o no sincronizado.<\/p>\n A partir de WordPress 6.4, tambi\u00e9n puedes a\u00f1adir una categor\u00eda para tu patr\u00f3n, de modo que pueda identificarse m\u00e1s f\u00e1cilmente<\/a> en el editor de sitios y entradas.<\/p>\n Tambi\u00e9n es posible cambiar las categor\u00edas cuando editas el patr\u00f3n.<\/p>\n Adem\u00e1s, se ha eliminado la pesta\u00f1a Patrones sincronizados<\/strong> del insertador de bloques, y ahora puedes acceder a todos tus patrones desde la misma pesta\u00f1a Patrones<\/strong>.<\/p>\n Tambi\u00e9n es m\u00e1s f\u00e1cil importar o exportar patrones<\/a> como JSON desde el editor del sitio.<\/p>\n Otros<\/a> cambios<\/a> mejoran la compatibilidad de los patrones con los temas cl\u00e1sicos y allanan el camino para futuras implementaciones.<\/p>\n Twenty Twenty-Four es el nuevo tema predeterminado de WordPress que viene con WordPress 6.4. Es un tema de WordPress multifuncional pero minimalista, adaptado a tres casos de uso principales: propietarios de peque\u00f1as empresas, fot\u00f3grafos y artistas, y escritores y blogueros.<\/p>\n Twenty Twenty-Four no a\u00f1ade funcionalidad a tu sitio web. Es m\u00e1s bien una colecci\u00f3n de plantillas y patrones que, combinados entre s\u00ed, te permiten crear una amplia variedad de sitios web.<\/p>\n Adem\u00e1s, proporciona mucho contenido predeterminado con toneladas de ejemplos reales de estructuras de p\u00e1ginas que puedes editar y personalizar seg\u00fan tus necesidades.<\/p>\n Tenemos un art\u00edculo completo que trata sobre el nuevo tema Twenty Twenty-Four<\/a>. \u00c9chale un vistazo para verlo m\u00e1s de cerca.<\/p>\n Con WordPress 6.4, se incorporan al core varias herramientas y funciones de dise\u00f1o. Entre las m\u00e1s interesantes se incluyen:<\/p>\n El bloque Contenido es hijo del bloque Bucle de Consulta<\/a> (Query Loop) y resulta especialmente \u00fatil cuando necesitas personalizar el aspecto del contenido de un bucle de consulta.<\/p>\n Est\u00e1 disponible en el editor de entradas cuando est\u00e1s editando un Bucle de Consulta y en el editor del sitio cuando est\u00e1s creando o editando una plantilla.<\/p>\n Con WordPress 6.4, el bloque Contenido se ha mejorado y ahora admite colores<\/a> para el texto, el fondo y los enlaces.<\/p>\n Con WordPress 6.4 se ha a\u00f1adido un nuevo soporte para el bloque Imagen de fondo<\/a>, con el bloque Grupo activado<\/a> por defecto.<\/p>\n Cuando un tema utiliza la funci\u00f3n Establecer una imagen de fondo a\u00f1ade la propiedad Tienes dos formas de a\u00f1adir soporte de imagen de fondo a tus temas. La primera y m\u00e1s sencilla es optar por la propiedad Si necesitas un control m\u00e1s granular sobre las herramientas de dise\u00f1o, puedes utilizar la propiedad Un nuevo conmutador Expandir al hacer clic<\/strong> en el panel Ajustes de la imagen del bloque te permite activar\/desactivar el efecto lightbox<\/a> en tus im\u00e1genes. Esta es la primera iteraci\u00f3n de esta funcionalidad, y deber\u00eda mejorarse en futuras versiones.<\/p>\n El efecto lightbox tambi\u00e9n funciona con filtros duotono, pero es un poco confuso cuando se trata de galer\u00edas de im\u00e1genes. En el momento de escribir esto, no es posible activar el efecto lightbox a nivel de galer\u00eda y debes activar la funci\u00f3n en im\u00e1genes individuales.<\/p>\n Para implementar esta funci\u00f3n con las versiones anteriores de WordPress, ten\u00edas que utilizar un plugin. Ahora forma parte del core y esto significa menos c\u00f3digo de terceros para tu sitio web de WordPress.<\/p>\n Una nueva opci\u00f3n de Orientaci\u00f3n del texto<\/a> permite que los temas admitan texto vertical. Si tu tema admite esta funci\u00f3n, puedes activar el texto vertical de derecha a izquierda en los ajustes de Tipograf\u00eda<\/strong>.<\/p>\n Esta funci\u00f3n est\u00e1 desactivada por defecto. Los desarrolladores de temas pueden a\u00f1adir soporte para la orientaci\u00f3n del texto a\u00f1adiendo un nuevo ajuste Tambi\u00e9n puedes establecer un comportamiento predeterminado diferente para bloques espec\u00edficos. El siguiente ejemplo muestra c\u00f3mo establecer la orientaci\u00f3n WordPress 6.4 tambi\u00e9n introduce algunas mejoras en el bloque Notas al Pie de P\u00e1gina<\/a>. Ahora admite el color del enlace, del fondo y del texto<\/a>. Tambi\u00e9n proporciona controles para la tipograf\u00eda, las dimensiones y los bordes<\/a>.<\/p>\n Los controles de color de texto y enlace est\u00e1n expandidos por defecto. Los dem\u00e1s controles se contraen al cargar la p\u00e1gina.<\/p>\n Los botones est\u00e1n ahora en la lista de elementos interiores permitidos<\/a>\u00a0del bloque Navegaci\u00f3n.<\/p>\n Cuando creas un nuevo elemento de men\u00fa, puedes transformarlo f\u00e1cilmente en un bot\u00f3n desde la barra de herramientas del bloque.<\/p>\n WordPress 6.4 tambi\u00e9n introduce varias mejoras en la interfaz del editor, mejorando la experiencia de edici\u00f3n y agilizando el flujo de trabajo. Nuestros cambios favoritos incluyen:<\/p>\n Introducida por primera vez con WordPress 6.3<\/a>, la Paleta de Comandos te permite ejecutar acciones de uso frecuente en la interfaz del Editor de Sitios. WordPress 6.4 supone un nuevo paso adelante con una actualizaci\u00f3n del dise\u00f1o<\/a> y algunas mejoras adicionales.<\/p>\n Las im\u00e1genes siguientes muestran un ejemplo del diferente comportamiento de la Paleta de Comandos en WordPress 6.3 y 6.4.<\/p>\n Esta versi\u00f3n tambi\u00e9n a\u00f1ade algunos comandos nuevos<\/a> y mejora la coherencia y la nomenclatura. Los nuevos comandos incluyen transformaciones de bloques y las opciones de duplicar, copiar, eliminar e insertar antes\/despu\u00e9s.<\/p>\n Un ligero cambio elimina los verbos<\/a> del principio de muchos comandos. Esto mejora la capacidad de b\u00fasqueda y la claridad de varios comandos.<\/p>\n La nueva versi\u00f3n tambi\u00e9n a\u00f1ade comandos de selecci\u00f3n de bloques. Para verlo en acci\u00f3n, selecciona unos cuantos bloques en el Editor de Sitios y pulsa Puedes ejecutar varios comandos en una selecci\u00f3n de bloques<\/a>. Por ejemplo, puedes agrupar unos cuantos bloques:<\/p>\n Y tambi\u00e9n puedes desagruparlos.<\/p>\n En el momento de escribir esto, los comandos de selecci\u00f3n de bloques incluyen A\u00f1adir antes<\/strong>, A\u00f1adir despu\u00e9s<\/strong>, Eliminar<\/strong>, Duplicar<\/strong>, Mover a<\/strong>, Agrupar<\/strong>, Desagrupar<\/strong> y Transformar a<\/strong>.<\/p>\n La Vista de Lista<\/strong> te permite navegar por el contenido de la p\u00e1gina y realizar varias acciones en bloques, grupos y patrones. Estas acciones incluyen Copiar, Duplicar, Agrupar y muchas m\u00e1s. Esto es especialmente \u00fatil con estructuras complejas de bloques anidados, ya que te permite expandir y contraer grupos de elementos y realizar varias acciones en bloques, grupos y patrones individuales.<\/p>\n A partir de WordPress 6.4, tambi\u00e9n puedes renombrar un grupo de bloques<\/a>, previsualizar im\u00e1genes<\/a> para los bloques Galer\u00eda e Imagen, duplicar bloques<\/a> utilizando el acceso directo Al editar bloques con varios hijos, trabajar con los bloques interiores puede resultar complicado. Esto es especialmente cierto cuando se trata del bloque Navegaci\u00f3n<\/a>.<\/p>\n Antes de WordPress 6.4, al seleccionar bloques interiores, la barra de herramientas del bloque se mov\u00eda a una posici\u00f3n diferente en la pantalla. Este comportamiento provocaba una mala experiencia de usuario para bloques como Navegaci\u00f3n y Lista.<\/p>\n Desde WordPress 6.4, la barra de herramientas del bloque hijo est\u00e1 unida a la posici\u00f3n del padre. De esta forma, cuando cambias la selecci\u00f3n entre bloques hermanos, la barra de herramientas permanece fija en la misma posici\u00f3n<\/a> que el padre.<\/p>\n La barra de herramientas fijada se implementa actualmente<\/a> en los bloques Navegaci\u00f3n<\/a>, Lista<\/a> y Cita<\/a>.<\/p>\n Se han incorporado al core m\u00e1s de 100 actualizaciones de rendimiento, junto con varios cambios para los desarrolladores de temas. Exploremos algunos cambios interesantes.<\/p>\n Las estrategias de carga de scripts se introdujeron con WordPress 6.3<\/a> y proporcionan una forma de evitar que un script se cargue en un orden inesperado en el \u00e1rbol de dependencia de scripts mediante los atributos Con WordPress 6.4, las estrategias de carga de scripts se implementan para los scripts frontend<\/a> en el core y en los temas incluidos.<\/p>\n Adem\u00e1s, a partir de WordPress 6.4, los scripts \u00abque se cargan con el atributo Cambios adicionales mejoran la seguridad del core y la mantenibilidad. Para una visi\u00f3n m\u00e1s t\u00e9cnica de la carga de scripts, consulta la nota de desarrollo de WP 6.4<\/a>.<\/p>\n A partir de WordPress 6.4, las p\u00e1ginas de adjuntos para las nuevas instalaciones de WordPress est\u00e1n totalmente deshabilitadas<\/a>.<\/p>\n Antes de WordPress 6.4, WordPress creaba autom\u00e1ticamente una p\u00e1gina de adjuntos para cada archivo multimedia subido. Pero esto no ten\u00eda sentido en muchos sitios web. Esas p\u00e1ginas son indexadas por los motores de b\u00fasqueda<\/a> y podr\u00edan suponer una mala experiencia para los usuarios.<\/p>\n A partir de WordPress 6.4, una opci\u00f3n de la base de datos Esta opci\u00f3n se establece en Los administradores del sitio pueden cambiar ese valor a trav\u00e9s de WP CLI:<\/p>\n O visitando wp-admin\/options.php<\/strong> en tu sitio web y cambiando el valor de la opci\u00f3n \n
register_block_pattern<\/code>. No funcionar\u00e1n en el contenido de las entradas, en las plantillas y partes de plantillas modificadas, ni en los patrones generados por los usuarios.<\/p>\nhooked_block_types<\/code>.<\/p>\nEnganchar (Hooking) Bloques mediante block.json<\/h3>\n
blockHooks<\/code>, que toma un objeto de pares clave\/valor donde la clave es el nombre del bloque con el que quieres hacer hook, y el valor especifica su posici\u00f3n relativa al bloque de destino.<\/p>\n\n
before<\/code> del bloque objetivo<\/li>\nafter<\/code> del bloque destino<\/li>\nfirstChild<\/code> del bloque contenedor de destino<\/li>\nlastChild<\/code> del bloque contenedor de destino<\/li>\n<\/ul>\nblockHooks<\/code> de esta forma:<\/p>\n{\n\tblockHooks: {\n\t\t'core\/spacer': 'after'\n\t}\n}<\/code><\/pre>\nfirstChild<\/code> o lastChild<\/code> con block.json<\/strong>, un nuevo panel Plugins<\/strong> en el inspector de bloques muestra los bloques que se van a insertar autom\u00e1ticamente, con conmutadores<\/a> para activar\/desactivar<\/a> la inserci\u00f3n autom\u00e1tica de bloques.<\/p>\n![\"Inserci\u00f3n](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/10\/auto-inserting-blocks-enabled.jpg\")
Enganchar Bloques Utilizando
hooked_block_types<\/code><\/h3>\nhooked_block_types<\/code>. Te permite hacer hook de bloques incondicionalmente, igual que el m\u00e9todo block.json<\/strong>, o bas\u00e1ndote en una condici\u00f3n \u2014 por ejemplo, hacer hook de un bloque a un objetivo dependiendo de la plantilla, la parte de la plantilla o el patr\u00f3n donde se encuentre.<\/p>\nhooked_block_types<\/code> acepta cuatro par\u00e1metros:<\/p>\n\n
$hooked_blocks<\/code> \u2014 Un array de bloques enganchados.<\/li>\n$position<\/code> \u2014 Puede ser before<\/code>, after<\/code>, first_child<\/code>, o last_child<\/code>.<\/li>\n$anchor_block<\/code> \u2014 El nombre del bloque ancla.<\/li>\n$context<\/code> \u2014 La plantilla de bloque, la parte de la plantilla o el patr\u00f3n al que pertenece el bloque ancla.<\/li>\n<\/ul>\nMejoras en el Sistema de Patrones<\/h2>\n
![\"Crear](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/10\/wp-63-create-pattern.jpg\")
![\"Crear](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/10\/wp-64-create-pattern-categories.jpg\")
![\"Editar](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/10\/wp-64-pattern-categories.jpg\")
![\"Pesta\u00f1as](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/10\/wp-64-block-inserter-tabs-compared.jpg\")
![\"Exportar](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/10\/wp-64-export-as-json.jpg\")
Twenty Twenty-Four<\/h2>\n
Nuevas Herramientas y Funciones de Dise\u00f1o<\/h2>\n
Controles de Color para el Bloque Contenido<\/h3>\n
![\"El](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/10\/wp-64-content-block.jpg\")
![\"Ajustes](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/10\/wp-64-content-block-color-settings.jpg\")
Soporte para el Bloque Imagen de Fondo<\/h3>\n
![\"Control](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/10\/wp-64-background-image.jpg\")
appearanceTools<\/code> en\u00a0theme.json<\/strong>, el panel Fondo muestra el correspondiente control Imagen de fondo, que tambi\u00e9n muestra una vista previa de la imagen de fondo.<\/p>\nbackground-image<\/code> al elemento div<\/code> del bloque junto con una declaraci\u00f3n background-size: cover<\/code> que garantiza que la imagen cubra el bloque de grupo.<\/p>\nappearanceTools<\/code>. Esto habilita varias herramientas de dise\u00f1o, incluidas las im\u00e1genes de fondo.<\/p>\nbackgroundImage<\/code> en tu theme.json<\/strong> de esta forma:<\/p>\n{\n\t\"settings\": {\n\t\t\"background\": {\n\t\t\t\"backgroundImage\": true\n\t\t}\n\t}\n}<\/code><\/pre>\nEfecto de Lightbox en las Im\u00e1genes<\/h3>\n
![\"El](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/10\/wp-64-enable-lightbox.jpg\")
Orientaci\u00f3n Vertical del Texto<\/h3>\n
![\"Configurar](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/10\/wp-64-text-orientation.jpg\")
writingMode<\/code> a su theme.json<\/strong>:<\/p>\n{\n\tsettings: {\n\t\t\"typography\": {\n\t\t\t\"writingMode\": true\n\t\t}\n\t}\n}<\/code><\/pre>\nvertical-rl<\/code> para todos los bloques de p\u00e1rrafo:<\/p>\n{\n\t\"styles\": {\n\t\t\"blocks\": {\n\t\t\t\"core\/paragraph\": {\n\t\t\t\t\"typography\": {\n\t\t\t\t\t\"writingMode\": \"vertical-rl\"\n\t\t\t\t}\n\t\t\t},\n\t\t}\n\t}\n}<\/code><\/pre>\nMejoras para el Bloque Notas al Pie de P\u00e1gina<\/h3>\n
![\"Ajustes](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/10\/wp-64-footnotes-settings.jpg\")
Botones Permitidos en el Bloque Navegaci\u00f3n<\/h3>\n
![\"Transformar](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/10\/wp-64-button-menu-item.jpg\")
![\"Un](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/10\/wp-64-button-menu-item-2.jpg\")
Mejoras en la Interfaz de Usuario y en el Flujo de Trabajo<\/h2>\n
Paleta de Comandos Mejorada<\/h3>\n
![\"La](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/10\/wp-63-command-palette.jpg\")
![\"La](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/10\/wp-64-command-palette.jpg\")
![\"Buscando](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/10\/wp-63-patterns-in-command-palette.jpg\")
![\"Buscando](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/10\/wp-64-patterns-in-command-palette.jpg\")
![\"Buscar](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/10\/wp-63-open-in-command-palette.jpg\")
![\"Buscar](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/10\/wp-64-open-in-command-palette.jpg\")
cmd + k<\/code> (MacOS) o ctrl + k<\/code> (Windows) e introduce una clave de b\u00fasqueda como \u00abtransformar\u00bb. Deber\u00edas ver las siguientes sugerencias:<\/p>\n![\"Comandos](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/10\/wp-64-transform-command.jpg\")
![\"Creando](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/10\/wp-64-group-command.jpg\")
![\"Un](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/10\/wp-64-ungroup-command.jpg\")
Vista de Lista Mejorada<\/h3>\n
![\"Vista](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/10\/wp-63-list-view.jpg\")
![\"Vista](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/10\/wp-64-list-view.jpg\")
cmd + shift + d<\/code> (ctrl + shift + d<\/code> en Windows).<\/p>\n![\"Renombrar](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/10\/wp-64-rename-group.jpg\")
Barras de Herramientas Fijadas<\/h3>\n
![\"La](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/10\/wp-64-select-list.jpg\")
![\"Una](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/10\/wp-64-select-list-item.jpg\")
Mejoras de Rendimiento y Otros Cambios para Desarrolladores<\/h2>\n
Estrategias de Carga de Scripts<\/h3>\n
async<\/code> y defer<\/code>.<\/p>\ndefer<\/code> se han trasladado del pie de p\u00e1gina a head<\/code> para que se descubran antes mientras se carga el documento y puedan ejecutarse antes una vez cargado\u00bb<\/p>\nCambios en las P\u00e1ginas de Adjuntos<\/h3>\n
wp_attachment_pages_enabled<\/code> controla el comportamiento de las p\u00e1ginas de adjuntos.<\/p>\n1<\/code> para los sitios web existentes (p\u00e1ginas de adjuntos habilitadas) y en 0<\/code> para los sitios web nuevos (p\u00e1ginas de adjuntos deshabilitadas) a partir de WordPress 6.4.<\/p>\nwp option set wp_attachment_pages_enabled 0|1<\/code><\/pre>\nwp_attachment_pages_enabled<\/code>.<\/p>\n![\"Cambiar](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/10\/wp-64-wp_attachment_pages_enabled.png\")
Componente ProgressBar<\/h3>\n
![\"El](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/10\/wp-64-progress-bar-component-1.jpg\")