bg
Inicio | Gutenberg de WordPress: guía de uso

Gutenberg de WordPress: guía de uso

Gutenberg WordPress

WordPress es el CMS más popular y cada vez se dispara más su cuota de uso, hasta tal punto que nadie sabe dónde puede estar su techo. Hace ya unos años se presentó una actualización muy importante en la manera en la que gestionamos el contenido que vamos a abordar en este post. Sigue con nosotros para aprender a usar Gutenberg, el editor de bloques de WordPress, y a sacarle el mejor partido.

¿Qué es el editor de Gutenberg?

El editor Gutenberg es una herramienta integrada en WordPress que permite a los usuarios crear el contenido de una manera especialmente sencilla y visual. Se trata de un editor modular que permite construir el contenido de las páginas y posts por medio de bloques. De hecho, esta herramienta se conoce también de manera más genérica como editor de bloques de WordPress.

Gutenberg reemplazó al clásico editor de texto enriquecido que venía siendo usado en versiones de WordPress anteriores a la 5. Ofrece una experiencia de usuario más moderna, sencilla y productiva. A la par, cuenta con una mayor flexibilidad a la hora de introducir y gestionar más tipos de contenido dentro de los artículos.

Gutenberg se basa en bloques, que son unidades individuales de contenido. Los bloques se pueden combinar y personalizar para crear páginas y entradas tan complejas como sea necesario. Además, los plugins de WordPress también pueden añadir nuevos tipos de bloques, adicionales a los que ya vienen incluidos de casa en el CMS.

Características clave de Gutenberg en WordPress

Veamos algunas de las características más importantes del editor de bloques, Gutenberg, de WordPress.

Bloques: la unidad básica de construcción

La principal característica de Gutenberg es el uso de bloques para la construcción del contenido de las páginas. Un bloque no es más que un tipo de contenido. Por ejemplo, el bloque más básico sería un párrafo, pero también podría ser una imagen o un encabezado. A partir de ahí existen bloques para prácticamente cualquier cosa que nos podamos imaginar, desde vídeos, citas, distribuciones en distintas columnas, carruseles, etc.

Interfaz intuitiva y amigable

Gutenberg se creó para mejorar la experiencia de usuario a la hora de editar el contenido de los post o las páginas de los sitios administrados con este CMS. Aspectos como un uso intuitivo y amigable fueron especialmente cuidados a la hora de crear esta interfaz para la gestión de contenido.

Mayor flexibilidad en el diseño de páginas y entradas

Otro de los aspectos que se quería mejorar con respecto al editor enriquecido existente en las versiones anteriores de WordPress es la flexibilidad a la hora de incorporar tipos diferentes de contenido en las páginas web o post.

El propio editor de bloques viene con una cantidad bastante importante de tipos de contenido que se pueden integrar a golpe de clic. Pero, además, cualquier administrador de un sitio WordPress puede instalar plugins que le permiten incorporar nuevos tipos de bloques en Gutenberg.

Navegación y elementos de Gutenberg en WordPress

El uso del Editor de bloques de WordPress resulta sencillo, incluso para personas con poca experiencia en la edición de contenido. Vamos a ver cuáles son las herramientas más importantes para poder utilizarlo. Para crear bloques simplemente tenemos que pulsar sobre el icono + que aparece arriba a la izquierda y seleccionar el bloque nos interesa introducir como contenido. Podemos explorar en la barra de la izquierda los distintos tipos de bloques. Comprobaremos que hay una buena cantidad de ellos.

Navegación y elementos de Gutenberg en WordPress

Barra lateral de herramientas

La barra lateral de herramientas de los bloques de Gutenberg se posiciona en la parte derecha del editor. Es una barra con opciones contextuales al bloque sobre el que nos encontramos. Desde aquí, los usuarios pueden ajustar propiedades específicas del bloque, como el estilo del texto, colores, alineación. Aunque cada bloque tendrá una cantidad diferente de opciones disponibles. 

Barra lateral de herramientas

Uso de bloques reutilizables

Cuando usamos el editor Gutenberg tenemos la posibilidad de crear bloques reutilizables o patrones. Esta utilidad nos permite guardar un bloque ya configurado, de manera que lo podamos usar más tarde sin necesidad de volver a repetir los pasos para reproducirlo. Es tan sencillo como pulsar sobre los tres puntitos verticales que aparecen en el menú contextual del bloque y luego seleccionar la opción «Crear patrón». Luego tendremos que asignarle un nombre.

Uso de bloques reutilizables

Una vez creado el patrón lo encontraremos en el menú de bloques y luego en la pestaña «Patrones».

Configuración de bloques y opciones avanzadas

