Tutorial editor Gutenberg/WordPress 5.x: qué es, como usarlo, y como migrar

Por , actualizado en

Tabla de contenido

WordPress 5.0 trajo consigo un cambio importante en su arquitectura: el nuevo editor de contenido Gutenberg, que está disponible en forma de plugin para ir implementando características y luego integrarlo al core, y que se empezó a sugerir a los usuarios a partir de WordPress 4.9.8. Vale la pena mencionar que Gutenberg es algo que va a suceder a como de lugar, y más vale empezar a usarlo para no tener problemas después. Este post pretende ser un tutorial muy completo de Gutenberg actualizado siempre a la versión más actual para todos aquellos a los que les ha costado trabajo o bien están descontentos con el editor. A ellos les recomiendo lo lean, pues quizás encuentren aquí una forma de usarlo que les haga cambiar de opinión respecto a Gutenberg. Este tutorial está actualizado a Gutenberg 7.7.1 ejecutándose en WordPress 5.4 RC3 en un entorno de pruebas local. Y por primera vez desde que lo empecé en 2018, a partir de esta versión el tutorial está redactado enteramente en Gutenberg y CoBlocks. Como siempre, este tutorial busca ser muy completo y estar al día con los avances de este aún nuevo editor de WordPress.

Antes de empezar, una pequeña advertencia: aunque está optimizado, este quizás no sea el mejor post para ver en un dispositivo móvil; tiene poco menos de 12,000 palabras, casi 500 bloques, decenas de imágenes y uno que otro vídeo.

¿Qué es el nuevo editor Gutenberg?

Gutenberg es el nuevo editor de contenido a partir de WordPress 5.0. A diferencia del editor que se usaba antes (TinyMCE), en el que el contenido es una mezcolanza de cosas entre contenido, medios, shortcodes y embeds, Gutenberg usará un paradigma de edición distinto, usando a lo que le llaman Bloques. Gutenberg va más allá de ser un mero editor; es un cambio de arquitectura profundo en WordPress, pues lo que vemos mencionar que esta es apenas la primera fase de Gutenberg y va empezando la segunda, y ya podemos ver impacto en los temas y cosas como el personalizador, que están en pañales pero que ahí van, lento pero seguro.

Aprende Gutenberg con la mejor Guía y tutorial en español de Hazlo con WordPress, ¡el mejor y más completo en toda la web! #hazloconwp #gutenberg

¿Qué es un bloque en el editor Gutenberg?

Un bloque de Gutenberg es una unidad de contenido con propiedades y comportamiento propios; por ejemplo, un bloque de párrafo permite escribir texto, cambiar su tamaño, capitalizar la primera letra y cambiar colores; o por ejemplo un encabezado, que te permite elegir el nivel del mismo (h1--h6). Un bloque de imagen permite incrustar un medio en tu post, y sus propiedades permiten cambiar su leyenda, cambiar su alineación, cambiar su tamaño, y editar sus propiedades, entre otros. Como puedes ver, cada bloque tiene un set de propiedades que puedes cambiar a tu antojo. Gutenberg permite también que un bloque en particular pueda ser transformado en otros, como por ejemplo el bloque de párrafo, que puede ser transformado en encabezado, lista, cita, preformateado o verso.

¿Cómo instalar el editor Gutenberg?

Antes de ver cómo instalar el nuevo editor Gutenberg, si tu sitio ya tiene un tiempo en vivo y ya está hecho, es decir, tienes tema y plugins bien configurados, quiero tomarme un momento para prevenirte: sin importar lo que digan los devs, o hasta el mismísimo Matt Mullenweg, mi sugerencia es que no lo instales en tu sitio todavía. Sugiero que hagas un entorno de pruebas local con WordPress, y desde ahí hagas todas las pruebas que quieras. Ahora bien, la instalación. Puedes hacerlo desde el manejador de plugins de la manera tradicional; ve a Plugins, clic en el botón Añadir nuevo y haz una búsqueda por “gutenberg”; una vez que recibas los resultados de búsqueda, haz clic en su respectivo botón de Instalar, y posteriormente Activar.

Parte I -- Interfaz del editor Gutenberg y sus funciones

Elementos de interfaz del editor Gutenberg

Primero que nada, hay que identificar correctamente todos los elementos de interfaz del nuevo editor Gutenberg:

Muestra la interfaz de Gutenberg con todos sus elementos.

Lo primero que pudiera confundirte es que desde WordPress 5.4, el editor abre a pantalla completa. Esto es fácilmente modificable, como veremos más adelante. Ahora si, revisemos la interfaz general del editor Gutenberg:

  1. Ver entradas: hacer un clic en el logo de WordPress sirve para regresar a la vista de entradas; lo puedes ver como una manera de regresar al escritorio de WordPress, específicamente al listado de entradas o páginas, o de donde hayas llegado al editor.
  2. Añadir bloque: al hacer clic aquí verás el listado de bloques, así como una vista previa del mismo y abajo sugerencias.
  3. Herramientas: por ahora tiene las erramientas Editar y Elegir que básicamente son el desplazamiento entre bloques, que veremos más adelante.
  4. Deshacer y rehacer
  5. Estructura del contenido: una característica muy útil del editor Gutenberg que muestra un conteo de palabras, encabezados, párrafos y bloques, y una vista de esquema de todos los bloques en el contenido. También sirve para detectar algunos errores.
  6. Navegación de bloques: permite ir a cualquier bloque que esté en el documento.
  7. Barra de herramientas de bloque: cada bloque tiene su propia barra de herramientas, aunque puede configurarse para que se muestre de otra manera.
  8. Guardar borrador/Cambiar a borrador: como su nombre lo dice, permite guardar sin publicar (guardar borrador), o si se publica cambia a Cambiar a borrador o lo que es lo mismo, cancelar la publicación del contenido.
  9. Ver: aquí puedes ver como luce tu contenido en varios formatos, como el normal (es decir en tu portátil o pc de escritorio), tableta o móvil. También aquí está la opción para tener una Vista previa de tu contenido.
  10. Publicar/Actualizar: muestra la opción dependiendo del estado de publicación: si ya está o no publicado, publica o actualiza el contenido.
  11. Ajustes: abre o cierra el panel de ajustes, que a su vez se divide en dos pestañas, que son Documento y Bloque.
  12. Pestaña Documento: en esta pestaña están todas herramientas que conoces del antiguo editor: estado y visibilidad, revisiones, categorías, etiquetas y demás.
  13. Pestaña Bloque: dependiendo del bloque que tengas seleccionado actualmente, verás que las propiedades del mismo cambian; incluso puede que no tenga propiedades modificables.
  14. Patrones de bloques: pequeña biblioteca de disposiciones de bloques preconfigurados que puedes usar en tu contenido.
  15. Más herramientas y opciones: herramientas adicionales de configuración del editor.
  16. Migas de pan (breadcrumbs): de último pero no menos, Gutenberg ofrece unas migas de pan para seleccionar fácilmente contenido anidado.

Elementos de interfaz adicionales de Gutenberg

Haciendo clic en el menú Más herramientas y opciones > Opciones puedes abrir una pantalla modal donde puedes elegir que secciones y metaboxes ver y cuales no:

Diálogo de opciones del editor Gutenberg.

En pocas palabras, casilla con marca significa que esa sección se verá en pantalla.

Modos de escritura en el editor Gutenberg

Gutenberg se puede comportar de maneras distintas visualmente, y eso puede no ser lo mejor para muchos que están acostumbrados a TinyMCE. Para ello, Gutenberg ofrece un par de modos de escritura que pueden ayudarte a sentir el cambio más normal:

Modos de enfoque (spotlight) en Gutenberg

El Modo de enfoque puede ser la solución; en este modo se atenúan todos los bloques excepto el actual. Esto te puede servir para acostumbrarte a Gutenberg, pues el editor queda muy parecido a un bloque de contenido, tal como lo usabas en el editor antiguo. Para habilitar el Modo de enfoque haz lo siguiente:

  1. Haz clic en Más herramientas y opciones.
  2. Haz clic en Modo de enfoque.

Este modo permite concentrarse en un bloque de contenido a la vez.

Modo de escritura a pantalla completa en Gutenberg

Por default y a partir de WordPress 5.4, Gutenberg inicia en pantalla completa, pero esto por supuesto no es del agrado de todos. Si lo deseas puedes cambiar al modo normal, por si deseas una vista más tradicional. Para activar el modo a pantalla normal, sigue los siguientes pasos:

  1. Haz clic en Más herramientas y opciones.
  2. Haz clic en Modo a pantalla completa.

Estructura del contenido

Gutenberg incluye una característica muy útil que te permite conocer la estructura de tu contenido, y está ahí mismo arriba en el menú, es ese botón con la i te mostrará una pequeña pantalla emergente con la estructura de contenido, que es básicamente una vista de esquema de tu documento, donde cada nivel de encabezado se indenta más a la derecha para darte una idea de la profundidad de tu documento. En la parte de arriba también se muestran contadores de palabras, encabezados, párrafos y bloques, y luce así:

Muestra la estructura del contenido en Gutenberg.

Vale la pena mencionar que esta vista de Estructura de Contenido también te puede indicar ciertos problemas con tu contenido, como esta por ejemplo:

Muestra la estructura del contenido con errores.

¿Qué está mal? Gutenberg te está indicando con tienes dos encabezados . Simple y efectivo.

El navegador de bloques

El Navegador de Bloques de Gutenberg nos permite seleccionar rápidamente un bloque; tiene la particularidad de que su funcionalidad varía dependiendo del contexto; por ejemplo, si haces clic en el botón del Navegador sin ningún bloque seleccionado, te mostrará una lista de los bloques principales del documento:

Muestra el navegador de bloques de Gutenberg.

Como puedes ver, mostró un bloque Párrafo, un bloque Encabezado y otro bloque Párrafo. En bloques que son contenedores de otros bloques se limita a mostrar lo que contienen, es decir, si abres el navegador de bloques con un bloque Columnas seleccionado, verás los contenidos de cada una de las columnas.

Migas de pan

