El editor visual actual de WordPress (TinyMCE) no ha tenido muchos cambios a lo largo de los años y, en general, se ha mantenido prácticamente igual. Si bien esto no es algo malo, muchos piensan que es hora de un cambio. Hoy descubrimos el nuevo editor de WordPress, Gutenberg.

¿Que es Gutenberg?

Gutenberg es la nueva versión del editor de WordPress, y la que será la versión más común para las nuevas generaciones. El nombre le viene por Johannes Gutenberg, quien inventó hace más de 500 años la imprenta. El editor visual actual de WordPress requiere que muchos de nosotros utilicemos atajos y HTML para que algunas cosas funcionen como queremos. El objetivo de Gutenberg es hacer una tarea fácil para aquellos que empiezan hoy día a usar WordPress. Aunque ya es funcional, aún siguen retocando y ampliando las funcionalidades del mismo.

Siendo justos, es importante tener en cuenta que esto se encuentra actualmente aún se encuentra en una fase beta, lo cual significa que aunque está disponible para descargar, no se recomienda usarse en páginas web activas y en funcionamiento. Este planeado que en próximas versiones Gutenberg se fusione de manera permanente con WordPress tal como anunció Matt Mullenweg (el fundador) y como ya se puede ver en algunas instalaciones (recordamos que no debe ser instalado aun en páginas web activas).

Debido a que Gutenberg aún se encuentra en la fase de prueba, el equipo de desarrollo está impulsando a la gente a probarlo y dejar comentarios y análisis al respecto en el foro de soporte de WordPress o en GitHub.

¿Cómo instalar Gutenberg?

Se puede descargar la última versión de Gutenberg desde el repositorio de WordPress en el apartado de plugins, o buscándolo en el propio panel de WordPress de tu página web, en el apartado de plugins.

Desde el escritorio de Wordpres:

Desde el instalador de plugins:

Conociendo Gutenberg

Una vez instalado Gutenberg, nos aparecerá la opción de abrir el editor de Gutenberg a la hora de crear nuevo contenido como por ejemplo un artículo para tu blog y ahora también con páginas. Es importante remarcar, que Gutenberg no reemplaza el editor predeterminado de WordPress, lo cual es bueno ya que deja a nuestra elección cual queremos usar, y más un durante su fase beta.

“Importante: una vez que se publique WordPress 5.0, Gutenberg será el editor predeterminado, pero una vez más es importante remarcar, que aún tendrá la opción de instalar el editor clásico (el editor clásico es otro plugin como Gutenberg, y que se podrá instalar de igual manera) si encontramos problemas de compatibilidad.”

El nuevo editor Gutenberg, visualmente, es muy diferente al que conocíamos hasta hoy.

Si echas un vistazo al editor de Gutenberg y al editor visual actual, podrás ver que en el nuevo editor, se amplía el espacio de escritura, especialmente útil en pantallas más pequeñas, de gran ayuda para que utilizan laptops y tablets.

La gran mayoría de opciones que existían antes en el editor de WordPress, siguen presentes en Gutenberg, excepto que algunas de ellas de forma más clara y visible, como por ejemplo, la opción de eliminar la barra lateral de la derecha, ocultar una publicación o hacerla privada, son algunos de los ejemplos. Y si bien esto le da acceso a aún más de su pantalla, está a medio camino entre el modo de escritura libre de distracciones actualmente disponible.

Para cambiar entre el modo de editor visual y el editor de texto (código), ahora hay un menú desplegable en la parte superior izquierda. Notarás que ahora hay comentarios HTML al principio y al final de cada bloque. Por ejemplo, el código permitiría crear un bloque de texto.

Esto permite crear los bloques directamente desde el modo de editor de texto. Sin embargo, también agrega mucho más desorden de lo que probablemente esté acostumbrado si utilizas este modo para editar.

Si pasamos el puntero del ratón por un bloque podremos moverlo fácilmente hacia arriba o hacia abajo con las flechas, eliminarlo o acceder a la configuración del bloque.

Es sorprendente lo bien que funciona desde un móvil y la respuesta en pantallas táctiles.

Una de las primeras cosas que probablemente resaltan es la “falta” de la barra de herramientas TinyMCE que tan acostumbrados estamos. Ahora es reemplazada por un menú desplegable que aparecerá al pulsar en “Insertar”.

Esto es lo que Matt Mullenweg dijo al respecto.

“Lo que intentamos hacer es cambiarlo para que solo tengas que saber utilizar los bloques de contenido.”

Lo más importante es saber que se está trabajando para que todo el contenido creado en TinyMCE siga funcionando en el futuro. De hecho es probable que los equipos WP y TinyMCE Core trabajen juntos para garantizar su funcionamiento en WordPress.

Además de todo lo que ya incluía TinyMCE, hay algunos bloques adicionales que serán de gran ayuda:

Bloque de tabla y bloque de columna de texto

Las tablas ahora son mucho más fáciles, ya que puedes insertarlas como bloques dentro del editor. Antes tenía que usar un complemento de terceros o un código HTML. Aún sin terminar este módulo, pero pronto estará listo para usarse en pleno rendimiento.
También se añade la posibilidad de agregar bloques de columnas de texto. Actualmente, puede elegir entre 2, 3 y 4 columnas. Las columnas en WordPress siempre han sido una molestia en el pasado y generalmente requieren un complemento de terceros para funcionar correctamente.

Bloque de HTML

También tienen lo que llamamos un bloque de HTML. Este bloque es de gran ayuda en muchos casos, ya que nos permite insertar código HTML y el propio WordPress leerá y mostrara su contenido como si de otro bloque se tratase. Hasta ahora estabas obligado a cambiar entre el modo HTML y el modo edición normal para poder insertar estos pequeños códigos.

Arrastrar y soltar para imágenes

Ahora podemos arrastrar y soltar imágenes directamente en un bloque de imágenes en lugar de tener que añadirla con el botón de insertar. Tiene algunos problemas actualmente, pero está claro que los arreglaran en sus próximas versiones. Mientras tanto podemos seguir utilizando el método tradicional desde el editor de Gutenberg.

Una de las mayores ventas y avances a nuestro parecer es la capacidad de añadir clases CSS adicionales para cada bloque ciertos bloques. Si te gusta el CSS sabrás que esto es un paso de gigante para WordPress.

Bloques recientes

Con todos los bloques integrados en el editor de Gutenberg, y probablemente muchos más por venir, finalmente agregaron el apartado de bloques recientes, de esta manera tendremos a mano los bloques que más usamos.

Opciones de texto de portada

Han añadido algunos estilos muy llamativos para crear opciones de texto muy atractivas y fáciles de usar.

Autocompletar

Una forma muy rápida de añadir contenido una vez que tengamos más practica con el nuevo editor, es la de usar la barra inclinada / para añadir algún bloque. Una vez la pongamos nos sugerirá bloques a utilizar, de esta manera ahorramos muchos clics, y podemos hacer casi todo sin levantar las manos del teclado.

Tabla de contenido y anchor text

También han agregado una tabla de contenido en la barra lateral. Se trata de enlaces en los que se puede hacer clic para que pueda acceder fácilmente a una sección de su artículo. Como si dijéramos un índice del contenido de la página, muy útil si el artículo es muy largo.

Otra característica que ahora puede usar en bloques (antes se podía, pero no era intuitivo ni sencillo de usar) son los anchor o texto anclado. Agregar anclajes permite vincular directamente a una determinada sección o encabezado en el artículo desde cualquier lugar de la propia página o paginas externas. Extremadamente útil para ir a la porción de la página concreta que nos interesa, por ejemplo al compartir el texto con alguien, o en redes sociales.

Contador de bloques y palabras

Ahora podemos ver el número total de palabras, el número de bloques y el número de etiquetas de título en la página.

Opciones de alineación y Bloque de texto de cita

Además de tener solo el blockquote (texto de cita) estándar que hemos estado utilizando durante años para mostrar citas nuestras, también tenemos una nueva opción que es citas de terceros. Y sí, son diferentes el uno del otro. También es bueno ver algunas variaciones en el posicionamiento de los bloques. Durante años, el editor visual estándar le ha dado la capacidad de alinear a la izquierda, alinear el centro, alinear a la derecha y no asignar alineación. Con el editor Gutenberg WordPress, también puede alinear contando con el ancho completo de la página.

Botón

Añade una opción para crear un botón. Aunque todavía no hay muchas opciones o estilos, es agradable de ver y sobre todo muy útil, ya que muchos bloggers y editores necesitan formas más fáciles de agregar botones y llamadas de acción a sus publicaciones en blogs y páginas. Actualmente la única opción es mediante HTML o algún plugin externo.

Opciones de inserción

Por fin, Gutenberg hace que la incorporación de contenido multimedia sea muy fácil, ya sea YouTube, SoundCloud, Hulu, Flickr, Imgur, Twitter, Slideshare, Reddit y muchos más. Si bien antes también se podía insertar todo esto, muchos no lo sabían, ya que no estaba mencionado en ningún sitio y no se hacía de forma intuitiva ni sencilla.

Resumen
Descubriendo el nuevo editor de WordPress, Gutenberg
Titulo
Descubriendo el nuevo editor de WordPress, Gutenberg
Descripción
El editor visual actual de WordPress (TinyMCE) no ha tenido muchos cambios a lo largo de los años y, hoy descubrimos el nuevo editor de WordPress, Gutenberg.
Autor
Publicado por
SoluzionWeb
Logo