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

package/src/controls-registry/control.tsx

@@ -3,7 +3,7 @@ import type { ComponentProps } from 'react';
 
 import { useElement } from '../contexts/element-context';
 import { ControlTypeNotFoundError } from '../errors';
-import { type ControlType, type ControlTypes, getControl } from './controls-registry';
+import { controlsRegistry, type ControlType, type ControlTypes } from './controls-registry';
 
 type IsRequired< T, K extends keyof T > = object extends Pick< T, K > ? false : true;
 
@@ -24,7 +24,7 @@ type ControlProps< T extends ControlType > = AnyPropertyRequired< ComponentProps
 	  };
 
 export const Control = < T extends ControlType >( { props, type }: ControlProps< T > ) => {
-	const ControlByType = getControl( type );
+	const ControlByType = controlsRegistry.get( type );
 	const { element } = useElement();
 
 	if ( ! ControlByType ) {

package/src/controls-registry/controls-registry.tsx

@@ -24,6 +24,8 @@ import {
 	stringPropTypeUtil,
 } from '@elementor/editor-props';
 
+import { ControlTypeAlreadyRegisteredError, ControlTypeNotRegisteredError } from '../errors';
+
 type ControlRegistry = Record<
 	string,
 	// eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -50,8 +52,47 @@ export type ControlTypes = {
 	[ key in ControlType ]: ( typeof controlTypes )[ key ][ 'component' ];
 };
 
-export const getControl = ( type: ControlType ) => controlTypes[ type ]?.component;
+class ControlsRegistry {
+	constructor( private readonly controlsRegistry: ControlRegistry = controlTypes ) {
+		this.controlsRegistry = controlsRegistry;
+	}
+
+	get( type: ControlType ): ControlComponent {
+		return this.controlsRegistry[ type ]?.component;
+	}
+
+	getLayout( type: ControlType ) {
+		return this.controlsRegistry[ type ]?.layout;
+	}
+
+	getPropTypeUtil( type: ControlType ) {
+		return this.controlsRegistry[ type ]?.propTypeUtil;
+	}
+
+	registry(): ControlRegistry {
+		return this.controlsRegistry;
+	}
+
+	register(
+		type: string,
+		component: ControlComponent,
+		layout: ControlLayout,
+		// eslint-disable-next-line @typescript-eslint/no-explicit-any
+		propTypeUtil?: PropTypeUtil< string, any >
+	) {
+		if ( this.controlsRegistry[ type ] ) {
+			throw new ControlTypeAlreadyRegisteredError( { context: { controlType: type } } );
+		}
+		this.controlsRegistry[ type ] = { component, layout, propTypeUtil };
+	}
 
-export const getDefaultLayout = ( type: ControlType ) => controlTypes[ type ].layout;
+	unregister( type: string ) {
+		if ( ! this.controlsRegistry[ type ] ) {
+			throw new ControlTypeNotRegisteredError( { context: { controlType: type } } );
+		}
+		// eslint-disable-next-line @typescript-eslint/no-dynamic-delete
+		delete this.controlsRegistry[ type ];
+	}
+}
 
-export const getPropTypeUtil = ( type: ControlType ) => controlTypes[ type ]?.propTypeUtil;
+export const controlsRegistry = new ControlsRegistry();

package/src/controls-registry/settings-field.tsx

@@ -5,50 +5,57 @@ import { setDocumentModifiedStatus } from '@elementor/editor-documents';
 import {
 	type ElementID,
 	getElementLabel,
-	getElementSetting,
+	getElementSettings,
 	updateElementSettings,
 	useElementSettings,
 } from '@elementor/editor-elements';
-import { type PropKey, type PropType, type PropValue, shouldApplyEffect } from '@elementor/editor-props';
-import { isExperimentActive, undoable } from '@elementor/editor-v1-adapters';
+import { isDependencyMet, type PropKey, type Props, type PropType, type PropValue } from '@elementor/editor-props';
+import { undoable } from '@elementor/editor-v1-adapters';
 import { __ } from '@wordpress/i18n';
 
 import { useElement } from '../contexts/element-context';
-import { EXPERIMENTAL_FEATURES } from '../sync/experiments-flags';
+import { extractOrderedDependencies, updateValues, type Values } from '../utils/prop-dependency-utils';
 import { createTopLevelOjectType } from './create-top-level-object-type';
 
-type Props = {
+type SettingsFieldProps = {
 	bind: PropKey;
 	propDisplayName: string;
 	children: React.ReactNode;
 };
 
-export const SettingsField = ( { bind, children, propDisplayName }: Props ) => {
-	const { element, elementType } = useElement();
+const HISTORY_DEBOUNCE_WAIT = 800;
 
-	const elementSettingValues = useElementSettings< PropValue >( element.id, Object.keys( elementType.propsSchema ) );
+export const SettingsField = ( { bind, children, propDisplayName }: SettingsFieldProps ) => {
+	const {
+		element: { id: elementId },
+		elementType: { propsSchema, dependenciesPerTargetMapping = {} },
+	} = useElement();
 
-	const value = { [ bind ]: elementSettingValues?.[ bind ] };
+	const elementSettingValues = useElementSettings< PropValue >( elementId, Object.keys( propsSchema ) ) as Values;
 
-	const propType = createTopLevelOjectType( { schema: elementType.propsSchema } );
+	const value = { [ bind ]: elementSettingValues?.[ bind ] ?? null };
+
+	const propType = createTopLevelOjectType( { schema: propsSchema } );
 
 	const undoableUpdateElementProp = useUndoableUpdateElementProp( {
-		propKey: bind,
-		elementId: element.id,
+		elementId,
 		propDisplayName,
 	} );
 
-	const setValue = ( newValue: Record< string, PropValue > ) => {
-		const isVersion331Active = isExperimentActive( EXPERIMENTAL_FEATURES.V_3_31 );
+	const setValue = ( newValue: Values ) => {
+		const dependents = extractOrderedDependencies(
+			bind,
+			propsSchema,
+			elementSettingValues,
+			dependenciesPerTargetMapping
+		);
+
+		const settings = updateValues( newValue, dependents, propsSchema, elementSettingValues );
 
-		if ( isVersion331Active ) {
-			undoableUpdateElementProp( { newValue } );
-		} else {
-			updateElementSettings( { id: element.id, props: newValue } );
-		}
+		undoableUpdateElementProp( settings );
 	};
 
-	const isDisabled = ( prop: PropType ) => getDisableState( prop, elementSettingValues );
+	const isDisabled = ( prop: PropType ) => ! isDependencyMet( prop?.dependencies, elementSettingValues );
 
 	return (
 		<PropProvider propType={ propType } value={ value } setValue={ setValue } isDisabled={ isDisabled }>
@@ -57,43 +64,23 @@ export const SettingsField = ( { bind, children, propDisplayName }: Props ) => {
 	);
 };
 
-function getDisableState( propType: PropType, elementValues: PropValue ): boolean | undefined {
-	const disablingDependencies = propType.dependencies?.filter( ( { effect } ) => effect === 'disable' ) || [];
-
-	if ( ! disablingDependencies.length ) {
-		return false;
-	}
-
-	if ( disablingDependencies.length > 1 ) {
-		throw new Error( 'Multiple disabling dependencies are not supported.' );
-	}
-
-	return shouldApplyEffect( disablingDependencies[ 0 ], elementValues );
-}
-
-type UndoableUpdateElementSettingsArgs = {
-	newValue: Record< string, PropValue >;
-};
-
 function useUndoableUpdateElementProp( {
-	propKey,
 	elementId,
 	propDisplayName,
 }: {
-	propKey: PropKey;
 	elementId: ElementID;
 	propDisplayName: string;
 } ) {
 	return useMemo( () => {
 		return undoable(
 			{
-				do: ( { newValue }: UndoableUpdateElementSettingsArgs ) => {
-					const prevPropValue = getElementSetting( elementId, propKey ) as PropValue;
+				do: ( newSettings: Props ) => {
+					const prevPropValue = getElementSettings( elementId, Object.keys( newSettings ) ) as Props;
 
-					updateElementSettings( { id: elementId, props: { ...newValue }, withHistory: false } );
+					updateElementSettings( { id: elementId, props: newSettings as Props, withHistory: false } );
 					setDocumentModifiedStatus( true );
 
-					return { [ propKey ]: prevPropValue };
+					return prevPropValue;
 				},
 
 				undo: ( {}, prevProps ) => {
@@ -104,7 +91,8 @@ function useUndoableUpdateElementProp( {
 				title: getElementLabel( elementId ),
 				// translators: %s is the name of the property that was edited.
 				subtitle: __( '%s edited', 'elementor' ).replace( '%s', propDisplayName ),
+				debounce: { wait: HISTORY_DEBOUNCE_WAIT },
 			}
 		);
-	}, [ propKey, elementId, propDisplayName ] );
+	}, [ elementId, propDisplayName ] );
 }

package/src/controls-registry/styles-field.tsx

@@ -2,11 +2,11 @@ import * as React from 'react';
 import { ControlAdornmentsProvider, PropKeyProvider, PropProvider } from '@elementor/editor-controls';
 import { type PropKey, type PropValue } from '@elementor/editor-props';
 import { getStylesSchema } from '@elementor/editor-styles';
-import { isExperimentActive } from '@elementor/editor-v1-adapters';
 
 import { useStylesInheritanceChain } from '../contexts/styles-inheritance-context';
 import { useStylesField } from '../hooks/use-styles-field';
 import { StylesInheritanceIndicator } from '../styles-inheritance/components/styles-inheritance-indicator';
+import { ConditionalField } from './conditional-field';
 import { createTopLevelOjectType } from './create-top-level-object-type';
 
 export type StylesFieldProps = {
@@ -16,25 +16,23 @@ export type StylesFieldProps = {
 	propDisplayName: string;
 };
 
-export const StylesField = ( { bind, placeholder, propDisplayName, children }: StylesFieldProps ) => {
-	const { value, setValue, canEdit } = useStylesField( bind, {
-		history: { propDisplayName },
-	} );
+export const StylesField = ( { bind, propDisplayName, children }: StylesFieldProps ) => {
+	const stylesSchema = getStylesSchema();
 
-	const isVersion331Active = isExperimentActive( 'e_v_3_31' );
 	const stylesInheritanceChain = useStylesInheritanceChain( [ bind ] );
 
-	const stylesSchema = getStylesSchema();
+	const { value, canEdit, ...fields } = useStylesField( bind, { history: { propDisplayName } } );
 
 	const propType = createTopLevelOjectType( { schema: stylesSchema } );
 
-	const values = { [ bind ]: value };
 	const [ actualValue ] = stylesInheritanceChain;
+
 	const placeholderValues = {
-		[ bind ]: isVersion331Active ? actualValue?.value : placeholder,
+		[ bind ]: actualValue?.value,
 	};
-	const setValues = ( newValue: Record< string, PropValue > ) => {
-		setValue( newValue[ bind ] );
+
+	const setValue = ( newValue: Record< string, PropValue > ) => {
+		fields.setValue( newValue[ bind ] );
 	};
 
 	return (
@@ -48,12 +46,14 @@ export const StylesField = ( { bind, placeholder, propDisplayName, children }: S
 		>
 			<PropProvider
 				propType={ propType }
-				value={ values }
-				setValue={ setValues }
+				value={ { [ bind ]: value } }
+				setValue={ setValue }
 				placeholder={ placeholderValues }
 				isDisabled={ () => ! canEdit }
 			>
-				<PropKeyProvider bind={ bind }>{ children }</PropKeyProvider>
+				<PropKeyProvider bind={ bind }>
+					<ConditionalField>{ children }</ConditionalField>
+				</PropKeyProvider>
 			</PropProvider>
 		</ControlAdornmentsProvider>
 	);

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

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { ControlFormLabel, useBoundProp } from '@elementor/editor-controls';
 import type { Control, ControlsSection } from '@elementor/editor-elements';
-import { PopoverHeader, PopoverScrollableContent } from '@elementor/editor-ui';
+import { PopoverHeader } from '@elementor/editor-ui';
 import { DatabaseIcon, SettingsIcon, XIcon } from '@elementor/icons';
 import {
 	bindPopover,
@@ -21,8 +21,9 @@ import {
 } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
+import { PopoverBody } from '../../components/popover-body';
 import { Control as BaseControl } from '../../controls-registry/control';
-import { type ControlType, getControl } from '../../controls-registry/controls-registry';
+import { controlsRegistry, type ControlType } from '../../controls-registry/controls-registry';
 import { usePersistDynamicValue } from '../../hooks/use-persist-dynamic-value';
 import { DynamicControl } from '../dynamic-control';
 import { useDynamicTag } from '../hooks/use-dynamic-tag';
@@ -82,9 +83,9 @@ export const DynamicSelectionControl = () => {
 				} }
 				{ ...bindPopover( selectionPopoverState ) }
 			>
-				<Stack>
+				<PopoverBody>
 					<DynamicSelection close={ selectionPopoverState.close } />
-				</Stack>
+				</PopoverBody>
 			</Popover>
 		</Box>
 	);
@@ -107,18 +108,21 @@ export const DynamicSettingsPopover = ( { dynamicTag }: { dynamicTag: DynamicTag
 			<Popover
 				disablePortal
 				disableScrollLock
-				anchorOrigin={ { vertical: 'bottom', horizontal: 'center' } }
+				anchorOrigin={ { vertical: 'bottom', horizontal: 'right' } }
+				transformOrigin={ { vertical: 'top', horizontal: 'right' } }
 				PaperProps={ {
-					sx: { my: 0.5 },
+					sx: { my: 1 },
 				} }
 				{ ...bindPopover( popupState ) }
 			>
-				<PopoverHeader
-					title={ dynamicTag.label }
-					onClose={ popupState.close }
-					icon={ <DatabaseIcon fontSize={ SIZE } /> }
-				/>
-				<DynamicSettings controls={ dynamicTag.atomic_controls } />
+				<PopoverBody>
+					<PopoverHeader
+						title={ dynamicTag.label }
+						onClose={ popupState.close }
+						icon={ <DatabaseIcon fontSize={ SIZE } /> }
+					/>
+					<DynamicSettings controls={ dynamicTag.atomic_controls } />
+				</PopoverBody>
 			</Popover>
 		</>
 	);
@@ -134,7 +138,7 @@ const DynamicSettings = ( { controls }: { controls: DynamicTag[ 'atomic_controls
 	}
 
 	return (
-		<PopoverScrollableContent>
+		<>
 			<Tabs size="small" variant="fullWidth" { ...getTabsProps() }>
 				{ tabs.map( ( { value }, index ) => (
 					<Tab key={ index } label={ value.label } sx={ { px: 1, py: 0.5 } } { ...getTabProps( index ) } />
@@ -144,7 +148,11 @@ const DynamicSettings = ( { controls }: { controls: DynamicTag[ 'atomic_controls
 
 			{ tabs.map( ( { value }, index ) => {
 				return (
-					<TabPanel key={ index } sx={ { flexGrow: 1, py: 0 } } { ...getTabPanelProps( index ) }>
+					<TabPanel
+						key={ index }
+						sx={ { flexGrow: 1, py: 0, overflowY: 'auto' } }
+						{ ...getTabPanelProps( index ) }
+					>
 						<Stack p={ 2 } gap={ 2 }>
 							{ value.items.map( ( item ) => {
 								if ( item.type === 'control' ) {
@@ -156,12 +164,12 @@ const DynamicSettings = ( { controls }: { controls: DynamicTag[ 'atomic_controls
 					</TabPanel>
 				);
 			} ) }
-		</PopoverScrollableContent>
+		</>
 	);
 };
 
 const Control = ( { control }: { control: Control[ 'value' ] } ) => {
-	if ( ! getControl( control.type as ControlType ) ) {
+	if ( ! controlsRegistry.get( control.type as ControlType ) ) {
 		return null;
 	}
 

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

@@ -3,10 +3,10 @@ import * as React from 'react';
 import { useBoundProp } from '@elementor/editor-controls';
 import { PopoverHeader, PopoverMenuList, PopoverSearch } from '@elementor/editor-ui';
 import { DatabaseIcon } from '@elementor/icons';
-import { Box, Divider, Link, Stack, Typography, useTheme } from '@elementor/ui';
+import { Divider, Link, Stack, Typography, useTheme } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
-import { PopoverScrollableContent } from '../../components/popover-scrollable-content';
+import { PopoverBody } from '../../components/popover-body';
 import { usePersistDynamicValue } from '../../hooks/use-persist-dynamic-value';
 import { usePropDynamicTags } from '../hooks/use-prop-dynamic-tags';
 import { getAtomicDynamicTags } from '../sync/get-atomic-dynamic-tags';
@@ -76,43 +76,39 @@ export const DynamicSelection = ( { close: closePopover }: DynamicSelectionProps
 	] );
 
 	return (
-		<>
+		<PopoverBody>
 			<PopoverHeader
 				title={ __( 'Dynamic tags', 'elementor' ) }
 				onClose={ closePopover }
 				icon={ <DatabaseIcon fontSize={ SIZE } /> }
 			/>
-			<Stack>
-				{ hasNoDynamicTags ? (
-					<NoDynamicTags />
-				) : (
-					<Fragment>
-						<PopoverSearch
-							value={ searchValue }
-							onSearch={ handleSearch }
-							placeholder={ __( 'Search dynamic tags…', 'elementor' ) }
-						/>
-
-						<Divider />
-
-						<PopoverScrollableContent>
-							<PopoverMenuList
-								items={ virtualizedItems }
-								onSelect={ handleSetDynamicTag }
-								onClose={ closePopover }
-								selectedValue={ dynamicValue?.name }
-								itemStyle={ ( item ) =>
-									item.type === 'item' ? { paddingInlineStart: theme.spacing( 3.5 ) } : {}
-								}
-								noResultsComponent={
-									<NoResults searchValue={ searchValue } onClear={ () => setSearchValue( '' ) } />
-								}
-							/>
-						</PopoverScrollableContent>
-					</Fragment>
-				) }
-			</Stack>
-		</>
+			{ hasNoDynamicTags ? (
+				<NoDynamicTags />
+			) : (
+				<Fragment>
+					<PopoverSearch
+						value={ searchValue }
+						onSearch={ handleSearch }
+						placeholder={ __( 'Search dynamic tags…', 'elementor' ) }
+					/>
+
+					<Divider />
+
+					<PopoverMenuList
+						items={ virtualizedItems }
+						onSelect={ handleSetDynamicTag }
+						onClose={ closePopover }
+						selectedValue={ dynamicValue?.name }
+						itemStyle={ ( item ) =>
+							item.type === 'item' ? { paddingInlineStart: theme.spacing( 3.5 ) } : {}
+						}
+						noResultsComponent={
+							<NoResults searchValue={ searchValue } onClear={ () => setSearchValue( '' ) } />
+						}
+					/>
+				</Fragment>
+			) }
+		</PopoverBody>
 	);
 };
 
@@ -142,7 +138,7 @@ const NoResults = ( { searchValue, onClear }: NoResultsProps ) => (
 );
 
 const NoDynamicTags = () => (
-	<Box sx={ { overflowY: 'hidden', height: 297, width: 220 } }>
+	<>
 		<Divider />
 		<Stack
 			gap={ 1 }
@@ -161,7 +157,7 @@ const NoDynamicTags = () => (
 				{ __( "You'll need Elementor Pro to use this feature.", 'elementor' ) }
 			</Typography>
 		</Stack>
-	</Box>
+	</>
 );
 
 const useFilteredOptions = ( searchValue: string ): OptionEntry[] => {

package/src/errors.ts

@@ -6,6 +6,16 @@ export const ControlTypeNotFoundError = createError< { controlType: string } >(
 	message: 'Control type not found.',
 } );
 
+export const ControlTypeAlreadyRegisteredError = createError< { controlType: string } >( {
+	code: 'control_type_already_registered',
+	message: 'Control type is already registered.',
+} );
+
+export const ControlTypeNotRegisteredError = createError< { controlType: string } >( {
+	code: 'control_type_not_registered',
+	message: 'Control type is not registered.',
+} );
+
 export const StylesProviderNotFoundError = createError< { styleId: StyleDefinitionID } >( {
 	code: 'provider_not_found',
 	message: 'Styles provider not found.',

package/src/hooks/use-custom-css.ts

@@ -0,0 +1,184 @@
+import { useMemo } from 'react';
+import {
+	createElementStyle,
+	deleteElementStyle,
+	type ElementID,
+	shouldCreateNewLocalStyle,
+} from '@elementor/editor-elements';
+import { stringPropTypeUtil } from '@elementor/editor-props';
+import {
+	type CustomCss,
+	getVariantByMeta,
+	type StyleDefinition,
+	type StyleDefinitionVariant,
+} from '@elementor/editor-styles';
+import { ELEMENTS_STYLES_RESERVED_LABEL, type StylesProvider } from '@elementor/editor-styles-repository';
+import { undoable } from '@elementor/editor-v1-adapters';
+import { decodeString, encodeString } from '@elementor/utils';
+
+import { useClassesProp } from '../contexts/classes-prop-context';
+import { useElement } from '../contexts/element-context';
+import { useStyle } from '../contexts/style-context';
+import { StylesProviderCannotUpdatePropsError } from '../errors';
+import { getSubtitle, getTitle, HISTORY_DEBOUNCE_WAIT } from './use-styles-fields';
+import { useStylesRerender } from './use-styles-rerender';
+
+type UpdateStyleArgs = {
+	styleId: StyleDefinition[ 'id' ];
+	provider: StylesProvider;
+	customCss: CustomCss;
+	propDisplayName: string;
+};
+
+type CreateStyleArgs = {
+	styleId: null;
+	provider: null;
+	customCss: CustomCss | null;
+	propDisplayName: string;
+};
+
+type UpdateStyleReturn = {
+	styleId: StyleDefinition[ 'id' ];
+	provider: StylesProvider;
+	prevCustomCss: CustomCss | null;
+};
+
+type CreateStyleReturn = {
+	createdStyleId: StyleDefinition[ 'id' ];
+};
+
+type UndoableUpdateStylePayload = UpdateStyleArgs | CreateStyleArgs;
+type UndoableUpdateStyleReturn = UpdateStyleReturn | CreateStyleReturn;
+
+export const useCustomCss = () => {
+	const {
+		element: { id: elementId },
+	} = useElement();
+	const { id: styleId, meta, provider } = useStyle();
+	const style = provider?.actions.get( styleId, { elementId } );
+	const undoableUpdateStyle = useUndoableActions( { elementId, meta } );
+
+	const currentStyleId = styleId ? styleId : null;
+	const currentProvider = styleId ? provider : null;
+
+	useStylesRerender();
+
+	const variant = style ? getVariantByMeta( style, meta ) : null;
+
+	const setCustomCss = (
+		raw: string,
+		{ history: { propDisplayName } }: { history: { propDisplayName: string } }
+	) => {
+		const newValue = { raw: encodeString( sanitize( raw ) ) };
+
+		undoableUpdateStyle( {
+			styleId: currentStyleId,
+			provider: currentProvider,
+			customCss: newValue,
+			propDisplayName,
+		} as UndoableUpdateStylePayload );
+	};
+
+	const customCss = variant?.custom_css?.raw ? { raw: decodeString( variant.custom_css.raw ) } : null;
+
+	return {
+		customCss,
+		setCustomCss,
+	};
+};
+
+function useUndoableActions( {
+	elementId,
+	meta: { breakpoint, state },
+}: {
+	elementId: ElementID;
+	meta: StyleDefinitionVariant[ 'meta' ];
+} ) {
+	const classesProp = useClassesProp();
+
+	return useMemo( () => {
+		const meta = { breakpoint, state };
+
+		const createStyleArgs = { elementId, classesProp, meta, label: ELEMENTS_STYLES_RESERVED_LABEL };
+
+		return undoable(
+			{
+				do: ( payload: UndoableUpdateStylePayload ): UndoableUpdateStyleReturn => {
+					if ( shouldCreateNewLocalStyle< StylesProvider >( payload ) ) {
+						return create( payload as CreateStyleArgs );
+					}
+					return update( payload as UpdateStyleArgs );
+				},
+				undo: ( payload: UndoableUpdateStylePayload, doReturn: UndoableUpdateStyleReturn ) => {
+					if ( shouldCreateNewLocalStyle< StylesProvider >( payload ) ) {
+						return undoCreate( payload as CreateStyleArgs, doReturn as CreateStyleReturn );
+					}
+					return undoUpdate( payload as UpdateStyleArgs, doReturn as UpdateStyleReturn );
+				},
+				redo: ( payload: UndoableUpdateStylePayload, doReturn: UndoableUpdateStyleReturn ) => {
+					if ( shouldCreateNewLocalStyle< StylesProvider >( payload ) ) {
+						return create( payload as CreateStyleArgs, doReturn as CreateStyleReturn );
+					}
+					return update( payload as UpdateStyleArgs );
+				},
+			},
+			{
+				title: ( { provider, styleId } ) => getTitle( { provider, styleId, elementId } ),
+				subtitle: ( { provider, styleId, propDisplayName } ) =>
+					getSubtitle( { provider, styleId, elementId, propDisplayName } ),
+				debounce: { wait: HISTORY_DEBOUNCE_WAIT },
+			}
+		);
+
+		function create( { customCss }: CreateStyleArgs, redoArgs?: CreateStyleReturn ): CreateStyleReturn {
+			const createdStyle = createElementStyle( {
+				...createStyleArgs,
+				props: {},
+				custom_css: customCss ?? null,
+				styleId: redoArgs?.createdStyleId,
+			} );
+
+			return { createdStyleId: createdStyle };
+		}
+
+		function undoCreate( _: UndoableUpdateStylePayload, { createdStyleId }: CreateStyleReturn ) {
+			deleteElementStyle( elementId, createdStyleId );
+		}
+
+		function update( { provider, styleId, customCss }: UpdateStyleArgs ): UpdateStyleReturn {
+			if ( ! provider.actions.updateCustomCss ) {
+				throw new StylesProviderCannotUpdatePropsError( {
+					context: { providerKey: provider.getKey() },
+				} );
+			}
+
+			const style = provider.actions.get( styleId, { elementId } );
+			const prevCustomCss = getCurrentCustomCss( style, meta );
+
+			provider.actions.updateCustomCss( { id: styleId, meta, custom_css: customCss }, { elementId } );
+
+			return { styleId, provider, prevCustomCss };
+		}
+
+		function undoUpdate( _: UndoableUpdateStylePayload, { styleId, provider, prevCustomCss }: UpdateStyleReturn ) {
+			provider.actions.updateCustomCss?.(
+				{ id: styleId, meta, custom_css: prevCustomCss ?? { raw: '' } },
+				{ elementId }
+			);
+		}
+	}, [ elementId, breakpoint, state, classesProp ] );
+}
+
+function getCurrentCustomCss( style: StyleDefinition | null, meta: StyleDefinitionVariant[ 'meta' ] ) {
+	if ( ! style ) {
+		return null;
+	}
+
+	const variant = getVariantByMeta( style, meta );
+
+	return variant?.custom_css ?? null;
+}
+
+function sanitize( raw: string ) {
+	return stringPropTypeUtil.schema.safeParse( stringPropTypeUtil.create( raw ) ).data?.value?.trim() ?? '';
+}