Gutenberg incluye una característica muy humilde pero tremendamente útil si es que usas bloques agrupados o anidados o reutilizables; en la parte inferior izquierda encontrarás unas migas de pan que al ser hipervínculos te permiten ir pasos atrás si estás en un grupo muy complejo.

Estructura visual de un bloque de Gutenberg

Cada bloque también tiene un set de botones y menús que puedes usar:

Muestra una barra de herramientas de un bloque de Gutenberg.
  1. Mover: este bloque sólo aparece cuando posicionas el cursor sobre la barra de herramientas si esta es flotante, o se muestra siempre si es fija. Contiene tres funciones:
    • Las flechas arriba y abajo mueven el bloque en la dirección especificada, y
    • Al hacer clic y arrastrar se puede mover el bloque a donde lo desees.
  2. Transformar/estilo: el primer botón de la barra siempre tiene el ícono del bloque y una pequeña flecha en la esquina inferior derecha, lo que indica que permite transformar el bloque seleccionado en otro de tipo compatible. Al mismo tiempo, si el bloque lo soporta, muestra los estilos o variaciones que este ofrece.
  3. Acciones del bloque: estas son algunas acciones que este tipo de bloque permite, es decir, cambian de bloque a bloque, y las identificas porque estarán delimitadas por un borde, a veces acción por acción, a veces todas las acciones se muestran agrupadas en un mismo borde.
  4. Estilos de caracter: aquí encontrarás, dependiendo del bloque:
    • Negritas
    • Itálicas
    • Enlaces (poner o quitar)
    • Color del texto
    • Código integrado
    • Imagen integrada
    • Mayúsculas
    • Tachado
  5. Más opciones: este botón con tres puntos se repite en todos los bloques, y contiene acciones propias de bloques en general; entre ellas encontrarás:
    • Ocultar ajustes del bloque
    • Duplicar
    • Insertar antes
    • Insertar después
    • Editar como HTML
    • Añadir a los bloques reutilizables
    • Agrupar
    • Quitar bloque

Gestionar bloques con el Gestor de bloques

Haciendo clic en el botón Mostrar más herramientas y opciones en la parte superior derecha (el botón con los tres puntos) y luego haciendo clic en Gestor de bloques se abrirá una pequeña herramienta de gestión de bloques, que básicamente permite activar o desactivar categorías de bloques o bien bloques individuales:

Muestra el gesto de bloques de Gutenberg.

Así que si tienes una librería de bloques muy extensa, aquí la puedes tener bajo control ocultando lo que no te sirva.

Control de barras de herramientas: el modo unificado

En caso de que no te guste la configuración de las barras de herramientas sobre el bloque, puedes cambiar a un modo más tradicional usando el modo de Barra de herramientas unificada:

Muestra la barra de herramientas unificada en Gutenberg.

Para lograr este modo, hazlo siguiente:

  • Haz clic en el botón Más herramientas y opciones (el botón con los tres puntos arriba a la derecha).
  • Haz clic en Barra de herramientas unificada.

Cuando lo hagas, ahora al trabajar con un bloque verás que todo el menú de herramientas aparece en la barra superior; esto da una sensación de una barra de herramientas más tradicional. En este modo se elimina un defecto de tener una barra de herramientas encima de cada bloque, y es que de esta forma la barra de herramientas ya no bloquea contenido visualmente, algo común y hasta cierto punto molesto cuando tienes un encabezado y luego un párrafo, y al hacer clic en este la barra de herramientas tapa el encabezado.

El modo de Barra de herramientas unificada, aunado al Modo de enfoque, te pueden dar un sentido de editor más normal y de hecho es una técnica que recomiendo para aquellos que vengan del editor antigüo.

Modos de alineación en Gutenberg: ancho amplio y ancho completo

Gutenberg trae consigo dos alineaciones especiales que hay que discutir, y que sólo las verás si el tema es compatible con el nuevo editor Gutenberg (al final veremos como añadir este soporte): ancho amplio y ancho completo. Estos son básicamente dos “modificadores” que afectan a varios bloques como Imagen, Columna, Tabla y otros más; el primero, ancho amplio, muestra el contenido del bloque un poco más ancho que la medida declarada por el tema; es decir, si tu tema trae una definición de ancho para el contenido de 600 pixeles, el ancho amplio hará que el contenido del bloque se muestre en 800 pixeles (por decir una medida), de modo que se muestra fuera de los márgenes izquierdo y derecho ofreciendo un efecto visual placentero y que viste muy bien los artículos. El otro ancho en cuestión es el ancho completo, muestra el contenido del bloque a todo el ancho disponible. Los íconos para estos dos modos son consistentes en todos los bloques, y los encontrarás siempre justo después de las alineaciones que ya conoces (izquierda, centro, derecha):

Muestra los íconos de los nuevos anchos en Gutenberg.

De nuevo, sólo están disponibles si el tema que se está usando actualmente es compatible con estos dos modificadores; al final de este artículo hay unos anexos donde puedes ver como habilitar la compatibilidad con este modo.

Navegación entre bloques en Gutenberg

Gutenberg permite activar lo que llaman Modo de navegación, que permite desplazarse entre bloques de manera muy simple. Puesto que es visual, les dejo mejor un vídeo para comunicar mejor el funcionamiento del nuevo Modo de navegación de Gutenberg 6.3:

El nuevo Modo de Navegación de Gutenberg 6.3

Como pueden ver, se puede reducir a presionar Esc para habilitarlo, y Enter para volver el control al bloque.

También tiene una forma de hacerse en el menú, con el botón Herramientas, y seleccionando entre Editar y Elegir, como se ve a continuación:

Muestra los comandos Editar y Elegir para alternar entre el  modo de navegación de bloques de Gutenberg.

Manejo de color en Gutenberg

Gutenberg ofrece control del color en dos formas:

  • Como estilo de caracteres
  • A nivel de bloque

Estos están disponibles dependiendo del bloque; es decir, por ejemplo, el párrafo tiene una propiedad de color de texto, mientras que un grupo no; el nombrado de las etiquetas a veces no es el más consistente, pero se identifican por el lugar donde se muestran con un criterio muy simple:

  • Si la barra de herramientas muestra una entrada de Color de texto, se refiere a manejo de color como si fuera un estilo de caracteres;
  • Si aparecen entradas de color (Ajustes de color o Superposición) en la pestaña de Ajustes > Bloque, entonces se refiere al bloque en su totalidad. En estos Ajustes de Color se indica que elemento afectan, es decir, color de texto, color de fondo, etc.

Cuando el bloque tenga soporte de degradados, verás en el componente de color un selector que permite alternar entre sólido y degradado:

Muestra el selector de tipo de color de Gutenberg

Ámbito de los ajustes de colores

Vale la pena mencionar que en algunos casos, el resetear el color desde la pestaña de ajustes de bloques NO afecta a un color que hayas elegido como estilo de caracter. Es decir, si en un párrafo elegiste unas palabras y las cambiaste a color rojo, si abres Ajustes de color desde la pestaña Bloque de Ajustes, el color rojo que pusiste como estilo de caracter no se verá afectado:

Muestra la diferencia entre color como estilo de caracter y como estilo de bloque.

Gutenberg ofrece dos tipos básicos de color: sólidos y gradientes, los cuales están disponibles de acuerdo al tipo de bloque que elijas. Voy a explicar ambos, así donde sea que te encuentres uno u otro o ambos sabrás que hacer.

Colores sólidos en el editor Gutenberg

La herramienta de color sólido es muy simple:

Muestra el selector de color sólido de Gutenberg.
  1. Aquí se muestra el color actual; es meramente un indicador, no hace nada.
  2. Aquí se muestran la paleta de colores por default, haciendo clic en cualquiera de estos cambias el elemento que se indique.
  3. Color personalizado: si los colores mostrados no son lo que buscan, puedes usar hacer clic aquí y usar el mezclador integrado para obtener un color personalizado.
  4. Al hacer clic en este botón, los valores de color se reinician, quedando como antes que hicieras cambios.

Colores personalizados en el editor Gutenberg

Como se mencionó en el punto (3) anterior, puedes añadir colores sólidos fácilmente:

Muestra el mezclador de color de Gutenberg
  1. Color actual: El primer elemento es el color actual, indicado por un círculo; en este apartado se muestra un espectro de acuerdo al tono elegido en (2); cualquier cambio en (2) o (3) se refleja aquí.
  2. Tono: moviendo este control deslizante cambias el tono del color que deseas elegir, y en (1) ajustas el color preciso que desees.
  3. Valor de color: si lo tienes puedes especificar el código hexadecimal, el código RGB (reed, green and blue o rojo, verde y azul, es decir, especificar un color por la cantidad de sus componentes) o bien por HSL (hue, saturation and lightning o tono, saturación y luminancia); puedes cambiar entre ellos haciendo clic en (4).

Con presionar ESC o bien hacer clic fuera de la ventana del selector de color se cierra.

Colores degradados en el editor Gutenberg

El editor de colores degradados es bastante versátil y permite crear degradados de dos o más colores. Se usa así:

Muestra el selector de degradados de Gutenberg
  1. Degradados predefinidos: Gutenberg muestra algunos degradados predefinidos que puedes usar; al hacer clic sobre estos se aplican inmediatamente sobre el elemento que afecten.
  2. Puntos de control: inicialmentes se muestra un control con dos círculos en los extremos, que representan el color inicial y el color final en el degradado, y cada uno se llama punto de control; haciendo clic en cada uno de estos puntos de control te permite elegir un color de manera muy similar a un color sólido personalizado, con una pequeña diferencia.
  3. Punto de control de color final; igual que (2).
  4. Tipo de degradado: lineal (de punto a punto y un ángulo) o circular.
  5. Ángulo de degradado: sólo aplica cuando el tipo de degradado es lineal.
Cómo ajustar los puntos de control en degradados de Gutenberg

Al hacer clic sobre los puntos de control se muestra un nuevo mezclador de color:

Muestra el editor de punto de control de degradado de Gutenberg
  1. Color actual: El primer elemento es el color actual, indicado por un círculo; en este apartado se muestra un espectro de acuerdo al tono elegido en (2); cualquier cambio en (2) o (4) se refleja aquí.
  2. Tono: moviendo este control deslizante cambias el tono del color que deseas elegir, y en (1) ajustas el color preciso que desees.
  3. Transparencia: mueve este control deslizable para ajustar la transparencia del color elegido.
  4. Valor de color: si lo tienes puedes especificar el código hexadecimal, el código RGB (reed, green and blue o rojo, verde y azul, es decir, especificar un color por la cantidad de sus componentes) o bien por HSL (hue, saturation and lightning o tono, saturación y luminancia); puedes cambiar entre ambos haciendo clic en (4); tanto RGB como HSL tienen un cuarto parámetro “a” o “alpha”, que se usa para indicar la transparencia del color y va de 0 a 255; si indicas un valor para alpha la opción de valor hexadecimal deja de aparecer.
  5. Tipo de modelo de color: permite intercambiar entre hexadecimal, RGB o HSL.
  6. Eliminar punto de control: quita el punto de control del degradado actual.
Degradados de más de dos colores en Gutenberg

Habrás notado que los puntos de control pueden desplazarse hacia izquierda o derecha; vamos a correr el de la izquierda hacia la derecha. Cuando vuelves a poner el puntero del ratón sobre el espacio que quedó, verás un círculo como el de antes pero con un signo de + detro, lo que te invita a que pontas otro punto de control, y puedas elegir otro color más. Esto es bastante útil para ciertos colores complejos como el color oro, que generalmente se hacen con múltiples degradados de blanco a amarillo y negro.

Nota sobre los degradados de varios colores

Cuando hagas degradados de más de dos puntos de control, ten en cuenta que si un color es mucho más oscuro que el otro puede que el degradado no sea muy bueno, pues al tener tanta diferencia en tonos se termina creando un artefacto visual de la forma de una división entre colores muy perceptible.

Atajos de teclado disponibles en el editor Gutenberg

Para consultar el listado completo de atajos, presiona Shift + Alt + H (Shift + + H en OS X); estos son los atajos de teclado exclusivos del editor Gutenberg (por si los confunde Shift = Mayús):

Atajos globales

AcciónAtajo (Win, Linux)Atajo (OS X)
Muestra la ayudaShift + Alt + HShift + + H
Guarda tus cambiosCtrl + S + S
Deshace tus últimos cambiosCtrl + Z + Z
Rehace tu último deshacerCtrl + Shift + Z + Shift + Z
Muestra u oculta la barra lateral de ajustesCtrl + Shift + , + Shift + ,
Abre el menú de navegación de bloquesShift + Alt + OShift + + O
Navega a la parte siguiente del editorCtrl + ` + `
Navega a la parte anterior del editorCtrl + Shift + ` + Shift + `
Navega a la parte siguiente del editor (alternativa)Shift + Alt + NShift + + N
Navega a la parte anterior del editor (alternativa)Shift + Alt + PShift + + P
Navegar a la barra más cercanaAlt + F10 + F10
Cambia entre el editor visual y el editor de códigoCtrl + Shift + Alt + M + Shift + + M

Atajos de selección

AcciónAtajo (Win, Linux)Atajo (OS X)
Seleccionar todoCtrl + A + A
Cancelar selecciónESCESC

Atajos de bloques

AcciónAtajo (Win, Linux)Atajo (OS X)
Duplica el/los bloque(s) seleccionado(s)Ctrl + Shift + D + Shift + D
Elimina el/los bloque(s) seleccionado(s)Shift + Alt + ZShift +  + Z
Inserta un nuevo bloque antes del/los bloque(s) seleccionado(s)Ctrl + Alt + T +  + T
Inserta un nuevo bloque después del/los bloque(s) seleccionado(s)Ctrl + Alt + Y +  + Y
Alternar entre editor visual y de códigoCtrl + Shift + Alt + M + Shift +  + M
Cambia el tipo de bloque después de agregar un nuevo párrafo//

Atajos de formatos de texto

AcciónAtajo (Win, Linux)Atajo (OS X)
Cambia el texto seleccionado a negritaCtrl + B + B
Cambia el texto seleccionado a cursivaCtrl + I + I
Subraya el texto seleccionadoCtrl + U + U
Convierte el texto seleccionado en un enlaceCtrl + K + K
Elimina un enlaceShift + Alt + SShift +  + S
Añade un tachado al texto seleccionadoShift + Alt + DShift +  + D
Añade un tachado al texto seleccionado.Shift + Alt + XShift +  + X

Éstos que ves aquí son los únicos atajos disponibles para el editor Gutenberg a la fecha, no hay más. Esto probablemente cambie en el futuro, pero justo ahora, son los únicos atajos de teclado disponibles.

Inserción rápida: el atajo de teclado /

En un bloque nuevo, al principio del mismo, si tecleas / obtendrás una lista de bloques que puedes insertar enseguida, incluso puedes teclear el nombre del bloque y se te mostrarán todas las coincidencias: esto facilita mucho el flujo de la escritura y hace que sientas cierta “normalidad”, pensando en la forma de escribir en TinyMCE.

Patrones de bloques

Los patrones de bloques son una de las características más interesantes de versiones recientes de Gutenberg; no es una idea nueva, pues se ha hecho con anterioridad: básicamente consiste en tomar un conjunto de bloques y crear secciones enteras, de modo que estén predefinidas para que tu des un clic y puedas tener ese mismo diseño en tu página.

Así que, ¿cuál es el chiste? la implementación particular de WordPress; por ahora la característica está en pañales y apenas y trae una modesta biblioteca de unos cuantos patrones de bloques, pero en un futuro cercano aparte de esto podrá haber la posibilidad de que un tema o plugin provea sus propios patrones de bloques usando construcciones simples definidas por los bloques nativos de Gutenberg, y lo mejor de todo esto es que podrá ser sin necesidad de “programar”. Si esta característica tiene el apoyo de los autores de temas y plugins, podría ser muy significativa en el desarrollo de Gutenberg. Por ahora es apenas una muestra de lo que podría ser en el futuro.

Parte II -- Referencia de bloques disponibles en Gutenberg

Estas son las secciones y bloques relacionados que ofrece Gutenberg; te sugiero los veas en orden pues cada uno se describe en detalle.

Más utilizados

Aquí encontrarás los bloques que uses con más frecuencia, es como un atajo para que no tengas que buscar tanto entre todos tus bloques instalados. No se incluye el detalle de estos pues son los mismos que vas usando y se van agregando en esta sección poco a poco.

Bloques comunes

Párrafo
Muestra el bloque párrafo y su configuración.

El bloque Párrafo es un bloque básico de texto. Si presionas Enter al final de tu texto, se crea otro en automático. Puedes usar Shift + Enter para continuar escribiendo sin generar nuevos bloques.

  1. Alineación: permite especificar si se alinea a la izquierda, centro, o derecha.
  2. Tamaño predefinido
  3. Tamaño personalizado
  4. Reiniciar valores de tamaño
  5. Capitalizar primera létra de párrafo
  • Inserción rápida: el párrafo es el bloque estándar, por lo que no tiene comando de inserción rápida.
  • Transformaciones del bloque párrafo: encabezado, lista, cita, preformateado, verso.
Encabezado
Muestra el bloque Encabezado y su configuración

Con el bloque Encabezado puedes crear encabezados de nivel 1 hasta nivel 6. Sin embargo, tiene algunas observaciones que vale la pena hacer para que no te rompas la cabeza.

La primera es que el título de la publicación, es decir el primer bloque que ves hasta arriba, es el encabezado de nivel 1 (dicho en otros términos, la etiqueta HTML <h1>). No deberías de tener más de un encabezado -- y de hecho no encontrarás un botón que te permita definir un encabezado nivel 1 sobre el bloque, sino que sólo lo podrás encontrar en el panel de Ajustes.

  1. Nivel de encabezado: selecciona desde el 1 hasta el seis.
  2. Alineación: izquierda, centro, derecha.
  3. Nivel de encabezado: difiere del punto (1) en que este incluye H1, y el primero no.
  • Inserción rápida: /img
  • Transformaciones del bloque encabezado: párrafo, cita o imagen de fondo.
Lista
Muestra el bloque Lista, en modo desordenado.

El bloque Lista no necesita mucha explicación: permite incrustar listas ordenadas y desordenadas, y controlar la indentación para hacer listas multinivel. Para cambiar de nivel usando el teclado, puedes incrementar la indentación presionando Barra espaciadora como primer caracter, o bien presionar Backspace (o como se le conoce también, Retroceso) para disminuir la sangría.

  1. Lista desordenada: cuando haces clic aquí la lista se convierte a lista con viñetas.
  2. Lista ordenada: cuando haces clic aquí la lista se convierte a lista con números.
  3. Reducir sangría: regresa al nivel anterior al actual.
  4. Aumentar sangría: añade un margen a la derecha con lo que se indica visualmente otro nivel. Cada nivel nuevo puede tener un estilo distinto, a lo que se llama lista multinivel.
  • Inserción rápida: /lista
  • Transformaciones del bloque lista: párrafo, cita.
Imagen

El bloque Imagen es otro que no necesita mucha explicación; con este puedes incrustar una imagen desde tu biblioteca de medios. Este bloque es de los tipos de bloque que tienen una representación intermedia: cuando incrustas el bloque, luce como se ve a continuación:

Muestra el bloque Imagen al insertarse inicialmente
  1. Alineación y ancho: izquierda, centro, derecha y estándar, amplio y normal (si el tema lo soporta).
  2. Medio: subir, elegir de biblioteca o incrustar usando URL.
  3. Estilo de imagen: por defecto es cuadrada, pero si necesitas una imagen redondeada escoje el segundo estilo.
  4. Si lo deseas, puedes definir tu estilo por defecto para todas tus imágenes.

Una ves que insertes una imagen, se muestra así:

Muestra el bloque Imagen con una imagen cargada y sus propiedades
  1. Aquí puedes cambiar la alineación de la imagen, de modo que puedes hacer que fluya el texto de párrafo alrededor de dicha imagen. Hay dos alineaciones especiales que hay que discutir, y que sólo las verás si el tema es compatible con Gutenberg (al final veremos como añadir este soporte): ancho amplio y ancho completo. Estos cambian el tamaño de la imagen a un poco más que el ancho del contenido (texto), y a todo el ancho disponible, respectivamente. Los botones de estas opciones funcionan como switches, es decir, al hacer clic en ellos se mantienen “encendidos”, y hay que volver a hacer clic en ellos para desactivarlos.
  2. Ofrece de nuevo las opciones Subir, Elegir de biblioteca o bien Insertar desde URL.
  3. Permite añadir o quitar un enlace.
  4. Ajustes de tamaño de imagen: clic y arrastra estos puntos para que cambies el tamaño de la imagen.
  5. Leyenda de imagen: permite formato básico (negritas, itálicas, enlace).

Propiedades de bloque

  • Sección Estilos
    1. Por defecto (cuadrado), redondeado, onda inferior u onda superior.
    2. Estilo por default, para fijar el estilo seleccionado.
  • Sección Ajustes de imagen
    1. Texto alternativo, para motores de búsqueda.
    2. Tamaño predefinido de imagen.
    3. Dimensiones de imagen en pixeles (ancho y alto).
    4. Dimensiones en porcentajes.
    5. Restablecer, reiniciar todos los valores a como estaban inicialmente.
    6. Reemplazar imagen: cambia la imagen actual por otra.
  • Sección Ajustes de recorte
    • Miniatura de imagen: es desplazable con el ratón, si es que tiene zoom.
    • Posición horizontal y vertical de la imagen.
    • Zoom de la imagen.
    • Orientación (rotación) de la imagen, contra y en el sentido de las manecillas del reloj, respectivamente.
    • Reestablecer, reinicia todos los valores de recorte.

Vale la pena aclarar que al hacer clic en el icono de Enlace, al hacer clic en Ajustes del enlace (el icono de punta hacia abajo), podrás tener acceso a dos campos adicionales, que son la relación del enlace y clase CSS del enlace, que son básicamente nombres bonitos para los atributos link rel y link class, este último para indicar a buscadores que no se desea seguir el enlace (nofollow).

  • Inserción rápida: /img
  • Transformaciones posibles: galería, imagen de fondo, archivo.
Cita
Muestra el bloque Cita de Gutenberg

El bloque Cita hace lo que ya conoces; citar un texto y mostrándolo con un estilo especial. Sin embargo, en el editor Gutenberg funciona un poco diferente. Ahora tienes dos estilos (2) de cita: el normal y el grande. Las primeras son para usarse dentro de un bloque de texto (al estilo de las “pullquotes”) y las otras van en un renglón sin nada más a los lados.

  • Inserción rápida: /cita
  • Transformaciones posibles: de estilo en normal y grande, y de función en párrafo, encabezado o lista.
Vídeo

Permite incrustar un vídeo desde una URL o bien desde tu biblioteca de medios.

  1. Alineación y ancho: izquierda, centro, derecha y normal, ancho amplio y ancho completo, si los soporta el tema
  2. Insertar medios: Subir, desde Biblioteca de medios o Insertar desde URL.

Una vez insertado el medio, luce así:

  1. Alineación/ancho: al igual que antes.
  2. Editar: permite reemplazar el vídeo incrustado.
  3. Permite que el tamaño del reproductor cambie para dispositivos más pequeños.
  • Inserción rápida: /video
  • Transformaciones de bloque Vídeo: archivo.
Galería

El bloque Galería permite crear una galería de imágenes. El flujo de trabajo es exactamente el mismo que con el editor antiguo: subes o eliges imágenes de tu biblioteca de medios, creas una nueva galería, la insertas y listo. Las opciones de la Galería son la alineación de esta (las tres primeras) y el ancho de la misma, si es amplio o ancho total.

  1. Alineación y ancho: izquierda, centro, derecha y normal, ancho amplio y ancho completo, si los soporta el tema
  2. Insertar medios: Subir, desde Biblioteca de medios o Insertar desde URL.

Cuando hayas seleccionado imágenes y las hayas incrustado, la galería se ve así:

  1. Alineación y ancho: izquierda, centro, derecha y normal, ancho amplio y ancho completo, si los soporta el tema
  2. Insertar medios: Subir, desde Biblioteca de medios o Insertar desde URL.
  3. Número de columnas.
  4. Recortar imágenes: si está habilitado, las imagenes se muestran recortadas (si es necesario) para que parezca que todas tienen el mismo tamaño.
  5. Permite enlazar la imagen a su fuente o bien a una URL.
  6. Tamaño predefinido de imagen.
  • Inserción rápida: /galeria
  • Transformaciones de bloque Galería: imagen (genera una imagen por cada miniatura).
Audio

Permite incrustar un audio ya sea desde tu biblioteca de medios o bien a través de una URL.

  1. Alineación y ancho: izquierda, centro, derecha y normal, ancho amplio y ancho completo, si los soporta el tema
  2. Insertar medios: Subir, desde Biblioteca de medios o Insertar desde URL.

Después de elegir e incrustar el audio, se ve así:

  1. Alineación y ancho: izquierda, centro, derecha y normal, ancho amplio y ancho completo, si los soporta el tema
  2. Reemplazar: permite Subir, desde Biblioteca de medios o Insertar desde URL.
  3. Habilita la reproducción automática del audio.
  4. Habilita la repetición del audio.
  5. Indica que se haga una precarga de metadatos, o ninguna.
  • Inserción rápida: /audio
  • Transformaciones de bloque Audio: archivo.
Fondo

El bloque Fondo permite incrustar un bloque con un color, imagen o vídeo de fondo, así como servir de contenedor para otros bloques. Es muy efectivo para encabezados o bien como un foco de atención.

  1. Alineación y ancho: izquierda, centro, derecha y normal, ancho amplio y ancho completo, si los soporta el tema.
  2. Medios: Si deseas iniciar con una imagen o un vídeo, elige este camino; permite Subir, desde Biblioteca de medios o Insertar desde URL.
  3. Color sólido: si quieres que el fondo sea un color sólido de inicio, puedes hacer clic en uno de estos y verás cambiar el fondo del bloque.

Si por ejemplo eliges un color naranja, el bloque se muestra así:

Como puedes ver el bloque tiene el fondo en color naranja, y ahora el cursor aparece en el centro y muestra un bloque de párrafo por default, pero puedes incrustar lo que quieras dentro de este bloque de fondo. Por ejemplo, puedes configurar un bloque con imagen de fondo, degradado sobrepuesto, encabezado y párrafo, algo como esto:

Las propiedades del bloque fondo varían si son imagen o si es color. Para imagen las que puedes usar son:

Estilos

  1. Estilo: normal, con onda inferior u onda superior.
  2. Establece el estilo por defecto para la próxima vez que lo uses.

Ajuste de medios

  1. Permite que el fondo no se mueva y con esto se haga un llamativo efecto.
  2. Selector del punto focal: permite indicar que parte de la imagen se mostrará moviendo el círculo que se muestra sobre la imagen.
  3. Selector del punto focal por porcentajes: lo mismo que (2) sólo que vía manual.
  4. Quita los medios del bloque.

Dimensiones

Sólo tiene un control que muestra la altura mínima en pixeles que tendrá el bloque. También puedes ajustarlo visualmente haciendo clic sobre el punto que se muestra en la parte de abajo de la imagen, y arrastrando hacia arriba y abajo.

Ajustes de recorte

  1. Ajusta la posición de recorte moviendo la imagen haciendo clic y arrastrando.
  2. Ajustala posición de recorte especificando manualmente la posición vertical y horizontal.
  3. Cambia el zoom de la imagen.
  4. Cambia la rotación de la imagen contraria a las manecillas del reloj o en el sentido de éstas, respectivamente.
  5. Reestablecer regresa todos los valores a su inicio.
  • Inserción rápida: /fondo
  • Transformaciones de bloque Fondo: imagen, grupo.

Bloques de formato

Tabla

El bloque Tabla ofrece un control de tabla muy básico. Cuando se inserta luce así:

Muestra el bloque de Tabla y su configuración básica
  1. Alineación: permite especificar si se alinea a la izquierda, centro, o derecha, y anchos amplio y completo.
  2. Columnas y filas, respectivamente, con las que se creará la tabla.
  3. Estilo: el default que es un look normal, con bordes, y el estilo por franjas o rayado de cebra, donde se alterna el fondo de los renglones.
  4. Aquí puedes establecer el look por defecto para usos subsecuentes.

Ya creada y con algo de configuración, el bloque tabla luce así:

Muestra un bloque de Tabla ya configurado

Las opciones de tabla son bastante sencillas:

  1. Alineación: permite especificar si se alinea a la izquierda, centro, o derecha, y anchos amplio y completo.
  2. Inserción de renglones o columnas: añadir una fila antes, añadir una fila después, borrar una fila, añadir columna antes, añadir columna después, y borrar columna, opciones cuyos nombres describen perfectamente lo que hacen.
  3. Alineación de columna: permite alinear toda la columna, no sólo una celda.
  4. Estilo de tabla: normal y rayado de cebra.
  5. Para fijar el estilo de tabla por defecto.
  6. Celdas de ancho fijo: todas las celdas ocupan el mismo porcentaje del total.
  7. Sección de cabecera: al estar habilitado, el primer renglón sirve para cabecera.
  8. Sección de pie de página: al estar habilitado, el último renglón sirve para pie de página.
  • Inserción rápida: /tabla
  • Transformaciones: grupo.
Preformateado
Muestra el bloque Preformateado

El bloque Preformateado incrusta un bloque con contenido en fuente monoespaciada, con la posibilidad de usar negritas e itálicas.

  • Inserción rápida: /pre
  • Transformaciones: párrafo, grupo.
HTML Personalizado
Muestra el bloque HTML personalizado

Tal cual como su nombre lo dice, el bloque HTML Personalizado te permite crear un bloque donde puedes introducir etiquetas HTML La única funcionalidad que ofrece es cambiar entre vista previa y HTML.

  • Inserción rápida: /html
  • Transformaciones: grupo.
Clásico
Muestra el bloque Clásico y sus funciones

El bloque Clásico es básicamente un editor TinyMCE. Si lo añades verás que tienes casi toda la funcionalidad del editor anterior, y tienes la posibilidad de convertirlo en bloques si lo deseas. Es una opción para todos aquellos que todavía no están muy seguros de usar bloques -- por decirlo de una manera, pues este es en si un bloque.

  • Inserción rápida: /clasico
  • Transformaciones: grupo.
Código
Muestra el bloque Código y sus funciones

Este bloque es similar al bloque preformateado, pero está pensado para que introduzcas código y se mantenga sin modificaciones. A diferencia del bloque Preformateado, el bloque código no admite formato alguno.

  • Inserción rápida: /codigo
  • Transformaciones: preformateado, grupo.
Cita
Muestra el bloque Cita de la sección de bloques de Formato

Otro bloque de cita, permite la cita misma y la referencia (o autor). Este bloque tiene un estilo visual distinto al bloque Cita que está en Bloques comunes, y puedes ajustar los colores si así lo deseas.

  • Inserción rápida: /cita
  • Transformaciones posibles: párrafo, lista, encabezado, grupo, cita.
Verso

Un bloque para poner contenido de poesías o similares. Indenta un poco el contenido, y no tiene ajuste de línea automático; tienes que usar Enter forzosamente. Ciertamente no tiene mucho uso, pero ahí está.

  • Inserción rápida: /verso
  • Transformaciones posibles: párrafo, grupo.

Elementos de diseño

Grupo

El bloque Grupo es una de bloques más versátiles de Gutenberg, y como su nombre lo dice, su funcionalidad consiste en agrupar otros bloques, o visto de otra forma, sirve de contenedor. El grupo como tal tiene otras propiedades, lo que lo hace más útil. Cuando añades un bloque de Grupo inicia así:

Muestra el bloque Grupo en su estado inicial.

En este estado inicial la única opción es fijar el ancho amplio y ancho completo, desde la barra de herramientas, así como realizar ajustes de color desde las opciones de bloque. Una vez creado puedes insertar los bloques que quieras (presionando el botón con el signo +), en este siguiente ejemplo inserté un encabezado y un párrafo, y apliqué un fondo azul cielo a todo el Grupo:

Muestra el bloque Grupo y una configuración posible.

Lo que vayas añadiendo dentro será un hijo del grupo; es decir, si escribes un subtítulo es parte del grupo, un párrafo, igual, y así en consecuencia. Puedes hacer clic afuera para salite del grupo o bien presionar TAB hasta que salgas del bloque.

  • Inserción rápida: /grupo
  • Transformaciones posibles: ninguna.
Columnas

El bloque Columnas permite cambiar el ancho del bloque (amplio y completo), y la cantidad de éstas como ajuste.

Al insertar un bloque de columnas, se ofrece la opción de crearlo con diseños predefinidos:

Muestra el bloque Columnas y su selector de configuración inicial.

Si alguno de ellos te sirve, puedes darle clic o bien hacer clic en el enlace Saltar, para empezar a usar el control en su configuración por default, es decir, a dos columnas.

Muestra el bloque Columnas y sus selectores de bloques en cada columna, así como el control para número de columnas.

Después de elegir un diseño o bien elegir el diseño por default a dos columnas, cada una de estas columnas muestran un selector de bloque (el bloque gris con el signo + en medio), y que permiten hacer la primera elección del bloque que irá dentro, aunque después desaparece y puedes usar el atajo / para insertar un bloque si así lo deseas. En pocas palabras, cada columna es un contenedor de bloques.

  1. Ancho amplio y completo.
  2. Alineación vertical: arriba, medio, fondo
  3. Insertar bloque.
  4. Número de columnas.
Muestra el bloque de columnas.

También puedes ajustar el ancho individual de cada columna si así lo deseas; tienes que hacerlo mientras aparecen los bloques grises de inicio, si creas bloques dentro ya no aparece la opción hasta que borras todo en la columna. Puedes cambiar el ancho de cada columna de dos maneras: 

  • Con el Navegador de bloques:
    1. Selecciona el bloque entero de Columnas, haciendo clic en el espacio blanco entre dos columnas.
    2. Clic en el Navegador de bloques (Shift -- Alt -- O).
    3. Clic en la columna que desees ajustar.
    4. Ajusta el ancho de la columna en los ajustes de Bloque.
  • Con navegación de bloques
    1. Presiona la tecla Esc.
    2. Navega con el teclado hacia el bloque Columnas, presiona Enter cuando lo hayas hecho.
    3. Con las teclas hacia arriba y abajo navega hasta la columna que quieras modificar.
    4. Ajusta el ancho de la columna en los ajustes de Bloque.

Para los que desarrollan recomiendo la lectura de este excelente artículo sobre como aplicar estilos a las columnas en Gutenberg. Se discute el tema de como usarlas más adelante en este tutorial.

  • Inserción rápida: /columnas
  • Transformaciones posibles: grupo.
Espaciador
Muestra el bloque Espaciador y como ajustar su tamaño

Inserta un bloque que te permite espaciar tu contenido. Como único ajuste tienes un control de desplazamiento que te permite indicar de cuantos pixeles de alto quieres tu espaciador, o bien puedes hacerlo visualmente con el control de círculo que se muestra en la parte de abajo de la barra gris; ambos son equivalentes.

  • Inserción rápida: /espaciador
  • Transformaciones posibles: grupo.

Botones

El bloque Botones incrusta uno o más botones, cada uno con sus propiedades distintas si es necesario. Al incrustarlo luce inicialmente así:

Muestra el bloque Botones y su configuración básica
  1. Añadir/quitar enlace.
  2. Editar el texto del botón.
  3. Añadir otro botón.
  4. Estilo del botón: relleno, contorno, circular, 3D y sombra.
  5. Definir estilo por defecto para próximos usos.
  6. Control de color del botón.
  7. Control de radio de esquinas del borde; si es mayor a cero empiezan a redondearse.
  8. Abrir el enlace en una pestaña nueva.

El flujo de trabajo es colocar el bloque y presionar el signo de + tantas veces como botones hagan falta. Cada uno tiene su propia configuración de texto, enlace, estilo y colores, como se puede ver a continuación:

Muestra un ejemplo de como luce el bloque Botones ya configurado
  • Inserción rápida: /botones
  • Transformaciones posibles: grupo.
Más
Muestra el bloque Más y su funcionamiento básico

Nuestro viejo amigo, el indicador de Leer más, para cortar publicaciones muy largas en la página principal de nuestro blog. El switch de Ocultar el extracto anterior a la etiqueta Más permite que uses un párrafo desechable antes del corte, muy probablemente donde indicas que a continuación sigue el artículo o algo similar.

Paginación
Muestra el bloque Salto de página

Lo anterior resultaría en una página como la que sigue:

Muestra como se muestra el bloque Salto de página en la página en vivo

El salto de página te permite paginar tu publicación, es decir, cada salto de página se convierte en una página. Puede ayudar con publicaciones muy largas.

Separador
Muestra el bloque Separador y sus estilos

Una línea horizontal para separar visualmente contenido. En (1) Tienes la opción de tres estilos: por defecto, línea ancha (ancho del contenido) o puntos, y puedes fijar el estilo por defecto en (4).

  • Inserción rápida: /separador
  • Transformaciones posibles: grupo.
Medios y texto

El bloque Medios y texto sirve tal cual su nombre lo dice: es un bloque de dos columnas, en el que puedes tener la mitad destinada a algún medio en particular, y la otra a contenido de texto o lo que gustes. Al insertarlo luce así:

Muestra el bloque Medios y texto en su configuración inicial.
  1. Ancho: amplio o completo.
  2. Establece los medios a la derecha (orientación estándar).
  3. Establece los medios a la izquierda.
  4. Establece la orientación vertical: arriba, medio o fondo.
  5. Control de medio: permite subir o bien elegir de la biblioteca de medios.
  6. Área de contenido: puedes añadir encabezados, párrafos, etc.
  7. Comportamiento en móvil: si está habilitado, en móvil muestra la imagen sobre el texto para la orientación por default.

Después de insertar medios y texto, se ve así:

Muestra un bloque Medios y texto ya configurado
  1. Ancho: amplio o completo.
  2. Establece los medios a la derecha (orientación estándar).
  3. Establece los medios a la izquierda.
  4. Establece la orientación vertical: arriba, medio o fondo.
  5. Añadir o quitar enlace.
  6. Control de medio: permite subir o bien elegir de la biblioteca de medios.
  7. Ajuste de tamaño de medio incrustado; arrastra hacia los lados para cambiar el tamaño de la imagen.
  8. Comportamiento en móvil: si está habilitado, en móvil muestra la imagen sobre el texto para la orientación por default.
  9. Recorta la imagen de modo que entre bien en la columna.
  10. Texto alternativo para la imagen, recomendable llenarlo siempre.
  • Inserción rápida: /medios
  • Transformaciones posibles: grupo, imagen o vídeo.
Navegación

El bloque Navegación te permite crear una especie de menú. Al insertarlo se muestra así:

Muestra el bloque Navegación en su configuración inicial

En (1) puedes establecer el ancho amplio o completo de tu bloque de navegación, y tienes dos maneras de crearlo: la primera (2) es con el botón Crear desde todas las páginas padre, el cual usa las páginas principales de tu sitio y las dispone como si fuera un menú, o bien (3) crear uno vacío para meter uno a uno tus enlaces. Si seguimos el camino en automático (2), nos genera un menú más o menos como este:

Muestra un bloque Navegación ya configurado
  1. Ajustar el ancho en amplio y total.
  2. Alineación de cada elemento del menú: izquierda, centro, derecha.
  3. Abrir el navegador de bloques para ir a un bloque o insertar más.
  4. Control de color del menú; es una réplica del control de color de los ajustes del bloque.
  5. Insertar nueva entrada de menú
  6. Estilo: claro o oscuro.
  7. Estilo por default, para fijar el estilo.
  8. Navegador de bloques, para ir a un elemento de menú o añadir más enlaces al mismo.
  9. Ajustes de tamaño de texto, por tamaños predefinidos o por tamaño manual.
  10. Mostrar íconos si la entrada de menú es un submenú.

Cada elemento de menú es un bloque como tal; puedes cerciorarte haciendo clic alrededor del texto de cada entrada, o bien presionando Esc para entrar en modo de navegación y desplazarte hasta el control de navegación, o si ya estás en el presionar enter y navegar entre las entradas de menú con tecla arriba y abajo.

Cómo añadir nuevas entradas de menú

Presiona el botón con el signo de más (5) sobre la barra de menú; esto creará una nueva entrada en blanco, y aparecerá un control emergente que te permite introducir un enlace a una publicación tuya o bien una URL externa. Puedes teclear algunas palabras y te mostrará que entradas coinciden con tu búsqueda; hasta abajo puedes hacer clic en el switch para indicar si quieres abrir el enlace en una nueva pestaña:

Muestra el control de añadir enlace al bloque Navegación

Vale la pena mencionar que si tecleas palabras y Gutenberg NO encuentra una coincidencia con alguna página que hayas publicado, te dará la opción de crear esa página, de modo que se pueda añadir el enlace, y la edites después.

Cada entrada de menú tiene algunas opciones que vale la pena mencionar:

  • Ajustes SEO: aquí puedes indicar si el enlace de esa entrada de menú debe ser marcado como nofollow, lo cual indica a los motores de búsqueda que no sigan el enlace, o como se le conoce en el argot de SEO, “pasar el jugo del enlace“.
  • Ajustes del enlace: en este campo puedes poner una descripción, que se muestra en el menú si el tema es compatible.
  • Inserción rápida: /navegacion
  • Transformaciones posibles: grupo.

Widgets

Shortcode
Muestra el bloque Shortcode

Los shortcodes siguen siendo muy útiles todavía; por ello se ofrece este bloque para que puedas introducir un shortcode, mismo que no se muestra en tiempo de edición, sino que sólo se muestra cuando un usuario visualiza el contenido.

  • Inserción rápida: /shortcode
  • Transformaciones posibles: grupo.
Archivo de entradas
Muestra el bloque de widget Archivos y su configuración

No confundir con el bloque de Archivo que vimos antes; este bloque inserta un widget de archivo de entradas, con las mismas opciones que tiene el widget que conoces, que son Mostrar como desplegable (2) y Mostrar contador de entradas (3).

Calendario

El bloque Calendario muestra un calendario con todas tus publicaciones:

Muestra el bloque de widget de Calendario

Como puedes ver, su funcionalidad está muy limitada; no tiene opciones, sólo las opciones estándares de alineación y ancho.

  • Inserción rápida: /calendario
  • Transformaciones posibles: grupo
Categorías
Muestra el bloque de widget de Categorías y sus posibles configuraciones

Inserta el widget de Categorías, y permite los mismos ajustes que son Mostrar como desplegable (2), Mostrar jerarquía (3), y Mostrar contador de entradas (3). Este bloque no tiene opciones.

  • Inserción rápida: /categorias
  • Transformaciones posibles: grupo

Últimos comentarios
Muestra el bloque de widget de Últimos Comentarios

Inserta el widget de Últimos comentarios; puedes ajustar Mostrar avatar (1), Mostrar fecha (2), Mostrar extracto (3), y e indicar cuantos comentarios quieres desplegar (4).

  • Inserción rápida: /comentarios
  • Transformaciones posibles: grupo
Últimas entradas
Muestra el bloque de Últimas Entradas y su configuración

Inserta el widget de Últimas entradas, con algunas opciones para que puedas modificar su apariencia:

  1. Alineación y ancho: izquierda, centro, derecha, y ancho amplio y completo.
  2. Modo de lista, uno seguido de otro.
  3. Modo de cuadrícula, separa las entradas como si fueran tarjetas.
  4. Si está habilitado, muestra el contenido parcial de una entrada a manera de extracto.
  5. Si está habilitado, muestra la fecha de publicación de la entrada.
  6. Si está habilitado, muestra la imagen destacada de la entrada.
  7. Modo de ordenamiento: de antiguas a nuevas, de nuevas a antiguas, A-Z y Z-A.
  8. Filtro de categoría: puedes elegir que categoría mostrar; por default son todas.
  9. Número de elementos a mostrar: el default es 5.
  • Inserción rápida: /entradas
  • Transformaciones posibles: grupo.
RSS

Permite incrustar un feed RSS cualquiera; no tiene opciones adicionales de las que se ven:

Muestra el bloque RSS

En primera instancia el bloque widget RSS te solicita la URL del feed que quieras incrustar; yo estoy usando el de este sitio. Una vez que hagas clic en Usar URL verás el resultado, que con algo de ajustes luce así:

Muestra como luce un bloque RSS configurado: elementos del feed en columnas y como usar las opciones para replicarlo
  1. Alineación y ancho: izquierda, centro y derecha; ancho amplio y ancho completo.
  2. Editar: modificar la URL del feed a mostrar.
  3. Muestra el feed como lista.
  4. Muestra el feed como cuadrícula.
  5. Cantidad de elementos a mostrar.
  6. Si está habilitado, mostrar el autor en cada entrada.
  7. Si está habilitado, mostrar la fecha en cada entrada.
  8. Si está habilitado, mostrar el extracto en cada entrada.
  9. Permite establecer el máximo de palabras a mostrar como extracto.
  10. Permite establecer en cuantas columnas dividir el contenido.
  • Inserción rápida: /rss
  • Transformaciones posibles: grupo.
Búsqueda
Muestra el bloque Búsqueda

Incrusta un widget de búsqueda en tu sitio. Sólo permite cambiar la alineación (izquierda, centro o derecha) y el ancho (amplio o completo).

  • Inserción rápida: /buscar
  • Transformaciones posibles: grupo
Nube de etiquetas
Muestra el bloque Nube de etiquetas

Este bloque muestra una nube de etiquetas, ya sea con total o sin el.

En (1) puedes cambiar la alineación de las etiquetas a la izquierda, centro y derecha, e indicar si quieres usar las nuevas alineaciones (completa y ancha). En (2) puedes indicar que taxonomía mostrar, y por último en (3) puedes indicar si quieres mostrar el contador por entrada.

Iconos sociales

Con este bloque puedes incrustar íconos para todas tus redes sociales. Al colocarlo luce así:

Muestra el bloque de Iconos sociales y sus opciones

  1. Alineación: izquierda, centro, derecha.
  2. Icono activo: notarás que se muestra una tira de íconos pero que hay unos que están con un color más fuerte y otros con un color tenue; los que tienen el color fuerte (o normal) son los que están activos, los otros son meras sugerencias.
  3. Sugerencias de íconos: si alguno de estos te hace falta, haz clic en el y se te pedirá una URL a donde apuntar.
  4. Insertar nuevo ícono social: hay 39 en total por ahora, seguramente podrás encontrar el que necesitas.
  5. Estilo: por defecto, sólo logos y forma de pastilla.
  6. Estilo por defecto: para fijar el estilo que más te guste.
  • Inserción rápida: /ico, /social
  • Transformaciones posibles: grupo

Bloques incrustados

Aquí encontrarás todos los elementos que puedes incrustar en tu publicación. Estos se mostrarán de maneras distintas dependiendo del contenigo que tengan asociados. Por ejemplo, cuando incrustas Twitter introduces la URL de un mensaje, y al visualizar la entrada verás que se muestra una tarjeta con un mensaje de Twitter.

Bloques reutilizables

Aquí encontrarás todos los bloques reutilizables que hayas definido. Vale la pena mencionar que es una de dos ubicaciones (la otra en el menú Más) que tiene un enlace para que administres estos bloques; este te llevará a una pantalla donde puedes gestionar todos los bloques reutilizables que tengas definidos.

La sección Avanzado en todos los bloques

Habrás notado que todos los bloques tienen al final en sus ajustes una sección titulada Avanzado. Esta sección permite cuatro cosas que dependen del bloque con que trabajes, es decir, pueden aparecer en cualquier combinación:

  1. Anclaje HTML: con esta característica puedes introducir una palabra que servirá a manera de marcador, pues luego puedes indicar en una URL este punto exactamente. Para los que no sepan como se maneja, supongamos que defines la palabra “posicion” como anclaje; cuando quieras referirte a este punto en tu documento sólo tienes que usar una URL como “tudominio.com/pagina#posicion” para ir directo ahí.
  2. Clase CSS: si tienes algún código CSS que quieras aplicar sobre un elemento, aquí puedes especificar el nombre de la clase que deseas aplicar.
  3. Eliminar espaciado superior: elimina cualquier margen superior.
  4. Eliminar espaciado inferior: elimina cualquier margen inferior.

Parte III -- Flujo de trabajo en Gutenberg

El nuevo editor Gutenberg permite hacer tareas que son exclusivas de este, y que por ende no tienen una contraparte nativa en el editor anterior.

Quitar un bloque

Tienes dos opciones, la primera es desde el menú del bloque:

  1. Clic en el bloque que desees trabajar
  2. Haz clic en Más opciones
  3. Haz clic en Quitar bloque

O bien puedes presionar el atajo que ahí mismo se muestra, que es Shift + Alt + Z.

Cambiar entre edición visual y HTML en Gutenberg

A diferencia del editor anterior, en Gutenberg puedes ver el código HTML por bloque o bien por todo el documento. Para editar un bloque en modo HTML, haz lo siguiente:

  1. Clic en el bloque que desees trabajar.
  2. Haz clic en Más opciones.
  3. Haz clic en Editar como HTML.

Verás como el contenido cambia a HTML, ahí puedes poner el resto del formato que aún no se pueda en Gutenberg. Para salir del modo tienes que seguir los mismos pasos, sólo que en vez de Editar como HTML verás Editar visualmente.

Sin embargo, el editor Gutenberg tiene otra vista de código, la cual abres desde el menú principal, haciendo clic en el botón Más (el de los tres puntos), y haciendo clic en Editor de código, o bien con el atajo Ctrl + Shift + Alt + M. Pero ten cuidado, porque en este modo de Editor de código se ven las etiquetas especiales de Gutenberg, así que mejor no entres en este modo a menos que te haga mucha falta y sepas lo que estás haciendo.

Bloques reutilizables en el editor Gutenberg

Supongamos que tienes un bloque que usaste para un propósito definido, y después de que lo formateaste a tu antojo quedó de tu agrado y decides que sería bueno poder usarlo después. Gutenberg permite definir uno o un grupo de bloques como reutilizable, lo que hace que este bloque se guarde en un repositorio, y esté disponible cada vez que quieras usarlo: si lo modificas, se modifican todas las instancias en donde se haya usado -- en el post en el que trabajas o en cualquier otro. Vamos a definir las tareas de un bloque reutilizable como dos: la definición de un bloque reutilizable, y como usar un bloque reutilizable previamente definido.

Como definir un bloque reutilizable en Gutenberg

Para ejemplificar el uso de los bloques reutilizables, vamos a trabajar con un caso concreto: un starbox, que no es más que una caja donde se muestran algunos datos del autor de la publicación. Puesto que un starbox se usa en todas las publicaciones, es el candidato ideal para usar un bloque reutilizable. Primero que nada, construye lo siguiente en pantalla:

Muestra una serie de bloques que servirán como ejemplo para aprender a usar bloques reutilizables

Lo que ves en esta imagen es un bloque de columnas (2 columnas), la columna del lado izquierdo tiene una imagen, la del lado derecho un encabezado, un párrafo y un bloque de Iconos sociales. Ahora, selecciona los cuatro bloques que acabas de crear; como el bloque Columnas funciona como un contenedor de otros bloques, sólo necesitas hacer clic en ese bloque. Cuando lo hayas hecho, en su barra de herramientas haz clic en Más opciones…:

Muestra como convertir bloques en reutilizables

Después haz clic en Añadir a los bloques reutilizables, para añadirlo al grupo correspondiente. Gutenberg te pedirá un nombre para tu nuevo bloque, borra lo que dice y escribe “starbox“:

Muestra como darle nombre a un bloque reutilizable nuevo

Al hacer esto, observarás dos cosas; uno, al darle clic al bloque recién creado muestra un borde en la parte superior con el nombre del bloque y un botón que dice Editar, y dos, que en el botón añadir bloque aparece un nuevo grupo llamado Reutilizable, y ahí verás tu bloque nuevo. Vale la pena mencionar que también lo verás al presionar el atajo /, donde puedes empezar a teclear el nombre para buscar las coincidencias con tu bloque. Aquí viene una recomendación: usa un nombrado consistente de tus bloques reutilizables, de modo que puedas ubicarlos fácilmente.

Cómo insertar y editar un bloque reutilizable en Gutenberg

Insertar un bloque Reutilizable es como insertar cualquier otro bloque de Gutenberg; como se mencionó antes, lo encontrarás en la sección Reutilizable, o bien lo puedes buscar con el atajo /.

Recuerda que el bloque es una mera copia de un bloque del repositorio; cualquiera que modifiques, estarás modificando el original; imagina que tienes dos documentos, A y B. En el documento A creas un bloque, pero lo insertas en B también. Si lo editas en cualquiera, el cambio se verá reflejado en ambos.

Para editar un bloque reutilizable, haz lo siguiente:

  1. Haz clic sobre el bloque que quieras editar.
  2. Haz clic en el botón Editar que aparece en la parte superior del bloque en cuestión.
  3. Realiza los cambios que desees: puedes cambiar el nombre del bloque o el contenido.
  4. Al terminar tus cambios, presiona el botón Guardar, o bien si deseas descartar tus cambios, Cancelar.

Cómo gestionar bloques reutilizables en Gutenberg

Siendo que tu eres el que puede crear bloques reutilizables, en algún punto necesitarás gestionar dichos bloques. Para gestionarlos, puedes llegar por dos caminos; el primero y más sencillo es hacer clic en Más herramientas y opciones > Gestionar todos los bloques reutilizables, o bien hacer lo siguiente:

  1. Haz clic en el botón Añadir bloque.
  2. Ubica el grupo Reutilizables.
  3. Haz clic sobre el enlace (Gestionar todos los bloques reutilizables).

Esto te llevará a la interfaz estándar de WordPress de administración de elementos; aquí veremos todos nuestros bloques, así como opción de borrarlos, exportarlos o importarlos.

Muestra la interfaz de administración de bloques reutilizables
Exportar un bloque reutilizable como JSON en Gutenberg
  1. Ve a la vista de gestión de bloques reutilizables.
  2. Ubica el bloque que quieras exportar.
  3. Coloca el cursor sobre el de modo que se muestre el menú asociado a esa entrada.
  4. Haz clic sobre Exportar como JSON.
Importar un bloque reutilizable como JSON en Gutenberg
  1. Ve a la vista de gestión de bloques reutilizables.
  2. Haz clic en Importar de JSON.
  3. Verás un pequeño desplegable que te permite seleccionar un archivo; hazlo y cuando termines haz clic en el botón Importar.
  4. Si todo sale bien, verás un nuevo bloque en la lista. Felicidades, ¡acabas de importar tu primer bloque!
Borrar un bloque reutilizable de Gutenberg

Finalmente, si ya no te sirve el bloque lo puedes mandar a la papelera de igual manera que con cualquier elemento de WordPress; ve al gestor de bloques, ubica el que quieres eliminar, pones el cursor encima y verás aparecer su menú; clic en Papelera y listo. Recuerda que estás borrando el bloque, así que se borrarán todas las apariciones del mismo.

Letra inicial grande (bloque Párrafo en Gutenberg)

Esta es una característica que ha sido algo controversial al inicio de Gutenberg debido a que no es muy utilizada, pero a fin de cuentas los desarrolladores decidieron dejarla ahí. Esta característica te permite que la primera letra de un párrafo sea de un tamaño mucho mayor, quedando dentro de los límites del párrafo. Si quieres usarla, sólo tienes que estar en un bloque de párrafo, ir a propiedades de bloque y habilitar el switch Capitalizar. Verás crecer la primera letra de ese bloque cuando lo hagas.

Columnas en el editor Gutenberg

Modo normal, modo amplio y modo completo en bloque Columnas

Gutenberg permite 3 tamaños del bloque de columnas; para acceder a ellos selecciona el bloque de Columnas y fíjate los dos primeros botones de la barra de herramientas.

  • Normal: si ninguno de los botones está presionado o activo, entonces estás en modo normal, es decir, las columnas ocupan el ancho del texto de tu publicación;
  • Ancho amplio: el bloque de Columas es ligeramente más ancho que el texto de tu publicación.
  • Ancho completo: el bloque de Columnas ocupa todo el ancho disponible.

Cómo añadir columnas al Bloque de Columnas

Sigue estos pasos:

  • Con el ratón:
    1. Usa el navegador de bloques o haz clic en el espacio entre dos columnas para seleccionar el bloque rápidamente y sin complicaciones.
    2. En los ajustes de bloque (si están cerrados presionar Shift + Ctrl + ,) mover el control deslizable en la sección Columnas para indicar cuantas quieres.
  • Con el teclado:
    1. Presiona Esc para entrar en modo de navegación.
    2. Presiona Arriba y Abajo para dar con el bloque de Columnas que desees cambiar.
    3. Ajusta las columnas usando el ratón.

Cómo ajustar el ancho por columna

  • Con el ratón:
    1. Haz clic en el espacio entre dos columnas para seleccionar el bloque rápidamente y sin complicaciones.
    2. Abre el navegador de bloques y haz clic en la columna que quieras ajustar.
    3. En los ajustes de bloque (si están cerrados presionar Shift + Ctrl + ,) ajusta el porcentaje de ancho de la columna.
  • Con el teclado:
    1. Presiona Esc para entrar en modo de navegación.
    2. Presiona Arriba y Abajo para dar con el bloque de Columnas que desees cambiar.
    3. Ajusta el porcentaje de ancho de la columna usando tu ratón.

Cómo personalizar columnas del Bloque de Columnas

Seleccionando cada columna puedes aplicar ajustes de color para lograr efectos y darle mejor presencia a tu contenido; con una columna seleccionada, sólo tienes que abrir Ajustes de Bloque y abrir la sección Ajustes de Color, y elegir un color de fondo y otro de texto. Si llegas a hacer esto, Gutenberg puede evaluar tu combinación de colores e incluso hacerte sugerencias sobre si funciona o no.

Tablas en Gutenberg

Al insertar un bloque de Tabla lo primero que verás es que se te pregunta de cuantas columnas y cuántas filas quieres tu tabla; cambia los valores a tu conveniencia y haz clic en el botón Crear una tabla.

Usar una fila para encabezado

  1. Selecciona la tabla.
  2. En opciones de bloque, sección Ajustes de tabla habilita Sección de cabecera.
  3. Aparecerá una nueva fila con formato listo para centrar el contenido de las celdas; esta fila tiene más énfasis.

Usar una fila para pie de página

  1. Selecciona la tabla.
  2. En opciones de bloque, sección Ajustes de tabla habilita Sección de pie de página.
  3. Aparecerá una nueva fila con formato listo para centrar el contenido de las celdas.

Ajuste de ancho de columnas

Las celdas cambian de tamaño de acuerdo al contenido que introduzcas, así que puedes terminar con columnas en anchos que no luzcan bien. Puedes evitar esto poniendo ancho fijo a todas las columnas:

  1. Selecciona la tabla.
  2. En opciones de bloque, sección Ajustes de tabla habilita Celdas de tabla de ancho fijo.

Parte IV -- Migración de TinyMCE a Gutenberg

Cómo configurar el título en Gutenberg

Cuando inicias un nuevo post, este inicia en blanco excepto por un bloque que tiene una indicación de ayuda que dice “Añadir título”; y no es meramente estético, es el título principal de tu documento, es decir, es el <h1> de todo tu documento, así que toma tus precauciones al escribirlo, es decir, verifica que esté bien escrito revisando todos tus trucos SEO que tengas a la mano.

Cómo editar el slug en Gutenberg

Muestra como editar el slug en Gutenberg

Siguiente parada, el slug; increíblemente, una de las preguntas con las que me topo más seguido es “¿cómo cambio el slug en Gutenberg?“, tarea que a mi me parece sencilla pero veo que a muchos se les ha complicado más allá de lo descriptible; pero bueno, veamos como cambiar el slug de un post en Gutenberg:  como seguramente ya sabrás a estas alturas, el slug es la URL que tendrá nuestro post, y que por lo general editamos por cuestiones de SEO y otras más. Editar el slug en el editor Gutenberg es muy sencillo: haz clic en el título (una vez llenado -- sin texto no puede haber slug la primera vez que lo llenas) y justo sobre el título aparecerá una caja de texto con un botón de Editar; haz clic en el para para que edites el slug a tu antojo. Vale la pena hacer notar que el slug que se muestra es un enlace vivo, si haces clic en el irás al post. Otra forma de editar el slug es ir a la pestaña de ajustes de documento (3), e ir a la sección Enlace permanente, donde encontrarás un editor de slug adicional, pero ambos hacen lo mismo.

Cómo configurar las opciones de publicación en Gutenberg

Para esto necesitarás tener en pantalla el panel Ajustes (clic en el botón de engrane o bien presionar Ctrl + Shift + ,); como puedes ver, hay dos pestañas siempre en el panel Ajustes:

  • La pestaña Documento, que se refiere al post global en el que trabajas, y
  • La pestaña Bloque, donde verás las propiedades del bloque seleccionado actualmente.

Si haces clic en la pestaña Documento, ahí encontrarás todos los metaboxes que ya conoces del anterior editor, pero esta vez en forma de acordeón.

Escribir párrafos sin crear bloques nuevos

Una de las características que molestan a los nuevos usuarios del nuevo editor Gutenberg es que cada vez que presionan Enter para terminar un párrafo, automáticamente se crea otro bloque del mismo tipo (párrafo). Para evitar esto, sólo tienes que terminar tu párrafo con Shift+Enter, y continuarás en el mismo bloque de párrafo.

Crear citas

Las citas no tienen mayor problema -- selecciona el tipo de bloque de Cita o bien convierte un párrafo en el bloque Cita -, incluyo esta sección por una distinción que se hace en Gutenberg en cuanto a las citas: hay dos tipos de citas.

  • Regular, más usada como pull-quote, es decir, dentro del texto de párrafo, o
  • Grande, o usada en un bloque separado sin nada a los lados.

A fin de cuentas sólo difieren por un poco de estilo; usa ambas y decide cual te gusta o sirve más.

Fluir texto alrededor de una imagen en Gutenberg

Aquí viene otra de las tareas que muchos han comentado encontraron “extraña” en el editor Gutenberg. A mi me parece que es en extremo parecida a como se ha hecho desde siempre, e incluso creo que es más simple que antes. Veamos como se hace:

  1. Inserta un bloque de imagen.
  2. Ajusta la imagen con sus controles que tiene a los lados derecho y abajo.
  3. Con la imagen seleccionada, haz clic en el botón alineación a la izquierda.

Y eso es todo. Una vez que hagas clic sobre el bloque sin tipo que tiene debajo o bien hagas clic hasta llegar a la zona de escritura, verás que está a la derecha de tu imagen (si elegiste alineación a la izquierda).

Honestamente pude haberlo escrito todo en una línea, pero mejor así en puntos separados.

Migración a Gutenberg: determinando un flujo de trabajo óptimo

Escribir de corrido usando /

Para algunos tipos sencillos de publicaciones, escribir usando el atajo / puede ser la respuesta a usar Gutenberg con mucha facilidad; basta que presiones / al inicio de un bloque de párrafo vacío y empieces a teclear el nombre del bloque que quieras usar, bastará con una parte nada más. Recuerda el atajo Alt + F10 para llegar a la barra de heramientas más cercana. Ocasionalmente necesitarás usar el ratón para algunos tipos de bloques, pero esto se debe en parte a que la usabilidad de Gutenberg todavía no está al 100%, algo sobre lo que se está poniendo empeño y creo que estará listo en un futuro cercano.

Escribir usando Markdown

Una forma de usar aún menos el ratón es usar el atajo / y añadir formato Markdown; aquellos que no sepan que es, les comento que Markdown es un sencillo formato basado en texto en el que usando algunos caracteres especiales podemos indicar que formato queremos aplicar. Veamos como usar Markdown de manera muy breve:

Un brevísimo tutorial de Markdown

Mini-tutorial de Markdown

EscribePara aplicar
#Subtítulo 1
##Subtítulo 2 (cada # es un nivel, llega hasta el seis)
1Lista numerada
-Lista desordenada
CCita
--Separador

Como puedes ver, es bastante sencillo usarlo en el editor Gutenberg. ¡Haz una prueba! en un párrafo sin contenido teclea ## y verás como se transforma en un bloque de encabezado nivel 2. Aclaro que Markdown es más de lo que aquí se muestra, recomiendo experimentar para que que puedas darte una idea de que tanto implementa Gutenberg. No olvides apoyarte en el atajo / para darle más versatilidad a tu escritura. Igual vale la pena que recuerdes el atajo Alt + F10 para llegar a la barra de heramientas más cercana.

Escribir en bloque Clásico y Convertir a bloques

Muestra como convertir a Bloques

Hay un bloque que quizás pueda ayudarte más que nada a migrar al editor Gutenberg, y ese es el bloque clásico; este te permite tener un editor TinyMCE que conoces, pero en forma de bloque. Dentro puedes escribir justo como lo hacías, aunque ten en cuenta que no es exactamente un editor TinyMCE 1:1, pues tiene algunas cositas que no están, aunque debo decir poco usadas. Una vez que termines de usar el bloque Clásico, puedes abrir Más opciones del bloque y hacer clic en “Convertir a bloques” para que convierta ese bloque Clásico en muchos bloques del tipo de cada elemento.

Escribir en herramienta externa y pegar en Gutenberg

Finalmente, puedes seguir usando un editor externo, cuidando mantener el formato dentro de las capacidades de WordPress (es decir, formato básico, encabezados, etc), y pegarlo cuando termines en un post vacío; quizás te sorprendas, pues Gutenberg hace un muy buen trabajo pegando el contenido y creando todos los bloques correspondientes.

Configuración sugerida para nuevos usuarios Gutenberg

Esta es la que creo que puede ser una buena configuración tanto del ambiente como en el uso de Gutenberg para aquellos que quieren usarlo por primera vez.

  • Habilitar el Modo de enfoque.
  • Habilitar la Barra de herramientas unificada.
  • Escribir en una combinación de uso de atajo / combinado con Markdown

Ciertamente aprender Markdown conlleva ajustarse a una curva de aprendizaje, pero es mínima, y aprenderse los elementos básicos de formato no toma más de 5 minutos.

Anexos

Habilita soporte para modo ancho

Para que puedas usar los nuevos formatos anchos de Gutenberg, tu tema debe de tener soporte para estos; una forma sencilla de habilitarlo es añadir lo siguiente a tu archivo functions.php:

add_theme_support( 'align-wide' );

Habilita responsividad en bloques incrustados

add_theme_support( 'responsive-embeds' );

Plugins de colecciones de bloques recomendados para Gutenberg

¿Así que quieres más bloques para Gutenberg? estas son algunas de las librerías disponibles en el repositorio:

  • Advanced Gutenberg 4.5 out of 5 stars (4,5 / 5): Esta colección tiene mucho de bueno: muchos bloques son variaciones mejoradas de los bloques de Gutenberg, pero a decir verdad son mejoras que debería tener Gutenberg a estas alturas. Muy buena colección. En contra tiene que la configuración no es muy intuitiva que digamos.
  • Atomic Blocks 3.5 out of 5 stars (3,5 / 5): Los bloques son bastante simples y varios de ellos pueden reemplazarse por Bloques Reutilizables. Nada muy útil en realidad.
  • CoBlocks 4.5 out of 5 stars (4,5 / 5):  en su versión actual CoBlocks ha mejorado mucho desde su inicio, y hoy en día es de las colecciones de bloques más sólidas que hay.
  • GhostKit 5 out of 5 stars (5 / 5): Excelentes bloques, bien realizados y lo mejor de todo, implementa un modelo de caja CSS a través de todos los bloques. ¡Altamente recomendado!
  • Kadence Blocks 3 out of 5 stars (3 / 5): Incluye pocos bloques, pero muy bien realizados. Aún así, no es muy impresionante que digamos.
  • Stackable 2.5 out of 5 stars (2,5 / 5): Muchos bloques, pero muy sencillos y honestamente poco útiles.
  • Elementor blocks for Gutenberg 5 out of 5 stars (5 / 5): ok, Elementor está haciendo algo de trampa aquí, pero…funciona de maravilla. Cuando instalas este plugin (Elementor debe estar instalado previamente), añade un sólo bloque a la colección; a través de este puedes tener acceso a todo lo que Elementor ofrece. Añade un template y voilá, el bloque muestra un preview del mismo. Si no te molesta esto, es una potente colección de bloques para Gutenberg.

Palabras finales

Como con todo tutorial tan largo como este, cualquier notificación de error siempre será bienvenida. Espero les sirva, me encantaría saber sus comentarios al respecto de este tutorial de Gutenberg.

5 comentarios en “Tutorial editor Gutenberg/WordPress 5.x: qué es, como usarlo, y como migrar”

  1. Una breve nota: el bloque de HTML, sí permite transformaciones.

    Se encuentra la opción dentro de los 3 puntitos en los que estamos acostumbrados a localizar las opciones comunes para todos los bloques. En este caso incorpora aquí la opción de transformar en varios bloques diferentes, frente a la opción general de presentarlo en el primer recuadro del menú flotante.

    Responder
    • ¡Muchas gracias por la nota!

      No lo consideré como transformación como tal, debido a que es más un proceso aislado y especializado que aplica a ciertos bloques, como por ejemplo el bloque Clásico que también permite convertirlo a bloques.

      ¡Gracias de nuevo!

      Responder

Deja un comentario

Do NOT follow this link or you will be banned from the site!

Centro de preferencias de privacidad

      Necessary

      Advertising

      Analytics

      Other

      A %d blogueros les gusta esto: