Gutenberg el nuevo editor de WordPress

Gutenberg el nuevo editor de WordPress
01
Oct

Entre temores y sollozos de algunos, y sonoros aplausos de otros, a comienzos de año, WordPress lanzó su versión 5.0 integrando el nuevo editor que venía anunciando. Gutenberg, el nuevo editor de WordPress, nació con la intención de facilitarle la vida al usuario sin conocimientos en HTML. Permitiendo una edición más intuitiva, usando bloques.

Y es que, el editor Gutenberg, nos permite componer páginas y entradas, insertando elementos y estructuras con un solo clic. Además posee un sistema similar al Drag and Drop (arrastrar y soltar), que facilita la colocación de cada elemento, permitiendo una edición más intuitiva. Lo que se llamaría “composición modular”.

Al menos, es lo que opinan algunos.

La evolución de Gutenberg

Que nadie crea que hemos perdido el norte, atribuyendo la teoría de la evolución a Gutenberg. De hecho, Gutenberg fue el inventor de la imprenta. Y utilizaba unas placas en las que iba colocando pequeños bloques con las letras en relieve, para así componer la estructura de un párrafo ¿Te suena?

No, en este post no hablaremos de biología. Pero si de la evolución de un elemento fundamental para escribir nuestras entradas en el blog. El editor de texto de WordPress fue cambiando desde los inicios de este C.M.S. hasta quedarse con, el que todos conocemos como, Editor Clásico de WordPress.

Editor Clásico de WordPress

Pero su nombre correcto es WordPress TinyMCE Editor. Este tiene una estructura más clásica y, aunque muy simple, similar a muchos editores de texto. Creado por Tiny Technologies Inc., fue adoptado por WordPress, muchas versiones atrás, por su estabilidad y robustez. Y de hecho, salvo por la desaparición de algunos elementos, poco ha cambiado en años.

De ahí el susto de algunos cuando, tras actualizar a la versión de WordPress 5.0, trataron de escribir una entrada en su blog. Esto fue con lo que se encontraron.

WordPress Gutenberg Editor

-¡Oh, Dios Mío! ¿Pero esto qué es?– Pensaron.

Muchos uyeron despavoridos, en busca de una alternativa. Y eso que ya estaban avisados. Pero como los chicos de WordPress son muy listos, nos ofrecían la instalación gratuita del Editor Clásico desde el repositorio de plugins. Aunque esto dejará de ser así para el 2021.

A día de hoy, muchos son los que han adoptado con alegría las nuevas excelencias del editor Gutenberg. Lo que ha permitido a sus desarrolladores, analizar y mejorar su funcionamiento e integración.

A día de hoy, este es el aspecto que presenta, y sobre el que vamos a trabajar.

Editor Gutenberg de WordPress

Conociendo a Gutenberg, el editor por bloques de WordPress

Tras un poco de historia, y para aquellos valientes que quieran atreverse con la “edición por bloques”, voy a realizar una serie de tutoriales donde detallaré el funcionamiento de cada elemento del editor Gutenberg. Pero empecemos por el principio.

Vamos a centrarnos hoy en el panel principal. Aunque parece que ha desaparecido toda la caja de herramientas del editor, esto no es así.

Por otro lado, el bloque lateral de opciones presenta ahora una estructura desplegable. Y dividida en dos grupos, “Documento” y “Bloque”. En cuanto al área de trabajo, no aparecen límites ni casillas.

Esto es lo que contienen cada uno de los elementos esenciales:

  1. Añadir bloque: Este es el primer elemento y el más importante, ya que contiene todos los bloques que podemos insertar en nuestra página o entrada. Tan solo hay que buscarlo y hacer clic para insertarlo.Edigor Gutenberg - Añadir Bloque
  2. Estructura del contenido: Este elemento muestra, en esencia, un contador. Este nos informará del número de palabras, encabezados, parafos y bloques hemos insertado en nuestra página o entrada.Edigor Gutenberg - Estructura del Contenido
  3. Navegación de bloques: Desde este desplegable dispondremos de acceso directo a los módulos insertados. Lo que nos permitirá ver una imagen general de la estructura de tu página o entrada.Edigor Gutenberg - Navegación de bloques

Esto en cuanto al margen izquierdo se refiere. Al margen derecho de la barra de herramientas aparecerán los botones ya conocidos de “Vista previa” y “Publicar/Actualizar”. También tendremos aquí la opción para enviar nuestra entrada al borrador.

Editor Gutenberg de WordPress - Ajustes

También tendremos el botón de “Ajustes”, que tan solo tiene la función de hacer aparecer y desaparecer la barra lateral de ajustes. Y los últimos tres puntitos te permitirá mostrar más herramientas y opciones, de las cuales, así como de los elementos mencionados antes, iremos profundizando en los siguientes tutoriales.

Barra lateral de Ajuste de Gutenberg

Aquí verás otro de los cambios visuales más caracteristicos del editor Gutenberg de WordPress.

En la barra de ajustes de Gutenberg encontrarás, a modo de desplegables, las cajas que aparecián en la barra lateral del editor clásico. Entre las que están:

  • Estado y visibilidadEditor Gutenberg de WordPress - Barra de Ajustes
  • Categorías
  • Etiquetas
  • Imagen destacada

Pero al mismo tiempo, incluye las cajas que antes podíamos ver debajo del área de trabajo. Ahora aquí encontrarás:

  • Extracto
  • Comentarios

Además, contiene la pestaña “Bloque” donde aparecerán las configuraciones particulares de cada bloque que vayamos insertando.

Área de Trabajo de Gutenberg

Otro cambio importante reside en el área de trabajo de Gutenberg. El diseño es más minimalista y no presenta las tradicionales casillas para introducir el título y el contenido de la página o entrada. Ahora, en cambio, tan solo debemos clicar en “Añadir Título” y comenzar a escribir.

Editor Gutenberg de WordPress - Area de Trabajo

De forma predeterminada, en cada entrada nueva y bajo el área del título, aparecerá un bloque de texto ya insertado. Listo para que puedas añadir tu contenido.

¿Qué? ¿A que ahora la cosa no parece tan terrible? Por hoy ya está bien. Espero que al menos ahora veas con otros ojos a Gutenberg el nuevo editor de WordPress. Pero si aún sigues con el susto en el cuerpo, no te preocupes. En proximas semanas iremos ampliando este tutorial, profundizando en los elementos más importantes.

¡Hasta entonces!

Descarga la versión en PDF de esta Guía sobre como Gutenberg, El nuevo editor de WordPress

Descargar “Gutenberg el nuevo editor de WordPress” Gutenberg-el-nuevo-editor-de-WordPress.pdf – Descargado 15 veces – 960 KB

Si te he ayudado en algo con este tutorial, te agradecería que contribuyeras a que este proyecto siguiera adelante. Cualquier cantidad por pequeña que sea será bienvenida. Gracias!!!




  • Compartir:

Envía un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.