Creando una nueva Entrada en WordPress con Gutenberg

Para este 2018 se prevé la salida de WordPress 5.0. Y entre todas la novedades que incluirá, una de las que más polémica esta generando es Gutenberg, el nuevo editor de WordPress. En un intento por renovar su interfaz y acercarse a otros servicios más actuales, la comunidad se ha polarizado. Como pasa en todas las herramientas que ofrecen una actualización rompedora, está la parte que se siente cómoda con lo actual, y ven que cualquier cambio es siempre un paso atrás sobre lo que se ha probado que funciona. Y por otra, están lo que llevan pidiendo varios años una renovación que traiga opciones nuevas y de un salto de calidad sobre lo que tenemos.

Y como para formase una opinión lo mejor es, no solo informarse sobre el tema, sino si es posible, probarlo de primera mano, os invitamos a que sigáis leyendo este artículo, en el que intentaremos crear una entrada con Gutenberg, probando algunas de sus nuevas características.

Si quieres saber más, te recomiendo la muy interesante charla que dio Mauricio Gelves en la WordCamp Chiclana sobre los puntos a favor y en contra de Gutenberg.

Para probar Gutenberg actualmente lo podemos hacer vía plugin. Esta disponible desde el propio repositorio de plugins de WordPress. Eso si, hay que decir que este plugin es una versión previa de lo que finalmente será el nuevo editor. Por lo que es posible algunas opciones cambien, o aparezcan características nuevas en la versión final. Aunque eso sí, es lo más cercano a lo que tendremos en el futuro.

Una vez instalado y activado, veremos una nueva opción en el panel de administración de WordPress una opción llamada Gutenberg. Si entramos en ella, veremos una entrada demo, que podemos explorar y ver por encima algunas de las cosas que se pueden hacer en Gutenberg. Pero vamos a aventurarnos y crearemos nuestra propia entrada. Pero lo primero de todo es ver cual es su interfaz, que zonas tiene y que opciones nos ofrece.

Conociendo la Interfaz de Gutenberg

Aunque ya vimos por encima su interfaz en el artículo de introducción a Gutenberg que vimos hace un tiempo, no está de más volver a repasarla, ya que se han producidos algunos cambios.

Podemos dividir esta nueva interfaz en tres grandes zonas. Por un lado, en la barra superior, si vemos la parte izquierda, encontramos un botón para insertar un nuevo bloque, los típicos botones de hacer y deshacer, y un botón de información, que nos chivará el número de palabras de nuestro artículo, títulos, párrafos y bloques. Y en la parte derecha de esta barra superior, un icono de un ojo (para tener una vista previa de la entrada), el botón de publicar entrada, un engranaje, que nos da acceso al panel de opciones, y un icono de tres puntos que nos da acceso a opciones extra, como el poder cambia entre el modo visual y el modo de editor de código.

La zona central, y más amplia, la ocupa el campo de introducción de texto. Como ya sabéis, una de las metas en Gutenberg es que la escritura sea el valor más importante, y que las distracciones sean las mínimas posibles. Algo que parece que se ha conseguido. Y ya sabéis la importancia que tienen los textos dentro de nuestra web.

Y por último, tenemos un panel lateral en la zona derecha. Si no te aparece, solo tienes que hacer clic en el icono del engranaje de la barra superior. Por lo que puedes esconderlo en cualquier momento, dando más espacio para el campo de texto principal. Este nuevo panel de opciones me gusta por dos motivos. Uno, es que el scroll es independiente del de campo de texto, por lo que por mucho que escribas, siempre vas a tener las opciones a la vista. Algo que no ocurre en el editor actual de WordPress.

En la pestaña de Document de este panel tenemos las opciones que ya conocemos del editor clásico de WordPress, como elegir la fecha de publicación, seleccionar una imagen destacada o elegir Categorías y Etiquetas. Pero lo realmente interesante está en la pestaña Block. Y es que esta pestaña es dinámica, e irá cambiando sus opciones según sea el bloque que tengamos seleccionado. Cuando estemos más adelante creando nuestra entrada de ejemplo, veremos algunas de las opciones que nos van a ir apareciendo.

