Gutenberg

Contenidos

Después de muchísimos años de tener una interfaz a la que ya estábamos muy habituados, WordPress decide cambiarlaa Gutenberg, para sorpresa y, en muchos casos, terror de algunos.

Si bien la antigua interfaz era una gran herramienta la nueva tiene mucho más potencia y simplicidad, cosa que siempre se agradece cuando quieres que ese pequeño proyecto, por el que no pagaron mucho, termine pronto para pasar al siguiente.

El objetivo, me parece a mi, de esta nueva forma de creación de contenidos es entrar en competencia con los plugins conocidos como “page builders” los que tenían por objetivo quitarle el peso de la programación y acercarle resultados vistosos a quienes no tenían tales conocimientos.

Si bien he de hablar en este pequeño artículo sobre “Gutenberg” me gustaría hacer hincapié que hay muchos plugins de paga y gratuitos que son sorprendentes en los resultados y en lo sencillos de usar, que ya los considero como creadores de sitios “What You See Is What You Get” (WYSIWYG) al nivel del finado MUSE de Adobe e incluso mejores.

Editor clásico

Plugin editor clásico classic editor
Vista de Añadir Plugins


En primera instancia siempre podemos regresar a la versión clásica con un plugin creado por “Colaboradores de WordPress” en caso de que la migración no sea una opción, sea por la razón que sea…

Con la misma vista de siempre y con las mismas funcionalidades de siempre lo cual hace más cómoda la migración porque siempre hay seguro para regresarnos.

Wordpress vista editor clásico
WordPress vista editor clásico

Bloques

Lo primero que tenemos que entender cuando empezamos a utilizar Gutenberg es que es una herramienta que funciona por bloques que tenemos que agregar por medio de un pequeño “+” y si bien eso es lo primero que vemos el Título de la página o el post está hasta arriba y para ser honesto eso me desconcertó al inicio porque eso no es un módulo que puedas agregar o mover cosa que de todas formas no sería lógico, por lo menos para mi.

Título

Al empezar lo que encuentras es esto:

Menú de bloques

Que te muestra cómo agregar un bloque y si das click te aparece un hermoso menú que tiene un buscador en el que puedes poner el nombre de un bloque, por ejemplo párrafo y esa herramientita lo busca en todo el menú.

Debajo del buscador hay un acordeón que aparece abierto en “Más utilizados” que cambia dependiendo de qué bloques uses más. En segundo lugar aparecen los “Bloques comunes” que es en donde empezamos en esta explicación a entender este método de manejo de la información.

Bloques comunes
Párrafo

Bloques

En esta sección tenemos las cosas básicas para poder escribir, párrafos, títulos, listas, citas…

Cuando seleccionas un párrafo, por ejemplo, tenemos el bloque donde podemos escribir normalmente, eso si, no significa que tienes que volver a seleccionar el bloque con el cursor si quieres seguir escribiendo, simplemente das un “enter” y en automático se establece el siguiente párrafo.

Arriba aparecen las opciones editables de este bloque, o cualquier bloque, obviamente es diferente dependiendo del bloque pero todos al inicio tienen el símbolo del bloque y si nos colocamos encima de él podemos cambiarlo por otro y se despliegan las posibilidades de cambio, al final tienen “tres puntos” que dan más posibilidades.

Los ajustes del bloque son las opciones que tienen todos los bloques que se mostrarán del lado derecho en donde se encuentran las opciones del documento, ahí mismo se ponen las opciones del bloque que tenemos seleccionado.

Una característica que me parece fundamental es la posibilidad de editar un objeto desde el html mismo, que si bien no puedes hacerlo en una sección general como en el antiguo si puedes hacerlo uno por uno (incluso, hay un bloque especifico para incluir html y otro para incluir código, obviamente el primero una cuestión específica y el segundo una cosa más general).

Ajustes de documento & ajustes de bloque

Del lado derecho al igual que en el editor clásico encontramos las mismas opciones que antes podemos poner Categorías, incluir Etiquetas, agregar las Imágenes destacadas pero también encontramos otras nuevas como los Extractos, el manejo de Comentarios y el manejo de los Enlaces permanentes, que en la nueva colocación me parece que facilita el acceso a todas las cosas que antes estaban medio escondidas en los menús desplegables que estaban en la parte superior.

Ajustes de Bloque

Cada bloque tiene sus propios ajustes pero por el bien de este pequeño manual vamos a quedarnos con el párrafo por el momento.

Ajustes del texto da la posibilidad de cambiar el tamaño y, algo que me gustó, permite poner una letra capitular con sólo encender un pequeño interruptor.

Ajustes de color son para poner color a la letra y al fondo de la etiqueta párrafo de una manera bastante sencilla.

Avanzado es una manera sencilla para poner clases a cada uno de los párrafos para poder dar estilos preestablecidos desde el css.

Todos los bloques tienen funciones similares y además de sus propios ajustes…

Nuevos e interesantes

Bloques comunes

Existen cosas nuevas en la interfaz que antes tenías que hacer con código o con “shortcodes”, hay toda una sección dedicada a cosas que puedes incrustar en el contenido de redes sociales y muchas otras cosas la sección se llama “Incrustados” y estoy ansioso por utilizarlos…

El bloque Cubrir es una noción muy útil que permite poner un texto con una imagen detrás en el fondo se llama cubrir porque viene del valor “cover” de la propiedad background-size: cover; del css.

Cómo es obvio en esa imagen se puede incluir audio, video y archivos de manera más sencilla.

Elementos de diseño

Elementos de Diseño

Existen unos bloques que se robaron mi corazón y son los “Elementos de diseño”, son maravillosos, hay un bloque para poder incluir columnas y podemos escoger cuantas con solo mover un “input” tipo “range”, además podemos hacerlo del ancho total…

Se pueden poner separadores o espaciadores para ayudar el flujo de lo que queremos crear. Además hay un bloque de “Button” que nos evita la necesidad de hacer botones en html…
“Media & Text” es una suerte de imagen con texto al lado, no al estilo de una imagen flotada, más bien como una imagen especial con información única o una reseña, además podemos escoger de qué lado de la foto necesitamos los textos.

Para concluir los elementos de diseño tenemos en este grupo de bloques está el bloque de “More”…

Conclusión

Existe una sección para los módulos Widgets no sólo los que trae por defecto el WordPress, sino cualquiera que instalemos y sea compatible con la actualización… Además que los mayores “Page Builders” del mundo de WordPress ya todos tienen la actualización para compatibilizar con Gutenberg.

Gutemberg es un “Page Builder” nativo de WordPress y una evolución de la forma de crear sitios web que tienen mucho hacia a donde crecer que estoy seguro presentará muchas sorpresas en el futuro.

Por último pero no menos importante existe un manual “Gutenberg Handbook” que si bien no está en español, pues probablemente es muy pronto para que haya una traducción, podemos usar.

otros artículos
¿Estás listo para asesorarte sobre tus necesidades web?
Ponte en contacto hoy y recibe una consulta gratuita.

¿Estás listo para asesorarte sobre tus necesidades web?

Ponte en contacto hoy y recibe una consulta gratuita.

Solicite consulta o cotización

Request a consultation or quote