Fix type safety and environment compatibility in color resolution functions

[Copilot]

Color slug resolution functions failed in test environments and crashed on non-string inputs. Tests were failing due to missing type guards and environment checks.

Changes

• Type safety in getColorCSSVariable: Added string type check before calling .startsWith() to handle false, null, and other non-string values passed from conditional expressions

• Environment detection in lightnessFromColor: Guard getComputedStyle access with typeof document !== 'undefined' check for Node.js test environments

• Null safety in color parsing: Validate value.match(/\d+/g) result before destructuring to prevent crashes on malformed color strings

// Before - crashes on false or in Node.js
export const getColorCSSVariable = ( slug ) => {
    if ( ! slug ) return slug;
    if ( slug.startsWith( '#' ) ) return slug;  // TypeError if slug is false
    // ...
};

// After - handles all inputs safely
export const getColorCSSVariable = ( slug ) => {
    if ( ! slug || typeof slug !== 'string' ) return slug;
    if ( slug.startsWith( '#' ) ) return slug;
    // ...
};

The fixes enable useDarkBackground to safely receive boolean expressions like 'color' === backgroundType && backgroundColor without crashes.

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	271.38 KB	271.38 KB	0 B (0.00%)
Blocks	1.54 MB	1.54 MB	732 B (0.05%)
CSS	100.76 KB	100.76 KB	0 B (0.00%)
Dashboard	198.36 KB	198.36 KB	0 B (0.00%)
Onboarding	160.8 KB	160.8 KB	0 B (0.00%)
Export Import	97.73 KB	97.73 KB	0 B (0.00%)
Pro	407.08 KB	407.28 KB	205 B (0.05%)

[pirate-bot]

Plugin build for ef3f897 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