Tutorial editor Gutenberg/WordPress 5.0: qué es, como usarlo, y como transicionar

Por en

Tabla de contenido

Cuando sea que WordPress 5.0 salga tendrá un cambio importante en su arquitectura: el nuevo editor de contenido Gutenberg, que por ahora está disponible en forma de plugin 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 4.6.1 ejecutándose en WordPress 4.9.8 en un entorno de pruebas local. Como referencia se está usando también WordPress 5.0 RC3 para pruebas adicionales. Esta publicación fue actualizada por última vez el 5 de diciembre de 2018, y me atrevo a decir que es el único tutorial o manual de Gutenberg en español actualizado a las últimas características. Siempre está al día pues.

¿Qué es el nuevo editor Gutenberg?

Gutenberg será el nuevo editor de contenido a partir de WordPress 5.0 (ese es el plan al menos). A diferencia del editor que has usado hasta el día de hoy (TinyMCE), en el que el contenido es un sólo bloque con 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. Vale la pena aclarar que Gutenberg por ahora es un plugin, pero cuando salga WordPress 5.0 estará integrado como parte del core; también vale la pena mencionar que esta es apenas la primera fase de Gutenberg, pues se espera que tenga tres fases en las que va a llegar más allá del editor.

¿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, 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, pues aún tiene problemillas aquí y allá. 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. La otra manera de instalar Gutenberg es si  tienes WordPress 4.9.8, seguramente viste una pantalla de bienvenida que te ofrece instalar Gutenberg y otro plugin más llamado Classic Editor. Esta es la invitación a instalar Gutenberg: Muestra la invitación a instalar Gutenberg Desde esta pantalla puedes hacer clic en el botón Instala Gutenberg para instalar el plugin.

Estructura visual del editor Gutenberg

Primero que nada, hay que identificar correctamente todos los elementos de interfaz del nuevo editor Gutenberg: Muestra la pantalla principal de Gutenberg
  1. Insertar bloque: añade un bloque a tu documento.
  2. Deshacer/Rehacer
  3. Estructura del contenido: muestra la estructura del documento actual, así como contadores de palabras, encabezados, párrafos y bloques.
  4. Navegador de bloques: permite mostrar bloques por niveles, muestra tanto bloques sencillos como bloques anidados.
  5. Vista previa: muestra la vista previa de la publicación.
  6. Actualizar/publicar: actualizar o publicar cambios.
  7. Ajustes: muestra el panel de ajustes, tanto del documento (global), así como del bloque seleccionado actualmente.
  8. Más opciones: algunas opciones sueltas.
  9. Ajustes de documento: todos los metaboxes que usabas al editar un artículo antes están aquí, pero a manera de secciones plegables.
  10. Ajustes de bloque actual: tanto si tiene como si no, aquí se muestran los ajustes del bloque actualmente seleccionado.

Opciones de visualización de secciones en pantalla

Haciendo clic en el menú Más > Opciones puedes abrir una pantalla modal donde puedes elegir que secciones y metaboxes ver y cuales no: Muestra el menú emergente de opciones de Gutenberg   En pocas palabras, casilla con marca significa que esa sección se verá en pantalla.

Opciones de modos de escritura en Gutenberg

El editor 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 Mas.
  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

Si lo deseas puedes cambiar del modo normal de escritura a un modo de escritura a pantalla completa, por si te gustan los modos sin distracciones. Para activar el modo a pantalla completa, sigue los siguientes pasos:
  1. Haz clic en Más.
  2. Haz clic en Modo a pantalla completa.

Estructura visual de un bloque de Gutenberg

