@elementor/editor-editing-panel 1.50.0 → 3.32.0-20

package/src/hooks/use-styles-fields.ts

@@ -1,37 +1,43 @@
 import { useMemo } from 'react';
-import { createElementStyle, deleteElementStyle, type ElementID, getElementLabel } from '@elementor/editor-elements';
+import {
+	createElementStyle,
+	deleteElementStyle,
+	type ElementID,
+	getElementLabel,
+	shouldCreateNewLocalStyle,
+} from '@elementor/editor-elements';
 import type { Props } from '@elementor/editor-props';
 import { getVariantByMeta, type StyleDefinition, type StyleDefinitionVariant } from '@elementor/editor-styles';
 import { isElementsStylesProvider, type StylesProvider } from '@elementor/editor-styles-repository';
 import { ELEMENTS_STYLES_RESERVED_LABEL } from '@elementor/editor-styles-repository';
-import { isExperimentActive, undoable } from '@elementor/editor-v1-adapters';
+import { undoable } from '@elementor/editor-v1-adapters';
 import { __ } from '@wordpress/i18n';
 
 import { useClassesProp } from '../contexts/classes-prop-context';
 import { useElement } from '../contexts/element-context';
 import { useStyle } from '../contexts/style-context';
 import { StyleNotFoundUnderProviderError, StylesProviderCannotUpdatePropsError } from '../errors';
-import { EXPERIMENTAL_FEATURES } from '../sync/experiments-flags';
 import { useStylesRerender } from './use-styles-rerender';
 
