@elementor/editor-components 4.0.0-682 → 4.0.0-beta5

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@elementor/editor-components",
   "description": "Elementor editor components",
-  "version": "4.0.0-682",
+  "version": "4.0.0-beta5",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -40,31 +40,31 @@
     "dev": "tsup --config=../../tsup.dev.ts"
   },
   "dependencies": {
-    "@elementor/editor": "4.0.0-682",
-    "@elementor/editor-canvas": "4.0.0-682",
-    "@elementor/editor-controls": "4.0.0-682",
-    "@elementor/editor-documents": "4.0.0-682",
-    "@elementor/editor-editing-panel": "4.0.0-682",
-    "@elementor/editor-elements": "4.0.0-682",
-    "@elementor/editor-elements-panel": "4.0.0-682",
-    "@elementor/editor-mcp": "4.0.0-682",
-    "@elementor/editor-templates": "4.0.0-682",
-    "@elementor/editor-panels": "4.0.0-682",
-    "@elementor/editor-props": "4.0.0-682",
-    "@elementor/editor-styles-repository": "4.0.0-682",
-    "@elementor/editor-ui": "4.0.0-682",
-    "@elementor/editor-v1-adapters": "4.0.0-682",
-    "@elementor/http-client": "4.0.0-682",
+    "@elementor/editor": "4.0.0-beta5",
+    "@elementor/editor-canvas": "4.0.0-beta5",
+    "@elementor/editor-controls": "4.0.0-beta5",
+    "@elementor/editor-documents": "4.0.0-beta5",
+    "@elementor/editor-editing-panel": "4.0.0-beta5",
+    "@elementor/editor-elements": "4.0.0-beta5",
+    "@elementor/editor-elements-panel": "4.0.0-beta5",
+    "@elementor/editor-mcp": "4.0.0-beta5",
+    "@elementor/editor-templates": "4.0.0-beta5",
+    "@elementor/editor-panels": "4.0.0-beta5",
+    "@elementor/editor-props": "4.0.0-beta5",
+    "@elementor/editor-styles-repository": "4.0.0-beta5",
+    "@elementor/editor-ui": "4.0.0-beta5",
+    "@elementor/editor-v1-adapters": "4.0.0-beta5",
+    "@elementor/http-client": "4.0.0-beta5",
     "@elementor/icons": "^1.68.0",
-    "@elementor/events": "4.0.0-682",
-    "@elementor/query": "4.0.0-682",
-    "@elementor/schema": "4.0.0-682",
-    "@elementor/store": "4.0.0-682",
+    "@elementor/events": "4.0.0-beta5",
+    "@elementor/query": "4.0.0-beta5",
+    "@elementor/schema": "4.0.0-beta5",
+    "@elementor/store": "4.0.0-beta5",
     "@elementor/ui": "1.36.17",
-    "@elementor/utils": "4.0.0-682",
+    "@elementor/utils": "4.0.0-beta5",
     "@wordpress/i18n": "^5.13.0",
-    "@elementor/editor-notifications": "4.0.0-682",
-    "@elementor/editor-current-user": "4.0.0-682"
+    "@elementor/editor-notifications": "4.0.0-beta5",
+    "@elementor/editor-current-user": "4.0.0-beta5"
   },
   "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/components/components-tab/components-list.tsx

@@ -1,17 +1,18 @@
 import * as React from 'react';
 import { ComponentsIcon, CrownFilledIcon } from '@elementor/icons';
 import { Box, Button, Divider, Link, List, Stack, Typography } from '@elementor/ui';
-import { hasProInstalled } from '@elementor/utils';
 import { __ } from '@wordpress/i18n';
 
 import { useComponents } from '../../hooks/use-components';
 import { useComponentsPermissions } from '../../hooks/use-components-permissions';
+import { isProComponentsSupported, isProOutdatedForComponents } from '../../utils/is-pro-components-supported';
 import { ComponentItem } from './components-item';
 import { LoadingComponents } from './loading-components';
 import { useSearch } from './search-provider';
 
 const LEARN_MORE_URL = 'http://go.elementor.com/components-guide-article';
 const UPGRADE_URL = 'https://go.elementor.com/go-pro-components/';
