Cuando el editor de bloques de WordPress, o Gutenberg, se lanzó en diciembre de 2018, no sabíamos qué esperar. Sin duda, habíamos tenido mucho tiempo para jugar con su versión beta, pero no podíamos predecir lo bien que iría el lanzamiento real ni las ganas que tendrían los usuarios y desarrolladores de adoptar el nuevo editor.

Hemos visto cómo el editor Gutenberg ha crecido enormemente en los más de dos años que han pasado desde que publicamos por primera vez este post. Ha pasado de ser un producto mínimo viable (MVP – minimum viable product) a un proyecto más maduro que se está acercando al objetivo de crear una experiencia unificada de Full Site Editing para WordPress.

Para explicar estos cambios, hemos revisado el editor Gutenberg para guiarte a través de su nueva cara, incluyendo hacia dónde irá próximamente.

¿Qué es el editor de bloques de Gutenberg?

Gutenberg, conocido alternativamente como el «editor de bloques de WordPress» o simplemente el «editor de WordPress», es el editor de contenido de WordPress introducido en WordPress 5.0, lanzado el 6 de diciembre de 2018.

Si no has escuchado ese término, es el editor por defecto que usan todos los sitios de WordPress a menos que lo hayas desactivado específicamente. Se parece a esto:

El editor Gutenberg de WordPress.

El editor Gutenberg de WordPress.

La gran diferencia entre el editor de WordPress Gutenberg y el anterior editor de WordPress (ahora llamado «editor clásico» o «editor TinyMCE») es un nuevo enfoque basado en bloques para crear contenido.

Con Gutenberg, cada elemento de tu contenido es un bloque, lo que permite manipular fácilmente el contenido. Cada párrafo es un bloque, cada imagen es un bloque, cada botón es un bloque… ¡lo entiendes!

Los desarrolladores de terceros también pueden crear bloques personalizados, lo que está ayudando a acabar con el asunto de WordPress con los shortcodes. Digamos que quieres incrustar un formulario de contacto. En lugar de tener que añadir un shortcode (por ejemplo, `[your-form-shortcode]`) como hacías antes, ahora puedes simplemente colocar el bloque de tu plugin de formulario.

Además, también puedes utilizar los bloques para crear diseños más complejos, como la configuración de un diseño de varias columnas o la agrupación de bloques para crear una sección cohesionada.

A medida que profundicemos en mostrarte cómo utilizar el editor de bloques, tendrás una mejor idea de cómo puedes utilizar los bloques para mejorar tu forma de crear contenido.

Gutenberg se lanzó en diciembre de 2018, ¡y han cambiado muchas cosas desde entonces! 🚀 Consulta esta guía actualizada para saber más ⬇️Click to Tweet

Gutenberg no es solo un editor de contenidos

Una cosa importante que hay que entender es que el proyecto Gutenberg pretende ser algo más que un editor de contenidos.

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 Full Site Editing.

La idea con Full Site Editing es que podrás diseñar 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 tema de WordPress, podrás usar Gutenberg para diseñar cabeceras personalizadas usando el editor de bloques.

Este tipo de funcionalidad aún no está disponible, pero está en camino, y tenemos algunos proyectos de «prueba de concepto» a los que daremos un vistazo al final de este post.

Ventajas y desventajas de Gutenberg frente a las alternativas populares

Ahora que hemos podido utilizar el editor de bloques de WordPress durante más de dos años, tenemos una buena idea de algunos de los pros y contras de Gutenberg frente a otras soluciones.

Existen dos alternativas principales que tienes para crear contenido en WordPress:

En general, el editor clásico TinyMCE ofrece una experiencia más reducida, similar a la de un procesador de textos, mientras que los creadores de páginas proporcionan una experiencia de diseño visual mucho más flexible, con la función de arrastrar y soltar.

Si ordenáramos los tres editores en función de su flexibilidad de diseño, sería algo así:

Editor clásico TinyMCE (menos flexible) < Gutenberg < Page builders (más flexible)

Ahora, hablemos de algunos de los pros y contras del editor de bloques Gutenberg vs alternativas.

Gutenberg vs Editor clásico: Ventajas y desventajas

Comparemos primero Gutenberg frente al clásico editor TinyMCE.

Pros:

Contras:

