@elementor/editor-components 4.0.0-672 → 4.0.0-673

package/package.json

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

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

@@ -1,6 +1,7 @@
 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 { hasProInstalled } from '@elementor/utils';
 import { __ } from '@wordpress/i18n';
 
 import { useComponents } from '../../hooks/use-components';
@@ -10,6 +11,7 @@ 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/';
 
 // 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 +30,11 @@ export function ComponentsList() {
 	const isEmpty = ! components?.length;
 
 	if ( isEmpty ) {
-		return searchValue.length ? <EmptySearchResult /> : <EmptyState />;
+		if ( searchValue.length ) {
+			return <EmptySearchResult />;
+		}
+
+		return hasProInstalled() ? <EmptyState /> : <ProUpgradeEmptyState />;
 	}
 
 	return (
@@ -40,7 +46,44 @@ 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 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';
+
+const UPGRADE_URL = 'https://go.elementor.com/go-pro-components-create/';
+
 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.tsx

@@ -1,5 +1,7 @@
 import * as React 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 { ComponentSearch } from './component-search';
@@ -10,13 +12,15 @@ import { SearchProvider } from './search-provider';
 const ComponentsContent = () => {
 	const { components, isLoading } = useComponents();
 	const hasComponents = ! isLoading && components.length > 0;
+	const hasPro = hasProInstalled();
+	const showProNotification = ! hasPro && hasComponents;
 
 	return (
-		<>
+		<Stack sx={ { height: '100%' } }>
 			{ hasComponents && <ComponentSearch /> }
-			{ hasComponents && <ComponentsProNotification /> }
 			<ComponentsList />
-		</>
+			{ showProNotification && <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-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' } }>
+			<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/instance-editing-panel/instance-editing-panel.tsx

@@ -1,19 +1,24 @@
 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 { 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-edit/';
+
 export function InstanceEditingPanel() {
 	const { canEdit } = useComponentsPermissions();
 	const data = useInstancePanelData();
+	const hasPro = hasProInstalled();
 
 	if ( ! data ) {
 		return null;
@@ -32,7 +37,7 @@ export function InstanceEditingPanel() {
 	);
 
 	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 }
@@ -46,6 +51,13 @@ 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 }
+				/>
+			) }
 		</Box>
 	);
 }

package/src/create-component-type.ts

@@ -61,7 +61,7 @@ function notifyComponentEditUpgrade() {
 	notify( {
 		type: 'promotion',
 		id: COMPONENT_EDIT_UPGRADE_NOTIFICATION_ID,
-		message: __( 'Your Pro subscription has expired. Renew to edit components.', 'elementor' ),
+		message: __( 'Editing components requires an active Pro subscription.', 'elementor' ),
 		additionalActionProps: [
 			{
 				size: 'small',
@@ -236,9 +236,8 @@ function createComponentView( options: ComponentTypeOptions ): typeof ElementVie
 			const isAdministrator = isUserAdministrator();
 			const hasPro = hasProInstalled();
 
-			const proLabel = __( 'PRO', 'elementor' );
-			const badgeClass = 'elementor-context-menu-list__item__shortcut__new-badge';
-			const proBadge = `<a href="${ EDIT_COMPONENT_UPGRADE_URL }" target="_blank" onclick="event.stopPropagation()" class="${ badgeClass }">${ proLabel }</a>`;
+			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 editComponentAction: ContextMenuAction = {
 				name: 'edit component',

package/src/index.ts

@@ -5,12 +5,7 @@ export { apiClient } from './api';
 export { ComponentSearch } from './components/components-tab/component-search';
 export { ComponentItem, ComponentName } from './components/components-tab/components-item';
 export type { ComponentItemProps } from './components/components-tab/components-item';
-export {
-	ComponentsList,
-	EmptySearchResult,
-	EmptyState as ComponentsEmptyState,
-	useFilteredComponents,
-} from './components/components-tab/components-list';
+export { ComponentsList, EmptySearchResult, useFilteredComponents } from './components/components-tab/components-list';
 export { LoadingComponents } from './components/components-tab/loading-components';
 export { SearchProvider } from './components/components-tab/search-provider';
 export { EmptyState as InstanceEmptyState } from './components/instance-editing-panel/empty-state';