Dependiendo de lo conectado que estés a la comunidad de WordPress, estarás familiarizado -o no- con WordPress Gutenberg, el nuevo editor del CMS más utilizado a nivel internacional.

A día de hoy, Gutenberg está en fase beta y puede descargarse como plugin. Más adelante, se incluirá en una actualización masiva de WordPress y estará disponible para todos los usuarios de esta herramienta.

¿Qué es WordPress Gutenberg?

En pocas palabras, Gutenberg es el reemplazo del editor WordPress actual: TinyMCE.

El editor de WordPress va a pasar de ser así:

wordpress-gutenberg-1

A así:

wordpress-gutenberg-2

Es más que una actualización estética. Gutenberg va a cambiar completamente la experiencia de edición al pasar a un enfoque de contenido basado en bloques (como el que, a día de hoy, ofrecen ciertas plantillas de WordPress, como Divi).

WordPress es consciente de que su CMS hace mucho que dejó de utilizarse únicamente para crear blogs. Un enorme porcentaje de personas utilizan esta herramienta para crear sus webs, y un sistema de bloques agilizará muchísimo el trabajo de diseño.

¿Cuándo lanzarán Gutenberg de manera oficial?

Gutenberg no formará parte oficialmente del núcleo de WordPress hasta la próxima gran actualización: WordPress 5.0.

Aún no sabemos la fecha exacta del lanzamiento de esta actualización, pero sí que será en algún momento de 2018.

Hasta entonces, podemos instalar y utilizar el editor Gutenberg de WordPress a través de un plugin. ¡Pero atención! Este editor todavía está en fase beta, así que no te recomendamos utilizarlo indiscriminadamente en una web que esté publicada. Si vas a hacer pruebas, mejor que sea en borrador.

Cómo funciona el editor de WordPress Gutenberg

Hace un par de párrafos te hemos dicho que Gutenberg funciona mediante bloques. Por si acaso eso no ha quedado muy claro, vamos a explicarlo mejor:

Gutenberg reemplaza el campo de edición único del actual editor WordPress TinyMCE con muchos “bloques” individuales.

Estos bloques permiten construir diseños mucho más complejos de lo que podrías hacer actualmente.

Entonces, ¿qué es un bloque?

Bueno, un bloque puede ser casi cualquier cosa. Por ejemplo, puede tener bloques para:

  • Texto
  • Imágenes
  • Vídeo embebido
  • CTAs
  • Widgets (sí, esos mismos widgets que usas en tu barra lateral)
  • Tablas
  • Etc.

Y lo bueno es que los desarrolladores podrán crear sus propios bloques externos a los que podrás acceder mediante plugins.

Cada bloque funciona de manera individual y podrás editarlo independientemente. Por ejemplo, esta entrada incluye dos bloques, uno de texto y uno de imagen. Mira lo fácil que es reordenarlos, simplemente clicando un botón.

wordpress-gutenberg-3

 

Y como cada bloque es “independiente”, puedes añadir elementos -como fondos personalizados- a un bloque concreto.

Así que Gutenberg es un page builder, ¿no?

No exactamente. Al menos no en su forma actual.

Gutenberg va a hacer que sea mucho más fácil crear contenido como entradas de blog o páginas estándar, pero no es un sustituto para los page builders actuales.

A nivel superficial, a Gutenberg ya le faltan dos elementos esenciales:

  • Columnas flexibles (ahora hay un bloque de columnas experimental, pero es bastante básico)
  • Drag and drop (aunque ahora sí que puedes reorganizar el orden de los bloques con drag and drop)

Dicho esto, Gutenberg está a punto de eliminar la necesidad de utilizar page builders para páginas básicas.

Pero, si queremos construir páginas más complejas, como una landing page, probablemente prefiramos utilizar page builders más avanzados (como Divi).

Cómo instalar Gutenberg en tu WordPress

¿Listo para ver cómo funciona Gutenberg?

Como ya hemos dicho, Gutenberg reemplazará el editor por defecto de WordPress en WordPress 5.0. Pero por ahora, la única opción para jugar con él es instalar el plugin de Gutenberg.

He aquí cómo instalar el plugin de Gutenberg… (es un proceso bastante estándar):

  • Ve a Plugins > Añadir Nuevo
  • Busca “Gutenberg”
  • Haz clic en Instalar ahora
  • Espera a que el botón Instalar cambie a Activar
  • Clica en Activar

Una vez que actives el plugin, tu web utilizará automáticamente el editor de Gutenberg cuando vayas a Entradas > Añadir nueva.

wordpress-gutenberg-3
Utiliza un tema compatible con Gutenberg para conseguir mejores resultados

