Gutenberg: el tutorial para dominar el nuevo editor de WordPress

Gutenberg, debes saber este nombre ! Si no forma parte de la “comunidad de WordPress”, esto sin duda evocará al ilustre inventor de la impresión en el siglo XV.

Gutenberg WordPress Plugin

Pero si ustedes son adictos a WordPress, lo cual sospecho en varios de ustedes, el nombre Gutenberg lo hará pensar nuevo editor de contenido de WordPress, planeado para la versión 5.0 del CMS. Este editor visual se cargará en todas las nuevas instalaciones de WordPress y reemplazará al editor clásico que todos conocen.

Allí, estamos tentados a decirnos a nosotros mismos: FINALMENTE ! Debido a que hemos estado instalando Page Builders durante años para compensar la falta de flexibilidad del editor clásico, que, francamente, es un freno real cuando intentamos hacer que los despidos sean un poco complejos. Entonces, una evolución del editor WordPress es bienvenida !

Sin embargo, este cambio alterará sus hábitos y revolucionará su experiencia de usuario. Pero tenga la seguridad de que lo ayudaremos a anticipar la llegada de Gutenberg y tomar posesión de este nuevo editor de contenido. En este artículo lo descubriremos juntos y explicaré cómo usarlo, para que esté listo para recibirlo cuando se vaya !

También veremos si el nuevo editor cumple sus promesas y hace un balance de sus fortalezas y debilidades en comparación con sus principales competidores. Entonces ? Editor clásico, Gutenberg o Page Builders, cuál de ellos obtendrá nuestra preferencia ?

Descubrimiento de Gutenberg

Gutenberg está actualmente disponible descarga en la biblioteca de complementos de WordPress. Como recordatorio, aquí está el artículo que explica el procedimiento para instalar un complemento.

Desde la versión 5.0 de WordPress, ya no será necesario descargar Gutenberg, se integrará automáticamente en cualquier nueva instalación de WordPress.

A continuación encontrará las instrucciones para el editor de texto en la versión 5 de WordPress:

Para aprehender mejor a Gutenberg, debe entenderse que, incluso si no es un Page Builder per se, su lógica es bastante similar porque se basa en el uso de bloques de contenido. Agregamos bloques, insertamos diferentes contenidos (textos, imágenes, videos, etc. luego los ponemos en la página como deseamos, o casi … Porque si está acostumbrado a usar Page Builders, se dará cuenta rápidamente de que, desafortunadamente, el nuevo editor WordPress sufre una gran falta de flexibilidad y que es muy frustrante …

Vamos ?

Presentación de la interfaz

Le sugiero que cree juntos una hermosa página de inicio para su sitio de exhibición, para que podamos aprovechar las posibilidades que ofrece Gutenberg. Crearemos un banner, escribiremos un eslogan, presentaremos sus servicios y finalmente agregaremos un botón de llamada de acción.

Comenzamos creando una nueva página. Sepa que si desea continuar usando el editor clásico, es posible haciendo clic en la pequeña flecha en la parte inferior derecha del botón Agregaro en el botón Editor clásico que aparece sobrevuelo de un artículo o página.

Gutenberg WordPress editor clásico

Gutenberg WordPress editor-classic-2

Pero eso no es lo que nos interesa aquí, por lo que agregamos una nueva página y llegamos directamente a la nueva interfaz de edición.

Interfaz Gutenberg WordPress

Así es como se ve Gutenberg. Estudiemos un poco esta interfaz juntos :
En la parte superior izquierda, podemos agregar un nuevo Bloque con el botón (+), cancelar o restaurar una acción usando las flechas y mostrar la información relacionada con la página / artículo (número de palabras, títulos, párrafos, bloques) con botón (yo).

En la parte superior derecha, encontramos los botones de publicación más importantes: Guarde el borrador, Vista previa (el ojo) y Publicar.
El engranaje le permite ocultar la barra lateral e ir a todo ancho y los 3 puntos ejecutan algunas opciones adicionales, en particular la posibilidad de entrar en la vista previa HTML (El atajo del teclado está bien visto, pero es una pena que ” tengas que presionar 36 teclas al mismo tiempo …).

Gutenberg editor de código de WordPress

En la barra lateral, en la pestaña Documento, encontramos todas las configuraciones relacionadas con la publicación y la encuentro más ergonómica que en el editor anterior. Las pestañas están cerradas por defecto y solo necesita desenrollar las que le interesan: ocupa menos espacio y es más “limpio”.

En la pestaña Bloquear, tenemos acceso a la descripción y configuración del bloque seleccionado. Cada bloque de contenido tiene sus propias opciones. Como puede ver en las capturas de pantalla a continuación, la configuración es básica.

Gutenberg Bloc Settings

Segundo buen punto, la barra superior y la barra lateral siempre son visibles en la pantalla. No más pergaminos interminables para obtener una vista previa o actualizar cuando trabaje en páginas largas …

Presentación de bloques de contenido

Ahora construiremos nuestra página y descubriremos los bloques de contenido ofrecidos por Gutenberg. Para comprender completamente cómo funcionan, tienes que imaginar que los bloques de contenido son ladrillos apilados uno encima del otro para crear un edificio (tu página, entonces) – con la diferencia de que con este último podemos movernos e incluso eliminar tantos “ladrillos” como queramos sin que el edificio se rompa la cara (No recomiendo que pruebes el experimento con los ladrillos de tu casa) !

Para agregar bloques, hacemos clic en el pequeño (+) arriba a la izquierda. Por defecto, el bloque se agrega en la parte inferior de la página. Si selecciona un bloque y hace clic en (+), el nuevo bloque se agregará en el bloque seleccionado. Puede ver la ubicación del bloque que está a punto de agregar utilizando el indicador azul.

Lugar del bloque Gutenberg

Nota : los botones para modificar, eliminar o mover un bloque solo aparecen sobrevuelo de los bloques. Aligera la página y le permite tener una representación limpia, pero no es muy fácil de usar, los usuarios pueden perderla !

Hay 5 grupos de bloques de contenido :

  • Comuns : estos son los bloques básicos: títulos, párrafos, listas inteligentes, citas, imágenes, galerías de imágenes, etc.
  • Formateo : estos son los diferentes formatos en los que puede escribir su contenido: clásico, HTML, código fuente, texto preformateado, etc.
  • Diseño : estos son los bloques que le permitirán cuidar su diseño. Creo que este es el grupo más importante, pero todavía es muy pobre en este momento: separador, columnas, botones, etc.
  • Widget : puede encontrar sus widgets de WordPress en este grupo e integrarlos directamente en sus páginas / artículos.
  • Incrustar : estos son contenidos incrustados de otras plataformas (YouTube, Flickr, Twitter, Tumblr, etc.).

Comenzamos nuestra página de inicio ?

Insertemos un banner en la parte superior de nuestra página de inicio con el módulo Imagen de portada, que le permite insertar fácilmente texto en una imagen.

Luego agregue una frase clave justo debajo para captar la atención del visitante, usando el módulo Encabezados.

En el siguiente video, le muestro cómo mueve o elimina un bloque de contenido.

Luego insertaremos, con el módulo Galería, tres imágenes, en tres columnas, para ilustrar nuestros servicios.

Ahora presentaremos nuestros servicios y descubriremos el módulo Columnas de texto.

Veamos cómo mostrar una imagen y cambiar su tamaño con toda simplicidad. Puede elegir una dimensión en la configuración del bloque a la derecha o cambiar el tamaño de la imagen directamente ingresando los mangos azules y arrastrándolos. Tenga cuidado con los tamaños de imagen : lo que ves en Gutenberg no es necesariamente lo que tendrás en tu sitio en línea. La representación puede ser diferente, así que recuerde verificar su diseño antes de publicar o actualizar.

Aquí, nuestra página de inicio está casi lista ! Todo lo que falta es un llamado a la acción para invitar a sus visitantes a contactarlo. Lo crearemos usando un bloque párrafo que vamos a estilizar y un bloque botón.

Finalmente, hagamos un pequeño inventario de los otros bloques más útiles: listas de pulgas, títulos, subtítulos y bloques de citas.

Gutenberg también permite agregar widgets directamente a páginas / artículos. Puede mostrar sus últimos artículos (pero no es hermoso en este momento y esto no le permite personalizar su pantalla) y sus categorías. Y aún puede usar códigos cortos usando el bloque de código corto disponible en widgets.

Gutenberg Lista de artículos

The Widget Últimos artículos: No es un folichon loco …

Publiquemos nuestra página ahora que está lista. Se necesitan dos clics para poder publicar una página o un artículo. Bastante buena seguridad para los usuarios nuevos, para evitar que hagan albóndigas, para publicar involuntariamente. Pero, digamos, es muy rápidamente molesto …

Las fortalezas y debilidades de Gutenberg

Fuerzas

Mejora de la experiencia del usuario final

El editor clásico estaba envejeciendo y Gutenberg aporta el toque de modernidad que le faltaba, en particular gracias a una interfaz sobria, limpia y ordenada que simplifica la publicación de contenido. En su uso, está más cerca de un generador de páginas que de un editor de texto estándar. Sigue siendo simple y efectivo para el diseño básico y genera su propio código (sí, porque todos pensamos en ello, los códigos cortos muy sucios de Visual Composer).

Gutenberg puede satisfacer a los usuarios del editor clásico que nunca han probado Page Builders y que se han contentado con diseños simples hasta entonces. Básicamente les permitirá hacer lo mismo, pero de una manera más intuitiva y agradable. Pero para los demás, estoy pensando en particular en los diversos profesionales de WordPress, bueno … No se gana.

Debilidades

Falta de flexibilidad

Aunque está inspirado en él, Gutenberg claramente no es un verdadero Page Builder, lo que en mi opinión es muy limitante. Faltan horriblemente la estructura en filas / columnas y el sistema de arrastrar y soltar (arrastrar y soltar) … se ve obligado a mover los bloques solo usando flechas (falta de intuición y pérdida de tiempo) y el uso de las columnas está reservado para bloques de texto, actualmente no es posible usarlos con otros módulos. Gutenberg es menos útil, menos flexible que una página de constructor y si se vuelve crema en páginas pequeñas, se desactiva rápidamente cuando las páginas se alargan …

Además, actualmente no nos permite modificar un sitio en el frente, es decir, directamente desde un sitio en línea. No puede ver los cambios en vivo, la funcionalidad que ofrecen la mayoría de los creadores de páginas.

Falta de personalización de bloques de contenido

Además, los módulos carecen de personalización … ofrecen muy pocas opciones donde uno podría imaginar un panel rico y completo. No puedes jugar en los márgenes de bloque (por lo que no tenemos control sobre los espacios en blanco y es difícil transmitir sus diseños)… Las opciones de visualización y personalización para los diferentes módulos son realmente demasiado resumidas (por ejemplo, actualmente no es posible mostrar una galería en forma de presentación de diapositivas o carrusel).

Y las pocas opciones disponibles, en mi opinión, no son relevantes. Es una pena permitir a los usuarios crear páginas y artículos “Árbol de Navidad” ofreciéndoles la posibilidad de cambiar el tamaño y el color de las fuentes, así como el color de fondo de los párrafos. No es, en sí mismo, algo malo, pero implica educar al usuario para que respete la carta gráfica definida y los códigos de diseño.

Por lo tanto, preferiríamos tener más opciones de diseño que opciones de personalización gráfica.

Gutenberg: entonces, bien o no ?

Las novedades presentadas por el nuevo editor de WordPress están lejos de ser relevantes y las debilidades del antiguo editor no se corrigen todas … De qué sirve inspirarse en Page Builders si se pierde sus mayores activos ?

Tal como está, Gutenberg es un buen paso adelante en comparación con el editor clásico, es más moderno y más exitoso, pero aún está muy por debajo de todo lo que se hace en Page Builders.

Gutenberg y el futuro de WordPress ?

Gutenberg está, por lo tanto, claramente en su infancia. Pero gradualmente se enriquecerá con nuevas funcionalidades y nuevos bloques de contenido. Los desarrolladores de temas y complementos podrán crear módulos y widgets que eventualmente se integrarán; muchos desarrolladores ya están trabajando para que sus extensiones sean compatibles con Gutenberg (por ejemplo, Yoast SEO y Advanced Custom Fields ya son compatibles).

El módulo Yoast SEO se muestra debajo de su contenido, como en el editor clásico.

Por lo tanto, Gutenberg puede convertirse en algo completo y poderoso, pero mientras tanto, su inminente llegada al corazón de WordPress plantea muchas preguntas y preocupaciones por parte de los profesionales de WordPress. Esta novedad alterará los hábitos de los diseñadores de temas, complementos, sitios de WordPress y creadores de contenido, y muchos de ellos se preguntan cómo anticiparse y prepararse mejor para esta pérdida de puntos de referencia. Pero este no es el tema de este artículo, los invito a descubrir este artículo de Fabrice para más detalles.

No dude en decirnos en los comentarios lo que piensa de la próxima llegada de Gutenberg: está listo, impaciente, curioso, preocupado … ?

Entrenamiento avanzado de Gutenberg

Para ir aún más lejos con Gutenberg, descubra nuestro CPF de Gutenberg elegible y aprendizaje a distancia.

Entrenamiento avanzado de Gutenberg

Te puede interesar:  Por qué y cómo instalar AMP para WordPress ?

Deja una respuesta

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

Share This