Saltar al contenido

¿Qué es el editor Gutenberg de WordPress?

editor gutenberg

Es posible que si eres cliente de WordPress o estás informándote para producir una nueva página web, hayas oído dialogar del editor Gutenberg. El nuevo editor de la plataforma WordPress.

Se plantea que el editor de WordPress Gutenberg va a modificar la manera de edificar las páginas webs en WordPress. Debido a que pertenece a los más grandes cambios y noticias que ha lanzado recientemente el CMS, por lo cual mejor no te quedes atrás para estar reportado de eso.

Sin embargo yo sé que por mucho que te cuente, lo cual más te agradaría es ver en directo cómo funciona. De esta forma no te pierdas este tutorial del editor de WordPress Gutenberg en español.

Qué es Gutenberg

El editor Gutenberg es un plugin que va a permitir la maquetación de páginas para que podamos edificar nuevos proyectos web en la plataforma de WordPress. Gutenberg personaliza las páginas de nuestra web de manera bastante fácil a base de bloques que iremos agregando sin necesidad de tener conocimientos de código.

Fundamentalmente es una habituación del editor tradicional a un editor backend más potente y adaptado a las necesidades de los usuarios.

Seguramente ahora se encuentren viniendo a la cabeza constructores como Elementor, Divi, Visual Composer o Thrive Architect. ¿qué diferencia hay entre Gutenberg y otros maquetadores para WordPress?

Comúnmente debemos mercar un asunto o plantilla para producir una web en WordPress y después construirlas con un maquetador. Si usas o has usado alguno como los nombrados sabrás que son de arrastrar y soltar. Te permiten ver el resultado al instante.

El problema viene una vez que poseemos que cambiar una página en el back-end de WordPress a código.

Lo cual puedes hacer con el editor Gutenberg es edificar las páginas por medio de bloques a partir del propio backend de WordPress. De una manera muy semejante a los ya conocidos constructores.

Puedes edificar y ver el resultado de la página a partir del propio back-end. Lo cual es una enorme novedad para WordPress y podría llegar a suplir en un futuro la mayor parte de constructores que en la actualidad utilizamos.

Empero bien, no me voy a posicionar todavía sin haber observado el plugin Gutenberg de cerca. De esta forma que iremos a ver como se instala y un tutorial más a fondo.

Cómo instalar Gutenberg, el nuevo editor de WordPress 5.0

Primero de todo para lograr usar Gutenberg en tu página web, se necesita tener el mejor hosting español donde puedas alojar tu WordPress y un dominio para tu página web. 

Una vez tengas todo lo mencionado, con la plantilla que nos otorga el propio WordPress ya tenemos la posibilidad de instalar el plugin de Gutenberg.

Es decir bastante sencillo, lo primero que se debe tienes que hacer es visitar la biblioteca de plugins de WordPress y buscar “Gutenberg”:

Una vez lo tengas, deberás pulsar en “instalar ahora” y en “Activar”, ¡y ya va a estar instalado en tu WordPress este editor!

Cómo usar el editor de WordPress Gutenberg 3.2.0

Con el plugin de Gutenberg ya instalado tenemos la posibilidad de generar una nueva página o un nuevo acceso de blog y empezar a trastear con este nuevo editor.

Barra de herramientas de Gutenberg

En esta situación te voy a enseñar cómo está desarrollada nuestra demo del plugin para lograr ver en qué está formado la barra de herramientas y cómo funciona.

Como te comentaba previamente, el constructor Guternberg funciona por medio de bloques, por lo cual tendrás que elegir el botón “+” de aumentar bloque para adicionar nuestras propias “secciones”.

El editor posibilita desbaratar los cambios hechos y rehacerlos de manera  simple debido a como si de un archivo de Word se tratase, integró 2 botones para volver atrás y adelante.

Justo al lado del botón “+” poseemos un botón de información, el cual te mencionará la información general como el número de palabras de nuestra página, el número de encabezados, los párrafos y el número de bloques de la página que estés construyendo.

Además, mostrará la jerarquía de H que tiene de manera bastante fácil y visual.