+export const HISTORY_DEBOUNCE_WAIT = 800;
+
 export function useStylesFields< T extends Props >( propNames: ( keyof T & string )[] ) {
 	const {
 		element: { id: elementId },
 	} = useElement();
 	const { id: styleId, meta, provider, canEdit } = useStyle();
 
-	const undoableUpdateStyle = useUndoableUpdateStyle( { elementId, meta } );
-	const undoableCreateElementStyle = useUndoableCreateElementStyle( { elementId, meta } );
+	const undoableUpdateStyle = useUndoableActions( { elementId, meta } );
 
 	useStylesRerender();
 
 	const values = getProps< T >( { elementId, styleId, provider, meta, propNames } );
 
 	const setValues = ( props: T, { history: { propDisplayName } }: { history: { propDisplayName: string } } ) => {
-		if ( styleId === null ) {
-			undoableCreateElementStyle( { props, propDisplayName } );
+		if ( ! styleId ) {
+			undoableUpdateStyle( { styleId: null, provider: null, props, propDisplayName } );
 		} else {
-			undoableUpdateStyle( { provider, styleId, props, propDisplayName } );
+			undoableUpdateStyle( { styleId, provider, props, propDisplayName } );
 		}
 	};
 
@@ -68,14 +74,36 @@ function getProps< T extends Props >( { styleId, elementId, provider, meta, prop
 	) as NullableValues< T >;
 }
 
-type UndoableCreateElementStyleArgs = {
+type UpdateStyleArgs = {
+	styleId: StyleDefinition[ 'id' ];
+	provider: StylesProvider;
 	props: Props;
 	propDisplayName: string;
 };
 
-function useUndoableCreateElementStyle( {
+type CreateStyleArgs = {
+	styleId: null;
+	provider: null;
+	props: Props;
+	propDisplayName: string;
+};
+
+type UpdateStyleReturn = {
+	styleId: StyleDefinition[ 'id' ];
+	provider: StylesProvider;
+	prevProps: Props;
+};
+
+type CreateStyleReturn = {
+	createdStyleId: StyleDefinition[ 'id' ];
+};
+
+type UndoableUpdateStylePayload = UpdateStyleArgs | CreateStyleArgs;
+type UndoableUpdateStyleReturn = UpdateStyleReturn | CreateStyleReturn;
+
+function useUndoableActions( {
 	elementId,
-	meta,
+	meta: { breakpoint, state },
 }: {
 	elementId: ElementID;
 	meta: StyleDefinitionVariant[ 'meta' ];
@@ -83,108 +111,72 @@ function useUndoableCreateElementStyle( {
 	const classesProp = useClassesProp();
 
 	return useMemo( () => {
-		const isVersion331Active = isExperimentActive( EXPERIMENTAL_FEATURES.V_3_31 );
+		const meta = { breakpoint, state };
 
 		const createStyleArgs = { elementId, classesProp, meta, label: ELEMENTS_STYLES_RESERVED_LABEL };
 
 		return undoable(
 			{
-				do: ( { props }: UndoableCreateElementStyleArgs ) => {
-					return createElementStyle( { ...createStyleArgs, props } );
+				do: ( payload: UndoableUpdateStylePayload ): UndoableUpdateStyleReturn => {
+					if ( shouldCreateNewLocalStyle< StylesProvider >( payload ) ) {
+						return create( payload as CreateStyleArgs );
+					}
+					return update( payload as UpdateStyleArgs );
 				},
+				undo: ( payload: UndoableUpdateStylePayload, doReturn: UndoableUpdateStyleReturn ) => {
+					const wasLocalStyleCreated = shouldCreateNewLocalStyle< StylesProvider >( payload );
 
-				undo: ( _, styleId ) => {
-					deleteElementStyle( elementId, styleId );
+					if ( wasLocalStyleCreated ) {
+						return undoCreate( payload as CreateStyleArgs, doReturn as CreateStyleReturn );
+					}
+					return undo( payload as UpdateStyleArgs, doReturn as UpdateStyleReturn );
 				},
+				redo: ( payload: UndoableUpdateStylePayload, doReturn: UndoableUpdateStyleReturn ) => {
+					const wasLocalStyleCreated = shouldCreateNewLocalStyle< StylesProvider >( payload );
 
-				redo: ( { props }, styleId ) => {
-					return createElementStyle( { ...createStyleArgs, props, styleId } );
+					if ( wasLocalStyleCreated ) {
+						return create( payload as CreateStyleArgs, doReturn as CreateStyleReturn );
+					}
+					return update( payload as UpdateStyleArgs );
 				},
 			},
 			{
-				title: () => {
-					if ( isVersion331Active ) {
-						return localStyleHistoryTitlesV331.title( { elementId } );
-					}
-					return historyTitlesV330.title( { elementId } );
-				},
-				subtitle: ( { propDisplayName } ) => {
-					if ( isVersion331Active ) {
-						return localStyleHistoryTitlesV331.subtitle( { propDisplayName } );
-					}
-					return historyTitlesV330.subtitle;
-				},
+				title: ( { provider, styleId } ) => getTitle( { provider, styleId, elementId } ),
+				subtitle: ( { provider, styleId, propDisplayName } ) =>
+					getSubtitle( { provider, styleId, elementId, propDisplayName } ),
+				debounce: { wait: HISTORY_DEBOUNCE_WAIT },
 			}
 		);
-	}, [ classesProp, elementId, meta ] );
-}
 
-type UndoableUpdateStyleArgs = {
-	styleId: StyleDefinition[ 'id' ];
-	provider: StylesProvider;
-	props: Props;
-	propDisplayName: string;
-};
+		function create( { props }: CreateStyleArgs, redoArgs?: CreateStyleReturn ): CreateStyleReturn {
+			const createdStyle = createElementStyle( { ...createStyleArgs, props, styleId: redoArgs?.createdStyleId } );
 
-function useUndoableUpdateStyle( {
-	elementId,
-	meta,
-}: {
-	elementId: ElementID;
-
-	meta: StyleDefinitionVariant[ 'meta' ];
-} ) {
-	return useMemo( () => {
-		const isVersion331Active = isExperimentActive( EXPERIMENTAL_FEATURES.V_3_31 );
+			return { createdStyleId: createdStyle };
+		}
 
-		return undoable(
-			{
-				do: ( { provider, styleId, props }: UndoableUpdateStyleArgs ) => {
-					if ( ! provider.actions.updateProps ) {
-						throw new StylesProviderCannotUpdatePropsError( {
-							context: { providerKey: provider.getKey() },
-						} );
-					}
+		function undoCreate( _: UndoableUpdateStylePayload, { createdStyleId }: CreateStyleReturn ) {
+			deleteElementStyle( elementId, createdStyleId );
+		}
 
-					const style = provider.actions.get( styleId, { elementId } );
+		function update( { provider, styleId, props }: UpdateStyleArgs ): UpdateStyleReturn {
+			if ( ! provider.actions.updateProps ) {
+				throw new StylesProviderCannotUpdatePropsError( {
+					context: { providerKey: provider.getKey() },
+				} );
+			}
 
-					const prevProps = getCurrentProps( style, meta );
+			const style = provider.actions.get( styleId, { elementId } );
+			const prevProps = getCurrentProps( style, meta );
 
-					provider.actions.updateProps( { id: styleId, meta, props }, { elementId } );
+			provider.actions.updateProps( { id: styleId, meta, props }, { elementId } );
 
-					return prevProps;
-				},
+			return { styleId, provider, prevProps };
+		}
 
-				undo: ( { provider, styleId }, prevProps ) => {
-					provider.actions.updateProps?.( { id: styleId, meta, props: prevProps }, { elementId } );
-				},
-			},
-			{
-				title: ( { provider } ) => {
-					if ( isVersion331Active ) {
-						const isLocal = isElementsStylesProvider( provider.getKey() );
-
-						if ( isLocal ) {
-							return localStyleHistoryTitlesV331.title( { elementId } );
-						}
-						return defaultHistoryTitlesV331.title( { provider } );
-					}
-					return historyTitlesV330.title( { elementId } );
-				},
-				subtitle: ( { provider, styleId, propDisplayName } ) => {
-					if ( isVersion331Active ) {
-						const isLocal = isElementsStylesProvider( provider.getKey() );
-
-						if ( isLocal ) {
-							return localStyleHistoryTitlesV331.subtitle( { propDisplayName } );
-						}
-						return defaultHistoryTitlesV331.subtitle( { provider, styleId, elementId, propDisplayName } );
-					}
-					return historyTitlesV330.subtitle;
-				},
-			}
-		);
-	}, [ elementId, meta ] );
+		function undo( _: UndoableUpdateStylePayload, { styleId, provider, prevProps }: UpdateStyleReturn ) {
+			provider.actions.updateProps?.( { id: styleId, meta, props: prevProps }, { elementId } );
+		}
+	}, [ elementId, breakpoint, state, classesProp ] );
 }
 
 function getCurrentProps( style: StyleDefinition | null, meta: StyleDefinitionVariant[ 'meta' ] ) {
@@ -199,28 +191,23 @@ function getCurrentProps( style: StyleDefinition | null, meta: StyleDefinitionVa
 	return structuredClone( props );
 }
 
-const historyTitlesV330 = {
-	title: ( { elementId }: { elementId: ElementID } ) => getElementLabel( elementId ),
-	subtitle: __( 'Style edited', 'elementor' ),
-};
-
-type DefaultHistoryTitleV331Args = {
+type DefaultHistoryTitleArgs = {
 	provider: StylesProvider;
 };
 
-type DefaultHistorySubtitleV331Args = {
+type DefaultHistorySubtitleArgs = {
 	provider: StylesProvider;
 	styleId: StyleDefinition[ 'id' ];
 	elementId: ElementID;
 	propDisplayName: string;
 };
 
-const defaultHistoryTitlesV331 = {
-	title: ( { provider }: DefaultHistoryTitleV331Args ) => {
+const defaultHistoryTitles = {
+	title: ( { provider }: DefaultHistoryTitleArgs ) => {
 		const providerLabel = provider.labels?.singular;
 		return providerLabel ? capitalize( providerLabel ) : __( 'Style', 'elementor' );
 	},
-	subtitle: ( { provider, styleId, elementId, propDisplayName }: DefaultHistorySubtitleV331Args ) => {
+	subtitle: ( { provider, styleId, elementId, propDisplayName }: DefaultHistorySubtitleArgs ) => {
 		const styleLabel = provider.actions.get( styleId, { elementId } )?.label;
 
 		if ( ! styleLabel ) {
@@ -232,17 +219,17 @@ const defaultHistoryTitlesV331 = {
 	},
 };
 
-type LocalStyleHistoryTitleV331Args = {
+type LocalStyleHistoryTitleArgs = {
 	elementId: ElementID;
 };
 
-type LocalStyleHistorySubtitleV331Args = {
+type LocalStyleHistorySubtitleArgs = {
 	propDisplayName: string;
 };
 
-const localStyleHistoryTitlesV331 = {
-	title: ( { elementId }: LocalStyleHistoryTitleV331Args ) => getElementLabel( elementId ),
-	subtitle: ( { propDisplayName }: LocalStyleHistorySubtitleV331Args ) =>
+const localStyleHistoryTitles = {
+	title: ( { elementId }: LocalStyleHistoryTitleArgs ) => getElementLabel( elementId ),
+	subtitle: ( { propDisplayName }: LocalStyleHistorySubtitleArgs ) =>
 		// translators: %s is the name of the style property being edited
 		__( `%s edited`, 'elementor' ).replace( '%s', propDisplayName ),
 };
@@ -250,3 +237,39 @@ const localStyleHistoryTitlesV331 = {
 function capitalize( str: string ) {
 	return str.charAt( 0 ).toUpperCase() + str.slice( 1 );
 }
+
+const isLocalStyle = ( provider: StylesProvider | null, styleId: StyleDefinition[ 'id' ] | null ) =>
+	! provider || ! styleId || isElementsStylesProvider( provider.getKey() );
+
+type TitleOptions = {
+	provider: StylesProvider | null;
+	styleId: string | null;
+	elementId: string;
+};
+
+type SubtitleOptions = TitleOptions & { propDisplayName: string };
+
+export const getTitle = ( { provider, styleId, elementId }: TitleOptions ) => {
+	const isLocal = isLocalStyle( provider, styleId );
+
+	if ( isLocal ) {
+		return localStyleHistoryTitles.title( { elementId } );
+	}
+
+	return defaultHistoryTitles.title( { provider: provider as StylesProvider } );
+};
+
+export const getSubtitle = ( { provider, styleId, propDisplayName, elementId }: SubtitleOptions ) => {
+	const isLocal = isLocalStyle( provider, styleId );
+
+	if ( isLocal ) {
+		return localStyleHistoryTitles.subtitle( { propDisplayName } );
+	}
+
+	return defaultHistoryTitles.subtitle( {
+		provider: provider as StylesProvider,
+		styleId: styleId as StyleDefinition[ 'id' ],
+		elementId,
+		propDisplayName,
+	} );
+};

package/src/index.ts

@@ -1,15 +1,14 @@
-export { EXPERIMENTAL_FEATURES } from './sync/experiments-flags';
-
 export { useBoundProp } from '@elementor/editor-controls';
-export type { PopoverActionProps } from './popover-action';
-export { registerControlReplacement } from './control-replacement';
-export { registerStyleProviderToColors } from './provider-colors-registry';
+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 { usePanelActions, usePanelStatus } from './panel';
-export { type ValidationResult, type ValidationEvent } from './components/creatable-autocomplete';
-export { controlActionsMenu } from './controls-actions';
-export { useFontFamilies } from './components/style-sections/typography-section/hooks/use-font-families';
 export { PopoverBody } from './components/popover-body';
+export { useFontFamilies } from './components/style-sections/typography-section/hooks/use-font-families';
 export { useSectionWidth } from './contexts/section-context';
-
+export { registerControlReplacement } from './control-replacement';
+export { controlActionsMenu } from './controls-actions';
 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';

package/src/init.ts

@@ -1,13 +1,12 @@
 import { injectIntoLogic } from '@elementor/editor';
 import { __registerPanel as registerPanel } from '@elementor/editor-panels';
-import { blockCommand, isExperimentActive } from '@elementor/editor-v1-adapters';
+import { blockCommand } from '@elementor/editor-v1-adapters';
 
 import { EditingPanelHooks } from './components/editing-panel-hooks';
 import { init as initDynamics } from './dynamics/init';
 import { panel } from './panel';
 import { initResetStyleProps } from './reset-style-props';
 import { init as initStylesInheritance } from './styles-inheritance/init';
-import { EXPERIMENTAL_FEATURES } from './sync/experiments-flags';
 import { isAtomicWidgetSelected } from './sync/is-atomic-widget-selected';
 
 export function init() {
@@ -25,9 +24,7 @@ export function init() {
 	// TODO: Move it from here once we have styles-inheritance package.
 	initStylesInheritance();
 
-	if ( isExperimentActive( EXPERIMENTAL_FEATURES.V_3_30 ) ) {
-		initResetStyleProps();
-	}
+	initResetStyleProps();
 }
 
 const blockV1Panel = () => {

package/src/popover-action.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
-import { type ComponentType, type ElementType as ReactElementType, useId } from 'react';
-import { bindPopover, bindToggle, IconButton, Popover, Tooltip, usePopupState } from '@elementor/ui';
+import { type ComponentType, type ElementType as ReactElementType } from 'react';
+import { useFloatingActionsBar } from '@elementor/editor-controls';
+import { bindPopover, bindTrigger, IconButton, Popover, Tooltip, usePopupState } from '@elementor/ui';
 
 const SIZE = 'tiny';
 
@@ -11,17 +12,8 @@ export type PopoverActionProps = {
 	content: ComponentType< { close: () => void } >;
 };
 
-export default function PopoverAction( {
-	title,
-	visible = true,
-	icon: Icon,
-	content: PopoverContent,
-}: PopoverActionProps ) {
-	const id = useId();
-	const popupState = usePopupState( {
-		variant: 'popover',
-		popupId: `elementor-popover-action-${ id }`,
-	} );
+export function PopoverAction( { title, visible = true, icon: Icon, content: PopoverContent }: PopoverActionProps ) {
+	const { popupState, triggerProps, popoverProps } = useFloatingActionsPopover();
 
 	if ( ! visible ) {
 		return null;
@@ -30,7 +22,7 @@ export default function PopoverAction( {
 	return (
 		<>
 			<Tooltip placement="top" title={ title }>
-				<IconButton aria-label={ title } key={ id } size={ SIZE } { ...bindToggle( popupState ) }>
+				<IconButton aria-label={ title } size={ SIZE } { ...triggerProps }>
 					<Icon fontSize={ SIZE } />
 				</IconButton>
 			</Tooltip>
@@ -48,10 +40,39 @@ export default function PopoverAction( {
 				PaperProps={ {
 					sx: { my: 2.5 },
 				} }
-				{ ...bindPopover( popupState ) }
+				{ ...popoverProps }
 			>
 				<PopoverContent close={ popupState.close } />
 			</Popover>
 		</>
 	);
 }
+
+export function useFloatingActionsPopover() {
+	const { setOpen } = useFloatingActionsBar();
+	const popupState = usePopupState( { variant: 'popover' } );
+
+	const triggerProps = bindTrigger( popupState );
+	const popoverProps = bindPopover( popupState );
+
+	const onClick = ( e: React.MouseEvent ) => {
+		triggerProps.onClick( e );
+		setOpen( true );
+	};
+
+	const onClose = () => {
+		popoverProps.onClose();
+		setOpen( false );
+	};
+
+	const close = () => {
+		popupState.close();
+		setOpen( false );
+	};
+
+	return {
+		popupState: { ...popupState, close },
+		triggerProps: { ...triggerProps, onClick },
+		popoverProps: { ...popoverProps, onClose },
+	};
+}

package/src/reset-style-props.tsx

@@ -14,16 +14,12 @@ export function initResetStyleProps() {
 	} );
 }
 
-// Temporary fix for the issue with ControlToggleButtonGroup.
-const EXCLUDED_BINDS = [ 'flex-grow', 'flex-shrink', 'flex-basis' ];
-
 export function useResetStyleValueProps() {
 	const isStyle = useIsStyle();
-	const { value, setValue, path, bind } = useBoundProp();
+	const { value, setValue, path } = useBoundProp();
 
 	return {
-		visible:
-			isStyle && value !== null && value !== undefined && path.length <= 2 && ! EXCLUDED_BINDS.includes( bind ),
+		visible: isStyle && value !== null && value !== undefined && path.length <= 2,
 		title: __( 'Clear', 'elementor' ),
 		icon: BrushBigIcon,
 		onClick: () => setValue( null ),

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

@@ -17,6 +17,7 @@ export const ValueComponent = ( { index, value }: Props ) => {
 				overflow: 'hidden',
 				textOverflow: 'ellipsis',
 				whiteSpace: 'nowrap',
+				pl: 2.5,
 			} }
 		>
 			{ value }

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

@@ -3,34 +3,28 @@ import { type ComponentProps } from 'react';
 import { useBoundProp } from '@elementor/editor-controls';
 import { isEmpty, type PropType } from '@elementor/editor-props';
 import { ELEMENTS_BASE_STYLES_PROVIDER_KEY } from '@elementor/editor-styles-repository';
-import { isExperimentActive } from '@elementor/editor-v1-adapters';
-import { Tooltip } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
 import { StyleIndicator } from '../../components/style-indicator';
 import { useStyle } from '../../contexts/style-context';
 import { useStylesInheritanceChain } from '../../contexts/styles-inheritance-context';
-import { EXPERIMENTAL_FEATURES } from '../../sync/experiments-flags';
 import { getStylesProviderThemeColor } from '../../utils/get-styles-provider-color';
-import { isUsingIndicatorPopover } from '../consts';
 import { type SnapshotPropValue } from '../types';
 import { getValueFromInheritanceChain } from '../utils';
 import { StylesInheritanceInfotip } from './styles-inheritance-infotip';
 
+const skipControls = [ 'box-shadow', 'background-overlay', 'filter', 'backdrop-filter', 'transform' ];
+
 export const StylesInheritanceIndicator = () => {
 	const { path, propType } = useBoundProp();
 
-	const isUsingNestedProps = isExperimentActive( EXPERIMENTAL_FEATURES.V_3_30 );
-
-	const finalPath = isUsingNestedProps ? path : path.slice( 0, 1 );
-
-	const inheritanceChain = useStylesInheritanceChain( finalPath );
+	const inheritanceChain = useStylesInheritanceChain( path );
 
-	if ( ! inheritanceChain.length ) {
+	if ( ! path || path.some( ( pathItem ) => skipControls.includes( pathItem ) ) || ! inheritanceChain.length ) {
 		return null;
 	}
 
-	return <Indicator inheritanceChain={ inheritanceChain } path={ finalPath } propType={ propType } />;
+	return <Indicator inheritanceChain={ inheritanceChain } path={ path } propType={ propType } />;
 };
 
 type IndicatorProps = {
@@ -50,10 +44,7 @@ const Indicator = ( { inheritanceChain, path, propType }: IndicatorProps ) => {
 
 	const [ actualStyle ] = inheritanceChain;
 
-	if (
-		! isExperimentActive( EXPERIMENTAL_FEATURES.V_3_31 ) &&
-		actualStyle.provider === ELEMENTS_BASE_STYLES_PROVIDER_KEY
-	) {
+	if ( actualStyle.provider === ELEMENTS_BASE_STYLES_PROVIDER_KEY ) {
 		return null;
 	}
 
@@ -69,14 +60,6 @@ const Indicator = ( { inheritanceChain, path, propType }: IndicatorProps ) => {
 		isOverridden: hasValue && ! isFinalValue ? true : undefined,
 	};
 
-	if ( ! isUsingIndicatorPopover() ) {
-		return (
-			<Tooltip title={ __( 'Style origin', 'elementor' ) } placement="top">
-				<StyleIndicator { ...styleIndicatorProps } aria-label={ label } />
-			</Tooltip>
-		);
-	}
-
 	return (
 		<StylesInheritanceInfotip
 			inheritanceChain={ inheritanceChain }

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

@@ -59,27 +59,36 @@ export const StylesInheritanceInfotip = ( { inheritanceChain, propType, path, la
 				sx={ {
 					width: `${ sectionWidth - SECTION_PADDING_INLINE }px`,
 					maxWidth: 496,
+					maxHeight: 268,
 					overflowX: 'hidden',
+					display: 'flex',
+					flexDirection: 'column',
 				} }
 			>
+				<Box
+					sx={ {
+						position: 'sticky',
+						top: 0,
+						zIndex: 1,
+						backgroundColor: 'background.paper',
+					} }
+				>
+					<PopoverHeader title={ __( 'Style origin', 'elementor' ) } onClose={ closeInfotip } />
+				</Box>
+
 				<CardContent
 					sx={ {
 						display: 'flex',
-						gap: 0.5,
 						flexDirection: 'column',
 						p: 0,
+						flex: 1,
+						overflow: 'auto',
 						'&:last-child': {
 							pb: 0,
 						},
 					} }
 				>
-					<PopoverHeader title={ __( 'Style origin', 'elementor' ) } onClose={ closeInfotip } />
-
-					<Stack
-						gap={ 1.5 }
-						sx={ { pl: 2, pr: 1, pb: 2, overflowX: 'hidden', overflowY: 'auto' } }
-						role="list"
-					>
+					<Stack gap={ 1.5 } sx={ { pl: 3, pr: 1, pb: 2 } } role="list">
 						{ items.map( ( item, index ) => {
 							return (
 								<Box

package/src/styles-inheritance/consts.ts

@@ -1,5 +1,3 @@
-import { isExperimentActive } from '@elementor/editor-v1-adapters';
-
 // the following prop types' style transformers would be ignored to provide alternative transformers for the styles inheritance popover
 export const excludePropTypeTransformers = new Set( [
 	'background-color-overlay',
@@ -13,5 +11,3 @@ export const excludePropTypeTransformers = new Set( [
 	'image',
 	'background-overlay',
 ] );
-
-export const isUsingIndicatorPopover = () => isExperimentActive( 'e_v_3_30' );

package/src/styles-inheritance/init.ts

@@ -1,8 +1,5 @@
-import { isUsingIndicatorPopover } from './consts';
 import { initStylesInheritanceTransformers } from './init-styles-inheritance-transformers';
 
 export const init = () => {
-	if ( isUsingIndicatorPopover() ) {
-		initStylesInheritanceTransformers();
-	}
+	initStylesInheritanceTransformers();
 };

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

@@ -7,7 +7,7 @@ export type Color = {
 };
 
 export const backgroundColorOverlayTransformer = createTransformer( ( value: Color ) => (
-	<Stack direction="row" gap={ 10 }>
+	<Stack direction="row" gap={ 1 } alignItems="center">
 		<ItemIconColor value={ value } />
 		<ItemLabelColor value={ value } />
 	</Stack>
@@ -23,5 +23,9 @@ const ItemLabelColor = ( { value: { color } }: { value: Color } ) => {
 };
 
 export const StyledUnstableColorIndicator = styled( UnstableColorIndicator )( ( { theme } ) => ( {
+	width: '1em',
+	height: '1em',
 	borderRadius: `${ theme.shape.borderRadius / 2 }px`,
+	outline: `1px solid ${ theme.palette.action.disabled }`,
+	flexShrink: 0,
 } ) );