Blog / WordPress 5.4 – Parte 2: Editar con Gutenberg

La versión 5.4 de WordPress se aproxima, y como viene haciendo desde la 5.0, permitirá editar con Gutenberg. En esta segunda parte de nuestro artículo dedicado al lanzamiento de WordPress 5.4 daremos un vistazo a las particularidades de Gutenberg y a cómo editar nuestras entradas y páginas con él. ¿Quieres saber más?

A tener en cuenta al editar con Gutenberg

El editor de WordPress 5.4 es una herramienta muy útil e intuitiva; fomenta el correcto flujo de la información dentro de una página o entrada, y ayuda a mantener una jerarquía definida.

Lo primero que tenemos que entender a la hora de editar con Gutenberg es que «todos los elementos son bloques«. Así, como si de un puzzle se tratara, cada párrafo, encabezado, lista o imagen, se comportará como un elemento independiente si así lo deseamos.

Por ejemplo, con cada salto de línea se crea un párrafo automáticamente. De esta manera podemos seleccionar los párrafos escritos y «arrastrarlos» para ordenarlos cuantas veces queramos. También podemos ordenar los bloques paso a paso con las flechas de selección que acompañan a cada bloque. Un funcionamiento fácil y sencillo que no tardaremos en comprender por lo intuitivo que resulta.

Primeros pasos al editar con Gutenberg

Cuando comenzamos una entrada o página, lo primero que observaremos son los dos bloques esenciales; el título y un bloque de párrafo vacío para comenzar a escribir.

Como en versiones anteriores de WordPress, escribir el título hará que se cree automáticamente el «Enlace permanente» o «Permalink», que podremos editar a placer en el menú lateral. Es precisamente ese menú lateral unas de las claves a la hora de editar con Gutenberg, ya que albergará los menús contextuales que variarán en función de la herramienta de bloque seleccionada.

Así, al editar el encabezado se despliega un menú especifico para dicho bloque, permitiendo configurarlo de manera más concisa. De esta manera contamos con un menú de ajustes básicos del bloque al seleccionarlo, y el menú contextual lateral.

Cada bloque cuenta con su menú de edición rápida con las opciones más básicas propias de cada tipo. Además incluye un botón que despliega opciones comunes a todos los bloques:

• Ocultar ajustes del bloque: muestra u oculta el menú lateral.
• Duplicar.
• Insertar antes: permite añadir un nuevo bloque encima.
• Insertar después: permite añadir un nuevo bloque debajo.
• Editar como HTML: permite editar el bloque en HTML de manera independiente. Similar al editor HTML de versiones anteriores de WordPress, pero solo para el bloque en cuestión. Este bloque resulta especialmente útil para el desarrollo de sitios web a medida.
• Añadir bloques reutilizables:
  esta opción es similar a la que incluyen muchos «builders» o editores visuales.

Bloques de básicos para editar con Gutenberg

En Gutenberg podemos observar la aparición de un icono, tanto en la parte superior izquierda como en los espacios entre bloques. Este icono con un «+» inscrito en una circunferencia sirve para añadir un nuevo bloque, por defecto al final de la entrada o página. Al pulsarlo se despliega el menú de selección de bloques donde podremos observar que se encuentran ordenados en los siguientes grupos.

Más utilizados

Aquí se encuentran a modo de acceso directo los bloques más comunes y utilizados. De esta manera, si nos encontramos editando una página y recurrimos a textos e imágenes las tendremos más a mano.

Bloques comunes

Este grupo contiene los bloques más básicos y elementales. Bloques de texto, imágenes y archivos multimedia, listas, citas, fondos o enlaces a archivos, entre otros.

Párrafo

El bloque más básico y elemental para crear texto corrido. Se crea por defecto al escribir en el editor y posee las opciones de configuración más habituales en editores de texto.

Una de las particularidades de este bloque respecto a la escritura de texto de WordPress 4.9 es la posibilidad de añadir clases CSS adicionales al párrafo de manera independiente o capitalizarlo con un solo click.

Encabezados

Este bloque de Gutenberg contiene los encabezados y títulos indispensables para jerarquizar la información. Se distribuyen en niveles de la etiqueta HTML «h» (H1, H2, H3, …). Con opciones similares a los párrafos, cuenta con la peculiaridad de incorporar la opción de insertar anclas a los distintos encabezados.

Imagen

Similar al botón de «Insertar Objeto» de WordPress 4.9 pero con un editor algo más completo. Su menú básico contiene varios botones de formato para determinar el alineamiento de la imagen y su comportamiento.

Galería

Uno de los bloques que cuenta con mayor tirón entre los usuarios de WordPress. Si bien es cierto que sigue teniendo margen de mejora, la posibilidad de incorporar galerías de Gutenberg hace plantearse la opción de dejar atrás algún que otro plugin en pos de este módulo.

Aseveramos esto porque el funcionamiento de la galería es sencillo, rápido, y con un acabado muy bien ejecutado. Las imágenes se alinean en las columnas especificadas, y si estas no son regulares y hay alguna imagen sobrante, se alinea por sí sola para mantener una retícula impecable.

Listas

Las habituales listas ordenadas y desordenadas de HTML. Quizá el bloque más pobre de los vistos hasta ahora. Seguimos echando en falta más opciones avanzadas para usuarios sin conocimientos de CSS.

Cita

Este bloque nos permite insertar la típica cita correspondiente a la etiqueta «blockquote» de HTML. Gutenberg incorpora una opción para alternar entre un formato de cita simple y otro mucho mayor y más vistoso.

Audio y video

Aunque son bloques distintos van juntos de la mano en cuanto a comportamiento. El mayor fuerte de este bloque es sin duda la interfaz del reproductor multimedia que resulta bastante fresca y actual.

Fondo

Uno de los bloques que supuso un salto de calidad con respecto a versiones anteriores a WordPress 5.0. Fondo nos permite insertar un bloque con el ancho completo de la página (si la plantilla del tema lo permite, puesto que por el momento no todas están preparados para ello). El bloque puede incluso contener un vídeo de la biblioteca, de una URL o una imagen.

Archivo

Este bloque permite insertar un archivo, como por ejemplo, un archivo PDF. Nos ofrece la posibilidad de insertar un enlace simple o un botón que acompañe al enlace para facilitar la descarga.

En el próximo articulo…

Para concluir nuestro artículo con motivo de la llegada de WordPress 5.4 continuaremos con el repaso a su editor visual. Hablaremos del resto de bloques para editar con Gutenberg y os daremos las claves y novedades que incorporará la próxima actualización. Os esperamos.

Análisis de WordPress 5.4: parte 1 | parte 2 | parte 3