Programado para lanzarse el 6 de diciembre de 2018, WordPress 5.0 trae una actualización importante: el nuevo editor de Gutenberg. Si desea aprovechar al máximo esta herramienta, deberá aprender sobre el sistema de bloques de Gutenberg.
Gutenberg te ayuda a crear contenido de una manera más visual que el editor anterior de TinyMCE. Para hacer esto, proporciona una biblioteca de elementos preconstruidos o ‘bloques’. Cada bloque puede agregarse a una página o publicación y personalizarse. Hay bloques para manejar componentes básicos como texto e imágenes, así como algunos que brindan funciones avanzadas (como botones y tablas).
Cómo usar bloques de Gutenberg para crear una publicación de WordPress (en 3 pasos)
Esto funciona exactamente de la misma manera que en el editor clásico. Después de eso, sin embargo, las cosas comienzan a cambiar.
Si pasas el cursor sobre el área directamente debajo del título de tu publicación, verás algunos íconos:
El ícono Más le permite seleccionar bloques de Gutenberg y agregarlos a su publicación. A la derecha, también hay opciones para agregar rápidamente los bloques más utilizados: las opciones de texto, imagen y galería.
Por ahora, haz clic en el icono Más y verás un nuevo menú:
Este menú enumera todos los bloques de Gutenberg que incluye actualmente el editor. Hay una sección en la parte superior con sus propias opciones Más utilizadas , varias categorías organizadas debajo e incluso una barra de búsqueda para ayudarlo a encontrar lo que necesita rápidamente.
Para agregar un bloque a tu publicación, solo tienes que buscarlo y hacer clic en él. Comencemos de manera simple, con un bloque de párrafo . Coloque el bloque en su publicación, luego continúe con el siguiente paso ( también puede crear un bloque de párrafo simplemente escribiendo en el editor ).
Paso 2: personaliza tu bloque
Cuando agrega un bloque de párrafo, no parece mucho de inmediato. Sin embargo, una vez que comience a escribir en el campo, aparecerán nuevas opciones:
Verá algunas configuraciones básicas de formato, como alineación, negrita y cursiva. Además, echa un vistazo a la barra lateral derecha de la pantalla del editor:
Allí encontrará más opciones específicas de bloque. En este caso, puede cambiar el tamaño y el color de la fuente del texto, agregar una letra capitular e incluso incluir algún CSS personalizado (en el menú Avanzado ). Cualquier cambio que realice, ya sea aquí o en el propio bloque, será visible de inmediato.
Cada uno de los bloques de Gutenberg que se ofrecen viene con su propia configuración única.
Por ejemplo, si presiona Enter, agregará un nuevo bloque debajo de su bloque de párrafo. Sin embargo, esta vez puede intentar agregar un bloque de imagen usando el mismo signo más :
Como puede ver, puede cargar una imagen o agregar una que ya esté en su Biblioteca de medios. Puede editar la imagen, modificar su alineación y agregar CSS en la barra lateral.
Esto crea un botón en el que se puede hacer clic para que los visitantes interactúen. Puede editar el texto del botón en sí e incluir la URL a la que se vinculará justo debajo:
Al seleccionar el ícono en la esquina superior izquierda del bloque, puede cambiar el estilo de su botón:
Además, puede modificar los colores de fondo y de texto en la barra lateral. Si bien esta no es una gran variedad de opciones, es suficiente para crear un práctico botón personalizado, que puede usar para alentar a los visitantes a registrarse en una lista de correo electrónico , comprar un producto o cualquier otra cosa que le apetezca.
Paso 3: Dale los toques finales a tu publicación
Una vez que haya agregado algunos bloques, es posible que desee realizar algunos cambios. Afortunadamente, el editor de Gutenberg es bastante flexible y te permite modificar el diseño de tu contenido.
Si desea eliminar un bloque, por ejemplo, puede seleccionar el icono Opciones que se encuentra arriba y hacer clic en Eliminar bloque :
Al pasar el cursor sobre un bloque, puede usar las flechas hacia arriba y hacia abajo para reorganizar sus bloques a voluntad. O bien, también puede hacer clic en los seis puntos entre las flechas para arrastrar y soltar para mover un bloque:
Esto le permite crear hasta seis columnas una al lado de la otra y colocar los bloques que desee dentro de cada una. Es una opción que ofrece mucho potencial para crear diseños únicos.
Finalmente, es importante tener en cuenta que aún tiene acceso a la configuración de toda la publicación (o toda la página). En la barra lateral derecha, haga clic en la pestaña Documento para encontrarlos:
Aquí encontrará la mayoría de las opciones con las que está familiarizado. Puede publicar la publicación, establecer un autor, elegir categorías y etiquetas, agregar una imagen destacada, etc. Incluso puede modificar la configuración de los comentarios en el menú Discusión . Sin embargo, no necesitará guardar su contenido, ya que se guardará automáticamente a intervalos frecuentes mientras trabaja.
¡Esto es todo lo que necesita saber para usar el sistema de bloques de Gutenberg! Es rápido de aprender, pero hay muchas más opciones de las que hemos cubierto aquí. Lo alentamos a que continúe experimentando con los diversos bloques de Gutenberg disponibles y se sienta cómodo con las opciones que se ofrecen (para que esté listo cuando el editor se inicie de verdad).
También puede usar complementos para agregar nuevos bloques
Una de las cosas más poderosas de Gutenberg es que usa complementos para agregar todo tipo de bloques nuevos al editor. De hecho, es posible que algunos de sus complementos favoritos ya hayan agregado sus propios bloques.
Por ejemplo, algunos complementos de la galería ahora le permiten insertar una galería usando un bloque, en lugar del antiguo método de código abreviado que usaban muchos complementos.
Más allá de eso, también puede encontrar toneladas de complementos que se centran únicamente en agregar nuevos bloques. Por ejemplo, el complemento Otter Blocks le brinda bloques para:
- Tablas de precios
- Testimonios
- Compartir iconos con llamadas a la acción
- Mucho más
También hay muchos otros complementos de bloques de Gutenberg que puedes encontrar en WordPress.org.
Otro complemento que vale la pena mencionar es el complemento Cloud Blocks. Si bien aún está en versión beta, ofrece un enfoque interesante que le permite instalar bloques de Gutenberg de desarrolladores externos «desde la nube».
Conclusión
Con el lanzamiento de WordPress 5.0, Gutenberg se convertirá en el editor predeterminado para todos los sitios de WordPress ( a menos que esté utilizando el complemento Editor clásico ).
Afortunadamente, crear contenido en Gutenberg es muy simple. Sólo tienes que:
- Agregue los bloques de Gutenberg que desee a su publicación o página.
- Personaliza la configuración individual de cada bloque.
- Reorganice los bloques, elimínelos e incluso organícelos en columnas si lo desea.
Y si desea usar aún más bloques en sus diseños, considere agregar uno de los muchos complementos de bloques de Gutenberg.
Si desea tutoriales de Gutenberg más completos, hemos escrito una publicación de Gutenberg para novatos más general , así como un tutorial detallado del editor de Gutenberg con algunos consejos de productividad avanzados.
