@elementor/editor-components 3.35.0-420 → 3.35.0-422

package/package.json

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

package/src/components/components-tab/angie-promotion-modal.tsx

@@ -0,0 +1,72 @@
+import * as React from 'react';
+import {
+	Button,
+	Card,
+	CardActions,
+	CardContent,
+	CardHeader,
+	CardMedia,
+	ClickAwayListener,
+	CloseButton,
+	Infotip,
+	Typography,
+} from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+
+const ANGIE_INSTALL_URL = '/wp-admin/plugin-install.php?tab=plugin-information&plugin=angie';
+const PLACEHOLDER_IMAGE_URL = 'https://assets.elementor.com/packages/v1/images/components-angie-promo.svg';
+
+type AngiePromotionCardProps = {
+	onClose: () => void;
+};
+
+type AngiePromotionModalProps = React.PropsWithChildren< {
+	open: boolean;
+	onClose: () => void;
+} >;
+
+export const AngiePromotionModal = ( { children, open, onClose }: AngiePromotionModalProps ) => {
+	return (
+		<Infotip placement="right-end" arrow content={ <AngiePromotionCard onClose={ onClose } /> } open={ open }>
+			{ children }
+		</Infotip>
+	);
+};
+
+function AngiePromotionCard( { onClose }: AngiePromotionCardProps ) {
+	const handleCtaClick = () => {
+		window.open( ANGIE_INSTALL_URL, '_blank' );
+		onClose();
+	};
+
+	return (
+		<ClickAwayListener disableReactTree mouseEvent="onMouseDown" touchEvent="onTouchStart" onClickAway={ onClose }>
+			<Card elevation={ 0 } sx={ { maxWidth: 296 } }>
+				<CardHeader
+					title={ __( 'Add new component with AI', 'elementor' ) }
+					titleTypographyProps={ { variant: 'subtitle2' } }
+					action={ <CloseButton slotProps={ { icon: { fontSize: 'tiny' } } } onClick={ onClose } /> }
+				/>
+				<CardMedia
+					component="img"
+					image={ PLACEHOLDER_IMAGE_URL }
+					alt=""
+					sx={ { width: '100%', aspectRatio: '16 / 9' } }
+				/>
+				<CardContent>
+					<Typography variant="body2" color="text.secondary">
+						{ __(
+							'Angie our AI assistant can easily create new components and save you the hassle of doing it yourself',
+							'elementor'
+						) }
+					</Typography>
+				</CardContent>
+				<CardActions sx={ { justifyContent: 'flex-end' } }>
+					<Button size="medium" variant="contained" color="accent" onClick={ handleCtaClick }>
+						{ __( 'Get Angie', 'elementor' ) }
+					</Button>
+				</CardActions>
+			</Card>
+		</ClickAwayListener>
+	);
+}

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

@@ -1,14 +1,26 @@
 import * as React from 'react';
-import { ComponentsIcon, EyeIcon } from '@elementor/icons';
-import { Box, Divider, Icon, Link, List, Stack, Typography } from '@elementor/ui';
+import { useState } from 'react';
+import { getAngieSdk } from '@elementor/editor-mcp';
+import { AIIcon, ComponentsIcon } 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 { renameComponent } from '../../store/actions/rename-component';
+import { AngiePromotionModal } from './angie-promotion-modal';
 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';
