From 2c5f37d5c5f6a17bec6ac50e3dbe7248bdfb5989 Mon Sep 17 00:00:00 2001 From: Mikhaela Tapia Date: Fri, 12 Dec 2025 15:12:26 +0800 Subject: [PATCH 1/2] fix icon colors not being shown/applied --- src/block-components/icon/index.js | 6 ++++++ src/plugins/page-icons/index.js | 3 ++- 2 files changed, 8 insertions(+), 1 deletion(-) diff --git a/src/block-components/icon/index.js b/src/block-components/icon/index.js index a0ec5323f..5b35a51c7 100644 --- a/src/block-components/icon/index.js +++ b/src/block-components/icon/index.js @@ -202,6 +202,12 @@ export const Icon = props => { 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' ) { + return + } + // Check if icon exists in pageIcons Map // The Map structure is: [SVG string (key), { id: iconId, count: number } (value)] if ( _icon ) { diff --git a/src/plugins/page-icons/index.js b/src/plugins/page-icons/index.js index 2f21f96b4..5b6c16516 100644 --- a/src/plugins/page-icons/index.js +++ b/src/plugins/page-icons/index.js @@ -28,7 +28,8 @@ pageIconsWrapper?.setAttribute( 'id', 'stk-page-icons' ) domReady( () => { if ( pageIconsWrapper ) { pageIconsWrapper.setAttribute( 'id', 'stk-page-icons' ) - pageIconsWrapper.setAttribute( 'style', 'display: none;' ) + // 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;' ) createRoot( pageIconsWrapper ).render( ) } } ) From 865efdbf3ea2eee99d6c6c7d0a2a9cb40e702471 Mon Sep 17 00:00:00 2001 From: Mikhaela Tapia Date: Fri, 12 Dec 2025 15:19:37 +0800 Subject: [PATCH 2/2] add cleanup for icon color type --- src/block-components/icon/index.js | 13 +++++++++++-- 1 file changed, 11 insertions(+), 2 deletions(-) diff --git a/src/block-components/icon/index.js b/src/block-components/icon/index.js index 5b35a51c7..c17dbb5a8 100644 --- a/src/block-components/icon/index.js +++ b/src/block-components/icon/index.js @@ -184,6 +184,8 @@ export const Icon = props => { const ShapeComp = useMemo( () => getShapeSVG( getAttribute( 'backgroundShape' ) || 'blob1' ), [ getAttribute( 'backgroundShape' ) ] ) + const iconColorType = getAttribute( 'iconColorType' ) + const _icon = value || getAttribute( 'icon' ) const currentIconRef = useRef( _icon ) const processedIconRef = useRef( null ) @@ -204,7 +206,14 @@ export const Icon = props => { // 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' ) { + if ( 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 } @@ -288,7 +297,7 @@ export const Icon = props => { lastIconValueRef.current = null } } - }, [ _icon ] ) + }, [ _icon, iconColorType ] ) useEffect( () => { return () => {