Editor Gutenberg de WordPress – Guía 2019

Te damos a conocer el editor gutenberg de wordpress y su filosofía de funcionamiento, así como la implementación en el código fuente de nuestra página web y como wordpress ha previsto la llegada de este nuevo editor de contenido.

Con la última actualización de wordpress a la versión 5, ha llegado para quedarse el tan temido como esperado, editor Gutenberg de wordpress. Son muchas las preguntas que han surgido alrededor de la llegada de este editor y muchos de los webmasters, ante la incertidumbre de lo desconocido, han entrado en fase de pánico al pensar que su página web pudiese llegar a desmaquetarse, en el mejor de los casos.

Preguntas como: ¿Tendré que rediseñar mi página web? ¿Podré actualizar mi wordpress a la última versión o tengo que esperar? han sido comunes estos últimos meses. WordPress contaba con ello y vamos a ver como es este editor y que mecanismos a puesto wordpress para poder realizar este cambio tan vital en su editor de texto.

ASPECTOS GENERALES DEL EDITOR GUTENBERG DE WORDPRESS

En el nuevo editor distinguimos cuatro zonas independientes con finalidades bien definidas dentro del editor.

1. Barra superior de herramientas.
2. Barra derecha de configuración y opciones del editor.
3. Zona central de edición de contenido.
4. Zona inferior de opciones personalizadas.

El editor de gutenberg de wordpress es totalmente interactivo. Dentro de la zona central de edición de contenido, muchas de sus funciones o barras de herramientas no se muestran hasta que no pasas por encima con el ratón o haces click en el bloque concreto que quieres editar. Esto también hará que la zona lateral izquierda de configuración y opciones del editor se reconfigure contextualmente.

Barra superior de herramientas

En la barra superior de herramientas podemos distinguir dos zonas:

• Funciones generales de navegación por bloques. Esta zona situada en el lateral izquierdo del editor y contiene las siguientes funciones:
  • Añadir bloque.
  • Deshacer y Rehacer acción.
  • Estructura de contenido.
  • Navegador por bloques.
• Funciones generales de publicación de contenido y visualización del editor situadas en el lateral derecho de la barra superior de herramientas.
  • Solo guardar.
  • Vista previa.
  • Publicar.
  • Ocultar / Mostrar Ajustes.
  • Mostrar más herramientas y opciones.

AÑADIR UN BLOQUE DE CONTENIDO EN GUTENBERG

Para añadir un bloque de contenido, pulsa en icono de la barra superior de herramientas y selecciona el tipo de bloque de contenido que quieres insertar. Hazlo conforme a la imagen y el bloque se añadirá al final de la página.

¿Que es un bloque de contenido en Gutenberg?

Un bloque, es una pieza de código html que engloba un contenido de la web. A partir de ahora todos los elementos del contenido que insertes en wordpress a través de Gutenberg se consideran bloques independientes. Es decir, una imagen es un bloque diferente a un párrafo, una lista o una galería de imágenes.

Para insertar un contenido, conforme a la siguiente imagen, debes de ir al icono de la barra de herramientas y seleccionar el bloque que quieres insertar. A partir de este momento pasarán dos cosas:

• El contenido se insertará en la zona de contenido con un asistente si fuera necesario.
• Las opciones adicionales se mostrarán en la barra derecha de opciones y configuración del editor.

Insertar un bloque de contenido

Para insertar un bloque de contenido, sin ningún bloque seleccionado, ponte encima del bloque sobre el que quieres insertar y verás un icono que te permitirá insertar un bloque que se colocará antes del bloque sobre el que has pulsado.

Como cambiar el tipo de bloque de contenido en Gutenberg

Para cambiar el tipo de bloque de contenido, pincha sobre el mismo y se desplegará encima el menú contextual. Desde este menú podrás hacer dos cosas entre otras:

• En el icono, tipo de bloque, situado en el extremo izquierda, colocándote encima podrás cambiar el tipo de bloque por uno que sea compatible con el contenido que ya está definido.
• En el icono de la derecha, opciones, podrás quitar el bloque si así lo deseas.

ESTRUCTURA DE CONTENIDO Y NAVEGACIÓN POR BLOQUES

