Contenido del artículo

¡Haz clic para puntuar esta entrada!
(Votos: 15 Promedio: 4.5)

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.

Editor Gutenberg Secciones generales

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.
Editor Gutenberg Barra Superior de herramientas

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.

Editor Gutenberg Añadir Bloques

¿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.
Editor Gutenberg Opciones Bloques

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.

Editor Gutenberg Insertar Bloque

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.
Editor Gutenberg Cambiar Bloque

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.

Editor Gutenberg Navegación Bloques

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»

Editor Gutenberg Duplicar Bloque

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.

Editor Gutenberg Ordenar Bloques