@elementor/editor-editing-panel 3.32.0-69 → 3.32.0-71

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elementor/editor-editing-panel",
-  "version": "3.32.0-69",
+  "version": "3.32.0-71",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -39,26 +39,26 @@
     "dev": "tsup --config=../../tsup.dev.ts"
   },
   "dependencies": {
-    "@elementor/editor": "3.32.0-69",
-    "@elementor/editor-canvas": "3.32.0-69",
-    "@elementor/editor-controls": "3.32.0-69",
-    "@elementor/editor-documents": "3.32.0-69",
-    "@elementor/editor-elements": "3.32.0-69",
-    "@elementor/editor-panels": "3.32.0-69",
-    "@elementor/editor-props": "3.32.0-69",
-    "@elementor/editor-responsive": "3.32.0-69",
-    "@elementor/editor-styles": "3.32.0-69",
-    "@elementor/editor-styles-repository": "3.32.0-69",
-    "@elementor/editor-ui": "3.32.0-69",
-    "@elementor/editor-v1-adapters": "3.32.0-69",
+    "@elementor/editor": "3.32.0-71",
+    "@elementor/editor-canvas": "3.32.0-71",
+    "@elementor/editor-controls": "3.32.0-71",
+    "@elementor/editor-documents": "3.32.0-71",
+    "@elementor/editor-elements": "3.32.0-71",
+    "@elementor/editor-panels": "3.32.0-71",
+    "@elementor/editor-props": "3.32.0-71",
+    "@elementor/editor-responsive": "3.32.0-71",
+    "@elementor/editor-styles": "3.32.0-71",
+    "@elementor/editor-styles-repository": "3.32.0-71",
+    "@elementor/editor-ui": "3.32.0-71",
+    "@elementor/editor-v1-adapters": "3.32.0-71",
     "@elementor/icons": "1.46.0",
-    "@elementor/locations": "3.32.0-69",
-    "@elementor/menus": "3.32.0-69",
-    "@elementor/schema": "3.32.0-69",
-    "@elementor/session": "3.32.0-69",
+    "@elementor/locations": "3.32.0-71",
+    "@elementor/menus": "3.32.0-71",
+    "@elementor/schema": "3.32.0-71",
+    "@elementor/session": "3.32.0-71",
     "@elementor/ui": "1.36.8",
-    "@elementor/utils": "3.32.0-69",
-    "@elementor/wp-media": "3.32.0-69",
+    "@elementor/utils": "3.32.0-71",
+    "@elementor/wp-media": "3.32.0-71",
     "@wordpress/i18n": "^5.13.0"
   },
   "peerDependencies": {

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

@@ -40,7 +40,7 @@ export const EffectsSection = () => {
 			<StylesField bind="transition" propDisplayName={ TRANSITIONS_LABEL }>
 				<TransitionRepeaterControl
 					currentStyleState={ meta.state }
-					recentlyUsedList={ getRecentlyUsedList( element?.id ) }
+					recentlyUsedListGetter={ () => getRecentlyUsedList( element?.id ?? '' ) }
 				/>
 			</StylesField>
 			<PanelDivider />

package/src/utils/get-recently-used-styles.ts

@@ -1,34 +1,32 @@
+import { createPropsResolver, styleTransformersRegistry } from '@elementor/editor-canvas';
 import { getElementStyles } from '@elementor/editor-elements';
-import { type Props } from '@elementor/editor-props';
+import { getStylesSchema } from '@elementor/editor-styles';
 
-const quickTransform = ( props: Props ) => {
-	return Object.entries( props ).map( ( [ key, value ] ) => {
-		if ( value && typeof value === 'object' && '$$type' in value ) {
-			if ( value?.$$type === 'dimensions' ) {
-				return Object.keys( value?.value ?? {} ).map( ( nestedKey ) => `${ key }-${ nestedKey }` );
-			}
-			// If not fully reset through element style reset, an array type property name is still in the 'changed' list with an empty array,
-			// so we need to filter out these properties. https://elementor.atlassian.net/browse/ED-20434
-			if ( Array.isArray( value?.value ) && ! value?.value?.length ) {
-				return [];
-			}
-		}
-		return [ key ];
-	} );
-};
-
-export const getRecentlyUsedList = ( elementId: string | undefined ) => {
+export const getRecentlyUsedList = async ( elementId: string ) => {
 	if ( ! elementId ) {
 		return [];
 	}
+	const resolver = createPropsResolver( {
+		transformers: styleTransformersRegistry,
+		schema: getStylesSchema(),
+	} );
 
-	const styles = getElementStyles( elementId );
+	const styles = getElementStyles( elementId ) ?? {};
 	const styleKeys = Object.keys( styles ?? {} );
 	const variants = styleKeys.map( ( key ) => styles?.[ key ]?.variants ?? [] );
-	const propList = variants
-		.flat()
-		.filter( ( variant ) => variant !== undefined )
-		.map( ( variant ) => variant.props );
-	const propSet = new Set( propList.map( quickTransform ).flat( 2 ) );
+
+	const resolved = await Promise.all(
+		variants.flat().map( async ( variant ) => {
+			const result = await resolver( {
+				props: variant.props ?? {},
+				schema: getStylesSchema(),
+			} );
+			return Object.entries( result )
+				.filter( ( [ , value ] ) => value !== null )
+				.map( ( [ key ] ) => key );
+		} )
+	);
+
+	const propSet = new Set( resolved.flat() );
 	return Array.from( propSet );
 };