{"id":289171,"date":"2026-03-24T18:38:30","date_gmt":"2026-03-24T18:38:30","guid":{"rendered":"https:\/\/wordpress.org\/plugins\/theme-json-design-manager\/"},"modified":"2026-03-24T18:37:58","modified_gmt":"2026-03-24T18:37:58","slug":"theme-json-design-manager","status":"publish","type":"plugin","link":"https:\/\/es-co.wordpress.org\/plugins\/theme-json-design-manager\/","author":23457284,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_crdt_document":"","version":"1.0.0","stable_tag":"1.0.0","tested":"6.9.4","requires":"6.1","requires_php":"7.4","requires_plugins":null,"header_name":"Theme.json Design Manager","header_author":"Sulaiman Dauda","header_description":"A lean, core-aligned plugin for managing design tokens (colors, spacing, typography, border radius, shadows) that integrate directly with WordPress Global Styles via theme.json.","assets_banners_color":"85ccba","last_updated":"2026-03-24 18:37:58","external_support_url":"","external_repository_url":"","donate_link":"","header_plugin_uri":"","header_author_uri":"","rating":0,"author_block_rating":0,"active_installs":0,"downloads":60,"num_ratings":0,"support_threads":0,"support_threads_resolved":0,"author_block_count":0,"sections":["description","installation","faq","changelog"],"tags":{"1.0.0":{"tag":"1.0.0","author":"sulaimandauda","date":"2026-03-24 18:37:58"}},"upgrade_notice":{"1.0.0":"

Initial release.<\/p>"},"ratings":[],"assets_icons":{"icon-256x256.png":{"filename":"icon-256x256.png","revision":3490305,"resolution":"256x256","location":"assets","locale":""}},"assets_banners":{"banner-1544x500.png":{"filename":"banner-1544x500.png","revision":3490286,"resolution":"1544x500","location":"assets","locale":""},"banner-772x250.png":{"filename":"banner-772x250.png","revision":3490286,"resolution":"772x250","location":"assets","locale":""}},"assets_blueprints":{},"all_blocks":[],"tagged_versions":["1.0.0"],"block_files":[],"assets_screenshots":{"screenshot-1.png":{"filename":"screenshot-1.png","revision":3490286,"resolution":"1","location":"assets","locale":""},"screenshot-2.png":{"filename":"screenshot-2.png","revision":3490286,"resolution":"2","location":"assets","locale":""},"screenshot-3.png":{"filename":"screenshot-3.png","revision":3490286,"resolution":"3","location":"assets","locale":""},"screenshot-4.png":{"filename":"screenshot-4.png","revision":3490286,"resolution":"4","location":"assets","locale":""},"screenshot-5.png":{"filename":"screenshot-5.png","revision":3490286,"resolution":"5","location":"assets","locale":""},"screenshot-6.png":{"filename":"screenshot-6.png","revision":3490286,"resolution":"6","location":"assets","locale":""}},"screenshots":{"1":"Color palette management with live contrast previews.","2":"Spacing scale with drag-to-reorder functionality.","3":"Typography scale with fluid clamp() support.","4":"Border radius presets with live corner previews.","5":"Shadow presets with live box-shadow previews."},"jetpack_post_was_ever_published":false},"plugin_section":[],"plugin_tags":[148857,68566,254228,201279,205718],"plugin_category":[],"plugin_contributors":[258545],"plugin_business_model":[],"class_list":["post-289171","plugin","type-plugin","status-publish","hentry","plugin_tags-block-editor","plugin_tags-css-variables","plugin_tags-design-tokens","plugin_tags-global-styles","plugin_tags-theme-json","plugin_contributors-sulaimandauda","plugin_committers-sulaimandauda"],"banners":{"banner":"https:\/\/ps.w.org\/theme-json-design-manager\/assets\/banner-772x250.png?rev=3490286","banner_2x":"https:\/\/ps.w.org\/theme-json-design-manager\/assets\/banner-1544x500.png?rev=3490286","banner_rtl":false,"banner_2x_rtl":false},"icons":{"svg":false,"icon":"https:\/\/ps.w.org\/theme-json-design-manager\/assets\/icon-256x256.png?rev=3490305","icon_2x":"https:\/\/ps.w.org\/theme-json-design-manager\/assets\/icon-256x256.png?rev=3490305","generated":false},"screenshots":[{"src":"https:\/\/ps.w.org\/theme-json-design-manager\/assets\/screenshot-1.png?rev=3490286","caption":"Color palette management with live contrast previews."},{"src":"https:\/\/ps.w.org\/theme-json-design-manager\/assets\/screenshot-2.png?rev=3490286","caption":"Spacing scale with drag-to-reorder functionality."},{"src":"https:\/\/ps.w.org\/theme-json-design-manager\/assets\/screenshot-3.png?rev=3490286","caption":"Typography scale with fluid clamp() support."},{"src":"https:\/\/ps.w.org\/theme-json-design-manager\/assets\/screenshot-4.png?rev=3490286","caption":"Border radius presets with live corner previews."},{"src":"https:\/\/ps.w.org\/theme-json-design-manager\/assets\/screenshot-5.png?rev=3490286","caption":"Shadow presets with live box-shadow previews."},{"src":"https:\/\/ps.w.org\/theme-json-design-manager\/assets\/screenshot-6.png?rev=3490286","caption":""}],"raw_content":"\n

Theme.json Design Manager<\/strong> provides a user-friendly admin interface for managing design tokens that are automatically merged into your theme's theme.json<\/code> Global Styles pipeline. No code editing required.<\/p>\n\n

Features<\/h4>\n\n
    \n
  • Color Palette<\/strong> \u2014 Define semantic color tokens with live contrast previews. Generates --wp--preset--color--{slug}<\/code> CSS custom properties.<\/li>\n
  • Spacing Scale<\/strong> \u2014 Create spacing tokens with drag-to-reorder support. Generates --wp--preset--spacing--{slug}<\/code> CSS custom properties.<\/li>\n
  • Typography Scale<\/strong> \u2014 Set font size tokens with optional fluid clamp()<\/code> support. Generates --wp--preset--font-size--{slug}<\/code> CSS custom properties.<\/li>\n
  • Border Radius<\/strong> \u2014 Define radius presets. Generates --wp--custom--border-radius--{slug}<\/code> CSS custom properties.<\/li>\n
  • Shadow Presets<\/strong> \u2014 Create box-shadow tokens with live previews. Generates --wp--preset--shadow--{slug}<\/code> CSS custom properties.<\/li>\n
  • Hide Defaults<\/strong> \u2014 Optionally hide theme\/core default presets from the editor for a clean, curated design system. CSS custom properties are preserved.<\/li>\n
  • Reserved Slug Protection<\/strong> \u2014 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.<\/li>\n
  • Diagnostics Tab<\/strong> \u2014 View runtime data including stored tokens, merged palette by origin, generated CSS variables, preset classes, and settings at a glance.<\/li>\n<\/ul>\n\n

    How It Works<\/h4>\n\n

    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<\/code> filter. Tokens use WordPress's native slug-based merge system \u2014 matching slugs are replaced, new slugs are appended.<\/p>\n\n

    All changes are fully reversible<\/strong>. Deactivating the plugin restores original theme styles.<\/p>\n\n

    Developer-Friendly<\/h4>\n\n
      \n
    • Filter hooks<\/strong> for extending tokens before merge (gdtm_tokens_before_merge<\/code>)<\/li>\n
    • Action hooks<\/strong> after save (gdtm_after_save<\/code>) and for custom tab content (gdtm_after_tab_content<\/code>)<\/li>\n
    • Admin tab filter<\/strong> (gdtm_admin_tabs<\/code>) for registering additional tabs<\/li>\n<\/ul>\n\n\n
        \n
      1. Upload the theme-json-design-manager<\/code> folder to \/wp-content\/plugins\/<\/code>.<\/li>\n
      2. Activate the plugin through the Plugins<\/strong> screen in WordPress.<\/li>\n
      3. Go to Appearance \u2192 Design Manager<\/strong> to start managing your design tokens.<\/li>\n<\/ol>\n\n\n
        \n

        Does this plugin require a specific theme?<\/h3><\/dt>\n

        No. It works with any block theme or classic theme that supports theme.json<\/code>. WordPress 6.1 or later is required.<\/p><\/dd>\n

        Will my tokens override the theme's existing colors\/spacing?<\/h3><\/dt>\n

        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.<\/p><\/dd>\n

        What happens when I deactivate the plugin?<\/h3><\/dt>\n

        All plugin-managed tokens are removed from the Global Styles pipeline and your theme's original theme.json<\/code> 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.<\/p><\/dd>\n

        Can I use fluid typography?<\/h3><\/dt>\n

        Yes. On the Typography tab, check the \"Fluid\" toggle and enter min\/max values. WordPress will generate a responsive clamp()<\/code> function automatically.<\/p><\/dd>\n

        How do I reference these tokens in CSS?<\/h3><\/dt>\n

        Each token generates a CSS custom property. For example, a color with slug \"primary\" becomes var(--wp--preset--color--primary)<\/code>. The CSS variable name is displayed next to each token row in the admin.<\/p><\/dd>\n\n<\/dl>\n\n\n

        1.0.0<\/h4>\n\n
          \n
        • Initial release.<\/li>\n
        • Color palette, spacing scale, typography scale, border radius, and shadow preset management.<\/li>\n
        • Live previews for colors, radius, and shadows.<\/li>\n
        • Fluid typography with clamp() support.<\/li>\n
        • Drag-to-reorder for spacing tokens.<\/li>\n
        • Settings tab with toggles to hide default presets from the editor.<\/li>\n
        • Reserved slug protection \u2014 auto-renames color slugs that collide with WordPress core marker classes.<\/li>\n
        • Diagnostics tab \u2014 runtime view of stored tokens, merged palette, CSS variables, and preset classes.<\/li>\n
        • Base color fallback \u2014 ensures --wp--preset--color--base<\/code> stays defined when replacing the theme palette.<\/li>\n
        • Full theme.json integration via wp_theme_json_data_theme<\/code> filter.<\/li>\n
        • Extensibility hooks for developers.<\/li>\n<\/ul>","raw_excerpt":"Manage design tokens \u2014 colors, spacing, typography, border radius, and shadows \u2014 that integrate with WordPress Global Styles via theme.json.","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/es-co.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin\/289171","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/es-co.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin"}],"about":[{"href":"https:\/\/es-co.wordpress.org\/plugins\/wp-json\/wp\/v2\/types\/plugin"}],"replies":[{"embeddable":true,"href":"https:\/\/es-co.wordpress.org\/plugins\/wp-json\/wp\/v2\/comments?post=289171"}],"author":[{"embeddable":true,"href":"https:\/\/es-co.wordpress.org\/plugins\/wp-json\/wporg\/v1\/users\/sulaimandauda"}],"wp:attachment":[{"href":"https:\/\/es-co.wordpress.org\/plugins\/wp-json\/wp\/v2\/media?parent=289171"}],"wp:term":[{"taxonomy":"plugin_section","embeddable":true,"href":"https:\/\/es-co.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_section?post=289171"},{"taxonomy":"plugin_tags","embeddable":true,"href":"https:\/\/es-co.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_tags?post=289171"},{"taxonomy":"plugin_category","embeddable":true,"href":"https:\/\/es-co.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_category?post=289171"},{"taxonomy":"plugin_contributors","embeddable":true,"href":"https:\/\/es-co.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_contributors?post=289171"},{"taxonomy":"plugin_business_model","embeddable":true,"href":"https:\/\/es-co.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_business_model?post=289171"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}