La importancia de los Bloques en Gutenberg

Hemos hablado hace un momento de los bloques, y si nunca has usado, o leído nada sobre Gutenberg, puede que te extrañe un poco. Los bloques (o blocks, tal como aparecen actualmente en el plugin) son simplemente la unidad mínima en la que dividirán actualmente nuestras entradas. Y cada bloque tiene una función diferente. Tenemos bloques de párrafos, bloques para títulos, insertar imágenes, videos o audios embebidos, etc.

La inserción de de estos bloques en nuestra entrada es muy sencilla. Podemos agregar un nuevo bloque mediante el icono + que aparece en la barra superior, como en el que hay dentro del campo de texto principal. Al clicar en el icono, se nos abrirá un pequeño desplegable en el que veremos los bloques más usados y un listado con todos los bloques, además de un buscador para encontrarlos de forma más rápida por su nombre. También podemos crear bloques personalizados, pero esto es un tema que trataremos de forma particular en otro artículo.

Una vez creado el bloque y tengamos varios dentro de nuestra entrada, podemos moverlo de posición (hacia arriba o hacia abajo) con respecto a los otros bloques, gracias a las flechas que aparecen en el lado izquierdo del bloque. Y con el icono de los tres puntos del lado derecho accedemos a opciones extra del bloque, como entrar al editor HTML de ese bloque en particular, borrar el bloque, o convertirlo a otro bloque diferente. Esto último nos ahorrará el tener que borrar y tener que crear un bloque nuevo, si nos hemos equivocado al elegirlo.

Creando una Entrada en Gutenberg

Y como el movimiento se demuestra andando, vamos a crear una nueva entrada de ejemplo, y desde cero, en Gutenberg. Para ello, vamos a utilizar algunos de los bloques más comunes para ver su funcionamiento y las opciones que nos ofrecen. Además de comprobar cual sería el nuevo flujo de trabajo que tendremos que seguir una vez que Gutenberg se convierta en el editor definitivo de WordPress.

Además de los puntos que vamos a tocar en el artículo, os animo a que creéis por vuestra cuenta otros tipos de bloques y experimentéis un poco. Todo entrenamiento será bienvenido para cuando tengáis que trabajar en producción con Gutenberg. El ahorro de tiempo y, porque no decirlo, dolores de cabeza que siempre tenemos al probar herramientas nuevas, podemos soliviantarlas un poco si ya tenemos algo de experiencia en nuestra mochila.

Como el plugin que estamos utilizando actualmente no esta traducido al castellano, intentaremos mostrar continuamente tanto el nombre en inglés que tiene cada acción y herramienta dentro del plugin, como su correspondiente en español en el editor de siempre. Para así saber en todo momento que estamos haciendo.

Por lo que no demos más rodeos, y empecemos con nuestro entrada en Gutenberg.

Insertando Títulos / Headings

Como hemos dicho antes, pulsamos en el icono +, y buscamos entre todas las opciones la de Heading, ya sea entre el listado o insertando la palabra heading en el campo de búsqueda. Una vez insertado el bloque, podemos escribir nuestro título, y cambiar entre H2, H3 y H4. Si tenemos abierto nuestro panel lateral, veremos que existen más opciones para el bloque de heading. Ahora podemos cambiar el titular de H1 a H6, modificar su alineación o asignarle un CSS adicional. Ya en estos primeros pasos vemos la importancia que tiene este panel lateral a la hora de darnos unas opciones avanzadas a nuestros bloques.

Un pequeño truco. Si insertamos un párrafo nuevo, y en su campo de texto insertamos una barra inclinada seguido del nombre de algún bloque (por ejemplo, /heading), nos aparecerá un panel desplegable con el nombre de ese bloque, y si lo seleccionamos, podemos cambiar de forma automática ese tipo de bloque. Esto nos ahorrará algunos segundo de tener que borrar y crear un bloque desde cero.