Una de las funciones más rápidas que tiene el nuevo editor, es la información estructura del contenido que estamos redactando en wordpress. Esto es bastante útil para todos aquellos redactores que escriben con una orientación SEO.

Como se puede ver en la imagen, Gutenberg nos da un resumen esquemático del contenido y nos permite navegar hasta el mismo con facilidad.

Tipos de bloques en el editor Gutenberg

El editor incluye una gran lista de bloques que permite al usuario insertar prácticamente cualquier tipo de contenido. En la siguiente tabla se muestran los bloques y como son clasificados por wordpress:

BLOQUES COMUNES
	Párrafo	Inserta un bloque de párrafo e inicia funciones de un editor de texto
	Encabezado	Inserta un encabezado y sus opciones de configuración
	Cita	Inserta un texto en formato cita
	Imagen	Inserta una imagen y su leyenda
	Galería	Inicia un asistente para insertar una galería de imágenes
	Lista	Inserta una lista
	Audio	Inserta un archivo de audio
	Fondo	Coloca un fondo a toda la página
	Archivo	Inserta un botón para la descarga de un archivo seleccionado
	Vídeo	Inicia un asistente para insertar un vídeo
FORMATOS
	Código	Inserta código enmarcado en la etiqueta html
	Clásico	Inserta un bloque de contenido con un editor clásico
	HTML personalizado	Inserta código HTML
	Preformateado	Inserta código enmarcado en la etiqueta html
	Parrafo de cita	Inserta código de cita
	Tabla	Inicia un asistente para generar una tabla
	Verso	Inserta texto con etiquetas y estilo de verso
ELEMENTOS DE DISEÑO
	Botón	Inicia un asistente para solicitar una URL asociada a un botón
	Columnas	Inserta una columna
	Medios y texto	Inicia un asistente para insertar contenido multimedia y texto en diferentes formatos
	Más	Inserta el texto «Leer más» y permite ña opción de ocultar el texto anterior
	Salto de página	Inserta un salto de página creando una experiencia multi-página
	Separador	Crear una ruptura entre ideas o secciones con un separador horizontal
	Espaciador	Añade espacio en blanco entre bloques y personaliza su altura.
WIDGETS
	Shortcode	Inserta elementos adicionales personalizados con un shortcode de WordPress.
	Archivos	Muestra un archivo por meses de tus entradas.
	Categorías	Muestra una lista de todas las categorías.
	Últimos comentarios	Muestra una lista de tus comentarios más recientes.
	Últimas entradas	Muestra una lista de tus entradas más recientes.
INCRUSTADOS
	Incrustado	Incrusta vídeos, imágenes, tweets, audios, y otros contenidos desde fuentes externas.
	Twitter	Incrusta un tweet.
	YouTube	Incrusta un vídeo de YouTube.
	Facebook	Incrusta una publicación de Facebook.
	Instagram	Incrusta una publicación de Instagram.
	WordPress	Incrusta una entrada de WordPress.
	SoundCloud	Incrusta contenido de SoundCloud.
	Spotify	Incrusta contenido de Spotify.
	Flickr	Incrusta contenido de Flickr.
	Vimeo	Incrusta contenido de Vimeo.
	Animoto	Incrusta un vídeo de Animoto.
	Dailymotion	Incrusta un vídeo de Dailymotion.
	Meetup.com	Incrusta contenido de Meetup.
	Mixcloud	Incrusta contenido de Mixcloud.
	Reddit	Incrusta contenido de Reddit.
	Scribd	Incrusta contenido de Scribd.
	Slideshare	Incrusta contenido de Slideshare.
	Tumblr	Incrusta contenido de Tumblr.
	WordPress.tv	Incrusta contenido de WordPress TV.

Duplicar contenido

Una de las cosas que ha incorporado wordpress al editor Gutenberg, es la capacidad de duplicar los bloques. En muchas ocasiones hemos echado de menos esta función y por fin ha llegado. Para duplicar un bloque solo tenemos que buscar la opción en el menú contextual del bloque o utilizar el atajo de teclado «Ctrl+Shift+D»

Ordenar bloques de contenido

Para ordenar los bloques de contenido que tengamos en nuestro post o página, solo tenemos que pasar por encima del bloque que queremos ordenar y aparecerá a la derecha un control para mover de posición el bloque seleccionado.