add option to use custom icon color

Author: kaeizen

src/block/icon-list-item/style.scss

@@ -16,6 +16,12 @@
 		border-width: 1px;
 		border-color: rgba(0, 0, 0, 0.4);
 	}
+
+	// Apply the color to the SVG path on the defintion
+	&:not(.stk__use-custom-icon-color) svg:where(.ugb-custom-icon) :is(g,path,rect,polygon,ellipse) {
+		fill: var(--stk-icon-list-marker-color) !important;
+		color: var(--stk-icon-list-marker-color) !important;
+	}
 }
 
 .stk-block-icon-list-item__content {
@@ -44,19 +50,20 @@
 				opacity: var(--stk-icon-list-icon-opacity, 1);
 				position: relative;
 
-				// Do not apply the color to custom icons.
-				&:not(.ugb-custom-icon) {
-					fill: var(--stk-icon-list-marker-color);
-					color: var(--stk-icon-list-marker-color);
-
-					:is(use,g,path,rect,polygon,ellipse) {
-						fill: var(--stk-icon-list-marker-color);
-						color: var(--stk-icon-list-marker-color);
-					}
-				}
 			}
 		}
+	}
+}
+
+.stk-block-icon-list:not(.stk__use-custom-icon-color) .stk-block-icon-list__ul .stk-block-icon-list-item .stk-block-icon-list-item__content {
+	.stk--inner-svg svg {
+		fill: var(--stk-icon-list-marker-color);
+		color: var(--stk-icon-list-marker-color);
 
+		:is(use,g,path,rect,polygon,ellipse) {
+			fill: var(--stk-icon-list-marker-color);
+			color: var(--stk-icon-list-marker-color);
+		}
 	}
 }
 

src/block/icon-list/edit.js

@@ -52,6 +52,7 @@ import { dispatch, useSelect } from '@wordpress/data'
 import { addFilter } from '@wordpress/hooks'
 import { memo } from '@wordpress/element'
 import { useBlockLayoutDefaults } from '~stackable/hooks'
+import { ToggleControl } from '@wordpress/components'
 
 const ALLOWED_INNER_BLOCKS = [ 'stackable/icon-list-item' ]
 
@@ -143,6 +144,7 @@ const Edit = props => {
 		listItemBorderColor,
 		listDisplayStyle,
 		listFullWidth,
+		useCustomIconColor,
 	} = attributes
 
 	const wrapList = ! listFullWidth && listDisplayStyle !== 'grid'
@@ -163,7 +165,9 @@ const Edit = props => {
 		'stk-block-icon-list',
 		blockAlignmentClass,
 		textClasses,
-	] )
+	], {
+		'stk__use-custom-icon-color': useCustomIconColor,
+	} )
 
 	const tagNameClassNames = classnames( [
 		ordered ? 'stk-block-icon-list__ol' : 'stk-block-icon-list__ul',
@@ -209,6 +213,7 @@ const Edit = props => {
 				listItemBorderStyle={ listItemBorderStyle }
 				listItemBorderColor={ listItemBorderColor }
 				resetCustomIcons={ resetCustomIcons }
+				useCustomIconColor={ useCustomIconColor }
 			/>
 
 			{ blockCss && <style key="block-css">{ blockCss }</style> }
@@ -339,7 +344,7 @@ const InspectorControls = memo( props => {
 						default="unordered"
 					/>
 
-					{ ! props.ordered && (
+					{ ! props.ordered && <>
 						<IconControl
 							label={ __( 'Icon', i18n ) }
 							value={ props.icon }
@@ -350,7 +355,13 @@ const InspectorControls = memo( props => {
 							} }
 							defaultValue={ DEFAULT_SVG }
 						/>
-					) }
+
+						<ToggleControl
+							label={ __( 'Use Custom Icon Color', i18n ) }
+							checked={ props.useCustomIconColor }
+							onChange={ useCustomIconColor => props.setAttributes( { useCustomIconColor } ) }
+						/>
+					</> }
 
 					{ props.ordered && (
 						<AdvancedSelectControl

src/block/icon-list/schema.js

@@ -148,6 +148,16 @@ export const attributes = ( version = VERSION ) => {
 		versionAdded: '3.0.0',
 		versionDeprecated: '',
 	} )
+	attrObject.add( {
+		attributes: {
+			useCustomIconColor: {
+				type: 'boolean',
+				default: false,
+			},
+		},
+		versionAdded: '3.14.4',
+		versionDeprecated: '',
+	} )
 
 	return attrObject.getMerged( version )
 }