Cada bloque también tiene un set de botones y menús que puedes usar: Muestra la estructura visual de un bloque de Gutenberg
  1. Transformar/estilo: permite transformar el bloque seleccionado en otro de tipo compatible, o bien si está disponible, cambiar el estilo del bloque.
  2. Opciones del bloque: estas son algunas acciones que este tipo de bloque permite.
  3. Opciones comunes para bloques: opciones que se repiten en casi todos los bloques.
  4. Más opciones: aquí encontrarás:
    • Ocultar ajustes del bloque
    • Insertar antes
    • Insertar después
    • Editar como HTML
    • Añadir a los bloques reutilizables
    • Quitar bloque
  5. Mover bloque hacia arriba.
  6. Arrastrar bloque hacia nueva posición.
  7. Mover bloque hacia abajo.

La barra de herramientas unificada de Gutenberg

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 unificada de Gutenberg Para lograr este modo, hazlo siguiente:
  1. Haz clic en el botón Más (el botón con los tres puntos arriba a la derecha).
  2. 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. Pero este modo tiene una consecuencia que le gustará a muchos: elimina los bordes de cada bloque, lo que quita lo que para algunos son límites visuales molestos. El modo de Barra de herramientas unificada, aunado al Modo de enfoque, te pueden dar un sentido de editor más tradicional.

Nuevos 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 las nuevas alineaciones de 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.

Bloques disponibles en Gutenberg y sus posibles transformaciones

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.

Elementos integrados

Esta sección muestra sólo un bloque por ahora, el bloque de Imagen integrada, que no tiene una utilidad muy bien definida, por lo cual no será cubierto.

Bloques comunes

Bloque Párrafo
Muestra las estructura del bloque Párrafo de Gutenberg 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. Transformaciones del bloque párrafo: encabezado, lista, cita, preformateado, verso.
Bloque Encabezado
Muestra la estructura visual del bloque Encabezado en Gutenberg 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. Transformaciones del bloque encabezado: párrafo, cita o imagen de fondo.
Bloque Lista
Muestra la estructura visual del bloque Lista en Gutenberg El bloque Lista no necesita mucha explicación: permite incrustar listas ordenadas y desordenadas, y controlar la indentación para hacer listas multinivel. Transformaciones del bloque lista: párrafo, cita.
Bloque 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 selector de imagen de Gutenberg Ya de ahí puedes elegir subir una imagen o bien elegir una de tu biblioteca de medios o de una URL, y entonces ya verás la imagen como tal. Verás que al insertarla aparecen unos puntos a los lados y abajo, esos son usados para que cambies el tamaño de la imagen. También verás un espacio debajo de la imagen para insertar una leyenda de la misma. Muestra el bloque de imagen
  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 (en un momento más veremos como). 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. Con estos controles puedes modificar el ancho y el alto de la imagen desplazándolos hacia la derecha e izquierda (el círculo de la derecha), y hacia arriba y abajo (el círculo de abajo de la imagen).
  3. Haciendo clic en este botón puedes volver a abrir la interfaz de selección de imagen, por si quieres elegir otra o bien documentarla mejor.
  4. Aquí estableces el texto “alt”, es decir, el que se usa para cuestiones de accesibilidad y muy valorado por los navegadores.
  5. Puedes establecer a que tamaño pregenerado mostrar la imagen, recuerda que WordPress genera varios tamaños de cada imagen subida.
  6. Si requieres mostrar tu imagen en ciertas dimensiones, aquí puedes especificar el ancho y el alto en pixeles.
  7. También puedes indicar a que escala mostrar tu imagen.
  8. Por último, puedes elegir el destino del enlace de la imagen, o bien ninguno. Vale la pena mencionar que al elegir un valor distinto a “Ninguna”, Gutenberg ofrece campos adicionales que son la URL de destino, si se desea abrir este enlace en otra ventana, y por último dos campos para la clase CSS del enlace y para la relación del enlace, que son básicamente nombres bonitos para los atributos link class y link rel, este último para indicar a buscadores que no se desea seguir el enlace (nofollow).
Transformaciones posibles: galería, imagen de fondo, archivo.
Bloque Cita
Muestra las opciones del bloque de Cita El bloque Cita hace lo que ya conoces; citar un texto y mostrándolo con un estilo especial. Sin embargo, en 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. Transformaciones posibles: de estilo en normal y grande, y de función en párrafo, encabezado o lista.
Bloque Video
Muestra la estructura del bloque Vídeo Permite incrustar un vídeo desde una URL o bien desde tu biblioteca de medios. Transformaciones de bloque Vídeo: archivo.
Bloque Galería
Muestra la estructura del bloque Vídeo 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. Los ajustes de galería permiten cambiar el número de columnas, si las imágenes se recortarán, y el tipo de enlace de cada imagen. Transformaciones de bloque Galería: imagen (genera una imagen por cada miniatura).
Bloque Audio
Muestra la estructura del bloque Audio Permite incrustar un audio ya sea desde tu biblioteca de medios o bien a través de una URL. Transformaciones de bloque Audio: archivo.
Bloque Cubrir
Muestra la estructura del bloque Audio El bloque Cubrir se usa para crear un bloque con título llamativo y la imagen o vídeo que tu elijas de fondo. Este igual necesita de soporte del tema para poder usar los anchos amplio y completo. Las opciones del bloque Cubierta son, en orden, alineación a la izquierda, centrada o derecha, ancho amplio, ancho completo, alineación de texto izquierda, centrada o derecha, y por último, edición. Por default, si incrustamos una Cubierta luce así: Muestra como luce por default un bloque de Cubierta Con las opciones en (1) puedes aplicar cierto formato al título, incluso un enlace si así lo deseas. Con habilitar el control en (2), puedes simular un desplazamiento estilo Parallax, aunque la implementación de Gutenberg es un tanto más tosca. Haciendo clic en (3) puedes aplicar una pantalla de color a tu imagen, y por último con (4) controlas la opacidad de la imagen de cubierta. Otros controles interesantes son los dos anchos nuevos, es decir, el amplio y el completo. El ancho amplio luce así: Muestra un bloque Cubierta usando ancho amplio Y el ancho completo luce así: Muestra un bloque Cubierta usando ancho completo Transformaciones del bloque Cubierta: encabezado, imagen.
Bloque Archivo
Muestra la estructura del bloque Archivo   Permite insertar un enlace a un archivo de tu biblioteca, con botón de descarga incluido, mismo que puedes indicar si quieres incluir o no. Transformaciones: el bloque Archivo permite transformar su contenido a su tipo de origen; es decir, si incrustaste un audio, te permitirá transformarlo en audio.

Formatos

Bloque Tabla
El bloque Tabla es uno de los que aún no está terminado, pero que ofrece cierta funcionalidad básica que lo hace usable para tareas simples. Cuando se inserta luce así: Muestra la estructura del bloque Tabla Como puedes ver, es un editor te pregunta de cuantas columnas y renglones quieres tu tabla inicial, una vez que lo hagas ya verás tu tabla dibujada: Muestra el bloque Tabla y sus opciones Las opciones de tabla son bastante sencillas: 3 alineaciones (izquierda, centro, derecha) para la tabla, no para cada celda; dos anchos, amplio y completo, que funcionan igual en todos los bloques con soporte. Luego viene el botón Editar tabla, que permiten 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. El bloque tabla ofrece dos ajustes, que son (2) el estilo de la tabla (con bordes o renglones alternativos de color), y (3) el indicador de que todas las columnas tengan el ancho fijo, contrario al valor por default, en el cual las columnas van ajustando su ancho al contenido. Transformaciones: estilos normal e interlineado, y de función ninguno.
Bloque Preformateado
Muestra el bloque preformateado de Gutenberg El bloque Preformateado incrusta un bloque con contenido en fuente monoespaciada, con la posibilidad de usar negritas e itálicas. Transformaciones: párrafo.
Bloque HTML Personalizado
Muestra la apariencia del 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, ambos con botones ubicados sobre el bloque. Transformaciones: ninguna.
Bloque Clásico
Muestra El bloque Clásico de Gutenberg 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. Transformaciones: ninguna.
Bloque Código
Muestra el bloque de Código de Gutenberg 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. Transformaciones: preformateado.
Bloque Cita
Muestra la estructura del bloque Cita de Gutenberg Otro bloque de cita, aunque este tiene un estilo visual distinto al bloque Cita que está en Bloques comunes, y puedes ajustar los colores si así lo deseas.
Bloque Verso
Muestra el bloque Verso de Gutenberg 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á.

