¿Pasó 20 minutos diseñando un bloque de llamada a la acción con estilo? Ajustó colores, márgenes y el texto. Una semana después se encuentra armando el mismo bloque desde cero en otro sitio. ¿Le suena familiar?

Copiar bloques manualmente entre sitios de WordPress consume horas que usted no tiene. Pero Gutenberg resolvió este problema hace tiempo: los bloques reutilizables más la exportación JSON le permiten mover cualquier bloque a otro sitio en menos de un minuto. Sin plugins, sin exportaciones completas de la base de datos, sin lidiar con importaciones XML.

Esta guía lo acompaña en cada paso, desde crear un bloque reutilizable hasta importarlo en un sitio independiente. Además, incluye un plugin alternativo que simplifica aún más el proceso.

💡 Resumen rápido:

• Cree un bloque en el editor Gutenberg y conviértalo en reutilizable
• Expórtelo como archivo JSON desde la interfaz de gestión de bloques
• Importe el JSON en el sitio de WordPress de destino y el bloque estará listo para usar
• Como alternativa, el plugin Blocks Export Import le permite exportar cualquier bloque, no solo los reutilizables

Qué son los bloques reutilizables y por qué los necesita

Un bloque reutilizable en Gutenberg es una plantilla de contenido guardada que usted crea una vez y luego inserta en cualquier entrada o página. Edite el bloque original y los cambios se propagan a todos los lugares donde se usa.

Casos de uso típicos:

• Una nota de agradecimiento o firma al final de cada artículo
• Un banner con una promoción o un formulario de suscripción
• Un bloque con datos de contacto, información legal o derechos de autor
• Un control deslizante de imágenes o una galería reutilizada en varias páginas

Antes de Gutenberg, usted habría guardado esos fragmentos en un archivo de texto en su escritorio y los habría pegado desde el portapapeles. Ahora esto funciona a nivel del núcleo de WordPress y se transfiere entre sitios.

Nota importante: si un bloque depende de un plugin de terceros (por ejemplo, bloques de Getwid o Stackable), ese mismo plugin debe estar instalado en el sitio de destino. De lo contrario, el bloque se abrirá con un error o perderá parte de sus estilos.

1. Crear un bloque reutilizable

Abra el editor Gutenberg desde Entradas → Añadir nueva. Haga clic en el icono Añadir bloque (+) de la barra de herramientas superior y elija el tipo de bloque que necesite. En el siguiente ejemplo es un bloque de párrafo simple:

Configure el bloque: añada texto, enlaces, color de fondo, relleno, todo lo que necesite para el aspecto final. En nuestro ejemplo, el resultado es un bloque de agradecimiento con enlaces a redes sociales y un fondo de color:

Así se ve el bloque terminado después de aplicar estilos y ajustar el texto:

Hasta aquí es un bloque normal. Para hacerlo reutilizable, haga clic en el icono Más opciones (tres puntos) de la barra de herramientas del bloque y seleccione Añadir a bloques reutilizables:

Asígnele un nombre al bloque y haga clic en Guardar. Listo: el bloque ahora aparece en la biblioteca de bloques reutilizables de su sitio.

2. Usar un bloque reutilizable en las publicaciones

Agregar un bloque guardado a cualquier entrada o página toma solo un par de clics. En el editor Gutenberg, haga clic en Añadir bloque (+), cambie a la pestaña Bloques reutilizables y elija el que necesite:

Después de insertar el bloque, haga clic en Vista previa o Publicar y compruebe el resultado en el sitio:

El bloque funciona en todos los tipos de contenido que admiten el editor Gutenberg: entradas, páginas, tipos de contenido personalizados. Créelo una vez, úselo en cualquier parte.

3. Exportar el bloque a JSON

Una vez que el bloque esté listo y probado, puede exportarlo para transferirlo a otro sitio. En el editor Gutenberg, haga clic en el icono Más herramientas y opciones (tres puntos en la esquina superior derecha) y seleccione Gestionar todos los bloques reutilizables:

Se abrirá una pantalla que lista todos los bloques reutilizables del sitio. Por ahora solo hay uno, la nota de agradecimiento. A medida que cree más bloques, la lista crecerá:

Pase el cursor sobre el nombre del bloque y verá un enlace Exportar como JSON. Haga clic en él:

Su navegador descargará un archivo con extensión .json. Guárdelo en una carpeta conveniente de su equipo:

Dentro del JSON está la estructura completa del bloque: marcado HTML, estilos, atributos, bloques anidados. Es un archivo autónomo listo para importar en cualquier sitio WordPress con Gutenberg activo.

4. Importar el bloque en otro sitio

En el sitio WordPress de destino, abra el editor Gutenberg (Entradas → Añadir nueva). Haga clic de nuevo en Más herramientas y opciones y seleccione Gestionar todos los bloques reutilizables:

En la pantalla de bloques, haga clic en el botón Importar desde JSON, elija el archivo que descargó anteriormente y haga clic en Importar:

Listo. El bloque importado aparece en la lista y está disponible de inmediato para insertarlo en las publicaciones:

A partir de este momento, puede usar el bloque en el segundo sitio exactamente igual que en el primero. Repita el procedimiento para tantos bloques como desee; no hay restricciones.

