@elementor/editor-components 4.1.0-693 → 4.1.0-695

package/package.json

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

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/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/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 );
+}