En Gutenberg disponemos de múltiples opciones de configuración de los bloques, accesibles desde la barra lateral. Estas opciones avanzadas dependen mucho del bloque que estemos tratando de editar.

Creación de contenido con Gutenberg en WordPress

La creación de contenido con Gutenberg se realiza por medio de la incorporación de bloques de contenido. Vamos a describir a continuación algunos pasos importantes a tener en cuenta.

Creación de entradas y páginas con bloques

La creación de entradas (post) y páginas se realiza como siempre en WordPress, a partir de las secciones correspondientes del administrador. Una vez creamos una entrada y vamos a editar su contenido, o bien queremos editar el contenido de una página realizada anteriormente, aparecemos directamente en el Editor de Bloques (Gutenberg) de manera predeterminada. Solo en casos especiales puede que se abra la página de edición clásica, pero para ello deberíamos tener instalado y activado el plugin de Editor Clásico.

En el Editor de bloques disponemos de un botón etiquetado con un signo «+», que es el que permite abrir los distintos tipos de bloques para colocar nuevo contenido en la página o entrada de WordPress, tal como explicamos anteriormente.

Personalización del diseño y estilo

Cada tipo de bloque ofrece opciones para personalizar su diseño, estilo u otras propiedades. Ya dependiendo del bloque que estemos configurando, nos permitirá personalizar con unas u otras opciones. Todas ellas aparecen en la barra lateral.

Si por alguna circunstancia no visualizas la barra lateral, ten en cuenta que se puede mostrar u ocultar con un icono que aparece en la parte de arriba a la derecha.

Personalización del diseño y estilo gutenberg wordpress

Incorporación de elementos multimedia

Te recomendamos explorar los tipos de bloques disponibles en Gutenberg. Entre ellos encontrarás distintos tipos de bloques de contenido multimedia con los que podrás añadir galerías de fotos, vídeos o audios, entre otros. 

Incorporación de elementos multimedia gutenberg wordpress

Optimización SEO con Gutenberg en WordPress

WordPress es una de las plataformas de gestión de contenido con mayor potencial para el posicionamiento SEO. Esto quiere decir que Google suele considerar de manera muy positiva a los sitios basados en WordPress, aunque por supuesto todo depende de cómo hayamos desarrollado el sitio y su contenido.

Queremos ahora ofrecer algunas guías fundamentales al editar el contenido con Gutenberg, para asegurarnos de que nuestros sitios WordPress tengan buenas probabilidades de alcanzar posiciones privilegiadas en las búsquedas.

Uso de encabezados y formato de texto

Uno de los parámetros más importantes para obtener buenas posiciones es la colocación de palabras clave en los encabezados de las páginas, es decir, tanto título como otros subtítulos insertados entre los párrafos.

Para insertar un encabezado es tan sencillo como seleccionar el bloque correspondiente. Una vez hemos colocado el bloque de encabezado podremos seleccionar su nivel entre las opciones contextuales del bloque.

Uso de encabezados y formato de texto gutenberg wordpress

Además de los encabezados para mejorar el SEO con respecto a determinadas palabras clave podemos utilizar otros estilos como negritas.

Optimización de imágenes y metadatos

Cuando utilizamos imágenes es importante etiquetarlas con descripciones, que se insertarán en los atributos «alt» para mejorar el SEO en imágenes. Estas descripciones las podemos seleccionar desde el menú lateral de propiedades del bloque. Para insertar metaetiquetas para cada una de tus páginas te recomendamos usar algún plugin específico para SEO como Yoast SEO.

Integración con plugins de SEO

La mayoría de los plugins populares para optimizar las páginas de cara al posicionamiento en buscadores ofrecen una integración muy estrecha con el actual Editor de Bloques de WordPress. Si por ejemplo instalamos Yoast SEO veremos que nos aparece un icono en la parte superior derecha para encontrar sus funcionalidades de optimización. Además, este plugin generará nuevas pestañas en la barra lateral de propiedades de los bloques.

Colaboración y trabajo en equipo

Otra de las opciones que han mejorado gracias a la implantación de Gutenberg es la colaboración y el trabajo en equipo.

Compartir y colaborar en proyectos con Gutenberg

Cuando editamos un sitio pasado en WordPress podemos crear diferentes usuarios y cada uno de ellos podrá tener permisos específicos. Gutenberg facilita la colaboración en la gestión del contenido entre los distintos usuarios que tengan niveles suficientes para la edición de las páginas o entradas. 

Revisión y edición colaborativa

Algunas utilidades de colaboración incluyen la revisión de páginas o compartir enlaces a la vista previa, todo ello antes de publicar el contenido. Con estas opciones los distintos redactores pueden realizar revisiones del material, para asegurarse de su calidad y corrección antes de publicarlo definitivamente.

