Cómo crear un blog en WordPress usando Gutenberg 【Guía】

---

Parece mentira pero ya casi han pasado 4 años desde que vimos nacer la versión 5.0 del gestor de contenidos (CMS) más aclamado de todos los tiempos. WordPress 5.0 se lanzó en diciembre de 2018 con varias novedades, entre ellas destacaba su nuevo editor de bloques Gutenberg WordPress, que venia a sustituir por completo al editor clásico.

El cambio vino procedido sobre todo por el auge de las múltiples plataformas de construcción de páginas web a base de “bloques pre-hechos” que facilitaban mucho la tarea de crear una web en Internet. Te explicamos cómo crear un blog con él de manera sencilla.

---

Qué es Gutenberg y cómo funciona el editor en bloques de WordPress

TABLA DE CONTENIDOS

• Qué es Gutenberg WordPress
• La interfaz de Gutenberg WordPress
• Como funciona el editor de bloques Gutenberg WordPress
• Pros y Contras de usar Gutenberg WordPress
• Plugin Editor Clásico

---

El equipo de desarrollo de WordPress contempló que su CMS debía ofrecer un editor más acorde a los tiempos que corrían y por eso lanzó Gutenberg junto a WordPress 5, el cual no ha parado de crecer hasta encontrarnos con la gran madurez que nos ofrece hoy en día para crear toda clase de contenidos para nuestro sitio web a través de entradas y páginas.

En la actualidad hay quien todavía utiliza el editor clásico de WordPress para crear el contenido de su web, pero los usuarios de hoy en día ya suelen decantarse por usar Gutenberg WordPress.

Qué es Gutenberg WordPress

Como ya hemos hablado con anterioridad se trata de un editor de bloques para WordPress capaz de satisfacer la necesidad de casi todos los usuarios de esta plataforma de contenidos sobre todo debido a su sencillez, así como también a las múltiples opciones para publicar contenido en tu web e incluso contenido de terceros. Vio la luz en diciembre de 2018 junto a WordPress 5 y siempre viene activado por defecto desde dicha versión, a no ser que actives el plugin con el editor clásico que venia con versiones anteriores.

Antes tenias que escribir el texto, crear las tablas, poner las imágenes, y todo seguido dentro del mismo área de contenidos mediante las opciones que daba el editor clásico para ello. Sin embargo, con Gutenberg WordPress todo va absolutamente con bloques, de tal forma que si por ejemplo quieres crear dos párrafos con la misma estructura puedes usar el mismo bloque de párrafos para ello o incluso si quieres poner una galería con imágenes puedes usar bloque de galerías de imágenes.

Pero eso no es lo más importante, sino que los desarrolladores de plugins también pueden usar estos bloques para incorporar su contenido en tu web mediante bloques personalizados. Bastaría con “soltar y arrastrar” dicho bloque en la parte que quisieras del editor y se publicaría el contenido de dicho plugin. Como puedes comprobar se hace de forma muy sencilla y sin necesidad de que tuvieras conocimientos específicos en código HTML.

La interfaz de Gutenberg WordPress

A simple vista el interfaz del editor de bloques Gutenberg es muy similar a la que ofrece el editor clásico, al menos la parte central de contenidos.

El editor clásico tiene una barra general para todo en la parte superior, mientras que Gutenberg esa barra general es para ofrecer otras funcionalidades (se llama barra de herramientas superior y se puede activar mediante los 3 puntitos de la derecha en caso de que no la tengas activada). Gutenberg también ofrece en la parte central un área de contenidos y en la parte derecha un menú lateral.

Indicamos los 3 apartados en esta captura de pantalla: 1) barra de herramientas superior 2) área de contenidos 3) menú lateral derecho

1) Barra de Herramientas Superior

La principal funcionalidad de esta barra de herramientas superior se encuentra en la parte izquierda que ofrece un insertador de bloques con el icono de un +, y cada bloque a su vez ofrece una barra completamente nueva al lado con más opciones relacionadas con ese bloque. También dispone de un botón con el icono de una flecha hacia la izquierda para deshacer cambios, el icono de una flecha hacia la derecha para rehacer cambios, el icono de una “i” de información para ver los detalles sobre lo que estás poniendo y, por último, una vista de lista donde se muestra a modo lista qué bloques construyen la entrada o página que estás creando para WordPress.

2) Área de contenidos

Esta área realmente no tiene ningún misterio, ya que te muestra el contenido que vas publicando, y es un área muy similar a la que ya venia por defecto con el editor clásico, a excepción de que te va mostrando los bloques que vas añadiendo de una forma visual o mediante código, según la opción que tengas establecida en el menú lateral derecho. Por ejemplo, nosotros en esta captura de pantalla hemos marcado la opción de código.

3) Menú lateral derecho

El menú lateral derecho está compuesto por dos pestañas: Entrada y Bloque o Página y Bloque, según si lo que estamos creando es una entrada o una página. Por un lado la pestaña entrada o página engloba las características de publicación de la entrada o página que estés confeccionando como hemos indicado. Por ejemplo, pudiendo programar la fecha de publicación.