Insertando un Párrafo

Seguiremos el mismo proceso, solo que en este caso tenemos que elegir la opción de Paragraph. En el panel lateral, tenemos unas opciones diferentes a las que nos aparecían con el bloque de Heading. Esta vez, podemos cambiar el tamaño y color de la fuente, el color de fondo, y la alineación del bloque. Además de como en el Heading, insertar un CSS adicional.

Aunque a mucha gente no le guste trabajar con todas las opciones a la vista, y le gusta tener una interfaz lo más limpia posible, con respecto a Gutenberg, personalmente me gusta tener este panel lateral de opciones siempre a la vista. Así, se perfectamente que opciones me da cada bloque de un simple golpe de vista, y no tengo que estar abriendo y cerrando constantemente el panel.

Agregando una nueva Imagen

Si agregamos una imagen, mediante la inserción del bloque Image, veremos como directamente nos salta una indicación para subir una imagen, o buscar una en nuestra biblioteca. Una vez tengamos la imagen dentro de nuestra entrada, podemos escribir un pie de foto, además de modificar su tamaño, ya sea manualmente o a través de diferentes opciones.

Crear un botón

Crear un botón es bastante sencillo. Con el bloque Button, por defecto tenemos un botón negro con el texto en gris. Pero estos colores los podemos modificar en el panel lateral. Y dentro del propio bloque, esta el campo para insertar una URL. Y como siempre, tenemos la opción de agregar un CSS adicional, si queremos seguir dándole estilo al botón. Si quieres saber más sobre CSS, te recomendamos que eches un vistazo a nuestro artículo sobre este tema.

Añadir un texto en varias Columnas

Quizás sea de los bloques que más me gusten, ya que en el editor clásico, había que hacer cierto malabares para crear un texto con varias columnas. Con Gutenberg, simplemente añadimos el bloque Text Column. Por defecto, será un texto a dos columnas, pero en el panel lateral vemos como podemos ampliarlo hasta 4 columnas.

Si hemos ido creado todos estos bloques, veremos que tenemos una cantidad considerable en nuestra entrada. Y llegados a este punto, nos pueden asaltar varias dudas. Una de ellas, es como mover bloques, que como dijimos anteriormente se hace mediante las flechas del lateral izquierdo de cada bloque. Otra duda es como insertar un bloque entre otros dos que tengamos ya creados. Muy sencillo. Solo hay que mover el cursor justo entre dos bloques, y veremos como aparece el símbolo + que nos ha ido acompañando todo este rato. Lo pulsamos, y automáticamente podremos crear un bloque entre esos dos. Así nos ahorramos el proceso de tener que crear un bloque al final, y tenerlo que mover hasta la posición que deseemos.

Conclusiones

A pesar de tener ciertas reticencias iniciales por el cambio de editor, después de tanto años usando el clásico, creo que es un soplo de aire fresco necesario. La nueva interfaz se adapta mejor a los diseños de procesadores de texto actuales, o a los de servicios web de escritura como Medium. Además de que la posibilidad de generar contenido desde, por ejemplo, una tablet, es mucho más viable con esta nueva UI. Por lo que se abre un nuevo abanico a muchos usuarios que tienen como principal dispositivo una pantalla táctil.

Quizás hecho de menos una pestaña algo menos escondida que de acceso al editor HTML. Pero soy consciente que una gran mayoría de usuarios de WordPress no hacen uso de este tipo de opciones, quedando relegados a un aspecto algo más técnico.

Pero con todo, me parece un paso adelante, y que espero que siga evolucionando con el paso de los años. Aunque también espero que exista alguna opción, ya sea a través del propio WordPress o de algún plugin, de poder aun conservar el editor actual cuando salgan las futuras ediciones de WordPress. Así no dejaremos a nadie por el camino mientras se hace la que, personalmente creo, es una necesaria transición.