Snippets Gutenberg: Guía práctica para desarrolladores (Parte 2)

Cuando trabajas con Gutenberg y necesitas que los estilos cambien por página (por ejemplo, el color primario, tipografías o layouts), no existe una sola forma “correcta” de hacerlo.

Tenemos varias opciones que puedes implementar según la complejidad de tu proyecto:

Usar useEntityProp para manejar metadatos reactivos por página
Suscribirte al store de Gutenberg (subscribe) para detectar cambios globales
Integrar cambios dinámicos con theme.json en tiempo real

Cada enfoque tiene sus ventajas, y combinarlos te permite construir una solución sólida, escalable y totalmente dinámica dentro del editor.

useEntityProp — La base reactiva

Este hook conecta directamente con los metadatos del post actual.

const [meta, setMeta] = useEntityProp('postType', postType, 'meta');

Ventajas:

Reactivo
Scoped por página (ID automático)
Persistente al guardar

Ejemplo:

const updateMeta = (key, value) => {
	setMeta({ ...meta, [key]: value });
};

1. useEffect — Aplicación inmediata (UI en vivo)

Aquí es donde ocurre la magia visual.

useEffect(() => {
	if (!meta?.zd_color_primary) return;

	document.documentElement.style.setProperty(
		'--zd-color-primary',
		meta.zd_color_primary
	);

}, [meta?.zd_color_primary]);

Resultado:

Cambios instantáneos
Sin recargar editor
Totalmente dinámico

2. subscribe — Escuchar TODO Gutenberg

Esto es útil cuando quieres reaccionar fuera de tu componente

import { subscribe, select } from '@wordpress/data';

useEffect(() => {
	const unsubscribe = subscribe(() => {
		const meta = select('core/editor').getEditedPostAttribute('meta');

		if (meta?.zd_color_primary) {
			document.documentElement.style.setProperty(
				'--zd-color-primary',
				meta.zd_color_primary
			);
		}
	});

	return () => unsubscribe();
}, []);

✔ Ventajas:

Detecta cambios globales
Funciona incluso si otro plugin modifica meta

3. Integración con theme.json (runtime)

Aquí es donde elevas todo a nivel profesional.

Puedes modificar settings del editor en vivo:

import { dispatch } from '@wordpress/data';

useEffect(() => {
	if (!meta?.zd_color_primary) return;

	dispatch('core/block-editor').updateSettings({
		colors: [
			{
				name: 'Primary',
				slug: 'primary',
				color: meta.zd_color_primary,
			},
		],
	});

}, [meta?.zd_color_primary]);

Nota:

Esto sobreescribe la paleta
No es persistente (solo runtime)

CSS dinámico con variables (recomendado)

Define una base en tu tema:

:root {
	--zd-color-primary: #000;
}

a {
	color: var(--zd-color-primary);
}

.wp-block-button .wp-element-button {
	background-color: var(--zd-color-primary);
}

Arquitectura final recomendada

Combina todo así:

Capa	Función
`useEntityProp`	Estado por página
`useEffect`	Reacción inmediata
`subscribe`	Observador global
CSS variables	Render visual
`updateSettings`	Integración con bloques

Resultado

Con este patrón obtienes:

Estilos dinámicos por página
Cambios en tiempo real
Compatibilidad con bloques nativos
Escalabilidad tipo theme builder