A su derecha encontrarás los instrumentos con la elección de “Vista Previa” con el que como con otros constructores back-end. Pulsandolo tendrás la posibilidad de ver los resultados de lo cual vayas creando en la página.

Sin embargo, aunque pulses sobre vista previa, si no clicas en “Publicar” esta página no va a ser visible para que los demás entren en tu web. Por lo cual quedará en borradores y solo van a tener ingreso a ella los administradores o usuarios.

Si te vas a la derecha, donde permanecen los instrumentos, tienes la alternativa de esconder o demostrar más posibilidades para personalizar mejor la página.

Las posibilidades del archivo

Las posibilidades del archivo que se presentan son las mismas que se mostraban en el editor de WordPress. En la situación de las entradas del blog van a ser las categorías, etiquetas, imagen destacadas, estado y visibilidad.

Si abres una nueva página (que no sea una acceso del blog), las posibilidades cambiarán a: estado y visibilidad, imagen destacada, comentarios y atributos de página.

Sin embargo si vas al lado de donde pone “Documento”, encontrarás la parte del “Bloque” que cambiará en funcionalidad del bloque que tengamos seleccionado. Ya sea un escrito, imagen, vídeo, encabezado, etcétera.

En esta situación voy a pulsar sobre el bloque de la imagen para que veas que al seleccionarlo da la probabilidad de cambiar las personalizaciones de esta imagen primordial del post. Como es la elección de oscurecer o de hacerla fija, y una alternativa para añadirle su clase de CSS.

En la situación que selecciones un bloque de escrito, se abrirán otro tipo de posibilidades de bloque en el que aparecerá la alternativa de modificar la medida de las letras, el color, etc.

Sin embargo, si vas a la derecha completamente hay un botón con 3 aspectos y si lo seleccionas tendrás la posibilidad de modificar y pasar del editor visual al editor de código, viendo de esta forma los códigos HTML de cada bloque provocados.

Además de esto, en dichos 3 puntos de vista tienes la probabilidad de imitar todo el contenido. Si después deseas pegarlo en alguna otra página o acceso no tengamos que remedar el bloque de HTML completo como en el editor tradicional.

Además encontrarás la elección de activar la alternativa de los tips. Para que una vez que estés comenzando a usar este editor de WordPress puedas continuar las normas del plugin Gutenberg.

Bloques de Gutenberg: La nueva forma de maquetar

Una vez observado el desempeño de los instrumentos que permite el editor, vamos a ver cómo funcionan los bloques de Gutenberg y sustraer conclusiones sobre este editor de WordPress.

Lo primero que iremos a hacer es producir una página nueva en “Páginas”, “Añadir Nueva”, “Gutenberg”.

Una vez tengamos la página ya agregamos nuestros propios nuevos bloques pulsando al botón de +, como te he explicado anteriormente.

El plugin da una extensa variedad de recursos que vamos a poder integrar en la página. Los más usados son formatos, recursos de diseño, widgets e incrustados.

Aquí tienes un esquema de todos los que vas a poder descubrir en el editor Gutenberg 3.2.0.

Si en cualquier momento has usado algún otro constructor de WordPress como Elementor, verás que poseen un aspecto muy semejante. Salvo en Elementor tendremos que arrastrar y soltar. En Gutenberg tan solo deberás pulsar para que se agregue todos los bloques automáticamente  de la página.

Una vez agregas cada uno se nos abren las especificaciones, como es en la situación del escrito: las negritas, alineación del escrito, enlaces, etc.

Si pulsas sobre los 3 puntos de vista de los ajustes, se abren unas posibilidades bastante relevantes como son duplicar, editar como HTML o remover.

Estas posibilidades facilitan mucho la maquetación tanto de páginas como de artículos. Debido a que puedes duplicar las secciones que ya tengas editadas y sobreescribir, cambiando textos o imágenes para no tener que aumentar nuevos bloques.

Empero, vamos a ver ciertos bloques relevantes para una vez lo instales y te pongas a la acción con el nuevo editor de WordPress, sepas usar todos ellos.

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