@elementor/editor-components 4.0.0-manual → 4.0.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@elementor/editor-components",
   "description": "Elementor editor components",
-  "version": "4.0.0-manual",
+  "version": "4.0.1",
   "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-manual",
-    "@elementor/editor-canvas": "4.0.0-manual",
-    "@elementor/editor-controls": "4.0.0-manual",
-    "@elementor/editor-documents": "4.0.0-manual",
-    "@elementor/editor-editing-panel": "4.0.0-manual",
-    "@elementor/editor-elements": "4.0.0-manual",
-    "@elementor/editor-elements-panel": "4.0.0-manual",
-    "@elementor/editor-mcp": "4.0.0-manual",
-    "@elementor/editor-templates": "4.0.0-manual",
-    "@elementor/editor-panels": "4.0.0-manual",
-    "@elementor/editor-props": "4.0.0-manual",
-    "@elementor/editor-styles-repository": "4.0.0-manual",
-    "@elementor/editor-ui": "4.0.0-manual",
-    "@elementor/editor-v1-adapters": "4.0.0-manual",
-    "@elementor/http-client": "4.0.0-manual",
+    "@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/icons": "^1.68.0",
-    "@elementor/events": "4.0.0-manual",
-    "@elementor/query": "4.0.0-manual",
-    "@elementor/schema": "4.0.0-manual",
-    "@elementor/store": "4.0.0-manual",
+    "@elementor/events": "4.0.1",
+    "@elementor/query": "4.0.1",
+    "@elementor/schema": "4.0.1",
+    "@elementor/store": "4.0.1",
     "@elementor/ui": "1.36.17",
-    "@elementor/utils": "4.0.0-manual",
+    "@elementor/utils": "4.0.1",
     "@wordpress/i18n": "^5.13.0",
-    "@elementor/editor-notifications": "4.0.0-manual",
-    "@elementor/editor-current-user": "4.0.0-manual"
+    "@elementor/editor-notifications": "4.0.1",
+    "@elementor/editor-current-user": "4.0.1"
   },
   "peerDependencies": {
     "react": "^18.3.1",

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

@@ -1,15 +1,18 @@
 import * as React from 'react';
-import { ComponentsIcon } from '@elementor/icons';
-import { Box, Divider, Link, List, Stack, Typography } from '@elementor/ui';
+import { ComponentsIcon, CrownFilledIcon } from '@elementor/icons';
+import { Box, Button, Divider, Link, List, Stack, Typography } from '@elementor/ui';
 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).
