@elementor/editor-components 4.0.1 → 4.0.3

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@elementor/editor-components",
   "description": "Elementor editor components",
-  "version": "4.0.1",
+  "version": "4.0.3",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -40,31 +40,31 @@
     "dev": "tsup --config=../../tsup.dev.ts"
   },
   "dependencies": {
-    "@elementor/editor": "4.0.1",
-    "@elementor/editor-canvas": "4.0.1",
-    "@elementor/editor-controls": "4.0.1",
-    "@elementor/editor-documents": "4.0.1",
-    "@elementor/editor-editing-panel": "4.0.1",
-    "@elementor/editor-elements": "4.0.1",
-    "@elementor/editor-elements-panel": "4.0.1",
-    "@elementor/editor-mcp": "4.0.1",
-    "@elementor/editor-templates": "4.0.1",
-    "@elementor/editor-panels": "4.0.1",
-    "@elementor/editor-props": "4.0.1",
-    "@elementor/editor-styles-repository": "4.0.1",
-    "@elementor/editor-ui": "4.0.1",
-    "@elementor/editor-v1-adapters": "4.0.1",
-    "@elementor/http-client": "4.0.1",
+    "@elementor/editor": "4.0.3",
+    "@elementor/editor-canvas": "4.0.3",
+    "@elementor/editor-controls": "4.0.3",
+    "@elementor/editor-documents": "4.0.3",
+    "@elementor/editor-editing-panel": "4.0.3",
+    "@elementor/editor-elements": "4.0.3",
+    "@elementor/editor-elements-panel": "4.0.3",
+    "@elementor/editor-mcp": "4.0.3",
+    "@elementor/editor-templates": "4.0.3",
+    "@elementor/editor-panels": "4.0.3",
+    "@elementor/editor-props": "4.0.3",
+    "@elementor/editor-styles-repository": "4.0.3",
+    "@elementor/editor-ui": "4.0.3",
+    "@elementor/editor-v1-adapters": "4.0.3",
+    "@elementor/http-client": "4.0.3",
     "@elementor/icons": "^1.68.0",
-    "@elementor/events": "4.0.1",
-    "@elementor/query": "4.0.1",
-    "@elementor/schema": "4.0.1",
-    "@elementor/store": "4.0.1",
+    "@elementor/events": "4.0.3",
+    "@elementor/query": "4.0.3",
+    "@elementor/schema": "4.0.3",
+    "@elementor/store": "4.0.3",
     "@elementor/ui": "1.36.17",
-    "@elementor/utils": "4.0.1",
+    "@elementor/utils": "4.0.3",
     "@wordpress/i18n": "^5.13.0",
-    "@elementor/editor-notifications": "4.0.1",
-    "@elementor/editor-current-user": "4.0.1"
+    "@elementor/editor-notifications": "4.0.3",
+    "@elementor/editor-current-user": "4.0.3"
   },
   "peerDependencies": {
     "react": "^18.3.1",

package/src/api.ts

@@ -92,14 +92,15 @@ export const apiClient = {
 				componentId,
 			} )
 			.then( ( res ) => res.data ),
-	getOverridableProps: async ( componentId: number ) =>
+	getOverridableProps: async ( componentIds: number[] ) =>
 		await httpService()
