Bloques de Gutenberg: qué son y cómo usarlos en WordPress
Se lanzará el 6 de diciembre de 2018., WordPress 5.0 trae consigo 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 TinyMCE anterior. 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 proporcionan funciones avanzadas (como botones y tablas).
Contents
Cómo usar los bloques de Gutenberg para crear una publicación de WordPress (en 3 pasos)
Suponiendo que haya actualizado su sitio a WordPress 5.0, su sitio debería usar el nuevo editor Gutenberg de forma predeterminada.
Todo lo que queda es aprender cómo aplicar el nuevo sistema de bloques Gutenberg.!
Vamos a ilustrar las características clave del editor guiándote por lo que es crear una publicación básica de WordPress, pero puedes usar el mismo enfoque sin importar qué tipo de contenido estés creando con Gutenberg.
Paso 1: agrega un bloque a tu publicación
Lo primero que querrás hacer es darle un título a tu publicación, usando el campo dedicado en la parte superior del editor:
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 pasa el cursor sobre el área directamente debajo del título de su publicación, verá algunos iconos:
los Más El icono 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, haga clic en el Más icono, y verá un nuevo menú:
Este menú enumera todos los bloques de Gutenberg que el editor incluye actualmente. Hay una sección en la parte superior con la tuya Más usado opciones, una serie de 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 su publicación, solo tiene que encontrarla y hacer clic en ella. Comencemos simple, con un Párrafo bloquear. 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, consulte la barra lateral derecha de la pantalla del editor:
Allí, encontrarás más opciones específicas de bloque. En este caso, puede cambiar el tamaño y el color de la fuente del texto, agregar un capitular e incluso incluir algunos CSS personalizados (en Avanzado menú). Cualquier cambio que realice, ya sea aquí o en el bloque, será visible de inmediato..
Cada uno de los bloques de Gutenberg en oferta viene con su propia configuración única.
Por ejemplo, si golpeas Entrar, agregará un nuevo bloque debajo del bloque de párrafo. Sin embargo, esta vez puede intentar agregar un bloque de imagen usando ese mismo Más firmar:
Como puede ver, puede cargar una imagen o agregar una que ya esté en su Biblioteca multimedia. Puede editar la imagen, alterar su alineación y agregar CSS en la barra lateral.
No hay duda de que usará muchos bloques de párrafos e imágenes. Sin embargo, Gutenberg tiene más para ofrecer. También hay una serie de bloques de Gutenberg que ofrecen nuevas opciones que no están disponibles en el editor clásico.
Por ejemplo, puede agregar un Botón bloquear a tu publicación:
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 e incluir la URL a la que se vinculará a continuación:
Al seleccionar el icono 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 desee..
Paso 3: da los toques finales a tu publicación
Una vez que haya agregado algunos bloques, es posible que desee realizar algunos cambios. Afortunadamente, el editor Gutenberg es bastante flexible al permitirte modificar el diseño de tu contenido.
Si desea eliminar un bloque, por ejemplo, puede seleccionar el Opciones icono arriba y haga 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 también puede hacer clic en el seis puntos entre las flechas para usar arrastrar y soltar para mover un bloque:
También vale la pena señalar que puede crear diseños de varias columnas. Esta es una característica emocionante, aunque todavía está en versión beta en el momento de escribir este artículo. Puedes acceder colocando un Columnas bloquear en tu publicación:
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 todavía tiene acceso a la configuración posterior (o de toda la página) también. En la barra lateral derecha, haga clic en el Documento pestaña 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 comentarios en el Discusión menú. 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 Gutenberg! Es rápido de aprender, pero hay muchas más opciones de las que hemos cubierto aquí. Le recomendamos 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 lance de verdad).
También puedes usar complementos para agregar nuevos bloques
Una de las cosas más poderosas sobre Gutenberg es que usa complementos para agregar todo tipo de nuevos bloques al editor. De hecho, algunos de sus complementos favoritos ya podrían haber agregado sus propios bloques.
Por ejemplo, algunos complementos de la galería ahora le permiten insertar una galería utilizando un bloque, en lugar del antiguo método de código corto 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 ofrece 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 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 más completos de Gutenberg, hemos escrito una publicación más general de Gutenberg para novatos, así como un tutorial detallado del editor de Gutenberg con algunos consejos avanzados de productividad.
