@elementor/editor-editing-panel 1.47.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/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();