fix (color picker): display theme color value

[kaeizen]

fixes #3631

Summary by CodeRabbit

• Bug Fixes
  • Enhanced color value processing in the color palette control to improve the accuracy of color extraction and display.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[coderabbitai]

Walkthrough

The pull request modifies the color palette popup component to import an extractColor utility and compute the extracted color value from the incoming value, which is then passed to the ColorPicker component instead of the raw value. This fixes the display of theme colors in the color picker.

Changes

Cohort / File(s)	Summary
Color extraction fix src/components/color-palette-control/color-palette-popup.js	Adds extractColor import, introduces extractedValue variable computed from incoming value, and passes it to ColorPicker's color prop instead of value

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

• Verify the extractColor utility correctly handles theme color formats
• Confirm extractedValue is properly computed and no edge cases are missed
• Validate the fix resolves the #000000 display issue for all theme color selections

Poem

🐰 A color so dark, now springs back to light,
With extraction magic, the hex shines so bright,
Theme colors no longer turn midnight so black,
The palette picker's got its true colors back! ✨

Pre-merge checks and finishing touches

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title 'fix (color picker): display theme color value' clearly and concisely describes the main change: fixing the color picker to properly display theme color values, which directly addresses the bug reported in issue #3631.
Linked Issues check	✅ Passed	The code changes address the core issue by extracting the color value correctly and passing it to the ColorPicker component, which directly resolves the bug where theme colors were displaying as #000000.
Out of Scope Changes check	✅ Passed	All changes are focused on fixing the color picker display issue; no unrelated modifications to gradient logic or other rendering paths are present, keeping the changeset tightly scoped.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch fix/3631-show-theme-color-value

---

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 7d01e08 and e580eac.

📒 Files selected for processing (1)

• src/components/color-palette-control/color-palette-popup.js (3 hunks)

🧰 Additional context used

🧬 Code graph analysis (1)

src/components/color-palette-control/color-palette-popup.js (1)

src/util/colors.js (2)

• extractColor (65-72)
• extractColor (65-72)

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (7)

• GitHub Check: PHP 8.2 and WP 6.7.2
• GitHub Check: build
• GitHub Check: PHP 7.3 and WP 6.5.5
• GitHub Check: PHP 7.3 and WP latest
• GitHub Check: PHP 8.2 and WP 6.5.5
• GitHub Check: PHP 8.2 and WP latest
• GitHub Check: PHP 8.2 and WP 6.6.2

🔇 Additional comments (1)

src/components/color-palette-control/color-palette-popup.js (1)

7-7: Theme color extraction into ColorPicker fixes the reported bug cleanly

Using extractColor( value ) and passing extractedValue to the ColorPicker ensures that when value is a CSS variable with a hex fallback (e.g., var(--..., #abcdef)), the picker now receives the concrete hex, which should resolve the incorrect #000000 display while leaving non-var, transparent, and undefined values effectively unchanged. The change is nicely localized to the picker input; gradient handling and palette lookups still rely on the original value, so existing behavior there remains intact.

Also applies to: 43-43, 93-93

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[github-actions]

🤖 Pull request artifacts

file	commit
pr3647-stackable-3647-merge.zip	e580eac

[github-actions]

Try this Pull Request in the WordPress playground: https://playground.wordpress.net/?mode=seamless#{"landingPage":"/wp-admin/post-new.php?post_type=page","preferredVersions":{"php":"latest","wp":"latest"},"steps":[{"step":"login","username":"admin","password":"password"},{"step":"installPlugin","pluginZipFile":{"resource":"url","url":"https://raw.githubusercontent.com/gambitph/Stackable/artifacts/pr3647-stackable-3647-merge.zip"}}]}