Gutenberg, el editor visual de WordPress

Hoy vamos hablar de Gutenberg, el nuevo editor visual de WordPress que se supone que nos va a simplificar mucho la vida (especialmente si no tienes conocimientos de HTML), pero antes, demos paso al patrocinador!!!!:

WebEmpresa, hosting especializado en WordPress.
Es el hosting que uso y recomiendo desde hace tiempo
En pampua.es/webempresa te dejo los 13 motivos que tienes contratarlo; échale un vistazo!
Además te doy un cupón del 20% de descuento. Entra ahora mismo en pampua.es/webempresa y guárdate tu cupón.

¿Que es Gutenberg?

Es el nuevo editor visual de WordPress. Toma el nombre de Johannes Gutenberg inventor de la imprenta con teclas móviles hace más de 500 años.

El editor visual actual exige mucho de nosotros para utilizar los códigos de acceso y HTML para hacer que las cosas funcionen. Su meta es hacer esto más fácil, especialmente para aquellos que empiezan con WordPress, o en palabras de su creador:

El editor creará una nueva experiencia de creación de páginas y entradas que hará que escribir publicaciones enriquecidas no conlleve esfuerzo alguno, y que tendrá “bloques” para hacer fácil lo que actualmente requiere shortcodes, HTML personalizado, o los imprevisibles incrustados automáticos. — Matt Mullenweg

Básicamente, es una adaptación del editor clásico a un editor más potente y adaptado a las necesidades de los usuarios.

Seguramente ahora te estén viniendo a la cabeza constructores como Elementor, Divi, Visual Composer, y te preguntarás: ¿qué diferencia hay entre Gutenberg y otros maquetadores para WordPress?

Normalmente debemos comprar un tema o plantilla para crear una web en WordPress y luego construirlas con un maquetador, que si utilizas o has utilizado alguno como los ya nombrados, sabrás que son de arrastrar y soltar (drag&drop), y que te permiten ver el resultado al momento.

El problema viene cuando tenemos que modificar una página en el panel de control de WordPress o con código, ya que si no tienes conocimientos avanzados es más complicado de hacer.

Lo que puedes hacer con el editor Gutenberg es construir las páginas mediante bloques desde el propio panel de control de WordPress de una forma muy similar a los ya conocidos constructores.

Puedes construir y ver el resultado de la página desde el propio panel de control, lo que es una gran novedad para WordPress, y que podría llegar a sustituir en un futuro la mayoría de constructores que hoy en día usamos, siendo un problema para muchos y una ventaja para otros.

¿Cómo funciona?

Como te comentaba antes, el editor Guternberg funciona mediante bloques, por lo que tendrás que seleccionar el botón “+” de añadir bloque para añadir nuestras “secciones”.

El editor permite deshacer los cambios realizados y rehacerlos de forma muy sencilla, ya que como si de un documento de Word se tratase, ha incluido dos botones para volver atrás y adelante.

Justo al lado del botón “+” tenemos un botón de “información”, el cual te dirá la información general como el número de palabras de nuestra página, el número de encabezados, los párrafos y el número de bloques de la página que estés creando.

Además, mostrará la jerarquía de H que tiene de forma muy sencilla y visual.

A su derecha encontrarás las herramientas con la opción de “Vista Previa” con el que, como con otros editores, pulsándolo podrás ver los resultados de lo que vayas construyendo en la página.

Pero ojo, aunque pulses sobre vista previa, si no haces click en “Publicar” esta página no será visible para el resto de personas que entren en tu web, por lo que quedará en borradores.

Si te fijas a la derecha, donde están las herramientas, tienes la opción de ocultar o mostrar más opciones para personalizar mejor la página.

Las opciones del documento que se muestran son las mismas que se mostraban en el editor clásico de WordPress por defecto, que en el caso de las entradas del blog serán las categorías, etiquetas, imagen destacadas, estado y visibilidad, etc.

Si abres una nueva página (que no sea una entrada del blog), las opciones cambiarán a: estado y visibilidad, imagen destacada, comentarios y atributos de página. Vamos, lo que ya teníamos.

En el caso de que selecciones un bloque de texto, se abrirán otro tipo de opciones de bloque en el que aparecerá la opción de cambiar el tamaño de las letras, el color, etc.

Por otro lado, si te fijas a la derecha del todo hay un botón con 3 puntos, y si lo seleccionas podrás cambiar y pasar del editor visual al editor de código en un clic, viendo así los códigos HTML de cada bloque generados.

El plugin ofrece una gran variedad de elementos que podremos incluir en la página, distribuidos en: Los más utilizados, los comunes, formatos, elementos de diseño, widgets e incrustados.

