fix: apply multicolor to icon in editor and show custom icon color in frontend

[kaeizen]

Summary by CodeRabbit

• Bug Fixes

  • Fixed icon state updates for multicolor icons to apply consistently.

• New Features

  • Added support for applying custom icon colors when enabled in the icon list.

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

[coderabbitai]

Walkthrough

Two small adjustments to icon component logic and styling: the multicolor icon path now unconditionally reapplies and persists the icon state when the color type is multicolor, and the icon-list block conditionally applies a CSS class based on custom icon color settings.

Changes

Cohort / File(s)	Summary
Icon state management src/block-components/icon/index.js	Moves setIcon() and lastIconValueRef assignment outside nested condition in multicolor branch, ensuring icon state is always updated when iconColorType === 'multicolor' regardless of inner cleanup condition outcome.
Icon-list CSS composition src/block/icon-list/save.js	Adds conditional 'stk__use-custom-icon-color' CSS class via classnames when attributes.useCustomIconColor is truthy.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~18 minutes

• src/block-components/icon/index.js: Verify that moving state assignments outside the conditional does not introduce unintended side effects or create redundant updates; confirm the multicolor icon flow remains correct.
• src/block/icon-list/save.js: Ensure the CSS class application is properly gated and that the class is defined and behaves as intended in styling.

Possibly related PRs

• fix: colors of page icons not being shown/applied #3665: Directly modifies multicolor icon handling in the same file with similar control flow adjustments for icon state updates.
• fix: icon optimization #3660: Changes icon component state/update flow involving refs and setIcon handling in the same icon component.
• fix (icon list): don't override custom icon colors #3648: Addresses preservation of multicolor SVG icon rendering, complementing the runtime icon reapplication logic in this PR.

Poem

🎨 A rabbit hops through icons bright,
Multicolor dreams held tight,
Control flow shifts, state persists true,
Custom colors shine right through—
CSS classes dance in view! 🐰✨

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly and specifically summarizes the main changes: applying multicolor functionality to icons in the editor and displaying custom icon colors in the frontend, matching the file modifications.
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/apply-multicolor-to-icon

---

📜 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 5dc9138 and 55943b3.

📒 Files selected for processing (2)

• src/block-components/icon/index.js (1 hunks)
• src/block/icon-list/save.js (1 hunks)

🧰 Additional context used

🧬 Code graph analysis (1)

src/block/icon-list/save.js (2)

src/block/icon-list/edit.js (1)

• attributes (140-148)

src/block/icon-list/schema.js (2)

• attributes (128-163)
• attributes (128-163)

⏰ 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.6.2
• GitHub Check: PHP 8.2 and WP 6.5.5
• GitHub Check: PHP 8.2 and WP 6.7.2
• GitHub Check: PHP 7.3 and WP latest
• GitHub Check: PHP 8.2 and WP latest
• GitHub Check: PHP 7.3 and WP 6.5.5
• GitHub Check: build

🔇 Additional comments (2)

src/block/icon-list/save.js (1)

42-44: LGTM! Conditional CSS class correctly applied.

The classnames implementation correctly applies the stk__use-custom-icon-color class when the useCustomIconColor attribute is truthy. The syntax follows the classnames library pattern of combining arrays and objects for conditional classes.

src/block-components/icon/index.js (1)

215-216: Good fix to ensure icon is always set in multicolor mode.

Moving these statements outside the cleanup condition ensures the icon is properly set and tracked whenever iconColorType === 'multicolor', not just when cleanup is needed. This correctly guarantees that multicolor icons always use the original SVG directly rather than the page-icons system.

---

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
pr3666-stackable-3666-merge.zip	55943b3

[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/pr3666-stackable-3666-merge.zip"}}]}