Método alternativo: el plugin Blocks Export Import

El método manual que implica convertir a reutilizable funciona en la mayoría de los casos, pero tiene una limitación: solo puede exportar bloques reutilizables. Un bloque normal que acaba de diseñar debe convertirse primero y solo después exportarse.

El plugin Blocks Export Import de ThemeIsle elimina esta limitación. Añade un botón de exportación directamente al menú de cualquier bloque, sin ningún paso de conversión intermedio.

Instale y active el plugin, luego abra el editor Gutenberg y cree un bloque. Una nueva opción Exportar JSON aparece en el menú Más opciones:

Un archivo JSON con la estructura completa del bloque se descarga en su ordenador. Para importarlo en otro sitio, haga clic en Añadir bloque (+), cambie a la pestaña Widgets y seleccione Importar bloques desde JSON:

Luego haga clic en Elegir archivo, seleccione el JSON en su ordenador y haga clic en Subir:

El método del plugin tiene una salvedad: los bloques importados de esta manera no se guardan en la biblioteca de bloques reutilizables del sitio. Existen únicamente como un archivo JSON en su ordenador. El método manual (secciones 1-4), en cambio, almacena el bloque en la base de datos de WordPress, de modo que permanece accesible a través de la interfaz estándar de gestión de bloques.

Qué método elegir depende de su escenario: para una transferencia puntual entre sus propios sitios, utilice el plugin (es más rápido); para un trabajo continuo con una biblioteca de bloques en múltiples sitios, aprenda la exportación nativa de reutilizables.

Vídeo: exportar e importar bloques Gutenberg en la práctica

Vea un breve videotutorial que muestra el ciclo completo, desde la creación de un bloque reutilizable hasta su importación en otro sitio WordPress:

⁉️🤔 Preguntas frecuentes

¿Puedo exportar varios bloques en un solo archivo?

Sí. Seleccione varios bloques en el editor (mantenga presionada la tecla Mayús y haga clic en cada uno), agrúpelos mediante Añadir a bloques reutilizables y exporte el grupo resultante como un único archivo JSON. El plugin Blocks Export Import también admite exportaciones múltiples: seleccione los bloques y elija Exportar JSON, y todos los bloques seleccionados quedarán en un solo archivo.

¿Qué debo hacer si un bloque importado se muestra incorrectamente?

Tres causas probables. Primera: el plugin del que depende el contenido importado (Getwid, Stackable, Kadence Blocks o similar) no está instalado en el sitio de destino. Instale el plugin y vuelva a importar. Segunda: los temas de ambos sitios difieren significativamente en CSS, por lo que el bloque puede heredar fuentes o espaciados incorrectos. Ajústelo en los ajustes del bloque o añada CSS personalizado. Tercera: el archivo JSON se corrompió durante la transferencia; descárguelo e impórtelo de nuevo.

¿Cómo distingo un bloque normal de uno reutilizable en el editor?

Un bloque reutilizable en el editor Gutenberg se resalta con un borde morado y tiene un icono de reutilización (dos flechas en bucle) en la barra de herramientas. Un bloque normal tiene un borde azul sin ningún icono especial. Al pasar el cursor sobre un bloque reutilizable se muestra su nombre.

¿Se conservan los estilos del tema al exportar un bloque?

Parcialmente. El JSON incluye el marcado en línea y los atributos del bloque (color de fondo, tamaño de texto, degradados, todo lo configurado mediante los ajustes de Gutenberg). Los estilos definidos en el style.css del tema activo no se incluyen en el JSON: pertenecen al tema, no al bloque. Por lo tanto, en otro sitio con un tema diferente el bloque puede verse distinto. Para bloques donde el diseño sea crítico, configure los estilos clave mediante los propios ajustes del bloque en lugar de hacerlo a través del CSS del tema.

¿Existe un límite de tamaño para el JSON exportado?

Técnicamente no, pero bloques muy grandes con decenas de elementos anidados pueden generar un archivo JSON de varios megabytes. Al importar un archivo así entra en juego la directiva upload_max_filesize de la configuración PHP del servidor (el valor predeterminado es 2 MB). Si el JSON supera el límite, aumente la directiva en php.ini o divida el bloque en piezas más pequeñas.

Cuándo la exportación manual supera a un plugin

El método manual mediante bloques reutilizables está integrado en el núcleo de WordPress. No depende de actualizaciones de terceros, no añade código adicional a su sitio y guarda los bloques en la base de datos para que pueda verlos en la interfaz de gestión estándar.

El plugin Blocks Export Import gana en velocidad cuando solo necesita tomar un bloque y transferirlo de inmediato sin guardarlo en la biblioteca. Pero si trabaja sistemáticamente con un conjunto de bloques estándar en varios sitios, aprenda la exportación nativa con reutilizables. Una biblioteca de bloques accesible desde cualquier entrada acaba compensando ese clic extra de conversión.

Pruebe ambos métodos en un par de sitios de prueba y elija el que mejor se adapte a su flujo de trabajo. Diez minutos de configuración hoy le ahorrarán decenas de horas a lo largo de un año.