Si crees que el editor clásico TinyMCE se adapta mejor a tus necesidades, puedes desactivar por completo el editor Gutenberg.

Gutenberg vs Page Builders: Ventajas y desventajas

Ahora, echemos un vistazo a cómo Gutenberg se compara con los plugins de construcción de páginas de terceros.

Pros:

Contras:

Reflexiones sobre la comparación

Para la mayoría de los usuarios, Gutenberg da en el clavo en términos de flexibilidad.

La mayoría de la gente no necesita la flexibilidad de un constructor de páginas para su contenido, especialmente para las entradas del blog. Pero, al mismo tiempo, es bueno configurar rápidamente un diseño de varias columnas o insertar un botón, algo que el editor clásico no facilita.

Así que con eso en mente, vamos a entrar en cómo puedes empezar a usar Gutenberg.

Cómo usar el editor de bloques de WordPress Gutenberg

Ahora que sabes un poco sobre el editor de bloques de Gutenberg, vamos a profundizar en cómo puedes usarlo para empezar a crear contenido.

Comenzaremos con una mirada introductoria a la interfaz y gradualmente desarrollaremos formas más avanzadas de utilizar el editor y mejorar tus flujos de trabajo.

La interfaz del editor de bloques de Gutenberg

Cuando abres el editor, ocultará la barra lateral del panel de control de WordPress y te ofrecerá una experiencia de pantalla completa:

La interfaz del editor de bloques Gutenberg de WordPress.

La interfaz del editor de bloques Gutenberg de WordPress.

El editor tiene tres partes principales:

Para crear una experiencia de escritura más envolvente, puedes ocultar la barra lateral haciendo clic en el icono del «engranaje» de la esquina superior derecha. Para recuperar la barra lateral, basta con hacer clic de nuevo en el icono del «engranaje»:

Al hacer clic en el icono del "engranaje" se mostrará/ocultará la barra lateral.

Al hacer clic en el icono del «engranaje» se mostrará/ocultará la barra lateral.

Info

Tu editor puede tener un aspecto ligeramente diferente porque los desarrolladores de temas tienen la opción de añadir sus estilos al editor para crear una experiencia más visual. Dependiendo de tu tema, podrías ver diferentes fuentes o colores.

Por ejemplo, este es el aspecto de la interfaz del editor si se utiliza el nuevo tema por defecto Twenty-One:

Un ejemplo del tema Twenty Twenty-One aplicando sus estilos al editor de bloques.

Un ejemplo del tema Twenty Twenty-One aplicando sus estilos al editor de bloques.

Añadir bloques

Para añadir texto de párrafo normal a tu entrada, solo tienes que hacer clic y escribir. Cada vez que pulses intro, el editor creará automáticamente un nuevo bloque de párrafo.

Para otros tipos de contenido, tendrás que insertar un nuevo bloque. Utilizarás los bloques para las imágenes, los botones, las incrustaciones de vídeo, etc.

Para añadir un nuevo bloque, puedes hacer clic en uno de los iconos «más» de la interfaz. Es el icono principal del insertador de bloques en la esquina superior izquierda, pero también verás otros iconos dentro de la interfaz que abren una interfaz más pequeña del insertador de bloques:

Los iconos "plus" le permiten insertar un nuevo bloque.

Los iconos «más» le permiten insertar un nuevo bloque.

Para empezar, sitúa el cursor del ratón donde quieras insertar el nuevo bloque. Por ejemplo, para añadir un nuevo bloque debajo del botón, puede hacer clic debajo del botón y luego hacer clic en el icono +.

Deberías ver un panel lateral que muestra todos los bloques disponibles, divididos en diferentes categorías. Puedes buscar un bloque específico o simplemente elegir una opción de la lista. Cuando pases el ratón por encima de un bloque, verás una descripción de lo que hace y una vista previa.

Para insertar el bloque, basta con hacer clic en él. Por ejemplo, para insertar una imagen normal, basta con hacer clic en el bloque de imagen:

Haga clic en el tipo de bloque que desea insertar.

Haz clic en el tipo de bloque que deseas insertar.

A continuación, puedes seguir las indicaciones para cargar o elegir una imagen existente de tu biblioteca multimedia.

Opciones de formato esenciales