Mantenimiento y actualización constante

Gutenberg permite llevar un mantenimiento del contenido sencillo por parte de los usuarios. Cada bloque es independiente, por lo que podemos editarlo fácilmente sin peligro de afectar a otras partes de la página.

Experiencia del usuario con Gutenberg en WordPress

Uno de los objetivos perseguidos por el editor Gutenberg es mejorar la experiencia de usuario a la hora de crear contenido en WordPress. Veamos las claves de esta mejora y cómo impacta en el trabajo del día a día.

Mejora de la experiencia de edición de contenido

Gracias a Gutenberg WordPress ha alcanzado una experiencia de usuario moderna en lo que respecta a la edición de contenido.  En el editor anterior todo el contenido se insertaba en un mismo espacio de texto enriquecido, que permitía colocar de manera sencilla elementos como párrafos encabezados o imágenes. Sin embargo, a la hora de insertar contenido más complejo las opciones disponibles dejaban mucho que desear. Algunos plugins permitían la inserción de contenido especial por medio de «shortcodes», pero requerían editar las propiedades del contenido e insertado en páginas aparte.

Actualmente, Gutenberg permite insertar todo tipo de bloques, hasta los más complejos, con una experiencia integrada en la misma página de edición del contenido, lo que permite mayor productividad y claridad en el trabajo diario. Además otras herramientas como la reutilización de bloques permiten sacarle un partido todavía mayor a la hora de generar bloques avanzados y con una configuración detallada, sin tener que repetir numerosos pasos de configuración.

Retroalimentación de usuarios y comunidad

No ha sido fácil contentar a todos los usuarios acerca de la utilidad de las mejoras introducidas por Gutenberg, ya que WordPress se utiliza en millones de sitios a lo largo del mundo entero y muchos usuarios estaban contentos con la interfaz antigua de generación de contenido.

También ha llevado tiempo conseguir que los creadores de plugins actualizasen sus aportaciones, para integrar la experiencia de uso de sus plugins al formato actual de bloques de Gutenberg. No obstante, la comunidad de desarrolladores de WordPress ha sabido adaptar el editor de bloques para que realmente cubra las necesidades de sus usuarios y, de un tiempo para acá toda la experiencia de usuario en WordPress está volcada ya de manera estable en el editor de bloques.

Problemas comunes y soluciones en Gutenberg

En las versiones más recientes de WordPress la mayoría de los problemas asociados al nuevo editor de bloques han sido resueltos. De todos modos queremos compartir algunas ideas y consejos para evitar posibles problemas comunes.

Errores frecuentes al utilizar Gutenberg en WordPress

La mayor parte de errores al utilizar Gutenberg se basan en el uso de plugins poco actualizados, que no han migrado sus características para aprovechar las posibilidades del Editor de bloques.  Lo mismo puede ocurrir con ciertos temas. Sin embargo, en la actualidad no debería haber dificultades relevantes, al menos si usamos los complementos de WordPress más populares.

Un consejo a la hora de seleccionar tus plugins y temas, para evitar problemas con Gutenberg, es verificar la versión de WordPress sobre la que ofrecen compatibilidad, así como la frecuencia de actualización de los plugins o temas.

Consejos y trucos para resolver problemas

Los consejos más relevantes a la hora de usar el editor de bloques Gutenberg son los mismos que podríamos señalar a la hora de mantener un sitio de WordPress en general:

  • Instalar siempre las versiones más modernas de WordPress
  • Mantener los plugins siempre actualizados
  • Actualizar también los temas. 
  • Si modificas un tema de WordPress utiliza temas hijo, para que no se machaquen tus cambios cuando se actualice el tema original.
  • No instales más plugins de los que realmente necesitas. Si instalas un plugin para probarlo y no te convence, elimínalo totalmente para evitar problemas de seguridad.

Recursos de soporte y comunidad de usuarios

WordPress tiene una de las comunidades más grandes y es muy fácil encontrar soluciones a los problemas más comunes si hacemos una simple consulta en Google. Sin embargo, siempre que sea posible te recomendamos consultar primero la fuente original de ayuda de WordPress, en las páginas oficiales del CMS.

Si tienes un problema con algún plugin instalado entonces te recomendamos acceder a la página del creador del plugin y buscar las opciones de soporte que ofrezca. De este modo podrás dar prioridad a respuestas oficiales.

No obstante, si no encuentras soluciones a los problemas tampoco queremos decir que haya problema alguno en buscar respuestas en canales no oficiales. De hecho, es muy probable que terceras personas ofrezcan guías más completas que las que podemos encontrar en la propia página de WordPress.org. simplemente verifica que las guías estén suficientemente actualizadas.