Theme.json Design Manager

توسط sulaimandauda

Theme.json Design Manager provides a user-friendly admin interface for managing design tokens that are automatically merged into your theme’s theme.json Global Styles pipeline. No code editing required.

Features

Color Palette — Define semantic color tokens with live contrast previews. Generates --wp--preset--color--{slug} CSS custom properties.
Spacing Scale — Create spacing tokens with drag-to-reorder support. Generates --wp--preset--spacing--{slug} CSS custom properties.
Typography Scale — Set font size tokens with optional fluid clamp() support. Generates --wp--preset--font-size--{slug} CSS custom properties.
Border Radius — Define radius presets. Generates --wp--custom--border-radius--{slug} CSS custom properties.
Shadow Presets — Create box-shadow tokens with live previews. Generates --wp--preset--shadow--{slug} CSS custom properties.
Hide Defaults — Optionally hide theme/core default presets from the editor for a clean, curated design system. CSS custom properties are preserved.
Reserved Slug Protection — Automatically detects and renames color slugs (e.g. “text”, “link”) that conflict with WordPress core CSS marker classes, preventing color override issues in the editor.
Diagnostics Tab — View runtime data including stored tokens, merged palette by origin, generated CSS variables, preset classes, and settings at a glance.

How It Works

The plugin stores design tokens in the WordPress database and merges them into the theme’s Global Styles via the wp_theme_json_data_theme filter. Tokens use WordPress’s native slug-based merge system — matching slugs are replaced, new slugs are appended.

All changes are fully reversible. Deactivating the plugin restores original theme styles.

Developer-Friendly

Filter hooks for extending tokens before merge (gdtm_tokens_before_merge)
Action hooks after save (gdtm_after_save) and for custom tab content (gdtm_after_tab_content)
Admin tab filter (gdtm_admin_tabs) for registering additional tabs

Upload the theme-json-design-manager folder to /wp-content/plugins/.
Activate the plugin through the Plugins screen in WordPress.
Go to Appearance Design Manager to start managing your design tokens.

سوالات متداول

Does this plugin require a specific theme?

No. It works with any block theme or classic theme that supports theme.json. WordPress 6.1 or later is required.

Will my tokens override the theme’s existing colors/spacing?

Yes, tokens with matching slugs replace the theme’s values. New slugs are appended alongside existing ones. This is WordPress’s native slug-based merge behavior.

What happens when I deactivate the plugin?

All plugin-managed tokens are removed from the Global Styles pipeline and your theme’s original theme.json values are restored. Your token data is preserved in the database so nothing is lost. When you delete (uninstall) the plugin, the data is removed for a clean uninstall.

Can I use fluid typography?

Yes. On the Typography tab, check the “Fluid” toggle and enter min/max values. WordPress will generate a responsive clamp() function automatically.

How do I reference these tokens in CSS?

Each token generates a CSS custom property. For example, a color with slug “primary” becomes var(--wp--preset--color--primary). The CSS variable name is displayed next to each token row in the admin.