@elementor/editor-editing-panel 1.46.0 → 1.48.0

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

@@ -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/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/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>
-);