Bloques reutilizables de WordPress: cómo importarlos, exportarlos y crearlos

Una de las características más útiles (e infrautilizadas) del editor de bloques de WordPress (también conocido como Gutenburg) es el bloque reutilizable. Si está familiarizado con Divi u otros creadores de páginas, los bloques reutilizables cumplen la misma función que los módulos globales . Estos son bloques (o grupos de bloques) que configura una vez, pero luego puede reutilizarlos. Puede insertarlos en varias páginas y publicaciones sin necesidad de editarlos nuevamente. Y, si desea volver a editarlos, los cambios pueden aplicarse a todo el sitio, lo que le ahorrará horas durante la vida útil de un sitio. Así que profundicemos en todas las formas en que puede administrar sus bloques reutilizables de WordPress.

Suscríbete a nuestro canal de Youtube

Cómo crear un bloque reutilizable en WordPress

Crear un bloque reutilizable en WordPress es relativamente sencillo. Dentro de cualquier publicación que esté editando con el Editor de bloques (que es el predeterminado en WP 5.x a menos que esté usando el complemento del Editor clásico ), puede hacer que cualquier bloque que desee sea reutilizable. Haga clic en el menú desplegable de tres puntos en la configuración de desplazamiento del bloque y seleccione Agregar a bloques reutilizables .

El editor le pedirá que asigne un nombre al nuevo bloque para recuperarlo más tarde. Asegúrese de ponerle un nombre memorable por la función que cumplirá en su sitio. Como publicaciones relacionadas o imagen de portada para publicaciones de blog o algo igualmente descriptivo.

Si comete un error al crear el bloque reutilizable (o simplemente cometió un error al crearlo), puede volver a hacer clic en la configuración desplegable y hacer clic en Eliminar de bloques reutilizables . Esta opción borra todo el bloque de la base de datos y puede repetir el proceso anterior para volver a agregarlo a la colección si así lo desea.

Además, puede simplemente hacer clic en el bloque una vez que se haya guardado para encontrar el botón Editar .

Para el bloque Párrafo en este ejemplo, le da la opción de cambiarle el nombre. Sin embargo, los ajustes de cada bloque serán diferentes. Para un bloque de imagen , obtiene opciones adicionales, como insertar otro archivo de su biblioteca de medios o cargar uno nuevo, así como la alineación o la URL vinculada.

Este proceso funciona con todos los bloques reutilizables que cree. Pero tenga en cuenta que cualquier edición que realice en un bloque reutilizable de esta manera se aplica a todas las demás instancias de ese bloque en su sitio . Entonces, si cambia la imagen en un bloque, la nueva imagen aparecerá en todas partes.

Cómo insertar bloques reutilizables

Usar los Bloques reutilizables en WordPress es realmente muy fácil y simple. Dentro del editor de bloques, puede hacer clic en cualquier instancia del + dentro de un círculo para encontrar la pestaña Reutilizable . El botón + aparece a la derecha de cualquier bloque, debajo de cualquier bloque y en la parte superior izquierda de la pantalla.

A medida que inserta los bloques reutilizables que crea en diferentes publicaciones y páginas, también pueden aparecer en la pestaña Más utilizados , que aparece en la parte superior de la lista cada vez que se presiona el botón +.

Estos cambiarán a medida que use diferentes bloques, pero si usa el mismo bloque reutilizable, por ejemplo, como pie de página para cada publicación de blog, aparecerán aquí con bastante frecuencia.

Cómo administrar todos los bloques reutilizables en WordPress

En la parte inferior de la pestaña Reutilizable , encontrará un enlace Administrar todos los bloques reutilizables . Al hacer clic en este enlace, accederá a una página familiar donde se enumeran todos y cada uno de los bloques reutilizables que ha creado. La lista se verá exactamente como la lista predeterminada de publicaciones y páginas de WordPress.

Al ver la lista, verá algunas opciones importantes. Importe desde JSON , exporte como JSON y edite .

El uso de Editar es exactamente igual que el anterior en la edición de un bloque. Solo que en lugar de estar dentro de una publicación en particular, el bloque aparece en su propio editor similar a una publicación en el que puede actualizarlo y solo él. Una vez más, todos los cambios realizados en este bloque se aplicarán en todo el sitio a cada instancia.

Para Exportar como JSON , al hacer clic en el botón (3) aparecerá un cuadro de diálogo (dependiendo de la configuración de su navegador) para elegir una ubicación para descargar el archivo JSON generado. El archivo en sí es JSON sencillo. Muestra el tipo de archivo (un bloque), el título que le diste en la edición o creación, y luego el HTML real que WordPress insertará para representar el bloque y su contenido en la interfaz del sitio.

Importar desde JSON es igual de fácil: encuentra el archivo JSON en su computadora, lo carga como cualquier otro archivo adjunto o archivo.

Una vez que presione Importar , aparecerá en su lista de bloques reutilizables. Sin embargo, tenga en cuenta que si ya tiene un bloque con el mismo nombre (en este caso, Reutilizable Block 1 ), el recién importado no cambiará de nombre. Debe hacerlo manualmente para diferenciarlos.

