@elementor/editor-editing-panel 1.46.0 → 1.47.0

package/src/controls-registry/settings-field.tsx

@@ -1,17 +1,29 @@
 import * as React from 'react';
+import { useMemo } from 'react';
 import { PropKeyProvider, PropProvider } from '@elementor/editor-controls';
-import { updateElementSettings, useElementSetting } from '@elementor/editor-elements';
+import { setDocumentModifiedStatus } from '@elementor/editor-documents';
+import {
+	type ElementID,
+	getElementLabel,
+	getElementSetting,
+	updateElementSettings,
+	useElementSetting,
+} from '@elementor/editor-elements';
 import { type PropKey, type PropValue } from '@elementor/editor-props';
+import { isExperimentActive, undoable } from '@elementor/editor-v1-adapters';
+import { __ } from '@wordpress/i18n';
 
 import { useElement } from '../contexts/element-context';
+import { EXPERIMENTAL_FEATURES } from '../sync/experiments-flags';
 import { createTopLevelOjectType } from './create-top-level-object-type';
 
 type Props = {
 	bind: PropKey;
+	propDisplayName: string;
 	children: React.ReactNode;
 };
 
-export const SettingsField = ( { bind, children }: Props ) => {
+export const SettingsField = ( { bind, children, propDisplayName }: Props ) => {
 	const { element, elementType } = useElement();
 
 	const settingsValue = useElementSetting< PropValue >( element.id, bind );
@@ -20,11 +32,20 @@ export const SettingsField = ( { bind, children }: Props ) => {
 
 	const propType = createTopLevelOjectType( { schema: elementType.propsSchema } );
 
+	const undoableUpdateElementProp = useUndoableUpdateElementProp( {
+		propKey: bind,
+		elementId: element.id,
+		propDisplayName,
+	} );
+
 	const setValue = ( newValue: Record< string, PropValue > ) => {
-		updateElementSettings( {
-			id: element.id,
-			props: { ...newValue },
-		} );
+		const isVersion331Active = isExperimentActive( EXPERIMENTAL_FEATURES.V_3_31 );
+
+		if ( isVersion331Active ) {
+			undoableUpdateElementProp( { newValue } );
+		} else {
+			updateElementSettings( { id: element.id, props: newValue } );
+		}
 	};
 
 	return (
@@ -33,3 +54,41 @@ export const SettingsField = ( { bind, children }: Props ) => {
 		</PropProvider>
 	);
 };
+
+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;
+
+					updateElementSettings( { id: elementId, props: { ...newValue }, withHistory: false } );
+					setDocumentModifiedStatus( true );
+
+					return { [ propKey ]: prevPropValue };
+				},
+
+				undo: ( {}, prevProps ) => {
+					updateElementSettings( { id: elementId, props: prevProps, withHistory: false } );
+				},
+			},
+			{
+				title: getElementLabel( elementId ),
+				// translators: %s is the name of the property that was edited.
+				subtitle: __( '%s edited', 'elementor' ).replace( '%s', propDisplayName ),
+			}
+		);
+	}, [ propKey, elementId, propDisplayName ] );
+}

package/src/controls-registry/styles-field.tsx

