Theme.json Design Manager
| 开发者 | sulaimandauda |
|---|---|
| 更新时间 | 2026年3月25日 03:01 |
| PHP版本: | 7.4 及以上 |
| WordPress版本: | 6.9 |
| 版权: | GPLv2 or later |
| 版权网址: | 版权信息 |
详情介绍:
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.
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-managerfolder 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.
更新日志:
- Initial release.
- Color palette, spacing scale, typography scale, border radius, and shadow preset management.
- Live previews for colors, radius, and shadows.
- Fluid typography with clamp() support.
- Drag-to-reorder for spacing tokens.
- Settings tab with toggles to hide default presets from the editor.
- Reserved slug protection — auto-renames color slugs that collide with WordPress core marker classes.
- Diagnostics tab — runtime view of stored tokens, merged palette, CSS variables, and preset classes.
- Base color fallback — ensures
--wp--preset--color--basestays defined when replacing the theme palette. - Full theme.json integration via
wp_theme_json_data_themefilter. - Extensibility hooks for developers.