@@ -28,7 +31,15 @@ export function ComponentsList() {
 	const isEmpty = ! components?.length;
 
 	if ( isEmpty ) {
-		return searchValue.length ? <EmptySearchResult /> : <EmptyState />;
+		if ( searchValue.length ) {
+			return <EmptySearchResult />;
+		}
+
+		if ( isProOutdatedForComponents() ) {
+			return <ProOutdatedEmptyState />;
+		}
+
+		return isProComponentsSupported() ? <EmptyState /> : <ProUpgradeEmptyState />;
 	}
 
 	return (
@@ -40,7 +51,84 @@ export function ComponentsList() {
 	);
 }
 
-export const EmptyState = () => {
+const ProUpgradeEmptyState = () => {
+	return (
+		<Stack
+			alignItems="center"
+			justifyContent="start"
+			height="100%"
+			sx={ { px: 2, py: 4 } }
+			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" sx={ { maxWidth: 200 } }>
+					{ __( 'Create design elements that sync across your entire site.', 'elementor' ) }
+				</Typography>
+			</Stack>
+
+			<Button
+				variant="contained"
+				color="promotion"
+				size="small"
+				startIcon={ <CrownFilledIcon /> }
+				href={ UPGRADE_URL }
+				target="_blank"
+				rel="noopener noreferrer"
+			>
+				{ __( 'Upgrade now', 'elementor' ) }
+			</Button>
+		</Stack>
+	);
+};
+
+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();
 
 	return (

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

@@ -1,22 +1,16 @@
 import * as React from 'react';
-import { InfoAlert } from '@elementor/editor-ui';
-import { Box, Typography } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
+import { ComponentsUpgradeAlert } from '../components-upgrade-alert';
+
+export const UPGRADE_URL = 'https://go.elementor.com/go-pro-components-exist-footer/';
+
 export function ComponentsProNotification() {
 	return (
-		<Box sx={ { px: 2 } }>
-			<InfoAlert>
-				<Typography variant="caption" component="span">
-					<Typography variant="caption" component="span" fontWeight="bold">
-						{ __( 'Try Components for free:', 'elementor' ) }
-					</Typography>{ ' ' }
-					{ __(
-						'Soon Components will be part of the Pro subscription, but what you create now will remain on your site.',
-						'elementor'
-					) }
-				</Typography>
-			</InfoAlert>
-		</Box>
+		<ComponentsUpgradeAlert
+			title={ __( 'Create new components', 'elementor' ) }
+			description={ __( 'Creating new components requires an active Pro subscription.', 'elementor' ) }
+			upgradeUrl={ UPGRADE_URL }
+		/>
 	);
 }

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

@@ -1,22 +1,71 @@
 import * as React from 'react';
+import { useLayoutEffect } from 'react';
 import { ThemeProvider } from '@elementor/editor-ui';
+import { Stack } from '@elementor/ui';
 
 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';
+
+const FULL_HEIGHT_CSS = `
+#elementor-panel-page-elements {
+	display: flex;
+	flex-direction: column;
+	height: 100%;
+}
+
+#elementor-panel-elements {
+	display: flex;
+	flex-direction: column;
+	flex: 1;
+	min-height: 0;
+}
+
+#elementor-panel-elements-wrapper {
+	display: flex;
+	flex-direction: column;
+	flex: 1;
+	min-height: 0;
+}
+`;
+
+const useFullHeightPanel = () => {
+	useLayoutEffect( () => {
+		let style = document.getElementById( FULL_HEIGHT_STYLE_ID );
+
+		if ( ! style ) {
+			style = document.createElement( 'style' );
+			style.id = FULL_HEIGHT_STYLE_ID;
+			style.textContent = FULL_HEIGHT_CSS;
+			document.head.appendChild( style );
+		}
+
+		return () => {
+			document.getElementById( FULL_HEIGHT_STYLE_ID )?.remove();
+		};
+	}, [] );
+};
+
 const ComponentsContent = () => {
 	const { components, isLoading } = useComponents();
 	const hasComponents = ! isLoading && components.length > 0;
+	const showProNotification = ! isProComponentsSupported() && hasComponents;
+	const isOutdated = isProOutdatedForComponents();
+
+	useFullHeightPanel();
 
 	return (
-		<>
+		<Stack justifyContent="space-between" sx={ { flex: 1, minHeight: 0 } }>
 			{ hasComponents && <ComponentSearch /> }
-			{ hasComponents && <ComponentsProNotification /> }
 			<ComponentsList />
-		</>
+			{ showProNotification && ( isOutdated ? <ComponentsUpdateNotification /> : <ComponentsProNotification /> ) }
+		</Stack>
 	);
 };
 

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

@@ -1,41 +1,53 @@
 import * as React from 'react';
-import { Box, ListItemButton, Skeleton, Stack } from '@elementor/ui';
+import { Box, Skeleton, Stack } from '@elementor/ui';
 
-const ROWS = Array.from( { length: 6 }, ( _, index ) => index );
+const ROWS = Array.from( { length: 3 }, ( _, index ) => index );
+
+const STAGGER_DELAY_MS = 80;
 
 export const LoadingComponents = () => {
 	return (
 		<Stack
 			aria-label="Loading components"
-			gap={ 1 }
+			gap={ 1.5 }
 			sx={ {
 				pointerEvents: 'none',
 				position: 'relative',
 				maxHeight: '300px',
 				overflow: 'hidden',
+				px: 1,
 				'&:after': {
 					position: 'absolute',
-					top: 0,
+					bottom: 0,
 					content: '""',
 					left: 0,
 					width: '100%',
-					height: '300px',
-					background: 'linear-gradient(to top, white, transparent)',
+					height: '40%',
 					pointerEvents: 'none',
+					zIndex: 1,
 				},
 			} }
 		>
 			{ ROWS.map( ( row ) => (
-				<ListItemButton
+				<Box
 					key={ row }
-					sx={ { border: 'solid 1px', borderColor: 'divider', py: 0.5, px: 1 } }
-					shape="rounded"
+					display="flex"
+					alignItems="center"
+					gap={ 1.5 }
+					sx={ {
+						py: 0.75,
+						px: 1.5,
+						opacity: 0,
+						animation: `e-loading-fade-in 0.4s ease-out ${ row * STAGGER_DELAY_MS }ms forwards`,
+						'@keyframes e-loading-fade-in': {
+							from: { opacity: 0, transform: 'translateY(4px)' },
+							to: { opacity: 1, transform: 'translateY(0)' },
+						},
+					} }
 				>
-					<Box display="flex" gap={ 1 } width="100%">
-						<Skeleton variant="text" width={ '24px' } height={ '36px' } />
-						<Skeleton variant="text" width={ '100%' } height={ '36px' } />
-					</Box>
-				</ListItemButton>
+					<Skeleton animation="wave" variant="rounded" width={ 24 } height={ 24 } />
+					<Skeleton animation="wave" variant="rounded" width="60%" height={ 14 } />
+				</Box>
 			) ) }
 		</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/components-upgrade-alert.tsx

@@ -0,0 +1,39 @@
+import * as React from 'react';
+import { CrownFilledIcon } from '@elementor/icons';
+import { Alert, AlertAction, AlertTitle, Box, Typography } from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+
+interface ComponentsUpgradeAlertProps {
+	title: string;
+	description: string;
+	upgradeUrl: string;
+}
+
+export function ComponentsUpgradeAlert( { title, description, upgradeUrl }: ComponentsUpgradeAlertProps ) {
+	return (
+		<Box sx={ { mt: 'auto', position: 'sticky', bottom: 0 } }>
+			<Alert
+				variant="standard"
+				color="promotion"
+				icon={ <CrownFilledIcon fontSize="tiny" /> }
+				role="status"
+				size="small"
+				action={
+					<AlertAction
+						variant="contained"
+						color="promotion"
+						href={ upgradeUrl }
+						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/detach-instance-confirmation-dialog.tsx

@@ -0,0 +1,50 @@
+import * as React from 'react';
+import { closeDialog, ConfirmationDialog, openDialog } from '@elementor/editor-ui';
+import { AlertTriangleFilledIcon } from '@elementor/icons';
+import { __ } from '@wordpress/i18n';
+
+type DetachInstanceConfirmationDialogProps = {
+	open: boolean;
+	onClose: () => void;
+	onConfirm: () => void;
+};
+
+export function DetachInstanceConfirmationDialog( {
+	open,
+	onClose,
+	onConfirm,
+}: DetachInstanceConfirmationDialogProps ) {
+	return (
+		<ConfirmationDialog open={ open } onClose={ onClose }>
+			<ConfirmationDialog.Title icon={ AlertTriangleFilledIcon } iconColor="secondary">
+				{ __( 'Detach from Component?', 'elementor' ) }
+			</ConfirmationDialog.Title>
+			<ConfirmationDialog.Content>
+				<ConfirmationDialog.ContentText>
+					{ __(
+						'Detaching this instance will break its link to the Component. Changes to the Component will no longer apply. Continue?',
+						'elementor'
+					) }
+				</ConfirmationDialog.ContentText>
+			</ConfirmationDialog.Content>
+			<ConfirmationDialog.Actions
+				onClose={ onClose }
+				onConfirm={ onConfirm }
+				confirmLabel={ __( 'Detach', 'elementor' ) }
+				color="primary"
+			/>
+		</ConfirmationDialog>
+	);
+}
+
+// Used imperatively from the context menu (Marionette view).
+export function openDetachConfirmDialog( onConfirm: () => void ) {
+	const handleConfirm = () => {
+		closeDialog();
+		onConfirm();
+	};
+
+	openDialog( {
+		component: <DetachInstanceConfirmationDialog open onClose={ closeDialog } onConfirm={ handleConfirm } />,
+	} );
+}

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

@@ -0,0 +1,76 @@
+import * as React from 'react';
+import { useState } from 'react';
+import { notify } from '@elementor/editor-notifications';
+import { DetachIcon } from '@elementor/icons';
+import { __ } from '@wordpress/i18n';
+
+import { type ExtendedWindow } from '../../types';
+import { detachComponentInstance } from '../../utils/detach-component-instance';
+import { DetachInstanceConfirmationDialog } from '../detach-instance-confirmation-dialog';
+import { EditComponentAction } from './instance-panel-header';
+
+export const DetachAction = ( {
+	componentInstanceId,
+	componentId,
+}: {
+	componentInstanceId: string;
+	componentId: number;
+} ) => {
+	const [ isDetachDialogOpen, setIsDetachDialogOpen ] = useState( false );
+
+	const handleDetachConfirm = async () => {
+		setIsDetachDialogOpen( false );
+
+		try {
+			await detachComponentInstance( {
+				instanceId: componentInstanceId,
+				componentId,
+				trackingInfo: getDetachTrackingInfo(),
+			} );
+		} catch {
+			notify( {
+				type: 'error',
+				message: __( 'Failed to detach component instance.', 'elementor' ),
+				id: 'detach-component-instance-failed',
+			} );
+		}
+	};
+
+	const handleDetachCancel = () => {
+		setIsDetachDialogOpen( false );
+	};
+
+	const handleDetachClick = () => {
+		setIsDetachDialogOpen( true );
+	};
+
+	const detachLabel = __( 'Detach from Component', 'elementor' );
+
+	return (
+		<>
+			<EditComponentAction label={ detachLabel } icon={ DetachIcon } onClick={ handleDetachClick } />
+			<DetachInstanceConfirmationDialog
+				open={ isDetachDialogOpen }
+				onClose={ handleDetachCancel }
+				onConfirm={ handleDetachConfirm }
+			/>
+		</>
+	);
+};
+
+function getDetachTrackingInfo() {
+	const extendedWindow = window as unknown as ExtendedWindow;
+	const config = extendedWindow?.elementorCommon?.eventsManager?.config;
+
+	if ( ! config ) {
+		return {
+			location: '',
+			trigger: '',
+		};
+	}
+
+	return {
+		location: ( config.locations.components as Record< string, string > ).instanceEditingPanel,
+		trigger: config.triggers.click,
+	};
+}

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

@@ -34,8 +34,15 @@ export const EmptyState = ( { onEditComponent }: { onEditComponent?: () => void
 			<Typography align="center" variant="caption" maxWidth="170px">
 				{ message }
 			</Typography>
-			{ canEdit && !! onEditComponent && (
-				<Button variant="outlined" color="secondary" size="small" sx={ { mt: 1 } } onClick={ onEditComponent }>
+			{ canEdit && (
+				<Button
+					variant="outlined"
+					color="secondary"
+					size="small"
+					sx={ { mt: 1 } }
+					disabled={ ! onEditComponent }
+					onClick={ onEditComponent }
+				>
 					<PencilIcon fontSize="small" />
 					{ __( 'Edit component', 'elementor' ) }
 				</Button>

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

@@ -1,15 +1,23 @@
 import * as React from 'react';
 import { PencilIcon } from '@elementor/icons';
-import { Box } from '@elementor/ui';
+import { Box, Stack } from '@elementor/ui';
 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';
 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-Instance-edit-footer/';
+
 export function InstanceEditingPanel() {
+	const { canEdit } = useComponentsPermissions();
 	const data = useInstancePanelData();
 
 	if ( ! data ) {
@@ -21,17 +29,21 @@ export function InstanceEditingPanel() {
 	/* translators: %s: component name. */
 	const panelTitle = __( 'Edit %s', 'elementor' ).replace( '%s', component.name );
 
+	const actions = (
+		<Stack direction="row" gap={ 0.5 }>
+			<DetachAction componentInstanceId={ componentInstanceId } componentId={ componentId } />
+			{ canEdit && <EditComponentAction disabled label={ panelTitle } icon={ PencilIcon } /> }
+		</Stack>
+	);
+
 	return (
-		<Box data-testid="instance-editing-panel">
+		<Box data-testid="instance-editing-panel" sx={ { display: 'flex', flexDirection: 'column', height: '100%' } }>
 			<ComponentInstanceProvider
 				componentId={ componentId }
 				overrides={ overrides }
 				overridableProps={ overridableProps }
 			>
-				<InstancePanelHeader
-					componentName={ component.name }
-					actions={ <EditComponentAction disabled label={ panelTitle } icon={ PencilIcon } /> }
-				/>
+				<InstancePanelHeader componentName={ component.name } actions={ actions } />
 				<InstancePanelBody
 					groups={ groups }
 					isEmpty={ isEmpty }
@@ -39,6 +51,22 @@ export function InstanceEditingPanel() {
 					componentInstanceId={ componentInstanceId }
 				/>
 			</ComponentInstanceProvider>
+			{ ! 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>
 	);
 }