From a69cecd35629acfdeedaf706d000ede03b751eb0 Mon Sep 17 00:00:00 2001 From: Mikhaela Tapia Date: Wed, 26 Nov 2025 09:33:08 +0800 Subject: [PATCH 1/2] don't override custom icon colors --- src/block/icon-list-item/style.scss | 16 +++++++--------- 1 file changed, 7 insertions(+), 9 deletions(-) diff --git a/src/block/icon-list-item/style.scss b/src/block/icon-list-item/style.scss index d16d20a8fa..d76bebd53f 100644 --- a/src/block/icon-list-item/style.scss +++ b/src/block/icon-list-item/style.scss @@ -16,12 +16,6 @@ border-width: 1px; border-color: rgba(0, 0, 0, 0.4); } - - // Apply the color to the SVG path on the defintion - svg.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 { @@ -48,13 +42,17 @@ width: var(--stk-icon-height, var(--stk-icon-list-icon-size, 16px)); transform: rotate(var(--stk-icon-list-icon-rotation, 0deg)); opacity: var(--stk-icon-list-icon-opacity, 1); - fill: var(--stk-icon-list-marker-color); - color: var(--stk-icon-list-marker-color); position: relative; - :is(use,g,path,rect,polygon,ellipse) { + // 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); + } } } } From 3c12a0a09864f4e9c4fcbc5e8563607a3790adf2 Mon Sep 17 00:00:00 2001 From: Mikhaela Tapia Date: Tue, 9 Dec 2025 12:41:49 +0800 Subject: [PATCH 2/2] add option to use custom icon color --- src/block/icon-list-item/style.scss | 27 +++++++++++++++++---------- src/block/icon-list/edit.js | 17 ++++++++++++++--- src/block/icon-list/schema.js | 10 ++++++++++ 3 files changed, 41 insertions(+), 13 deletions(-) diff --git a/src/block/icon-list-item/style.scss b/src/block/icon-list-item/style.scss index d76bebd53f..251c3e9e95 100644 --- a/src/block/icon-list-item/style.scss +++ b/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); + } } } diff --git a/src/block/icon-list/edit.js b/src/block/icon-list/edit.js index 312e91d65a..661f14a272 100644 --- a/src/block/icon-list/edit.js +++ b/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 && } @@ -339,7 +344,7 @@ const InspectorControls = memo( props => { default="unordered" /> - { ! props.ordered && ( + { ! props.ordered && <> { } } defaultValue={ DEFAULT_SVG } /> - ) } + + props.setAttributes( { useCustomIconColor } ) } + /> + } { props.ordered && ( { versionAdded: '3.0.0', versionDeprecated: '', } ) + attrObject.add( { + attributes: { + useCustomIconColor: { + type: 'boolean', + default: false, + }, + }, + versionAdded: '3.14.4', + versionDeprecated: '', + } ) return attrObject.getMerged( version ) }