Para hacer elecciones básicas de formato para tus bloques, tendrás una barra de herramientas flotante que aparece cuando haces clic en cualquier bloque.

Si estás formateando un texto normal, aquí es donde puedes hacerlo:

La barra de herramientas flotante le permite hacer elecciones básicas de formato.

La barra de herramientas flotante te permite hacer elecciones básicas de formato.

Por ejemplo, digamos que quieres insertar un enlace en tu contenido. Primero debes seleccionar el texto específico que quieres enlazar – en nuestro ejemplo, es «Para otros tipos de contenido». A continuación, puedes hacer clic en el icono de enlace de la barra de herramientas para abrir las opciones de inserción de enlaces:

Insertar un enlace en el editor de bloques de Gutenberg WordPress.

Insertar un enlace en el editor de bloques de Gutenberg WordPress.

Configuración de los ajustes avanzados de los bloques

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 diseño, la disposición, la funcionalidad, etc.

Para abrir la configuración de un bloque, haz clic en el bloque en el editor para seleccionarlo. A continuación, ve a la pestaña Bloque de la barra lateral para ver tu configuración.

A continuación, puedes ver la configuración del bloque de botones, que es uno de los bloques más flexibles. Puedes cambiar el color, hacerlo más ancho y mucho más.

A medida que vayas realizando cambios en la configuración de un bloque, los verás reflejados al instante en el editor.

Puede acceder a la configuración de un bloque en la barra lateral.

Una vez más, cada bloque tendrá ajustes que son únicos para ese bloque. Por ejemplo, si abres la configuración para el texto de párrafo normal, solo obtendrás algunas opciones básicas de tipografía y color. A continuación, puedes ver que pudimos aplicar un fondo de color para resaltar algún texto:

La configuración del bloque para un texto de párrafo normal.

La configuración del bloque para un texto de párrafo normal.

Reorganización de bloques

Además 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.

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.

Para realizar movimientos extensos, puede utilizar la función de arrastrar y soltar. Para arrastrar y soltar un bloque, tienes que hacer clic en el icono de los «seis puntos» a la izquierda de las flechas.

Una vez que hagas clic y mantenga el ratón sobre ese icono, podrás arrastrar el bloque a cualquier lugar de la página:

Puedes reorganizar los bloques utilizando las flechas o arrastrando y soltando.

Puedes reorganizar los bloques utilizando las flechas o arrastrando y soltando.

Important

Copiar y pegar puede ser complicado para el contenido no textual. Un poco más adelante en este post, te mostraremos cómo puedes copiar y pegar bloques enteros conservando sus estilos.

Incorporación de contenidos de otras fuentes

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ón Embeds del insertador de bloques.

Por ejemplo, para incrustar un vídeo de YouTube, todo lo que tienes que hacer es

  1. Añade el bloque dedicado a YouTube.
  2. Pega la URL directa del vídeo.
  3. Haz clic en Embed (Incrustar).
Incrustar un vídeo de YouTube en Gutenberg.

Incrustar un vídeo de YouTube en Gutenberg.

A continuación, debería ver una vista previa del vídeo incrustado en el editor.

Creación de diseños de varias columnas o agrupados

Como hemos mencionado anteriormente, una de las ventajas significativas del editor de bloques sobre el antiguo editor TinyMCE es que puedes crear diseños más complejos sin necesidad de depender de código personalizado o shortcodes.

El editor de bloques viene con dos bloques por defecto para ayudarle a hacer esto:

Ambos bloques funcionan según el principio de «anidación» de bloques, lo que significa que se colocan uno o más bloques dentro de otro.

Te mostraremos un ejemplo utilizando el bloque de columnas, pero el mismo principio básico se aplica al bloque de grupo.

Digamos que quieres crear un diseño de dos columnas donde la columna de la izquierda tiene un texto de párrafo normal, y la columna de la derecha tiene un botón.

Para empezar, utiliza el insertador de bloques para añadir el bloque de columnas. Esto mostrará un aviso en el que puedes elegir el diseño que prefieras:

Elija la estructura y la proporción de las columnas.

Elige la estructura y la proporción de las columnas.

Elegiremos un diseño de dos columnas 50/50 para este ejemplo. Con eso, verás dos cajas de igual tamaño con iconos + dentro. Para insertar contenido, puedes hacer clic en ese icono + para abrir la interfaz del insertador de bloques:

Cómo añadir contenido a las columnas.

Cómo añadir contenido a las columnas.

Una vez que hayas añadido el primer bloque a una columna, puedes pulsar el icono + para insertar bloques adicionales. O bien, puedes arrastrar y soltar un bloque desde fuera de la estructura de la columna a la misma.

10 consejos útiles de Gutenberg para trabajar de forma más productiva

Ahora que tienes una comprensión básica de cómo funciona Gutenberg, vamos a repasar algunos consejos y trucos valiosos que te ayudarán a utilizar el editor de bloques de forma más eficaz.

1. Utiliza / (barra diagonal) para insertar rápidamente los bloques

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ás comunes que necesitas usar, hay una forma mucho más rápida de insertar bloques usando sólo el teclado: / (barra diagonal).

Si pulsas «Intro» para iniciar un nuevo bloque de párrafo, puede insertar rápidamente un bloque escribiendo una barra inclinada, seguida del nombre del bloque que desea insertar.

Cuando empieces a escribir, verás una lista de todos los bloques que coinciden con tu consulta. A continuación, puedes utilizar las flechas del teclado para navegar por los bloques y pulsar «Intro» para seleccionar el bloque que quieres insertar.

Este es un ejemplo del uso de quick-insert para añadir un bloque de imagen:

Cómo utilizar la barra diagonal para insertar rápidamente los bloques.

Cómo utilizar la barra diagonal para insertar rápidamente los bloques.

2. Inserta imágenes arrastrándolas desde el escritorio

Si vas a insertar muchas imágenes, el editor de bloques incluye otra función que te permite ahorrar tiempo y eliminar la necesidad de añadir un bloque de imágenes antes de subirlas.

En su lugar, solo tienes que arrastrar el archivo de imagen directamente desde tu escritorio hasta el lugar donde quieras añadirlo a tu publicación. Cuando arrastres el archivo de imagen sobre el contenido de tu sitio, verás una línea azul que marca dónde aparece la imagen.

Una vez que libere el archivo, WordPress lo subirá automáticamente e insertará un bloque de imagen en la ubicación adecuada:

Puedes insertar imágenes arrastrando el archivo desde tu escritorio.

Puedes insertar imágenes arrastrando el archivo desde tu escritorio.

3. Utiliza un poco de formato Markdown

Si eres un fanático de la sintaxis Markdown para la creación de contenidos, te alegrará saber que el editor de bloques admite un uso limitado de Markdown, principalmente para los encabezados.

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á automáticamente en un H3, y entonces podrás seguir escribiendo el título:

El editor de bloques admite la sintaxis básica de Markdown para los encabezados.

El editor de bloques admite la sintaxis básica de Markdown para los encabezados.

Supongamos que quieres un soporte de Markdown aún más avanzado. En ese caso, puedes instalar un plugin gratuito como EditorsKit, que también te permite utilizar Markdown para las negritas, cursivas y tachados -hablaremos más sobre los plugins de Gutenberg un poco más adelante en este post.

4. Fija la barra de herramientas de formato en la parte superior del editor

Si no te gusta cómo la herramienta de formato «flota» por encima de un bloque, el editor de bloques incluye una función que te permite fijarla debajo de la barra de herramientas superior:

Puedes fijar la barra de herramientas de formato en la parte superior.

Puedes fijar la barra de herramientas de formato en la parte superior.

5. Copia un bloque y toda su configuración

El editor de bloques te permite copiar y pegar texto como lo harías en cualquier editor: «Ctrl + C» o haciendo clic con el botón derecho del ratón y eligiendo Copiar.

Sin embargo, no puedes utilizar este método para copiar y pegar un bloque entero conservando su configuración. En su lugar, tendrás que hacerlo:

  1. Selecciona el bloque.
  2. Haz clic en el icono de los tres puntos de la barra de herramientas del bloque.
  3. Selecciona Copiar.
Cómo copiar un bloque con todos sus ajustes.

Cómo copiar un bloque con todos sus ajustes.

Una vez que haya copiado el bloque de esta manera, puedes pegarlo como lo haría normalmente, es decir, con «Ctrl + V» o haciendo clic con el botón derecho del ratón y eligiendo Pegar.

