fix: colors of page icons not being shown/applied #3665

kaeizen · 2025-12-12T07:13:11Z

Summary by CodeRabbit

Bug Fixes
- Stop generating/updating page icons for multicolor icons and clean up any prior page-icon state.
Behavior
- Page icons now react correctly when an icon's color type changes.
Accessibility & Performance
- Improved icon hiding technique to be offscreen for better accessibility and rendering performance.

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

coderabbitai · 2025-12-12T07:13:27Z

Walkthrough

Adds a guard to skip page-icon processing when an icon is multicolor and switches page-icon hiding from display: none to an offscreen/visibility-hidden technique; the multicolor guard is reactive to iconColorType changes.

Changes

Cohort / File(s)	Summary
Icon and Page Icons Handling `src/block-components/icon/index.js`, `src/plugins/page-icons/index.js`	Adds `iconColorType` extraction and an early-return guard to prevent page-icon creation/update for `multicolor` icons (and cleans prior page-icon state). Changes page-icon hiding from `display: none` to offscreen positioning (`position: absolute; left: -9999px; width: 0; height: 0; visibility: hidden`) with a clarifying comment.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

Verify the iconColorType detection and that the early-return correctly cleans prior page-icon state (src/block-components/icon/index.js).
Confirm the offscreen hiding CSS achieves the intended accessibility/behavior and has acceptable cross-browser behavior (src/plugins/page-icons/index.js).

Possibly related PRs

fix: icon optimization #3660 — Related changes to icon processing and page-icons plugin behavior; touches the same icon/page-icon handling areas.

Poem

🐰 I hopped through pixels, soft and bright,
Found multicolor icons hiding in light,
I nudged them gently, left them be,
Tucked page icons off where eyes can't see,
A tiny rabbit, tidy and spry ✨

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 directly addresses the main fix: resolving the issue where page icon colors were not being displayed correctly by introducing multicolor guard logic and adjusting the hiding technique.
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/page-icons-colors-not-showing-up

📜 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 2c5f37d and 865efdb.

📒 Files selected for processing (1)

src/block-components/icon/index.js (3 hunks)

🚧 Files skipped from review as they are similar to previous changes (1)

src/block-components/icon/index.js

⏰ 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 latest
GitHub Check: PHP 7.3 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 6.5.5
GitHub Check: build

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

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

github-actions · 2025-12-12T07:15:10Z

🤖 Pull request artifacts

file	commit
`pr3665-stackable-3665-merge.zip`	`865efdb`

github-actions · 2025-12-12T07:15:10Z

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/pr3665-stackable-3665-merge.zip"}}]}

Pull request: #3665 Commit: 2c5f37d

coderabbitai

Actionable comments posted: 1

🧹 Nitpick comments (1)

src/plugins/page-icons/index.js (1)
31-32: LGTM! Offscreen positioning preserves gradient rendering.

The switch from display: none to offscreen positioning correctly addresses the gradient rendering issue. The technique is standard and appropriate for keeping SVG elements in the rendering tree while visually hiding them.

For better maintainability, consider extracting the inline style to a CSS class:
/* In your stylesheet */
.stk-page-icons-hidden {
  position: absolute;
  top: 0;
  left: -9999px;
  width: 0;
  height: 0;
  visibility: hidden;
}
Then update the code:
-		// Don't use `display: none` to hide the page icons because it prevents gradients from being applied.
-		pageIconsWrapper.setAttribute( 'style', 'position: absolute; top: 0; left: -9999px; width: 0; height: 0; visibility: hidden;' )
+		// Don't use `display: none` to hide the page icons because it prevents gradients from being applied.
+		pageIconsWrapper.setAttribute( 'class', 'stk-page-icons-hidden' )

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between f4015a7 and 2c5f37d.

📒 Files selected for processing (2)

src/block-components/icon/index.js (1 hunks)
src/plugins/page-icons/index.js (1 hunks)

🧰 Additional context used

🧬 Code graph analysis (1)

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

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

getAttribute (147-150)

src/components/block-css/util.js (1)

getAttribute (209-230)

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

coderabbitai · 2025-12-12T07:16:09Z

src/block-components/icon/index.js

