@elementor/editor-editing-panel 3.33.0-99 → 3.34.2

package/src/dynamics/components/dynamic-selection-control.tsx

@@ -33,6 +33,8 @@ import { DynamicSelection } from './dynamic-selection';
 
 const SIZE = 'tiny';
 
+const tagsWithoutTabs = [ 'popup' ];
+
 export const DynamicSelectionControl = () => {
 	const { setValue: setAnyValue } = useBoundProp();
 	const { bind, value } = useBoundProp( dynamicPropTypeUtil );
@@ -83,7 +85,7 @@ export const DynamicSelectionControl = () => {
 				} }
 				{ ...bindPopover( selectionPopoverState ) }
 			>
-				<PopoverBody>
+				<PopoverBody aria-label={ __( 'Dynamic tags', 'elementor' ) }>
 					<DynamicSelection close={ selectionPopoverState.close } />
 				</PopoverBody>
 			</Popover>
@@ -102,7 +104,11 @@ export const DynamicSettingsPopover = ( { dynamicTag }: { dynamicTag: DynamicTag
 
 	return (
 		<>
-			<IconButton size={ SIZE } { ...bindTrigger( popupState ) } aria-label={ __( 'Settings', 'elementor' ) }>
+			<IconButton
+				size={ SIZE }
+				{ ...bindTrigger( popupState ) }
+				aria-label={ __( 'Dynamic settings', 'elementor' ) }
+			>
 				<SettingsIcon fontSize={ SIZE } />
 			</IconButton>
 			<Popover
@@ -115,20 +121,20 @@ export const DynamicSettingsPopover = ( { dynamicTag }: { dynamicTag: DynamicTag
 				} }
 				{ ...bindPopover( popupState ) }
 			>
-				<PopoverBody>
+				<PopoverBody aria-label={ __( 'Dynamic settings', 'elementor' ) }>
 					<PopoverHeader
 						title={ dynamicTag.label }
 						onClose={ popupState.close }
 						icon={ <DatabaseIcon fontSize={ SIZE } /> }
 					/>
-					<DynamicSettings controls={ dynamicTag.atomic_controls } />
+					<DynamicSettings controls={ dynamicTag.atomic_controls } tagName={ dynamicTag.name } />
 				</PopoverBody>
 			</Popover>
 		</>
 	);
 };
 
-const DynamicSettings = ( { controls }: { controls: DynamicTag[ 'atomic_controls' ] } ) => {
+const DynamicSettings = ( { controls, tagName }: { controls: DynamicTag[ 'atomic_controls' ]; tagName: string } ) => {
 	const tabs = controls.filter( ( { type } ) => type === 'section' ) as ControlsSection[];
 	const { getTabsProps, getTabProps, getTabPanelProps } = useTabs< number >( 0 );
 
@@ -137,15 +143,31 @@ const DynamicSettings = ( { controls }: { controls: DynamicTag[ 'atomic_controls
 		return null;
 	}
 
+	if ( tagsWithoutTabs.includes( tagName ) ) {
+		const singleTab = tabs[ 0 ];
+		return (
+			<>
+				<Divider />
+				<ControlsItemsStack items={ singleTab.value.items } />
+			</>
+		);
+	}
+
 	return (
 		<>
-			<Tabs size="small" variant="fullWidth" { ...getTabsProps() }>
-				{ tabs.map( ( { value }, index ) => (
-					<Tab key={ index } label={ value.label } sx={ { px: 1, py: 0.5 } } { ...getTabProps( index ) } />
-				) ) }
-			</Tabs>
+			{ tabs.length > 1 && (
+				<Tabs size="small" variant="fullWidth" { ...getTabsProps() }>
+					{ tabs.map( ( { value }, index ) => (
+						<Tab
+							key={ index }
+							label={ value.label }
+							sx={ { px: 1, py: 0.5 } }
+							{ ...getTabProps( index ) }
+						/>
+					) ) }
+				</Tabs>
+			) }
 			<Divider />
-
 			{ tabs.map( ( { value }, index ) => {
 				return (
 					<TabPanel
@@ -153,14 +175,7 @@ const DynamicSettings = ( { controls }: { controls: DynamicTag[ 'atomic_controls
 						sx={ { flexGrow: 1, py: 0, overflowY: 'auto' } }
 						{ ...getTabPanelProps( index ) }
 					>
-						<Stack p={ 2 } gap={ 2 }>
-							{ value.items.map( ( item ) => {
-								if ( item.type === 'control' ) {
-									return <Control key={ item.value.bind } control={ item.value } />;
-								}
-								return null;
-							} ) }
-						</Stack>
+						<ControlsItemsStack items={ value.items } />
 					</TabPanel>
 				);
 			} ) }
@@ -170,9 +185,21 @@ const DynamicSettings = ( { controls }: { controls: DynamicTag[ 'atomic_controls
 
 const LAYOUT_OVERRIDE_FIELDS = {
 	separator: 'two-columns',
+	action: 'full',
+	off_canvas: 'full',
+	type: 'two-columns',
+} as const;
+
+const DYNAMIC_TAG_LAYOUT_OVERRIDES = {
+	select: 'full',
 } as const;
 
 const getLayout = ( control: Control[ 'value' ] ): ControlLayout => {
+	const dynamicOverride = DYNAMIC_TAG_LAYOUT_OVERRIDES[ control.type as keyof typeof DYNAMIC_TAG_LAYOUT_OVERRIDES ];
+	if ( dynamicOverride ) {
+		return dynamicOverride;
+	}
+
 	return (
 		LAYOUT_OVERRIDE_FIELDS[ control.bind as keyof typeof LAYOUT_OVERRIDE_FIELDS ] ??
 		controlsRegistry.getLayout( control.type as ControlType )
@@ -186,22 +213,51 @@ const Control = ( { control }: { control: Control[ 'value' ] } ) => {
 
 	const layout = getLayout( control );
 
+	const shouldDisablePortal = control.type === 'select';
+	const baseControlProps = shouldDisablePortal
+		? {
+				...control.props,
+				MenuProps: {
+					...( control.props?.MenuProps ?? {} ),
+					disablePortal: true,
+				},
+		  }
+		: { ...control.props };
+	const controlProps = {
+		...baseControlProps,
+		ariaLabel: control.label,
+	} as typeof baseControlProps & { ariaLabel?: string };
+	const isSwitchControl = control.type === 'switch';
+	const layoutStyleProps =
+		layout === 'two-columns'
+			? {
+					display: 'grid',
+					gridTemplateColumns: isSwitchControl ? 'minmax(0, 1fr) max-content' : '1fr 1fr',
+			  }
+			: {};
+
 	return (
 		<DynamicControl bind={ control.bind }>
-			<Grid
-				container
-				gap={ 0.75 }
-				sx={ layout === 'two-columns' ? { display: 'grid', gridTemplateColumns: '1fr 1fr' } : {} }
-			>
+			<Grid container gap={ 0.75 } sx={ layoutStyleProps }>
 				{ control.label ? (
 					<Grid item xs={ 12 }>
 						<ControlFormLabel>{ control.label }</ControlFormLabel>
 					</Grid>
 				) : null }
 				<Grid item xs={ 12 }>
-					<BaseControl type={ control.type as ControlType } props={ control.props } />
+					<BaseControl type={ control.type as ControlType } props={ controlProps } />
 				</Grid>
 			</Grid>
 		</DynamicControl>
 	);
 };
+
+function ControlsItemsStack( { items }: { items: ControlsSection[ 'value' ][ 'items' ] } ) {
+	return (
+		<Stack p={ 2 } gap={ 2 } sx={ { overflowY: 'auto' } }>
+			{ items.map( ( item ) =>
+				item.type === 'control' ? <Control key={ item.value.bind } control={ item.value } /> : null
+			) }
+		</Stack>
+	);
+}

package/src/dynamics/components/dynamic-selection.tsx

@@ -1,7 +1,7 @@
 import { Fragment, useState } from 'react';
 import * as React from 'react';
 import { useBoundProp } from '@elementor/editor-controls';
-import { PopoverHeader, PopoverMenuList, PopoverSearch } from '@elementor/editor-ui';
+import { PopoverHeader, PopoverMenuList, SearchField } from '@elementor/editor-ui';
 import { DatabaseIcon } from '@elementor/icons';
 import { Divider, Link, Stack, Typography, useTheme } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
@@ -76,7 +76,7 @@ export const DynamicSelection = ( { close: closePopover }: DynamicSelectionProps
 	] );
 
 	return (
-		<PopoverBody>
+		<PopoverBody aria-label={ __( 'Dynamic tags', 'elementor' ) }>
 			<PopoverHeader
 				title={ __( 'Dynamic tags', 'elementor' ) }
 				onClose={ closePopover }
@@ -86,7 +86,7 @@ export const DynamicSelection = ( { close: closePopover }: DynamicSelectionProps
 				<NoDynamicTags />
 			) : (
 				<Fragment>
-					<PopoverSearch
+					<SearchField
 						value={ searchValue }
 						onSearch={ handleSearch }
 						placeholder={ __( 'Search dynamic tags…', 'elementor' ) }

package/src/dynamics/dynamic-control.tsx

@@ -3,6 +3,7 @@ import { PropKeyProvider, PropProvider, type SetValue, useBoundProp } from '@ele
 import { type PropKey } from '@elementor/editor-props';
 
 import { createTopLevelObjectType } from '../controls-registry/create-top-level-object-type';
+import { DynamicConditionalControl } from './components/dynamic-conditional-control';
 import { useDynamicTag } from './hooks/use-dynamic-tag';
 import { dynamicPropTypeUtil, type DynamicPropValue } from './utils';
 
@@ -39,7 +40,15 @@ export const DynamicControl = ( { bind, children }: DynamicControlProps ) => {
 
 	return (
 		<PropProvider propType={ propType } setValue={ setDynamicValue } value={ { [ bind ]: dynamicValue } }>
-			<PropKeyProvider bind={ bind }>{ children }</PropKeyProvider>
+			<PropKeyProvider bind={ bind }>
+				<DynamicConditionalControl
+					propType={ dynamicPropType }
+					propsSchema={ dynamicTag.props_schema }
+					dynamicSettings={ settings }
+				>
+					{ children }
+				</DynamicConditionalControl>
+			</PropKeyProvider>
 		</PropProvider>
 	);
 };

package/src/dynamics/hooks/use-prop-dynamic-tags.ts

@@ -2,6 +2,7 @@ import { useMemo } from 'react';
 import { useBoundProp } from '@elementor/editor-controls';
 
 import { getAtomicDynamicTags } from '../sync/get-atomic-dynamic-tags';
+import { type DynamicTag } from '../types';
 import { getDynamicPropType } from '../utils';
 
 export const usePropDynamicTags = () => {
@@ -15,21 +16,38 @@ export const usePropDynamicTags = () => {
 		categories = propDynamicType?.settings.categories || [];
 	}
 
-	// eslint-disable-next-line react-compiler/react-compiler
 	// eslint-disable-next-line react-hooks/exhaustive-deps
 	return useMemo( () => getDynamicTagsByCategories( categories ), [ categories.join() ] );
 };
 
 const getDynamicTagsByCategories = ( categories: string[] ) => {
-	const dynamicTags = getAtomicDynamicTags();
+	const { tags, groups } = getAtomicDynamicTags() || {};
 
-	if ( ! categories.length || ! dynamicTags?.tags ) {
+	if ( ! categories.length || ! tags || ! groups ) {
 		return [];
 	}
 
 	const _categories = new Set( categories );
 
-	return Object.values( dynamicTags.tags ).filter( ( dynamicTag ) =>
-		dynamicTag.categories.some( ( category ) => _categories.has( category ) )
-	);
+	const dynamicTags: DynamicTag[] = [];
+	const groupedFilteredTags: Record< string, DynamicTag[] > = {};
+
+	for ( const tag of Object.values( tags ) ) {
+		if ( ! tag.categories.some( ( category ) => _categories.has( category ) ) ) {
+			continue;
+		}
+
+		if ( ! groupedFilteredTags[ tag.group ] ) {
+			groupedFilteredTags[ tag.group ] = [];
+		}
+		groupedFilteredTags[ tag.group ].push( tag );
+	}
+
+	for ( const group in groups ) {
+		if ( groupedFilteredTags[ group ] ) {
+			dynamicTags.push( ...groupedFilteredTags[ group ] );
+		}
+	}
+
+	return dynamicTags;
 };

package/src/field-indicators-registry.ts

@@ -0,0 +1,37 @@
+import { type AdornmentComponent } from '@elementor/editor-controls';
+
+type FieldType = 'settings' | 'styles';
+
+type FieldIndicator = {
+	id: string;
+	indicator: AdornmentComponent;
+
+	// ordered from lowest to highest
+	priority: number;
+};
+
+const indicatorsRegistry: Record< FieldType, Map< string, FieldIndicator > > = {
+	settings: new Map(),
+	styles: new Map(),
+};
+
+const DEFAULT_PRIORITY = 10;
+
+export const FIELD_TYPE = {
+	SETTINGS: 'settings',
+	STYLES: 'styles',
+} satisfies Record< string, FieldType >;
+
+export const registerFieldIndicator = ( {
+	fieldType,
+	id,
+	indicator,
+	priority = DEFAULT_PRIORITY,
+}: FieldIndicator & { fieldType: FieldType } ) => {
+	indicatorsRegistry[ fieldType ].set( id, { id, indicator, priority } );
+};
+
+export const getFieldIndicators = ( fieldType: FieldType ): { id: string; Adornment: AdornmentComponent }[] =>
+	Array.from( indicatorsRegistry[ fieldType ].values() )
+		.sort( ( a, b ) => a.priority - b.priority )
+		.map( ( { id, indicator: Adornment } ) => ( { id, Adornment } ) );

package/src/hooks/use-computed-style.ts

@@ -1,7 +1,5 @@
 import { __privateUseListenTo as useListenTo, commandEndEvent, windowEvent } from '@elementor/editor-v1-adapters';
 
-import { type ExtendedWindow } from '../sync/types';
-
 export function useComputedStyle( elementId: string | null ) {
 	return useListenTo(
 		[
@@ -15,8 +13,7 @@ export function useComputedStyle( elementId: string | null ) {
 				return null;
 			}
 
-			const extendedWindow: ExtendedWindow = window;
-			const element = extendedWindow.elementor?.getContainer?.( elementId );
+			const element = window.elementor?.getContainer?.( elementId );
 
 			if ( ! element?.view?.el ) {
 				return null;

package/src/index.ts

@@ -2,17 +2,30 @@ export { useBoundProp } from '@elementor/editor-controls';
 export { type ValidationEvent, type ValidationResult } from './components/creatable-autocomplete';
 export { injectIntoCssClassConvert } from './components/css-classes/css-class-convert-local';
 export { injectIntoClassSelectorActions } from './components/css-classes/css-class-selector';
+export { CustomCssIndicator } from './components/custom-css-indicator';
 export { PopoverBody } from './components/popover-body';
 export { SectionContent } from './components/section-content';
-export { CustomCss } from './components/custom-css';
+export { SettingsControl } from './components/settings-control';
+export { StyleIndicator } from './components/style-indicator';
 export { useFontFamilies } from './components/style-sections/typography-section/hooks/use-font-families';
-export { useCustomCss } from './hooks/use-custom-css';
+export { injectIntoStyleTab } from './components/style-tab';
+export { StyleTabSection } from './components/style-tab-section';
+export { useClassesProp } from './contexts/classes-prop-context';
+export { useElement } from './contexts/element-context';
 export { useSectionWidth } from './contexts/section-context';
+export { useStyle } from './contexts/style-context';
 export { registerControlReplacement } from './control-replacement';
 export { controlActionsMenu } from './controls-actions';
+export { controlsRegistry } from './controls-registry/controls-registry';
+export { StylesProviderCannotUpdatePropsError } from './errors';
+export { useCustomCss } from './hooks/use-custom-css';
+export { getSubtitle, getTitle, HISTORY_DEBOUNCE_WAIT } from './hooks/use-styles-fields';
+export { useStylesRerender } from './hooks/use-styles-rerender';
 export { init } from './init';
 export { usePanelActions, usePanelStatus } from './panel';
 export type { PopoverActionProps } from './popover-action';
 export { registerStyleProviderToColors } from './provider-colors-registry';
 export { stylesInheritanceTransformersRegistry } from './styles-inheritance/styles-inheritance-transformers-registry';
-export { controlsRegistry } from './controls-registry/controls-registry';
+export { registerFieldIndicator, FIELD_TYPE } from './field-indicators-registry';
+
+export { doApplyClasses, doGetAppliedClasses, doUnapplyClass } from './apply-unapply-actions';

package/src/init.ts

@@ -1,8 +1,10 @@
 import { injectIntoLogic } from '@elementor/editor';
+import { initElementsMcp } from '@elementor/editor-elements';
 import { __registerPanel as registerPanel } from '@elementor/editor-panels';
 import { blockCommand } from '@elementor/editor-v1-adapters';
 
 import { EditingPanelHooks } from './components/editing-panel-hooks';
+import { registerElementControls } from './controls-registry/element-controls/registry';
 import { init as initDynamics } from './dynamics/init';
 import { panel } from './panel';
 import { initResetStyleProps } from './reset-style-props';
@@ -13,6 +15,8 @@ export function init() {
 	registerPanel( panel );
 	blockV1Panel();
 
+	initElementsMcp();
+
 	injectIntoLogic( {
 		id: 'editing-panel-hooks',
 		component: EditingPanelHooks,
@@ -24,6 +28,9 @@ export function init() {
 	// TODO: Move it from here once we have styles-inheritance package.
 	initStylesInheritance();
 
+	// TODO: Move it from here once we have element-controls package.
+	registerElementControls();
+
 	initResetStyleProps();
 }
 

package/src/reset-style-props.tsx

@@ -4,6 +4,7 @@ import { __ } from '@wordpress/i18n';
 
 import { useIsStyle } from './contexts/style-context';
 import { controlActionsMenu } from './controls-actions';
+import { isEqual } from './utils/is-equal';
 
 const { registerAction } = controlActionsMenu;
 
@@ -16,14 +17,30 @@ export function initResetStyleProps() {
 
 export function useResetStyleValueProps() {
 	const isStyle = useIsStyle();
-	const { value, setValue, path } = useBoundProp();
+	const { value, resetValue, propType } = useBoundProp();
+	const hasValue = value !== null && value !== undefined;
+	const hasInitial = propType.initial_value !== undefined && propType.initial_value !== null;
+	const isRequired = !! propType.settings?.required;
+	const shouldHide = !! propType.settings?.hide_reset;
 
-	const isInRepeater = path?.some( ( key ) => ! isNaN( Number( key ) ) );
+	function calculateVisibility() {
+		if ( ! isStyle || ! hasValue || shouldHide ) {
+			return false;
+		}
+
+		if ( hasInitial ) {
+			return ! isEqual( value, propType.initial_value );
+		}
+
+		return ! isRequired;
+	}
+
+	const visible = calculateVisibility();
 
 	return {
-		visible: isStyle && value !== null && value !== undefined && ! isInRepeater,
+		visible,
 		title: __( 'Clear', 'elementor' ),
 		icon: BrushBigIcon,
-		onClick: () => setValue( null ),
+		onClick: () => resetValue(),
 	};
 }

package/src/styles-inheritance/components/infotip/value-component.tsx

@@ -18,6 +18,8 @@ export const ValueComponent = ( { index, value }: Props ) => {
 				textOverflow: 'ellipsis',
 				whiteSpace: 'nowrap',
 				pl: 2.5,
+				minWidth: 0,
+				maxWidth: '100%',
 			} }
 		>
 			{ value }

package/src/styles-inheritance/components/styles-inheritance-indicator.tsx

@@ -12,9 +12,6 @@ import { getStylesProviderThemeColor } from '../../utils/get-styles-provider-col
 import { type SnapshotPropValue } from '../types';
 import { getValueFromInheritanceChain } from '../utils';
 import { StylesInheritanceInfotip } from './styles-inheritance-infotip';
-
-const disabledControls = [ 'box-shadow', 'background-overlay', 'filter', 'backdrop-filter', 'transform', 'transition' ];
-
 export const StylesInheritanceIndicator = ( {
 	customContext,
 }: {
@@ -28,16 +25,7 @@ export const StylesInheritanceIndicator = ( {
 		return null;
 	}
 
-	const isDisabled = path.some( ( pathItem ) => disabledControls.includes( pathItem ) );
-
-	return (
-		<Indicator
-			inheritanceChain={ inheritanceChain }
-			path={ path }
-			propType={ propType }
-			isDisabled={ isDisabled }
-		/>
-	);
+	return <Indicator inheritanceChain={ inheritanceChain } path={ path } propType={ propType } />;
 };
 
 type IndicatorProps = {

package/src/styles-inheritance/components/styles-inheritance-infotip.tsx

@@ -122,7 +122,11 @@ export const StylesInheritanceInfotip = ( {
 										item.displayLabel
 									) }
 								>
-									<Box display="flex" gap={ 0.5 } sx={ { flexWrap: 'wrap', width: '100%' } }>
+									<Box
+										display="flex"
+										gap={ 0.5 }
+										sx={ { flexWrap: 'wrap', width: '100%', alignItems: 'flex-start' } }
+									>
 										<BreakpointIcon breakpoint={ item.breakpoint } />
 										<LabelChip displayLabel={ item.displayLabel } provider={ item.provider } />
 										<ValueComponent index={ index } value={ item.value } />

package/src/styles-inheritance/hooks/use-normalized-inheritance-chain-items.tsx

@@ -1,7 +1,12 @@
 import { isValidElement, type ReactNode, useEffect, useState } from 'react';
 import { type PropsResolver } from '@elementor/editor-canvas';
 import { type PropKey } from '@elementor/editor-props';
-import { type StyleDefinitionVariant } from '@elementor/editor-styles';
+import {
+	isClassState,
+	isPseudoState,
+	type StyleDefinitionState,
+	type StyleDefinitionVariant,
+} from '@elementor/editor-styles';
 import { ELEMENTS_BASE_STYLES_PROVIDER_KEY } from '@elementor/editor-styles-repository';
 import { __ } from '@wordpress/i18n';
 
@@ -65,7 +70,7 @@ export const normalizeInheritanceItem = async (
 		style: { label, id },
 	} = item;
 
-	const displayLabel = `${ label }${ state ? ':' + state : '' }`;
+	const displayLabel = getLabel( { label, state } );
 
 	return {
 		id: id ? id + ( state ?? '' ) : index,
@@ -76,6 +81,17 @@ export const normalizeInheritanceItem = async (
 	};
 };
 
+function getLabel( { label, state }: { label: string; state: StyleDefinitionState } ) {
+	if ( isClassState( state ) ) {
+		return `${ label }.${ state }`;
+	}
+
+	if ( isPseudoState( state ) ) {
+		return `${ label }:${ state }`;
+	}
+
+	return label;
+}
 const getTransformedValue = async (
 	item: SnapshotPropValue,
 	bind: PropKey,

package/src/styles-inheritance/init-styles-inheritance-transformers.ts

@@ -2,10 +2,13 @@ import { createTransformer, styleTransformersRegistry } from '@elementor/editor-
 
 import { excludePropTypeTransformers } from './consts';
 import { stylesInheritanceTransformersRegistry } from './styles-inheritance-transformers-registry';
+import { arrayTransformer } from './transformers/array-transformer';
 import { backgroundColorOverlayTransformer } from './transformers/background-color-overlay-transformer';
 import { backgroundGradientOverlayTransformer } from './transformers/background-gradient-overlay-transformer';
 import { backgroundImageOverlayTransformer } from './transformers/background-image-overlay-transformer';
-import { backgroundOverlayTransformer } from './transformers/background-overlay-transformer';
+import { boxShadowTransformer } from './transformers/box-shadow-transformer';
+import { colorTransformer } from './transformers/color-transformer';
+import { createRepeaterToItemsTransformer } from './transformers/repeater-to-items-transformer';
 
 export function initStylesInheritanceTransformers() {
 	const originalStyleTransformers = styleTransformersRegistry.all();
@@ -24,15 +27,33 @@ export function initStylesInheritanceTransformers() {
 		} )
 	);
 
-	registerCustomTransformers();
+	registerCustomTransformers( originalStyleTransformers );
 }
 
-function registerCustomTransformers() {
+function registerCustomTransformers( originalStyleTransformers: ReturnType< typeof styleTransformersRegistry.all > ) {
+	stylesInheritanceTransformersRegistry.register( 'color', colorTransformer );
 	stylesInheritanceTransformersRegistry.register( 'background-color-overlay', backgroundColorOverlayTransformer );
 	stylesInheritanceTransformersRegistry.register(
 		'background-gradient-overlay',
 		backgroundGradientOverlayTransformer
 	);
 	stylesInheritanceTransformersRegistry.register( 'background-image-overlay', backgroundImageOverlayTransformer );
-	stylesInheritanceTransformersRegistry.register( 'background-overlay', backgroundOverlayTransformer );
+	stylesInheritanceTransformersRegistry.register( 'shadow', boxShadowTransformer );
+
+	stylesInheritanceTransformersRegistry.register(
+		'filter',
+		createRepeaterToItemsTransformer( originalStyleTransformers.filter )
+	);
+	stylesInheritanceTransformersRegistry.register(
+		'backdrop-filter',
+		createRepeaterToItemsTransformer( originalStyleTransformers[ 'backdrop-filter' ] )
+	);
+	stylesInheritanceTransformersRegistry.register(
+		'transition',
+		createRepeaterToItemsTransformer( originalStyleTransformers.transition, ', ' )
+	);
+
+	[ 'background-overlay', 'box-shadow', 'transform-functions' ].forEach( ( propType ) =>
+		stylesInheritanceTransformersRegistry.register( propType, arrayTransformer )
+	);
 }

package/src/styles-inheritance/init.ts

@@ -1,5 +1,14 @@
+import { FIELD_TYPE, registerFieldIndicator } from '../field-indicators-registry';
+import { StylesInheritanceIndicator } from './components/styles-inheritance-indicator';
 import { initStylesInheritanceTransformers } from './init-styles-inheritance-transformers';
 
 export const init = () => {
 	initStylesInheritanceTransformers();
+
+	registerFieldIndicator( {
+		fieldType: FIELD_TYPE.STYLES,
+		id: 'styles-inheritance',
+		priority: 1,
+		indicator: StylesInheritanceIndicator,
+	} );
 };

package/src/styles-inheritance/transformers/{background-overlay-transformer.tsx → array-transformer.tsx}

@@ -3,9 +3,9 @@ import { type ReactNode } from 'react';
 import { createTransformer } from '@elementor/editor-canvas';
 import { Stack } from '@elementor/ui';
 
-type BackgroundOverlay = ReactNode[];
+type ArrayValues = ReactNode[];
 
-export const backgroundOverlayTransformer = createTransformer( ( values: BackgroundOverlay[] ) => {
+export const arrayTransformer = createTransformer( ( values: ArrayValues[] ) => {
 	if ( ! values || values.length === 0 ) {
 		return null;
 	}

package/src/styles-inheritance/transformers/background-color-overlay-transformer.tsx

@@ -8,16 +8,10 @@ export type Color = {
 
 export const backgroundColorOverlayTransformer = createTransformer( ( value: Color ) => (
 	<Stack direction="row" gap={ 1 } alignItems="center">
-		<ItemIconColor value={ value } />
 		<ItemLabelColor value={ value } />
 	</Stack>
 ) );
 
-const ItemIconColor = ( { value }: { value: Color } ) => {
-	const { color } = value;
-	return <StyledUnstableColorIndicator size="inherit" component="span" value={ color } />;
-};
-
 const ItemLabelColor = ( { value: { color } }: { value: Color } ) => {
 	return <span>{ color }</span>;
 };