3.734 personas ya conocen estas 15 características de Gutenberg, ¿quieres unirte?

En este post se revisan 15 características de Gutenberg, como también se conoce al editor de bloques de WordPress. Esta es una magnífica manera, también, de acercarse al mundo de los bloques de WordPress.

En este post se revisan 15 características de Gutenberg, como también se conoce al editor de bloques de WordPress. Esta es una magnífica manera, también, de acercarse al mundo de los bloques de WordPress.

Para alguna de estas características, se necesita tener instalado el plugin Gutenberg, ya que pertenecen a lo que se denomina la Full Site Edition (FSE, por sus siglas en inglés).

Si necesitas una introducción a la FSE, te invito a leer nuestra guía: La edición del sitio completo de WordPress (FSE) y cómo dar los primeros pasos (incluye videotutorial)

[Post inspirado en el que Nick Schäferhoff ha publicado con características de Gutenberg en Torque] ¡Gracias por la idea, Nick! 😉

1. Atajo para insertar bloques

gutenberg-1-1024x544 3.734 personas ya conocen estas 15 características de Gutenberg, ¿quieres unirte?

El insertador es el mecanismo más conocido para añadir bloques pero existe un atajo que te ahorrará bastante tiempo. Comenzamos esta serie de características de Gutenberg, escribiendo la barra inclinada “/” seguida del nombre del bloque, en un párrafo vacío. Por ejemplo, para añadir el bloque de imagen, escribe “/imagen”. No hace falta que escribas la palabra completa. Irán apareciendo bloques en la ventana de resultados, a medida que vas escribiéndola.

2. Modos Spotlight y Fullscreen

gutenberg-2-1024x563 3.734 personas ya conocen estas 15 características de Gutenberg, ¿quieres unirte?

Esto lo tienes en los tres puntos suspensivos verticales. El Spotlight es el modo de enfoque y sirve para que te centres en el bloque en el que estás trabajando (es el que se resalta, el resto se desenfoca). Mientras que Fullscreen es el modo de pantalla completa, donde desaparece todo lo que no es el editor en concreto.

3. Esquema del documento

gutenberg-3-1024x565 3.734 personas ya conocen estas 15 características de Gutenberg, ¿quieres unirte?

Parece intrascendente pero puede avisarte de errores cometidos en la estructura de encabezados. Por ejemplo, si tuvieses un H3 antes de un H2.

4. Bloques reutilizables

gutenberg-4-1-1024x554 3.734 personas ya conocen estas 15 características de Gutenberg, ¿quieres unirte?
Crear un bloque reutilizable es muy sencillo, seleccionando el o los bloques y haciendo clic en la opción correspondiente.

En la era post-Gutenberg y pre-FSE, no solo son una fantástica manera de ahorrarte trabajo sino también el atajo directo hacia la FSE sin haberse instaurado la FSE 😉 Con el plugin Reusable Blocks Extended es posible llevar bloques reutilizables (y, por lo tanto, cualquier diseño) a las áreas de widgets establecidas en el theme. Si te fijas, eso es lo que nos permite diseñar casi completamente con bloques de Gutenberg un sitio web de WordPress .

gutenberg-4-2-1024x546 3.734 personas ya conocen estas 15 características de Gutenberg, ¿quieres unirte?

Una vez que hayas guardado el bloque reutilizable, puedes insertarlo como cualquier bloque normal o patrón de bloques desde el insertador. En el caso de los widgets, simplemente arrastra el widget “Reusable Blocks” al área correspondiente y selecciona el bloque que desees añadir en el desplegable de la configuración del widget.

5. Vistas previas de la transformación de bloques

gutenberg-7-1024x558 3.734 personas ya conocen estas 15 características de Gutenberg, ¿quieres unirte?

Con la transformación de bloques podrás convertir contenido que ya esté en el editor a otros formatos. Por ejemplo, un párrafo en una cita. Lo bueno, es que antes de la transformación podrás ver una vista previa del resultado.

6. Themes orientados a la FSE

gutenberg-12-1-1024x546 3.734 personas ya conocen estas 15 características de Gutenberg, ¿quieres unirte?

Los themes orientados a la FSE poseen una estructura diferente a los themes clásicos de WordPress. Por favor, lee La edición del sitio completo de WordPress (FSE) y cómo dar los primeros pasos para ver las diferencias. Por ejemplo, nuestro theme Blogpocket Twenty es un theme orientado a la FSE muy simple y orientado a implementar una landing page o sitio web de una sola página. Otro theme más completo con el que puedes experimentar la FSE es TT1 Blocks.

gutenberg-12-2-1024x545 3.734 personas ya conocen estas 15 características de Gutenberg, ¿quieres unirte?

Solo con el plugin Gutenberg activado no accederás a la función beta de Edición del sitio. Tendrás las funciones avanzadas que van por delante de aquellas que lleva el core de WordPress en un determinado momento (5.7 en el momento de publicar este artículo) pero solo si activas un theme orientado a la FSE tendrás la función Edición del Sitio (beta) en el Administrador de WordPress.

7. Estilos globales

Para probar esta característica tendrás que instalar el plugin Gutenberg y activar un theme compatible con la FSE (revisa el punto anterior).

Una vez con un theme orientado a la FSE instalado, haz clic en la función Edición del Sitio y accede a cualquiera de las partes de la plantilla. Después haz clic en el icono “Aa” (Estilos globales) para acceder a la personalización de estilos generales (raís) o por tipo de bloque.

gutenberg-8-2-1024x553 3.734 personas ya conocen estas 15 características de Gutenberg, ¿quieres unirte?

8. Los widgets funcionan como bloques

gutenberg-15-1024x556 3.734 personas ya conocen estas 15 características de Gutenberg, ¿quieres unirte?

Para ver esta característica, no es necesario que tengas un theme compatible con al FSE. Solo debes tener activado el plugin Gutenberg. Si revisas el punto 4, te darás cuenta de que con esta característica podemos prescindir de una de las funciones extraordinarias del plugin Reusable Blocks Extended con el fin de llevar diseños a las áreas de widgets. Los widgets son, en realidad, “bloques”, así que se pueden arrastrar a las áreas de widgets preparadas en el theme.

9. Bloque de consultas

gutenberg-19-1024x547 3.734 personas ya conocen estas 15 características de Gutenberg, ¿quieres unirte?

Con la FSE, todo serán bloques 😉 Eso es fantástico porque, por ejemplo, podremos añadir un bloque de query si queremos tener una lista de entradas o páginas. ¡Y todo ello sin código! Ya puedes probarlo con el plugin Gutenberg activado.

10. Patrones de bloques

gutenberg-10-1024x551 3.734 personas ya conocen estas 15 características de Gutenberg, ¿quieres unirte?

No confundas los bloques reutilizables con los patrones de bloques. El concepto es muy parecido pero son totalmente diferentes. Si lo necesitas, tenemos este Curso práctico de patrones de bloques (para el usuario final).

Los patrones de bloques vienen preestablecidos con el theme (aunque tú puedes crear tus propios patrones de bloques sin código con el plugin Reusable Blocks Extended). Por ejemplo, nuestros themes Blogpocket Nineteen y Blogpocket Sustie llevan 13 patrones de bloques listos para usar.

11. Diseños de botones verticales

gutenberg-11-1024x544 3.734 personas ya conocen estas 15 características de Gutenberg, ¿quieres unirte?

Algunos bloques, como el de Botones poseen variaciones; es decir, se puede transformar a variaciones preestablecidas. Por ejemplo, puedes diseñar los botones en fila o en columna.

12. Bloque de navegación

gutenberg-13-1024x545 3.734 personas ya conocen estas 15 características de Gutenberg, ¿quieres unirte?

La FSE permite editar el diseño de la cabecera, algo que no se puede hacer en la era post-Gutenberg y pre-FSE. Por ejemplo, podemos diseñar el menú de navegación con el correspondiente bloque.

13. Variaciones de bloque

gutenberg-14-1-1024x547 3.734 personas ya conocen estas 15 características de Gutenberg, ¿quieres unirte?

Las variaciones permite personalizar determinados bloques de acuerdo a la selección previa que realizemos. Por ejemplo, en el bloque de columnas podemos seleccionar una variación para empezar con diversos formatos de columnas.

14. Agregar medios mediante copiar y pegar

gutenberg-9-1024x551 3.734 personas ya conocen estas 15 características de Gutenberg, ¿quieres unirte?

Esta característica es muy productiva porque sirve para insertar directamente recursos como vídeos, tweets, etc. a partir de su enlace. En la imagen, simplemente se ha pegado la URL, para compartir, del vídeo correspondiente en un párrafo vacío.

15. Convertir varios bloques en columnas 

gutenberg-17-1024x556 3.734 personas ya conocen estas 15 características de Gutenberg, ¿quieres unirte?

Como vimos en el apartado 5, la función de transformación permite que podamos convertir el tipo de un bloque en otro. En este caso, y para finalizar este conjunto de características de Gutenberg, es muy interesante poder escribir párrafos uno debajo de otro y luego transformarlos a columnas.

Conclusiones

Hemos visto una serie de características de Gutenberg que pueden servirte como inmersión rápida en el editor de bloques de WordPress.

Consulta nuestro canal de YouTube y otros posts del blog porque hay mucha información acerca de Gutenberg.

Dame feedback, por favor 🙂

¿Estás buscando hosting?

Aloja tu web en SiteGround

BIG-SHOES-PODCAST 3.734 personas ya conocen estas 15 características de Gutenberg, ¿quieres unirte?

Deja un comentario

Información básica sobre protección de datos Ver más

  • Responsable Antonio Cambronero.
  • Finalidad  Moderar los comentarios.
  • Legitimación Tu consentimiento.
  • Destinatarios  SiteGround.
  • Derechos Acceder, rectificar y suprimir los datos.
  • Información Adicional Puedes consultar la información detallada en la Política de Privacidad.

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Ir al contenido