+		// Don't use page icons for multicolor icons
+		// because we target svg elements with the :nth-of-type() selector to apply the multicolor styles.
+		if ( getAttribute( 'iconColorType' ) === 'multicolor' ) {
+			return
+		}


⚠️ Potential issue | 🟠 Major

Add cleanup when iconColorType changes to/from multicolor.

The early return prevents page-icon processing for multicolor icons. However, if iconColorType changes from a regular type to multicolor during the icon's lifecycle, the icon will remain in the page-icons store without being removed. Similarly, changing from multicolor to a regular type won't trigger page-icon processing.

Consider adding getAttribute( 'iconColorType' ) to the useEffect dependency array and handling the transition:

- }, [ _icon ] ) + }, [ _icon, getAttribute( 'iconColorType' ) ] )

Additionally, add cleanup logic before the early return:

// Don't use page icons for multicolor icons // because we target svg elements with the :nth-of-type() selector to apply the multicolor styles. if ( getAttribute( 'iconColorType' ) === 'multicolor' ) { + // Clean up if this icon was previously in the page-icons store + if ( processedIconRef.current === _icon && _icon ) { + dispatch( 'stackable/page-icons' ).removePageIcon( _icon ) + processedIconRef.current = null + setIcon( _icon ) // Use the original icon directly + lastIconValueRef.current = _icon + } return }

Committable suggestion skipped: line range outside the PR's diff.

🤖 Prompt for AI Agents

In src/block-components/icon/index.js around lines 205 to 209, the effect currently returns early for iconColorType === 'multicolor' but doesn't clean up or respond to transitions; add getAttribute('iconColorType') to the useEffect dependency array and inside the effect detect transitions: when switching to 'multicolor' call the existing cleanup/remove-from-page-icons logic before returning, and when switching from 'multicolor' to a regular type ensure you call the page-icon processing/registration routine; ensure the cleanup function is invoked on unmount or before early returns so page-icons store stays consistent.

Pull request: #3665 Commit: 865efdb

fix icon colors not being shown/applied

2c5f37d

github-actions bot added a commit that referenced this pull request Dec 12, 2025

Upload pr3665-stackable-3665-merge.zip (2c5f3)

bc713d7

Pull request: #3665 Commit: 2c5f37d

coderabbitai bot reviewed Dec 12, 2025

View reviewed changes

add cleanup for icon color type

865efdb

github-actions bot added a commit that referenced this pull request Dec 12, 2025

Upload pr3665-stackable-3665-merge.zip (865ef)

d4cde88

Pull request: #3665 Commit: 865efdb

bfintal merged commit 5dc9138 into develop Dec 14, 2025
8 of 9 checks passed

bfintal deleted the fix/page-icons-colors-not-showing-up branch December 14, 2025 03:15

bfintal assigned kaeizen Dec 15, 2025

coderabbitai bot mentioned this pull request Dec 15, 2025

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

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

fix: colors of page icons not being shown/applied #3665

fix: colors of page icons not being shown/applied #3665

Uh oh!

kaeizen commented Dec 12, 2025 •

edited by coderabbitai bot

Loading

Uh oh!

coderabbitai bot commented Dec 12, 2025 •

edited

Loading

Uh oh!

github-actions bot commented Dec 12, 2025 •

edited

Loading

Uh oh!

github-actions bot commented Dec 12, 2025

Uh oh!

coderabbitai bot left a comment

Uh oh!

coderabbitai bot Dec 12, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

fix: colors of page icons not being shown/applied #3665

fix: colors of page icons not being shown/applied #3665

Uh oh!

Conversation

kaeizen commented Dec 12, 2025 • edited by coderabbitai bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary by CodeRabbit

Uh oh!

coderabbitai bot commented Dec 12, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Estimated code review effort

Possibly related PRs

Poem

Pre-merge checks and finishing touches

Uh oh!

github-actions bot commented Dec 12, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🤖 Pull request artifacts

Uh oh!

github-actions bot commented Dec 12, 2025

Uh oh!

coderabbitai bot left a comment

Choose a reason for hiding this comment

Uh oh!

coderabbitai bot Dec 12, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

kaeizen commented Dec 12, 2025 •

edited by coderabbitai bot

Loading

coderabbitai bot commented Dec 12, 2025 •

edited

Loading

github-actions bot commented Dec 12, 2025 •

edited

Loading