@@ -2,7 +2,9 @@ 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 { createTopLevelOjectType } from './create-top-level-object-type';
@@ -11,18 +13,24 @@ export type StylesFieldProps = {
 	bind: PropKey;
 	placeholder?: PropValue;
 	children: React.ReactNode;
+	propDisplayName: string;
 };
 
 export const StylesField = ( { bind, placeholder, children }: StylesFieldProps ) => {
 	const { value, setValue, canEdit } = useStylesField( bind );
 
+	const isVersion331Active = isExperimentActive( 'e_v_3_31' );
+	const stylesInheritanceChain = useStylesInheritanceChain( [ bind ] );
+
 	const stylesSchema = getStylesSchema();
 
 	const propType = createTopLevelOjectType( { schema: stylesSchema } );
 
 	const values = { [ bind ]: value };
-	const placeholderValues = { [ bind ]: placeholder };
-
+	const [ actualValue ] = stylesInheritanceChain;
+	const placeholderValues = {
+		[ bind ]: isVersion331Active ? actualValue?.value : placeholder,
+	};
 	const setValues = ( newValue: Record< string, PropValue > ) => {
 		setValue( newValue[ bind ] );
 	};

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

@@ -21,7 +21,6 @@ import {
 } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
-import { PopoverContent } from '../../components/popover-content';
 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';
@@ -76,7 +75,11 @@ export const DynamicSelectionControl = () => {
 			<Popover
 				disablePortal
 				disableScrollLock
-				anchorOrigin={ { vertical: 'bottom', horizontal: 'left' } }
+				anchorOrigin={ { vertical: 'bottom', horizontal: 'right' } }
+				transformOrigin={ { vertical: 'top', horizontal: 'right' } }
+				PaperProps={ {
+					sx: { my: 1 },
+				} }
 				{ ...bindPopover( selectionPopoverState ) }
 			>
 				<Stack>
@@ -105,6 +108,9 @@ export const DynamicSettingsPopover = ( { dynamicTag }: { dynamicTag: DynamicTag
 				disablePortal
 				disableScrollLock
 				anchorOrigin={ { vertical: 'bottom', horizontal: 'center' } }
+				PaperProps={ {
+					sx: { my: 0.5 },
+				} }
 				{ ...bindPopover( popupState ) }
 			>
 				<PopoverHeader
@@ -139,14 +145,14 @@ const DynamicSettings = ( { controls }: { controls: DynamicTag[ 'atomic_controls
 			{ tabs.map( ( { value }, index ) => {
 				return (
 					<TabPanel key={ index } sx={ { flexGrow: 1, py: 0 } } { ...getTabPanelProps( index ) }>
-						<PopoverContent p={ 2 } gap={ 2 }>
+						<Stack p={ 2 } gap={ 2 }>
 							{ value.items.map( ( item ) => {
 								if ( item.type === 'control' ) {
 									return <Control key={ item.value.bind } control={ item.value } />;
 								}
 								return null;
 							} ) }
-						</PopoverContent>
+						</Stack>
 					</TabPanel>
 				);
 			} ) }

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

@@ -6,6 +6,7 @@ import { DatabaseIcon } from '@elementor/icons';
 import { Box, Divider, Link, Stack, Typography, useTheme } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
+import { PopoverScrollableContent } from '../../components/popover-scrollable-content';
 import { usePersistDynamicValue } from '../../hooks/use-persist-dynamic-value';
 import { usePropDynamicTags } from '../hooks/use-prop-dynamic-tags';
 import { getAtomicDynamicTags } from '../sync/get-atomic-dynamic-tags';
@@ -91,19 +92,23 @@ export const DynamicSelection = ( { close: closePopover }: DynamicSelectionProps
 							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( '' ) } />
-							}
-						/>
+
+						<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>
@@ -127,9 +132,8 @@ const NoResults = ( { searchValue, onClear }: NoResultsProps ) => (
 			<br />
 			&ldquo;{ searchValue }&rdquo;.
 		</Typography>
-		<Typography align="center" variant="caption">
+		<Typography align="center" variant="caption" sx={ { display: 'flex', flexDirection: 'column' } }>
 			{ __( 'Try something else.', 'elementor' ) }
-			&nbsp;
 			<Link color="text.secondary" variant="caption" component="button" onClick={ onClear }>
 				{ __( 'Clear & try again', 'elementor' ) }
 			</Link>

package/src/hooks/use-default-panel-settings.ts

@@ -24,6 +24,10 @@ const defaultPanelSettingsContext = createContext< Record< string, Defaults | un
 		defaultSectionsExpanded: fallbackEditorSettings.defaultSectionsExpanded,
 		defaultTab: 'style',
 	},
+	'e-divider': {
+		defaultSectionsExpanded: fallbackEditorSettings.defaultSectionsExpanded,
+		defaultTab: 'style',
+	},
 } );
 
 export const useDefaultPanelSettings = () => {

package/src/index.ts

@@ -1,3 +1,5 @@
+export { EXPERIMENTAL_FEATURES } from './sync/experiments-flags';
+
 export { useBoundProp } from '@elementor/editor-controls';
 export type { PopoverActionProps } from './popover-action';
 export { registerControlReplacement } from './control-replacement';
@@ -7,5 +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 { useSectionWidth } from './contexts/section-context';
 
 export { init } from './init';

package/src/popover-action.tsx

@@ -39,7 +39,14 @@ export default function PopoverAction( {
 				disableScrollLock
 				anchorOrigin={ {
 					vertical: 'bottom',
-					horizontal: 'center',
+					horizontal: 'right',
+				} }
+				transformOrigin={ {
+					vertical: 'top',
+					horizontal: 'right',
+				} }
+				PaperProps={ {
+					sx: { my: 2.5 },
 				} }
 				{ ...bindPopover( popupState ) }
 			>

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

@@ -50,7 +50,10 @@ const Indicator = ( { inheritanceChain, path, propType }: IndicatorProps ) => {
 
 	const [ actualStyle ] = inheritanceChain;
 
-	if ( actualStyle.provider === ELEMENTS_BASE_STYLES_PROVIDER_KEY ) {
+	if (
+		! isExperimentActive( EXPERIMENTAL_FEATURES.V_3_31 ) &&
+		actualStyle.provider === ELEMENTS_BASE_STYLES_PROVIDER_KEY
+	) {
 		return null;
 	}
 

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

@@ -2,29 +2,30 @@ import * as React from 'react';
 import { useMemo, useState } from 'react';
 import { createPropsResolver, type PropsResolver } from '@elementor/editor-canvas';
 import { type PropKey, type PropType } from '@elementor/editor-props';
+import { PopoverHeader } from '@elementor/editor-ui';
 import {
 	Backdrop,
 	Box,
 	Card,
 	CardContent,
 	ClickAwayListener,
-	CloseButton,
 	IconButton,
 	Infotip,
 	Stack,
 	type Theme,
 	Tooltip,
-	Typography,
 } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
-import { useSectionContentRef } from '../../components/section-content';
+import { useSectionWidth } from '../../contexts/section-context';
 import { useDirection } from '../../hooks/use-direction';
 import { useNormalizedInheritanceChainItems } from '../hooks/use-normalized-inheritance-chain-items';
 import { stylesInheritanceTransformersRegistry } from '../styles-inheritance-transformers-registry';
 import { type SnapshotPropValue } from '../types';
 import { ActionIcons, BreakpointIcon, LabelChip, ValueComponent } from './infotip';
 
+const SECTION_PADDING_INLINE = 32;
+
 type Props = {
 	inheritanceChain: SnapshotPropValue[];
 	propType: PropType;
@@ -33,8 +34,6 @@ type Props = {
 	children: React.ReactNode;
 };
 
-const SIZE = 'tiny';
-
 export const StylesInheritanceInfotip = ( { inheritanceChain, propType, path, label, children }: Props ) => {
 	const [ showInfotip, setShowInfotip ] = useState< boolean >( false );
 	const toggleInfotip = () => setShowInfotip( ( prev ) => ! prev );
@@ -42,8 +41,7 @@ export const StylesInheritanceInfotip = ( { inheritanceChain, propType, path, la
 
 	const key = path.join( '.' );
 
-	const sectionContentRef = useSectionContentRef();
-	const sectionContentWidth = sectionContentRef?.current?.offsetWidth ?? 320;
+	const sectionWidth = useSectionWidth() + SECTION_PADDING_INLINE;
 
 	const resolve = useMemo< PropsResolver >( () => {
 		return createPropsResolver( {
@@ -59,8 +57,8 @@ export const StylesInheritanceInfotip = ( { inheritanceChain, propType, path, la
 			<Card
 				elevation={ 0 }
 				sx={ {
-					width: `${ sectionContentWidth }px`,
-					maxWidth: 500,
+					width: `${ sectionWidth - SECTION_PADDING_INLINE }px`,
+					maxWidth: 496,
 					overflowX: 'hidden',
 				} }
 			>
@@ -75,16 +73,8 @@ export const StylesInheritanceInfotip = ( { inheritanceChain, propType, path, la
 						},
 					} }
 				>
-					<Stack direction="row" alignItems="center" sx={ { pl: 1.5, pr: 0.5, minHeight: 36, py: 0.5 } }>
-						<Typography variant="subtitle2" color="secondary" sx={ { fontSize: 12, fontWeight: '500' } }>
-							{ __( 'Style origin', 'elementor' ) }
-						</Typography>
-						<CloseButton
-							slotProps={ { icon: { fontSize: SIZE } } }
-							sx={ { ml: 'auto' } }
-							onClick={ closeInfotip }
-						/>
-					</Stack>
+					<PopoverHeader title={ __( 'Style origin', 'elementor' ) } onClose={ closeInfotip } />
+
 					<Stack
 						gap={ 1.5 }
 						sx={ { pl: 2, pr: 1, pb: 2, overflowX: 'hidden', overflowY: 'auto' } }

package/src/sync/experiments-flags.ts

@@ -1,4 +1,5 @@
 // Experimental features flags
 export const EXPERIMENTAL_FEATURES = {
 	V_3_30: 'e_v_3_30',
+	V_3_31: 'e_v_3_31',
 };

package/src/components/popover-content.tsx

@@ -1,15 +0,0 @@
-import { type FC, type PropsWithChildren } from 'react';
-import * as React from 'react';
-import { Stack } from '@elementor/ui';
-
-type PopoverContentProps = PropsWithChildren< {
-	alignItems?: 'center';
-	gap?: number;
-	p?: 1.5 | 2 | 2.5;
-} >;
-
-export const PopoverContent: FC< PopoverContentProps > = ( { alignItems, gap = 1.5, p, children } ) => (
-	<Stack alignItems={ alignItems } gap={ gap } p={ p }>
-		{ children }
-	</Stack>
-);