Cómo crear y utilizar componentes de bloque en WordPress

Rifat Tutoriales de WordPress Feb 2, 2024

El editor de bloques de WordPress, a veces denominado Gutenberg, tiene una función llamada Bloque reutilizable que es bastante útil pero rara vez se utiliza. Los bloques reutilizables tienen el mismo propósito que los módulos globales si está familiarizado con Elementor , Divi u otros creadores de páginas.

Estos son bloques, o grupos de bloques, que puedes reutilizar después de configurarlos una sola vez. No es necesario que los cambies nuevamente después de insertarlos en varias páginas y publicaciones. Además, puede realizar ajustes en todo el sitio si decide modificarlos nuevamente, lo que le ahorrará horas en todo el sitio web. Ahora exploremos todos los métodos para administrar sus bloques reutilizables de WordPress.

Crear un bloque en WordPress

En WordPress, crear un bloque no es demasiado difícil. Puedes hacer que cualquier bloque sea reutilizable dentro de cualquier publicación que estés actualizando con el Editor de bloques (el editor predeterminado en WordPress 5.x, a menos que estés usando el complemento del Editor clásico). En la configuración de desplazamiento del bloque, haga clic en el menú desplegable de tres puntos y elija Agregar a bloques reutilizables.

Cuando cambies el nombre del nuevo bloque en el editor, será más fácil recuperarlo más adelante. Para ello, aparecerá en su sitio web, asegúrese de que el nombre que elija sea memorable. Como "Publicaciones relacionadas", "Imagen de portada de publicación de blog" o algo similar ilustrativo.

Create Amazing Websites

Con el mejor generador de páginas gratuito Elementor

Empezar ahora

Puede hacer clic nuevamente en la configuración desplegable y seleccionar Eliminar de los bloques reutilizables si cometió un error al generar el bloque reutilizable o simplemente cometió un error en general. El uso de esta opción elimina el bloque en su totalidad de la base de datos. Si lo deseas, puedes volver a agregarlo a la colección siguiendo los pasos anteriores.

Además, la opción Editar se puede utilizar simplemente haciendo clic en el bloque una vez guardado.

Tiene la opción de cambiar el nombre del bloque de párrafos en este ejemplo. Sin embargo, los cambios para cada bloque serán únicos. Tiene opciones adicionales para un bloque de imágenes, como alineación y la posibilidad de cargar o insertar un archivo diferente de su biblioteca multimedia.

Puedes utilizar este procedimiento con cualquier bloque reutilizable que fabriques. Pero recuerde que cualquier cambio que realice de esta manera en un bloque reutilizable también afectará a todas las demás instancias de ese bloque en su sitio web. Como resultado, si modificas una imagen en un solo bloque, se actualizará en todas partes.

Insertar un bloque reutilizable

Es muy sencillo utilizar la función Bloques reutilizables de WordPress. Para acceder a la pestaña Reutilizable en el editor de bloques, haga clic en cualquier instancia de + dentro de un círculo. El botón más se puede encontrar en la esquina superior izquierda de la pantalla, debajo de cualquier bloque y a la derecha de cualquier bloque.

La pestaña Más utilizado, que se muestra en la parte superior de la lista cada vez que se selecciona el botón Más, también puede contener los bloques reutilizables que crea cuando los inserta en otras publicaciones y páginas.

Estos pueden variar dependiendo de los bloques que uses, sin embargo, si usas, por ejemplo, el mismo bloque reutilizable como pie de página para cada publicación del blog, aparecerán aquí con mucha frecuencia.

Administrar todos los bloques en WordPress

Hay un enlace Administrar todos los bloques reutilizables en la parte inferior de la pestaña Reutilizable. Se le dirigirá a un sitio web que le resultará familiar después de hacer clic en este enlace, donde se muestra una lista de todos los bloques reutilizables que ha generado. La lista se parecerá casi exactamente a la lista de Publicaciones y Páginas que viene con WordPress de forma predeterminada.

Al revisar la lista, observa algunas opciones cruciales. Editar, exportar como JSON e importar desde JSON.

Al modificar un bloque, utilice Editar exactamente como lo haría anteriormente. El bloque aparece en su editor similar a una publicación, donde puedes modificarlo y solo, en lugar de dentro de una publicación específica. Una vez más, cualquier modificación realizada en este bloque afectará a todas las instancias de todo el sitio.

Dependiendo de la configuración de su navegador, al seleccionar el botón Exportar como JSON (3) se abrirá un cuadro de diálogo donde podrá seleccionar dónde guardar el archivo JSON creado. El archivo es un documento JSON simple. Se muestran el tipo de archivo (un bloque), el título que le dio al editarlo o crearlo y el HTML real que WordPress inyectará para representar el bloque y su contenido en la parte frontal del sitio web.

El proceso de importación desde JSON es bastante simple: ubique el archivo JSON en su computadora y luego cárguelo como cualquier otro archivo o archivo adjunto.

Aparecerá en su lista de bloques reutilizables una vez que haga clic en Importar. Pero tenga en cuenta que no se cambiará el nombre del bloque recién importado si ya tiene uno con el mismo nombre (Bloque reutilizable 1, en este caso). Es un proceso manual para distinguir entre ellos.

Creando grupos de bloques en WordPress

Todo el potencial de los bloques reutilizables se mejora organizándolos en grupos. También puedes unir bloques de Gutenberg y almacenarlos como un único bloque reutilizable, lo cual es una alternativa a tener una sola imagen, párrafo o título que puedes colocar globalmente. Para crear un formulario de suscripción de correo electrónico global para todas sus publicaciones del Editor de bloques, puede, por ejemplo, agrupar un bloque de encabezado, un bloque de párrafo, un bloque de imagen y un bloque HTML personalizado.

Todo lo que tienes que hacer es presionar Mayús y hacer clic en cualquier bloque para agregarlo a una colección de bloques reutilizables de WordPress. Los bloques seleccionados tendrán un borde azul alrededor.

A continuación, hará clic en el botón Transformar (2) y elegirá Grupo en el menú (3). Ahora notarás que los bloques se han combinado en uno. Luego, el bloque de grupo se convierte en un bloque reutilizable utilizando el mismo procedimiento que con cualquier otro bloque individual.

Cuando agregas un nuevo bloque a una publicación o página, este nuevo grupo aparecerá en la lista de todos los bloques reutilizables y en la pestaña Reutilizable.

Conclusión

Uno de los mejores y más útiles aspectos del Editor de bloques de Gutenberg son los bloques reutilizables. El uso de la función de bloques reutilizables puede elevar el diseño y desarrollo de sus publicaciones y páginas a nuevos niveles de utilidad, creatividad y experiencia de usuario. Puede compartir bloques y contenido con amigos y crear plantillas para aspectos comunes de su sitio.

Divi WordPress Theme