Está confirmado que el editor Gutenberg será el editor de artículos predeterminado de WordPress. Iai Pude probar este último y rápidamente me di cuenta de que muchos usuarios se perderán con este nuevo editor, de ahí el motivo de este tutorial. Así que juntos repasaremos los conceptos básicos del editor Gutenberg y cubriremos algunos puntos avanzados.

Antes de comenzar

Si no tiene la capacidad de instalar la versión 5.0 de WordPress (que aún está en desarrollo), ahora puede descargar Gutenberg y pruébelo en su versión de WordPress (estoy iniciando un entorno experimental de nuevo). Sin embargo, admito que me sorprendí un poco al mirar las calificaciones otorgadas a este nuevo editor, más de la mitad de mis usuarios dieron una calificación de 1/5.

Vista previa gutenberg rating wordpress.jpeg

No voy a detenerme en esto y probarlo para sentirlo.

Presentación de la interfaz

Para usar Gutenberg, debes escribir un artículo (obviamente), como lo ha hecho en el pasado, es decir, " Artículos> Agregar".

gutenberg presentation.jpeg

Lo que noté desde el principio es que el editor se ha centrado mucho en la ausencia de distracciones y ha aprovechado todo el ancho de la página.

versión anterior wordpress.jpeg

Incluso si tenemos que reconocer que hay demasiados márgenes en Gutenberg, creo que el fondo blanco es un color que causa menos distracción. Notarás que Gutenberg se parece mucho al editor de publicaciones de Calypso (WordPress.com).

calypso editor wordpress.jpeg

Ubicación de los elementos

Sección de respaldo

El diseño ha cambiado enormemente. El área para guardar elementos ahora se encuentra en la parte superior. Más bien, es una sección de acceso rápido al botón Guardar.

sección de respaldo gutenberg.jpeg

El botón con el icono de configuración le permite cerrar la solapa de abajo. Los botones que nos permitieron cambiar entre el editor visual y el editor de texto ahora se encuentran en el mismo panel en el extremo derecho. Para obtener una vista previa del artículo, debe hacer clic en el ojo ubicado antes del botón "Publicar ...".

control avanzado gutenberg.jpeg

La sección para seleccionar la imagen destacada para las categorías y la visibilidad del artículo está a la derecha como de costumbre. ¿Necesita asegurarse de que el " Documento Está seleccionado

Categoría e imagen de la sección de gutenberg en la primera.jpeg

Sección de bloque

Esta es la innovación que aporta Gutenberg. Debes saber que ahora cualquier párrafo sobre Gutenberg debe considerarse un bloque. Los bloques tienen esta posibilidad de ser individualmente ajustables, pero también pueden moverse fácilmente por todo el documento.

Cuando hayas colocado el cursor sobre tu párrafo, para acceder a las funcionalidades del bloque seleccionado, debes hacer clic en la pestaña del bloque de la derecha.

bloquear gutenberg wordpress.jpeg

Con esta configuración, puede, por ejemplo, definir un color de fondo que se aplique solo al bloque, así como cambiar el tamaño de fuente del bloque. Lo encuentro bastante conveniente.

Opciones de formateo

El formato aparecerá sobre cada bloque.

opción formatting.jpeg

También mostrará las opciones de diseño en la parte superior haciendo clic en la opción Editor y luego haciendo clic en "Establecer la barra de herramientas en la parte superior".

mostrar las opciones de formateo en la parte superior.jpeg

Cómo agregar bloques personalizados

No está limitado a usar el bloque de párrafo. Para agregar más bloques, debe hacer clic en el ícono + ubicado en la parte superior izquierda.

bloque diferente gutenberg.jpeg

Esto le permite acceder a los diferentes bloques disponibles. Es también en esta ubicación donde se puede acceder a los diferentes bloques que ofrece el temas y complementos. Incluso tendrá la opción de guardar sus propios bloques personalizados. Creo que facilitará la edición de artículos similares.

Eso es todo por este tutorial, continuaremos en el siguiente poniendo en práctica todo lo que observamos en este tutorial.