Elementos de diseño

Bloque Columnas
Muestra el bloque Columnas de Gutenberg El bloque Columnas permite cambiar el ancho de las columnas (amplio y completo), y la cantidad de éstas como ajuste. 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. Transformaciones: ninguna.
Bloque Espaciador
Muestra el bloque Espaciador de Gutenberg 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. Transformaciones: ninguna.
Bloque Botón
Muestra el bloque Botón con sus opciones Incrusta un botón que puede tener uno de tres estilos posibles. Se escribe directo en el botón la acción del mismo, y debajo puedes incluir una URL a la cual llegarás al hacer clic en el botón. Para usarlo basta con cambiar el texto del botón (2), indicar una URL a donde debe ir cuando se haga clic en el (3), y adicionalmente cambiar el estilo gráfico del botón (3) o bien los colores (5, 6).
Bloque Más
Muestra el bloque Más de Gutenberg 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.
Bloque Salto de página
Muestra el bloque Salto de página 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.
Bloque Separador
Muestra el bloque Separador de Gutenberg Una línea horizontal para separar visualmente contenido. El botón Transformar permite cambiar el estilo del Separador a uno de tres posibles.
Medios y texto
Opciones del bloque Medios y texto de Gutenberg 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 (2), y la otra (3) a contenido de texto o lo que gustes. Permite cambiar el color de fondo del bloque (4), determinar si el contenido del bloque aparece apilado (4) en móviles (responsividad), y también permite usar un color de fondo para el bloque.  Las opciones de bloque (1) permiten usar ancho amplio y completo, y también permiten poner el medio a la izquierda o derecha. Nota: el bloque Medios y Texto no tiene edición HTML habilitada. Transformaciones posibles: Medios y texto puede transformarse en imagen o vídeo.

Widgets

Bloque Shortcode
Muestra el bloque Shortcode de Gutenberg 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.
Bloque Archivo
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 son Mostrar como desplegable y Mostrar contador de entradas.
Bloque Categorías
Muestra el bloque Categorías en Gutenberg Inserta el widget de Categorías, y permite los mismos ajustes que son Mostrar como desplegable, Mostrar jerarquía, y Mostrar contador de entradas.
Bloque Últimos Comentarios
Muestra el bloque Últimos comentarios de Gutenberg Inserta el widget de Últimos comentarios; puedes ajustar Mostrar avatar, Mostrar fecha, Mostrar extracto, y e indicar cuantos comentarios quieres desplegar.
Bloque Últimas Entradas
Muestra el bloque de Últimas entradas Inserta el widget de Últimas entradas, permitiendo ajustar el ordenamiento, la categoría y el número de elementos a mostrar.

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, de manera general para casi todos los bloques, establecer una clase CSS de modo que puedas aplicar tus propios estilos a ese bloque en particular. Algunos, como por ejemplo el bloque Encabezado, permiten crear un anclaje, de modo que te puedas referir a esa parte específica del documento desde otro origen.

Atajos de teclado disponibles en 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 ayuda.ShiftAltHShift +  + H
Guarda tus cambios.CtrlSS
Deshace tus últimos cambios.CtrlZZ
Rehace tu último deshacer.CtrlShiftZShiftZ
Muestra u oculta la barra lateral de ajustes.CtrlShift,Shift,
Abre el menú de navegación de bloques.ShiftAltOShift +  + O
Navega a la parte siguiente del editor.Ctrl``
Navega a la parte anterior del editor.CtrlShift`Shift`
Navega a la parte siguiente del editor (alternativa).ShiftAltNShift +  + N
Navega a la parte anterior del editor (alternativa).ShiftAltPShift +  + P
Navegar a la barra más cercanaAltF10F10
Cambia entre el editor visual y el editor de código.CtrlShiftAltMShift +  + M
 
