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

* fix icon colors not being shown/applied

* add cleanup for icon color type

Author: kaeizen

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 )
@@ -202,6 +204,19 @@ 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 ( 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
+		}
+
 		// Check if icon exists in pageIcons Map
 		// The Map structure is: [SVG string (key), { id: iconId, count: number } (value)]
 		if ( _icon ) {
@@ -282,7 +297,7 @@ export const Icon = props => {
 				lastIconValueRef.current = null
 			}
 		}
-	}, [ _icon ] )
+	}, [ _icon, iconColorType ] )
 
 	useEffect( () => {
 		return () => {

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( <PageIcons /> )
 	}
 } )