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

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

@@ -23,7 +23,7 @@ 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';
@@ -169,7 +169,7 @@ const DynamicSettings = ( { controls }: { controls: DynamicTag[ 'atomic_controls
 };
 
 const Control = ( { control }: { control: Control[ 'value' ] } ) => {
-	if ( ! getControl( control.type as ControlType ) ) {
+	if ( ! controlsRegistry.get( control.type as ControlType ) ) {
 		return null;
 	}
 

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() ?? '';
+}

package/src/hooks/use-state-by-element.ts

@@ -1,15 +1,12 @@
 import { useState } from 'react';
-import { isExperimentActive } from '@elementor/editor-v1-adapters';
 import { getSessionStorageItem, setSessionStorageItem } from '@elementor/session';
 
 import { useElement } from '../contexts/element-context';
-import { EXPERIMENTAL_FEATURES } from '../sync/experiments-flags';
 
 export const useStateByElement = < T >( key: string, initialValue: T ) => {
 	const { element } = useElement();
-	const isFeatureActive = isExperimentActive( EXPERIMENTAL_FEATURES.V_3_30 );
 	const lookup = `elementor/editor-state/${ element.id }/${ key }`;
-	const storedValue = isFeatureActive ? getSessionStorageItem< T >( lookup ) : initialValue;
+	const storedValue = getSessionStorageItem< T >( lookup );
 	const [ value, setValue ] = useState( storedValue ?? initialValue );
 
 	const doUpdate = ( newValue: T ) => {