Tutorial de Gutenberg: Cómo usar el nuevo editor de bloques de WordPress

Nombrado en honor al inventor de la imprenta, Johannes Gutenberg, el nuevo editor de bloques de WordPress Gutenberg debutó en el lanzamiento de WordPress 5.0 como el editor predeterminado para WordPress.

La misión es simple, crear una nueva experiencia de escritura y edición con WordPress.

Con bloques, el editor de Gutenberg brinda una experiencia única en la creación de contenido rico en medios con WordPress.

Aporta mucha funcionalidad de forma nativa al editor que con el editor clásico necesitaría complementos para realizar tareas.

En un momento te mostraré cómo usar el editor de bloques de Gutenberg.

Trabajando con muchos clientes que usan WordPress, no muchos estaban emocionados por el cambio difícil en su experiencia de edición.

Eso probablemente explica por qué millones de usuarios de WordPress instalaron el editor clásico una vez que se les quitó la elección con el lanzamiento de Gutenberg.

Una parte de la justificación podría ser la compatibilidad con temas más antiguos, otra parte simplemente la indignación del usuario o la falta de conocimiento sobre cómo usar el editor de bloques de Gutenberg.

Espero que después de leer este artículo, más adelante, se sienta cómodo con el editor de bloques.

Paso a paso: ¿Cómo usar el editor de bloques de Gutenberg?

Comienza con la creación de una página o una publicación. Algo con lo que ya estás familiarizado.

Cuando agrega una nueva página o publicación, lo primero que debe notar es esta barra de herramientas.

A la izquierda, tenemos la barra de herramientas + Agregar bloques. Este es uno de los lugares donde puede agregar bloques a su contenido.

También puede agregar un bloque haciendo clic debajo del último bloque y luego haga clic en el ícono + que aparece.

Alternativamente, desplácese entre los bloques, aparece el icono Agregar bloques, haga clic en él para agregar el bloque.

A continuación, están los botones Deshacer y Rehacer.

El siguiente ícono en la barra de herramientas superior muestra la estructura de su contenido.

El siguiente es el bloque de navegación

Si su contenido crece con muchos bloques, puede navegar a los bloques desde aquí. Genial, ¿no?

A la derecha,

Estos son bastante sencillos, guardar borrador, obtener una vista previa de su publicación (se abre en una nueva pestaña) y publicar.

El siguiente icono alterna la visualización de la configuración. Muestra u oculta los paneles de la derecha.

Si la configuración está visible, haga clic en ella para ocultarla y obtener un editor más amplio y sin distracciones. Vuelva a hacer clic para mostrar la configuración.

Al final de la barra de herramientas hay tres puntos verticales. Eso le permite ocultar o ver más herramientas y opciones.

Entonces, ¿qué puedes hacer exactamente con más herramientas y opciones?

• Tiene la barra de herramientas: acceda a todas las herramientas de bloques y documentos en un solo lugar.
• Modo de foco. Le permite concentrarse en un bloque a la vez
• Modo de pantalla completa. Explota tu editor para una experiencia de edición total sin distracciones.
• Alterne entre el editor visual, lo que ve ahora, y el editor de código, si necesita escribir código que los bloques de código y HTML no pueden manejar.
• Administrar bloques reutilizables
• Atajos de teclado y
• Copie todo el contenido en el editor.

Los bloques de Gutenberg

Hasta ahora has seguido viendo bloques, pero ¿qué son?

Tomaremos el camino largo para ver cómo funcionan y, con suerte, tendrá sentido y usted podrá darle una definición basada en su comprensión.

Hay seis categorías de bloques en Gutenberg cada uno, incluidos los más utilizados, los bloques comunes, el formato, los elementos de diseño, los widgets y las incrustaciones.

Mientras creaba contenido, con el editor clásico, todo lo que tenía que hacer era ingresar contenido en las áreas de texto.

Con el nuevo editor, utilizará bloques que se han organizado según el tipo de contenido. Para agregar contenido de texto, se necesita el bloque de texto/párrafo, Imágenes – Bloque de imágenes, Html, bloque HTML.

Esto es algo diferente al editor clásico donde insertabas todo tu contenido en un solo lugar.

Uso de las herramientas de bloque

Cada bloque tiene sus herramientas que puedes usar al crear y editar contenido.

A diferencia del editor clásico que tenía todas las herramientas visibles.

Para acceder a estas herramientas, haga clic en el contenido del bloque. Usaremos el párrafo/contenido ya que es uno que usará con frecuencia.

Cuando hace clic en el texto o el contenido de un bloque, se abre una caja de herramientas sobre el contenido.

Las herramientas que verá son exclusivas del bloque que está utilizando, así que no espere ver las mismas herramientas cuando haga clic en un bloque de medios.

El bloque de párrafo, por ejemplo, tiene herramientas de formato de texto: alineación a la izquierda, alineación al centro, alineación a la derecha, negrita, cursiva, insertar un hipervínculo y texto tachado.

Además de más herramientas de formato que agregan otros complementos que instala para ampliar la funcionalidad de bloques predeterminada.

Las dos funciones en el kit de herramientas de bloques que atraviesan los bloques son el " Bloque de transformación " al principio, y luego al final, debería ver el icono " Más opciones" (tres puntos verticales) que contiene más configuraciones para el bloque. usted está trabajando con

Transformar un bloque de Gutenberg

Para transformar un bloque, haga clic en el bloque como ha visto en el bloque de párrafo anterior.

Suponiendo que queremos transformar nuestro primer párrafo en una cita, haga clic en él, luego haga clic en Transformar en icono y luego elija el nuevo bloque en el que desea transformarlo.

La transformación del bloque de párrafo para citar ahora se ve así.

El botón Más opciones

El otro botón que tiene el kit de herramientas de bloques es el ícono " Más opciones ": los tres puntos verticales. Haga clic en cualquier bloque para verlo.

Con Más opciones, puede hacer más con su bloque como; Oculte la configuración del bloque, duplique el bloque, inserte el bloque antes o después de los bloques anteriores y anteriores, edite el bloque como HTML, agregue el bloque a los bloques reutilizables y, finalmente, elimine o elimine el bloque.

Cambiar el enlace permanente de una publicación o página con el editor de bloques de Gutenberg

Haz clic en el título de la publicación o página. Encima de él, se mostrará el enlace.

Haga clic en el botón Editar, luego modifique su enlace y luego haga clic en Guardar

Configuración de documentos y bloques en Gutenberg Block Editor

A la derecha de cada publicación o página de Gutenberg hay un panel con dos pestañas.

El Panel del documento tiene la configuración de todo el documento para la página o publicación, incluido el estado y la visibilidad, los autores de la publicación, las etiquetas, la imagen destacada, las discusiones, para permitir comentarios, categorías y configuraciones relacionadas con complementos para publicaciones o páginas.

El panel de bloques contiene una configuración específica del bloque.

Haga clic en el bloque en el área de contenido, luego, en el panel derecho, haga clic en el panel Bloque.

Conclusión

Hemos cubierto un puñado de información sobre el editor de Gutenberg Blocks.

Espero que con ese conocimiento sea menos intimidante usarlo para la creación y publicación de contenido.

¿Estás usando el nuevo editor de bloques? ¿Cuál es tu experiencia con él?

Es posible que también desee convertir las publicaciones existentes de WordPress en bloques de Gutenberg.