Cómo utilizar Gutenberg de WordPress

Si estas asociado al mundo del blogging o la publicación de contenidos web a través de WordPress, es necesario que sepas los cambios que se avecinan. Existe una nueva forma de crear y editar contenido denominada Gutenberg.

WordPress siempre fue conocido por su facilidad de uso y experiencia amigable con el usuario principiante. Esto le ha hecho ganar la cuota de mercado más grande, con más del 60% entre todos los sistemas de gestión de contenido (CMS por sus siglas en inglés) Pero ahora está yendo mucho más lejos al implementar esta nueva herramienta. Si estas buscando cómo hacer un blog, ahora será mucho más fácil con esta potente herramienta.

¿De qué se trata?

Si bien WordPress tiene una excelente interfaz de usuario con la que podrás administrar todo el proceso de gestión, edición y publicación, la forma de crear y editar contenido no es la más cercana a una experiencia natural de diseño.

Como muchos sistemas similares, para la edición y creación de contenido HTML, WordPress utilizaba el editor y procesador de texto: WYSIWYG, acrónimo de: What You See Is What You Get (Lo que ves es lo que obtienes), una experiencia de edición bastante mejorada respecto del texto plano, pero con ciertas falencias especialmente en cuanto a diseño y layout o distribución de elementos sobre el espacio disponible.

Gutenberg llegó a este sistema como un plugin que puedes descargar e instalar en simples clic desde la galería, y que permite crear con una experiencia similar a la de ciertos programas de diseño, pero con una visión dedicada a la web donde podrás elegir tu layout o distribución y agregar elementos como:

  • Títulos.
  • Cuerpos de texto.
  • Imágenes.
  • Citas textuales.
  • Galerías.
  • Otros elementos embebidos o vinculados como redes sociales y otros servicios en la nube.
  • Código HTML personalizado.

Esta dinámica se lleva a cabo a través del conocido método de arrastrar y soltar, por lo que la interacción es mucho más natural.

Gutenberg todavía no es el editor principal de WordPress, por lo que puedes seguir usando el editor clásico, pero está planeado que sea el predeterminado en la próxima versión de WordPress por lo que aún se están ajustando los detalles para tener la mejor compatibilidad con las versiones anteriores y todas las publicaciones ya creadas.

Puedes obtenerlo de dos maneras: Si el sistema te ha dado aviso sobre esta novedad, entonces sigue los pasos indicados, o haz clic en “Probar Gutenberg”. Si no, tendrás que ir hasta la galería de plugins, buscarlo y hacer clic en “Instalar”. Luego clic en activar para que quede funcionando.

Funcionamiento:

Una vez que empezamos a editar una publicación podemos observar el modo de operación. Gutenberg funciona mediante bloques que puedes agregar. El listado de opciones es extenso, pero podrás encontrar lo que buscas fácilmente gracias a la barra de búsqueda dentro del comando: agregar, en la barra superior.

Una vez adicionado el bloque deseado, puedes cambiar sus propiedades en el panel derecho, haciendo clic en el botón: Bloque. Una vez allí, puedes cambiar las propiedades, características o comportamiento de este.

Cada bloque tiene un menú contextual, el cual te permite ejecutar una variedad de acciones útiles como pueden ser:

  • Cambiar entre Editor HTML y Editor Visual.
  • Insertar elemento antes o después.
  • Quitar bloque.

A continuación, haremos una publicación de prueba para conocer las ventajas y dinámica de este nuevo editor:

#1: Crear nueva publicación:

Gutenberg sirve tanto para entradas como para páginas, pero en esta ocasión vamos a probarlo en entradas. Haz clic en entradas en el panel izquierdo, luego en: añadir nueva.

#2: Agregar bloques:

Una vez dentro del sistema de edición y, habiendo instalado y activado Gutenberg correctamente, veremos un bloque de título y de contenido ya añadidos. Haz clic en el bloque de título y escribe: Probando Gutenberg.

A continuación, en el bloque de contenido haz clic el botón de “agregar bloque” y elije de la lista: Cubrir.

Este bloque permite agregar un encabezado con una imagen de fondo que se adapta al tamaño de la ventana.

Haz clic en Subir o en Biblioteca de medios para elegir la imagen adecuada, puedes usar cualquiera lo más ancha posible para probar esta función.

Luego de ubicada la imagen, el bloque solicita escribir un título, puedes escribir lo que quieras.

En el panel derecho, en las propiedades del bloque, puedes personalizarlo aún más, ya que cuenta con controles para cambiar la opacidad de la imagen y añadir un color de superposición.

#3: Agrega otros elementos:

Haz clic en agregar bloques, luego elije: Tabla. Deberás elegir la cantidad de filas y columnas y luego clic en: Crear.

Una vez insertada la tabla, no es necesario borrarla si quieres cambiar la cantidad de celdas. Simplemente haz clic en el menú flotante del bloque y haz clic en: Editar tabla.

#4: Elementos en filas y columnas:

Podrás haberte sentido tentado a utilizar el elemento tabla para crear una distribución espacial más personalizada y no lineal, pero ese bloque es solo para texto. Para crear estas distribuciones, usaremos los bloques: Filas y Columnas.

Cada columna divide el espacio en bloques verticales mientras que las filas lo hacen de forma horizontal (este es el modo predeterminado de funcionamiento de Gutenberg, donde cada bloque es una fila)

Haz clic en: Columna en la lista de bloques, verás que la fila se ha divido en dos espacios verticales, donde puedes agregar los bloques que quieras.

Es posible agregar columnas dentro de otras columnas para así dividir el espacio de la forma que necesites.

Así, es posible colocar varias columnas con los bloques deseados como en el ejemplo en la imagen siguiente:

También puedes cambiar de lugar los bloques arrastrándolos hacia la posición deseada y puedes utilizar los comandos más usados en diseño: Deshacer y Rehacer para tener mayor flexibilidad en la experiencia. Para ver el resultado de tu nuevo diseño, haz clic en: Vista previa en la parte superior derecha de la página.

¡Felicidades! Ya has creado tu primera publicación con el editor visual de WordPress. Es importante destacar de antemano, que este plugin sigue estando en fase de prueba y podrías encontrar errores durante su uso. Pero puedes ir explorándolo y aprendiendo sobre él ya que será el próximo editor de WordPress y sin duda las capacidades que promete son mucho más extensas y dinámicas que el editor clásico.

¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)
Compartir
Artículo anteriorCurso gratis de topografía de los instrumentos
Artículo siguienteCurso gratis de skate
Ingeniero superior en informática por la UPV. Actualmente trabajador y estudiante del Master IARFID. Especial interés desde siempre en la educación y formación de las personas.

Dejar respuesta