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:
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 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:
- Editor TinyMCE de WordPress: Este es el editor clásico que utilizaba WordPress antes de WordPress 5.0.
- Plugins de construcción de páginas: Se trata de plugins de terceros que añaden a WordPress un diseño visual de arrastrar y soltar.
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:
- Gutenberg ofrece un fondo de diseño más visual
- No necesitas usar shortcodes para incrustar contenido – tienes un sistema de bloques unificado
Contras:
- Algunas personas encuentran que escribir en Gutenberg es un poco difícil de manejar porque cada párrafo es un bloque separado. En el caso de las publicaciones largas, puede ser difícil manipular el texto. Quizá prefieras escribir en otro editor y pegar el texto en Gutenberg cuando hayas terminado.
- Aunque el rendimiento de Gutenberg ha mejorado significativamente, todavía puede retrasarse en las publicaciones masivas, algo que es menos probable que ocurra con el editor clásico.
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:
- Gutenberg es una funcionalidad básica, lo que significa que no tienes que preocuparte por los problemas de compatibilidad.
- Al ser una funcionalidad básica, todos los desarrolladores pueden incorporar la compatibilidad con Gutenberg en sus plugins, mejorando la compatibilidad.
- Gutenberg produce un código más limpio y ligero. En igualdad de condiciones, un diseño construido con Gutenberg suele cargar más rápido que el mismo diseño hecho con un constructor de páginas.
Contras:
- Gutenberg no ofrece una edición visual adecuada como un constructor de páginas. Es más accesible que el editor clásico, pero sigue sin ser 100% fluido como un constructor de páginas.
- Los creadores de páginas siguen ofreciéndole opciones de diseño y maquetación más flexibles.
- La mayoría de los constructores de páginas ofrecen un movimiento de arrastrar y soltar mucho más fluido y flexible.
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:
El editor tiene tres partes principales:
- El contenido: Tu contenido ocupa la mayor parte de la pantalla. Verás una vista previa de cómo se verá en la parte frontal de tu sitio. No es 100% exacta, pero deberías tener una idea bastante buena del diseño final.
- Barra de herramientas superior: La barra de herramientas de la parte superior te ayuda a insertar nuevos bloques, deshacer/rehacer y acceder a otros ajustes vitales
- Barra lateral: La barra lateral contiene dos pestañas. La pestaña de publicaciones te permite configurar los ajustes a nivel de publicación como tus categorías, etiquetas, imagen destacada, etc. La pestaña Bloque muestra la configuración del bloque que has seleccionado -más adelante.
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»:
Por ejemplo, este es el aspecto de la interfaz del editor si se utiliza el nuevo tema por defecto Twenty-One:
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:
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:
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:
- Añadir negrita o cursiva
- Insertar enlaces
- Cambiar las alineaciones
- Añadir formato, como código en línea, tachado y suscripción
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:
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.
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:
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:
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
- Añade el bloque dedicado a YouTube.
- Pega la URL directa del vídeo.
- Haz clic en Embed (Incrustar).
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:
- Columnas: Cree un diseño de varias columnas.
- Grupos: Agrupa varios bloques. Por ejemplo, puede utilizarlo para establecer un color de fondo para toda una sección que se muestra detrás de numerosos bloques.
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:
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:
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:
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:
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:
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:
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:
- Selecciona el bloque.
- Haz clic en el icono de los tres puntos de la barra de herramientas del bloque.
- Selecciona Copiar.
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:
- El bloque de columnas principales
- Bloques anidados para cada columna
- Un bloque de grupo anidado dentro de una columna
- Un bloque de encabezamiento anidado dentro del bloque de Grupo
Para seleccionar el bloque padre principal, basta con abrir la vista de lista y seleccionarlo de la lista:
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:
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:
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:
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 (⌘)»:
- Abrir la vista de lista de bloques – Shift + Alt + O
- Guardar los cambios – Ctrl + S
- Deshacer los últimos cambios – Ctrl + Z
- Rehacer el último deshecho – Ctrl + Shift + Z
- Duplicar los bloques seleccionados – Ctrl + Shift + D
- Suprimir el/los bloque/s seleccionado/s – Shift + Alt + Z
- Insertar un nuevo bloque antes de los bloques seleccionados – Ctrl + Alt + T
- Insertar un nuevo bloque después de los bloques seleccionados – Ctrl + Alt + Y
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:
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:
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
- Bloques reutilizables
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:
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:
Una vez hecho esto, podrás insertar tu patrón de bloque como cualquier otro – búscalo en la sección Sin categoría:
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).
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:
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:
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:
- Añadir nuevos bloques de contenido: Los plugins pueden añadir nuevos bloques que puedes utilizar en tus diseños. Es el caso de uso más común para los plugins de Gutenberg en este momento.
- Añadir nuevas plantillas/patrones de bloques: Algunos plugins utilizan el sistema de patrones de bloques del núcleo, mientras que otros han creado sus propios sistemas de plantillas.
- Cambiar la interfaz/características del editor: Puedes utilizar plugins para modificar el propio editor. Por ejemplo, puedes añadir un mejor soporte de Markdown.
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:
- Las funciones básicas de edición de sitios completos que tenemos ahora a partir de WordPress 5.8
- Cómo podría funcionar la edición completa del sitio en base a las características experimentales
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 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:
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:
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:
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.
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:
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:
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.
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.
Salman Ravoof es desarrollador web autodidacta, escritor, creador y un gran admirador del Software Libre y de Código Abierto (FOSS, Free and Open Source Software). Además de la tecnología, le apasionan la ciencia, la filosofía, la fotografía, las artes, los gatos y la comida. Obtén más información sobre él en su sitio web, y conecta con Salman en X.
La versión del plugin que está en el repositorio de WordPress no es igual que esta visualmente ¿No se ha actualizado el plugin?
¿Qué pasa con los botones de «Añadir Formulario» de WPFOrms o «Añadir descarga» de Download Monitor? ¿Desaparecen? ¿Tienen que crear un bloque propio?
Gracias por la info
Hola Jim, gracias por tu comentario.
Sí, Gutenberg sigue siendo en beta así visualmente se está cambiando constantemente. Recomendamos consultar con los desarrolladores de WPForms y Download Monitor para verificar su estado de compatibilidad con Gutenberg. Al lanzar WordPress 5 el editor actual estará disponible en caso de que los desarrolladores no estén puestos al día.
Saludos,
Peter
Funcional y estéticamente es una copia de Medium.
Lo probé y me crasheo todo el sitio. Elementor no es compatible con Gutemberg (e intuyo que ningçun editor visual lo es).
Mi web estuvo caída un tiempo, y la única solución fue desistalar Elementor y Gutemberg desde cPanel.
Por favor, adviertan este problema. No soy el único que ha tenido problemas similares con Gutembers y maquetadores visuales.
Hola David, gracias por seguir nuestro blog!
Gutenberg acabo de ser sacado de su estado Beta, así aún no recomendamos usarlo en sitios en producción, especialmente con editores visuales ya que entran en conflicto con Gutenberg.
Saludos,
Peter
Hola. Las imagenes son un recurso vital para muchos blogueros y gutenberg no permite traerlas de otro sitio.
Por lo demás, lo veo bien.
Saludines.
Hola, gracias por tu comentario!
Gutenberg funciona bien con las imágenes, simplemente debes cargarlas a la biblioteca de medios como antes!
Saludos,
Peter
Lo probé, lo desinstalé, al subir imágenes las invertía, las dejaba apaisadas aunque en el pc estaban verticales, al editar el tamaño, mostraba la imagen sola en pantalla casi completa, al volver al texto todo estaba sin cambio
Hola Raúl, gracias por seguir nuestro blog.
Gutenberg sigue siendo muy nuevo y los errores / conflictos se solucionan a diario. Si tienes problemas con Gutenberg, te recomendamos volver al Editor clásico por ahora hasta que Gutenberg esté un poco más avanzado.
Saludos,
Peter
Esto sera como el caso de windows 8, un completo fracaso, solo hay que ver la cantidad de votos negativos que tiene este editor chatarra. las cosas van evolucionando y eso es normal, pero cambiar tan drasticamente la forma en que hemos editado en WordPress por años de un día para otro no tiene sentido, esto se debió meter como algo opcional y no venderlo como el futuro.
Leyendo tu artículo me atrevo a suponer que Gutenberg será algo como un tipo builder nativo? Se ve bueno, aunque seguiré usando el Classic Editor mientras Gutenberg se hace más estable y compatible.
Hola Diego,
Sí, Gutenberg tiene un largo camino por recorrer. El Editor clásico estará disponible durante unos años más, por lo que tendrás tiempo para probarlo y acostumbrarse.
Saludos,
Peter
Cuando escribo con gutenberg, al borrar la primera letra de una palabra automáticamente se borra el espacio anterior a esta, retrocediendo a la palabra pasada. Como quito esta opcion? Es realmente molesto. Gracias de antemano.
Es un AGracias por el artículo. Sin embargo, debo hacer notar una corrección necesaria: es un error común (en Europa) creer que la imprenta es un invento de Guttenberg. Es falso. De hecho 500 años atrás (ya hace mil años!) se sabe que los chinos tenían impresas de piezas móviles (es decir, imprenta en el sentido de Guttenberg).
De hecho, el documento impreso con imprenta más antiguo que todavía existe es coreano (territorio de la actual Corea), en donce 300 años atrás que Guttenberg hicieron un uso super-intensivo de la imprenta china:
https://es.wikipedia.org/wiki/Imprenta#/media/File:Jingangjing.jpg
En fin, yo descubrí estos hechos a raíz de mi reciente afición por el k-drama, pero creo que es justo y necesario reconocer a cada autor la autoría de sus inventos ;-)
Saludos!
Sergi