6. Seleccionaa rápidamente el bloque adecuado mediante la vista de lista de bloques

Para la mayoría 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 «anidados», como insertar bloques dentro de las columnas o agrupar bloques.

El editor incluye una opción de vista de lista, que puede abrir desde la barra de herramientas superior para tener en cuenta esto. La vista de lista le mostrará todos los bloques, incluidos los bloques anidados con sangría.

Puede seleccionar un bloque haciendo clic en él en la lista, y el editor también resaltará el bloque cuando pase el ratón por encima de él en la lista.

En el ejemplo siguiente, se puede ver:

Para seleccionar el bloque padre principal, basta con abrir la vista de lista y seleccionarlo de la lista:

La apertura de la vista de lista le ayuda a navegar por los bloques anidados.

La apertura de la vista de lista le ayuda a navegar por los bloques anidados.

7. Abre el editor de código (para bloques individuales o entradas completas)

Una de las ventajas del editor de bloques de Gutenberg es que permite configurar muchos estilos y opciones de diseño sin recurrir al código. Sin embargo, todavía puede haber algunas situaciones en las que se quiera acceder al código directamente para los usuarios más avanzados.

Para ayudarte a hacerlo, el editor Gutenberg viene con diferentes opciones.

En primer lugar, puedes editar el código de un bloque individual, lo que resulta útil para realizar pequeños ajustes como la inserción de una clase CSS. Para ello, abre el menú desplegable de la barra de herramientas del bloque y selecciona Editar como HTML:

Cómo editar un solo bloque como HTML.

Cómo editar un solo bloque como HTML.

Al seleccionar esta opción, la vista previa visual se convertirá en un editor de código solo para ese bloque, sin afectar a las vistas previas visuales de otros bloques:

El editor HTML para un solo bloque.

El editor HTML para un solo bloque.

En segundo lugar, el editor incluye un bloque HTML personalizado que puedes utilizar para incrustar fragmentos de HTML completos. Todo lo que tienes que hacer es añadir el bloque y pegar tu código.

Por último, también puede abrir el editor de código completo para todo el documento utilizando el menú desplegable de la esquina superior derecha o un atajo de teclado: Ctrl + Shift + Alt + M.

Ten en cuenta que, cuando abras el editor de código completo, también verás el marcado de formato de bloque de Gutenberg, por lo que puede ser un poco complicado navegar:

El editor de código completo, que incluye el marcado de bloques.

El editor de código completo, que incluye el marcado de bloques.

8. Aprende los atajos de teclado

El editor de bloques incluye un montón de atajos de teclado que te permiten realizar acciones comunes. Merece la pena dedicar tiempo a aprenderlos porque te harán más productivo y te ahorrarán muchos clics repetitivos del ratón.

Estos son algunos de los atajos más comunes – si estás en un Mac, querrás cambiar «Ctrl» por «Comando (⌘)»:

También puedes abrir una hoja de trucos completa con todos los atajos de teclado cuando estés en el editor. Para ello, puedes utilizar un atajo de teclado -Shift + Alt + H– o hacer clic en el icono del menú de los «tres puntos verticales» () en la esquina superior derecha del editor y elegir Atajos de teclado en el menú desplegable.

9. Limpia tu interfaz ocultando los bloques

El editor de bloques añade muchos bloques por defecto, pero probablemente no los utilices todos. Para ayudarte a limpiar la interfaz, el editor incluye una función llamada Gestor de bloques que te permite desactivar y ocultar los bloques que no estés utilizando:

Puede desmarcar los bloques para ocultarlos del insertador de bloques.

Puede desmarcar los bloques para ocultarlos del insertador de bloques.

10. Añade anclajes para los enlaces de salto

Finalmente, nuestro último consejo útil es la función de enlaces de anclaje HTML del editor de bloques, que permite crear enlaces de salto a secciones específicas de su contenido (por ejemplo, para un índice).

En el editor clásico, tenías que añadir anclas HTML usando código manualmente. Pero con Gutenberg, solo tienes que introducir el texto de tu enlace de salto en el campo de anclaje HTML del área avanzada de la configuración de cualquier bloque:

¿Necesitas una solución de alojamiento que te dé una ventaja competitiva? Kinsta te ofrece una velocidad increíble, seguridad de última generación y autoescalado. Consulta nuestros planes.

