Trabajar con theme.json se ha convertido en una parte habitual del desarrollo de temas modernos para WordPress, especialmente con Full Site Editing (FSE). Bubuku ha publicado Bubuku Dev for WordPress, una extensión para Google Chrome que permite consultar desde el navegador los colores, tipografías, espaciados y sombras definidos en este archivo, además de copiar directamente sus valores y slugs sin tener que buscar manualmente dentro del código.
Las claves de Bubuku Dev for WordPress en 20 segundos
- La extensión convierte los valores de
theme.jsonen una interfaz visual accesible desde Chrome. - Permite consultar colores, tipografías, espaciados y sombras del tema activo.
- Los desarrolladores pueden copiar directamente valores CSS y slugs.
- Está orientada a temas que utilizan Full Site Editing (FSE).
- También puede resultar útil para diseñadores, responsables de contenidos y equipos de QA que necesiten comprobar el sistema visual de una web.
La herramienta intenta resolver un problema pequeño pero recurrente durante el desarrollo de WordPress. Un diseñador puede pedir que determinado bloque utilice el color principal del proyecto, pero el desarrollador necesita saber si ese color corresponde a primary, primary-500, brand-blue o cualquier otro identificador definido por el tema.
La información está disponible en theme.json, pero consultarla normalmente implica abrir el proyecto, localizar el archivo y buscar el valor correspondiente.
Bubuku Dev for WordPress coloca esa información directamente en el navegador.
La extensión está disponible actualmente en Chrome Web Store, donde figura en su versión 2.1 y con una última actualización fechada el 18 de diciembre de 2025. Su desarrollador declara además en la ficha de la tienda que la extensión no recopila ni utiliza datos de los usuarios.
theme.json gana importancia en el desarrollo moderno de WordPress
La utilidad de una herramienta de este tipo se entiende mejor observando cómo ha evolucionado WordPress durante los últimos años.
El desarrollo tradicional de temas dependía en gran medida de PHP, plantillas, hojas CSS y diferentes opciones creadas por cada desarrollador. El editor de bloques y posteriormente Full Site Editing han ido trasladando parte de esa configuración hacia un sistema más estructurado.
theme.json ocupa una posición importante dentro de este modelo.
El archivo permite definir configuraciones y estilos relacionados con aspectos como las paletas de colores, tipografías, tamaños, espaciados y otros elementos que después utiliza WordPress.
Esto permite que un tema establezca un vocabulario visual compartido.
En lugar de introducir repetidamente un color hexadecimal como #4285F4, por ejemplo, el proyecto puede trabajar con un token determinado. Si ese valor cambia posteriormente, resulta mucho más sencillo mantener la coherencia del diseño.
El enfoque resulta especialmente útil cuando una web parte de un sistema de diseño creado previamente en herramientas como Figma.
El equipo puede definir allí colores, escalas tipográficas y espaciados y trasladar posteriormente esos criterios al tema de WordPress.
El problema aparece cuando alguien necesita comprobar rápidamente qué valores terminaron realmente implementados.
Bubuku Dev for WordPress actúa precisamente como un visor de esa información.
Colores, tipografías y espaciados sin abrir theme.json
La extensión organiza actualmente la información en cuatro grandes apartados: colores, tipografía, espaciado y sombras.
En el apartado de colores pueden visualizarse los tonos y gradientes definidos por el tema junto con sus correspondientes identificadores. Esto permite localizar visualmente un color y copiar el slug necesario para utilizarlo posteriormente.
El apartado tipográfico muestra las familias y tamaños disponibles.
Esta función puede ser especialmente práctica durante la revisión de una web. Si un encabezado debería utilizar un tamaño concreto del sistema de diseño, el desarrollador o diseñador puede comprobar las opciones disponibles sin tener que inspeccionar manualmente theme.json.
Algo similar ocurre con el espaciado.
Los márgenes, rellenos y separaciones entre componentes tienden a generar pequeñas inconsistencias cuando cada desarrollador introduce valores manualmente. Utilizar una escala común ayuda a mantener cierta uniformidad entre páginas y componentes.
La cuarta sección está dedicada a las sombras.
En este caso la extensión permite consultar tanto el valor CSS completo como el slug correspondiente.
La herramienta no genera estos valores ni modifica el tema. Muestra aquello que ya está definido en el theme.json del tema activo, una distinción importante para entender su función.
Una herramienta que también puede utilizar diseño y QA
Aunque su nombre la presenta como una herramienta para desarrolladores, su utilidad puede extenderse a otros perfiles involucrados en un proyecto WordPress.
Un diseñador puede utilizarla para comprobar si la paleta implementada coincide con el sistema definido durante la fase de diseño.
También puede comprobar rápidamente las familias tipográficas o escalas disponibles sin necesidad de pedir a desarrollo que abra el proyecto.
Los equipos de control de calidad (QA) tienen otro posible caso de uso.
Cuando detectan una inconsistencia visual pueden comprobar qué opciones proporciona realmente el tema antes de determinar si existe un error de implementación.
Incluso determinados responsables de contenidos pueden beneficiarse de disponer de una referencia visual de los estilos existentes.
Esto tiene especial sentido en proyectos WordPress grandes, donde mantener una identidad visual coherente puede resultar complicado a medida que aumenta el número de páginas, bloques y personas con capacidad para editar contenido.
La extensión funciona así como una pequeña ventana al sistema de diseño que hay detrás de la web.
Sus limitaciones: FSE, theme.json y Chrome
La herramienta tiene actualmente varias limitaciones que conviene conocer.
La principal es que está pensada para temas Full Site Editing que dispongan de un theme.json correctamente configurado. Si determinada propiedad no está definida en el archivo, la extensión no puede mostrarla.
Tampoco sustituye a las herramientas de desarrollo del navegador ni a utilidades especializadas en depuración de WordPress.
Su función es mucho más concreta: facilitar el acceso a los valores que conforman el sistema visual del tema.
Actualmente se distribuye como extensión para Google Chrome. La documentación facilitada indica que todavía no existe una versión publicada específicamente para Firefox o Edge.
La extensión puede trabajar además con entornos protegidos mediante autenticación básica, algo habitual en sitios de staging o durante el desarrollo. En estos casos puede solicitar las credenciales necesarias para acceder al theme.json.
Según la información publicada por sus desarrolladores, la extensión únicamente lee ese archivo y no modifica ni escribe contenido dentro de la instalación WordPress.
Pequeñas herramientas para un WordPress cada vez más estructurado
Bubuku Dev for WordPress no pretende sustituir un IDE ni convertirse en un nuevo entorno de desarrollo.
Su propuesta es bastante más sencilla: reducir los pequeños saltos entre navegador, editor de código, Figma y documentación que se producen continuamente al desarrollar una web.
Es precisamente ahí donde puede resultar práctica.
El crecimiento del editor de bloques y de theme.json está haciendo que los temas modernos se parezcan cada vez más a sistemas de diseño estructurados, donde colores, tipografías y espaciados dejan de ser valores dispersos para convertirse en elementos reutilizables.
Eso también crea espacio para herramientas especializadas capaces de visualizar esa información.
Para proyectos pequeños, abrir theme.json y buscar manualmente un valor probablemente seguirá siendo suficiente. En desarrollos con equipos de diseño, programación, contenidos y QA, disponer de una representación visual común puede reducir errores y evitar dudas sobre qué estilos pertenecen realmente al tema.
La extensión de Bubuku parte de una necesidad concreta y relativamente modesta. Su interés está precisamente en eso: hacer visible desde el navegador una información que WordPress ya utiliza internamente para construir la identidad visual del sitio.
Preguntas frecuentes
¿Qué es Bubuku Dev for WordPress?
Es una extensión para Chrome que permite visualizar información definida en el archivo theme.json de un tema WordPress, incluyendo colores, tipografías, espaciados y sombras.
¿Funciona con cualquier tema de WordPress?
Está orientada a temas Full Site Editing (FSE) que utilicen correctamente theme.json. Si el tema no proporciona los datos necesarios mediante este archivo, la extensión no podrá mostrarlos.
¿La extensión modifica el theme.json?
No. Según la documentación de Bubuku, la herramienta se limita a leer la información y presentarla mediante una interfaz visual; no escribe ni modifica el archivo.
¿Puede utilizarla alguien que no sea desarrollador?
Sí. Diseñadores, responsables de contenidos o perfiles de QA pueden utilizarla para consultar los estilos disponibles en el tema sin necesidad de abrir directamente el código.