Crear temas en WordPress es apasionante… hasta que toca buscar el nombre exacto de un color, una tipografía o el espaciado que te han pasado desde diseño. ¿Era primary-100 o blue-main? ¿Dónde estaba ese valor? ¿Cómo lo vuelvo a copiar sin romper el flujo?
En Bubuku detectamos que estas pequeñas fricciones nos hacían perder tiempo a diario, así que decidimos crear la herramienta que nos habría gustado tener desde el principio: una extensión de Chrome pensada para el desarrollo en WordPress que permite consultar, en un solo clic, todos los tokens del archivo theme.json. Así nació Bubuku Dev for WordPress.
La extensión está diseñada para profesionales que trabajan cada día con WordPress: desarrolladores que montan temas, diseñadores que validan paletas y escalas, y perfiles de contenido que quieren entender qué estilos están disponibles. Todo sin tocar código, sin buscar entre carpetas, y sin perder el foco.
En mi caso, la uso para ver de un vistazo los colores, tipografías y estilos globales de cualquier tema FSE. Y entender el tema de forma global sin navegar entre varias pantallas.
Esta visión unificada no solo agiliza el desarrollo, sino que fortalece la conexión entre diseño y código. En Bubuku solemos partir de un design system en Figma que luego traducimos a WordPress mediante theme.json. Poder consultar los tokens directamente desde el navegador hace que ese paso sea más limpio, rápido y mantenible. Y si el proyecto escala, esa coherencia marca la diferencia.
Problemas comunes al desarrollar en WordPress (sin herramientas)
Desarrollar un tema de WordPress, especialmente con enfoque FSE, implica trabajar con muchos elementos que deberían estar bien definidos: paletas de color, tipografías, escalas de espaciado, sombras… Pero cuando no tienes una herramienta que los centralice, el flujo de trabajo se vuelve lento, confuso y propenso a errores.
¿Te suena alguna de estas situaciones?
- Tener que abrir theme.json manualmente cada vez que necesitas comprobar el slug de un color o el nombre exacto de un tamaño de fuente.
- Ir y venir entre Figma, el editor de bloques y el navegador, solo para ver cómo queda una tipografía, o si ese tono de azul es el correcto.
- Copiar un valor directamente (por ejemplo, #4285F4) sin saber si ese color ya tiene un token definido, y luego tener que buscarlo o cambiarlo.
- No tener claro si algo forma parte del design system o si es un valor suelto que alguien introdujo sin documentar.
- Perder tiempo buscando nombres de variables o equivocarte al transcribirlos al CSS o al theme.json.
Todo esto genera micro-interrupciones que, acumuladas, te hacen avanzar más lento. Y cuando trabajas en equipo, esta falta de visibilidad complica aún más la colaboración entre diseño y desarrollo.
Qué soluciona Bubuku Dev for WordPress
Bubuku Dev for WordPress nace justo para eliminar esos bloqueos del día a día. No es solo una extensión estética: es una herramienta que te da claridad inmediata sobre qué ofrece el tema con el que estás trabajando, sin abrir archivos ni perder el foco.
Con esta extensión puedes:
- Visualizar todos los tokens del theme.json de forma clara y ordenada: colores, tipografías, espaciados y sombras.
- Copiar en un clic el slug o el valor CSS de cualquier token, ya sea para usarlo en tu código, en el editor o en documentación.
- Reducir errores humanos al evitar tener que escribir a mano los slugs desde memoria.
- Ahorrar tiempo en validaciones de diseño, viendo directamente si un color o tamaño está definido, sin navegar entre archivos.
- Tener una fuente de verdad centralizada: lo que aparece en la extensión es lo que realmente está en el tema activo.
Esto hace que trabajar con theme.json deje de ser una tarea tediosa o técnica, y se convierta en un proceso visual, rápido y más accesible, incluso para quienes no tocan código a diario.
Nota rápida: Esta extensión está pensada para temas FSE. Solo lee propiedades que estén definidas en el archivo theme.json del tema activo.
Cómo funciona la extensión: vista por tokens
Al abrir la extensión en una web con un tema FSE activo, verás una interfaz sencilla, pero potente, dividida en cuatro secciones clave: Color, Tipografía, Espaciado y Sombras. Cada una extrae directamente los valores definidos en theme.json y te permite trabajar con ellos de forma visual y rápida.
Colores
Visualizas todos los colores sólidos y gradientes disponibles, junto con su valor hexadecimal y su slug. Puedes copiar fácilmente el slug para usarlo en tus estilos o en el propio theme.json.
Ejemplo práctico: estás diseñando un botón y necesitas usar el color principal de marca. Con la extensión lo localizas visualmente, copias el slug (primary-500) y lo aplicas directamente sin adivinar.
Tipografía
Aquí encuentras todas las familias tipográficas y sus tamaños definidos. Puedes probar cómo queda el texto cambiando de familia y escala desde un selector, lo cual resulta útil para validar jerarquías visuales.
También puedes copiar el slug de la familia (heading-font) y el del tamaño (xl), algo especialmente útil para mantener la coherencia con el diseño original en Figma.
Espaciado
Esta sección muestra los distintos tamaños de espaciado disponibles (márgenes, paddings, gaps…), también con su slug correspondiente. Ideal para aplicar medidas consistentes en componentes o patrones.
Sombras
Verás las sombras activas en el tema, con su valor CSS completo (0px 2px 4px rgba(0, 0, 0, 0.1)) y su slug (card-shadow). Puedes copiar cualquiera de los dos para usarlo donde lo necesites.
Ventajas para diseñadores y otros perfiles no técnicos
Aunque Bubuku Dev for WordPress nació pensando en el desarrollo, pronto vimos que también resulta muy útil para perfiles de diseño, QA o gestión de contenidos. Especialmente en proyectos donde el diseño está definido por un sistema visual y se busca mantener la coherencia sin entrar en el código.
Para diseñadores
- Puedes comprobar de forma rápida si los tokens del design system están correctamente integrados en WordPress.
- Puedes previsualizar tipografías y colores sin abrir el editor.
- Entregar a desarrollo el slug exacto de un color o tamaño, evita malentendidos y acelera los tiempos.
“¿Este H2 usa el tamaño lg o xl? ¿Este verde es el success-light o el brand-accent?” → Lo ves al instante.
Para perfiles de contenido o QA
- Permite ver qué opciones estilísticas están disponibles en el tema activo sin necesidad de navegar por el editor completo.
- Ayuda a detectar inconsistencias entre lo que se espera visualmente (por diseño o marca) y lo que realmente ofrece el tema.
En resumen, aunque es una herramienta de desarrollo para WordPress, su uso va mucho más allá del código. Funciona como un visor práctico del sistema de diseño aplicado, accesible desde el navegador y útil para todo el equipo.
Compatibilidad actual
En su versión actual, Bubuku Dev for WordPress está optimizada para funcionar en sitios con temas Full Site Editing (FSE), ya que lee directamente el archivo theme.json para mostrar los tokens definidos.
Qué ofrece hoy
- Funciona con cualquier tema que implemente correctamente un theme.json.
- Detecta automáticamente el idioma del navegador (español o inglés).
- Soporta entornos con autenticación básica (staging o desarrollo).
- Diseño adaptativo, aunque se recomienda una pantalla mayor de 1028 px para una experiencia óptima.
Si el tema activo no define ciertos tokens, la extensión simplemente no los muestra. No inventa valores: solo enseña lo que realmente está en el theme.json.
Y como siempre, priorizaremos las sugerencias de quienes la usáis cada día. Ya estamos recibiendo feedback que está marcando el camino. Si ves algo que te gustaría mejorar o añadir, ¡cuéntanoslo!
Una extensión pensada para evolucionar con WordPress
WordPress está cambiando. El editor de sitios, los bloques, el theme.json, los patrones… todo apunta a una forma de construir más visual, más estructurada y más colaborativa. Bubuku Dev for WordPress nace dentro de ese cambio, con la idea de facilitar el trabajo diario a quienes lo vivimos de cerca: desarrolladores, diseñadores y gestores de contenido.
Aunque hoy la extensión se centra en mostrar los tokens del theme.json, la idea es que crezca y se adapte con el tiempo. No queremos que sea una herramienta más, sino un recurso útil, simple y directo que acompañe al flujo real de trabajo.
En Bubuku usamos esta extensión cada día y sabemos lo que se gana cuando algo te ahorra clics, dudas o búsquedas innecesarias. Por eso la compartimos con la comunidad, y por eso queremos mejorarla con tu ayuda.
Preguntas frecuentes sobre Bubuku Dev for WordPress
No. Actualmente, solo funciona con temas FSE (Full Site Editing), ya que necesita que el sitio tenga un archivo theme.json bien definido. Si no detecta ese archivo, no mostrará ningún token.
Sí. Si estás trabajando en un entorno protegido con autenticación básica (como htaccess), la extensión te pedirá usuario y contraseña la primera vez que acceda al theme.json, y no volverá a pedirlos.
De momento, la extensión está disponible solo para Google Chrome. No está publicada en otros navegadores como Firefox o Edge.
Sí. De hecho, muchos diseñadores y perfiles de contenido la usan como visor de estilos del tema: colores, tipografías, espaciados y sombras. No necesitas conocimientos técnicos para usarla.
No. Solo lee el archivo theme.json, no modifica ni escribe nada en el sitio. Es 100 % segura para usar en producción o desarrollo.
