Convert theme color slugs to CSS variables instead of resolving to hex

[Copilot]

Otter blocks were not handling theme.json color slugs, causing them to revert to defaults. Core WordPress blocks convert slugs to CSS variable references that remain connected to theme settings.

Changes

Utility functions

• Added getColorCSSVariable(slug) - converts "primary" → "var(--wp--preset--color--primary)"
• Added useColorResolver() hook returning the converter
• Added PHP equivalents: Base_CSS::get_color_css_variable() and resolve_color_value()

Block updates
Applied color resolution to 15 blocks: accordion, tabs, advanced-heading, button, section, posts, review, progress-bar, circle-counter, countdown, sharing-icons, popup, flip, font-awesome-icons, lottie

Unit tests
Added 13 tests covering slug conversion, passthrough of hex/rgb/hsl values, and edge cases

Technical approach

WordPress generates CSS variables from theme.json. By referencing these variables instead of storing resolved color values, blocks automatically reflect theme color changes without re-saving.

// Before: slug not converted
const inlineStyles = {
  '--title-color': attributes.titleColor  // "primary" → invalid
};

// After: slug → CSS variable
const resolveColor = useColorResolver();
const inlineStyles = {
  '--title-color': resolveColor(attributes.titleColor)  // "var(--wp--preset--color--primary)"
};

Hex/RGB/HSL values and existing CSS variables pass through unchanged (backward compatible).

Original prompt

---

This section details on the original issue you should resolve

<issue_title>Color slugs are not working in Otter Blocks</issue_title>
<issue_description>### Description

Currently if we reference in the color attributes a color slug from the theme.json Otter is not using that and is reverting to the defaults

Similar with the core blocks it should use the slug name when that is used as value.

Step-by-step reproduction instructions

1. Pick a color slug form theme.json, let's say base
2. Pick a core block, let's say button. You can use this snippet:

window.wp.data.dispatch('core/block-editor').insertBlocks(window.wp.blocks.createBlock(
        'core/paragraph',
         { textColor:"base", content:"Test"},
         []
       ))

You can see the paragraph color is used corectly.

3. Pick a Otter block, lets say a heading. You can use this snippet:

window.wp.data.dispatch('core/block-editor').insertBlocks(window.wp.blocks.createBlock(
         'themeisle-blocks/advanced-heading',
          { headingColor:"base", content:"Test"},
          []
        ))

You can see that is not using the right color and is reverting to the default.

Screenshots, screen recording, code snippet or Help Scout ticket

No response

Environment info

No response

Is the issue you are reporting a regression

No</issue_description>

Comments on the Issue (you are @copilot in this section)

• Fixes Color slugs are not working in Otter Blocks #2742

---

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.

[selul]

@copilot apply the fix to all blocks that uses attributes for colors.

[Copilot]

@copilot apply the fix to all blocks that uses attributes for colors.

Applied the color slug resolution fix to all 15 blocks with color attributes:

Commits:

• ec91125: High-priority blocks (button, section, icons, posts, review, progress-bar)
• b3417e8: Medium-priority blocks (circle-counter, countdown, sharing-icons, popup, flip)

Pattern applied:

• JavaScript: useColorResolver() hook wraps all color attributes
• PHP: Base_CSS::resolve_color_value() format function on all color properties

All blocks now properly resolve theme color slugs from theme.json while remaining backward compatible with hex/rgb/hsl values.

Warning

Firewall rules blocked me from connecting to one or more addresses (expand for details)

I tried to connect to the following addresses, but was blocked by firewall rules:

• https://storage.googleapis.com/chromium-browser-snapshots/Linux_x64/1045629/chrome-linux.zip
  • Triggering command: /home/REDACTED/work/_temp/ghcca-node/node/bin/node node install.js (http block)

If you need me to access, download, or install something from one of these locations, you can either:

• Configure Actions setup steps to set up my environment, which run before the firewall is enabled
• Add the appropriate URLs or hosts to the custom allowlist in this repository's Copilot coding agent settings (admins only)

[pirate-bot]

Bundle Size Diff

Package	Old Size	New Size	Diff
Animations	276.77 KB	276.77 KB	0 B (0.00%)
Blocks	1.55 MB	1.55 MB	826 B (0.05%)
CSS	105.9 KB	105.9 KB	0 B (0.00%)
Dashboard	204.08 KB	204.08 KB	0 B (0.00%)
Onboarding	165.94 KB	165.94 KB	0 B (0.00%)
Export Import	102.86 KB	102.86 KB	0 B (0.00%)
Pro	412.21 KB	412.55 KB	351 B (0.08%)

[pirate-bot]

Plugin build for dda1c64 is ready 🛎️!

• Download Otter – Page Builder Blocks & Extensions for Gutenberg - Production ~ Development
• Download Otter Pro - Production ~ Development
• Download Blocks Animation - Production ~ Development
• Download Blocks CSS - Production ~ Development
• Download Blocks Export Import - Production ~ Development

[pirate-bot]

E2E Tests

Playwright Test Status:

Performance Results

serverResponse: {"q25":427.1,"q50":429.05,"q75":462.5,"cnt":10}, firstPaint: {"q25":363.9,"q50":420.75,"q75":450.7,"cnt":10}, domContentLoaded: {"q25":1582.7,"q50":1605.7,"q75":1645.7,"cnt":10}, loaded: {"q25":1583,"q50":1606.05,"q75":1646,"cnt":10}, firstContentfulPaint: {"q25":3347.5,"q50":3367.2,"q75":3450.1,"cnt":10}, firstBlock: {"q25":6860.9,"q50":7029.65,"q75":7180.2,"cnt":10}, type: {"q25":12.83,"q50":13.61,"q75":14,"cnt":10}, typeWithoutInspector: {"q25":11.9,"q50":12.29,"q75":12.83,"cnt":10}, typeWithTopToolbar: {"q25":15.79,"q50":16.82,"q75":18.64,"cnt":10}, typeContainer: {"q25":6.94,"q50":8.85,"q75":10.27,"cnt":10}, focus: {"q25":52.02,"q50":56.27,"q75":61.17,"cnt":10}, inserterOpen: {"q25":16.67,"q50":17.72,"q75":18.26,"cnt":10}, inserterSearch: {"q25":5.73,"q50":5.91,"q75":6.01,"cnt":10}, inserterHover: {"q25":2.41,"q50":2.51,"q75":2.85,"cnt":20}, loadPatterns: {"q25":1098.08,"q50":1116.54,"q75":1154.28,"cnt":10}, listViewOpen: {"q25":86.23,"q50":90.72,"q75":100.76,"cnt":10}

[pirate-bot]

🎉 This PR is included in version 3.1.8 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