
En este artículo te proponemos 10 recursos y trucos de Gutenberg. Como sabes, Gutenberg es el nuevo editor de WordPress que puedes utilizar desde la versión 5.0 de esta plataforma de blogging. Pero es mucho más que eso. Es un nuevo paradigma no solo en la composición de contenidos sino también en el diseño de themes de WordPress.
Piopíalo
[Tweet «Me gusta este post con recursos y trucos de #Gutenberg»]
Si eres suscriptor de Blogpocket, puedes descargarte nuestra checklist para probar Gutenberg antes de instalar WordPress 5.0. Si ya has instalado WordPress 5.0 y algo te falla (o no quieres pasarte al nuevo editor de bloques todavía), instala el plugin Classic Editor para desactivarlo o saltar de uno a otro indistintamente.
Cómo probar Gutenberg y actualizar a WordPress 5.0
La actualización a WordPress 5.0 puede llevar consigo que no te funcione el editor de bloques de Gutenberg. La causa podría ser alguna incompatibilidad con plugins o tu theme activo. Si no has llevado a cabo la transición a WordPress 5.0, lee primero esta guía.
Preguntas frecuentes
¿Qué es Gutenberg?
Gutenberg facilita a los usuarios crear publicaciones y páginas mediante el uso de bloques. A partir de la versión 5.0 de WordPress se abandona el clásico editor de tipo WYSIWYG.
El nuevo editor de bloques Gutenberg se parece algo a plugins del estilo «Page Builder by SiteOrigin». Pero con Gutenberg ya no necesitarás constructores de páginas de ese estilo. El objetivo es que la creación de páginas sea más fácil y puedas estructurar los contenidos a tu gusto.
Para saber más sobre Gutenberg, lee Gutenberg de WordPress 5.0: qué es y cómo funciona el nuevo editor.
¿Qué son los bloques?
Para WordPress un bloque es “el término abstracto utilizado para describir unidades de código HTML que, juntas, forman el contenido o el diseño de una página web”.
En pocas palabras, los bloques están formados por uno o varios formatos de contenido que incluyen texto, imágenes, videos y complementos de diversos tipos.
Si quieres aprender a editar con los bloques de Gutenberg, te invito a ver nuestro videotutorial
¿Puedo crear una landing page?
El objetivo de Gutenberg es proporcionar una herramienta sencilla para conseguir diseños atractivos para tus contenidos, sin tener que conocer ni usar código HTML.
Puedes utilizarlo para editar entradas, páginas e, incluso, la página de inicio de tu sitio web.
Aprende a crear una landing page viendo el vídeo que se incluye en este post.
Recursos y trucos de Gutenberg
Pasemos, sin más dilación, a ver los recursos y trucos de Gutenberg que te proponemos.
1. Atomic Blocks, la apuesta de StudioPress y WP Engine
Tener más control para crear y desarrollar rápidamente cualquier tipo de sitio que quieras es ya una realidad palpable con WordPress 5.0 y Gutenberg. Además, se han creado un montón de plugins con librerías de bloques. ¡Tan fácil como instalar y activar el plugin y tienes listo el catálogo de bloques para usar!
El primero de esta serie de recursos y trucos de Gutenberg es una colección de bloques, creado en StudioPress y WP Engine, llamada Atomic Blocks. El catálogo de bloques disponibles ofrece bloques muy útiles.
Te recuerdo que StudioPress es la empresa que comercializa Genesis Framework, el sistema de plantillas que recomendamos, aquí en Blogpocket.
Lo bueno de este recurso
Incluye algunos bloques interesantes, como el de la caja de autor (ver nuestra perfil al final de este artículo) y el de la tabla de precios. También, han desarrollado un theme gratuito especialmente preparado para Gutenberg.
Echa un vistazo a la introducción a Atomic Blocks en su blog para obtener más información sobre este recurso.
2. Lista de plugins para Gutenberg

Más recursos y trucos de Gutenberg…
Sin duda, la posibilidad de instalar y activar plugins de todo tipo para Gutenberg es el lado amable de editar con bloques. Pero hay que tener cuidado con lo que instalas. En primer lugar, porque no todo plugin es confiable. Puede estar mal codificado, ser incompatible con alguno otro recurso de tu instalación o desoptimizar tu nivel de rendimiento. Prueba plugins de desarrolladores de confianza, como el anteriormente citado, Atomic Blog que tiene a Studio Press y WP Engine detrás.
Con esa salvedad, te recomiendo que eches un vistazo, con el fin de poder probar recursos que pueden ayudarte mucho a crear un sitio web más funcional a la lista de plugins para Gutenberg de Blogging Cage: 12 Best Gutenberg Plugins to Supercharge Your Blog in 2019.
Lo bueno de esta lista de plugins
Son recursos confiables (aunque siempre debes probar antes de implantar uno en producción). Y vas a tener un sinfín de posibilidades nuevas con el que impulsar tu sitio web.
3. Videotutorial: cómo crear una landing page con Gutenberg
¿Te gustan estos recursos y trucos de Gutenberg? No te pierdas este videotutorial donde se explica cómo crear una landing page con Gutenberg paso a paso.
Nuestra página de aterrizaje para suscribirse a la newsletter es una versión beta realizada con el editor de Gutenberg. En el siguiente vídeo se explica el proceso para crearla, paso a paso. Esperamos que este sea uno de los trucos para Gutenberg que te sea útil.

Lo bueno de este videotutorial
Aprenderás cómo utilizar bloques de otros plugins que añaden bloques como CoBlocks y Stackable.
Más plugins de bloques a probar: Qubely.
4. Revolution Pro, primer theme de Genesis desarrollado con Atomic Blocks
La primera recomendación de esta serie de trucos de Gutenberg es precisamente Atomic Blocks de StudioPress. Comentábamos en ese primer punto que también Atomic Blocks tenía su propio theme orientado a bloques.
Pero Genesis ya cuenta con su primer theme desarrollado por StudioPress con bloques: se denomina Revolution Pro y aquí puedes ver una demo.
Revolution Pro es el primer theme de WordPress que ha creado StudioPress para Genesis 2.8. Se construyó desde cero con los bloques nativos que se encuentran en la última versión de WordPress, así como con Atomic Blocks.
Lo bueno de Revolution Pro
Probablemente, en las próximas semanas veamos un aluvión de nuevos themes creados para Genesis y optimizados para ayudar a aprovechar la última versión de WordPress 5.0. Es muy interesante el nuevo enfoque, orientado a los bloques, de la configuración de este theme de Genesis, que se aleja bastante de la personalización clásica a la que estamos acostumbrados en este sistema de plantillas.
5. Atajos de teclado

¿Continuamos con estos recursos y trucos de Gutenberg?
Esto es algo obligado en cualquier editor y Gutenberg contiene algunos «huevos de pascua» en forma de atajos de teclado.
He aquí algunos atajos de teclado que descubrimos gracias al blog de Yoast.
Simplemente escribiendo 1. como el comienzo de un nuevo párrafo, el editor de bloques lo convertirá en un elemento de lista numerada.
Solo escribiendo un asterisco (*) + espacio, el editor de bloques lo convertirá en un elemento de la lista.
En lugar de hacer clic en el círculo con los íconos más para comenzar a buscar su próximo bloque, en realidad puede escribir la barra diagonal (/) para encontrar los bloques más utilizados.
Simplemente escribiendo en cualquier lugar entre dos o seis hashtags en una fila + espacio, el editor de bloques lo convierte en el encabezado correspondiente. Significado: ### + espacio convertirá el bloque en un encabezado H3.
Obtén un popup en el editor con atajos de teclado tecleando CTRL+OPTION+h (Mac) o May+Alt+h (Windows).
Y si quieres perderte en un sinfín de atajos de teclado para Gutenberg, ahí está el Sr. Tellado, Premio Nobel de los plugins WPO (*), con el listado más completo: Todos los atajos de teclado de Gutenberg, el nuevo editor de WordPress.
(*) Fernando Tellado es el autor del plugin WPO Tweaks (o Mejoras de WPO). Ese plugin forma parte de lo que en Blogpocket hemos denominado «Paquete WPO». Y el «Paquete WPO», formado por tres plugins, es una parte del método Blogpocket para optimizar al 100 % un sitio web de WordPress. ¿Quieres conocer a fondo el método Blogpocket WPO? Lee: Cómo optimizar WordPress paso a paso – Guía completa y vídeotutorial 2019
Lo bueno de este truco
Seguramente irás más rápido en la composición y configuración de tus bloques. Apréndete los correspondientes a las operaciones que más uses.
6. Widget de bloques reutilizables
Vamos con uno de los trucos de Gutenberg más provechoso. Los bloques reusables es una característica muy útil de Gutenberg para no tener que repetir el trabajo de composición y configuración de bloques idénticos.
Haciendo clic en los tres puntos suspensivos (parte superior derecha, en la botonadura cuando marcas un bloque) verás la opción «Añadir a los bloques reutilizables» (ver imagen siguiente). Cuando añades un bloque a esa sección, puedes elegirlo como nuevo bloque a partir de ese momento.

Así es como hemos implementado la caja del perfil de autor que aparece al final de cada post.
¿Cómo se añade dicha caja con el perfil en cada una de las páginas de entrada del blog? Como usamos un theme de Genesis, solo habría que llevar un widget con la caja del perfil al área de la estructura del sitio, denominado «Después de la entrada» (*). El contenido de todos los widgets que se arrastren a ese área se mostrarán al final de cada post.
(*) Aprende cómo se configura un theme de genesis aquí.
Genesis posee un widget propio para mostrar la caja con el perfil de autor pero utiliza Gravatar, algo que no es muy aconsejable pues desoptimiza mucho el rendimiento. Así que lo que hicimos fue crear un bloque con Atomic Blocks, en un post en borrador, para el perfil de autor y lo convertimos en bloque reutilizable. Después, instalamos y activamos el plugin Reusable Gutenberg Blocks Widget . Con este plugin ya se puede arrastar su widget al área «Después de la entrada» y elegir el bloque reutilizable correspondiente a la caja de autor.
Lo bueno de usar bloques reutilizables
Puedes componer tu propia librería de bloques a tu gusto. Entre los bloques que es posible añadir con plugins como Atomic Blogs, CoBlocks o Stackable; y los que tú mismo puedes crear como reutilizables, posees un sinfín de posibilidades.
7. Cómo gestionar bloques reusables
Estamos viendo un conjunto de recursos y trucos de Gutenberg para que profundices un poco más en esta nueva forma de ver el diseño de un theme y la composición de contenidos.
En el truco anterior hemos visto como crear un bloque reusable y cómo insertar uno en la columna lateral del blog (o en cualquier área de widgets del theme activo) mediante el uso de un widget creado con el plugin Reusable Gutenberg Blocks Widget.

Pero los bloques reusables también pueden insertarse en un post, página o post type. Simplemente, hay que abrir la colección de bloques disponible o búsqueda de bloques (ver imagen anterior), seleccionar el apartado «Reutilizable» y elegir el bloque reusable en cuestión.
Ten en cuenta que si modificas un bloque reusable, se modifican todas sus copias, en cualquier sitio en las que estas se encuentren. Si deseas modificar solo una de sus copias, convierte el bloque primero a «bloque normal» (ver imagen siguiente).

Hay una forma de gestionar todos los bloques reusables, tal y como estamos acostumbrados en WordPress a manejar listas de elementos (plugins, entradas, etc.). A la página de gestión de bloques se llega, haciendo clic en el botón de añadir un bloque y mediante la sección «Reutilizable» (ver imagen siguiente). Ahí verás un enlace para ir a la página de gestión de bloques reusables («Gestionar todos los bloques reutilizables»).

Los bloques reusables también se pueden exportar a otro blog. Para ello, acude a la página de gestión de bloques reusables y en la lista haz clic en «Exportar como JSON». En la página de gestión de bloques reusables aparece el botón «Importar de JSON» para importar bloques reutilizables desde otro WordPress.
Y, por último, tenemos la selección múltiple de bloques. Lo que nos podría llevar a convertir a reusable no un solo bloque sino un conjunto de ellos. Simplemente, hay que seleccionar varios bloques contiguos (de la misma forma que seleccionamos un texto para formatearlo) marcándose en azul (ver imagen siguiente). Y, después, haciendo clic en los puntos suspensivos verticales, elegir la opción «Añadir a los bloques reutilizables».

Lo bueno de este truco
Las posibilidades que aportan los bloques reusables son infinitas en el diseño de un theme y en la composición de contenidos. Ahorran tiempo no solo en el desarrollo de un sitio sino también si estás implementando varios. Poder gestionarlos desde un único lugar permite mayor productividad.
8. La zanahoria de Gutenberg Block Design Library
Como ves, trucos de Gutenberg hay muchos. Pero en este artículo te estamos dando los mejores.
La mayoría de los plugins que añaden bloques funcionan de la siguiente manera. En primer lugar, añaden los bloques a la lista estándar por secciones, que se obtiene cuando haces clic en el signo + dentro de un círculo; y visible en la parte superior cuando marcas un bloque. Por otra parte, son bloques desarrollados y configurados por cada plugin.
Ten en cuenta que WordPress posee un catálogo propio de bloques, integrado en el core. No es lo mismo utilizar éstos, hablando de posibles problemas o incompatibilidades, que los de los plugins de terceros.
Gutenberg Blog Design Library es un plugin de terceros para añadir bloques pero que utiliza solo los bloques que WordPress trae por defecto; y, por lo tanto, es 100 % compatible y sin riesgos de problemas.
Lo bueno de usar Gutenberg Block Design Library
Se añade el icono con la zanahoria en la barra superior de opciones del editor de páginas, a la derecha de la rueda dentada. Haciendo clic en dicho icono, se muestra la columna lateral con los 50 diseños de bloques preparados para usar. La lista es muy completa con diseños verdaderamente útiles.
9. Cómo subrayar o ajustar el texto en un bloque de párrafo
Vamos ahora con uno de los trucos de Gutenberg por el que más se interesan los recién llegados.
Esto es algo que preocupa mucho a casi todos aquellos que se sumergen en Gutenberg por primera vez. ¿Hay opciones para formatear un texto que han desaparecido? Seguramente, no. El subrayado, por ejemplo, ya desapareció del editor clásico en WordPress 4.7. Ahora puedes recuperarlo, usando el atajo de teclado OPTION+U (Mac) o ALT+U (Windows). ¡Cuidado, porque en la lista de atajos de teclado pone CMD+U (Mac) y en mi teclado responde como OPTION+U.
Te recuerdo que la lista de atajos de teclado (esto lo puse con OPTION+U 😉 ) se puede obtener yendo a los tres puntos suspensivos (arriba a la derecha de la página del editor de bloques) y haciendo clic en «Atajos de teclado». O, directamente, presionando CTRL+OPTION+h (Mac) o May+Alt+h (Windows).

Pero otra forma de subrayar, endentar o ajustar texto es la que te proponemos en esta serie de trucos de Gutenberg. Y consiste en emplear la vista en HTML del bloque de párrafo.
Para pasar a la vista en HTML, haz clic en los tres puntos suspensivos que aparecen en la parte superior del bloque de párrafo -ver imagen superior- (o arriba del todo de la página si elegiste la opción «Barra de herramientas superior» en la configuración del editor de bloques -tres puntos suspensivos, arriba a la derecha-). Una vez en la vista de HTML, solamente tienes que añadir el parámetro «style» con el valor correspondiente. A continuación, se muestran dos ejemplos, según quieras endentar o ajustar el texto, respectivamente.
<p style=»padding-left: 50px;»>Texto endentado hacia la derecha</p>
<p style=»text-aling: justify;»>Texto justificado a derecha e izquierda</p>

Recuerda hacer clic en el botón «convertir a HTML» si te aparece el aviso «Contenido inesperado»
Lo bueno de usar la vista HTML
Si sabes un poquito de HTML y CSS puedes personalizar directamente los bloques de párrafo. Como hemos visto, es muy fácil formatear el texto con funciones que no están visibles en la barra de herramientas del bloque de párrafo (como por ejemplo, el subrayado, la endentación o el justificar el texto.
10. Bloques, plantillas y estilos: arquitectura para un mundo Gutenberg
Este apartado de los trucos de Gutenberg es, realmente, una introducción a los entresijos del mundo de los bloques de WordPress 5.0. Si tienes vocación de usuario avanzado, esto es para ti.
Casi todo el mundo coincide que existe un antes y un después de Gutenberg, en lo que respecta al diseño y la presentación de una página web.
Alexis Lloyd lo explica a la perfección en Bloques, plantillas y estilos: arquitectura para un mundo Gutenberg.
En el mundo de las páginas web pre-Gutenberg, el theme tenía todo el poder cuando se trataba del diseño y la presentación de un sitio de WordPress. Lo que permitía el theme, a nivel de personalización, era lo que el usuario podía hacer.
Con la llegada de Gutenberg, hemos visto un cambio en algunas de esas responsabilidades. Independientemente de su tema, los usuarios ahora pueden agregar diseños adaptados en columnas a cualquier página, asignar colores personalizados a la mayoría de su contenido e insertar elementos ricos en cualquier lugar dentro de una publicación o página. Como resultado, algunas de las responsabilidades para el diseño de un sitio están borrosas: el tema se ocupa de algunos aspectos, mientras que Gutenberg se encarga de otros. Gran parte de esa arquitectura aún debe definirse cuando Gutenberg se mueve a la Fase 2 y más allá.
–Alexis Lloyd

Después de Gutenberg, el desarrollo de un sitio web, en cuanto al diseño y presentación, no se limitaría a instalar un theme, configurarlo y personalizarlo; y ya está. A partir de un bloque, podemos partir de un nuevo concepto de plantilla (ver imagen superior):
Una plantilla definiría una colección de bloques en un orden y diseño particularque conforman una página completa. Además, las plantillas pueden contener «contenido inicial» : texto y medios editoriales para que el usuario pueda simplemente modificar y reemplazar en lugar de tener que empezar desde cero. El concepto de una biblioteca de plantillas significaría que podría haber una biblioteca central de plantillas básicas, además de las plantillas no básicas que cualquier persona puede desarrollar e instalar por separado (de manera similar a cómo funcionan los bloques).
–Alexis Lloyd
Finalmente, los estilos definirían la estética global del sitio y proporcionarían una definición central para tipografía, colores, espacios, iconos y más. Brent Jett ha sugerido algunas ideas interesantes sobre cómo esto podría manifestarse en el lado orientado hacia el usuario.

En definitiva, un theme de WordPress en la era post-Gutenberg es algo parecido a lo que puedes observar en la figura precedente.
Quizás un tema es simplemente un contenedor JSON que define los componentes de ese tema, identificando los bloques, las plantillas y los estilos que conforman el tema. En lugar de agrupar todas las partes del tema en una pieza de software estrechamente acoplada, el tema podría ser simplemente una definición de alto nivel que identifique las dependencias modulares (estilos, plantillas, bloques) que se deben instalar. Cuando se desactiva un tema, un usuario puede incluso tener la opción de mantener las plantillas y los bloques en su biblioteca para su uso futuro. Esto podría permitir una mayor flexibilidad pero también una mayor estandarización, creando un marco coherente y modular para dar forma a la forma en que los sitios se construyen en el futuro.
–Alexis Lloyd
Para empezar a trabajar bajo este nuevo concepto, puedes empezar leyendo Customizing Gutenberg blocks with block styles.
Los estilos de bloque, aparecen el la columna de configuración en algunos, como por ejemplo: Cita, tabla o botón.
Lo bueno de entender esta nueva arquitectura
Si WordPress evoluciona, como parece, a GutenPress 😉 entonces el usuario va a tomar más el control del desarrollo de las páginas web. La arquitectura de un theme, visto como un conjunto modular de bloques, plantillas (colecciones de bloques) y estilos, permitirá que el usuario cree diseños fácil y rápidamente, sin las restricciones que imponen actualmente los constructores de páginas, del estilo de Elementor, Page Builder y similares. Quizá no te des cuenta, pero esto es una revolución semejante a la que se produjo cuando cualquier persona pudo editar y publicar sus contenidos. Es el siguiente paso: cualquier persona podrá crear su página web desde cero.
Bonus: Gutenberg News y @gutenberg
Finalizamos esta serie de trucos de Gutenberg, con una web dedicada a publicar noticias sobre Gutenberg.
El sitio es Gutenberg News y esperamos que te guste tanto como a nosotros.
Te recomiendo también la cuenta de Twitter @gutenberg.
Lo bueno de este bonus
Mantenerte informado es fundamental en este área de conocimiento, nuevo y que promete no ser simplemente una transición entre el editor clásico y un (incómodo, según algunos 😉 ) editor de bloques sino un verdadero paradigma en la creación de sitio web de WordPress en un futuro inmediato.
Conclusiones
Esperamos que, con estos trucos de Gutenberg, ahora entiendas un poco más lo que hay detrás del mundo del nuevo editor de WordPress y sus bloques 🙂 .
Si tienes ideas, experiencias o dudas que plantear, estaremos encantados de recibirlas en los comentarios.
¿Necesitas más recursos y trucos de Gutenberg? Síguenos en Twitter (@blogpocket) para mantenerte actualizado.
Deja una respuesta