Aunque Gutenberg está diseñado para funcionar con cualquier tema de WordPress (al igual que el editor de WordPress), elegir un tema que ofrezca específicamente compatibilidad con Gutenberg ofrecerá más beneficios.

En primer lugar, los temas pueden ofrecer un estilo determinado para los bloques Gutenberg. Y aún mejor: los temas pueden cargar estos estilos dentro del propio editor. Esto significa que puedes ver el estilo real de tus bloques a medida que construyes tu contenido.

Los temas adaptados a Gutenberg también podrán ofrecer plantillas prefabricadas compuestas de varios bloques, de modo que todo lo que tendrás hacer es conectar tu contenido con los bloques existentes y pulsar Publicar.

Cómo crear tu primer diseño con Gutenberg de WordPress

Antes de empezar a añadir bloques, hagamos un rápido resumen de los elementos de la interfaz principal de Gutenberg:

wordpress-gutenberg-4

  • (A) – permite añadir nuevos bloques.
  • (B) – botón de deshacer/rehacer
  • (C) – te da acceso a la configuración del documento, donde podrás ver elementos como las categorías, las etiquetas, la featured image… Es similar a la barra lateral que incluye WordPress ahora mismo.
  • (D) – cuando tienes un bloque individual seleccionado, esto te da acceso a los ajustes específicos de ese bloque.
  • (E) – te permite acceder a una vista previa de tu página o publicarla/actualizarla.
  • (F) – una vez que añadas algunos bloques, aquí podrás añadir y editar tu mensaje.

Añadir bloques a Gutenberg

Como hemos comentado en la introducción, tendrás que usar “bloques” independientes para construir tus diseños con Gutenberg.

Para añadir un nuevo bloque, basta con hacer clic en el icono + y seleccionar el tipo de contenido que quieres añadir:

wordpress-gutenberg-2

En el ejemplo anterior, puedes ver cómo añadir un bloque de párrafos. Pero Gutenberg incluye muchos más tipos de bloques:

wordpress-gutenberg-bloques
Las secciones “Suggested” y “Shared” son personalizadas para ti, y te ayudarán a acceder más rápido a bloques relevantes para tu web. “Suggested” muestra los bloques que sueles utilizar, y “Shared” te permite guardar bloques para reutilizarlos más adelante.

Para acceder a todos los bloques, utilice las pestañas “Blocks” y “Embeds”:

En la pestaña Bloques, encontrarás:

  • Bloques básicos: contiene bloques de construcción básicos como imágenes, párrafos, encabezados, comillas, etc.
  • Formato: te permite agregar más contenido formateado como comillas, tablas o el clásico editor de texto de WordPress.
  • Bloques de diseño: te permite dividir el texto en dos columnas, incluyendo botones, separadores o la etiqueta “Más”
  • Widgets: te permite añadir atajos, últimas entradas o categorías. Incluso es posible mostrar widgets de barra lateral en Gutenberg.
  • En la pestaña Insertar, puedes incrustar contenido de muchas fuentes externas incluyendo, por ejemplo:
    • YouTube
    • Facebook
    • Twitter
    • Instagram

Construir un layout básico con Gutenberg de WordPress

Comencemos con algo sencillo. Digamos que sólo quieres construir un diseño básico de entrada de blog que incluye:

  • Texto
  • Una imagen
  • Una cita
  • Un vídeo de YouTube embebido

Así es como lo harías con Gutenberg:

Primero, escribirías todo tu post en el editor. También puedes escribirlo en Drive, pegarlo en el editor de Gutenberg y WordPress lo convertirá automáticamente en bloques.

Añade los bloques no-textuales

Ahora que su contenido textual está dividido en bloques, puedes pasar el puntero del ratón sobre el lugar donde quieres insertar tu primera imagen y hacer clic en el icono más:

wordpress-gutenberg-imagen

 

Esto te permitirá insertar un bloque de imágenes, desde el que puedes subir o seleccionar imágenes de manera similar al editor actual de WordPress:

wordpress-gutenberg-imagen-2

Una vez que selecciones tu imagen, deberías verla ahí mismo en el diseño de tu página.

A continuación, pasa el puntero del ratón sobre el punto en el que desea insertar la cita e inserta otro bloque.

wordpress-gutenberg-cita
Verás el bloque de citas en el editor. Clica en él y escribe el texto que quieras.

wordpress-gutenberg-cita-2

Para insertar un vídeo de YouTube, puedes añadir un nuevo bloque de YouTube. Para insertar un vídeo, todo lo que tiene que hacer es introducir la URL y hacer clic en Insertar:

wordpress-gutenberg-youtube-video