Gutenberg WordPress: Tutorial para usuarios

Maddy Osman Última actualización 14.07.2021
11 min.
Guía Gutenberg
Última actualización 14.07.2021

Si estás pensando en crear un sitio web con WordPress, probablemente hayas oído hablar de Gutenberg. Gutenberg es el editor de WordPress que se lanzó con la versión 5.0. 

Desde su lanzamiento inicial, se han añadido muchas funciones al editor de bloques WordPress, como la agrupación (block grouping) y los patrones de bloques (block patterns). No obstante, la razón principal por la que Gutenberg es tan popular es que permite editar entradas y páginas de forma mucho más visual que el editor estándar de WordPress.

Gutenberg WordPress: Tutorial para usuarios

Esta guía incluye:

  • Información sobre Gutenberg
  • Una guía completa de Gutenberg para desarrolladores
  • Una lista breve acerca de las diferentes características en Gutenberg

Y puedo prometerte una cosa ahora mismo: después de esta guía sabrás cómo crear diseños profesionales para tus sitios web con la ayuda de Gutenberg.

¡WordPress 5.6 por fin está aquí!

La última versión de WordPress se centra en la maquetación y el diseño: un nuevo theme, opciones adicionales de maquetación para las entradas, páginas y patrones de bloques para tu próximo sitio web completo. Puedes encontrar todos los detalles en la nota de lanzamiento oficial y en la guía de campo WordPress.

¿Qué novedad presenta el editor de bloques Gutenberg?

Antes de sumergirnos específicamente en el tutorial de Gutenberg WordPress, echémosle primero un vistazo a lo que es realmente Gutenberg. 

Gutenberg sustituye al editor TinyMCE y le permite utilizar bloques de contenido para añadir texto, imágenes y otros medios a tus publicaciones o posts y sitios. El editor clásico TinyMCE estaba basado en texto y limitaba a los nuevos usuarios que no tenían conocimientos de codificación. 

Aunque conocimientos básicos de HTML no eran esenciales para utilizar el editor clásico, a menudo había que entrar en la vista HTML para hacer cualquier cambio. De lo contrario, había que instalar un plugin aparte para añadir funciones sencillas como tablas o galerías de imágenes a tu sitio web.

Gutenberg WordPress: Tutorial para usuarios

Con Gutenberg puedes diseñar tu sitio web con imágenes en lugar de texto. Con el editor de bloques de WordPress Gutenberg puedes añadir fácilmente bloques de contenido a tus páginas y entradas. Hay bloques para imágenes, para párrafos y para casi cualquier otro elemento que deseas tener en tu sitio web.

Gutenberg WordPress: Tutorial para usuarios

Gutenberg es ahora el editor de bloques por defecto de WordPress y viene con muchos bloques out-of-the-box (en español, "fuera de la caja"). También puedes añadir plugins WordPress que te proporcionarán aún más bloques para implementar fácilmente varias funciones en tus posts y páginas. 

Tutorial Gutenberg WordPress

Cuando se construyen sitios web, nunca está de más simplificar el flujo de trabajo. Gutenberg puede ahorrarte mucho tiempo en este sentido. Así que ya es hora de que echemos un vistazo al editor de bloques WordPress. En primer lugar, vamos a repasar juntos algunos principios básicos de Gutenberg.  

Cómo utilizar Gutenberg

  1. Crea una nueva entrada de blog como de costumbre en WordPress. 
  2. Haz clic en el signo azul "+" en la esquina superior izquierda. 
  3. Selecciona el bloque que deseas incluir en tu publicación. 
  4. Ajusta la configuración del bloque dentro del diseño del post. 
  5. Reorganiza los bloques arrastrándolos y soltándolos (función "drag and drop").

¡Y ya está! Lo único que necesita un poco más de explicación es entender cómo funcionan los bloques individuales, cómo personalizarlos y agruparlos. Llegaremos a este punto más tarde en el presente tutorial de Gutenberg WordPress. 

Manual detallado sobre el editor de bloques Gutenberg 

Ahora que ya tenemos lo básico, vamos a profundizar en los detalles del editor de bloques WordPress. Cuando se carga por primera vez la pantalla del editor de un sitio o de un post con Gutenberg, el editor parece bastante vacío, incluso más que el editor clásico porque faltan las opciones del menú tradicional. No pasa nada. El primer paso es añadir algunos bloques. 

1. Añadir bloques al post o publicación

Para añadir un bloque a tu post, haz clic sobre el signo "+" en la esquina superior izquierda del borrador del post. Se superpone un nuevo bloque con un pequeño conjunto de opciones de menú. 

Nos centraremos primero en el menú principal, y luego discutiremos cómo puede hacer más ajustes con el menú secundario.

