{"id":10015,"date":"2017-07-13T08:47:21","date_gmt":"2017-07-13T15:47:21","guid":{"rendered":"https:\/\/kinsta.com\/es\/?p=10015"},"modified":"2025-02-13T12:36:54","modified_gmt":"2025-02-13T11:36:54","slug":"gutenberg-wordpress-editor","status":"publish","type":"post","link":"https:\/\/kinsta.com\/es\/blog\/gutenberg-wordpress-editor\/","title":{"rendered":"Profundizando en el \u00faltimo editor de WordPress Gutenberg (2026)"},"content":{"rendered":"<p>Cuando el editor de bloques de WordPress, o Gutenberg, <a href=\"https:\/\/kinsta.com\/es\/blog\/wordpress-5-0\/\">se lanz\u00f3 en diciembre de 2018<\/a>, no sab\u00edamos qu\u00e9 esperar. Sin duda, hab\u00edamos tenido mucho tiempo para jugar con su versi\u00f3n beta, pero no pod\u00edamos predecir lo bien que ir\u00eda el lanzamiento real ni las ganas que tendr\u00edan los usuarios y desarrolladores de adoptar el nuevo editor.<\/p>\n<p>Hemos visto c\u00f3mo el editor Gutenberg ha crecido enormemente en los m\u00e1s de dos a\u00f1os que han pasado desde que publicamos por primera vez este post. Ha pasado de ser un producto m\u00ednimo viable (MVP &#8211; minimum viable product) a un proyecto m\u00e1s maduro que se est\u00e1 acercando al objetivo de crear una experiencia unificada de <a href=\"https:\/\/kinsta.com\/es\/blog\/wordpress-5-8\/#full-site-editing-features-in-wordpress-58\">Full Site Editing<\/a> para WordPress.<\/p>\n<p>Para explicar estos cambios, hemos revisado el editor Gutenberg para guiarte a trav\u00e9s de su nueva cara, incluyendo hacia d\u00f3nde ir\u00e1 pr\u00f3ximamente.<\/p>\n<div><\/div><kinsta-auto-toc heading=\"Table of Contents\" exclude=\"last\" list-style=\"arrow\" selector=\"h2\" count-number=\"-1\"><\/kinsta-auto-toc>\n<h2>\u00bfQu\u00e9 es el editor de bloques de Gutenberg?<\/h2>\n<p>Gutenberg, conocido alternativamente como el \u00abeditor de bloques de WordPress\u00bb o simplemente el \u00abeditor de WordPress\u00bb, es el editor de contenido de WordPress introducido en <a href=\"https:\/\/kinsta.com\/es\/blog\/wordpress-5-0\/\">WordPress 5.0<\/a>, lanzado el 6 de diciembre de 2018.<\/p>\n<p><span style=\"font-family: Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;font-size: 1rem\">Si no has escuchado ese t\u00e9rmino, es el editor por defecto que usan todos los sitios de WordPress a menos que lo hayas desactivado espec\u00edficamente. Se parece a esto:<\/span><\/p>\n<figure id=\"attachment_100519\" aria-describedby=\"caption-attachment-100519\" style=\"width: 1024px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-100519 size-large\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/07\/block-editor-interface-1024x880.png\" alt=\"El editor Gutenberg de WordPress.\" width=\"1024\" height=\"880\"><figcaption id=\"caption-attachment-100519\" class=\"wp-caption-text\">El editor Gutenberg de WordPress.<\/figcaption><\/figure>\n<p>La gran diferencia entre el editor de WordPress Gutenberg y el anterior editor de WordPress (ahora llamado \u00abeditor cl\u00e1sico\u00bb o \u00abeditor TinyMCE\u00bb) es un nuevo enfoque basado en bloques para crear contenido.<\/p>\n<p>Con Gutenberg, cada elemento de tu contenido es un bloque, lo que permite manipular f\u00e1cilmente el contenido. Cada p\u00e1rrafo es un bloque, cada imagen es un bloque, cada bot\u00f3n es un bloque&#8230; \u00a1lo entiendes!<\/p>\n<p>Los desarrolladores de terceros tambi\u00e9n pueden crear bloques personalizados, lo que est\u00e1 ayudando a acabar con el asunto de WordPress <a href=\"https:\/\/kinsta.com\/es\/blog\/codigos-cortos-wordpress\/\">con los shortcodes<\/a>. Digamos que quieres <a href=\"https:\/\/kinsta.com\/es\/blog\/plugins-formulario-contacto-wordpress\/\">incrustar un formulario de contacto<\/a>. En lugar de tener que a\u00f1adir un shortcode (por ejemplo, `[your-form-shortcode]`) como hac\u00edas antes, ahora puedes simplemente colocar el bloque de tu plugin de formulario.<\/p>\n<p>Adem\u00e1s, tambi\u00e9n puedes utilizar los bloques para crear dise\u00f1os m\u00e1s complejos, como la configuraci\u00f3n de un dise\u00f1o de varias columnas o la agrupaci\u00f3n de bloques para crear una secci\u00f3n cohesionada.<\/p>\n<p><span style=\"font-family: Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;font-size: 1rem\">A medida que profundicemos en mostrarte c\u00f3mo utilizar el editor de bloques, tendr\u00e1s una mejor idea de c\u00f3mo puedes utilizar los bloques para mejorar tu forma de crear contenido.<\/span><\/p>\n\n<h3>Gutenberg no es solo un editor de contenidos<\/h3>\n<p>Una cosa importante que hay que entender es que el proyecto Gutenberg pretende ser algo m\u00e1s que un editor de contenidos.<\/p>\n<p>En julio de 2021, Gutenberg sigue siendo solo un editor de contenido (en su mayor parte). Pero el objetivo a largo plazo de Gutenberg es avanzar hacia algo llamado <strong>Full Site Editing<\/strong>.<\/p>\n<p>La idea con Full Site Editing es que podr\u00e1s dise\u00f1ar el 100% de tu sitio web usando el editor Gutenberg. Por ejemplo, en lugar de estar limitado a las opciones de cabecera que vienen con tu <a href=\"https:\/\/kinsta.com\/es\/blog\/como-personalizar-tema-wordpress\/\">tema de WordPress<\/a>, podr\u00e1s usar Gutenberg para dise\u00f1ar cabeceras personalizadas usando el editor de bloques.<\/p>\n<p>Este tipo de funcionalidad <em>a\u00fan no <\/em>est\u00e1 disponible, pero est\u00e1 en camino, y tenemos algunos proyectos de \u00abprueba de concepto\u00bb a los que daremos un vistazo al final de este post.<\/p>\n<h2>Ventajas y desventajas de Gutenberg frente a las alternativas populares<\/h2>\n<p>Ahora que hemos podido utilizar el editor de bloques de WordPress durante m\u00e1s de dos a\u00f1os, tenemos una buena idea de algunos de los pros y contras de Gutenberg frente a otras soluciones.<\/p>\n<p>Existen dos alternativas principales que tienes para <a href=\"https:\/\/kinsta.com\/es\/blog\/contenido-perdurable\/\">crear contenido<\/a> en WordPress:<\/p>\n<ul>\n<li><a href=\"https:\/\/kinsta.com\/es\/blog\/editor-wordpress-tinymce\/\">Editor TinyMCE de WordPress<\/a>: Este es el editor cl\u00e1sico que utilizaba WordPress antes de WordPress 5.0.<\/li>\n<li><a href=\"https:\/\/kinsta.com\/es\/blog\/constructores-pagina-wordpress\/\">Plugins de construcci\u00f3n de p\u00e1ginas<\/a>: Se trata de plugins de terceros que a\u00f1aden a WordPress un dise\u00f1o visual de arrastrar y soltar.<\/li>\n<\/ul>\n<p>En general, el editor cl\u00e1sico TinyMCE ofrece una experiencia m\u00e1s reducida, similar a la de un procesador de textos, mientras que los creadores de p\u00e1ginas proporcionan una experiencia de dise\u00f1o visual mucho m\u00e1s flexible, con la funci\u00f3n de arrastrar y soltar.<\/p>\n<p><span style=\"font-family: Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;font-size: 1rem\">Si orden\u00e1ramos los tres editores en funci\u00f3n de su flexibilidad de dise\u00f1o, ser\u00eda algo as\u00ed:<\/span><\/p>\n<p><strong>Editor cl\u00e1sico TinyMCE (menos flexible) &lt; Gutenberg &lt; Page builders (m\u00e1s flexible)<\/strong><\/p>\n<p>Ahora, hablemos de algunos de los pros y contras del editor de bloques Gutenberg vs alternativas.<\/p>\n<h3>Gutenberg vs Editor cl\u00e1sico: Ventajas y desventajas<\/h3>\n<p>Comparemos primero Gutenberg frente al cl\u00e1sico editor TinyMCE.<\/p>\n<p><strong>Pros<\/strong>:<\/p>\n<ul>\n<li>Gutenberg ofrece un fondo de dise\u00f1o m\u00e1s visual<\/li>\n<li>No necesitas usar shortcodes para incrustar contenido &#8211; tienes un sistema de bloques unificado<\/li>\n<\/ul>\n<p><strong>Contras<\/strong>:<\/p>\n<ul>\n<li>Algunas personas encuentran que escribir en Gutenberg es un poco dif\u00edcil de manejar porque cada p\u00e1rrafo es un bloque separado. En el caso de las publicaciones largas, puede ser dif\u00edcil manipular el texto. Quiz\u00e1 prefieras escribir en otro editor y pegar el texto en Gutenberg cuando hayas terminado.<\/li>\n<li>Aunque el rendimiento de Gutenberg ha mejorado significativamente, todav\u00eda puede retrasarse en las publicaciones masivas, algo que es menos probable que ocurra con el editor cl\u00e1sico.<\/li>\n<\/ul>\n<p>Si crees que el editor cl\u00e1sico TinyMCE se adapta mejor a tus necesidades, puedes <a href=\"https:\/\/kinsta.com\/es\/blog\/deshabilitar-gutenberg-wordpress-editor\/\">desactivar por completo el editor Gutenberg<\/a>.<\/p>\n<h3>Gutenberg vs Page Builders: Ventajas y desventajas<\/h3>\n<p>Ahora, echemos un vistazo a c\u00f3mo Gutenberg se compara con los plugins de construcci\u00f3n de p\u00e1ginas de terceros.<\/p>\n<p><strong>Pros<\/strong>:<\/p>\n<ul>\n<li>Gutenberg es una funcionalidad b\u00e1sica, lo que significa que no tienes que preocuparte por los problemas de compatibilidad.<\/li>\n<li>Al ser una funcionalidad b\u00e1sica, todos los desarrolladores pueden incorporar la compatibilidad con Gutenberg en sus plugins, mejorando la compatibilidad.<\/li>\n<li>Gutenberg produce un c\u00f3digo m\u00e1s limpio y ligero. En igualdad de condiciones, un dise\u00f1o construido con Gutenberg suele cargar m\u00e1s r\u00e1pido que el mismo dise\u00f1o hecho con un constructor de p\u00e1ginas.<\/li>\n<\/ul>\n<p><strong>Contras<\/strong>:<\/p>\n<ul>\n<li>Gutenberg no ofrece una edici\u00f3n visual adecuada como un constructor de p\u00e1ginas. Es m\u00e1s accesible que el editor cl\u00e1sico, pero sigue sin ser 100% fluido como un constructor de p\u00e1ginas.<\/li>\n<li>Los creadores de p\u00e1ginas siguen ofreci\u00e9ndole opciones de dise\u00f1o y maquetaci\u00f3n m\u00e1s flexibles.<\/li>\n<li>La mayor\u00eda de los constructores de p\u00e1ginas ofrecen un movimiento de arrastrar y soltar mucho m\u00e1s fluido y flexible.<\/li>\n<\/ul>\n<h3>Reflexiones sobre la comparaci\u00f3n<\/h3>\n<p>Para la mayor\u00eda de los usuarios, Gutenberg da en el clavo en t\u00e9rminos de flexibilidad.<\/p>\n<p>La mayor\u00eda de la gente no necesita la flexibilidad de un <a href=\"https:\/\/kinsta.com\/es\/blog\/constructores-pagina-wordpress\/\">constructor de p\u00e1ginas<\/a> para su contenido, especialmente para las entradas del blog. Pero, al mismo tiempo, es bueno configurar r\u00e1pidamente un dise\u00f1o de varias columnas o insertar un bot\u00f3n, algo que el editor cl\u00e1sico no facilita.<\/p>\n<p>As\u00ed que con eso en mente, vamos a entrar en c\u00f3mo puedes empezar a usar Gutenberg.<\/p>\n<h2>C\u00f3mo usar el editor de bloques de WordPress Gutenberg<\/h2>\n<p>Ahora que sabes un poco sobre el editor de bloques de Gutenberg, vamos a profundizar en c\u00f3mo puedes usarlo para empezar a crear contenido.<\/p>\n<p>Comenzaremos con una mirada introductoria a la interfaz y gradualmente desarrollaremos formas m\u00e1s avanzadas de utilizar el editor y mejorar tus flujos de trabajo.<\/p>\n<h3>La interfaz del editor de bloques de Gutenberg<\/h3>\n<p>Cuando abres el editor, ocultar\u00e1 la barra lateral del panel de control de WordPress y te ofrecer\u00e1 una experiencia de pantalla completa:<\/p>\n<figure id=\"attachment_100519\" aria-describedby=\"caption-attachment-100519\" style=\"width: 1024px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-100519 size-large\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/07\/block-editor-interface-1024x880.png\" alt=\"La interfaz del editor de bloques Gutenberg de WordPress.\" width=\"1024\" height=\"880\"><figcaption id=\"caption-attachment-100519\" class=\"wp-caption-text\">La interfaz del editor de bloques Gutenberg de WordPress.<\/figcaption><\/figure>\n<p>El editor tiene tres partes principales:<\/p>\n<ul>\n<li><strong>El contenido<\/strong>: Tu contenido ocupa la mayor parte de la pantalla. Ver\u00e1s una vista previa de c\u00f3mo se ver\u00e1 en la parte frontal de tu sitio. No es 100% exacta, pero deber\u00edas tener una idea bastante buena del dise\u00f1o final.<\/li>\n<li><strong>Barra de herramientas superior<\/strong>: La barra de herramientas de la parte superior te ayuda a insertar nuevos bloques, deshacer\/rehacer y acceder a otros ajustes vitales<\/li>\n<li><strong>Barra lateral<\/strong>: La barra lateral contiene dos pesta\u00f1as. La pesta\u00f1a de <strong>publicaciones <\/strong>te permite configurar los ajustes a nivel de publicaci\u00f3n como tus categor\u00edas, etiquetas, <a href=\"https:\/\/kinsta.com\/es\/blog\/imagen-destacada-de-wordpress-no-se-muestra\/\">imagen destacada<\/a>, etc. La pesta\u00f1a <strong>Bloque <\/strong>muestra la configuraci\u00f3n del bloque que has seleccionado -m\u00e1s adelante.<\/li>\n<\/ul>\n<p>Para crear una experiencia de escritura m\u00e1s envolvente, puedes ocultar la barra lateral haciendo clic en el icono del \u00abengranaje\u00bb de la esquina superior derecha. Para recuperar la barra lateral, basta con hacer clic de nuevo en el icono del \u00abengranaje\u00bb:<\/p>\n<figure id=\"attachment_100496\" aria-describedby=\"caption-attachment-100496\" style=\"width: 1024px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-100496 size-large\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/07\/hide-sidebar-1024x665.png\" alt=\"Al hacer clic en el icono del \"engranaje\" se mostrar\u00e1\/ocultar\u00e1 la barra lateral.\" width=\"1024\" height=\"665\"><figcaption id=\"caption-attachment-100496\" class=\"wp-caption-text\">Al hacer clic en el icono del \u00abengranaje\u00bb se mostrar\u00e1\/ocultar\u00e1 la barra lateral.<\/figcaption><\/figure>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>Tu editor puede tener un aspecto ligeramente diferente porque los desarrolladores de temas tienen la opci\u00f3n de a\u00f1adir sus estilos al editor para crear una experiencia m\u00e1s visual. Dependiendo de tu tema, podr\u00edas ver <a href=\"https:\/\/kinsta.com\/es\/blog\/fuentes-wordpress\/\">diferentes fuentes<\/a> o colores.<\/p>\n<\/aside>\n\n<p>Por ejemplo, este es el aspecto de la interfaz del editor si se utiliza <a href=\"https:\/\/kinsta.com\/es\/blog\/twenty-twenty-one-tema\/\">el nuevo tema por defecto Twenty-One<\/a>:<\/p>\n<figure id=\"attachment_100518\" aria-describedby=\"caption-attachment-100518\" style=\"width: 1024px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-100518 size-large\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/07\/basic-tutorial-3-interface-themed-1024x686.png\" alt=\"Un ejemplo del tema Twenty Twenty-One aplicando sus estilos al editor de bloques.\" width=\"1024\" height=\"686\"><figcaption id=\"caption-attachment-100518\" class=\"wp-caption-text\">Un ejemplo del tema Twenty Twenty-One aplicando sus estilos al editor de bloques.<\/figcaption><\/figure>\n<h3>A\u00f1adir bloques<\/h3>\n<p>Para a\u00f1adir texto de p\u00e1rrafo normal a tu entrada, solo tienes que hacer clic y escribir. Cada vez que pulses intro, el editor crear\u00e1 autom\u00e1ticamente un nuevo bloque de p\u00e1rrafo.<\/p>\n<p>Para otros tipos de contenido, tendr\u00e1s que insertar un nuevo bloque. Utilizar\u00e1s los bloques para las im\u00e1genes, los botones, las <a href=\"https:\/\/kinsta.com\/es\/blog\/integrar-incrustar-youtube-video-wordpress\/\">incrustaciones de v\u00eddeo<\/a>, etc.<\/p>\n<p>Para a\u00f1adir un nuevo bloque, puedes hacer clic en uno de los iconos \u00abm\u00e1s\u00bb de la interfaz. Es el icono principal del insertador de bloques en la esquina superior izquierda, pero tambi\u00e9n ver\u00e1s otros iconos dentro de la interfaz que abren una interfaz m\u00e1s peque\u00f1a del insertador de bloques:<\/p>\n<figure id=\"attachment_100497\" aria-describedby=\"caption-attachment-100497\" style=\"width: 1024px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-100497 size-large\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/07\/insert-block-options-1024x785.png\" alt=\"Los iconos \"plus\" le permiten insertar un nuevo bloque.\" width=\"1024\" height=\"785\"><figcaption id=\"caption-attachment-100497\" class=\"wp-caption-text\">Los iconos \u00abm\u00e1s\u00bb le permiten insertar un nuevo bloque.<\/figcaption><\/figure>\n<p>Para empezar, sit\u00faa el cursor del rat\u00f3n donde quieras insertar el nuevo bloque. Por ejemplo, para a\u00f1adir un nuevo bloque debajo del bot\u00f3n, puede hacer clic debajo del bot\u00f3n y luego hacer clic en el icono <strong>+<\/strong>.<\/p>\n<p>Deber\u00edas ver un panel lateral que muestra todos los bloques disponibles, divididos en diferentes categor\u00edas. Puedes buscar un bloque espec\u00edfico o simplemente elegir una opci\u00f3n de la lista. Cuando pases el rat\u00f3n por encima de un bloque, ver\u00e1s una descripci\u00f3n de lo que hace y una vista previa.<\/p>\n<p>Para insertar el bloque, basta con hacer clic en \u00e9l. Por ejemplo, para insertar una <a href=\"https:\/\/kinsta.com\/es\/blog\/optimizar-imagenes-para-la-web\/\">imagen<\/a> normal, basta con hacer clic en el bloque de imagen:<\/p>\n<figure id=\"attachment_100503\" aria-describedby=\"caption-attachment-100503\" style=\"width: 1024px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-100503 size-large\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/07\/main-block-inserter-1024x849.png\" alt=\"Haga clic en el tipo de bloque que desea insertar.\" width=\"1024\" height=\"849\"><figcaption id=\"caption-attachment-100503\" class=\"wp-caption-text\">Haz clic en el tipo de bloque que deseas insertar.<\/figcaption><\/figure>\n<p>A continuaci\u00f3n, puedes seguir las indicaciones para cargar o elegir una imagen existente de tu <a href=\"https:\/\/kinsta.com\/es\/blog\/biblioteca-multimedia-wordpress\/\">biblioteca multimedia<\/a>.<\/p>\n<h3>Opciones de formato esenciales<\/h3>\n<p>Para hacer elecciones b\u00e1sicas de formato para tus bloques, tendr\u00e1s una barra de herramientas flotante que aparece cuando haces clic en cualquier bloque.<\/p>\n<p>Si est\u00e1s formateando un texto normal, aqu\u00ed es donde puedes hacerlo:<\/p>\n<ul>\n<li>A\u00f1adir negrita o cursiva<\/li>\n<li>Insertar enlaces<\/li>\n<li>Cambiar las alineaciones<\/li>\n<li>A\u00f1adir formato, como c\u00f3digo en l\u00ednea, tachado y suscripci\u00f3n<\/li>\n<\/ul>\n<figure id=\"attachment_100528\" aria-describedby=\"caption-attachment-100528\" style=\"width: 1024px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-100528 size-large\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/07\/floating-formatting-toolbar-1024x650.png\" alt=\"La barra de herramientas flotante le permite hacer elecciones b\u00e1sicas de formato.\" width=\"1024\" height=\"650\"><figcaption id=\"caption-attachment-100528\" class=\"wp-caption-text\">La barra de herramientas flotante te permite hacer elecciones b\u00e1sicas de formato.<\/figcaption><\/figure>\n<p>Por ejemplo, digamos que quieres insertar un enlace en tu contenido. Primero debes seleccionar el texto espec\u00edfico que quieres enlazar &#8211; en nuestro ejemplo, es \u00abPara otros tipos de contenido\u00bb. A continuaci\u00f3n, puedes hacer clic en el icono de enlace de la barra de herramientas para abrir las opciones de inserci\u00f3n de enlaces:<\/p>\n<figure id=\"attachment_100500\" aria-describedby=\"caption-attachment-100500\" style=\"width: 1024px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-100500 size-large\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/07\/insert-link-1024x608.png\" alt=\"Insertar un enlace en el editor de bloques de Gutenberg WordPress.\" width=\"1024\" height=\"608\"><figcaption id=\"caption-attachment-100500\" class=\"wp-caption-text\">Insertar un enlace en el editor de bloques de Gutenberg WordPress.<\/figcaption><\/figure>\n<h3>Configuraci\u00f3n de los ajustes avanzados de los bloques<\/h3>\n<p>Todos los bloques que insertas vienen con ajustes adicionales en la barra lateral. Algunos bloques pueden ofrecerte unos pocos ajustes, mientras que otros te dan varias opciones para controlar el <a href=\"https:\/\/kinsta.com\/es\/blog\/mejores-practicas-diseno-web\/\">dise\u00f1o<\/a>, la disposici\u00f3n, la funcionalidad, etc.<\/p>\n<p>Para abrir la configuraci\u00f3n de un bloque, haz clic en el bloque en el editor para seleccionarlo. A continuaci\u00f3n, ve a la pesta\u00f1a <strong>Bloque <\/strong>de la barra lateral para ver tu configuraci\u00f3n.<\/p>\n<p>A continuaci\u00f3n, puedes ver la configuraci\u00f3n del bloque de botones, que es uno de los bloques m\u00e1s flexibles. Puedes cambiar el color, hacerlo m\u00e1s ancho y mucho m\u00e1s.<\/p>\n<p>A medida que vayas realizando cambios en la configuraci\u00f3n de un bloque, los ver\u00e1s reflejados al instante en el editor.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-100521 size-large\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/07\/block-settings-button-1024x982.png\" alt=\"Puede acceder a la configuraci\u00f3n de un bloque en la barra lateral.\" width=\"1024\" height=\"982\"><\/p>\n<p>Una vez m\u00e1s, cada bloque tendr\u00e1 ajustes que son \u00fanicos para ese bloque. Por ejemplo, si abres la configuraci\u00f3n para el texto de p\u00e1rrafo normal, solo obtendr\u00e1s algunas opciones b\u00e1sicas de <a href=\"https:\/\/kinsta.com\/es\/blog\/fuentes-modernas\/\">tipograf\u00eda<\/a> y color. A continuaci\u00f3n, puedes ver que pudimos aplicar un fondo de color para resaltar alg\u00fan texto:<\/p>\n<figure id=\"attachment_100507\" aria-describedby=\"caption-attachment-100507\" style=\"width: 1024px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-100507 size-large\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/07\/paragraph-text-settings-1024x877.png\" alt=\"La configuraci\u00f3n del bloque para un texto de p\u00e1rrafo normal.\" width=\"1024\" height=\"877\"><figcaption id=\"caption-attachment-100507\" class=\"wp-caption-text\">La configuraci\u00f3n del bloque para un texto de p\u00e1rrafo normal.<\/figcaption><\/figure>\n<h3>Reorganizaci\u00f3n de bloques<\/h3>\n<p>Adem\u00e1s de usar simplemente copiar y pegar (que puedes hacer para el texto como cualquier otro editor), Gutenberg te da dos formas principales de reorganizar los bloques.<\/p>\n<p>En primer lugar, si quiere mover un bloque hacia arriba o hacia abajo unas cuantas posiciones, puede utilizar las flechas hacia arriba o hacia abajo de la barra de herramientas flotante.<\/p>\n<p>Para realizar movimientos extensos, puede utilizar la funci\u00f3n de arrastrar y soltar. Para arrastrar y soltar un bloque, tienes que hacer clic en el icono de los \u00abseis puntos\u00bb a la izquierda de las flechas.<\/p>\n<p>Una vez que hagas clic y mantenga el rat\u00f3n sobre ese icono, podr\u00e1s arrastrar el bloque a cualquier lugar de la p\u00e1gina:<\/p>\n<figure id=\"attachment_100511\" aria-describedby=\"caption-attachment-100511\" style=\"width: 1024px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-100511 size-large\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/07\/rearrange-blocks-1024x622.png\" alt=\"Puedes reorganizar los bloques utilizando las flechas o arrastrando y soltando.\" width=\"1024\" height=\"622\"><figcaption id=\"caption-attachment-100511\" class=\"wp-caption-text\">Puedes reorganizar los bloques utilizando las flechas o arrastrando y soltando.<\/figcaption><\/figure>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-important\">\n            <h3>Important<\/h3>\n        <p>Copiar y pegar puede ser complicado para el contenido no textual. Un poco m\u00e1s adelante en este post, te mostraremos c\u00f3mo puedes copiar y pegar bloques enteros conservando sus estilos.<\/p>\n<\/aside>\n\n<h3>Incorporaci\u00f3n de contenidos de otras fuentes<\/h3>\n<p>Gutenberg viene con bloques dedicados a incrustar contenido de fuentes de terceros como YouTube, Vimeo, Soundcloud, etc. Puedes encontrar todas estas opciones en la secci\u00f3n <strong>Embeds <\/strong>del insertador de bloques.<\/p>\n<p>Por ejemplo, para <a href=\"https:\/\/kinsta.com\/es\/blog\/integrar-incrustar-youtube-video-wordpress\/\">incrustar un v\u00eddeo de YouTube<\/a>, todo lo que tienes que hacer es<\/p>\n<ol>\n<li>A\u00f1ade el bloque dedicado a YouTube.<\/li>\n<li>Pega la URL directa del v\u00eddeo.<\/li>\n<li>Haz clic en <strong>Embed (Incrustar)<\/strong>.<\/li>\n<\/ol>\n<figure id=\"attachment_100527\" aria-describedby=\"caption-attachment-100527\" style=\"width: 1024px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-100527 size-large\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/07\/embed-youtube-video-1024x821.png\" alt=\"Incrustar un v\u00eddeo de YouTube en Gutenberg.\" width=\"1024\" height=\"821\"><figcaption id=\"caption-attachment-100527\" class=\"wp-caption-text\">Incrustar un v\u00eddeo de YouTube en Gutenberg.<\/figcaption><\/figure>\n<p>A continuaci\u00f3n, deber\u00eda ver una vista previa del v\u00eddeo incrustado en el editor.<\/p>\n<h3>Creaci\u00f3n de dise\u00f1os de varias columnas o agrupados<\/h3>\n<p>Como hemos mencionado anteriormente, una de las ventajas significativas del editor de bloques sobre el antiguo editor TinyMCE es que puedes crear dise\u00f1os m\u00e1s complejos sin necesidad de depender de <a href=\"https:\/\/kinsta.com\/es\/blog\/editar-codigo-wordpress\/#css\">c\u00f3digo personalizado<\/a> o shortcodes.<\/p>\n<p>El editor de bloques viene con dos bloques por defecto para ayudarle a hacer esto:<\/p>\n<ul>\n<li><strong>Columnas<\/strong>: Cree un dise\u00f1o de varias columnas.<\/li>\n<li><strong>Grupos: <\/strong>Agrupa varios bloques. Por ejemplo, puede utilizarlo para establecer un color de fondo para toda una secci\u00f3n que se muestra detr\u00e1s de numerosos bloques.<\/li>\n<\/ul>\n<p>Ambos bloques funcionan seg\u00fan el principio de \u00abanidaci\u00f3n\u00bb de bloques, lo que significa que se colocan uno o m\u00e1s bloques <em>dentro <\/em>de otro.<\/p>\n<p>Te mostraremos un ejemplo utilizando el bloque de columnas, pero el mismo principio b\u00e1sico se aplica al bloque de grupo.<\/p>\n<p>Digamos que quieres crear un dise\u00f1o de dos columnas donde la columna de la izquierda tiene un texto de p\u00e1rrafo normal, y la columna de la derecha tiene un bot\u00f3n.<\/p>\n<p><span style=\"font-family: Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;font-size: 1rem\">Para empezar, utiliza el insertador de bloques para a\u00f1adir el bloque de columnas. Esto mostrar\u00e1 un aviso en el que puedes elegir el dise\u00f1o que prefieras:<\/span><\/p>\n<figure id=\"attachment_100523\" aria-describedby=\"caption-attachment-100523\" style=\"width: 1024px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-100523 size-large\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/07\/choose-columns-layout-1024x631.png\" alt=\"Elija la estructura y la proporci\u00f3n de las columnas.\" width=\"1024\" height=\"631\"><figcaption id=\"caption-attachment-100523\" class=\"wp-caption-text\">Elige la estructura y la proporci\u00f3n de las columnas.<\/figcaption><\/figure>\n<p>Elegiremos un dise\u00f1o de dos columnas 50\/50 para este ejemplo. Con eso, ver\u00e1s dos cajas de igual tama\u00f1o con iconos <strong>+<\/strong> dentro. Para insertar contenido, puedes hacer clic en ese icono <strong>+ <\/strong>para abrir la interfaz del insertador de bloques:<\/p>\n<figure id=\"attachment_100498\" aria-describedby=\"caption-attachment-100498\" style=\"width: 1024px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-100498 size-large\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/07\/insert-content-in-columns-1024x685.png\" alt=\"C\u00f3mo a\u00f1adir contenido a las columnas.\" width=\"1024\" height=\"685\"><figcaption id=\"caption-attachment-100498\" class=\"wp-caption-text\">C\u00f3mo a\u00f1adir contenido a las columnas.<\/figcaption><\/figure>\n<p>Una vez que hayas a\u00f1adido el primer bloque a una columna, puedes pulsar el icono <strong>+ <\/strong>para insertar bloques adicionales. O bien, puedes arrastrar y soltar un bloque desde fuera de la estructura de la columna a la misma.<\/p>\n<h2>10 consejos \u00fatiles de Gutenberg para trabajar de forma m\u00e1s productiva<\/h2>\n<p>Ahora que tienes una comprensi\u00f3n b\u00e1sica de c\u00f3mo funciona Gutenberg, vamos a repasar algunos consejos y trucos valiosos que te ayudar\u00e1n a utilizar el editor de bloques de forma m\u00e1s eficaz.<\/p>\n<h3><strong>1. Utiliza <\/strong><code><strong>\/<\/strong><\/code> <strong>(barra diagonal) para insertar r\u00e1pidamente los bloques<\/strong><\/h3>\n<p>Si necesitas insertar muchos bloques, abrir manualmente el insertador de bloques puede resultar un poco tedioso. Afortunadamente, una vez que empieces a aprender los nombres de los bloques m\u00e1s comunes que necesitas usar, hay una forma mucho m\u00e1s r\u00e1pida de insertar bloques usando s\u00f3lo el teclado: <code><strong>\/<\/strong><\/code> (barra diagonal).<\/p>\n<p>Si pulsas \u00abIntro\u00bb para iniciar un nuevo bloque de p\u00e1rrafo, puede insertar r\u00e1pidamente un bloque escribiendo una barra inclinada, seguida del nombre del bloque que desea insertar.<\/p>\n<p>Cuando empieces a escribir, ver\u00e1s una lista de todos los bloques que coinciden con tu consulta. A continuaci\u00f3n, puedes utilizar las flechas del teclado para navegar por los bloques y pulsar \u00abIntro\u00bb para seleccionar el bloque que quieres insertar.<\/p>\n<p>Este es un ejemplo del uso de quick-insert para a\u00f1adir un bloque de imagen:<\/p>\n<figure id=\"attachment_100510\" aria-describedby=\"caption-attachment-100510\" style=\"width: 1760px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-100510 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/07\/quick-insert-block.gif\" alt=\"C\u00f3mo utilizar la barra diagonal para insertar r\u00e1pidamente los bloques.\" width=\"1760\" height=\"1205\"><figcaption id=\"caption-attachment-100510\" class=\"wp-caption-text\">C\u00f3mo utilizar la barra diagonal para insertar r\u00e1pidamente los bloques.<\/figcaption><\/figure>\n<h3>2. Inserta im\u00e1genes arrastr\u00e1ndolas desde el escritorio<\/h3>\n<p>Si vas a insertar muchas im\u00e1genes, el editor de bloques incluye otra funci\u00f3n que te permite ahorrar tiempo y eliminar la necesidad de a\u00f1adir un bloque de im\u00e1genes antes de <a href=\"https:\/\/kinsta.com\/es\/blog\/subir-archivos-de-carga-masiva-ftp\/\">subirlas<\/a>.<\/p>\n<p>En su lugar, solo tienes que arrastrar el archivo de imagen directamente desde tu escritorio hasta el lugar donde quieras a\u00f1adirlo a tu publicaci\u00f3n. Cuando arrastres el archivo de imagen sobre el contenido de tu sitio, ver\u00e1s una l\u00ednea azul que marca d\u00f3nde aparece la imagen.<\/p>\n<p>Una vez que libere el archivo, WordPress lo subir\u00e1 autom\u00e1ticamente e insertar\u00e1 un bloque de imagen en la ubicaci\u00f3n adecuada:<\/p>\n<figure id=\"attachment_100515\" aria-describedby=\"caption-attachment-100515\" style=\"width: 1024px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-100515 size-large\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/07\/upload-images-drag-from-desktop-1024x595.png\" alt=\"Puedes insertar im\u00e1genes arrastrando el archivo desde tu escritorio.\" width=\"1024\" height=\"595\"><figcaption id=\"caption-attachment-100515\" class=\"wp-caption-text\">Puedes insertar im\u00e1genes arrastrando el archivo desde tu escritorio.<\/figcaption><\/figure>\n<h3>3. Utiliza un poco de formato Markdown<\/h3>\n<p>Si eres un fan\u00e1tico de la sintaxis Markdown para la creaci\u00f3n de contenidos, te alegrar\u00e1 saber que el editor de bloques admite un uso limitado de <a href=\"https:\/\/kinsta.com\/es\/blog\/editores-markdown\/\">Markdown<\/a>, principalmente para los encabezados.<\/p>\n<p><span style=\"font-family: Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;font-size: 1rem\">Por ejemplo, si quieres insertar un bloque de encabezamiento con una etiqueta H3, puedes escribir tres hashtags (`###`) seguidos de la barra espaciadora. El editor lo convertir\u00e1 autom\u00e1ticamente en un H3, y entonces podr\u00e1s seguir escribiendo el t\u00edtulo:<\/span><\/p>\n<figure id=\"attachment_100504\" aria-describedby=\"caption-attachment-100504\" style=\"width: 1749px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-100504 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/07\/markdown-support.gif\" alt=\"El editor de bloques admite la sintaxis b\u00e1sica de Markdown para los encabezados.\" width=\"1749\" height=\"1008\"><figcaption id=\"caption-attachment-100504\" class=\"wp-caption-text\">El editor de bloques admite la sintaxis b\u00e1sica de Markdown para los encabezados.<\/figcaption><\/figure>\n<p>Supongamos que quieres un soporte de Markdown a\u00fan m\u00e1s avanzado. En ese caso, puedes instalar un plugin gratuito como <a href=\"https:\/\/wordpress.org\/plugins\/block-options\/\">EditorsKit<\/a>, que tambi\u00e9n te permite utilizar Markdown para las negritas, cursivas y tachados -hablaremos m\u00e1s sobre los plugins de Gutenberg un poco m\u00e1s adelante en este post.<\/p>\n<h3>4. Fija la barra de herramientas de formato en la parte superior del editor<\/h3>\n<p>Si no te gusta c\u00f3mo la herramienta de formato \u00abflota\u00bb por encima de un bloque, el editor de bloques incluye una funci\u00f3n que te permite fijarla debajo de la barra de herramientas superior:<\/p>\n<figure id=\"attachment_100508\" aria-describedby=\"caption-attachment-100508\" style=\"width: 1024px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-100508 size-large\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/07\/pin-top-toolbar-1024x769.png\" alt=\"Puedes fijar la barra de herramientas de formato en la parte superior.\" width=\"1024\" height=\"769\"><figcaption id=\"caption-attachment-100508\" class=\"wp-caption-text\">Puedes fijar la barra de herramientas de formato en la parte superior.<\/figcaption><\/figure>\n<h3>5. Copia un bloque y toda su configuraci\u00f3n<\/h3>\n<p>El editor de bloques te permite copiar y pegar texto como lo har\u00edas en cualquier editor: \u00ab<strong>Ctrl <\/strong>+ <strong>C<\/strong>\u00bb o haciendo clic con el bot\u00f3n derecho del rat\u00f3n y eligiendo <strong>Copiar<\/strong>.<\/p>\n<p>Sin embargo, no puedes utilizar este m\u00e9todo para copiar y pegar un bloque entero conservando su configuraci\u00f3n. En su lugar, tendr\u00e1s que hacerlo:<\/p>\n<ol>\n<li>Selecciona el bloque.<\/li>\n<li>Haz clic en el icono de los tres puntos de la barra de herramientas del bloque.<\/li>\n<li>Selecciona <strong>Copiar<\/strong>.<\/li>\n<\/ol>\n<figure id=\"attachment_100524\" aria-describedby=\"caption-attachment-100524\" style=\"width: 1024px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-100524 size-large\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/07\/copy-block-settings-1024x860.png\" alt=\"C\u00f3mo copiar un bloque con todos sus ajustes.\" width=\"1024\" height=\"860\"><figcaption id=\"caption-attachment-100524\" class=\"wp-caption-text\">C\u00f3mo copiar un bloque con todos sus ajustes.<\/figcaption><\/figure>\n<p>Una vez que haya copiado el bloque de esta manera, puedes pegarlo como lo har\u00eda normalmente, es decir, con \u00ab<strong>Ctrl <\/strong>+ <strong>V<\/strong>\u00bb o haciendo clic con el bot\u00f3n derecho del rat\u00f3n y eligiendo <strong>Pegar<\/strong>.<\/p>\n<h3>6. Seleccionaa r\u00e1pidamente el bloque adecuado mediante la vista de lista de bloques<\/h3>\n<p>Para la mayor\u00eda de los bloques, basta con hacer clic en el editor para seleccionar el bloque. Sin embargo, esto puede resultar complicado si empiezas a utilizar bloques \u00abanidados\u00bb, como insertar bloques dentro de las columnas o agrupar bloques.<\/p>\n<p>El editor incluye una opci\u00f3n de vista de lista, que puede abrir desde la barra de herramientas superior para tener en cuenta esto. <a href=\"https:\/\/kinsta.com\/es\/blog\/wordpress-5-8\/#persistent-list-view-in-the-post-editor\">La vista de lista<\/a> le mostrar\u00e1 todos los bloques, incluidos los bloques anidados con sangr\u00eda.<\/p>\n<p>Puede seleccionar un bloque haciendo clic en \u00e9l en la lista, y el editor tambi\u00e9n resaltar\u00e1 el bloque cuando pase el rat\u00f3n por encima de \u00e9l en la lista.<\/p>\n<p>En el ejemplo siguiente, se puede ver:<\/p>\n<ul>\n<li>El bloque de columnas principales<\/li>\n<li>Bloques anidados para cada columna<\/li>\n<li>Un bloque de grupo anidado dentro de una columna<\/li>\n<li>Un bloque de encabezamiento anidado dentro del bloque de Grupo<\/li>\n<\/ul>\n<p>Para seleccionar el bloque padre principal, basta con abrir la vista de lista y seleccionarlo de la lista:<\/p>\n<figure id=\"attachment_100502\" aria-describedby=\"caption-attachment-100502\" style=\"width: 1024px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-100502 size-large\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/07\/list-view-1024x712.png\" alt=\"La apertura de la vista de lista le ayuda a navegar por los bloques anidados.\" width=\"1024\" height=\"712\"><figcaption id=\"caption-attachment-100502\" class=\"wp-caption-text\">La apertura de la vista de lista le ayuda a navegar por los bloques anidados.<\/figcaption><\/figure>\n<h3>7. Abre el editor de c\u00f3digo (para bloques individuales o entradas completas)<\/h3>\n<p>Una de las ventajas del editor de bloques de Gutenberg es que permite configurar muchos estilos y opciones de dise\u00f1o sin recurrir al c\u00f3digo. Sin embargo, todav\u00eda puede haber algunas situaciones en las que se quiera <a href=\"https:\/\/kinsta.com\/es\/blog\/editar-codigo-wordpress\/\">acceder al c\u00f3digo directamente<\/a> para los usuarios m\u00e1s avanzados.<\/p>\n<p>Para ayudarte a hacerlo, el editor Gutenberg viene con diferentes opciones.<\/p>\n<p>En primer lugar, puedes editar el c\u00f3digo de un bloque individual, lo que resulta \u00fatil para realizar peque\u00f1os ajustes como la inserci\u00f3n de una clase CSS. Para ello, abre el men\u00fa desplegable de la barra de herramientas del bloque y selecciona <strong>Editar como HTML<\/strong>:<\/p>\n<figure id=\"attachment_100505\" aria-describedby=\"caption-attachment-100505\" style=\"width: 1024px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-100505 size-large\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/07\/open-html-editor-1024x762.png\" alt=\"C\u00f3mo editar un solo bloque como HTML.\" width=\"1024\" height=\"762\"><figcaption id=\"caption-attachment-100505\" class=\"wp-caption-text\">C\u00f3mo editar un solo bloque como HTML.<\/figcaption><\/figure>\n<p>Al seleccionar esta opci\u00f3n, la vista previa visual se convertir\u00e1 en un editor de c\u00f3digo solo para ese bloque, sin afectar a las vistas previas visuales de otros bloques:<\/p>\n<figure id=\"attachment_100506\" aria-describedby=\"caption-attachment-100506\" style=\"width: 1024px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-100506 size-large\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/07\/open-html-editor-2-1024x513.png\" alt=\"El editor HTML para un solo bloque.\" width=\"1024\" height=\"513\"><figcaption id=\"caption-attachment-100506\" class=\"wp-caption-text\">El editor HTML para un solo bloque.<\/figcaption><\/figure>\n<p>En segundo lugar, el editor incluye un bloque <a href=\"https:\/\/kinsta.com\/es\/blog\/html-vs-html5\/\">HTML<\/a> personalizado que puedes utilizar para incrustar fragmentos de HTML completos. Todo lo que tienes que hacer es a\u00f1adir el bloque y pegar tu c\u00f3digo.<\/p>\n<p>Por \u00faltimo, tambi\u00e9n puede abrir el editor de c\u00f3digo completo para todo el documento utilizando el men\u00fa desplegable de la esquina superior derecha o un atajo de teclado: <strong>Ctrl <\/strong>+ <strong>Shift <\/strong>+ <strong>Alt <\/strong>+ <strong>M<\/strong>.<\/p>\n<p>Ten en cuenta que, cuando abras el editor de c\u00f3digo completo, tambi\u00e9n ver\u00e1s el marcado de formato de bloque de Gutenberg, por lo que puede ser un poco complicado navegar:<\/p>\n<figure id=\"attachment_100529\" aria-describedby=\"caption-attachment-100529\" style=\"width: 1024px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-100529 size-large\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/07\/full-code-editor-1024x974.png\" alt=\"El editor de c\u00f3digo completo, que incluye el marcado de bloques.\" width=\"1024\" height=\"974\"><figcaption id=\"caption-attachment-100529\" class=\"wp-caption-text\">El editor de c\u00f3digo completo, que incluye el marcado de bloques.<\/figcaption><\/figure>\n<h3>8. Aprende los atajos de teclado<\/h3>\n<p>El editor de bloques incluye un mont\u00f3n de <a href=\"https:\/\/kinsta.com\/es\/blog\/wordpress-atajos-de-teclado\/\">atajos de teclado<\/a> que te permiten realizar acciones comunes. Merece la pena dedicar tiempo a aprenderlos porque te har\u00e1n m\u00e1s productivo y te ahorrar\u00e1n muchos clics repetitivos del rat\u00f3n.<\/p>\n<p>Estos son algunos de los atajos m\u00e1s comunes &#8211; si est\u00e1s en un Mac, querr\u00e1s cambiar \u00abCtrl\u00bb por \u00abComando (\u2318)\u00bb:<\/p>\n<ul>\n<li>Abrir la vista de lista de bloques &#8211; <strong>Shift <\/strong>+ <strong>Alt <\/strong>+ <strong>O<\/strong><\/li>\n<li>Guardar los cambios &#8211; <strong>Ctrl <\/strong>+ <strong>S<\/strong><\/li>\n<li>Deshacer los \u00faltimos cambios &#8211; <strong>Ctrl <\/strong>+ <strong>Z<\/strong><\/li>\n<li>Rehacer el \u00faltimo deshecho &#8211; <strong>Ctrl <\/strong>+ <strong>Shift <\/strong>+ <strong>Z<\/strong><\/li>\n<li>Duplicar los bloques seleccionados &#8211; <strong>Ctrl <\/strong>+ <strong>Shift <\/strong>+ <strong>D<\/strong><\/li>\n<li>Suprimir el\/los bloque\/s seleccionado\/s &#8211; <strong>Shift <\/strong>+ <strong>Alt <\/strong>+ <strong>Z<\/strong><\/li>\n<li>Insertar un nuevo bloque antes de los bloques seleccionados &#8211; <strong>Ctrl <\/strong>+ <strong>Alt <\/strong>+ <strong>T<\/strong><\/li>\n<li>Insertar un nuevo bloque despu\u00e9s de los bloques seleccionados &#8211; <strong>Ctrl <\/strong>+ <strong>Alt <\/strong>+ <strong>Y<\/strong><\/li>\n<\/ul>\n<p>Tambi\u00e9n puedes abrir una hoja de trucos completa con todos los atajos de teclado cuando est\u00e9s en el editor. Para ello, puedes utilizar un atajo de teclado <strong>-Shift + Alt + H<\/strong>&#8211; o hacer clic en el icono del men\u00fa de los \u00abtres puntos verticales\u00bb (<strong>\u22ee<\/strong>) en la esquina superior derecha del editor y elegir <strong>Atajos de teclado <\/strong>en el men\u00fa desplegable.<\/p>\n<h3>9. Limpia tu interfaz ocultando los bloques<\/h3>\n<p>El editor de bloques a\u00f1ade muchos bloques por defecto, pero probablemente no los utilices todos. Para ayudarte a limpiar la interfaz, el editor incluye una funci\u00f3n llamada <strong>Gestor de bloques <\/strong>que te permite desactivar y ocultar los bloques que no est\u00e9s utilizando:<\/p>\n<figure id=\"attachment_100520\" aria-describedby=\"caption-attachment-100520\" style=\"width: 1024px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-100520 size-large\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/07\/block-manager-1024x962.png\" alt=\"Puede desmarcar los bloques para ocultarlos del insertador de bloques.\" width=\"1024\" height=\"962\"><figcaption id=\"caption-attachment-100520\" class=\"wp-caption-text\">Puede desmarcar los bloques para ocultarlos del insertador de bloques.<\/figcaption><\/figure>\n<h3>10. A\u00f1ade anclajes para los enlaces de salto<\/h3>\n<p>Finalmente, nuestro \u00faltimo consejo \u00fatil es la funci\u00f3n de enlaces de anclaje HTML del editor de bloques, que permite <a href=\"https:\/\/kinsta.com\/es\/blog\/enlaces-ancla\/\">crear enlaces de salto a secciones espec\u00edficas de su contenido<\/a> (por ejemplo, para un \u00edndice).<\/p>\n<p>En el editor cl\u00e1sico, ten\u00edas que a\u00f1adir anclas HTML usando c\u00f3digo manualmente. Pero con Gutenberg, solo tienes que introducir el texto de tu enlace de salto en el campo de <strong>anclaje HTML<\/strong> del \u00e1rea <strong>avanzada <\/strong>de la configuraci\u00f3n de cualquier bloque:<\/p>\n<figure id=\"attachment_100517\" aria-describedby=\"caption-attachment-100517\" style=\"width: 1024px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-100517 size-large\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/07\/anchor-text-1024x758.png\" alt=\"C\u00f3mo establecer un texto de anclaje personalizado.\" width=\"1024\" height=\"758\"><figcaption id=\"caption-attachment-100517\" class=\"wp-caption-text\">C\u00f3mo establecer un texto de anclaje personalizado.<\/figcaption><\/figure>\n<h2>Profundizando en conceptos m\u00e1s avanzados del editor de bloques<\/h2>\n<p>En este punto, hemos cubierto bastante sobre c\u00f3mo funciona el editor y algunos consejos para trabajar m\u00e1s eficientemente. Ahora que tienes esos conocimientos b\u00e1sicos, vamos a repasar dos t\u00e1cticas un poco m\u00e1s avanzadas:<\/p>\n<ul>\n<li>Patrones de bloques<\/li>\n<li>Bloques reutilizables<\/li>\n<\/ul>\n<h3>Patrones de bloques<\/h3>\n<p>Un <a href=\"https:\/\/kinsta.com\/es\/blog\/wordpress-5-5\/#block-patterns\">patr\u00f3n de bloques<\/a> es esencialmente una plantilla. Es una colecci\u00f3n de bloques dispuestos en un dise\u00f1o. Puede ser algo menor, como una disposici\u00f3n de botones. Incluso puede ser una plantilla para una secci\u00f3n entera, o incluso para una p\u00e1gina entera.<\/p>\n<p>WordPress viene con sus propios patrones de bloques incorporados, y los desarrolladores de plugins de terceros tambi\u00e9n pueden a\u00f1adir los suyos propios.<\/p>\n<p><span style=\"font-family: Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;font-size: 1rem\">Puedes insertar nuevos patrones desde la pesta\u00f1a <strong>Patrones <\/strong>del insertador de bloques principal:<\/span><\/p>\n<figure id=\"attachment_100516\" aria-describedby=\"caption-attachment-100516\" style=\"width: 1024px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-100516 size-large\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/07\/add-block-patterns-1024x898.png\" alt=\"C\u00f3mo insertar un patr\u00f3n de bloques.\" width=\"1024\" height=\"898\"><figcaption id=\"caption-attachment-100516\" class=\"wp-caption-text\">C\u00f3mo insertar un patr\u00f3n de bloques.<\/figcaption><\/figure>\n<p>Una vez que hayas insertado el patr\u00f3n de bloques, podr\u00e1 editar completamente todos los bloques que componen ese patr\u00f3n, igual que si hubiera a\u00f1adido los bloques manualmente.<\/p>\n<p>Actualmente, el editor central de Gutenberg no te permite crear tus patrones de bloques (a menos que sepas codificar). Sin embargo, puedes solucionar esto con el <a href=\"https:\/\/wordpress.org\/plugins\/block-pattern-builder\/\">plugin gratuito Block Pattern Builder<\/a> de Justin Tadlock. Con el plugin activado, puedes crear tus dise\u00f1os usando Gutenberg y luego guardar ese dise\u00f1o como un patr\u00f3n.<\/p>\n<p>Para empezar, dir\u00edgete a <strong>Patrones de bloques <\/strong>&gt; <strong>A\u00f1adir nuevo <\/strong>para crear un nuevo patr\u00f3n utilizando el editor. Aseg\u00farate de publicarlo cuando hayas terminado:<\/p>\n<figure id=\"attachment_100525\" aria-describedby=\"caption-attachment-100525\" style=\"width: 1024px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-100525 size-large\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/07\/create-block-pattern-1024x593.png\" alt=\"Creaci\u00f3n de su patr\u00f3n de bloques personalizado.\" width=\"1024\" height=\"593\"><figcaption id=\"caption-attachment-100525\" class=\"wp-caption-text\">Creaci\u00f3n de tu patr\u00f3n de bloques personalizado.<\/figcaption><\/figure>\n<p>Una vez hecho esto, podr\u00e1s insertar tu patr\u00f3n de bloque como cualquier otro &#8211; b\u00fascalo en la secci\u00f3n <strong>Sin categor\u00eda<\/strong>:<\/p>\n<figure id=\"attachment_100499\" aria-describedby=\"caption-attachment-100499\" style=\"width: 1024px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-100499 size-large\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/07\/inserting-custom-block-pattern-1024x621.png\" alt=\"Insertar el patr\u00f3n de bloques personalizado que ha creado.\" width=\"1024\" height=\"621\"><figcaption id=\"caption-attachment-100499\" class=\"wp-caption-text\">Insertar el patr\u00f3n de bloques personalizado que ha creado.<\/figcaption><\/figure>\n<p>El equipo del n\u00facleo de WordPress tambi\u00e9n ha lanzado una <a href=\"https:\/\/wordpress.org\/patterns\/\">biblioteca oficial de patrones de bloques en WordPress.org<\/a>. Puedes insertarlos en el editor usando copiar y pegar. Solo tienes que hacer clic en el bot\u00f3n <strong>Copiar <\/strong>de la p\u00e1gina web de la biblioteca de patrones de bloques y luego pegarlo en el editor.<\/p>\n<h3>Bloques reutilizables<\/h3>\n<p>Los <a href=\"https:\/\/kinsta.com\/es\/blog\/wordpress-5-8\/\">bloques reutilizables<\/a> son una colecci\u00f3n de uno o m\u00e1s bloques que puedes insertar como grupo. Son similares a los patrones de bloques, pero con una diferencia clave:<\/p>\n<p>Mientras que un patr\u00f3n de bloque es una plantilla inicial que editar\u00e1s en cada caso, un bloque reutilizable ser\u00e1 el mismo en todos los casos en que lo incluyas.<\/p>\n<p>Si actualizas el bloque reutilizable, esos cambios se aplicar\u00e1n autom\u00e1ticamente a todas las instancias existentes.<\/p>\n<p>Por ejemplo, puedes utilizar un bloque reutilizable para crear una llamada a la acci\u00f3n (CTA) que quieras que sea la misma en todo tu contenido. Luego, si alguna vez quieres actualizar la CTA, solo tienes que actualizar el bloque reutilizable una vez para cambiarla en todo el sitio.<\/p>\n<p>Para crear un bloque reutilizable en el editor de Gutenberg WordPress, haz clic y arrastra para seleccionar uno o m\u00e1s bloques. A continuaci\u00f3n, haz clic en la opci\u00f3n <strong>A\u00f1adir a bloques reutilizables<\/strong>. (El plugin que mencionamos anteriormente tambi\u00e9n te permite crear un patr\u00f3n de bloques de esta manera).<\/p>\n<figure id=\"attachment_100526\" aria-describedby=\"caption-attachment-100526\" style=\"width: 1024px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-100526 size-large\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/07\/create-reusable-block-1024x703.png\" alt=\"C\u00f3mo crear un bloque reutilizable.\" width=\"1024\" height=\"703\"><figcaption id=\"caption-attachment-100526\" class=\"wp-caption-text\">C\u00f3mo crear un bloque reutilizable.<\/figcaption><\/figure>\n<p>Tus bloques se agrupar\u00e1n entonces &#8211; puedes darle un nombre a tu bloque reutilizable en la configuraci\u00f3n del bloque reutilizable en la barra lateral.<\/p>\n<p>Ahora, podr\u00e1s insertar ese bloque reutilizable buscando su nombre. Puedes utilizar `\/` para insertar r\u00e1pidamente el bloque:<\/p>\n<figure id=\"attachment_100501\" aria-describedby=\"caption-attachment-100501\" style=\"width: 1024px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-100501 size-large\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/07\/insert-reusable-block-1024x527.png\" alt=\"C\u00f3mo insertar un bloque reutilizable.\" width=\"1024\" height=\"527\"><figcaption id=\"caption-attachment-100501\" class=\"wp-caption-text\">C\u00f3mo insertar un bloque reutilizable.<\/figcaption><\/figure>\n<p>Si cambias el bloque reutilizable, tendr\u00e1s la opci\u00f3n de publicar esos cambios cuando actualices la entrada. Y si decides publicar los cambios del bloque reutilizable, esos cambios se aplicar\u00e1n autom\u00e1ticamente a cada instancia del bloque reutilizable:<\/p>\n<figure id=\"attachment_100514\" aria-describedby=\"caption-attachment-100514\" style=\"width: 1024px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-100514 size-large\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/07\/update-reusable-block-1024x568.png\" alt=\"C\u00f3mo actualizar un bloque reutilizable.\" width=\"1024\" height=\"568\"><figcaption id=\"caption-attachment-100514\" class=\"wp-caption-text\">C\u00f3mo actualizar un bloque reutilizable.<\/figcaption><\/figure>\n<h2>Extensi\u00f3n del editor de bloques con plugins<\/h2>\n<p>Hasta ahora, nos hemos centrado en las caracter\u00edsticas principales del editor de bloques, con algunas excepciones.<\/p>\n<p>Sin embargo, una de las cosas buenas del editor de bloques es que puedes <a href=\"https:\/\/kinsta.com\/es\/secciones\/plugins-wordpress\/\">utilizar plugins<\/a> para extender, al igual que con el resto de tu sitio de WordPress.<\/p>\n<p>Puedes utilizar los plugins para varias cosas:<\/p>\n<ul>\n<li><strong>A\u00f1adir nuevos bloques de contenido<\/strong>: Los plugins pueden a\u00f1adir nuevos bloques que puedes utilizar en tus dise\u00f1os. Es el caso de uso m\u00e1s com\u00fan para los plugins de Gutenberg en este momento.<\/li>\n<li><strong>A\u00f1adir nuevas plantillas\/patrones de bloques<\/strong>: Algunos plugins utilizan el sistema de patrones de bloques del n\u00facleo, mientras que otros han creado sus propios sistemas de plantillas.<\/li>\n<li><strong>Cambiar la interfaz\/caracter\u00edsticas del editor<\/strong>: Puedes utilizar plugins para modificar el propio editor. Por ejemplo, puedes a\u00f1adir un mejor soporte de Markdown.<\/li>\n<\/ul>\n<p>M\u00e1s all\u00e1 de los plugins construidos espec\u00edficamente para Gutenberg, muchos otros plugins de WordPress tambi\u00e9n pueden utilizar el editor de bloques.<\/p>\n<p>Por ejemplo, si usas <a href=\"https:\/\/kinsta.com\/es\/blog\/plugins-formulario-contacto-wordpress\/\">un plugin de formulario de contacto<\/a>, el plugin puede darte un bloque dedicado que puedes usar para incrustar tus formularios. Lo mismo ocurre con muchos otros tipos de plugins.<\/p>\n<p>Una vez que domines los fundamentos del editor, vale la pena explorar estos plugins para ver si encuentras alguno que pueda mejorar tu experiencia.<\/p>\n<p>Estas son algunas de las opciones m\u00e1s populares en el momento en que escribimos este post:<\/p>\n<ul>\n<li><a href=\"https:\/\/wordpress.org\/plugins\/ultimate-addons-for-gutenberg\/\">Ultimate Addons for Gutenberg<\/a><\/li>\n<li><a href=\"https:\/\/wordpress.org\/plugins\/kadence-blocks\/\">Bloques Kadence<\/a><\/li>\n<li><a href=\"https:\/\/wordpress.org\/plugins\/generateblocks\/\">GenerarBloques<\/a><\/li>\n<li><a href=\"https:\/\/wordpress.org\/plugins\/stackable-ultimate-gutenberg-blocks\/\">Apilable<\/a><\/li>\n<li><a href=\"https:\/\/wordpress.org\/plugins\/getwid\/\">Getwid<\/a><\/li>\n<\/ul>\n<p>Puedes ver m\u00e1s en la <a href=\"https:\/\/wordpress.org\/plugins\/browse\/blocks\/\">secci\u00f3n de plugins habilitados para el bloqueo de WordPress.org<\/a>.<\/p>\n<h2>Editor de WordPress Gutenberg y edici\u00f3n completa del sitio<\/h2>\n<p>Como hemos mencionado al principio de este post, el proyecto Gutenberg pretende ser mucho m\u00e1s que un simple editor de contenidos.<\/p>\n<p>El plan a largo plazo es que WordPress pase a la <strong>edici\u00f3n completa del sitio<\/strong>. Significa exactamente lo que dice: el objetivo es que eventualmente puedas editar todas las partes de tu sitio usando el editor Gutenberg. Y eso incluye la cabecera de tu sitio, el pie de p\u00e1gina, las barras laterales, etc.<\/p>\n<p>A diferencia del lanzamiento del editor de bloques en WordPress 5.0, Full Site Editing tiene un enfoque iterativo. Ser\u00e1 una adici\u00f3n gradual de caracter\u00edsticas, donde cada nueva versi\u00f3n se basa en las anteriores.<\/p>\n<p>Por ejemplo, <a href=\"https:\/\/kinsta.com\/es\/blog\/wordpress-5-8\/\">a partir de WordPress 5.8<\/a>, ahora utilizar\u00e1s el editor de bloques para gestionar los widgets de tu sitio. Tambi\u00e9n tendr\u00e1s acceso a algunos bloques nuevos centrados en el tema, como el logotipo del sitio, la navegaci\u00f3n, el bucle de consulta (te permite crear plantillas para las entradas de la lista), y m\u00e1s.<\/p>\n<p>Pero mientras que el Full Site Editing oficial es todav\u00eda un trabajo en progreso, algunos intr\u00e9pidos desarrolladores de temas ya han comenzado a lanzar temas basados en bloques, que nos dan algunos ejemplos bastante buenos de c\u00f3mo podr\u00eda funcionar el Full Site Editing.<\/p>\n<p>Adem\u00e1s, puedes acceder a algunas de las funciones experimentales de Full Site Editing en <a href=\"https:\/\/wordpress.org\/plugins\/gutenberg\/\">la versi\u00f3n del plugin de Gutenberg<\/a>.<\/p>\n<p>As\u00ed que, veamos dos cosas:<\/p>\n<ol>\n<li>Las funciones b\u00e1sicas de edici\u00f3n de sitios completos que tenemos ahora a partir de WordPress 5.8<\/li>\n<li>C\u00f3mo podr\u00eda funcionar la edici\u00f3n completa del sitio en base a las caracter\u00edsticas experimentales<\/li>\n<\/ol>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-important\">\n            <h3>Important<\/h3>\n        <p><strong>Todo esto podr\u00eda cambiar en peque\u00f1os o grandes aspectos para cuando la Edici\u00f3n Completa del Sitio se convierta en la corriente principal<\/strong>. Son solo para dar una idea de lo que podr\u00eda ser.<\/p>\n<\/aside>\n\n<h3>Uso de bloques en lugar de widgets<\/h3>\n<p>A partir de WordPress 5.8, ahora utilizar\u00e1s bloques para controlar tus <a href=\"https:\/\/kinsta.com\/es\/blog\/barra-lateral-de-registro-wordpress\/\">barras laterales<\/a> y pies de p\u00e1gina en lugar de widgets (por defecto &#8211; puede desactivar esto si lo desea).<\/p>\n<p>Cuando vayas a <strong>Apariencia <\/strong>&gt; <strong>Widgets, <\/strong>podr\u00e1s gestionar el contenido de cada \u00e1rea de widgets mediante el editor de bloques.<\/p>\n<p>Puedes ver que cada \u00e1rea de widgets tiene un editor independiente, que puedes abrir haciendo clic en los botones del acorde\u00f3n. Tambi\u00e9n puedes mover los bloques entre las diferentes \u00e1reas de widgets haciendo clic en los iconos de flecha con gancho que hay cerca de la parte superior:<\/p>\n<figure id=\"attachment_100522\" aria-describedby=\"caption-attachment-100522\" style=\"width: 1024px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-100522 size-large\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/07\/block-widget-areas-1024x887.png\" alt=\"Uso de bloques para editar \u00e1reas de widgets.\" width=\"1024\" height=\"887\"><figcaption id=\"caption-attachment-100522\" class=\"wp-caption-text\">Uso de bloques para editar \u00e1reas de widgets.<\/figcaption><\/figure>\n<h3>Uso de nuevos bloques tem\u00e1ticos<\/h3>\n<p>WordPress 5.8 tambi\u00e9n a\u00f1ade nuevos bloques tem\u00e1ticos dedicados que te permiten insertar contenido din\u00e1mico en tu sitio. Estos bloques tambi\u00e9n desempe\u00f1ar\u00e1n un papel fundamental a la hora de dise\u00f1ar plantillas para tu tema en futuras versiones.<\/p>\n<p>Por ejemplo, digamos que quieres incrustar una lista de tus contenidos m\u00e1s recientes en una p\u00e1gina. Ahora, s\u00f3lo tienes que a\u00f1adir el bloque Query Loop, y podr\u00e1s insertar din\u00e1micamente contenido de un <a href=\"https:\/\/kinsta.com\/es\/blog\/wordpress-tipos-de-postes-personalizados\/\">tipo de entrada<\/a> concreto (por ejemplo, entradas de blog), incluyendo el filtrado por categor\u00edas, autores, palabras clave y mucho m\u00e1s:<\/p>\n<figure id=\"attachment_100509\" aria-describedby=\"caption-attachment-100509\" style=\"width: 1024px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-100509 size-large\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/07\/query-loop-block-1024x945.png\" alt=\"Uso del bloque de bucle de consulta para mostrar contenido din\u00e1mico.\" width=\"1024\" height=\"945\"><figcaption id=\"caption-attachment-100509\" class=\"wp-caption-text\">Uso del bloque de bucle de consulta para mostrar contenido din\u00e1mico.<\/figcaption><\/figure>\n<p>Dentro del bloque Query Loop, puedes anidar los otros bloques tem\u00e1ticos para controlar la plantilla del contenido que se muestra all\u00ed. Por ejemplo, puedes mostrar la fecha de cada post a\u00f1adiendo el bloque Post Date a tu plantilla.<\/p>\n<p>Con el bloque Query Loop en WordPress 5.8, puedes dise\u00f1ar tu propia p\u00e1gina de listado de blog personalizada. Una edici\u00f3n completa del sitio adecuada ampliar\u00e1 esto a todo el tema, as\u00ed que vamos a verlo a continuaci\u00f3n.<\/p>\n<h3>Dise\u00f1o de plantillas de contenidos<\/h3>\n<p>El modo de edici\u00f3n de plantillas es otra de las novedades de WordPress 5.8. Te permite utilizar Gutenberg para dise\u00f1ar las plantillas de tus entradas y p\u00e1ginas mediante bloques.<\/p>\n<p>Actualmente, esta funci\u00f3n solo est\u00e1 disponible si el desarrollador de tu tema la ha habilitado espec\u00edficamente, por lo que es posible que no la veas si el desarrollador de tu tema a\u00fan no lo ha hecho.<\/p>\n<p>Si <em>est\u00e1s <\/em>usando un tema que soporta el modo de edici\u00f3n de plantillas en WordPress 5.8, ver\u00e1s una nueva secci\u00f3n de <strong>Plantillas<\/strong> en la pesta\u00f1a de <strong>Publicaciones\/P\u00e1ginas <\/strong>de la barra lateral cuando est\u00e9s editando una publicaci\u00f3n o p\u00e1gina. Puedes crear una nueva plantilla o elegir una de las existentes:<\/p>\n<figure id=\"attachment_100512\" aria-describedby=\"caption-attachment-100512\" style=\"width: 1024px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-100512 size-large\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/07\/template-editing-mode-1024x853.png\" alt=\"Creaci\u00f3n de una nueva plantilla en los temas que soportan el modo Plantilla.\" width=\"1024\" height=\"853\"><figcaption id=\"caption-attachment-100512\" class=\"wp-caption-text\">Creaci\u00f3n de una nueva plantilla en los temas que soportan el modo Plantilla.<\/figcaption><\/figure>\n<p>Si creas una nueva plantilla, podr\u00e1s darle un nombre que te ayude a recordarla. A continuaci\u00f3n, podr\u00e1s dise\u00f1ar la plantilla utilizando el modo especial del editor de plantillas, junto con los nuevos bloques tem\u00e1ticos que detallamos en la secci\u00f3n anterior:<\/p>\n<figure id=\"attachment_100513\" aria-describedby=\"caption-attachment-100513\" style=\"width: 1024px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-100513 size-large\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/07\/template-editor-1024x875.png\" alt=\"El nuevo editor de plantillas de WordPress 5.8.\" width=\"1024\" height=\"875\"><figcaption id=\"caption-attachment-100513\" class=\"wp-caption-text\">El nuevo editor de plantillas de WordPress 5.8.<\/figcaption><\/figure>\n<h3>Ejemplo de edici\u00f3n del sitio completo de Blockbase<\/h3>\n<p><a href=\"https:\/\/wordpress.org\/themes\/blockbase\/\">Blockbase<\/a> es un tema de Automattic que funciona como una especie de \u00abprueba de concepto\u00bb y patio de recreo para Full Site Editing. Todav\u00eda es experimental, por lo que podr\u00eda cambiar antes de que estas caracter\u00edsticas est\u00e9n en el n\u00facleo del software de WordPress. Pero proporciona una idea de Full Site Editing.<\/p>\n<p>Con el tema y la versi\u00f3n del plugin de Gutenberg instalados, obtienes una nueva \u00e1rea del <strong>Editor del Sitio <\/strong>que te permite \u00abconstruir\u00bb tu tema usando el mismo editor que viste anteriormente.<\/p>\n<p>La diferencia fundamental, sin embargo, es que no est\u00e1s construyendo una sola entrada o p\u00e1gina. En su lugar, est\u00e1s utilizando el editor de bloques de Gutenberg WordPress para crear las plantillas reales que todo el contenido de tu sitio utilizar\u00e1 &#8211; por ejemplo, la plantilla para tu cabecera.<\/p>\n<figure id=\"attachment_100530\" aria-describedby=\"caption-attachment-100530\" style=\"width: 1024px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-100530 size-large\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/07\/full-site-editing-1-1024x689.png\" alt=\"Un ejemplo temprano de la edici\u00f3n completa del sitio.\" width=\"1024\" height=\"689\"><figcaption id=\"caption-attachment-100530\" class=\"wp-caption-text\">Un ejemplo temprano de la edici\u00f3n completa del sitio.<\/figcaption><\/figure>\n<p>Para ayudarte a conseguirlo, tendr\u00e1s una serie de nuevos bloques de dise\u00f1o, incluidos algunos de los bloques tem\u00e1ticos que has visto anteriormente:<\/p>\n<figure id=\"attachment_100531\" aria-describedby=\"caption-attachment-100531\" style=\"width: 1024px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-100531 size-large\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/07\/full-site-editing-new-blocks-1024x985.png\" alt=\"Los nuevos bloques de dise\u00f1o con Full Site Editing.\" width=\"1024\" height=\"985\"><figcaption id=\"caption-attachment-100531\" class=\"wp-caption-text\">Los nuevos bloques de dise\u00f1o con Full Site Editing.<\/figcaption><\/figure>\n<p>Para navegar entre las diferentes plantillas, puede hacer clic en el logotipo de WordPress en la esquina superior izquierda para editar otras plantillas y crear otras nuevas:<\/p>\n<figure id=\"attachment_100532\" aria-describedby=\"caption-attachment-100532\" style=\"width: 1024px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-100532 size-large\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/07\/full-site-editing-templates-1024x809.png\" alt=\"Edici\u00f3n de diferentes plantillas de temas.\" width=\"1024\" height=\"809\"><figcaption id=\"caption-attachment-100532\" class=\"wp-caption-text\">Edici\u00f3n de diferentes plantillas de temas.<\/figcaption><\/figure>\n<p>De nuevo, la idea es que <em>con el tiempo <\/em>podr\u00e1s utilizar el editor Gutenberg para controlar todas las plantillas\/dise\u00f1os de tu tema. Y cuando eso ocurra, la creaci\u00f3n de un sitio de WordPress se ver\u00e1 bastante diferente de lo que vemos como \u00abnormal\u00bb en 2021.<\/p>\n\n<h2>Resumen<\/h2>\n<p>Desde 2018, el editor de bloques Gutenberg ha avanzado mucho. Con el pr\u00f3ximo paso hacia el Full Site Editing, el editor de bloques solo se convertir\u00e1 en una parte a\u00fan m\u00e1s importante de <a href=\"https:\/\/kinsta.com\/es\/blog\/wordpress-estadisticas\/\">WordPress<\/a>.<\/p>\n<p>En este post, hemos cubierto todo, desde los fundamentos del editor de bloques hasta los consejos y caracter\u00edsticas avanzadas. Tambi\u00e9n hemos visto c\u00f3mo podr\u00eda ser la edici\u00f3n completa del sitio en el futuro.<\/p>\n<p>Si a\u00fan no est\u00e1s preparado para probarlo, puedes desactivar permanentemente Gutenberg y utilizar el editor cl\u00e1sico. Sin embargo, Gutenberg seguir\u00e1 creciendo, as\u00ed que no es algo que quieras ignorar para siempre.<\/p>\n<p><em>\u00bfTodav\u00eda tienes alguna pregunta o idea sobre el editor? Si es as\u00ed, nos encantar\u00eda escuchar tus comentarios, tanto los buenos como los malos.<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Cuando el editor de bloques de WordPress, o Gutenberg, se lanz\u00f3 en diciembre de 2018, no sab\u00edamos qu\u00e9 esperar. Sin duda, hab\u00edamos tenido mucho tiempo para &#8230;<\/p>\n","protected":false},"author":117,"featured_media":42978,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[861,486],"topic":[1345],"class_list":["post-10015","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","tag-block-editor","tag-gutenberg","topic-desarrollo-wordpress"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v24.6 (Yoast SEO v24.6) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Profundizando en el \u00faltimo editor de WordPress Gutenberg (2021)<\/title>\n<meta name=\"description\" content=\"Aprende todo sobre el \u00faltimo editor de WordPress Gutenberg, tambi\u00e9n conocido como el editor de bloques. Descubre por qu\u00e9 su Full Site Editing es el futuro de WordPress.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kinsta.com\/es\/blog\/gutenberg-wordpress-editor\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Profundizando en el \u00faltimo editor de WordPress Gutenberg (2026)\" \/>\n<meta property=\"og:description\" content=\"Aprende todo sobre el \u00faltimo editor de WordPress Gutenberg, tambi\u00e9n conocido como el editor de bloques. Descubre por qu\u00e9 su Full Site Editing es el futuro de WordPress.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/es\/blog\/gutenberg-wordpress-editor\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/kinsta.es\/\" \/>\n<meta property=\"article:published_time\" content=\"2017-07-13T15:47:21+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-02-13T11:36:54+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2017\/07\/gutenberg-wordpress-editor.jpeg\" \/>\n\t<meta property=\"og:image:width\" content=\"1460\" \/>\n\t<meta property=\"og:image:height\" content=\"730\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Salman Ravoof\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"Aprende todo sobre el \u00faltimo editor de WordPress Gutenberg, tambi\u00e9n conocido como el editor de bloques. Descubre por qu\u00e9 su Full Site Editing es el futuro de WordPress.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2017\/07\/gutenberg-wordpress-editor.jpeg\" \/>\n<meta name=\"twitter:creator\" content=\"@salmanravoof\" \/>\n<meta name=\"twitter:site\" content=\"@Kinsta_ES\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Salman Ravoof\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"35 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/es\/blog\/gutenberg-wordpress-editor\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/gutenberg-wordpress-editor\/\"},\"author\":{\"name\":\"Salman Ravoof\",\"@id\":\"https:\/\/kinsta.com\/es\/#\/schema\/person\/9cafd2eedd617e640eeea4cf3a5fd987\"},\"headline\":\"Profundizando en el \u00faltimo editor de WordPress Gutenberg (2026)\",\"datePublished\":\"2017-07-13T15:47:21+00:00\",\"dateModified\":\"2025-02-13T11:36:54+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/gutenberg-wordpress-editor\/\"},\"wordCount\":6790,\"commentCount\":13,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/es\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/gutenberg-wordpress-editor\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2017\/07\/gutenberg-wordpress-editor.jpeg\",\"keywords\":[\"Block Editor\",\"Gutenberg\"],\"articleSection\":[\"Los mejores tutoriales de WordPress\"],\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/es\/blog\/gutenberg-wordpress-editor\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/es\/blog\/gutenberg-wordpress-editor\/\",\"url\":\"https:\/\/kinsta.com\/es\/blog\/gutenberg-wordpress-editor\/\",\"name\":\"Profundizando en el \u00faltimo editor de WordPress Gutenberg (2021)\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/es\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/gutenberg-wordpress-editor\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/gutenberg-wordpress-editor\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2017\/07\/gutenberg-wordpress-editor.jpeg\",\"datePublished\":\"2017-07-13T15:47:21+00:00\",\"dateModified\":\"2025-02-13T11:36:54+00:00\",\"description\":\"Aprende todo sobre el \u00faltimo editor de WordPress Gutenberg, tambi\u00e9n conocido como el editor de bloques. Descubre por qu\u00e9 su Full Site Editing es el futuro de WordPress.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/gutenberg-wordpress-editor\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/es\/blog\/gutenberg-wordpress-editor\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/kinsta.com\/es\/blog\/gutenberg-wordpress-editor\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2017\/07\/gutenberg-wordpress-editor.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2017\/07\/gutenberg-wordpress-editor.jpeg\",\"width\":1460,\"height\":730},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/es\/blog\/gutenberg-wordpress-editor\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/es\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Desarrollo WordPress\",\"item\":\"https:\/\/kinsta.com\/es\/secciones\/desarrollo-wordpress\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Profundizando en el \u00faltimo editor de WordPress Gutenberg (2025)\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinsta.com\/es\/#website\",\"url\":\"https:\/\/kinsta.com\/es\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Soluciones de alojamiento premium, r\u00e1pidas y seguras\",\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/es\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinsta.com\/es\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinsta.com\/es\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/es\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/kinsta.com\/es\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/es\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/kinsta.es\/\",\"https:\/\/x.com\/Kinsta_ES\",\"https:\/\/www.instagram.com\/kinstahosting\/\",\"https:\/\/www.linkedin.com\/company\/kinsta\/\",\"https:\/\/www.pinterest.com\/kinstahosting\/\",\"https:\/\/www.youtube.com\/c\/Kinsta\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/kinsta.com\/es\/#\/schema\/person\/9cafd2eedd617e640eeea4cf3a5fd987\",\"name\":\"Salman Ravoof\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/kinsta.com\/es\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/0c5885f75cb78473fb7408e5e49ad190?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/0c5885f75cb78473fb7408e5e49ad190?s=96&d=mm&r=g\",\"caption\":\"Salman Ravoof\"},\"description\":\"Salman Ravoof is a self-taught web developer, writer, creator, and a huge admirer of Free and Open Source Software (FOSS). Besides tech, he's excited by science, philosophy, photography, arts, cats, and food. Learn more about him on his website, and connect with Salman on Twitter.\",\"sameAs\":[\"https:\/\/salmanravoof.com\",\"https:\/\/www.linkedin.com\/in\/salman-ravoof-5a749133\/\",\"https:\/\/x.com\/salmanravoof\"],\"url\":\"https:\/\/kinsta.com\/es\/blog\/author\/salmanravoof\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Profundizando en el \u00faltimo editor de WordPress Gutenberg (2021)","description":"Aprende todo sobre el \u00faltimo editor de WordPress Gutenberg, tambi\u00e9n conocido como el editor de bloques. Descubre por qu\u00e9 su Full Site Editing es el futuro de WordPress.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/kinsta.com\/es\/blog\/gutenberg-wordpress-editor\/","og_locale":"es_ES","og_type":"article","og_title":"Profundizando en el \u00faltimo editor de WordPress Gutenberg (2026)","og_description":"Aprende todo sobre el \u00faltimo editor de WordPress Gutenberg, tambi\u00e9n conocido como el editor de bloques. Descubre por qu\u00e9 su Full Site Editing es el futuro de WordPress.","og_url":"https:\/\/kinsta.com\/es\/blog\/gutenberg-wordpress-editor\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/kinsta.es\/","article_published_time":"2017-07-13T15:47:21+00:00","article_modified_time":"2025-02-13T11:36:54+00:00","og_image":[{"width":1460,"height":730,"url":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2017\/07\/gutenberg-wordpress-editor.jpeg","type":"image\/jpeg"}],"author":"Salman Ravoof","twitter_card":"summary_large_image","twitter_description":"Aprende todo sobre el \u00faltimo editor de WordPress Gutenberg, tambi\u00e9n conocido como el editor de bloques. Descubre por qu\u00e9 su Full Site Editing es el futuro de WordPress.","twitter_image":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2017\/07\/gutenberg-wordpress-editor.jpeg","twitter_creator":"@salmanravoof","twitter_site":"@Kinsta_ES","twitter_misc":{"Escrito por":"Salman Ravoof","Tiempo de lectura":"35 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/es\/blog\/gutenberg-wordpress-editor\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/es\/blog\/gutenberg-wordpress-editor\/"},"author":{"name":"Salman Ravoof","@id":"https:\/\/kinsta.com\/es\/#\/schema\/person\/9cafd2eedd617e640eeea4cf3a5fd987"},"headline":"Profundizando en el \u00faltimo editor de WordPress Gutenberg (2026)","datePublished":"2017-07-13T15:47:21+00:00","dateModified":"2025-02-13T11:36:54+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/es\/blog\/gutenberg-wordpress-editor\/"},"wordCount":6790,"commentCount":13,"publisher":{"@id":"https:\/\/kinsta.com\/es\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/es\/blog\/gutenberg-wordpress-editor\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2017\/07\/gutenberg-wordpress-editor.jpeg","keywords":["Block Editor","Gutenberg"],"articleSection":["Los mejores tutoriales de WordPress"],"inLanguage":"es","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/es\/blog\/gutenberg-wordpress-editor\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/es\/blog\/gutenberg-wordpress-editor\/","url":"https:\/\/kinsta.com\/es\/blog\/gutenberg-wordpress-editor\/","name":"Profundizando en el \u00faltimo editor de WordPress Gutenberg (2021)","isPartOf":{"@id":"https:\/\/kinsta.com\/es\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/es\/blog\/gutenberg-wordpress-editor\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/es\/blog\/gutenberg-wordpress-editor\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2017\/07\/gutenberg-wordpress-editor.jpeg","datePublished":"2017-07-13T15:47:21+00:00","dateModified":"2025-02-13T11:36:54+00:00","description":"Aprende todo sobre el \u00faltimo editor de WordPress Gutenberg, tambi\u00e9n conocido como el editor de bloques. Descubre por qu\u00e9 su Full Site Editing es el futuro de WordPress.","breadcrumb":{"@id":"https:\/\/kinsta.com\/es\/blog\/gutenberg-wordpress-editor\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/es\/blog\/gutenberg-wordpress-editor\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/kinsta.com\/es\/blog\/gutenberg-wordpress-editor\/#primaryimage","url":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2017\/07\/gutenberg-wordpress-editor.jpeg","contentUrl":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2017\/07\/gutenberg-wordpress-editor.jpeg","width":1460,"height":730},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/es\/blog\/gutenberg-wordpress-editor\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/es\/"},{"@type":"ListItem","position":2,"name":"Desarrollo WordPress","item":"https:\/\/kinsta.com\/es\/secciones\/desarrollo-wordpress\/"},{"@type":"ListItem","position":3,"name":"Profundizando en el \u00faltimo editor de WordPress Gutenberg (2025)"}]},{"@type":"WebSite","@id":"https:\/\/kinsta.com\/es\/#website","url":"https:\/\/kinsta.com\/es\/","name":"Kinsta\u00ae","description":"Soluciones de alojamiento premium, r\u00e1pidas y seguras","publisher":{"@id":"https:\/\/kinsta.com\/es\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinsta.com\/es\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Organization","@id":"https:\/\/kinsta.com\/es\/#organization","name":"Kinsta","url":"https:\/\/kinsta.com\/es\/","logo":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/kinsta.com\/es\/#\/schema\/logo\/image\/","url":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinsta.com\/es\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/kinsta.es\/","https:\/\/x.com\/Kinsta_ES","https:\/\/www.instagram.com\/kinstahosting\/","https:\/\/www.linkedin.com\/company\/kinsta\/","https:\/\/www.pinterest.com\/kinstahosting\/","https:\/\/www.youtube.com\/c\/Kinsta"]},{"@type":"Person","@id":"https:\/\/kinsta.com\/es\/#\/schema\/person\/9cafd2eedd617e640eeea4cf3a5fd987","name":"Salman Ravoof","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/kinsta.com\/es\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/0c5885f75cb78473fb7408e5e49ad190?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/0c5885f75cb78473fb7408e5e49ad190?s=96&d=mm&r=g","caption":"Salman Ravoof"},"description":"Salman Ravoof is a self-taught web developer, writer, creator, and a huge admirer of Free and Open Source Software (FOSS). Besides tech, he's excited by science, philosophy, photography, arts, cats, and food. Learn more about him on his website, and connect with Salman on Twitter.","sameAs":["https:\/\/salmanravoof.com","https:\/\/www.linkedin.com\/in\/salman-ravoof-5a749133\/","https:\/\/x.com\/salmanravoof"],"url":"https:\/\/kinsta.com\/es\/blog\/author\/salmanravoof\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/posts\/10015","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/users\/117"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/comments?post=10015"}],"version-history":[{"count":18,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/posts\/10015\/revisions"}],"predecessor-version":[{"id":56495,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/posts\/10015\/revisions\/56495"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/10015\/translations\/en"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/10015\/translations\/es"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/10015\/translations\/it"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/10015\/translations\/fr"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/10015\/translations\/pt"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/10015\/translations\/jp"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/10015\/translations\/de"},{"embeddable":true,"hreflang":"da","title":"Danish","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/10015\/translations\/dk"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/10015\/translations\/nl"},{"embeddable":true,"hreflang":"sv","title":"Swedish","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/10015\/translations\/se"},{"href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/10015\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/media\/42978"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/media?parent=10015"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/tags?post=10015"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/topic?post=10015"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}