-			.get< HttpResponse< OverridableProps > >( `${ BASE_URL }/overridable-props`, {
-				params: {
-					componentId: componentId.toString(),
-				},
-			} )
-			.then( ( res ) => res.data.data ),
+			.get< HttpResponse< Record< number, OverridableProps | null >, { errors: Record< number, string > } > >(
+				`${ BASE_URL }/overridable-props`,
+				{
+					params: { 'componentIds[]': componentIds },
+				}
+			)
+			.then( ( res ) => res.data ),
 	updateArchivedComponents: async ( componentIds: number[], status: DocumentSaveStatus ) =>
 		await httpService()
 			.post< { data: { failedIds: number[]; successIds: number[]; success: boolean } } >(

package/src/store/actions/load-components-overridable-props.ts

@@ -3,31 +3,14 @@ import { __dispatch as dispatch, __getState as getState } from '@elementor/store
 import { apiClient } from '../../api';
 import { selectIsOverridablePropsLoaded, slice } from '../store';
 
-export function loadComponentsOverridableProps( componentIds: number[] ) {
-	if ( ! componentIds.length ) {
-		return;
-	}
-
-	return Promise.all( componentIds.map( loadComponentOverrides ) );
-}
+export async function loadComponentsOverridableProps( componentIds: number[] ) {
+	const unloadedIds = componentIds.filter( ( id ) => ! selectIsOverridablePropsLoaded( getState(), id ) );
 
-async function loadComponentOverrides( componentId: number ) {
-	const isOverridablePropsLoaded = selectIsOverridablePropsLoaded( getState(), componentId );
-
-	if ( isOverridablePropsLoaded ) {
+	if ( ! unloadedIds.length ) {
 		return;
 	}
 
-	const overridableProps = await apiClient.getOverridableProps( componentId );
-
-	if ( ! overridableProps ) {
-		return;
-	}
+	const { data } = await apiClient.getOverridableProps( unloadedIds );
 
-	dispatch(
-		slice.actions.setOverridableProps( {
-			componentId,
-			overridableProps,
-		} )
-	);
+	dispatch( slice.actions.loadOverridableProps( data ) );
 }

package/src/store/components-styles-provider.ts

@@ -1,3 +1,4 @@
+import { getCurrentDocumentId } from '@elementor/editor-elements';
 import { createStylesProvider } from '@elementor/editor-styles-repository';
 import { __getState as getState, __subscribeWithSelector as subscribeWithSelector } from '@elementor/store';
 
@@ -15,7 +16,8 @@ export const componentsStylesProvider = createStylesProvider( {
 		),
 	actions: {
 		all: () => {
-			return selectFlatStyles( getState() );
+			const currentDocumentId = getCurrentDocumentId();
+			return selectFlatStyles( getState(), currentDocumentId );
 		},
 		get: ( id ) => {
 			return selectFlatStyles( getState() ).find( ( style ) => style.id === id ) ?? null;

package/src/store/extensible-slice.ts

@@ -105,6 +105,25 @@ const baseSlice = createSlice( {
 
 			component.overridableProps = payload.overridableProps;
 		},
+		loadOverridableProps: (
+			state,
+			{ payload }: PayloadAction< Record< ComponentId, OverridableProps | null > >
+		) => {
+			const componentIds = Object.keys( payload );
+
+			componentIds.forEach( ( id ) => {
+				const componentId = Number( id );
+				const overridableProps = payload[ componentId ];
+
+				const component = state.data.find( ( comp ) => comp.id === componentId );
+
+				if ( ! component || ! overridableProps ) {
+					return;
+				}
+
+				component.overridableProps = overridableProps;
+			} );
+		},
 		rename: ( state, { payload }: PayloadAction< { componentUid: string; name: string } > ) => {
 			const component = state.data.find( ( comp ) => comp.uid === payload.componentUid );
 

package/src/store/store.ts

@@ -47,7 +47,20 @@ export const selectUnpublishedComponents = createSelector(
 export const selectLoadIsPending = createSelector( selectLoadStatus, ( status ) => status === 'pending' );
 export const selectLoadIsError = createSelector( selectLoadStatus, ( status ) => status === 'error' );
 export const selectStyles = ( state: ComponentsSlice ) => state[ SLICE_NAME ].styles ?? {};
-export const selectFlatStyles = createSelector( selectStylesDefinitions, ( data ) => Object.values( data ).flat() );
+export const selectFlatStyles = createSelector(
+	selectStylesDefinitions,
+	( _state: ComponentsSlice, excludeComponentId: ComponentId | null = null ) => excludeComponentId,
+	( data, excludeComponentId ) => {
+		if ( excludeComponentId === null ) {
+			return Object.values( data ).flat();
+		}
+
+		return Object.entries( data )
+			.filter( ( [ id ] ) => id !== String( excludeComponentId ) )
+			.map( ( [ , styles ] ) => styles )
+			.flat();
+	}
+);
 export const selectCreatedThisSession = createSelector(
 	getCreatedThisSession,
 	( createdThisSession ) => createdThisSession