+
+// 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).
+const SUBTITLE_OVERRIDE_SX = {
+	fontSize: '0.875rem !important',
+	fontWeight: '500 !important',
+};
+
 export function ComponentsList() {
 	const { components, isLoading, searchValue } = useFilteredComponents();
 
@@ -39,41 +51,87 @@ export function ComponentsList() {
 }
 
 const EmptyState = () => {
+	const [ isAngieModalOpen, setIsAngieModalOpen ] = useState( false );
+
+	const handleCreateWithAI = () => {
+		const sdk = getAngieSdk();
+
+		if ( sdk.isAngieReady() ) {
+			sdk.triggerAngie( {
+				prompt: __(
+					'Create a [hero/testimonial/product card/CTA/feature] component for my [business type]. Include [describe what you want]',
+					'elementor'
+				),
+				context: { source: 'components-panel-empty-state' },
+			} );
+		} else {
+			setIsAngieModalOpen( true );
+		}
+	};
+
 	return (
 		<Stack
 			alignItems="center"
-			justifyContent="center"
+			justifyContent="start"
 			height="100%"
-			sx={ { px: 2.5, pt: 10 } }
-			gap={ 1.75 }
+			sx={ { px: 2, py: 4 } }
+			gap={ 2 }
 			overflow="hidden"
 		>
-			<Icon fontSize="large">
-				<EyeIcon fontSize="large" />
-			</Icon>
-			<Typography align="center" variant="subtitle2" color="text.secondary" fontWeight="bold">
-				{ __( 'Text that explains that there are no Components yet.', 'elementor' ) }
-			</Typography>
-			<Typography variant="caption" align="center" color="text.secondary">
-				{ __(
-					'Once you have Components, this is where you can manage them—rearrange, duplicate, rename and delete irrelevant classes.',
-					'elementor'
-				) }
-			</Typography>
-			<Divider sx={ { width: '100%' } } color="text.secondary" />
-			<Typography align="left" variant="caption" color="text.secondary">
-				{ __( 'To create a component, first design it, then choose one of three options:', 'elementor' ) }
-			</Typography>
-			<Typography
-				align="left"
-				variant="caption"
-				color="text.secondary"
-				sx={ { display: 'flex', flexDirection: 'column' } }
-			>
-				<span>{ __( '1. Right-click and select Create Component', 'elementor' ) }</span>
-				<span>{ __( '2. Use the component icon in the Structure panel', 'elementor' ) }</span>
-				<span>{ __( '3. Use the component icon in the Edit panel header', 'elementor' ) }</span>
-			</Typography>
+			<Stack alignItems="center" gap={ 1 }>
+				<ComponentsIcon fontSize="large" sx={ { color: 'text.secondary' } } />
+
+				<Typography align="center" variant="subtitle2" color="text.secondary" sx={ SUBTITLE_OVERRIDE_SX }>
+					{ __( 'No components yet', 'elementor' ) }
+				</Typography>
+
+				<Typography align="center" variant="caption" color="secondary" sx={ { maxWidth: 200 } }>
+					{ __( 'Components are reusable blocks that sync across your site.', 'elementor' ) }
+					<br />
+					{ __( 'Create once, use everywhere.', 'elementor' ) }
+				</Typography>
+
+				<Link
+					href={ LEARN_MORE_URL }
+					target="_blank"
+					rel="noopener noreferrer"
+					variant="caption"
+					color="info.main"
+				>
+					{ __( 'Learn more about components', 'elementor' ) }
+				</Link>
+			</Stack>
+
+			<Divider sx={ { width: '100%' } } />
+
+			<Stack alignItems="center" gap={ 1 } width="100%">
+				<Typography align="center" variant="subtitle2" color="text.secondary" sx={ SUBTITLE_OVERRIDE_SX }>
+					{ __( 'Create your first one:', 'elementor' ) }
+				</Typography>
+
+				<Typography align="center" variant="caption" color="secondary" sx={ { maxWidth: 228 } }>
+					{ __(
+						'Right-click any div-block or flexbox on your canvas or structure and select "Create component"',
+						'elementor'
+					) }
+				</Typography>
+
+				<Typography align="center" variant="caption" color="secondary">
+					{ __( 'Or', 'elementor' ) }
+				</Typography>
+
+				<AngiePromotionModal open={ isAngieModalOpen } onClose={ () => setIsAngieModalOpen( false ) }>
+					<Button
+						color="secondary"
+						variant="outlined"
+						size="small"
+						onClick={ handleCreateWithAI }
+						endIcon={ <AIIcon /> }
+					>
+						{ __( 'Create component with AI', 'elementor' ) }
+					</Button>
+				</AngiePromotionModal>
+			</Stack>
 		</Stack>
 	);
 };
@@ -95,7 +153,7 @@ const EmptySearchResult = () => {
 					width: '100%',
 				} }
 			>
