Editor Gutenberg WordPress ¡un paso más allá!

Desde que se liberó WordPress 5.0 contamos con el nuevo editor llamado Gutenberg para WordPress, como editor predeterminado. Hasta ese momento en WordPress estábamos acostumbrados al “editor HTML” o “editor Visual”, al margen de los constructores visuales como Divi u otros conocidos.

Hosting Mautic QuickStart -50% con soporte en español
24 horas y formación gratuita

Envía hasta 1.000.000 emails/año. Soporte Mautic en Español 24 horas, 365 días

SABER MÁS

La idea de este artículo es dar un repaso general a todo lo que ofrece dicho editor, y poder aclarar dudas, o al menos la mayoría de ellas.

El editor Gutenberg de WordPress tiene como propósito convertirse en el “editor” por excelencia, ya que gestiona los contenidos por bloques, de forma similar a como lo vienen haciendo otros constructores visuales, y aquí es donde reside la potencia de este editor nativo que está llamado a ser el único “necesario” para quienes utilizan habitualmente WordPress.

  Video resumen sobre Gutenberg

Vemos a continuación en este vídeo un repaso general sobre el editor de Gutenberg de WordPress a todo lo que hemos dicho a lo largo del artículo, para que los conceptos y utilidades de Gutenberg te resulten más fáciles de comprender.

  Qué es Gutenberg WordPress

El editor de Gutenberg de WordPress es la gran apuesta de WordPress de cara a tener un constructor visual para todo el contenido que generes en esta plataforma.

Como en muchas otras cosas de este “polarizado” siglo XXI, hay usuarios que han aplaudido este cambio o nueva funcionalidad (considerándolo muy necesario), y otros muchos usuarios lo rechazan (salir de la zona de confort nunca ha sido fácil).

El editor de contenido Gutenberg WordPress, se caracteriza principalmente por el uso de bloques.

Aunque este editor busca hacer la creación de contenido más sistemática a la vez que fácil, no se puede evitar cierta curva de aprendizaje para acostumbrarse a él (pero… ¿Esto sucede con casi cualquier nueva herramienta no?).

WordPress tiene su propia demo de Gutenberg, para que lo pruebes instantáneamente, sin necesidad de tener ningún tipo de instalación de WordPress o web activa (Pruébala en cuanto termines de leer el artículo. ¡Está muy chula!).

Al instalar WordPress, Gutenberg por defecto en muchas ocasiones viene de forma nativa.

Pero si no lo encuentras por defecto en tu instalación de WordPress, necesitas instalarlo desde el repositorio oficial de plugins (sigue este enlace).

Cuando lo hagas, verás que se añade un nuevo menú en la barra lateral izquierda en el panel de administración de WordPress.

En dicho menú tienes el enlace a la demo oficial (comentada anteriormente), al soporte (en la propia página del repositorio de plugins oficial de WordPress), a la documentación (con gifs animados muy útiles para saber cómo utilizar el editor) y a los experimentos, lo cual, como su nombre indica, ofrecen herramientas (por ahora sólo una) que mejoran el uso de Gutenberg (si yo fuera tú, no usaría estos experimentos en entornos de producción).

  Ventajas y desventajas de Gutenberg

Como todo lo nuevo, y como hemos comentado anteriormente, Gutenberg ha generado cierta controversia dentro del mundo WordPress.

Lo mejor es analizar las ventajas y desventajas que tiene este editor visual por bloques, y que tú mism@ decidas el uso o no uso que le vayas a dar.

Sí que es cierto que, al estar recién sacado del horno, necesita tiempo para madurar y perfeccionarse, y quien sabe, incluso llegar a convertirse en algo tan completo, que acabe sustituyendo a los Page Builders de WordPress que ya conocemos (Elementor, Beaver Builder, Divi, etc).

Aunque aún queda un tiempo para que esto ocurra.

  Ventajas de Gutenberg

• Gutenberg cuenta con muchos bloques de contenido. Cada bloque ofrece una herramienta en concreto. Por ejemplo, un bloque de título, otro de imagen, etc. En el siguiente apartado vemos todo lo relacionado con los bloques.
• Aún podemos seguir utilizando el editor clásico (por si todavía no te has acostumbrado a usar los bloques). La ironía es que el propio editor clásico, viene dentro de un bloque de Gutenberg.
• Si instalas Gutenberg en medio de una web con mucho contenido ya escrito, dicho contenido no se romperá. Lo que hace Gutenberg es convertir las páginas y artículos antiguos en bloques de contenido “clásico”, con su bloque de editor clásico. De esta manera puedes seguir editando el contenido en dichas páginas, y añadir nuevos bloques al contenido ya establecido.
• Gutenberg es developer friendly (está abierto a que los desarrolladores creen sus propios bloques). Esto significa que las posibilidades de integrar Gutenberg con otros servicios y plugins de WordPress es muy amplia.
• Los bloques de Gutenberg se pueden “buscar” en el editor. Es decir, no tienes que hacer scroll arriba y abajo cada vez que busques un nuevo bloque, basta con que escribas el título del mismo en el cuadro de búsqueda y te aparecerá.
• Sistema de drag & drop (pincha y arrastra) para mover los bloques a la posición que quieras. También se puede hacer mediante unas flechas hacia arriba, o hacia abajo (en el vídeo al final del artículo lo verás de una manera más visual).
• Cada bloque tiene su propia configuración, permitiéndote hacer diferentes ediciones en diferentes bloques, para que tu contenido sea flexible y ahorres tiempo en futuras configuraciones de bloques.
• Puedes activar el modo “sin distracciones” de Gutenberg a pantalla completa. (Yo estoy escribiendo este artículo en dicho modo).
• Gutenberg ofrece un cuadro informativo con varios datos sobre lo que estás escribiendo (a mí me viene genial, para saber cuántas palabras tiene mi artículo). Encontrarás:
  • Total de caracteres
  • Total de palabras
  • Total de encabezados
  • Total de párrafos
  • Total de bloques utilizados

  Desventajas de Gutenberg

• Requiere cierta curva de aprendizaje: al ser nuevo y con muchos botones por todos los lados, al principio requeriremos de unos cuantos usos para hacernos con la herramienta. No es nada difícil, pero siempre requiere de cierto tiempo para acostumbrarse a utilizarla.
• Si utilizas plugins externos que “beben” de tu contenido en las páginas y posts de tu instalación de WordPress, puede (en raros casos) que no sea compatible con Gutenberg, y algo “se rompa” al activar el nuevo editor por bloques (recuerda siempre hacer este tipo de acciones, como activar un nuevo plugin para WordPress, en un entorno de test, nunca en un entorno de producción¡!).
• No es un page builder en sí (al menos todavía). Es decir, solamente se puede editar contenido por bloques desde el panel de administración, y no desde el front-end, tal y como nos tienen acostumbrados herramientas como Elementor o Divi.
• Los fans de los shortcuts del editor clásico TinyMCE no podrán disfrutar más de su uso en Gutenberg. No pasa nada, podrán utilizar los nuevos accesos rápidos que Gutenberg propone, contribuyendo ello a parte de la curva de aprendizaje que mencionaba en la primera desventaja.

Como ves, hay más ventajas que desventajas, e incluso algunas desventajas no son tan “horribles” como para no darle una oportunidad al editor Gutenberg.

Continuamos ahora con el corazón de este editor visual, sus bloques.

  Bloques de Gutenberg en WordPress

Gutenberg ofrece potentes bloques de contenido, cada uno de los cuales con sus opciones particulares, y enfocándose a elementos individuales en tu artículo, página, custom post type o lo que decidas crear.

Esto quiere decir que habrá tantos bloques en tu contenido con Gutenberg, como “elementos” decidas emplear.

Por ejemplo, si tu contenido va a utilizar 6 títulos h2, 5 imágenes y un vídeo insertado desde YouTube, habrás utilizado un total de 12 bloques.

  Añadir nuevos bloques

Cuando quieres añadir bloques al editor, debes fijarte en el símbolo “+” de la barra superior.

En la barra superior del editor, vas a encontrar ciertos elementos que te ayudarán a utilizar Gutenberg de una manera más completa.

• El botón “+”, como acabo de mencionar, sirve para añadir un nuevo bloque.
• Los botones del lapicero, las flechas a la izquierda y derecha, el simbolito “i” y las tres rayitas, sirven para cambiar el modo de edición, deshacer o rehacer cambios, información sobre el número de elementos del artículo y navegación entre las diferentes secciones de bloques del artículo, respectivamente.
• Las opciones de la parte más a la derecha, sirven para Guardar como borrador, Vista previa, Publicar contenido, o los ajustes de los bloques y tipo de contenido en general.

Lo más importante a tener en cuenta, para los tipos de bloques que te ofrece el editor de Gutenberg, es que:

• Cuando pasas el ratón por encima de cada tipo de bloque en el menú de “+“, el editor te muestra para qué sirven.
• Cuando pinchas en ellos y los añades a tu contenido, tendrás a tu disposición una pequeña barra de opciones, que te permitirá variar diferentes características de tu bloque, dependiendo del que hayas seleccionado.

  Bloques de texto