Aquí tienes un esquema de todos los que vas a poder encontrar en el editor Gutenberg 3.2.0.

PROS y CONTRAS:

Empecemos con lo positivo (que es bastante):

1. Es muy fácil de utilizar, por lo que la curva de aprendizaje es más corta que la del editor clásico de WordPress.
2.  Gutenberg es muy visual, intuitivo y limpio.
3.  La opción de editar HTML de Gutenberg permite editar por secciones el código, siendo mucho más claro y evitando errores debido a su claridad.
4.  Tiene una gran variedad de bloques para hacer atractivo nuestro diseño.
5.  Incluye una visualización rápida de encabezados (H2, H3, H4…), algo que el editor clásico y otros constructores no incorporan por defecto.
6.  Con la implementación de Gutenberg en tu WordPress no necesitarás instalar otro constructor para maquetar tus contenidos.
7.  Gran adaptación a dispositivos móviles y tabletas.
8.  Permite introducir elementos de otras plataformas web como YouTube o Vimeo de forma fácil y rápida.
9.  El rendimiento del plugin es bueno tanto en ordenadores como en móviles, por lo que no ralentizará la web ni afectará negativamente su uso.

Pero no es todo tan bonito como parece, veamos los

CONTRAS:

1.  Está aún muy lejos de otros constructores como Elementor o Divi, los cuales permiten personalizar mucho más nuestras páginas sin necesidad de saber código.
2.  Podría ser incompatible con algunos plugins o temas de WordPress.
3.  Las columnas no se adaptan bien a los dispositivos móviles o tabletas.
4.  Todavía no está suficientemente desarrollado y en fase beta.

A favor de los desarrolladores hay que decir que Gutenberg se encuentra actualmente en su versión beta y en la fase de pruebas, no está preparado para ejecutarse en los sitios de producción todavía, pero puedes verlo funcionando desde aquí: https://wordpress.org/gutenberg/

Desde Automattic (la empresa que hay detrás de WordPress) esperan tener unas 100.000 instalaciones activas (ahora van por unas 20.000) antes de lanzarlo integrado con WordPress 5.0

¿Cómo instalarlo?

Si no puedes esperar a la versión 5 y deseas instalarlo ya, has de tener en cuenta que no se recomienda para sitios web en producción y que tu WordPress ha de estar actualizado a la última versión (actualmente 4.8)

Si deseas probarlo puedes instalarlo como haces con cualquier otro plugin, buscando “Gutenberg” en el repositorio de plugins o desde este enlace: https://es.wordpress.org/plugins/gutenberg/

Cuando lo instalas verás un nuevo menú en el menú del panel de control de WordPress que contiene una demostración y la posibilidad de crear una nueva publicación. De nuevo, este menú es probablemente sólo para propósitos de prueba. Verás que el editor visual luce muy diferente al que probablemente estás acostumbrado. Como comentaba al principio, tiene una sensación muy similar a Divi o a Elementor, lo que me parece genial.

El futuro de Gutenberg

Cuando lancen WordPress 5.0 Gutenberg será el editor predeterminado pero aún tendrás la opción de instalar el editor clásico si te encuentras con problemas de compatibilidad. En principio será compatible con la mayoría de plugins y los más utilizados, pero puede ocurrir que si tu sitio web usa un plugin un poco raro o hecho a medida no te funcione correctamente.

Y esto ha sido todo por hoy, si ya has instalado Gutenberg y has encontrado algún problemilla, mándame un mail a [email protected] o pásate por Pampua.es/contacto y déjame un mensaje; estaré encantado de comentarlo contigo.

Y si quieres que en próximos episodios hable de algún tema en concreto o tienes cualquier duda o comentario que quieras hacerme, déjamelo en Pampua.es/contacto, en los comentarios de iVoox, en twitter @pampua, o en nuestra página de Facebook: facebook.com/pampua

Si te ha gustado este episodio compártelo al menos con una persona a la que pueda resultarle interesante. Por whatsapp, por mail, por  Facebook, twitter o incluso por SMS, como quieras, pero compártelo! Recuerda que puedes escucharlo y suscribirte en iTunes, iVoox, Spreaker, Youtube y desde la web de Pampua.es/podcast.

Y por último estaré inmensamente agradecido si me dejas una reseña de 5 estrellas en iTunes o un me gusta y un comentario en iVoox. Puedes ver cómo dejar una reseña en www.pampua.es/resena

El jueves que viene hablaremos sobre un tema muy básico pero que hay gente que puede no tener claro, cómo registrar y configurar un dominio para tu web.

Muchísimas gracias por escuchar hasta el final, por comentar, por tus “Me gusta” y reseñas. Nos escuchamos la semana que viene llueva, nieve o truene!