@elementor/editor-editing-panel 0.16.0 → 0.18.0

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

@@ -28,11 +28,13 @@ import {
 	TabPanel,
 } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
+import { usePropValueHistory } from '../hooks/use-prop-value-history';
 
 const SIZE = 'tiny';
 
 export const DynamicSelectionControl = () => {
 	const { bind, value, setValue } = useControl< DynamicPropValue | null >();
+	const [ propValueFromHistory ] = usePropValueHistory( bind );
 	const { name: tagName = '' } = value?.value || {};
 
 	const selectionPopoverId = useId();
@@ -41,8 +43,7 @@ export const DynamicSelectionControl = () => {
 	const dynamicTag = useDynamicTag( bind, tagName );
 
 	const removeDynamicTag = () => {
-		// TODO: Implement static value restoration.
-		setValue( null );
+		setValue( propValueFromHistory ?? null );
 	};
 
 	if ( ! dynamicTag ) {
@@ -50,7 +51,7 @@ export const DynamicSelectionControl = () => {
 	}
 
 	return (
-		<Box sx={ { width: '100%' } }>
+		<Box>
 			<Tag
 				fullWidth
 				showActionsOnHover

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

@@ -18,7 +18,9 @@ import {
 	Typography,
 } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
-import { PropKey } from '../../types';
+import { PropKey, PropValue } from '../../types';
+import { isDynamicPropValue } from '../utils';
+import { usePropValueHistory } from '../hooks/use-prop-value-history';
 
 type Option = {
 	label: string;
@@ -35,9 +37,11 @@ export type DynamicSelectionProps = {
 
 export const DynamicSelection = ( { onSelect }: DynamicSelectionProps ) => {
 	const [ searchValue, setSearchValue ] = useState( '' );
-
 	const { groups: dynamicGroups } = getAtomicDynamicTags() || {};
-	const { bind, value: dynamicValue, setValue } = useControl< DynamicPropValue >();
+	const { bind, value: currentValue, setValue } = useControl< DynamicPropValue | PropValue >();
+	const [ , updatePropValueHistory ] = usePropValueHistory( bind );
+
+	const isCurrentValueDynamic = isDynamicPropValue( currentValue );
 
 	const options = useFilteredOptions( bind, searchValue );
 
@@ -45,6 +49,16 @@ export const DynamicSelection = ( { onSelect }: DynamicSelectionProps ) => {
 		setSearchValue( event.target.value );
 	};
 
+	const handleSetDynamicTag = ( value: string ) => {
+		if ( ! isCurrentValueDynamic ) {
+			updatePropValueHistory( currentValue );
+		}
+
+		setValue( { $$type: 'dynamic', value: { name: value, settings: {} } } );
+
+		onSelect?.();
+	};
+
 	return (
 		<Stack>
 			<Box px={ 1.5 } pb={ 1 }>
@@ -73,7 +87,7 @@ export const DynamicSelection = ( { onSelect }: DynamicSelectionProps ) => {
 									{ dynamicGroups?.[ category ]?.title || category }
 								</ListSubheader>
 								{ items.map( ( { value, label: tagLabel } ) => {
-									const isSelected = value === dynamicValue?.value?.name;
+									const isSelected = isCurrentValueDynamic && value === currentValue?.value?.name;
 
 									return (
 										<MenuItem
@@ -82,10 +96,7 @@ export const DynamicSelection = ( { onSelect }: DynamicSelectionProps ) => {
 											// eslint-disable-next-line jsx-a11y/no-autofocus
 											autoFocus={ isSelected }
 											sx={ { typography: 'caption' } }
-											onClick={ () => {
-												setValue( { $$type: 'dynamic', value: { name: value } } );
-												onSelect?.();
-											} }
+											onClick={ () => handleSetDynamicTag( value ) }
 										>
 											{ tagLabel }
 										</MenuItem>

package/src/dynamics/dynamic-control.tsx

@@ -18,7 +18,7 @@ export const DynamicControl = ( { bind, children }: DynamicControlProps ) => {
 		throw new Error( `Dynamic tag ${ name } not found` );
 	}
 
-	const defaultValue = dynamicTag.props_schema[ bind ]?.type.default;
+	const defaultValue = dynamicTag.props_schema[ bind ]?.default;
 	const dynamicValue = settings?.[ bind ] ?? defaultValue;
 
 	const setDynamicValue = ( newValue: PropValue ) => {

package/src/dynamics/hooks/use-prop-dynamic-action.tsx

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import { useElementContext } from '../../contexts/element-context';
+import { supportsDynamic } from '../utils';
+import { DynamicSelection } from '../components/dynamic-selection';
+import { DatabaseIcon } from '@elementor/icons';
+import { __ } from '@wordpress/i18n';
+import { useControl } from '../../controls/control-context';
+import { PopoverActionProps } from '../../controls/control-actions/actions/popover-action';
+
+export const usePropDynamicAction = (): PopoverActionProps => {
+	const { bind } = useControl();
+	const { elementType } = useElementContext();
+
+	const propType = elementType.propsSchema[ bind ];
+	const visible = !! propType && supportsDynamic( propType );
+
+	return {
+		visible,
+		icon: DatabaseIcon,
+		title: __( 'Dynamic Tags', 'elementor' ),
+		popoverContent: ( { closePopover } ) => <DynamicSelection onSelect={ closePopover } />,
+	};
+};

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

@@ -2,17 +2,17 @@ import { useMemo } from 'react';
 import { useElementContext } from '../../contexts/element-context';
 import { getAtomicDynamicTags } from '../sync/get-atomic-dynamic-tags';
 import { PropKey } from '../../types';
-import { isDynamicType } from '../utils';
+import { getDynamicPropType } from '../utils';
 
 export const usePropDynamicTags = ( propName: PropKey ) => {
 	let categories: string[] = [];
 
 	const { elementType } = useElementContext();
 
-	const propSchema = elementType.propsSchema?.[ propName ];
+	const propType = elementType.propsSchema?.[ propName ];
 
-	if ( propSchema ) {
-		const propDynamicType = propSchema.additional_types.find( isDynamicType );
+	if ( propType ) {
+		const propDynamicType = getDynamicPropType( propType );
 
 		categories = propDynamicType?.settings.categories || [];
 	}

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

@@ -0,0 +1,26 @@
+import { useElementContext } from '../../contexts/element-context';
+import { PropValue } from '../../types';
+
+export const PROPS_VALUES_HISTORY_KEY = 'elementor/dynamic/non-dynamic-values-history';
+
+export const usePropValueHistory = ( path: string ) => {
+	const valuesHistory = getValues();
+	const { element } = useElementContext();
+	const key = `${ element.id }-${ path }`;
+
+	const value = valuesHistory[ key ] ?? null;
+
+	const setValue = ( newValue: PropValue ) => {
+		setValues( { ...valuesHistory, [ key ]: newValue } );
+	};
+
+	return [ value, setValue ] as const;
+};
+
+const getValues = () => {
+	return JSON.parse( sessionStorage.getItem( PROPS_VALUES_HISTORY_KEY ) || '{}' );
+};
+
+const setValues = ( values: Record< string, PropValue > ) => {
+	sessionStorage.setItem( PROPS_VALUES_HISTORY_KEY, JSON.stringify( values ) );
+};

package/src/dynamics/init.ts

@@ -1,10 +1,19 @@
 import { DynamicSelectionControl } from './components/dynamic-selection-control';
 import { replaceControl } from '../controls/control-replacement';
 import { isDynamicPropValue } from './utils';
+import { usePropDynamicAction } from './hooks/use-prop-dynamic-action';
+import { controlActionsMenu } from '../controls/control-actions/control-actions-menu';
+
+const { registerPopoverAction } = controlActionsMenu;
 
 export const init = () => {
 	replaceControl( {
 		component: DynamicSelectionControl,
 		condition: ( { value } ) => isDynamicPropValue( value ),
 	} );
+
+	registerPopoverAction( {
+		id: 'dynamic-tags',
+		useProps: usePropDynamicAction,
+	} );
 };

package/src/dynamics/types.ts

@@ -1,4 +1,4 @@
-import { ControlItem, PropsSchema, TransformablePropValue } from '../types';
+import { ControlItem, PropsSchema, TransformablePropType, TransformablePropValue } from '../types';
 
 export type ExtendedWindow = Window & {
 	elementor?: {
@@ -22,11 +22,14 @@ export type DynamicTag = {
 	props_schema: PropsSchema;
 };
 
-export type DynamicPropType = {
+export type DynamicPropType = TransformablePropType & {
 	key: 'dynamic';
 	settings: {
 		categories: string[];
 	};
 };
 
-export type DynamicPropValue = TransformablePropValue< { name: string; settings?: Record< string, unknown > } >;
+export type DynamicPropValue = TransformablePropValue<
+	'dynamic',
+	{ name: string; settings?: Record< string, unknown > }
+>;

package/src/dynamics/utils.ts

@@ -1,9 +1,22 @@
-import { AdditionalPropType, PropValue } from '../types';
-import { DynamicPropType } from './types';
+import { PropType, PropValue, TransformablePropType } from '../types';
+import { DynamicPropType, DynamicPropValue } from './types';
 import { isTransformable } from '../props/is-transformable';
 
-export const isDynamicType = ( prop: AdditionalPropType ): prop is DynamicPropType => prop.key === 'dynamic';
+const DYNAMIC_PROP_TYPE_KEY = 'dynamic';
 
-export const isDynamicPropValue = ( prop: PropValue ) => {
-	return isTransformable( prop ) && prop.$$type === 'dynamic';
+export const isDynamicPropType = ( prop: TransformablePropType ): prop is DynamicPropType =>
+	prop.key === DYNAMIC_PROP_TYPE_KEY;
+
+export const getDynamicPropType = ( propType: PropType ): DynamicPropType | null => {
+	const dynamicPropType = propType.kind === 'union' && propType.prop_types[ DYNAMIC_PROP_TYPE_KEY ];
+
+	return dynamicPropType && isDynamicPropType( dynamicPropType ) ? dynamicPropType : null;
+};
+
+export const isDynamicPropValue = ( prop: PropValue ): prop is DynamicPropValue => {
+	return isTransformable( prop ) && prop.$$type === DYNAMIC_PROP_TYPE_KEY;
+};
+
+export const supportsDynamic = ( propType: PropType ): boolean => {
+	return !! getDynamicPropType( propType );
 };

package/src/index.ts

@@ -1,5 +1,7 @@
+export type { PopoverActionProps } from './controls/control-actions/actions/popover-action';
 export { replaceControl } from './controls/control-replacement';
 export { useControl } from './controls/control-context';
+export { controlActionsMenu } from './controls/control-actions/control-actions-menu';
 
 import init from './init';
 

package/src/types.ts

@@ -34,32 +34,53 @@ export type Control = {
 
 export type ControlItem = ControlsSection | Control;
 
-export type AdditionalPropType = {
-	key: string;
+type PropTypeKey = string;
+
+type BasePropType = {
+	default: PropValue;
 	settings: Record< string, unknown >;
+	meta: Record< string, unknown >;
 };
 
-export type PropDefinition = {
-	type: {
-		key: string;
-		default: PropValue;
-		settings: Record< string, unknown >;
-	};
-	additional_types: Array< AdditionalPropType >;
+export type PlainPropType = BasePropType & {
+	kind: 'plain';
+	key: PropTypeKey;
 };
 
-export type PropsSchema = Record< Control[ 'value' ][ 'bind' ], PropDefinition >;
+export type ArrayPropType = BasePropType & {
+	kind: 'array';
+	key: PropTypeKey;
+	item_prop_type: PropType | null;
+};
+
+export type ObjectPropType = BasePropType & {
+	kind: 'object';
+	key: PropTypeKey;
+	shape: Record< string, PropType >;
+};
+
+export type TransformablePropType = PlainPropType | ArrayPropType | ObjectPropType;
+
+export type UnionPropType = BasePropType & {
+	kind: 'union';
+	prop_types: Record< string, TransformablePropType >;
+};
+
+export type PropType = TransformablePropType | UnionPropType;
+
+export type PropsSchema = Record< Control[ 'value' ][ 'bind' ], PropType >;
 
 type MaybeArray< T > = T | T[];
 
-export type TransformablePropValue< T = unknown > = {
-	$$type: string;
-	value: T;
+export type TransformablePropValue< Type extends string, Value = unknown > = {
+	$$type: Type;
+	value: Value;
+	disabled?: boolean;
 };
 
 export type PlainPropValue = MaybeArray< string | number | boolean | object | null | undefined >;
 
-export type PropValue = PlainPropValue | TransformablePropValue;
+export type PropValue = PlainPropValue | TransformablePropValue< string >;
 
 export type PropKey = string;
 

package/src/controls/components/control-container.tsx

@@ -1,18 +0,0 @@
-import * as React from 'react';
-import { Stack, StackProps, styled } from '@elementor/ui';
-
-const StyledStack = styled( Stack )( ( { theme, gap, direction } ) => ( {
-	'> :only-child': {
-		width: '100%',
-	},
-	'&:where( :has( > :nth-child( 2 ):last-child ) ) > :where( * )': {
-		width: direction === 'column' ? '100%' : `calc( 50% - ${ theme.spacing( gap / 2 ) })`,
-	},
-	'&:where( :has( > :nth-child( 3 ):last-child ) ) > :where( * )': {
-		width: direction === 'column' ? '100%' : `calc( 33.3333% - ${ theme.spacing( gap * 2 ) } / 3)`,
-	},
-} ) );
-
-export const ControlContainer = ( props: StackProps ) => (
-	<StyledStack gap={ 1 } direction="row" alignItems="center" justifyContent="space-between" { ...props } />
-);