@elementor/editor-editing-panel 1.2.0 → 1.4.0

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

@@ -27,15 +27,17 @@ import { type ControlType, getControlByType } from '../../controls-registry/cont
 import { usePropValueHistory } from '../../hooks/use-prop-value-history';
 import { DynamicControl } from '../dynamic-control';
 import { useDynamicTag } from '../hooks/use-dynamic-tag';
-import { type DynamicPropValue, type DynamicTag } from '../types';
+import { type DynamicTag } from '../types';
+import { dynamicPropTypeUtil } from '../utils';
 import { DynamicSelection } from './dynamic-selection';
 
 const SIZE = 'tiny';
 
 export const DynamicSelectionControl = () => {
-	const { bind, value, setValue } = useBoundProp< DynamicPropValue | null >();
+	const { setValue: setAnyValue } = useBoundProp();
+	const { bind, value } = useBoundProp( dynamicPropTypeUtil );
 	const { getPropValue: getPropValueFromHistory } = usePropValueHistory();
-	const { name: tagName = '' } = value?.value || {};
+	const { name: tagName = '' } = value;
 
 	const selectionPopoverId = useId();
 	const selectionPopoverState = usePopupState( { variant: 'popover', popupId: selectionPopoverId } );
@@ -43,8 +45,9 @@ export const DynamicSelectionControl = () => {
 	const dynamicTag = useDynamicTag( bind, tagName );
 
 	const removeDynamicTag = () => {
-		const propValue = getPropValueFromHistory< DynamicPropValue >( bind );
-		setValue( propValue ?? null );
+		const propValue = getPropValueFromHistory( bind );
+
+		setAnyValue( propValue ?? null );
 	};
 
 	if ( ! dynamicTag ) {

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

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { Fragment, useState } from 'react';
 import { useBoundProp } from '@elementor/editor-controls';
-import { type PropKey, type PropValue } from '@elementor/editor-props';
+import { type PropKey } from '@elementor/editor-props';
 import { PhotoIcon, SearchIcon } from '@elementor/icons';
 import {
 	Box,
@@ -20,8 +20,7 @@ import { __ } from '@wordpress/i18n';
 import { usePropValueHistory } from '../../hooks/use-prop-value-history';
 import { usePropDynamicTags } from '../hooks/use-prop-dynamic-tags';
 import { getAtomicDynamicTags } from '../sync/get-atomic-dynamic-tags';
-import { type DynamicPropValue } from '../types';
-import { isDynamicPropValue } from '../utils';
+import { dynamicPropTypeUtil } from '../utils';
 
 type Option = {
 	label: string;
@@ -39,10 +38,13 @@ export type DynamicSelectionProps = {
 export const DynamicSelection = ( { onSelect }: DynamicSelectionProps ) => {
 	const [ searchValue, setSearchValue ] = useState( '' );
 	const { groups: dynamicGroups } = getAtomicDynamicTags() || {};
-	const { bind, value: currentValue, setValue } = useBoundProp< DynamicPropValue | PropValue >();
+
+	const { value: anyValue } = useBoundProp();
+	const { bind, value: dynamicvalue, setValue } = useBoundProp( dynamicPropTypeUtil );
+
 	const { setPropValue: updatePropValueHistory } = usePropValueHistory();
 
-	const isCurrentValueDynamic = isDynamicPropValue( currentValue );
+	const isCurrentValueDynamic = !! dynamicvalue;
 
 	const options = useFilteredOptions( bind, searchValue );
 
@@ -52,10 +54,10 @@ export const DynamicSelection = ( { onSelect }: DynamicSelectionProps ) => {
 
 	const handleSetDynamicTag = ( value: string ) => {
 		if ( ! isCurrentValueDynamic ) {
-			updatePropValueHistory( bind, currentValue );
+			updatePropValueHistory( bind, anyValue );
 		}
 
-		setValue( { $$type: 'dynamic', value: { name: value, settings: {} } } );
+		setValue( { name: value, settings: {} } );
 
 		onSelect?.();
 	};
@@ -88,7 +90,7 @@ export const DynamicSelection = ( { onSelect }: DynamicSelectionProps ) => {
 									{ dynamicGroups?.[ category ]?.title || category }
 								</ListSubheader>
 								{ items.map( ( { value, label: tagLabel } ) => {
-									const isSelected = isCurrentValueDynamic && value === currentValue?.value?.name;
+									const isSelected = isCurrentValueDynamic && value === dynamicvalue?.name;
 
 									return (
 										<MenuItem

package/src/dynamics/dynamic-control.tsx

@@ -1,17 +1,17 @@
 import * as React from 'react';
 import { BoundPropProvider, useBoundProp } from '@elementor/editor-controls';
-import { type PropKey, type PropValue } from '@elementor/editor-props';
+import { isTransformable, type PropKey, type PropValue } from '@elementor/editor-props';
 
 import { useDynamicTag } from './hooks/use-dynamic-tag';
-import { type DynamicPropValue } from './types';
+import { dynamicPropTypeUtil } from './utils';
 
 export type DynamicControlProps = React.PropsWithChildren< {
 	bind: PropKey;
 } >;
 
 export const DynamicControl = ( { bind, children }: DynamicControlProps ) => {
-	const { value, setValue, bind: propName } = useBoundProp< DynamicPropValue >();
-	const { name = '', settings } = value?.value ?? {};
+	const { value, setValue, bind: propName } = useBoundProp( dynamicPropTypeUtil );
+	const { name = '', settings } = value ?? {};
 
 	const dynamicTag = useDynamicTag( propName, name );
 
@@ -24,13 +24,11 @@ export const DynamicControl = ( { bind, children }: DynamicControlProps ) => {
 
 	const setDynamicValue = ( newValue: PropValue ) => {
 		setValue( {
-			$$type: 'dynamic',
-			value: {
-				name,
-				settings: {
-					...settings,
-					[ bind ]: newValue,
-				},
+			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,
 			},
 		} );
 	};

package/src/dynamics/utils.ts

@@ -1,8 +1,15 @@
-import { isTransformable, type PropType, type PropValue, type TransformablePropType } from '@elementor/editor-props';
+import {
+	createPropUtils,
+	isTransformable,
+	type PropType,
+	type PropValue,
+	type TransformablePropType,
+} from '@elementor/editor-props';
+import { z } from '@elementor/schema';
 
-import { type DynamicPropType, type DynamicPropValue } from './types';
+import { type DynamicPropType } from './types';
 
-const DYNAMIC_PROP_TYPE_KEY = 'dynamic';
+export const DYNAMIC_PROP_TYPE_KEY = 'dynamic';
 
 export const isDynamicPropType = ( prop: TransformablePropType ): prop is DynamicPropType =>
 	prop.key === DYNAMIC_PROP_TYPE_KEY;
@@ -20,3 +27,13 @@ export const isDynamicPropValue = ( prop: PropValue ): prop is DynamicPropValue
 export const supportsDynamic = ( propType: PropType ): boolean => {
 	return !! getDynamicPropType( propType );
 };
+
+export const dynamicPropTypeUtil = createPropUtils(
+	DYNAMIC_PROP_TYPE_KEY,
+	z.strictObject( {
+		name: z.string(),
+		settings: z.record( z.any() ).optional(),
+	} )
+);
+
+export type DynamicPropValue = z.infer< typeof dynamicPropTypeUtil.schema >;

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

@@ -11,7 +11,7 @@ export const useStylePropsHistory = ( props: PropKey[] ) => {
 	const { id: styleDefID, meta } = useStyle();
 	const { getPropValue, setPropValue, removeProp } = usePropValueHistory();
 
-	const styleDef = getElementStyles( element.id )?.[ styleDefID ];
+	const styleDef = styleDefID ? getElementStyles( element.id )?.[ styleDefID ] : null;
 	const styleVariant = styleDef ? getVariantByMeta( styleDef, meta ) : null;
 	const styleVariantPath = `${ styleDefID }-${ styleVariant?.meta.breakpoint }-${ styleVariant?.meta.state }`;
 

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

@@ -1,6 +1,7 @@
 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';
@@ -33,6 +34,7 @@ export const useStylesField = < T extends PropValue >(
 			props: { [ propName ]: newValue },
 			meta,
 			bind: classesProp,
+			label: __( 'local', 'elementor' ),
 		} );
 	};