Gutenberg WordPress: Tutorial para usuarios

Puedes examinar los tipos de bloques o utilizar la barra de búsqueda para encontrar el tipo de bloque que deseas. A continuación, añade un bloque escribiendo "/" y el tipo de bloque. Por ejemplo, si quieres insertar una imagen, debes escribir "/image".

Hay muchos bloques disponibles, entre ellos

  • Párrafos
  • Imágenes
  • Títulos
  • Listas
  • Tablas
  • Separador
  • Galería
  • Botones
  • Vídeos
  • Archivos de audio 

Si has instalado plugins con bloques personalizados, también aparecerán en esta lista. 

Alternativamente, también puedes añadir un bloque haciendo clic en el signo negro "+": esto aparecerá cuando hagas clic en el borrador que te indica que escribas algo o hagas clic para seleccionar el bloque. 

Gutenberg WordPress: Tutorial para usuarios

O puedes seguir las instrucciones del texto y escribir "/" para seleccionar a partir de una lista desplegable de opciones.  

Gutenberg WordPress: Tutorial para usuarios

2. Reordena tus bloques

Puedes mover los bloques hasta donde quieras que aparezcan utilizando las flechas del propio bloque o pulsando los puntos entre las flechas para arrastrar y soltar los bloques.

Gutenberg WordPress: Tutorial para usuarios

El editor de bloques WordPress facilita mucho la reorganización de tus contenidos en comparación con el editor clásico. No hay que preocuparse por romper el código, ya que toda la información sobre el contenido del bloque (incluyendo la fuente, el color y el tamaño) se mueve con el bloque. 

La facilidad para organizar tus bloques es una de las mejores características del editor de bloques Gutenberg. Se ahorra tiempo en arreglar el código roto y no hay que depender de copiar y pegar para hacer el trabajo.

3. Ajusta la configuración de estilo de tu bloque

El siguiente paso en nuestro tutorial sobre Gutenberg WordPress es conocer el menú de configuración de estilo. En algunos casos, algunas opciones aparecen cerca del bloque cuando se hace clic en ellas. Por ejemplo, si estás editando un bloque de párrafos, aparecerán algunas opciones familiares justo encima del bloque. 

Gutenberg WordPress: Tutorial para usuarios

Sin embargo, también aparecerá un menú secundario en la parte derecha de la pantalla. Haz clic en la pestaña de ajustes o configuración.  

Gutenberg WordPress: Tutorial para usuarios

Las opciones de configuración de estilo que puedes personalizar dependerán del bloque. Por ejemplo, la configuración del bloque de párrafo es diferente a la del bloque de imagen.

Gutenberg WordPress: Tutorial para usuarios

El menú de configuración de estilo te permite personalizar fácilmente los bloques de tus entradas. De nuevo, a diferencia del editor clásico, no tienes que preocuparte de hacer cambios en el pie de foto y estropear el formato del texto subyacente. 

Crear bloques reutilizables del editor Gutenberg

Ahora llegamos a los consejos avanzados del tutorial de Gutenberg WordPress. Te ahorrarás mucho tiempo y esfuerzo guardando bloques que podrás reutilizar en futuras entradas, páginas y otros sitios web WordPress.

Gutenberg WordPress: Tutorial para usuarios

Los bloques reutilizables son útiles cuando tienes elementos que necesitan ser añadidos regularmente a un determinado sitio o tipo de post. 

Supongamos que escribes críticas de películas y tienes una hoja de cálculo que muestra tu clasificación de cada película. Quieres que siempre tenga el mismo aspecto, con un estilo específico y el mismo número de columnas y filas. Si creas un bloque reutilizable, puedes ahorrar una cantidad considerable de tiempo al recrearlo para cada entrada. 

Guardar el estilo y los distintos atributos de los elementos también puede suponer un verdadero ahorro de tiempo para los botones. 

Digamos que necesitas la misma CTA (llamada a la acción) en cada post que escribas. Para crear un botón reutilizable, empieza por el proceso típico de añadir un bloque de botones. Ajusta el estilo y el texto hasta que tenga el aspecto que deseas.  

Gutenberg WordPress: Tutorial para usuarios

A continuación, haz clic en los tres puntos del menú de bloques y selecciona Añadir a los bloques reutilizables

Gutenberg WordPress: Tutorial para usuarios

Aquí puedes dar un nombre al nuevo bloque. 

Gutenberg WordPress: Tutorial para usuarios

Si quieres reutilizar este bloque, ve al menú"Bloques normales", cambia a la pestaña"Reutilizable" y selecciona el bloque guardado. 

Gutenberg WordPress: Tutorial para usuarios