Atajos de selección
AcciónAtajo (Win, Linux)Atajo (OS X)
Muestra la ayuda.Ctrl + A + A
Guarda tus cambios.ESCESC
 
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 negrita.Ctrl + B + B
Cambia el texto seleccionado a cursiva.Ctrl + I + I
Subraya el texto seleccionado.Ctrl + U + U
Convierte el texto seleccionado en un enlace.Ctrl + K + K
Elimina un enlace.Shift + Alt + SShift +  + S
Añade un tachado al texto seleccionado.Shift + 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 para Gutenberg.

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.

Tareas exclusivas de 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, 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, añade los siguientes bloques en pantalla: Como puedes ver, es un bloque de imagen (con alineación a la izquierda), y tres párrafos con el contenido que ves ahí, más unos enlaces. Nada del otro mundo. Ahora, selecciona los cuatro bloques que acabas de crear: Muestra bloques seleccionados Haz clic en el botón Más opciones; 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: Al hacer esto, observarás dos cosas; uno, el bloque recién creado tiene unas flechas en la esquina superior derecha, 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 > 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.
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.
Al hacer esto, tu navegador descargará un archivo con extensión .json y del mismo nombre de tu bloque.
Importar un bloque reutilizable como JSON en Gutenberg
  1. Ve a la vista de gestión de bloques reutilizables.
  2. Haz clic en Importar desde 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

Trabajar con columnas es muy sencillo en Gutenberg, a pesar de que no tiene las características completas (aún). Sin embargo, no deja de ser útil. Para trabajar con columnas, vamos a empezar insertando un bloque de Columnas, y vamos a ver como está estructurado. Cuando lo insertes, verás que por default se crea con dos columnas; cada columna se identifica porque se crean con la redacción de “Añade texto o teclea / para añadir contenido“; si haces clic dentro del bloque entonces verás que muestra un botón de + para insertar un bloque; si escribes, funciona como siempre: es decir, creará un bloque de Párrafo. Muestra el editor de columnas en su estado inicial Cada columna es en si un espacio donde puedes insertar más bloques, de modo que puedes crear estructuras visuales muy interesantes para darle realce a tu contenido. Cada columna a su vez tiene su botón de inserción de bloques, que se muestra al pasar por encima el ratón:

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.
  • Modo 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;
  • Modo ancho amplio: el bloque de Columas es ligeramente más ancho que el texto de tu publicación.
  • Modo ancho completo: el bloque de Columnas ocupa todo el ancho disponible.

Cómo añadir columnas al Bloque de Columnas

Sigue estos pasos:
  1. Elige un bloque de columnas insertado; recuerda que es el borde más externo, no el borde de la columna.
  2. Abre Ajustes de Bloque (presionar el engrane o bien las teclas Ctrl + Shift + ,) , selecciona la pestaña Bloque.
  3. Verás que se muestra un control donde puedes meter el número de columnas, y aquí ya es  a tu criterio, pueden ser 2 o 3 o las que quieras.
  4. Si usas varias columnas, recuerda cambiar el ancho del bloque de columnas (ancho amplio o ancho completo) o se te hará muy difícil el manejo de las mismas.

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

