Gutenberg Block: Qué son y cómo usarlos en WordPress

El lanzamiento está previsto para el 6 de diciembre de 2018.WordPress 5.0Hay una actualización importante llamada el nuevo Editor de Gutenberg. Si desea aprovechar al máximo esta herramienta, debe conocer 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, proporcionamos una biblioteca de elementos listos para usar o "bloques". Cada bloque se puede personalizar agregándolo a una página o publicación. Hay bloques para procesar componentes básicos como texto e imágenes, y bloques para funciones avanzadas (botones, tablas, etc.).

Esta guía le presenta el sistema de bloques de Gutenberg y le muestra cómo usarlo. En el proceso, le mostraré algunos de los bloques más útiles incluidos en el nuevo editor. ¡Pongámonos a trabajar!

Cómo crear una publicación de WordPress usando bloques de Gutenberg (3 pasos)

Si todavía no sabes qué es el Gutenberg Editor, echa un vistazo al nuestro.

Suponiendo que debería hacerlo, su sitio debería utilizar el nuevo editor predeterminado de Gutenberg.

¡Todo lo que queda es aprender a aplicar el nuevo sistema de bloques de Gutenberg!

Explicaré las características principales del editor explicando cómo crear una publicación básica de WordPress, pero puede usar el mismo enfoque independientemente del tipo de contenido que cree con Gutenberg.

Paso 1: agrega un bloque a tu publicación

Lo primero que debe hacer es titular su publicación utilizando los campos dedicados en la parte superior del editor.

Agregue un encabezado a Gutenberg.

Funciona exactamente como un editor tradicional. Pero entonces todo comienza a cambiar.

Pase el cursor sobre el área justo debajo del título de la publicación para ver varios íconos.

Icono del editor de Gutenberg.

El ícono más le permite seleccionar un bloque de Gutenberg y agregarlo a su publicación. En el lado derecho, también hay opciones (texto, imagen, opciones de galería) para agregar rápidamente los bloques más utilizados.

Mientras tanto, haga clic en el ícono más para abrir un nuevo menú.

Edición del bloque de Gutenberg.

Este menú enumera todos los bloques de Gutenberg que se encuentran actualmente en el editor. En la parte superior hay una sección que contiene las opciones más utilizadas, y en la parte inferior hay un conjunto de categorías organizadas que incluso la barra de búsqueda puede ayudarlo a encontrar rápidamente lo que está buscando.

Para agregar un bloque a su publicación, simplemente busque y haga clic en el bloque. Comencemos fácilmente con el bloque Párrafo. Coloque el bloque en su publicación antes de continuar con el siguiente paso (también puede crear un bloque de párrafo simplemente escribiendo en el editor).

Paso 2: Establecer el bloque

Agregar un bloque de párrafo rápidamente hace que se vea mal. Sin embargo, tan pronto como comience a escribir en el campo, verá nuevas opciones.

Bloque de párrafos de Gutenberg.

Muestra formato básico como alineación, negrita y cursiva. Además, mire la barra lateral en el lado derecho de la pantalla del editor.

Configuración del bloque de párrafos de Gutenberg.

Hay otras opciones para un bloque en particular. En este caso, puede cambiar el tamaño de fuente y el color del texto, agregar capitulares e incluso (en el menú Más). Cualquier cambio que hagas aquí o en el propio bloque será visible inmediatamente.

Cada uno de los bloques de Gutenberg propuestos tiene su propia configuración.

Por ejemplo, al presionar Intro se agrega un nuevo bloque debajo del bloque de párrafo. Sin embargo, esta vez puede intentar agregar un bloque de imagen usando el mismo signo más.

Bloque de imágenes de Gutenberg.

Como puede ver, puede cargar imágenes o agregar imágenes que ya existen en su biblioteca. Puede editar la imagen, reposicionarla y agregar CSS a la barra lateral.

Consejos de productividad:En lugar de presionar el signo más, también puede escribir "/" en un bloque vacío y luego ingresar el nombre del bloque que desea insertar. Una vez que sepa qué bloques están disponibles, es una forma mucho más rápida de agregar nuevos bloques.

No hay duda de que utilizará muchos párrafos y bloques de imágenes. Sin embargo, Gutenberg tiene muchas más características. También hay muchos bloques de Gutenberg que ofrecen nuevas opciones que no están disponibles en los editores tradicionales.

Por ejemplo, puede agregar un bloque de botones a su publicación.

Bloque de botones de Gutenberg.

Esto se debe a la interacción de los visitantes. Puede editar el texto del botón en sí para especificar la URL para vincular inmediatamente debajo.

Edición de bloques de botones de Gutenberg.

Puede cambiar el estilo del botón seleccionando el icono en la esquina superior izquierda del bloque.

Cambia el estilo del botón de Gutenberg.

También puede cambiar el color del fondo y el texto de la barra lateral. No hay muchas opciones, pero es suficiente para crear un práctico botón personalizado que puede usar para alentar a sus visitantes a registrarse, comprar un producto o hacer cualquier otra cosa que deseen.

Paso 3. Terminaré el post.