También puedes exportar bloques reutilizables para utilizarlos en otros sitios web. Solo tienes que hacer clic en los tres puntos que hay junto al bloque, seleccionar Exportar como JSON y descargar el archivo. 

Gutenberg WordPress: Tutorial para usuarios

A continuación, para añadir un bloque reutilizable exportado a otro sitio WordPress, ve a la pestaña Reutilizable del menú Bloques y selecciona Gestionar todos los bloques reutilizables

Gutenberg WordPress: Tutorial para usuarios

Esto abre una sección de aspecto más tradicional en el panel de control WordPress donde podrás gestionar todos los bloques reutilizables que hayas creado. 

Si has guardado bloques reutilizables de otros sitios web, puedes cargarlos haciendo clic en Importar desde JSON. Una vez hecho esto, deberías poder acceder a ellos como siempre desde la pestaña Reutilizable del menú de Bloques

Coloca tus bloques en grupos

El siguiente consejo profesional en nuestro tutorial de Gutenberg WordPress es sobre la agrupación de bloques. Si colocas dos o más bloques en un grupo, puedes ajustarlos y manipularlos como si fueran un solo bloque. 

Por ejemplo, puedes agrupar un bloque de llamada a la acción (CTA) para redes sociales con un bloque que contenga iconos para compartir en redes sociales. También puedes agrupar un bloque de párrafos con un bloque de botones para crear un CTA estándar que puedes insertar al final de tus entradas. 

Para crear un grupo o colección de bloques con el editor de bloques Gutenberg , selecciona todos los bloques que deseas agrupar. A continuación, haz clic en el icono situado a la izquierda del pequeño menú superpuesto:

Gutenberg WordPress: Tutorial para usuarios

Aparece un nuevo menú con la inscripción"Transformar a", haz clic en Grupo. Eso es todo. Ahora puedes mover y ajustar estos bloques como si fueran uno solo. 

Todavía se pueden hacer cambios en la configuración de cada bloque individual. Por ejemplo, puedes añadir texto a un bloque de párrafos y cambiar su aspecto. 

Si deseas desagrupar los bloques, selecciona el grupo y luego haz clic en los tres puntos del menú de superposición. Desplázate hacia abajo y haz clic en desagrupar ("ungroup" en inglés).

Gutenberg WordPress: Tutorial para usuarios

Esta función también funciona con bloques reutilizables. Una vez agrupados los bloques, puedes guardarlos como bloques reutilizables siguiendo el mismo procedimiento anterior. 

Patrones de bloque en el editor de bloques WordPress

Con WordPress Block Patterns puedes crear y compartir diseños de bloques predefinidos. Con esta función crearás diseños complejos con unos pocos clics de ratón.

Para acceder a los patrones de bloques, haz clic en el mismo signo "+" que utilizaste para acceder al menú de bloques . Selecciona la pestaña Patrones

Gutenberg WordPress: Tutorial para usuarios

A primera vista, los patrones de bloques se parecen a los bloques reutilizables. Sin embargo, los patrones de bloques son la opción más parecida a la posibilidad de crear páginas enteras en Gutenberg

Con Block Patterns, puedes añadir secciones de diseño completas a tus entradas o páginas con un solo clic. Son ideales si quieres crear y guardar un diseño para utilizarlo en varias entradas. 

El editor de bloques WordPress viene con varios patrones prediseñados, incluyendo

  • varias columnas de texto
  • botones adyacentes
  • encabezados personalizados
  • citas con imágenes
Gutenberg WordPress: Tutorial para usuarios

Otra ventaja de los patrones de bloques es que permiten cambiar más fácilmente dethemes. Dado que tu formato está ligado a los propios bloques, no se verá afectado por otro theme. 

Si deseas crear manualmente tus patrones de bloques personalizados, esto requiere algunos conocimientos de programación. En el manual de desarrollo se denominan layouts de bloque predefinidos

La creación de patrones de bloques desde cero requiere el uso de la interfaz de programación de aplicaciones (API) de bloques. Sin embargo, el plugin Block Pattern Builder puede ser de gran ayuda. 

Gutenberg WordPress: Tutorial para usuarios

Añadir bloques adicionales a Gutenberg

Antes de continuar con este tutorial de Gutenberg WordPress, debes saber que hay varios plugins que te permiten añadir aún más tipos de bloques al editor, incluyendo

  • Tabla de contenidos
  • Listas de precios
  • Google Maps
  • Formularios de contacto

Existe un directorio oficial de bloques WordPress donde se pueden encontrar y añadir bloques adicionales para Gutenberg. 

Gutenberg WordPress: Tutorial para usuarios

El plan original era crear un subdirectorio para plugins Single Block . En su lugar, el directorio actual es una subsección del directorio de plugin estándar WordPress con una lista de búsqueda de plugins basados en bloques. 

