@elementor/editor-editing-panel 1.4.0 → 1.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elementor/editor-editing-panel",
-  "version": "1.4.0",
+  "version": "1.5.0",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -40,14 +40,14 @@
   },
   "dependencies": {
     "@elementor/editor": "0.17.2",
-    "@elementor/editor-controls": "0.3.0",
+    "@elementor/editor-controls": "0.4.0",
     "@elementor/editor-elements": "0.3.3",
     "@elementor/menus": "0.1.2",
     "@elementor/editor-props": "0.5.0",
     "@elementor/editor-panels": "0.10.2",
     "@elementor/editor-responsive": "0.12.4",
     "@elementor/editor-styles": "0.3.2",
-    "@elementor/editor-styles-repository": "0.2.0",
+    "@elementor/editor-styles-repository": "0.3.0",
     "@elementor/editor-v1-adapters": "0.8.5",
     "@elementor/icons": "^1.20.0",
     "@elementor/schema": "0.1.2",

package/src/components/conditional-tooltip-wrapper.tsx

@@ -32,21 +32,27 @@ export const ConditionalTooltipWrapper = ( { maxWidth, title }: ConditionalToolt
 	if ( isOverflown ) {
 		return (
 			<Tooltip title={ title } placement="top">
-				<Content maxWidth={ maxWidth } ref={ elRef } title={ title } />
+				<Content maxWidth={ maxWidth } ref={ elRef }>
+					{ title }
+				</Content>
 			</Tooltip>
 		);
 	}
 
-	return <Content maxWidth={ maxWidth } ref={ elRef } title={ title } />;
+	return (
+		<Content maxWidth={ maxWidth } ref={ elRef }>
+			{ title }
+		</Content>
+	);
 };
 
-const Content = React.forwardRef( ( { maxWidth, title, ...rest }: ConditionalTooltipWrapperProps, ref ) => (
+type ContentProps = React.PropsWithChildren< Omit< ConditionalTooltipWrapperProps, 'title' > >;
+
+const Content = React.forwardRef( ( { maxWidth, ...tooltipProps }: ContentProps, ref ) => (
 	<Box
 		ref={ ref }
 		position="relative"
 		sx={ { overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', maxWidth } }
-		{ ...rest }
-	>
-		{ title }
-	</Box>
+		{ ...tooltipProps }
+	/>
 ) );

package/src/components/css-class-selector.tsx

@@ -102,9 +102,7 @@ function useOptions() {
 }
 
 function useAppliedOptions( options: Option[], appliedIds: StyleDefinitionID[] ) {
-	const applied = appliedIds
-		.map( ( id ) => options.find( ( option ) => option.value === id ) )
-		.filter( ( option ) => !! option );
+	const applied = options.filter( ( option ) => appliedIds.includes( option.value ) );
 
 	const hasElementsProviderStyleApplied = applied.some(
 		( option ) => option.provider === ELEMENTS_STYLES_PROVIDER_KEY

package/src/components/style-sections/background-section/background-section.tsx

@@ -1,17 +1,12 @@
 import * as React from 'react';
-import { BackgroundOverlayRepeaterControl } from '@elementor/editor-controls';
-import { Stack } from '@elementor/ui';
+import { BackgroundControl } from '@elementor/editor-controls';
 
 import { StylesField } from '../../../controls-registry/styles-field';
-import { BackgroundColorField } from './background-color-field';
 
 export const BackgroundSection = () => {
 	return (
-		<Stack gap={ 1.5 }>
-			<StylesField bind="background-image">
-				<BackgroundOverlayRepeaterControl />
-			</StylesField>
-			<BackgroundColorField />
-		</Stack>
+		<StylesField bind="background">
+			<BackgroundControl />
+		</StylesField>
 	);
 };

package/src/components/style-sections/layout-section/layout-section.tsx

@@ -1,9 +1,12 @@
 import * as React from 'react';
 import { ControlLabel } from '@elementor/editor-controls';
+import { useParentElement } from '@elementor/editor-elements';
 import { type StringPropValue } from '@elementor/editor-props';
 import { Divider, Stack } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
+import { useElement } from '../../../contexts/element-context';
+import { useComputedStyle } from '../../../hooks/use-computed-style';
 import { useStylesField } from '../../../hooks/use-styles-field';
 import { AlignItemsField } from './align-items-field';
 import { AlignSelfChild } from './align-self-child-field';
@@ -17,11 +20,15 @@ import { WrapField } from './wrap-field';
 
 export const LayoutSection = () => {
 	const [ display ] = useStylesField< StringPropValue >( 'display' );
+	const { element } = useElement();
+	const parent = useParentElement( element.id );
+	const parentStyle = useComputedStyle( parent?.id || null );
 
 	return (
 		<Stack gap={ 2 }>
 			<DisplayField />
 			{ 'flex' === display?.value && <FlexFields /> }
+			{ 'flex' === parentStyle?.display && <FlexChildFields /> }
 		</Stack>
 	);
 };
@@ -34,6 +41,11 @@ const FlexFields = () => (
 		<Divider />
 		<GapControlField />
 		<WrapField />
+	</>
+);
+
+const FlexChildFields = () => (
+	<>
 		<Divider />
 		<ControlLabel>{ __( 'Flex child', 'elementor' ) }</ControlLabel>
 		<AlignSelfChild />

package/src/components/style-sections/position-section/position-field.tsx

@@ -12,7 +12,11 @@ const positionOptions = [
 	{ label: __( 'Fixed', 'elementor' ), value: 'fixed' },
 ];
 
-export const PositionField = () => {
+type Props = {
+	onChange?: ( newValue: string | null, previousValue: string | null | undefined ) => void;
+};
+
+export const PositionField = ( { onChange }: Props ) => {
 	return (
 		<StylesField bind="position">
 			<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap">
@@ -20,7 +24,7 @@ export const PositionField = () => {
 					<ControlLabel>{ __( 'Position', 'elementor' ) }</ControlLabel>
 				</Grid>
 				<Grid item xs={ 6 }>
-					<SelectControl options={ positionOptions } />
+					<SelectControl options={ positionOptions } onChange={ onChange } />
 				</Grid>
 			</Grid>
 		</StylesField>

package/src/components/style-sections/position-section/position-section.tsx

@@ -1,25 +1,65 @@
 import * as React from 'react';
-import { useCallback } from 'react';
-import type { PropValue, StringPropValue } from '@elementor/editor-props';
+import { type StringPropValue } from '@elementor/editor-props';
 import { Stack } from '@elementor/ui';
 
-import { useStylePropsHistory } from '../../../hooks/use-style-prop-history';
+import { useStyle } from '../../../contexts/style-context';
+import { useSessionStorage } from '../../../hooks/use-session-storage';
 import { useStylesField } from '../../../hooks/use-styles-field';
+import { useStylesFields } from '../../../hooks/use-styles-fields';
 import { DimensionsField } from './dimensions-field';
 import { PositionField } from './position-field';
 import { ZIndexField } from './z-index-field';
 
-const dimensionsPropKeys = [ 'top', 'bottom', 'left', 'right' ];
+type DimensionValue =
+	| {
+			$$type: 'size';
+			value: number;
+	  }
+	| undefined
+	| null;
+
+type DimensionsValues = {
+	top: DimensionValue;
+	bottom: DimensionValue;
+	left: DimensionValue;
+	right: DimensionValue;
+};
 
 export const PositionSection = () => {
 	const [ positionValue ] = useStylesField< StringPropValue >( 'position' );
-	usePositionChangeHandler();
+	const [ dimensionsValues, setDimensionsValues ] = useStylesFields< DimensionsValues >( [
+		'top',
+		'bottom',
+		'left',
+		'right',
+	] );
+
+	const [ dimensionsValuesFromHistory, updateDimensionsHistory, clearDimensionsHistory ] = usePersistDimensions();
+
+	const onPositionChange = ( newPosition: string | null, previousPosition: string | null | undefined ) => {
+		if ( newPosition === 'static' ) {
+			if ( dimensionsValues ) {
+				updateDimensionsHistory( dimensionsValues );
+				setDimensionsValues( {
+					top: undefined,
+					bottom: undefined,
+					left: undefined,
+					right: undefined,
+				} );
+			}
+		} else if ( previousPosition === 'static' ) {
+			if ( dimensionsValuesFromHistory ) {
+				setDimensionsValues( dimensionsValuesFromHistory );
+				clearDimensionsHistory();
+			}
+		}
+	};
 
 	const isNotStatic = positionValue && positionValue?.value !== 'static';
 
 	return (
 		<Stack gap={ 1.5 }>
-			<PositionField />
+			<PositionField onChange={ onPositionChange } />
 			{ isNotStatic ? (
 				<>
 					<DimensionsField />
@@ -30,29 +70,10 @@ export const PositionSection = () => {
 	);
 };
 
-const usePositionChangeHandler = () => {
-	const dimensionsHistory = useStylePropsHistory( dimensionsPropKeys );
-
-	const onPositionChange = useCallback(
-		( newPositionValue: PropValue, previousPosition: PropValue ) => {
-			if ( ! dimensionsHistory ) {
-				return;
-			}
-
-			const { saveStylePropsHistory, updateStylePropsFromHistory, clearCurrentStyleProps } = dimensionsHistory;
-
-			if ( newPositionValue === 'static' ) {
-				saveStylePropsHistory();
-				clearCurrentStyleProps();
-			} else if ( previousPosition === 'static' ) {
-				updateStylePropsFromHistory();
-			}
-
-			previousPosition = newPositionValue;
-		},
-		[ dimensionsHistory ]
-	);
+const usePersistDimensions = () => {
+	const { id: styleDefID, meta } = useStyle();
+	const styleVariantPath = `styles/${ styleDefID }/${ meta.breakpoint || 'desktop' }/${ meta.state || 'null' }`;
+	const dimensionsPath = `${ styleVariantPath }/dimensions`;
 
-	const [ , , registerChangeListener ] = useStylesField< PropValue >( 'position' );
-	registerChangeListener?.( onPositionChange );
+	return useSessionStorage< DimensionsValues >( dimensionsPath );
 };

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

@@ -24,7 +24,7 @@ import { __ } from '@wordpress/i18n';
 
 import { Control as BaseControl } from '../../controls-registry/control';
 import { type ControlType, getControlByType } from '../../controls-registry/controls-registry';
-import { usePropValueHistory } from '../../hooks/use-prop-value-history';
+import { usePersistDynamicValue } from '../../hooks/use-persist-dynamic-value';
 import { DynamicControl } from '../dynamic-control';
 import { useDynamicTag } from '../hooks/use-dynamic-tag';
 import { type DynamicTag } from '../types';
@@ -36,7 +36,7 @@ const SIZE = 'tiny';
 export const DynamicSelectionControl = () => {
 	const { setValue: setAnyValue } = useBoundProp();
 	const { bind, value } = useBoundProp( dynamicPropTypeUtil );
-	const { getPropValue: getPropValueFromHistory } = usePropValueHistory();
+	const [ propValueFromHistory ] = usePersistDynamicValue( bind );
 	const { name: tagName = '' } = value;
 
 	const selectionPopoverId = useId();
@@ -45,9 +45,7 @@ export const DynamicSelectionControl = () => {
 	const dynamicTag = useDynamicTag( bind, tagName );
 
 	const removeDynamicTag = () => {
-		const propValue = getPropValueFromHistory( bind );
-
-		setAnyValue( propValue ?? null );
+		setAnyValue( propValueFromHistory ?? null );
 	};
 
 	if ( ! dynamicTag ) {

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

@@ -17,7 +17,7 @@ import {
 } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
-import { usePropValueHistory } from '../../hooks/use-prop-value-history';
+import { usePersistDynamicValue } from '../../hooks/use-persist-dynamic-value';
 import { usePropDynamicTags } from '../hooks/use-prop-dynamic-tags';
 import { getAtomicDynamicTags } from '../sync/get-atomic-dynamic-tags';
 import { dynamicPropTypeUtil } from '../utils';
@@ -40,11 +40,11 @@ export const DynamicSelection = ( { onSelect }: DynamicSelectionProps ) => {
 	const { groups: dynamicGroups } = getAtomicDynamicTags() || {};
 
 	const { value: anyValue } = useBoundProp();
-	const { bind, value: dynamicvalue, setValue } = useBoundProp( dynamicPropTypeUtil );
+	const { bind, value: dynamicValue, setValue } = useBoundProp( dynamicPropTypeUtil );
 
-	const { setPropValue: updatePropValueHistory } = usePropValueHistory();
+	const [ , updatePropValueHistory ] = usePersistDynamicValue( bind );
 
-	const isCurrentValueDynamic = !! dynamicvalue;
+	const isCurrentValueDynamic = !! dynamicValue;
 
 	const options = useFilteredOptions( bind, searchValue );
 
@@ -54,7 +54,7 @@ export const DynamicSelection = ( { onSelect }: DynamicSelectionProps ) => {
 
 	const handleSetDynamicTag = ( value: string ) => {
 		if ( ! isCurrentValueDynamic ) {
-			updatePropValueHistory( bind, anyValue );
+			updatePropValueHistory( anyValue );
 		}
 
 		setValue( { name: value, settings: {} } );
@@ -90,7 +90,7 @@ export const DynamicSelection = ( { onSelect }: DynamicSelectionProps ) => {
 									{ dynamicGroups?.[ category ]?.title || category }
 								</ListSubheader>
 								{ items.map( ( { value, label: tagLabel } ) => {
-									const isSelected = isCurrentValueDynamic && value === dynamicvalue?.name;
+									const isSelected = isCurrentValueDynamic && value === dynamicValue?.name;
 
 									return (
 										<MenuItem

package/src/dynamics/dynamic-control.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { BoundPropProvider, useBoundProp } from '@elementor/editor-controls';
-import { isTransformable, type PropKey, type PropValue } from '@elementor/editor-props';
+import { type PropKey, type PropValue } from '@elementor/editor-props';
 
 import { useDynamicTag } from './hooks/use-dynamic-tag';
 import { dynamicPropTypeUtil } from './utils';
@@ -27,8 +27,7 @@ export const DynamicControl = ( { bind, children }: DynamicControlProps ) => {
 			name,
 			settings: {
 				...settings,
-				// The value inside the dynamic is not a transformable value, so we need to store the whole object.
-				[ bind ]: isTransformable( newValue ) ? newValue.value : newValue,
+				[ bind ]: newValue,
 			},
 		} );
 	};

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

@@ -0,0 +1,29 @@
+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(
+		[
+			windowEvent( 'elementor/device-mode/change' ),
+			commandEndEvent( 'document/elements/reset-style' ),
+			commandEndEvent( 'document/elements/settings' ),
+			commandEndEvent( 'document/elements/paste-style' ),
+		],
+		() => {
+			if ( ! elementId ) {
+				return null;
+			}
+
+			const extendedWindow: ExtendedWindow = window;
+			const element = extendedWindow.elementor?.getContainer?.( elementId );
+
+			if ( ! element?.view?.el ) {
+				return null;
+			}
+
+			const resp = window.getComputedStyle( element.view.el );
+			return resp;
+		}
+	);
+}

package/src/hooks/use-persist-dynamic-value.ts

@@ -0,0 +1,11 @@
+import { type PropValue } from '@elementor/editor-props';
+
+import { useElement } from '../contexts/element-context';
+import { type DynamicPropValue } from '../dynamics/types';
+import { useSessionStorage } from './use-session-storage';
+
+export const usePersistDynamicValue = < T extends DynamicPropValue | PropValue >( propKey: string ) => {
+	const { element } = useElement();
+	const prefixedKey = `dynamic/non-dynamic-values-history/${ element.id }/${ propKey }`;
+	return useSessionStorage< T >( prefixedKey );
+};

package/src/hooks/use-session-storage.ts

@@ -0,0 +1,46 @@
+import { useEffect, useState } from 'react';
+import { getSessionStorageItem, removeSessionStorageItem, setSessionStorageItem } from '@elementor/utils';
+
+export const useSessionStorage = < T >( key: string ) => {
+	const prefixedKey = `elementor/${ key }`;
+
+	const [ value, setValue ] = useState< T | null >();
+
+	useEffect( () => {
+		return subscribeToSessionStorage< T | null >( prefixedKey, ( newValue ) => {
+			setValue( newValue ?? null );
+		} );
+	}, [ prefixedKey ] );
+
+	const saveValue = ( newValue: T ) => {
+		setSessionStorageItem( prefixedKey, newValue );
+	};
+
+	const removeValue = () => {
+		removeSessionStorageItem( prefixedKey );
+	};
+
+	return [ value, saveValue, removeValue ] as const;
+};
+
+const subscribeToSessionStorage = < T >( key: string, subscriber: ( value: T ) => void ) => {
+	subscriber( getSessionStorageItem( key ) as T );
+
+	const abortController = new AbortController();
+
+	window.addEventListener(
+		'storage',
+		( e ) => {
+			if ( e.key !== key || e.storageArea !== sessionStorage ) {
+				return;
+			}
+
+			subscriber( getSessionStorageItem( key ) as T );
+		},
+		{ signal: abortController.signal }
+	);
+
+	return () => {
+		abortController.abort();
+	};
+};

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

@@ -1,53 +1,17 @@
-import { useEffect, useRef } from 'react';
-import { updateStyle, useElementStyleProp } from '@elementor/editor-elements';
 import type { PropKey, PropValue } from '@elementor/editor-props';
-import { __ } from '@wordpress/i18n';
 
-import { useClassesProp } from '../contexts/classes-prop-context';
-import { useElement } from '../contexts/element-context';
-import { useStyle } from '../contexts/style-context';
+import { useStylesFields } from './use-styles-fields';
 
-export const useStylesField = < T extends PropValue >(
-	propName: PropKey
-): [
-	T | null,
-	( newValue: T ) => void,
-	( callback: ( newValue: T | null, previousValue: T | null ) => void ) => void,
-] => {
-	const { element } = useElement();
-	const { id, meta } = useStyle();
-	const classesProp = useClassesProp();
-	const previousValue = useRef< T | null >( null );
-	const onChangeCallbacks = useRef< Set< ( newValue: T | null, previousValue: T | null ) => void > >( new Set() );
+export function useStylesField< T extends PropValue >( propName: PropKey ): [ T | null, ( newValue: T ) => void ] {
+	const [ values, setValues ] = useStylesFields< { [ k: typeof propName ]: T } >( [ propName ] );
 
-	const value = useElementStyleProp< T >( {
-		elementID: element.id,
-		styleDefID: id,
-		meta,
-		propName,
-	} );
+	const value = values?.[ propName ] ?? null;
 
 	const setValue = ( newValue: T ) => {
-		updateStyle( {
-			elementID: element.id,
-			styleDefID: id,
-			props: { [ propName ]: newValue },
-			meta,
-			bind: classesProp,
-			label: __( 'local', 'elementor' ),
+		setValues( {
+			[ propName ]: newValue,
 		} );
 	};
 
-	const registerChangeListener = ( callback: ( newValue: T | null, previousValue: T | null ) => void ) => {
-		onChangeCallbacks.current.add( callback );
-	};
-
-	useEffect( () => {
-		onChangeCallbacks.current.forEach( ( cb ) => {
-			cb( value, previousValue.current );
-		} );
-		previousValue.current = value;
-	}, [ value ] );
-
-	return [ value, setValue, registerChangeListener ];
-};
+	return [ value, setValue ];
+}

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

@@ -0,0 +1,32 @@
+import { updateStyle, useElementStyleProps } from '@elementor/editor-elements';
+import type { Props } from '@elementor/editor-props';
+import { __ } from '@wordpress/i18n';
+
+import { useClassesProp } from '../contexts/classes-prop-context';
+import { useElement } from '../contexts/element-context';
+import { useStyle } from '../contexts/style-context';
+
+export function useStylesFields< T extends Props >( propNames: ( keyof T & string )[] ) {
+	const { element } = useElement();
+	const { id, meta } = useStyle();
+	const classesProp = useClassesProp();
+
+	const value = useElementStyleProps( {
+		elementID: element.id,
+		styleDefID: id,
+		meta,
+		propNames,
+	} );
+
+	const setValue = ( newValues: T ) => {
+		updateStyle( {
+			elementID: element.id,
+			styleDefID: id,
+			props: newValues,
+			meta,
+			bind: classesProp,
+			label: __( 'local', 'elementor' ),
+		} );
+	};
+	return [ value, setValue ] as const;
+}

package/src/components/style-sections/background-section/background-color-field.tsx

@@ -1,21 +0,0 @@
-import * as React from 'react';
-import { ColorControl, ControlLabel } from '@elementor/editor-controls';
-import { Grid } from '@elementor/ui';
-import { __ } from '@wordpress/i18n';
-
-import { StylesField } from '../../../controls-registry/styles-field';
-
-export const BackgroundColorField = () => {
-	return (
-		<StylesField bind="background-color">
-			<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap">
-				<Grid item xs={ 6 }>
-					<ControlLabel>{ __( 'Color', 'elementor' ) }</ControlLabel>
-				</Grid>
-				<Grid item xs={ 6 }>
-					<ColorControl />
-				</Grid>
-			</Grid>
-		</StylesField>
-	);
-};

package/src/hooks/use-prop-value-history.ts

@@ -1,45 +0,0 @@
-import { useCallback, useMemo } from 'react';
-import { getSessionStorageItem, setSessionStorageItem } from '@elementor/utils';
-
-import { useElement } from '../contexts/element-context';
-
-export const PROPS_VALUES_HISTORY_PREFIX = 'elementor/editor-editing-panel/prop-value-history';
-
-export const usePropValueHistory = () => {
-	const { element } = useElement();
-	const elementKey = `${ PROPS_VALUES_HISTORY_PREFIX }/${ element.id }`;
-
-	const getElementPropsHistory = useCallback( () => {
-		return getSessionStorageItem< Record< string, unknown > >( elementKey );
-	}, [ elementKey ] );
-
-	const getPropValue = useCallback(
-		< T >( propKey: string ) => {
-			const elementPropValues = getElementPropsHistory();
-			return ( elementPropValues?.[ propKey ] ?? null ) as T | null;
-		},
-		[ getElementPropsHistory ]
-	);
-
-	const setPropValue = useCallback(
-		( propKey: string, propValue: unknown ) => {
-			const elementPropValues = getElementPropsHistory();
-			const updatedElementPropValues = { ...elementPropValues, [ propKey ]: propValue };
-			setSessionStorageItem( elementKey, updatedElementPropValues );
-		},
-		[ getElementPropsHistory, elementKey ]
-	);
-
-	const removeProp = useCallback(
-		( propKey: string ) => {
-			const elementPropValues = getElementPropsHistory();
-			const updatedElementPropValues = Object.fromEntries(
-				Object.entries( elementPropValues || {} ).filter( ( [ key ] ) => key !== propKey )
-			);
-			setSessionStorageItem( elementKey, updatedElementPropValues );
-		},
-		[ getElementPropsHistory, elementKey ]
-	);
-
-	return useMemo( () => ( { getPropValue, setPropValue, removeProp } ), [ getPropValue, removeProp, setPropValue ] );
-};