-				<Typography align="center" variant="subtitle2" color="inherit">
+				<Typography align="center" variant="subtitle2" color="inherit" sx={ SUBTITLE_OVERRIDE_SX }>
 					{ __( 'Sorry, nothing matched', 'elementor' ) }
 				</Typography>
 				{ searchValue && (
@@ -103,6 +161,7 @@ const EmptySearchResult = () => {
 						variant="subtitle2"
 						color="inherit"
 						sx={ {
+							...SUBTITLE_OVERRIDE_SX,
 							display: 'flex',
 							width: '100%',
 							justifyContent: 'center',

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

@@ -1,16 +1,28 @@
 import * as React from 'react';
 import { ThemeProvider } from '@elementor/editor-ui';
 
+import { useComponents } from '../../hooks/use-components';
 import { ComponentSearch } from './component-search';
 import { ComponentsList } from './components-list';
 import { SearchProvider } from './search-provider';
 
+const ComponentsContent = () => {
+	const { components, isLoading } = useComponents();
+	const hasComponents = ! isLoading && components.length > 0;
+
+	return (
+		<>
+			{ hasComponents && <ComponentSearch /> }
+			<ComponentsList />
+		</>
+	);
+};
+
 export const Components = () => {
 	return (
 		<ThemeProvider>
 			<SearchProvider localStorageKey="elementor-components-search">
-				<ComponentSearch />
-				<ComponentsList />
+				<ComponentsContent />
 			</SearchProvider>
 		</ThemeProvider>
 	);

package/src/store/actions/rename-component.ts

@@ -1,7 +1,49 @@
+import { getV1DocumentsManager, setDocumentModifiedStatus } from '@elementor/editor-documents';
+import { getAllDescendants, type V1Element } from '@elementor/editor-elements';
 import { __dispatch as dispatch } from '@elementor/store';
 
+import { COMPONENT_WIDGET_TYPE } from '../../create-component-type';
 import { slice } from '../store';
 
+const TITLE_EXTERNAL_CHANGE_COMMAND = 'title_external_change';
+
 export const renameComponent = ( componentUid: string, newName: string ) => {
 	dispatch( slice.actions.rename( { componentUid, name: newName } ) );
+
+	setDocumentModifiedStatus( true );
+
+	refreshComponentInstanceTitles( componentUid );
 };
+
+function refreshComponentInstanceTitles( componentUid: string ) {
+	const documentContainer = getDocumentContainer();
+
+	if ( ! documentContainer ) {
+		return;
+	}
+
+	const componentInstances = findComponentInstancesByUid( documentContainer, componentUid );
+
+	componentInstances.forEach( ( element ) => {
+		element.model.trigger?.( TITLE_EXTERNAL_CHANGE_COMMAND );
+	} );
+}
+
+function getDocumentContainer(): V1Element | undefined {
+	const documentsManager = getV1DocumentsManager();
+
+	return documentsManager?.getCurrent()?.container as V1Element | undefined;
+}
+
+function findComponentInstancesByUid( documentContainer: V1Element, componentUid: string ): V1Element[] {
+	const allDescendants = getAllDescendants( documentContainer );
+
+	return allDescendants.filter( ( element ) => {
+		const widgetType = element.model.get( 'widgetType' );
+		const editorSettings = element.model.get( 'editor_settings' );
+
+		const isMatch = widgetType === COMPONENT_WIDGET_TYPE && editorSettings?.component_uid === componentUid;
+
+		return isMatch;
+	} );
+}