3. Gestión de contenidos en WordPress

3.3. Gutenberg, el nuevo editor de texto

Para la creación de contenidos, WordPress emplea un editor de texto que aparece visible tanto en una página como en una entrada. Este editor permite escribir y modificar archivos digitales compuestos únicamente por texto sin formato.

Además, el editor de texto es del tipo WYSIWYG, lo que permite escribir un documento viendo directamente el resultado final, frecuentemente el resultado visible en el FrontEnd.

Gutenberg se emplea tanto para la creación y edición de páginas como de entradas, por lo que nos detendremos a examinar sus funciones.

Vista del editor Gutenberg en una página de WordPress.
Fuente: WordPress

Inserta un nombre para tu contenido (el título del mismo) y comienza a crear.

Vista del editor de bloques de Gutenberg en WordPress.
Fuente: WordPress

Pulsa en el botón «+» situado en el interior de un pequeño círculo para seleccionar el bloque que queremos insertar y comenzar a introducir contenidos personalizados. Se desplegará un menú con los diferentes bloques disponibles por defecto y un pequeño buscador en la parte superior para poder escribir el nombre del bloque y encontrarlo más rápidamente.

En la parte superior derecha, podemos pulsar el botón del engranaje para mostrar un menú contextual lateral que variará en función del elemento que tengamos seleccionado en el editor. Por defecto, muestra las opciones del documento, pero si seleccionamos la opción «bloque», el contenido de este menú variará en función del bloque que tengamos seleccionado en el editor. Así, si tenemos un bloque de columnas, en el menú lateral podemos indicar el número de columnas de dicho bloque, y si tenemos un bloque de párrafo podremos ajustar el tamaño del texto, color, formato, el color de fondo, etc.

Por defecto, estos son los principales bloques que incluye Gutenberg (aunque irán aumentando con el tiempo y/o con la instalación de nuevos complementos):

1) Más utilizados: son los accesos directos a los elementos más comunes.

2) Bloques comunes

  • Imagen: inserta una imagen.
  • Párrafo clásico: inserta un párrafo de texto con las opciones del editor clásico (más completo).
  • Párrafo: inserta un párrafo de texto con las opciones de edición más sencillas.
  • Encabezado: añade un encabezado (etiquetas H de HTML) en tu web.
  • Galería: inserta una galería de fotos.
  • Lista: inserta una lista de elementos, ordenada o desordenada.
  • Cita: inserta un texto en formato cita, entrecomillada y con un formato especial.
  • Audio: inserta un archivo de audio.
  • Fondo: inserta una imagen de fondo bajo un texto que tú puedes editar.
  • Archivo: permite poner a disposición del internauta un archivo determinado para su descarga.
  • Clásico: inserta un párrafo de texto con el editor clásico.
  • Vídeo: inserta un archivo de vídeo.

3) Formatos

  • Código: permite insertar un fragmento de código.
  • HTML personalizado: permite añadir contenido formateado en HTML.
  • Preformateado: muy similar al de HTML personalizado, pero permitiendo mantener los espacios o saltos de línea.
  • Párrafo de cita: permite incluir una cita textual y su referencia.
  • Tabla: introduce una tabla de contenidos distribuidos en filas y columnas.
  • Verso: introduce un párrafo con un estilo diferente a los anteriores.

4) Elementos de diseño

  • Botón: inserta un botón que puedes dirigir a cualquier URL.
  • Columnas: introduce un bloque de contenido distribuido en columnas. Es, posiblemente, el elemento más útil para diseñar apartados como la portada de tu propia página web.
  • Medios y texto: inserta un bloque de dos columnas, donde una es un medio audiovisual y otra es un contenido textual.
  • Más: introduce un botón de «leer más».
  • Salto de página: coloca un marcador para saltar página.
  • Separador: introduce una línea de separación de contenidos entre bloques.
  • Espaciador: inserta un espacio de píxeles por determinar para espaciar los bloques anterior y posterior.

5) Widgets

  • Shortcode: permite introducir de forma sencilla los códigos cortos de WordPress.
  • Archivos: muestra un enlace con el mes y año que agrupa las entradas publicadas en esa fecha.
  • Categorías: muestra un menú con las categorías existentes.
  • Últimos comentarios: muestra los últimos comentarios recibidos en la web.
  • Últimas entradas: muestra las últimas entradas publicadas en la web.

6) Incrustados. Este conjunto de bloques permite seleccionar el adecuado para incrustar elementos de los sitios webs más empleados, como Twitter, YouTube, Facebook, Instagram, WordPress, Soundcloud, Spotify, Flickr, etc. El abanico de opciones es muy elevado, y crecerá con el tiempo.

En la sección de complementos podrás expandir las posibilidades del editor de bloques con nuevos bloques y funcionalidades para mejorar el rendimiento y la apariencia gráfica de tu web con Gutenberg.

¡Para terminar! Si no te gusta Gutenberg y empleas una versión de WordPress superior a la 5.0, siempre puedes volver al editor clásico con unos simples pasos:

  1. Ve al gestor de plugins, pulsa en «Añadir nuevo» y utiliza el buscador para localizar el complemento «Classic Editor», instálalo y actívalo.
  2. En el menú «Ajustes > Escritura» ahora podrás marcar cuál es el editor predeterminado para todos los usuarios y también si permites a los usuarios cambiar de editor (en cada entrada o página, podrás usar uno u otro).