Después de agregar algunos bloques, puede realizar algunos cambios. Afortunadamente, el editor de Gutenberg es extremadamente flexible y te permite cambiar el diseño de tu contenido.

Por ejemplo, si desea eliminar un bloque, seleccione el icono Opciones que se encuentra arriba y haga clic en Eliminar bloque.

Elimina el bloque de Gutenberg.

Cuando pasas el cursor sobre un bloque, puedes usar las flechas hacia arriba y hacia abajo para cambiar la posición del bloque según sea necesario. Alternativamente, puede hacer clic en los seis puntos entre las flechas y arrastrar y soltar para mover el bloque.

Reubicación de bloques en Gutenberg.

Consejos de productividad:Gutenberg contiene algunos atajos de teclado para ayudarlo a eliminar bloques rápidamente o insertar nuevos bloques. escribeMayús + Alt + HMuestra todos los atajos de teclado de Gutenberg.

También vale la pena señalar que puede crear diseños de varias columnas. Esta es una característica interesante, pero todavía está en versión beta en el momento de escribir este artículo. Puede acceder colocando un bloque de Columnas en su publicación.

Utiliza columnas de Gutenberg.

Esto le permite crear hasta 6 columnas una al lado de la otra y colocar cualquier bloque en cada columna. Esta es una opción que ofrece un gran potencial para crear su propio diseño.

Finalmente, es importante tener en cuenta que aún tiene acceso a la configuración de toda la publicación (o página). En la barra lateral derecha, haz clic en la pestaña Documentos para encontrarlos.

Configuración de la página de Gutenberg.

Aquí puede encontrar la mayoría de las opciones con las que está familiarizado. Puede publicar publicaciones, especificar autores, seleccionar categorías y etiquetas, agregar imágenes destacadas y más. También puede usar el menú de discusión. Sin embargo, no necesita guardar el contenido porque se guarda automáticamente con frecuencia mientras trabaja.

Eso es todo lo que necesita saber para usar el sistema de bloques de Gutenberg. Es fácil de entender, pero hay más opciones que las descritas aquí. Lo alentamos a que continúe experimentando con los diversos bloques de Gutenberg disponibles y se familiarice con las opciones sugeridas (esto lo preparará cuando se publique el editor).

También puede agregar nuevos bloques usando complementos.

Una de las características más poderosas de Gutenberg es el uso de complementos para agregar nuevos bloques de cualquier tipo al editor. De hecho, algunos de mis complementos favoritos ya agregaron sus propios bloques.

Por ejemplo, algunos complementos ahora pueden usar bloques para incrustar galerías en lugar de los antiguos que usaban muchos complementos.

Además de eso, puedes encontrar muchos complementos que se enfocan solo en agregar nuevos bloques. Por ejemplo, el complemento Otter Blocks proporciona los siguientes bloques:

  • revisión
  • Y comparte el ícono
  • Mucho más

Biblioteca de plantillas con bloques de Gutenberg y OtterBiblioteca de plantillas con bloques de Gutenberg y Otter

escritores):TemaIsla

Versión actual: 1.7.5

Última actualización: 7 de febrero de 2022

nutria-bloques.zip

94% de calificaciónMás de 100.000 instalacionesWP 5.6 + requerido

Hay muchos otros complementos de bloque de Gutenberg que también están en WordPress.org.

Otro complemento que vale la pena mencionar es el complemento CloudBlocks. Todavía está en versión beta, pero ofrece un enfoque interesante que permite a los desarrolladores de terceros instalar bloques de Gutenberg "desde la nube".

bloque de nubesbloque de nubes

escritores):Frontcom

Versión actual: 1.1.8

Última actualización: 10 de octubre de 2019

Bloque de nube 1.1.8.zip

72% de calificaciónMás de 80 instalaciones4.9.8 Requerido

Conclusión

Con el lanzamiento de WordPress 5.0, Gutenberg será 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 fácil. Todo lo que necesitas es:

  1. Agregue los bloques de Gutenberg requeridos a su publicación o página.
  2. Establezca parámetros individuales para cada bloque.
  3. También puede reorganizar y eliminar bloques y organizarlos en columnas según sea necesario.

Además, si desea utilizar más bloques en su proyecto, considere agregar uno de los muchos complementos de bloques de Gutenberg.

Si necesitaba una guía más completa de Gutenberg, creamos una guía más general y una guía más general.Guía detallada del Editor GutenbergEstos son algunos consejos de rendimiento adicionales.

¿Tiene alguna pregunta sobre cómo funciona el bloque de Gutenberg o hay alguna opción que le gustaría agregar? ¡Comparta sus pensamientos en la sección de comentarios a continuación!

Guía gratuita

5 consejos importantes para acelerar su sitio de WordPress

Simplemente siga algunos consejos simples y podrá reducir el tiempo de descarga en un 50-80%.

Descarga la guía gratuita

Entradas relacionadas

Deja una respuesta

Tu dirección de correo electrónico no será publicada.

Subir

Utilizamos cookies para asegurarnos de brindarle la mejor experiencia en nuestro sitio web. Si continúa utilizando este sitio, asumiremos que está satisfecho con él. Más información