El bloque Tabla es el otro bloque del que se espera mucho, y al igual que el bloque Columnas, se encuentra en desarrollo, aunque ya ofrece cierta funcionalidad básica. 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. Por ahora, el bloque Tabla sólo ofrece un ajuste; si vas al panel Ajustes, verás que sólo hay un switch para indicar que las columnas sean todas del mismo ancho; por default, la tabla que implementa Gutenberg va cambiando el tamaño de las columnas de acuerdo al contenido de la misma, así que puedes acabar con una columna de ancho distinto a las demás. Si quieres evitar esto, habilita el ajuste Celdas de tabla de ancho fijo. ¿Qué más podemos hacer con el bloque Tabla? bueno no mucho, a decir verdad; vamos a analizar las opciones de la barra de herramientas para ver que nos ofrece:
  • Alineación: esta es la alineación de la tabla, no de cada celda; la alineación al centro es como ves la tabla por default, y ponerla a la izquierda o derecha la comprime hacia ese lado (dudo que sea el comportamiento final).
  • Editar tabla: este es un desplegable que muestra opciones de inserción y borrado de filas y columnas; las opciones son muy sencillas y se explican solas.
  • Formato: negritas, itálicas, enlace y tachado.
  • Submenú Más opciones: estándar para todos los bloques.
Y eso es todo lo que ofrece Gutenberg por el momento en lo relacionado a tablas. Repito, el equipo se encuentra trabajando en un bloque de tabla que será un trabuco, con operaciones entre celdas (unir, dividir), control de encabezados, bordes y mucho más. Pero por ahora, el bloque Tabla apenas y sirve para crear contenido tabulado simple.

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í: 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: ¿Qué está mal? Gutenberg te está indicando con ese H3 en fondo amarillo que te brincaste el nivel 2 de encabezados. Simple y efectivo.

El navegador de bloques Gutenberg

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 funcionamiento del Navegador de Bloques Como puedes ver, mostró un bloque Párrafo, un bloque Columnas y otro bloque Párrafo; sin embargo, si hacemos clic en alguna parte dentro de las columnas de abajo, al consultar el Navegador muestra esto: Muestra el funcionamiento del Navegador de Bloques con bloques anidados Ahora muestra los bloques contenidos dentro del bloque Columnas; y como informa correctamente, muestra el bloque, una columna con dos párrafos y otra columna con una imagen. De esta manera puedes editar cómodamente  bloques complejos que dificulten la selección de los componentes anidados dentro de éstos.

Transición a Gutenberg: tareas comunes en TinyMCE y su equivalente

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 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, e ir a la sección Permalink, 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.

Transició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

EscribePara aplicar
#Subtítulo 1
##Subtítulo 2 (cada # es un nivel, llega hasta el seis)
1.Lista numerada
Lista desordenada
>Cita
Separador
  Como puedes ver, es bastante sencillo usarlo. ¡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

Hay un bloque que quizás pueda ayudarte más que nada a transicionar a Gutenberg, y ese es el bloque clásico; este te permite tener un editor TinyMCE que conoces 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

Para añadir responsividad en bloques incrustados, hay que incluir soporte en tu tema para la característica responsive-embeds, lo cual puedes hacer en tu archivo functions.php:

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 / 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 (2,5 / 5): Los bloques son bastante simples y varios de ellos pueden reemplazarse por Bloques Reutilizables. Nada muy útil en realidad.
  • CoBlocks (2 / 5):  Mismo caso que Atomic Blocks, varios de los ofrecidos pueden ser recreados con Bloques Reutilizables nativos de Gutenberg. Es una tontería, pero me encantó el bloque de Gist de GitHub.
  • GhostKit (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 / 5): Incluye pocos bloques, pero muy bien realizados. Aún así, no es muy impresionante que digamos.
  • Stackable (2,5 / 5): Muchos bloques, pero muy sencillos y honestamente poco útiles.
  • Elementor blocks for Gutenberg (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.

Orlando es un ingeniero en sistemas de 43 años de edad, apasionado del desarrollo de software y con un cariño especial por WordPress. Le encantan los libros, la música, la fotografía, los cómics y es un AFOL. De último pero no menos, esposo y padre de dos trolls.

Deja un comentario

Centro de preferencias de privacidad

      Necessary

      Advertising

      Analytics

      Other

      A %d blogueros les gusta esto: