Desde la liberación de WordPress 5.0, allá por diciembre de 2018, ahora se instala por defecto el editor de bloques llamado Gutenberg, como editor predeterminado.
Te presentamos Arkibot,
nuestra nueva herramienta de chatbot.
Pruébala por 9,90€ + impuestos al mes y automatiza el trabajo aburrido.
Ahorra tiempo y dinero aquíY de eso va este artículo, del editor Gutenberg WordPress, conocido como “editor de bloques”, que vino a ser el sustituto del «editor clásico» y poco a poco también, de los constructores visuales o builders usados.
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.
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.
Gutenberg tiene como propósito convertirse en el editor por excelencia, ya que gestiona los contenidos por bloques, de forma similar a cómo 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.
Tabla de contenidos
Vídeo resumen sobre Gutenberg
En el siguiente vídeo te hago un repaso general sobre los conceptos y utilidades del editor Gutenberg de WordPress, para que te resulten más fáciles de comprender.
Qué es Gutenberg
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 pruebes el editor instantáneamente, sin necesidad de tener ningún tipo de instalación de WordPress o web activa, y experimentes lo que es la gestión de contenidos de una publicación por medio de los bloques.
Al instalar WordPress, el editor Gutenberg por defecto, en versiones 6.0 y superiores del gestor de contenidos, viene de forma nativa instalado y activo.
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 GIF animados muy útiles para saber cómo utilizar el editor) y a los experimentos, lo cual, como su nombre indica, ofrecen herramientas (por ahora solo 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 te he comentado anteriormente, Gutenberg ha generado cierta controversia dentro del mundo WordPress, si bien que en la actualidad, tras más de 4 años mejorando y acumulando nuevas funcionalidades, poco a poco la impresión de los usuarios con respecto a este editor está cambiando y es mucho más aceptado.
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 principio, estando recién sacado del horno, necesito de un tiempo para madurar y perfeccionarse, y es ahora cuando está llegando a convertirse en una herramienta de edición muy completa, que posiblemente acabará sustituyendo a los Page Builders de WordPress que ya conoces como Elementor, Beaver Builder, Divi, etcétera.
Ventajas de Gutenberg
Vaya por delante que actualmente Gutenberg tiene muchas más ventajas que inconvenientes, y esto es un hecho, no hay más que utilizarlo durante un tiempo para darse cuenta lo fácil que es dejar atrás otros editores, gratuitos o de pago, señal de que en Automattic están haciendo las cosas bien con 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 verás 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
Sin embargo, y para no fomentar el favoritismo por Gutenberg “porque sí”, te indico algunas desventajas encontradas durante su uso.
- Requiere cierta curva de aprendizaje: al ser nuevo y con muchos botones por todos los lados, al principio requiere de unos cuantos usos para hacerte con la herramienta. No es nada difícil, pero siempre lleva cierto tiempo para acostumbrarse a utilizarla.
- Si utilizas plugins externos que beben de tu contenido en las páginas y entradas 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 frontal del sitio, frontend, tal y como te tienen acostumbrad@ 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.
Continuo ahora con el corazón de este editor visual, sus bloques.
Bloques de Gutenberg
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. En versiones actuales puedes verlo sustituido por el botón Añadir
- Los botones del lapicero, las flechas a la izquierda y derecha, el símbolo i (información) y las tres rayas, 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 + o Añadir, el editor te muestra para qué sirven.
- Cuando haces clic 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 dependiendo del tipo que sean.
Estos son los que vienen por defecto:
- Párrafo
- Encabezado
- Lista
- Cita
- Código (HTML)
- Editor Clásico
- Preformateado
- Párrafo de cita
- Tabla
- Verso
Bloques de medios
Los bloques de medios te permiten añadir imágenes, vídeos, audio y otros.
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.
En Gutenberg los que se incluyen son:
- Botones
- Columnas
- Grupo (para combinar varios bloques en un grupo)
- Fila
- Pila
- Más (leer más)
- Salto de página
- Separador
- Espaciador
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 Últimas entradas muestra las últimas entradas de tu blog en el lugar en donde se inserte dicho widget.
Gutenberg viene con algunos widgets por defecto, pero esta lista crecerá en función de tu instalación de WordPress y los plugins o plantillas instalados.
Los bloques de widgets incluidos en Gutenberg son:
- Archivos
- Calendario
- Lista de categorías
- Editor HTML personalizado
- Últimos comentarios
- Últimas entradas
- Lista de páginas
- RSS
- Búsqueda
- Shortcode
- Iconos sociales
- Nube de etiquetas en WordPress
Bloques incrustados
También están los bloques incrustados, los cuales muestran y conectan de una manera muy sencilla información desde otras páginas tipo Twitter, YouTube, Spotify, etc.
Bloques de Tema
Los bloques de Tema están pensados para darle la forma o aspecto deseado a los contenidos del sitio, pudiendo mostrar elementos que antes solo estaban reservados a widgets o determinados elementos del sitio y que no se podían manipular o personalizar sin tener que recurrir a la modificación de código del Tema.
Los bloques de Tema de Gutenberg son:
- Navegación
- Logo del sitio
- Título del sitio
- Descripción del sitio
- Bucle de consulta
- Lista de entradas
- Avatar
- Título de la entrada
- Imagen destacada de la entrada
- Contenido de la entrada
- Autor de la entrada
- Nombre del autor de la entrada
- Fecha de la entrada
- Categorías
- Etiquetas
- Entrada siguiente
- Entrada anterior
- Leer más
- Comentarios
- Formulario de comentarios de la entrada
- Acceder/salir
- Descripción del término
- Título del archivo
- Título de los resultados de búsqueda
- Biografía del autor de la entrada
La cantidad de bloques que se muestren en Tema dependerá también de otros plugins que tengas instalados en WordPress.
Bloques más utilizados
Este grupo de bloques que se muestra al principio de todo el listado de bloques, cuando haces clic en Añadir o el signo +, en realidad son bloques que ya pertenecen a otros grupos de los comentados, pero que Gutenberg los agrupa y muestra los primeros porque son los que más utilizas a diario cuando gestionas contenidos en tu sitio web.
Esto quiere decir que, su vista es dinámica, y que varía en el tiempo dependiendo de cuáles bloques utilizas un tipo u otro.
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, su tamaño, su color y otras personalizaciones aplicables al bloque en edición.
Existen una Configuración avanzada de los bloques que te muestro en el siguiente punto de este artículo.
Lo que tienen en común todos los bloques de Gutenberg es que dichos 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 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 también modificar su aspecto a tu gusto, sin que esto afecte al resto de bloques.
Conclusiones
Como has podido comprobar, Gutenberg de WordPress, está ya muy integrado en la edición de contenidos en WordPress, por lo que ya desde hace tiempo 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 forma muy visual.
Estoy seguro de que el editor de Gutenberg de WordPress va a seguir creciendo con el paso del tiempo, y acabará sustituyendo 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.
También te invito a que realices el Curso de Gutenberg totalmente gratuito, que te ayudará a afianzar tus conocimientos sobre el editor.
¿Te ha resultado útil este artículo?
Miembro del equipo de soporte técnico de Webempresa.
Coordinador de contenidos en el Blog y en Youtube.
Soporte técnico en CiberProtector. Teacher en Webempresa University
