@elementor/editor-editing-panel 1.46.0 → 1.48.0

package/src/components/style-sections/typography-section/text-stroke-field.tsx

@@ -24,8 +24,12 @@ const initTextStroke = {
 	},
 };
 
+const TEXT_STROKE_LABEL = __( 'Text stroke', 'elementor' );
+
 export const TextStrokeField = () => {
-	const { value, setValue, canEdit } = useStylesField( 'stroke' );
+	const { value, setValue, canEdit } = useStylesField( 'stroke', {
+		history: { propDisplayName: TEXT_STROKE_LABEL },
+	} );
 
 	const addTextStroke = () => {
 		setValue( initTextStroke );
@@ -38,13 +42,13 @@ export const TextStrokeField = () => {
 	const hasTextStroke = Boolean( value );
 
 	return (
-		<StylesField bind={ 'stroke' }>
+		<StylesField bind={ 'stroke' } propDisplayName={ TEXT_STROKE_LABEL }>
 			<AddOrRemoveContent
 				isAdded={ hasTextStroke }
 				onAdd={ addTextStroke }
 				onRemove={ removeTextStroke }
 				disabled={ ! canEdit }
-				renderLabel={ () => <ControlLabel>{ __( 'Text stroke', 'elementor' ) }</ControlLabel> }
+				renderLabel={ () => <ControlLabel>{ TEXT_STROKE_LABEL }</ControlLabel> }
 			>
 				<StrokeControl />
 			</AddOrRemoveContent>

package/src/components/style-sections/typography-section/transform-field.tsx

@@ -1,14 +1,15 @@
 import * as React from 'react';
 import { type ToggleButtonGroupItem, ToggleControl } from '@elementor/editor-controls';
 import { LetterCaseIcon, LetterCaseLowerIcon, LetterCaseUpperIcon, MinusIcon } from '@elementor/icons';
-import { Grid } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
 import { StylesField } from '../../../controls-registry/styles-field';
-import { ControlLabel } from '../../control-label';
+import { StylesFieldLayout } from '../../styles-field-layout';
 
 type Transforms = 'none' | 'capitalize' | 'uppercase' | 'lowercase';
 
+const TEXT_TRANSFORM_LABEL = __( 'Text transform', 'elementor' );
+
 const options: ToggleButtonGroupItem< Transforms >[] = [
 	{
 		value: 'none',
@@ -37,14 +38,9 @@ const options: ToggleButtonGroupItem< Transforms >[] = [
 ];
 
 export const TransformField = () => (
-	<StylesField bind={ 'text-transform' }>
-		<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap">
-			<Grid item xs={ 6 }>
-				<ControlLabel>{ __( 'Text transform', 'elementor' ) }</ControlLabel>
-			</Grid>
-			<Grid item xs={ 6 } display="flex" justifyContent="end">
-				<ToggleControl options={ options } />
-			</Grid>
-		</Grid>
+	<StylesField bind="text-transform" propDisplayName={ TEXT_TRANSFORM_LABEL }>
+		<StylesFieldLayout label={ TEXT_TRANSFORM_LABEL }>
+			<ToggleControl options={ options } />
+		</StylesFieldLayout>
 	</StylesField>
 );

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

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import type { NumberPropValue } from '@elementor/editor-props';
 import { isExperimentActive } from '@elementor/editor-v1-adapters';
+import { __ } from '@wordpress/i18n';
 
 import { useStylesField } from '../../../hooks/use-styles-field';
 import { PanelDivider } from '../../panel-divider';
@@ -22,8 +23,12 @@ import { TextStrokeField } from './text-stroke-field';
 import { TransformField } from './transform-field';
 import { WordSpacingField } from './word-spacing-field';
 
+const COLUMN_COUNT_LABEL = __( 'Column count', 'elementor' );
+
 export const TypographySection = () => {
-	const { value: columnCount } = useStylesField< NumberPropValue >( 'column-count' );
+	const { value: columnCount } = useStylesField< NumberPropValue >( 'column-count', {
+		history: { propDisplayName: COLUMN_COUNT_LABEL },
+	} );
 	const hasMultiColumns = !! ( columnCount?.value && columnCount?.value > 1 );
 
 	const isVersion330Active = isExperimentActive( 'e_v_3_30' );

package/src/components/style-sections/typography-section/word-spacing-field.tsx

@@ -1,25 +1,21 @@
 import * as React from 'react';
-import { type MutableRefObject, useRef } from 'react';
+import { useRef } from 'react';
 import { SizeControl } from '@elementor/editor-controls';
-import { Grid } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
 import { StylesField } from '../../../controls-registry/styles-field';
-import { ControlLabel } from '../../control-label';
+import { StylesFieldLayout } from '../../styles-field-layout';
+
+const WORD_SPACING_LABEL = __( 'Word spacing', 'elementor' );
 
 export const WordSpacingField = () => {
-	const rowRef: MutableRefObject< HTMLElement | undefined > = useRef();
+	const rowRef = useRef< HTMLDivElement >( null );
 
 	return (
-		<StylesField bind="word-spacing">
-			<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap" ref={ rowRef }>
-				<Grid item xs={ 6 }>
-					<ControlLabel>{ __( 'Word spacing', 'elementor' ) }</ControlLabel>
-				</Grid>
-				<Grid item xs={ 6 }>
-					<SizeControl anchorRef={ rowRef } />
-				</Grid>
-			</Grid>
+		<StylesField bind="word-spacing" propDisplayName={ WORD_SPACING_LABEL }>
+			<StylesFieldLayout label={ WORD_SPACING_LABEL } ref={ rowRef }>
+				<SizeControl anchorRef={ rowRef } />
+			</StylesFieldLayout>
 		</StylesField>
 	);
 };

package/src/components/style-tab.tsx

@@ -29,7 +29,7 @@ const TABS_HEADER_HEIGHT = '37px';
 
 export const stickyHeaderStyles = {
 	position: 'sticky',
-	zIndex: 1,
+	zIndex: 1100,
 	opacity: 1,
 	backgroundColor: 'background.default',
 	transition: 'top 300ms ease',

package/src/components/styles-field-layout.tsx

@@ -0,0 +1,50 @@
+import * as React from 'react';
+import { Grid, Stack, type Theme } from '@elementor/ui';
+
+import { ControlLabel } from './control-label';
+
+type StylesFieldLayoutProps = {
+	label: string;
+	children: React.ReactNode;
+	direction?: 'row' | 'column';
+};
+
+export const StylesFieldLayout = React.forwardRef< HTMLDivElement, StylesFieldLayoutProps >( ( props, ref ) => {
+	const { direction = 'row', children, label } = props;
+
+	const LayoutComponent = direction === 'row' ? Row : Column;
+
+	return <LayoutComponent label={ label } ref={ ref } children={ children } />;
+} );
+
+const Row = React.forwardRef< HTMLDivElement, { label: string; children: React.ReactNode } >(
+	( { label, children }, ref ) => {
+		return (
+			<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap" ref={ ref }>
+				<Grid item xs={ 6 }>
+					<ControlLabel>{ label }</ControlLabel>
+				</Grid>
+				<Grid
+					item
+					xs={ 6 }
+					sx={ ( theme: Theme ) => ( {
+						width: `calc(50% - ${ theme.spacing( 2 ) })`,
+					} ) }
+				>
+					{ children }
+				</Grid>
+			</Grid>
+		);
+	}
+);
+
+const Column = React.forwardRef< HTMLDivElement, { label: string; children: React.ReactNode } >(
+	( { label, children }, ref ) => {
+		return (
+			<Stack gap={ 0.75 } ref={ ref }>
+				<ControlLabel>{ label }</ControlLabel>
+				{ children }
+			</Stack>
+		);
+	}
+);

package/src/contexts/section-context.tsx

@@ -0,0 +1,14 @@
+import { createContext, useContext } from 'react';
+import type { RefObject } from 'react';
+
+const FALLBACK_SECTION_WIDTH = 320;
+
+export const SectionRefContext = createContext< RefObject< HTMLElement > | null >( null );
+
+const useSectionRef = () => useContext( SectionRefContext );
+
+export const useSectionWidth = (): number => {
+	const sectionRef = useSectionRef();
+
+	return sectionRef?.current?.offsetWidth ?? FALLBACK_SECTION_WIDTH;
+};

package/src/controls-registry/control-type-container.tsx

@@ -3,6 +3,10 @@ import { type ControlLayout } from '@elementor/editor-elements';
 import { Box, type BoxProps, styled } from '@elementor/ui';
 
 export const ControlTypeContainer = ( { children, layout }: React.PropsWithChildren< { layout?: ControlLayout } > ) => {
+	if ( layout === 'custom' ) {
+		return children;
+	}
+
 	return <StyledContainer layout={ layout }>{ children }</StyledContainer>;
 };
 
@@ -14,10 +18,10 @@ const StyledContainer = styled( Box, {
 	...getGridLayout( layout ),
 } ) );
 
-const getGridLayout = ( layout: ControlLayout ) => ( {
+const getGridLayout = ( layout: Omit< ControlLayout, 'custom' > ) => ( {
 	justifyContent: 'space-between',
 	gridTemplateColumns: {
 		full: 'minmax(0, 1fr)',
 		'two-columns': 'repeat(2, minmax(0, 1fr))',
-	}[ layout ],
+	}[ layout as string ],
 } );

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

@@ -37,7 +37,7 @@ const controlTypes = {
 	textarea: { component: TextAreaControl, layout: 'full', propTypeUtil: stringPropTypeUtil },
 	size: { component: SizeControl, layout: 'two-columns', propTypeUtil: sizePropTypeUtil },
 	select: { component: SelectControl, layout: 'two-columns', propTypeUtil: stringPropTypeUtil },
-	link: { component: LinkControl, layout: 'full', propTypeUtil: linkPropTypeUtil },
+	link: { component: LinkControl, layout: 'custom', propTypeUtil: linkPropTypeUtil },
 	url: { component: UrlControl, layout: 'full', propTypeUtil: stringPropTypeUtil },
 	switch: { component: SwitchControl, layout: 'two-columns', propTypeUtil: booleanPropTypeUtil },
 	repeatable: { component: RepeatableControl, layout: 'full', propTypeUtil: undefined },

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

@@ -1,35 +1,110 @@
 import * as React from 'react';
+import { useMemo } from 'react';
 import { PropKeyProvider, PropProvider } from '@elementor/editor-controls';
-import { updateElementSettings, useElementSetting } from '@elementor/editor-elements';
-import { type PropKey, type PropValue } from '@elementor/editor-props';
+import { setDocumentModifiedStatus } from '@elementor/editor-documents';
+import {
+	type ElementID,
+	getElementLabel,
+	getElementSetting,
+	updateElementSettings,
+	useElementSettings,
+} from '@elementor/editor-elements';
+import { type PropKey, type PropType, type PropValue, shouldApplyEffect } 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 );
+	const elementSettingValues = useElementSettings< PropValue >( element.id, Object.keys( elementType.propsSchema ) );
 
-	const value = { [ bind ]: settingsValue };
+	const value = { [ bind ]: elementSettingValues?.[ bind ] };
 
 	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 } );
+		}
 	};
 
+	const isDisabled = ( prop: PropType ) => getDisableState( prop, elementSettingValues );
+
 	return (
-		<PropProvider propType={ propType } value={ value } setValue={ setValue }>
+		<PropProvider propType={ propType } value={ value } setValue={ setValue } isDisabled={ isDisabled }>
 			<PropKeyProvider bind={ bind }>{ children }</PropKeyProvider>
 		</PropProvider>
 	);
 };
+
+function getDisableState( propType: PropType, elementValues: PropValue ): boolean | undefined {
+	const disablingDependencies = propType.dependencies?.filter( ( { effect } ) => effect === 'disable' ) || [];
+
+	if ( ! disablingDependencies.length ) {
+		return false;
+	}
+
+	if ( disablingDependencies.length > 1 ) {
+		throw new Error( 'Multiple disabling dependencies are not supported.' );
+	}
+
+	return shouldApplyEffect( disablingDependencies[ 0 ], elementValues );
+}
+
+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,26 @@ 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 );
+export const StylesField = ( { bind, placeholder, propDisplayName, children }: StylesFieldProps ) => {
+	const { value, setValue, canEdit } = useStylesField( bind, {
+		history: { propDisplayName },
+	} );
+
+	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 ] );
 	};
@@ -41,7 +51,7 @@ export const StylesField = ( { bind, placeholder, children }: StylesFieldProps )
 				value={ values }
 				setValue={ setValues }
 				placeholder={ placeholderValues }
-				disabled={ ! canEdit }
+				isDisabled={ () => ! canEdit }
 			>
 				<PropKeyProvider bind={ bind }>{ children }</PropKeyProvider>
 			</PropProvider>

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/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 };