La pestaña entrada o página también permite indicar el autor de la misma, enlace directo a dicho contenido, seleccionar una categoría, aplicar una imagen destacada, etc.

Por otro lado, la pestaña Bloque es conjunta para ambas modalidades, y en ella puedes encontrar detalles del bloque que tienes seleccionado, así como también personalizar algunos aspectos del mismo. Cada bloque tiene características propias en su correspondiente pestaña Bloque. Por ejemplo, el bloque de imagen te permite definir sus estilos (por defecto o redondeado), indicar un texto alternativo, así como también el tamaño y las dimensiones, entre otros aspectos avanzados.

Como funciona el editor de bloques Gutenberg WordPress

Similar a las plataformas o “builders” más populares de hoy en día que sirven para construir una página web de forma sencilla, Gutenberg WordPress y su modelo de bloques permite “soltar y arrastrar” bloques y patrones -en modo cascada- donde quieras -dentro del área de contenidos- para ir moldeando tu web con el contenido que necesites. Dicho así puede parece algo complicado, pero no lo es en absoluto. Tan solo tienes que saber que tipo de contenidos quieres añadir a tu web e ir creando la infraestructura con los bloques, sin necesidad de tener conocimiento en código HTML.

Gracias a los múltiples bloques y patrones de Gutenberg WordPress que vienen por defecto con el CMS puedes insertar en tus entradas o páginas: párrafos, citas, códigos, tablas, imágenes, vídeos, audios, fondos, botones, columnas, separadores, widgets, redes sociales, etc etc. ¡Tienes un montón de bloques y patrones Gutenberg WordPress para escoger por defecto! Y todos ellos con diseño “responsive”, es decir, un diseño que se adapta a todo tipo de dispositivos.

Y si aun así no estas satisfecho con los bloques Gutenberg WordPress que vienen por defecto, tal y como hemos comentado al principio de este mismo post, hay desarrolladores que han creado sus propios bloques. En algunas ocasiones tan solo debes instalar el plugin que te ofrecen y te aparecerá su correspondiente bloque para usar en tus entradas o páginas. También hay plantillas con diseños que ya incluyen sus propios bloques y tu solo debes modificarlos para adaptarlos a tu sitio web.

Nota: Te recomendamos descargar plugins y plantillas solo de sitios legítimos o del propio repositorio de WordPress, ya que de lo contrario pueden acabar pirateando tu WordPress si tienen algún tipo de malware o contenido malicioso.

Pros y Contras de usar Gutenberg WordPress

Descubrir los pros y los contras de Gutenberg WordPress siempre puede ayudarte con creces para tener más información sobre este editor de bloques y ver si realmente esta hecho para ti o no. Aunque hasta que no lo pruebes en profundidad seguramente no saldrás de dudas.

Pros Gutenberg WordPress:

• El contenido se crea en base a un sistema de bloques en cascada
• Hay bloques de todo tipo: para poner imágenes, párrafos, botones, columnas, códigos... e incluso personalizados de terceros
• Manejo sencillo e intuitivo de los bloques muy similar al del popular método de “arrastrar y soltar”
• 3 apartados: 1) barra de herramientas superior con insertador de bloques 2) área de contenidos 3) menú lateral derecho
• Opciones de edición y maquetación sin necesidad de usar código
• Aprendizaje rápido

Contras Gutenberg WordPress:

• Al principio cuesta un poco adaptarse a su editor de bloques, aunque es algo normal y que le pasa a todo el mundo.
• A pesar de ofrecer muchas opciones y funcionalidades para la creación del contenido tanto para entradas como páginas, todavía no está a la altura de los “builders” más populares de hoy en día que permiten crear un sitio web en pocos minutos.
• La creación de los textos mediante párrafos puede resultar un poco “liosa” sobre todo porque cada párrafo va separado en un bloque, aunque siempre puedes mirar la lista de lo que estás montando desde la barra de herramientas superior donde se muestra a modo lista que bloques constituyen la entrada o página que estás creando para WordPress.

Plugin Editor Clásico

¿No te gusta Gutenberg WordPress? ¡No hay problema! Siempre puedes usar el editor clásico. Para instalar el editor clásico no tienes más que acceder a la sección de plugins de WordPress e instalarlo desde allí haciendo una búsqueda por su nombre, pero ten en cuenta que instalar este plugin deshabilitará por completo Gutenberg WordPress, por lo que tendrás que decidir cual de los dos editores quieres usar. Si desactivas el editor clásico volverá a funcionar Gutenberg WordPress.

Conclusión

Si estás acostumbrado a usar el editor clásico de WordPress, ya no tienes excusa para probar Gutenberg WordPress. Cuando te acostumbres verás que es mucho más sencillo crear el contenido de tus entradas y páginas con este editor de bloques que con el editor clásico, pero como todo en la vida, los inicios siempre son difíciles, solo tienes que tener un poco de paciencia para adaptarte a su interfaz y modelo de bloques.