Dentro del grupo de bloques de texto, vas a encontrar diferentes bloques que mostrarán tu contenido de diferentes maneras, dependiendo del tipo que sean.

Estos son los que vienen por defecto:

• Párrafo
• Encabezado
• Lista
• Cita
• Código (HTML)
• Editor Clásico
• Preformateado
• Cita
• Tabla
• Verso

Los bloques de medios te permitirán añadir imágenes, vídeos, audio…

Son bloques destinados a enriquecer visualmente tu contenido, y su uso es muy recomendado.

Entre los bloques de medios que vienen por defecto con Gutenberg encontrarás:

• Imagen (individual)
• Galería (varias imágenes)
• Audio
• Fondo (fondo de un bloque)
• Archivo (para descargar)
• Medios y textos (composición prediseñada)
• Vídeo

  Bloques de diseño

Los bloques de diseño van enfocados a “dar forma” a los bloques anteriores.

Es por eso que estos bloques te van a permitir “jugar” con la estructura de tu contenido, añadiendo espaciados, columnas, botones, etc.

Los que encuentras por defecto con Gutenberg son:

• Botones
• Columnas
• Grupo (para combinar varios bloques en un grupo)
• Más (leer más)
• Separador
• Espaciador
• Navegación horizontal (enlaces horizontales)
• Navegación vertical (enlaces verticales)

  Bloques de widgets

WordPress utiliza una serie de widgets que muestran diferente contenido o funcionalidad dependiendo de los plugins y plantilla que tengas instalados.

Los bloques de widgets de Gutenberg te permiten “conectar” esas funcionalidades en el propio constructor web.

Por ejemplo, el widget de “últimos posts” mostraría las últimas entradas de tu blog en el lugar en donde se encontrara dicho widget.

Con Gutenberg puedes añadir un widget a una página de WordPress, algunos de ellos ya vienen por defecto, pero esta lista crecerá en función de tu instalación de WordPress y sus componentes (plugins y plantillas).

• Archivos
• Calendario
• Categorías
• Editor HTML personalizado
• Últimos comentarios
• Últimos posts
• RSS
• Compartir en redes sociales
• Nube de etiquetas en WordPress
• Búsqueda

  Bloques incrustados

Por último tenemos los bloques incrustados, los cuales muestran y conectan de una manera muy sencilla información “desde otras páginas” tipo Twitter, YouTube, Spotify, etc.

  Ajustes avanzados

Los ajustes avanzados de cada bloque dependen del tipo de bloque que hayas seleccionado.

En la captura de pantalla puedes ver los ajustes avanzados que hay para el bloque de “Encabezado”.

En dichos ajustes, en este caso, puedes cambiar la tipografía de WordPress, su tamaño, su color…

Existen una “Configuración avanzada de los bloques” que vemos en el siguiente punto de este artículo.

Lo que tienen en común todos los bloques de Gutenberg es que dicho ajustes avanzados se encuentran en la barra lateral del editor, junto a las opciones del tipo de contenido que estés creando (entrada, página, etc.).

De esta manera podrás tener bien ordenados los ajustes de cada bloque, para que no se te escape ninguna opción (imagina si tuvieras todos los ajustes de todos los bloques en un mismo lugar a la vez… ¡Qué lío sería!).

  Configuración avanzada de bloques de Gutenberg WordPress

Esta configuración es para usuarios con un nivel algo más avanzado a nivel técnico, aunque son bastante fáciles de entender y de utilizar.

Los ajustes avanzados de bloque se encuentran en los propios ajustes de cada bloque, en la parte inferior derecha de la pantalla, cuando seleccionas cualquier bloque de contenido.

El uso más interesante es poder asignar clases CSS a un elemento en concreto, y poder “manipular” su aspecto a tu gusto, sin que esto afecte al resto de bloques.

Aunque también puedes añadir CSS personalizado a WordPress de forma habitual.

  Conclusiones

Como has podido comprobar, Gutenberg de WordPress, pese a ser relativamente nuevo en el mundo de WordPress, es un completo editor que no pasa desapercibido.

Aunque su curva de aprendizaje cueste un poquito al principio, merece la pena tener en cuenta esta opción que trae WordPress de manera nativa, para crear contenido de una manera muy visual.

Estoy seguro de que el editor de Gutenberg WordPress va a crecer con el paso del tiempo, y quien sabe si en un futuro sustituirá a los page builders más famosos.

Yo te animo a que le eches un vistazo, y “juegues” con él en un entorno de pruebas, para ver si te convence la idea de utilizarlo para tus proyectos del mundo real.

Espero que te haya servido este artículo y ¡nos vemos en el siguiente!