¿Por qué importar y exportar bloques reutilizables?

Hay una serie de razones para importarlos y exportarlos, pero los principales son para fines de copia de seguridad y portabilidad. Probablemente querrá mantener una copia de seguridad de cualquier bloque y contenido que considere que vale la pena difundir en su sitio. La portabilidad, el intercambio y las ventas también son importantes.

Si necesita usar un bloque en un sitio diferente. Para compartir con un compañero. O para vender solo como bloque reutilizable para tus clientes. Al igual que nuestros paquetes de diseño semanales para Divi , la importación y exportación de bloques le brinda la opción de ampliar el constructor de varias maneras. Además, cuando utiliza la opción Bloques de grupo (consulte a continuación), puede importar y exportar plantillas y diseños de páginas completas como bloques reutilizables en formato JSON.

Cómo crear grupos de bloques reutilizables en WordPress

La creación de un grupo de bloques reutilizables ayuda a que brille toda la característica de los bloques reutilizables. En lugar de tener una sola imagen, párrafo o encabezado que pueda insertar globalmente, también puede agrupar bloques de Gutenberg y guardarlos como un solo bloque reutilizable. Esto significa que podría, por ejemplo, agrupar un bloque de encabezado, un bloque de párrafo, un bloque de imagen y un bloque HTML personalizado para tener un formulario de suscripción de correo electrónico global para todas sus publicaciones del Editor de bloques.

Para crear un grupo de bloques de WordPress reutilizables, simplemente haga clic en cualquiera de los bloques para agregarlos al grupo. Cualquier bloque seleccionado se resaltará con un borde azul.

Luego, presionará el botón Transformar (2) y seleccionará Grupo en el menú desplegable (3) . En este punto, verá que los bloques se fusionan en un solo bloque. Luego transforma el bloque de grupo en un bloque reutilizable de la misma manera que lo hizo anteriormente con cualquier otro bloque único.

Este nuevo grupo aparecerá en la lista de todos los bloques reutilizables y en la pestaña Reutilizable cuando agregue un nuevo bloque a una publicación o página.

Cómo crear una plantilla reutilizable

Discutimos anteriormente que un bloque reutilizable en WordPress es un elemento global. Lo que significa que cualquier cambio realizado en una instancia del bloque afectará a todas las demás instancias. Si cambia el texto o la imagen de un bloque reutilizable, ese cambio afectará a todo el sitio. Sin embargo, puede utilizar bloques reutilizables como plantillas que se pueden editar individualmente. Nuevamente, al igual que nuestros diseños Divi, el Editor de bloques tiene una forma en que puede insertar el bloque general (o grupo de bloques) de su biblioteca y luego editar el contenido en una publicación o página individual (o incluso bloque por bloque) base.

Para hacerlo, inserte un bloque reutilizable en el editor, como discutimos anteriormente. Presione el + en un círculo , navegue hasta Reutilizable y luego seleccione el bloque que desea insertar.

Cuando aparezca el bloque, haz clic en los tres puntos para abrir el menú desplegable . Seleccione Convertir a bloque regular . Nota: no seleccione Eliminar de bloques reutilizables .

Convert to Regular Block se aplica a este único bloque solamente . Cuando usa Convert to Regular Block , le está diciendo a WordPress que desea que este (y solo este) bloque único sea independiente de las ediciones globales de todo el sitio. Cualquier cambio que realice en otros bloques reutilizables no se aplicará a un bloque convertido, ni estas ediciones se aplicarán globalmente.

Al seleccionar Eliminar de bloques reutilizables, se elimina todo del directorio global. Los bloques que ya ha insertado permanecerán donde están, pero ya no compartirán ningún rasgo global. Tampoco podrás volver a insertarlos desde la pestaña de Reutilizables (que puede ser una obviedad). Hacerlo anularía el propósito de que el bloque reutilizable sea una plantilla, por lo que no sugerimos hacerlo.

Sin embargo, al usar Convert to Regular Block , puede insertar la plantilla base para el bloque (o grupo de bloques) y eliminar solo esa instancia particular de los estándares globales, haciendo que el bloque reutilizable original funcione como una plantilla para otras publicaciones y Paginas. Puede ver esta función en efecto en nuestro tutorial sobre cómo agregar bloques de diseño Divi reutilizables a las publicaciones del blog .

Conclusión

Los bloques reutilizables son una de las funciones principales y más versátiles del Gutenberg Block Editor. Desde poder compartir bloques y contenido entre sitios y amigos y usarlos como plantillas para elementos comunes en su sitio, aprovechar la función de bloques reutilizables puede llevar la creación y el diseño de su publicación y página a nuevos niveles de utilidad, creatividad y uso. experiencia.

¿Cómo ha utilizado los bloques reutilizables de Gutenberg para mejorar su sitio web?

Imagen destacada del artículo por Helga Khorimarko / shutterstock.com