+const UPDATE_PLUGINS_URL = '/wp-admin/plugins.php';
 
 // Override legacy panel CSS reset that sets h1-h6 to font-size:100% and font-weight:normal.
 // See: assets/dev/scss/editor/panel/_reset.scss (applied via :where() selector in panel.scss).
@@ -34,7 +35,11 @@ export function ComponentsList() {
 			return <EmptySearchResult />;
 		}
 
-		return hasProInstalled() ? <EmptyState /> : <ProUpgradeEmptyState />;
+		if ( isProOutdatedForComponents() ) {
+			return <ProOutdatedEmptyState />;
+		}
+
+		return isProComponentsSupported() ? <EmptyState /> : <ProUpgradeEmptyState />;
 	}
 
 	return (
@@ -83,6 +88,46 @@ const ProUpgradeEmptyState = () => {
 	);
 };
 
+const ProOutdatedEmptyState = () => {
+	return (
+		<Stack
+			alignItems="center"
+			justifyContent="start"
+			height="100%"
+			sx={ { px: 2, py: 4, maxWidth: 268, m: 'auto' } }
+			gap={ 2 }
+			overflow="hidden"
+		>
+			<Stack alignItems="center" gap={ 1 }>
+				<ComponentsIcon fontSize="large" sx={ { color: 'text.secondary' } } />
+
+				<Typography align="center" variant="subtitle2" color="text.secondary" sx={ SUBTITLE_OVERRIDE_SX }>
+					{ __( 'Create Reusable Components', 'elementor' ) }
+				</Typography>
+
+				<Typography align="center" variant="caption" color="secondary">
+					{ __( 'Create design elements that sync across your entire site.', 'elementor' ) }
+				</Typography>
+
+				<Typography align="center" variant="caption" color="secondary" sx={ { mt: 1 } }>
+					{ __( 'To create components, update Elementor Pro to the latest version.', 'elementor' ) }
+				</Typography>
+			</Stack>
+
+			<Button
+				variant="text"
+				color="info"
+				size="small"
+				href={ UPDATE_PLUGINS_URL }
+				target="_blank"
+				rel="noopener noreferrer"
+			>
+				{ __( 'Update Elementor Pro', 'elementor' ) }
+			</Button>
+		</Stack>
+	);
+};
+
 const EmptyState = () => {
 	const { canCreate } = useComponentsPermissions();
 

package/src/components/components-tab/components-pro-notification.tsx

@@ -3,7 +3,7 @@ import { __ } from '@wordpress/i18n';
 
 import { ComponentsUpgradeAlert } from '../components-upgrade-alert';
 
-const UPGRADE_URL = 'https://go.elementor.com/go-pro-components-create/';
+export const UPGRADE_URL = 'https://go.elementor.com/go-pro-components-exist-footer/';
 
 export function ComponentsProNotification() {
 	return (

package/src/components/components-tab/components-update-notification.tsx

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import { __ } from '@wordpress/i18n';
+
+import { ComponentsUpdateAlert } from '../components-update-alert';
+
+export function ComponentsUpdateNotification() {
+	return (
+		<ComponentsUpdateAlert
+			title={ __( 'Create new Components', 'elementor' ) }
+			description={ __( 'To create new components, update Elementor Pro to the latest version.', 'elementor' ) }
+		/>
+	);
+}

package/src/components/components-tab/components.tsx

@@ -2,12 +2,13 @@ import * as React from 'react';
 import { useLayoutEffect } from 'react';
 import { ThemeProvider } from '@elementor/editor-ui';
 import { Stack } from '@elementor/ui';
-import { hasProInstalled } from '@elementor/utils';
 
 import { useComponents } from '../../hooks/use-components';
+import { isProComponentsSupported, isProOutdatedForComponents } from '../../utils/is-pro-components-supported';
 import { ComponentSearch } from './component-search';
 import { ComponentsList } from './components-list';
 import { ComponentsProNotification } from './components-pro-notification';
+import { ComponentsUpdateNotification } from './components-update-notification';
 import { SearchProvider } from './search-provider';
 
 const FULL_HEIGHT_STYLE_ID = 'components-full-height-panel';
@@ -54,8 +55,8 @@ const useFullHeightPanel = () => {
 const ComponentsContent = () => {
 	const { components, isLoading } = useComponents();
 	const hasComponents = ! isLoading && components.length > 0;
-	const hasPro = hasProInstalled();
-	const showProNotification = ! hasPro && hasComponents;
+	const showProNotification = ! isProComponentsSupported() && hasComponents;
+	const isOutdated = isProOutdatedForComponents();
 
 	useFullHeightPanel();
 
@@ -63,7 +64,7 @@ const ComponentsContent = () => {
 		<Stack justifyContent="space-between" sx={ { flex: 1, minHeight: 0 } }>
 			{ hasComponents && <ComponentSearch /> }
 			<ComponentsList />
-			{ showProNotification && <ComponentsProNotification /> }
+			{ showProNotification && ( isOutdated ? <ComponentsUpdateNotification /> : <ComponentsProNotification /> ) }
 		</Stack>
 	);
 };

package/src/components/components-update-alert.tsx

@@ -0,0 +1,40 @@
+import * as React from 'react';
+import { InfoCircleFilledIcon } from '@elementor/icons';
+import { Alert, AlertAction, AlertTitle, Box, Typography } from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+
+const UPDATE_PLUGINS_URL = '/wp-admin/plugins.php';
+
+interface ComponentsUpdateAlertProps {
+	title: string;
+	description: string;
+}
+
+export function ComponentsUpdateAlert( { title, description }: ComponentsUpdateAlertProps ) {
+	return (
+		<Box sx={ { mt: 'auto', position: 'sticky', bottom: 0 } }>
+			<Alert
+				variant="standard"
+				color="info"
+				icon={ <InfoCircleFilledIcon fontSize="tiny" /> }
+				role="status"
+				size="small"
+				action={
+					<AlertAction
+						variant="contained"
+						color="info"
+						href={ UPDATE_PLUGINS_URL }
+						target="_blank"
+						rel="noopener noreferrer"
+					>
+						{ __( 'Upgrade Now', 'elementor' ) }
+					</AlertAction>
+				}
+				sx={ { m: 2, mt: 1 } }
+			>
+				<AlertTitle>{ title }</AlertTitle>
+				<Typography variant="caption">{ description }</Typography>
+			</Alert>
+		</Box>
+	);
+}

package/src/components/instance-editing-panel/instance-editing-panel.tsx

@@ -1,11 +1,12 @@
 import * as React from 'react';
 import { PencilIcon } from '@elementor/icons';
 import { Box, Stack } from '@elementor/ui';
-import { hasProInstalled } from '@elementor/utils';
 import { __ } from '@wordpress/i18n';
 
 import { useComponentsPermissions } from '../../hooks/use-components-permissions';
 import { ComponentInstanceProvider } from '../../provider/component-instance-context';
+import { isProComponentsSupported, isProOutdatedForComponents } from '../../utils/is-pro-components-supported';
+import { ComponentsUpdateAlert } from '../components-update-alert';
 import { ComponentsUpgradeAlert } from '../components-upgrade-alert';
 import { DetachAction } from './detach-action';
 import { EmptyState } from './empty-state';
@@ -13,12 +14,11 @@ import { InstancePanelBody } from './instance-panel-body';
 import { EditComponentAction, InstancePanelHeader } from './instance-panel-header';
 import { useInstancePanelData } from './use-instance-panel-data';
 
-const EDIT_UPGRADE_URL = 'https://go.elementor.com/go-pro-components-edit/';
+const EDIT_UPGRADE_URL = 'https://go.elementor.com/go-pro-components-Instance-edit-footer/';
 
 export function InstanceEditingPanel() {
 	const { canEdit } = useComponentsPermissions();
 	const data = useInstancePanelData();
-	const hasPro = hasProInstalled();
 
 	if ( ! data ) {
 		return null;
@@ -51,13 +51,22 @@ export function InstanceEditingPanel() {
 					componentInstanceId={ componentInstanceId }
 				/>
 			</ComponentInstanceProvider>
-			{ ! hasPro && (
-				<ComponentsUpgradeAlert
-					title={ __( 'Edit components', 'elementor' ) }
-					description={ __( 'Editing components requires an active Pro subscription.', 'elementor' ) }
-					upgradeUrl={ EDIT_UPGRADE_URL }
-				/>
-			) }
+			{ ! isProComponentsSupported() &&
+				( isProOutdatedForComponents() ? (
+					<ComponentsUpdateAlert
+						title={ __( 'Edit Component', 'elementor' ) }
+						description={ __(
+							'To edit components, update Elementor Pro to the latest version.',
+							'elementor'
+						) }
+					/>
+				) : (
+					<ComponentsUpgradeAlert
+						title={ __( 'Edit components', 'elementor' ) }
+						description={ __( 'Editing components requires an active Pro subscription.', 'elementor' ) }
+						upgradeUrl={ EDIT_UPGRADE_URL }
+					/>
+				) ) }
 		</Box>
 	);
 }

package/src/components/instance-editing-panel/override-prop-control.tsx

@@ -10,6 +10,7 @@ import {
 	BaseControl,
 	controlsRegistry,
 	type ControlType,
+	ControlTypeContainer,
 	createTopLevelObjectType,
 	ElementProvider,
 	isDynamicPropValue,
@@ -18,7 +19,7 @@ import {
 } from '@elementor/editor-editing-panel';
 import { type Control, getElementSettings, getElementType } from '@elementor/editor-elements';
 import { type AnyTransformable, type PropType, type PropValue } from '@elementor/editor-props';
-import { Stack } from '@elementor/ui';
+import { Box } from '@elementor/ui';
 
 import { useControlsByWidgetType } from '../../hooks/use-controls-by-widget-type';
 import {
@@ -50,6 +51,7 @@ import { resolveOverridePropValue } from '../../utils/resolve-override-prop-valu
 import { ControlLabel } from '../control-label';
 import { OverrideControlInnerElementNotFoundError } from '../errors';
 import { useResolvedOriginValue } from './use-resolved-origin-value';
+import { correctExposedEmptyOverride } from './utils/correct-exposed-empty-override';
 
 type Props = {
 	overrideKey: string;
@@ -123,12 +125,14 @@ function OverrideControl( { overridableProp }: InternalProps ) {
 			return;
 		}
 
-		const newPropValue = getTempNewValueForDynamicProp(
+		let newPropValue = getTempNewValueForDynamicProp(
 			propType,
 			propValue,
 			newValue[ overridableProp.overrideKey ]
 		);
 
+		newPropValue = correctExposedEmptyOverride( newPropValue, matchingOverride );
+
 		const newOverrideValue = createOverrideValue( {
 			matchingOverride,
 			overrideKey: overridableProp.overrideKey,
@@ -214,10 +218,14 @@ function OverrideControl( { overridableProp }: InternalProps ) {
 					>
 						<PropKeyProvider bind={ overridableProp.overrideKey }>
 							<ControlReplacementsProvider replacements={ controlReplacements }>
-								<Stack direction="column" gap={ 1 } mb={ 1.5 }>
-									{ layout !== 'custom' && <ControlLabel>{ overridableProp.label }</ControlLabel> }
-									<OriginalControl control={ control } controlProps={ controlProps } />
-								</Stack>
+								<Box mb={ 1.5 }>
+									<ControlTypeContainer layout={ layout }>
+										{ layout !== 'custom' && (
+											<ControlLabel>{ overridableProp.label }</ControlLabel>
+										) }
+										<OriginalControl control={ control } controlProps={ controlProps } />
+									</ControlTypeContainer>
+								</Box>
 							</ControlReplacementsProvider>
 						</PropKeyProvider>
 					</PropProvider>

package/src/components/instance-editing-panel/utils/correct-exposed-empty-override.ts

@@ -0,0 +1,28 @@
+import { type ComponentInstanceOverrideProp } from '../../../prop-types/component-instance-override-prop-type';
+import { type ComponentInstanceOverride } from '../../../prop-types/component-instance-overrides-prop-type';
+import {
+	type ComponentOverridableProp,
+	componentOverridablePropTypeUtil,
+} from '../../../prop-types/component-overridable-prop-type';
+
+type OverrideValue = ComponentInstanceOverrideProp | ComponentOverridableProp;
+
+// The control receives the resolved value, so when exposing a prop that was never overridden,
+// origin_value will be the resolved value instead of null.
+// So here, we correct this by resetting origin_value to null.
+export function correctExposedEmptyOverride(
+	newPropValue: OverrideValue,
+	matchingOverride: ComponentInstanceOverride | null
+): OverrideValue {
+	const newOverridableValue = componentOverridablePropTypeUtil.extract( newPropValue );
+	const isExposingEmptyOverride = newOverridableValue && matchingOverride === null;
+
+	if ( ! isExposingEmptyOverride ) {
+		return newPropValue;
+	}
+
+	return componentOverridablePropTypeUtil.create( {
+		override_key: newOverridableValue.override_key,
+		origin_value: null,
+	} );
+}

package/src/create-component-type.ts

@@ -25,6 +25,7 @@ import { type ComponentsSlice, selectComponentByUid } from './store/store';
 import { type ComponentRenderContext, type ExtendedWindow } from './types';
 import { detachComponentInstance } from './utils/detach-component-instance';
 import { formatComponentElementsId } from './utils/format-component-elements-id';
+import { isProComponentsSupported, isProOutdatedForComponents } from './utils/is-pro-components-supported';
 import { switchToComponent } from './utils/switch-to-component';
 import { trackComponentEvent } from './utils/tracking';
 
@@ -53,21 +54,30 @@ type ComponentModelInstance = BackboneModel< ComponentModel > & {
 
 export const COMPONENT_WIDGET_TYPE = 'e-component';
 
-const EDIT_COMPONENT_UPGRADE_URL = 'https://go.elementor.com/go-pro-components-edit/';
+const EDIT_COMPONENT_DB_CLICK_UPGRADE_URL =
+	'https://go.elementor.com/go-pro-components-Instance-edit-canvas-double-click/';
+const EDIT_COMPONENT_CONTEXT_MENU_UPGRADE_URL =
+	'https://go.elementor.com/go-pro-components-Instance-edit-context-menu/';
+
+const UPDATE_PLUGINS_URL = '/wp-admin/plugins.php';
 
 const COMPONENT_EDIT_UPGRADE_NOTIFICATION_ID = 'component-edit-upgrade';
+const COMPONENT_EDIT_UPDATE_NOTIFICATION_ID = 'component-edit-update';
+
+const COMPONENT_EDIT_UPGRADE_AUTO_HIDE_DURATION = 2000;
 
 function notifyComponentEditUpgrade() {
 	notify( {
 		type: 'promotion',
 		id: COMPONENT_EDIT_UPGRADE_NOTIFICATION_ID,
 		message: __( 'Editing components requires an active Pro subscription.', 'elementor' ),
+		autoHideDuration: COMPONENT_EDIT_UPGRADE_AUTO_HIDE_DURATION,
 		additionalActionProps: [
 			{
 				size: 'small',
 				variant: 'contained',
 				color: 'promotion',
-				href: EDIT_COMPONENT_UPGRADE_URL,
+				href: EDIT_COMPONENT_DB_CLICK_UPGRADE_URL,
 				target: '_blank',
 				children: __( 'Upgrade Now', 'elementor' ),
 			},
@@ -75,6 +85,24 @@ function notifyComponentEditUpgrade() {
 	} );
 }
 
+function notifyComponentEditUpdate() {
+	notify( {
+		type: 'info',
+		id: COMPONENT_EDIT_UPDATE_NOTIFICATION_ID,
+		message: __( 'To edit components, update Elementor Pro to the latest version.', 'elementor' ),
+		additionalActionProps: [
+			{
+				size: 'small',
+				variant: 'contained',
+				color: 'info',
+				href: UPDATE_PLUGINS_URL,
+				target: '_blank',
+				children: __( 'Update Now', 'elementor' ),
+			},
+		],
+	} );
+}
+
 const updateGroups = ( groups: ContextMenuGroup[], config: ContextMenuGroupConfig ): ContextMenuGroup[] => {
 	const disableMap = new Map( Object.entries( config.disable ?? {} ) );
 	const addMap = new Map( Object.entries( config.add ?? {} ) );
@@ -235,16 +263,18 @@ function createComponentView( options: ComponentTypeOptions ): typeof ElementVie
 		_getContextMenuConfig() {
 			const isAdministrator = isUserAdministrator();
 			const hasPro = hasProInstalled();
+			const isOutdated = isProOutdatedForComponents();
+			const showPromoBadge = ! hasPro && ! isOutdated;
 
 			const badgeClass = 'elementor-context-menu-list__item__shortcut__promotion-badge';
-			const proBadge = `<a href="${ EDIT_COMPONENT_UPGRADE_URL }" target="_blank" onclick="event.stopPropagation()" class="${ badgeClass }"><i class="eicon-upgrade-crown"></i></a>`;
+			const proBadge = `<a href="${ EDIT_COMPONENT_CONTEXT_MENU_UPGRADE_URL }" target="_blank" onclick="event.stopPropagation()" class="${ badgeClass }"><i class="eicon-upgrade-crown"></i></a>`;
 
 			const editComponentAction: ContextMenuAction = {
 				name: 'edit component',
 				icon: 'eicon-edit',
 				title: () => __( 'Edit Component', 'elementor' ),
-				...( ! hasPro && { shortcut: proBadge, hasShortcutAction: true } ),
-				isEnabled: () => hasPro,
+				...( showPromoBadge && { shortcut: proBadge, hasShortcutAction: true } ),
+				isEnabled: () => isProComponentsSupported() || isOutdated,
 				callback: ( _: unknown, eventData: ContextMenuEventData ) => this.editComponent( eventData ),
 			};
 
@@ -286,9 +316,12 @@ function createComponentView( options: ComponentTypeOptions ): typeof ElementVie
 		}
 
 		editComponent( { trigger, location, secondaryLocation }: ContextMenuEventData ) {
-			const hasPro = hasProInstalled();
+			if ( isProOutdatedForComponents() ) {
+				notifyComponentEditUpdate();
+				return;
+			}
 
-			if ( ! hasPro || this.isComponentCurrentlyEdited() ) {
+			if ( ! isProComponentsSupported() || this.isComponentCurrentlyEdited() ) {
 				return;
 			}
 
@@ -341,6 +374,11 @@ function createComponentView( options: ComponentTypeOptions ): typeof ElementVie
 				return;
 			}
 
+			if ( isProOutdatedForComponents() ) {
+				notifyComponentEditUpdate();
+				return;
+			}
+
 			if ( ! hasProInstalled() ) {
 				notifyComponentEditUpgrade();
 				return;

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/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/sync/publish-draft-components-in-page-before-save.ts

@@ -9,7 +9,7 @@ import { type DocumentSaveStatus } from '../types';
 import { getComponentDocuments } from '../utils/get-component-documents';
 
 const INSUFFICIENT_PERMISSIONS_ERROR_CODE = 'insufficient_permissions';
-const PUBLISH_UPGRADE_URL = 'https://go.elementor.com/go-pro-components-edit/';
+const PUBLISH_UPGRADE_URL = 'https://go.elementor.com/go-pro-components-Instance-draft-failure/';
 const PUBLISH_UPGRADE_NOTIFICATION_ID = 'component-publish-upgrade';
 
 type Options = {

package/src/utils/is-pro-components-supported.ts

@@ -0,0 +1,11 @@
+import { hasProInstalled, isProAtLeast } from '@elementor/utils';
+
+const MIN_PRO_VERSION_FOR_COMPONENTS = '4.0';
+
+export function isProComponentsSupported(): boolean {
+	return hasProInstalled() && isProAtLeast( MIN_PRO_VERSION_FOR_COMPONENTS );
+}
+
+export function isProOutdatedForComponents(): boolean {
+	return hasProInstalled() && ! isProAtLeast( MIN_PRO_VERSION_FOR_COMPONENTS );
+}