@elementor/editor-editing-panel 1.47.0 → 1.50.0

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,6 +21,7 @@ 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 { usePersistDynamicValue } from '../../hooks/use-persist-dynamic-value';
@@ -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,7 +164,7 @@ const DynamicSettings = ( { controls }: { controls: DynamicTag[ 'atomic_controls
 					</TabPanel>
 				);
 			} ) }
-		</PopoverScrollableContent>
+		</>
 	);
 };
 

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/hooks/use-styles-field.ts

@@ -3,7 +3,8 @@ import type { PropKey, PropValue } from '@elementor/editor-props';
 import { useStylesFields } from './use-styles-fields';
 
 export function useStylesField< T extends PropValue >(
-	propName: PropKey
+	propName: PropKey,
+	meta: { history: { propDisplayName: string } }
 ): {
 	value: T;
 	setValue: ( newValue: T ) => void;
@@ -14,9 +15,7 @@ export function useStylesField< T extends PropValue >(
 	const value = values?.[ propName ] ?? null;
 
 	const setValue = ( newValue: T ) => {
-		setValues( {
-			[ propName ]: newValue,
-		} );
+		setValues( { [ propName ]: newValue }, meta );
 	};
 
 	return { value: value as T, setValue, canEdit };

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

@@ -1,61 +1,38 @@
 import { useMemo } from 'react';
-import {
-	createElementStyle,
-	type CreateElementStyleArgs,
-	deleteElementStyle,
-	type ElementID,
-	getElementLabel,
-} from '@elementor/editor-elements';
+import { createElementStyle, deleteElementStyle, type ElementID, getElementLabel } from '@elementor/editor-elements';
 import type { Props } from '@elementor/editor-props';
 import { getVariantByMeta, type StyleDefinition, type StyleDefinitionVariant } from '@elementor/editor-styles';
-import { type StylesProvider } from '@elementor/editor-styles-repository';
+import { isElementsStylesProvider, type StylesProvider } from '@elementor/editor-styles-repository';
 import { ELEMENTS_STYLES_RESERVED_LABEL } from '@elementor/editor-styles-repository';
-import { undoable } from '@elementor/editor-v1-adapters';
+import { isExperimentActive, undoable } from '@elementor/editor-v1-adapters';
 import { __ } from '@wordpress/i18n';
 
 import { useClassesProp } from '../contexts/classes-prop-context';
 import { useElement } from '../contexts/element-context';
 import { useStyle } from '../contexts/style-context';
 import { StyleNotFoundUnderProviderError, StylesProviderCannotUpdatePropsError } from '../errors';
+import { EXPERIMENTAL_FEATURES } from '../sync/experiments-flags';
 import { useStylesRerender } from './use-styles-rerender';
 
 export function useStylesFields< T extends Props >( propNames: ( keyof T & string )[] ) {
-	const { element } = useElement();
-	const { id, meta, provider, canEdit } = useStyle();
-	const classesProp = useClassesProp();
+	const {
+		element: { id: elementId },
+	} = useElement();
+	const { id: styleId, meta, provider, canEdit } = useStyle();
 
-	const undoableUpdateStyle = useUndoableUpdateStyle();
-	const undoableCreateElementStyle = useUndoableCreateElementStyle();
+	const undoableUpdateStyle = useUndoableUpdateStyle( { elementId, meta } );
+	const undoableCreateElementStyle = useUndoableCreateElementStyle( { elementId, meta } );
 
 	useStylesRerender();
 
-	const values = getProps< T >( {
-		elementId: element.id,
-		styleId: id,
-		provider,
-		meta,
-		propNames,
-	} );
-
-	const setValues = ( props: T ) => {
-		if ( id === null ) {
-			undoableCreateElementStyle( {
-				elementId: element.id,
-				classesProp,
-				meta,
-				props,
-			} );
-
-			return;
-		}
+	const values = getProps< T >( { elementId, styleId, provider, meta, propNames } );
 
-		undoableUpdateStyle( {
-			elementId: element.id,
-			styleId: id,
-			provider,
-			meta,
-			props,
-		} );
+	const setValues = ( props: T, { history: { propDisplayName } }: { history: { propDisplayName: string } } ) => {
+		if ( styleId === null ) {
+			undoableCreateElementStyle( { props, propDisplayName } );
+		} else {
+			undoableUpdateStyle( { provider, styleId, props, propDisplayName } );
+		}
 	};
 
 	return { values, setValues, canEdit };
@@ -91,52 +68,78 @@ function getProps< T extends Props >( { styleId, elementId, provider, meta, prop
 	) as NullableValues< T >;
 }
 
-type UndoableCreateElementStyleArgs = Omit< CreateElementStyleArgs, 'label' >;
+type UndoableCreateElementStyleArgs = {
+	props: Props;
+	propDisplayName: string;
+};
+
+function useUndoableCreateElementStyle( {
+	elementId,
+	meta,
+}: {
+	elementId: ElementID;
+	meta: StyleDefinitionVariant[ 'meta' ];
+} ) {
+	const classesProp = useClassesProp();
 
-function useUndoableCreateElementStyle() {
 	return useMemo( () => {
+		const isVersion331Active = isExperimentActive( EXPERIMENTAL_FEATURES.V_3_31 );
+
+		const createStyleArgs = { elementId, classesProp, meta, label: ELEMENTS_STYLES_RESERVED_LABEL };
+
 		return undoable(
 			{
-				do: ( payload: UndoableCreateElementStyleArgs ) => {
-					return createElementStyle( {
-						...payload,
-						label: ELEMENTS_STYLES_RESERVED_LABEL,
-					} );
+				do: ( { props }: UndoableCreateElementStyleArgs ) => {
+					return createElementStyle( { ...createStyleArgs, props } );
 				},
 
-				undo: ( { elementId }, styleId ) => {
+				undo: ( _, styleId ) => {
 					deleteElementStyle( elementId, styleId );
 				},
 
-				redo: ( payload, styleId ) => {
-					return createElementStyle( {
-						...payload,
-						styleId,
-						label: ELEMENTS_STYLES_RESERVED_LABEL,
-					} );
+				redo: ( { props }, styleId ) => {
+					return createElementStyle( { ...createStyleArgs, props, styleId } );
 				},
 			},
 			{
-				title: ( { elementId } ) => getElementLabel( elementId ),
-				subtitle: __( 'Style edited', 'elementor' ),
+				title: () => {
+					if ( isVersion331Active ) {
+						return localStyleHistoryTitlesV331.title( { elementId } );
+					}
+					return historyTitlesV330.title( { elementId } );
+				},
+				subtitle: ( { propDisplayName } ) => {
+					if ( isVersion331Active ) {
+						return localStyleHistoryTitlesV331.subtitle( { propDisplayName } );
+					}
+					return historyTitlesV330.subtitle;
+				},
 			}
 		);
-	}, [] );
+	}, [ classesProp, elementId, meta ] );
 }
 
 type UndoableUpdateStyleArgs = {
-	elementId: ElementID;
 	styleId: StyleDefinition[ 'id' ];
 	provider: StylesProvider;
-	meta: StyleDefinitionVariant[ 'meta' ];
 	props: Props;
+	propDisplayName: string;
 };
 
-function useUndoableUpdateStyle() {
+function useUndoableUpdateStyle( {
+	elementId,
+	meta,
+}: {
+	elementId: ElementID;
+
+	meta: StyleDefinitionVariant[ 'meta' ];
+} ) {
 	return useMemo( () => {
+		const isVersion331Active = isExperimentActive( EXPERIMENTAL_FEATURES.V_3_31 );
+
 		return undoable(
 			{
-				do: ( { elementId, styleId, provider, meta, props }: UndoableUpdateStyleArgs ) => {
+				do: ( { provider, styleId, props }: UndoableUpdateStyleArgs ) => {
 					if ( ! provider.actions.updateProps ) {
 						throw new StylesProviderCannotUpdatePropsError( {
 							context: { providerKey: provider.getKey() },
@@ -147,28 +150,41 @@ function useUndoableUpdateStyle() {
 
 					const prevProps = getCurrentProps( style, meta );
 
-					provider.actions.updateProps(
-						{
-							id: styleId,
-							meta,
-							props,
-						},
-						{ elementId }
-					);
+					provider.actions.updateProps( { id: styleId, meta, props }, { elementId } );
 
 					return prevProps;
 				},
 
-				undo: ( { elementId, styleId, meta, provider }, prevProps ) => {
+				undo: ( { provider, styleId }, prevProps ) => {
 					provider.actions.updateProps?.( { id: styleId, meta, props: prevProps }, { elementId } );
 				},
 			},
 			{
-				title: ( { elementId } ) => getElementLabel( elementId ),
-				subtitle: __( 'Style edited', 'elementor' ),
+				title: ( { provider } ) => {
+					if ( isVersion331Active ) {
+						const isLocal = isElementsStylesProvider( provider.getKey() );
+
+						if ( isLocal ) {
+							return localStyleHistoryTitlesV331.title( { elementId } );
+						}
+						return defaultHistoryTitlesV331.title( { provider } );
+					}
+					return historyTitlesV330.title( { elementId } );
+				},
+				subtitle: ( { provider, styleId, propDisplayName } ) => {
+					if ( isVersion331Active ) {
+						const isLocal = isElementsStylesProvider( provider.getKey() );
+
+						if ( isLocal ) {
+							return localStyleHistoryTitlesV331.subtitle( { propDisplayName } );
+						}
+						return defaultHistoryTitlesV331.subtitle( { provider, styleId, elementId, propDisplayName } );
+					}
+					return historyTitlesV330.subtitle;
+				},
 			}
 		);
-	}, [] );
+	}, [ elementId, meta ] );
 }
 
 function getCurrentProps( style: StyleDefinition | null, meta: StyleDefinitionVariant[ 'meta' ] ) {
@@ -182,3 +198,55 @@ function getCurrentProps( style: StyleDefinition | null, meta: StyleDefinitionVa
 
 	return structuredClone( props );
 }
+
+const historyTitlesV330 = {
+	title: ( { elementId }: { elementId: ElementID } ) => getElementLabel( elementId ),
+	subtitle: __( 'Style edited', 'elementor' ),
+};
+
+type DefaultHistoryTitleV331Args = {
+	provider: StylesProvider;
+};
+
+type DefaultHistorySubtitleV331Args = {
+	provider: StylesProvider;
+	styleId: StyleDefinition[ 'id' ];
+	elementId: ElementID;
+	propDisplayName: string;
+};
+
+const defaultHistoryTitlesV331 = {
+	title: ( { provider }: DefaultHistoryTitleV331Args ) => {
+		const providerLabel = provider.labels?.singular;
+		return providerLabel ? capitalize( providerLabel ) : __( 'Style', 'elementor' );
+	},
+	subtitle: ( { provider, styleId, elementId, propDisplayName }: DefaultHistorySubtitleV331Args ) => {
+		const styleLabel = provider.actions.get( styleId, { elementId } )?.label;
+
+		if ( ! styleLabel ) {
+			throw new Error( `Style ${ styleId } not found` );
+		}
+
+		// translators: %s$1 is the style label, %s$2 is the name of the style property being edited
+		return __( `%s$1 %s$2 edited`, 'elementor' ).replace( '%s$1', styleLabel ).replace( '%s$2', propDisplayName );
+	},
+};
+
+type LocalStyleHistoryTitleV331Args = {
+	elementId: ElementID;
+};
+
+type LocalStyleHistorySubtitleV331Args = {
+	propDisplayName: string;
+};
+
+const localStyleHistoryTitlesV331 = {
+	title: ( { elementId }: LocalStyleHistoryTitleV331Args ) => getElementLabel( elementId ),
+	subtitle: ( { propDisplayName }: LocalStyleHistorySubtitleV331Args ) =>
+		// translators: %s is the name of the style property being edited
+		__( `%s edited`, 'elementor' ).replace( '%s', propDisplayName ),
+};
+
+function capitalize( str: string ) {
+	return str.charAt( 0 ).toUpperCase() + str.slice( 1 );
+}

package/src/index.ts

@@ -9,7 +9,7 @@ export { usePanelActions, usePanelStatus } from './panel';
 export { type ValidationResult, type ValidationEvent } from './components/creatable-autocomplete';
 export { controlActionsMenu } from './controls-actions';
 export { useFontFamilies } from './components/style-sections/typography-section/hooks/use-font-families';
-export { PopoverScrollableContent } from './components/popover-scrollable-content';
+export { PopoverBody } from './components/popover-body';
 export { useSectionWidth } from './contexts/section-context';
 
 export { init } from './init';

package/src/init.ts

@@ -1,5 +1,4 @@
 import { injectIntoLogic } from '@elementor/editor';
-import { PrefetchUserData } from '@elementor/editor-current-user';
 import { __registerPanel as registerPanel } from '@elementor/editor-panels';
 import { blockCommand, isExperimentActive } from '@elementor/editor-v1-adapters';
 
@@ -20,11 +19,6 @@ export function init() {
 		component: EditingPanelHooks,
 	} );
 
-	injectIntoLogic( {
-		id: 'current-user-data',
-		component: PrefetchUserData,
-	} );
-
 	// TODO: Move it from here once we have dynamic package.
 	initDynamics();
 

package/src/reset-style-props.tsx

@@ -15,7 +15,7 @@ export function initResetStyleProps() {
 }
 
 // Temporary fix for the issue with ControlToggleButtonGroup.
-const EXCLUDED_BINDS = [ 'order', 'flex-grow', 'flex-shrink', 'flex-basis' ];
+const EXCLUDED_BINDS = [ 'flex-grow', 'flex-shrink', 'flex-basis' ];
 
 export function useResetStyleValueProps() {
 	const isStyle = useIsStyle();

package/src/styles-inheritance/components/styles-inheritance-infotip.tsx

@@ -41,7 +41,7 @@ export const StylesInheritanceInfotip = ( { inheritanceChain, propType, path, la
 
 	const key = path.join( '.' );
 
-	const sectionWidth = useSectionWidth() + SECTION_PADDING_INLINE;
+	const sectionWidth = useSectionWidth();
 
 	const resolve = useMemo< PropsResolver >( () => {
 		return createPropsResolver( {

package/src/utils/get-styles-provider-color.ts

@@ -26,3 +26,11 @@ export const getStylesProviderThemeColor = ( provider: string ): ( ( theme: Them
 
 	return getStyleProviderColors( provider ).getThemeColor;
 };
+
+export function getTempStylesProviderThemeColor( provider: string ): ( ( theme: Theme ) => string ) | null {
+	if ( isElementsStylesProvider( provider ) ) {
+		return ( theme: Theme ) => theme.palette.primary.main;
+	}
+
+	return getStylesProviderThemeColor( provider );
+}

package/src/components/popover-scrollable-content.tsx

@@ -1,12 +0,0 @@
-import * as React from 'react';
-import { PopoverScrollableContent as BasePopoverScrollableContent } from '@elementor/editor-ui';
-
-import { useSectionWidth } from '../contexts/section-context';
-
-type Props = React.ComponentProps< typeof BasePopoverScrollableContent >;
-
-export const PopoverScrollableContent = ( props: Props ) => {
-	const sectionWidth = useSectionWidth();
-
-	return <BasePopoverScrollableContent { ...props } width={ sectionWidth } />;
-};