Edición completa del sitio web en Gutenberg

Por el momento, Gutenberg no permite todavía la edición completa del sitio web. Sin embargo, el equipo de desarrollo WordPress está haciendo grandes progresos hacia este objetivo, incluyendo la adición de patrones de bloques. 

Actualmente, existe una versión experimental del theme Twenty Twenty, que utiliza la edición completa del sitio web y adopta la idea de un bloque basado en themes

Con el editor de bloques WordPress, ahora puedes crear diseños basados en bloques totalmente personalizados, pero únicamente para entradas y páginas. Una vez que la edición completa del sitio web haya llegado a Gutenberg, los widgets quedan obsoletos. Esto ofrece a los usuarios un control completo sobre cada elemento de diseño, incluyendo cabeceras, barras laterales y pies de página. 

Aunque el editor de bloques Gutenberg todavía no es un WordPress Page Builder al completo, está en camino de serlo. Mientras tanto, los patrones de bloques, tal y como se explica en el tutorial de bloques de Gutenberg para WordPress, proporcionan un conjunto de funciones muy cercano al de un editor de sitios web completo. 

Desventajas del editor Gutenberg 

Aunque Gutenberg es una herramienta útil que ha cambiado la forma en que muchos usuarios interactúan con WordPress y crean contenidos, el editor no está exento de inconvenientes. 

Por ejemplo, cuando Gutenberg se introdujo por primera vez, tenía bastantes fallos. La mayoría se han arreglado desde entonces. 

Sin embargo, algo que no es un error es el hecho de que Gutenberg sigue siendo incompatible con muchos themes. Por lo tanto, si quieres utilizar un determinado theme y te gusta el diseño, es probable que no puedas personalizarlo ni utilizar Gutenberg con este. Si lo intentas, el resultado suele acabar siendo un desastre. 

En realidad, Gutenberg es compatible con algunos themes, pero no lo suficiente como para presumir de una compatibilidad generalizada. 

Otro problema que plantea Gutenberg es que no ofrece la misma flexibilidad que el editor clásico. Aunque Gutenberg elimina algunos problemas de formato caprichosos que se producen con el editor clásico, desgraciadamente en algunos casos te sentirás limitado/a en cuanto al tipo de páginas que puedes crear. 

Como aún no existen en Gutenberg opciones de personalización de themes más amplias, tendrás que conformarte con la compatibilidad para algunos themes y con algunos bloques y plugins de bloque. 

Los recursos disponibles para el uso de Gutenberg están creciendo a un ritmo constante, pero esto no hace que Gutenberg sea un constructor de temas. O al menos todavía no. 

En definitiva, Gutenberg es la opción ideal para quienes ya están acostumbrados/as a los constructores de páginas (page builders) o a los editores puramente visuales y quieren mantener esa experiencia, o para quienes solo quieren centrarse en el contenido y hacer el diseño mediante la función de arrastrar y soltar "drag and drop". 

Reflexiones finales: guía sobre Gutenberg WordPress 

El editor Gutenberg forma ahora parte del núcleo de WordPress. El equipo de desarrollo WordPress tiene grandes planes para este. Con el tiempo podrás crear menús de navegación con Gutenberg, diseños completos de sitios web y Gutenberg será compatible con un número mayor de themes. 

Hasta entonces, puedes aprovechar al máximo las funciones que ofrece actualmente WordPress Block Editor y crear entradas y páginas visualmente atractivas, sin saber una sola línea de código. Un buen trato, si nos pides opinión. 

Así que adelante: utiliza los consejos de nuestro tutorial Gutenberg WordPress y ponte ya a personalizar el contenido de tu sitio web. ¡Y asegúrate de que tu sitio web está sujeto a una oferta de hosting para webs WordPress por parte de RAIDBOXES para que funcione a una velocidad óptima. 

Editor Gutenberg Wordpress: tus dudas

¿Qué opinas del editor Gutenberg para WordPress? ¿Qué preguntas tienes para Maddy? No dudes en utilizar la función de comentarios. ¿Quieres más consejos sobre WordPress? Entonces síguenos en Twitter, Facebook o a través de nuestra newsletter.

Maddy Osman es una especialista en estrategias de contenidos SEO. Trabaja con clientes seleccionados en el ámbito de WordPress y alojamientos web. Gracias a su formación en diseño web y WordPress ha adquirido un profundo conocimiento de SEO y sabe exactamente cómo conectar las marcas con contenido relevante SEO.

Artículos relacionados

Comentarios sobre este artículo

Escribe un comentario

La dirección de correo electrónicotu no se publicará. Los campos obligatorios están marcados con *.