Cómo establecer un texto de anclaje personalizado.

Cómo establecer un texto de anclaje personalizado.

Profundizando en conceptos más avanzados del editor de bloques

En este punto, hemos cubierto bastante sobre cómo funciona el editor y algunos consejos para trabajar más eficientemente. Ahora que tienes esos conocimientos básicos, vamos a repasar dos tácticas un poco más avanzadas:

Patrones de bloques

Un patrón de bloques es esencialmente una plantilla. Es una colección de bloques dispuestos en un diseño. Puede ser algo menor, como una disposición de botones. Incluso puede ser una plantilla para una sección entera, o incluso para una página entera.

WordPress viene con sus propios patrones de bloques incorporados, y los desarrolladores de plugins de terceros también pueden añadir los suyos propios.

Puedes insertar nuevos patrones desde la pestaña Patrones del insertador de bloques principal:

Cómo insertar un patrón de bloques.

Cómo insertar un patrón de bloques.

Una vez que hayas insertado el patrón de bloques, podrá editar completamente todos los bloques que componen ese patrón, igual que si hubiera añadido los bloques manualmente.

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 plugin gratuito Block Pattern Builder de Justin Tadlock. Con el plugin activado, puedes crear tus diseños usando Gutenberg y luego guardar ese diseño como un patrón.

Para empezar, dirígete a Patrones de bloques > Añadir nuevo para crear un nuevo patrón utilizando el editor. Asegúrate de publicarlo cuando hayas terminado:

Creación de su patrón de bloques personalizado.

Creación de tu patrón de bloques personalizado.

Una vez hecho esto, podrás insertar tu patrón de bloque como cualquier otro – búscalo en la sección Sin categoría:

Insertar el patrón de bloques personalizado que ha creado.

Insertar el patrón de bloques personalizado que ha creado.

El equipo del núcleo de WordPress también ha lanzado una biblioteca oficial de patrones de bloques en WordPress.org. Puedes insertarlos en el editor usando copiar y pegar. Solo tienes que hacer clic en el botón Copiar de la página web de la biblioteca de patrones de bloques y luego pegarlo en el editor.

Bloques reutilizables

Los bloques reutilizables son una colección de uno o más bloques que puedes insertar como grupo. Son similares a los patrones de bloques, pero con una diferencia clave:

Mientras que un patrón de bloque es una plantilla inicial que editarás en cada caso, un bloque reutilizable será el mismo en todos los casos en que lo incluyas.

Si actualizas el bloque reutilizable, esos cambios se aplicarán automáticamente a todas las instancias existentes.

