Tutorial de Gutenberg: el nuevo editor de WordPress 5.0

Lola Hernandez Caballero/ agosto 17, 2018/ Actualidad, General, Marketing Online, WordPress/ 1 comentarios

Hemos probado Gutenberg, el nuevo editor de WordPress 5.0 ¡Y es una maravilla! aunque si llevas bastante tiempo escribiendo con el antiguo editor de WordPress te costará un poco adaptarte (ese ha sido nuestro caso), pero comprobarás que Gutenberg trae muchas más opciones de edición y maquetación de posts y páginas. Y lo mejor de todo, sin necesidad de tener conocimientos de programación. ¿Has probado ya Gutenberg, en nuevo editor de WordPress? Te contamos cómo instalarlo y empezar a trabajar con él, aunque de momento es una versión de prueba a través de un plugin, a la espera de que WordPress lo lance definitivamente en su próxima versión.

Gutenberg es la nueva y más moderna versión del editor de WordPress que cambiará la forma en la que creas las páginas y artículos.

¿Qué es Gutenberg?

Gutenberg es el nombre del nuevo editor de WordPress 5.0. Se ha decidido, por fin, desterrar el viejo editor TinyMCE WYSIWYG y apostar por una nueva herramienta. Con este editor, los propietarios de páginas web tendrán un extenso listado de herramientas para crear contenido mediante el uso de bloques, muchas más de las que se contaba en la versión anterior.

Gutenberg es la nueva y más moderna versión del editor de WordPress que cambiará la forma en la que creas las páginas y artículos.

¿Qué son los bloques?

Si has usado algún plugin de terceros para construir páginas de aterrizaje como «Page Builder» by SiteOrigin», «Visual Composer», «WP Bakery» o similares, seguramente ya estarás acostumbrado a utilizar bloques.

Los bloques permiten ordenar una página web arrastrando y ordenando los distintos elementos (textos, imágenes, vídeos, banners…) libremente, componiendo un post o una página de una forma mucho más visual e intuitiva, sin necesidad de conocimientos técnicos. Algo parecido a los ladrillos LEGO, piezas de contenido que puedes arrastrar y mover por toda la página.

El objetivo de Gutenberg es facilitar la creación de páginas con el uso de bloques. Así que a partir de ahora podrás estructurar los contenidos a tu gusto.

¿Por qué Gutenberg?

Aunque el actual editor de WordPress admite contenido multimedia con imágenes, objetos incrustados y shortcodes, es cierto que la opción ‘visual’ de la edición de entradas ocasionaba fallos de forma que muchos escritores preferían trabajar directamente con la versión html de WordPress.

Gutenberg se presenta como una forma más sencilla de manejar y componer las páginas en WordPress, permitiendo arrastrar y soltar bloques. De una forma más intuitiva podrás personalizar tu web o blog sin poseer un grandes conocimientos de programación.

Además, Gutenberg abre las puertas a los desarrolladores que puedan crear herramientas mucho más atractivas y visuales para los usuarios en la creación de sus nuevos temas y plugins.

Probar el editor Gutenberg en WordPress 4.9.8

Con el lanzamiento de WordPress 4.9.8 el 31 de julio, el gestor de contenidos invita a los propietarios de las páginas a probar el nuevo editor con una notificación en su panel de control de WordPress, ofreciéndoles instalar gratuitamente el plugin con el que podrán probar Gutenberg.

Una vez que has instado el plugin, WordPress te llevará directamente al la sección «Entradas» – «Nueva entrada».  ¡Ya estás dentro de Gutenberg! Al ojo le cuesta adaptarse a esta nueva versión, tantos años escribiendo con el antiguo editor…

Introducir textos con Gutenberg

Lo primero que ves, nada más abrir el editor de artículos es el título en grande. Los bloques de texto tienen sus propios controles para moverlos libremente por toda la publicación. Los encabezados también son bloques separados, lo que ayuda a la estructura y organización de tu contenido.

Mantén el cursor sobre uno de los bloques. Verás que aparece la opción «insertar bloque», (+) si quieres añadir algún elemento.

La herramienta «insertador» (+)

Ya no tienes que descubrir etiquetas HTML, clases o recordar sintaxis complicadas de shortcodes. El botón (+) que verás en la parte superior izquierda del editor, te permite navegar por todos los bloques de contenido disponibles y añadirlos a tu entrada. Esta herramienta da acceso a un gran abanico de posibilidades para la edición y la publicación enriquecida. (Muchas más de las que teníamos hasta ahora)

Cómo editar cada elemento

Debes seleccionar el bloque pinchando sobre él. En el sidebar derecho verás dos apartados. Documento (con las mismas caracerísticas que antes) y bloque. Esto es nuevo. Es en «Bloque» donde encontrarás todas las opciones para editar cada elemento.

Por ejemplo, puedes ir al incrustador, elegir la opción de incrustar botón y a continuación ver en «Bloque» qué opciones de color y edición hay para ese botón.

Esto no quiere decir que ya no puedas trabajar con el html. Sobre el sidebar hay tres puntitos. Haciendo clic en ellos encontrarás la opción de Editor Visual / Editor Html, fijar la barra de herramientas en la parte superior, obtener más consejos o herramientas como «copiar todo el texto». Una opción que antes no tenía el antiguo editor, y que viene muy bien ¿verdad? 😉

Medios enriquecidos

Si combinas las nuevas alineaciones de galería ancha y ancho completo puedes crear diseños enriquecidos muy rápidamente. Con una imagen que ocupe todo el ancho de la página o crear galerías sin necesidad de plugins o el uso de collages. 

Qué hacer si no te gusta el nuevo editor Gutenberg

En el panel de control de WordPress encontrarás la opción «Instalar el Editor Clásico» que está diseñado para facilitar la transición a la nueva forma de editar.

Cuándo será efectivo el nuevo editor de WordPress

Las próximas mejoras de WordPress son fascinantes. No hay fecha confirmada para el lanzamiento de WordPress 5.0, pero se espera que sea a finales de año.

La opción de probar Gutenberg en la versión de WordPress 4.9.8 es una gran oportunidad para ver si tu página está lista para este cambio e incluso participar en este proceso tan importante reportando cualquier problema detectado al equipo de WordPress que trabaja en este proyecto.

También te puede interesar…

• Cómo preparar y optimizar imágenes para WordPress
• Guía Completa: Cómo instalar AMP en WordPress y configurarlo con el plugin Glue for Yoast SEO
• Máster Guía 2018: Cómo optimizar y acelerar tu WordPress
• Haz que tu Hosting WordPress sea rápido y se posicione
• ¿Tienes un Hosting con WordPress? Consejos de seguridad
• 10 plugins para mejorar tu ecommerce con WordPress