Por ejemplo, puedes utilizar un bloque reutilizable para crear una llamada a la acción (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.

Para crear un bloque reutilizable en el editor de Gutenberg WordPress, haz clic y arrastra para seleccionar uno o más bloques. A continuación, haz clic en la opción Añadir a bloques reutilizables. (El plugin que mencionamos anteriormente también te permite crear un patrón de bloques de esta manera).

Cómo crear un bloque reutilizable.

Cómo crear un bloque reutilizable.

Tus bloques se agruparán entonces – puedes darle un nombre a tu bloque reutilizable en la configuración del bloque reutilizable en la barra lateral.

Ahora, podrás insertar ese bloque reutilizable buscando su nombre. Puedes utilizar `/` para insertar rápidamente el bloque:

Cómo insertar un bloque reutilizable.

Cómo insertar un bloque reutilizable.

Si cambias el bloque reutilizable, tendrás la opción de publicar esos cambios cuando actualices la entrada. Y si decides publicar los cambios del bloque reutilizable, esos cambios se aplicarán automáticamente a cada instancia del bloque reutilizable:

Cómo actualizar un bloque reutilizable.

Cómo actualizar un bloque reutilizable.

Extensión del editor de bloques con plugins

Hasta ahora, nos hemos centrado en las características principales del editor de bloques, con algunas excepciones.

Sin embargo, una de las cosas buenas del editor de bloques es que puedes utilizar plugins para extender, al igual que con el resto de tu sitio de WordPress.

Puedes utilizar los plugins para varias cosas:

Más allá de los plugins construidos específicamente para Gutenberg, muchos otros plugins de WordPress también pueden utilizar el editor de bloques.

Por ejemplo, si usas un plugin de formulario de contacto, el plugin puede darte un bloque dedicado que puedes usar para incrustar tus formularios. Lo mismo ocurre con muchos otros tipos de plugins.

Una vez que domines los fundamentos del editor, vale la pena explorar estos plugins para ver si encuentras alguno que pueda mejorar tu experiencia.

Estas son algunas de las opciones más populares en el momento en que escribimos este post:

Puedes ver más en la sección de plugins habilitados para el bloqueo de WordPress.org.

Editor de WordPress Gutenberg y edición completa del sitio

Como hemos mencionado al principio de este post, el proyecto Gutenberg pretende ser mucho más que un simple editor de contenidos.

El plan a largo plazo es que WordPress pase a la edición completa del sitio. 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ágina, las barras laterales, etc.

A diferencia del lanzamiento del editor de bloques en WordPress 5.0, Full Site Editing tiene un enfoque iterativo. Será una adición gradual de características, donde cada nueva versión se basa en las anteriores.

Por ejemplo, a partir de WordPress 5.8, ahora utilizarás el editor de bloques para gestionar los widgets de tu sitio. También tendrás acceso a algunos bloques nuevos centrados en el tema, como el logotipo del sitio, la navegación, el bucle de consulta (te permite crear plantillas para las entradas de la lista), y más.

Pero mientras que el Full Site Editing oficial es todavía un trabajo en progreso, algunos intrépidos desarrolladores de temas ya han comenzado a lanzar temas basados en bloques, que nos dan algunos ejemplos bastante buenos de cómo podría funcionar el Full Site Editing.

Además, puedes acceder a algunas de las funciones experimentales de Full Site Editing en la versión del plugin de Gutenberg.

Así que, veamos dos cosas:

  1. Las funciones básicas de edición de sitios completos que tenemos ahora a partir de WordPress 5.8
  2. Cómo podría funcionar la edición completa del sitio en base a las características experimentales
Important

Todo esto podría cambiar en pequeños o grandes aspectos para cuando la Edición Completa del Sitio se convierta en la corriente principal. Son solo para dar una idea de lo que podría ser.

Uso de bloques en lugar de widgets

A partir de WordPress 5.8, ahora utilizarás bloques para controlar tus barras laterales y pies de página en lugar de widgets (por defecto – puede desactivar esto si lo desea).

Cuando vayas a Apariencia > Widgets, podrás gestionar el contenido de cada área de widgets mediante el editor de bloques.

Puedes ver que cada área de widgets tiene un editor independiente, que puedes abrir haciendo clic en los botones del acordeón. También puedes mover los bloques entre las diferentes áreas de widgets haciendo clic en los iconos de flecha con gancho que hay cerca de la parte superior:

Uso de bloques para editar áreas de widgets.

Uso de bloques para editar áreas de widgets.

Uso de nuevos bloques temáticos

WordPress 5.8 también añade nuevos bloques temáticos dedicados que te permiten insertar contenido dinámico en tu sitio. Estos bloques también desempeñarán un papel fundamental a la hora de diseñar plantillas para tu tema en futuras versiones.

Por ejemplo, digamos que quieres incrustar una lista de tus contenidos más recientes en una página. Ahora, sólo tienes que añadir el bloque Query Loop, y podrás insertar dinámicamente contenido de un tipo de entrada concreto (por ejemplo, entradas de blog), incluyendo el filtrado por categorías, autores, palabras clave y mucho más:

Uso del bloque de bucle de consulta para mostrar contenido dinámico.

Uso del bloque de bucle de consulta para mostrar contenido dinámico.

Dentro del bloque Query Loop, puedes anidar los otros bloques temáticos para controlar la plantilla del contenido que se muestra allí. Por ejemplo, puedes mostrar la fecha de cada post añadiendo el bloque Post Date a tu plantilla.

Con el bloque Query Loop en WordPress 5.8, puedes diseñar tu propia página de listado de blog personalizada. Una edición completa del sitio adecuada ampliará esto a todo el tema, así que vamos a verlo a continuación.

Diseño de plantillas de contenidos

El modo de edición de plantillas es otra de las novedades de WordPress 5.8. Te permite utilizar Gutenberg para diseñar las plantillas de tus entradas y páginas mediante bloques.

Actualmente, esta función solo está disponible si el desarrollador de tu tema la ha habilitado específicamente, por lo que es posible que no la veas si el desarrollador de tu tema aún no lo ha hecho.

Si estás usando un tema que soporta el modo de edición de plantillas en WordPress 5.8, verás una nueva sección de Plantillas en la pestaña de Publicaciones/Páginas de la barra lateral cuando estés editando una publicación o página. Puedes crear una nueva plantilla o elegir una de las existentes:

Creación de una nueva plantilla en los temas que soportan el modo Plantilla.

Creación de una nueva plantilla en los temas que soportan el modo Plantilla.

Si creas una nueva plantilla, podrás darle un nombre que te ayude a recordarla. A continuación, podrás diseñar la plantilla utilizando el modo especial del editor de plantillas, junto con los nuevos bloques temáticos que detallamos en la sección anterior:

El nuevo editor de plantillas de WordPress 5.8.

El nuevo editor de plantillas de WordPress 5.8.

Ejemplo de edición del sitio completo de Blockbase

Blockbase es un tema de Automattic que funciona como una especie de «prueba de concepto» y patio de recreo para Full Site Editing. Todavía es experimental, por lo que podría cambiar antes de que estas características estén en el núcleo del software de WordPress. Pero proporciona una idea de Full Site Editing.

Con el tema y la versión del plugin de Gutenberg instalados, obtienes una nueva área del Editor del Sitio que te permite «construir» tu tema usando el mismo editor que viste anteriormente.

La diferencia fundamental, sin embargo, es que no estás construyendo una sola entrada o página. En su lugar, estás utilizando el editor de bloques de Gutenberg WordPress para crear las plantillas reales que todo el contenido de tu sitio utilizará – por ejemplo, la plantilla para tu cabecera.

Un ejemplo temprano de la edición completa del sitio.

Un ejemplo temprano de la edición completa del sitio.

Para ayudarte a conseguirlo, tendrás una serie de nuevos bloques de diseño, incluidos algunos de los bloques temáticos que has visto anteriormente:

Los nuevos bloques de diseño con Full Site Editing.

Los nuevos bloques de diseño con Full Site Editing.

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:

Edición de diferentes plantillas de temas.

Edición de diferentes plantillas de temas.

De nuevo, la idea es que con el tiempo podrás utilizar el editor Gutenberg para controlar todas las plantillas/diseños de tu tema. Y cuando eso ocurra, la creación de un sitio de WordPress se verá bastante diferente de lo que vemos como «normal» en 2021.

En los más de 2 años transcurridos desde el lanzamiento de Gutenberg, muchas cosas han cambiado, ¡y aún hay muchas más por venir! 😲 Echa un vistazo a esta guía para ver lo que viene en los próximos meses y años 👀Click to Tweet

Resumen

Desde 2018, el editor de bloques Gutenberg ha avanzado mucho. Con el próximo paso hacia el Full Site Editing, el editor de bloques solo se convertirá en una parte aún más importante de WordPress.

En este post, hemos cubierto todo, desde los fundamentos del editor de bloques hasta los consejos y características avanzadas. También hemos visto cómo podría ser la edición completa del sitio en el futuro.

Si aún no estás preparado para probarlo, puedes desactivar permanentemente Gutenberg y utilizar el editor clásico. Sin embargo, Gutenberg seguirá creciendo, así que no es algo que quieras ignorar para siempre.

¿Todavía tienes alguna pregunta o idea sobre el editor? Si es así, nos encantaría escuchar tus comentarios, tanto los buenos como los malos.


Ahorra tiempo, costes y maximiza el rendimiento del sitio con:

  • Ayuda instantánea de expertos en alojamiento de WordPress, 24/7.
  • Integración de Cloudflare Enterprise.
  • Alcance de audiencia global con 28 centros de datos en todo el mundo.
  • Optimización con nuestra herramienta de monitoreo de rendimiento de aplicación integrada.

Todo esto y mucho más, en un plan sin contratos a largo plazo, migraciones asistidas y una garantía de devolución del dinero de 30 días. Conozca nuestros planes o habla con el departamento de ventas para encontrar el plan más adecuado para ti.