@elementor/editor-components 3.35.0-410 → 3.35.0-412

package/package.json

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

package/src/api.ts

@@ -2,7 +2,12 @@ import { type V1ElementData } from '@elementor/editor-elements';
 import { ajax } from '@elementor/editor-v1-adapters';
 import { type HttpResponse, httpService } from '@elementor/http-client';
 
-import { type DocumentSaveStatus, type OverridableProps, type PublishedComponent } from './types';
+import {
+	type DocumentSaveStatus,
+	type OverridableProps,
+	type PublishedComponent,
+	type UpdatedComponentName,
+} from './types';
 
 const BASE_URL = 'elementor/v1/components';
 
@@ -104,6 +109,15 @@ export const apiClient = {
 				}
 			)
 			.then( ( res ) => res.data.data ),
+	updateComponentTitle: ( updatedComponentNames: UpdatedComponentName[] ) =>
+		httpService()
+			.post< { data: { failedIds: number[]; successIds: number[]; success: boolean } } >(
+				`${ BASE_URL }/update-titles`,
+				{
+					components: updatedComponentNames,
+				}
+			)
+			.then( ( res ) => res.data.data ),
 	validate: async ( payload: ValidateComponentsPayload ) =>
 		await httpService()
 			.post< HttpResponse< ValidateComponentsResponse > >( `${ BASE_URL }/create-validate`, payload )

package/src/components/component-panel-header/component-panel-header.tsx

@@ -2,11 +2,12 @@ import * as React from 'react';
 import { useSuppressedMessage } from '@elementor/editor-current-user';
 import { getV1DocumentsManager } from '@elementor/editor-documents';
 import { ArrowLeftIcon, ComponentsFilledIcon } from '@elementor/icons';
+import { __getState as getState } from '@elementor/store';
 import { Box, Divider, IconButton, Stack, Tooltip, Typography } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
 import { useNavigateBack } from '../../hooks/use-navigate-back';
-import { useCurrentComponentId } from '../../store/store';
+import { type ComponentsSlice, SLICE_NAME, useCurrentComponentId } from '../../store/store';
 import { usePanelActions } from '../component-properties-panel/component-properties-panel';
 import { ComponentIntroduction } from '../components-tab/component-introduction';
 import { ComponentsBadge } from './component-badge';
@@ -69,7 +70,15 @@ export const ComponentPanelHeader = () => {
 	);
 };
 
-function getComponentName() {
+function getComponentName(): string {
+	const state = getState() as ComponentsSlice;
+	const path = state[ SLICE_NAME ].path;
+	const { instanceTitle } = path.at( -1 ) ?? {};
+
+	if ( instanceTitle ) {
+		return instanceTitle;
+	}
+
 	const documentsManager = getV1DocumentsManager();
 	const currentDocument = documentsManager.getCurrent();
 

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

@@ -1,7 +1,8 @@
 import * as React from 'react';
+import { useRef } from 'react';
 import { endDragElementFromPanel, startDragElementFromPanel } from '@elementor/editor-canvas';
 import { dropElement, type DropElementParams, type V1ElementData } from '@elementor/editor-elements';
-import { EllipsisWithTooltip, MenuListItem } from '@elementor/editor-ui';
+import { EditableField, EllipsisWithTooltip, MenuListItem, useEditable, WarningInfotip } from '@elementor/editor-ui';
 import { ComponentsIcon, DotsVerticalIcon } from '@elementor/icons';
 import {
 	bindMenu,
@@ -12,6 +13,8 @@ import {
 	ListItemIcon,
 	Menu,
 	Stack,
+	styled,
+	type Theme,
 	Typography,
 	usePopupState,
 } from '@elementor/ui';
@@ -20,14 +23,29 @@ import { __ } from '@wordpress/i18n';
 import { archiveComponent } from '../../store/actions/archive-component';
 import { loadComponentsAssets } from '../../store/actions/load-components-assets';
 import { type Component } from '../../types';
+import { validateComponentName } from '../../utils/component-name-validation';
 import { getContainerForNewElement } from '../../utils/get-container-for-new-element';
 import { createComponentModel } from '../create-component-form/utils/replace-element-with-component';
 
 type ComponentItemProps = {
 	component: Omit< Component, 'id' > & { id?: number };
+	renameComponent: ( newName: string ) => void;
 };
 
-export const ComponentItem = ( { component }: ComponentItemProps ) => {
+export const ComponentItem = ( { component, renameComponent }: ComponentItemProps ) => {
+	const itemRef = useRef< HTMLElement >( null );
+
+	const {
+		ref: editableRef,
+		isEditing,
+		openEditMode,
+		error,
+		getProps: getEditableProps,
+	} = useEditable( {
+		value: component.name,
+		onSubmit: renameComponent,
+		validation: validateComponentTitle,
+	} );
 	const componentModel = createComponentModel( component );
 
 	const popupState = usePopupState( {
@@ -57,48 +75,66 @@ export const ComponentItem = ( { component }: ComponentItemProps ) => {
 
 	return (
 		<Stack>
-			<ListItemButton
-				draggable
-				onDragStart={ ( event: React.DragEvent ) => startDragElementFromPanel( componentModel, event ) }
-				onDragEnd={ handleDragEnd }
-				shape="rounded"
-				sx={ {
-					border: 'solid 1px',
-					borderColor: 'divider',
-					py: 0.5,
-					px: 1,
-					display: 'flex',
-					width: '100%',
-					alignItems: 'center',
-					gap: 1,
-				} }
+			<WarningInfotip
+				open={ Boolean( error ) }
+				text={ error ?? '' }
+				placement="bottom"
+				width={ itemRef.current?.getBoundingClientRect().width }
+				offset={ [ 0, -15 ] }
 			>
-				<Box
-					onClick={ handleClick }
+				<ListItemButton
+					draggable
+					onDragStart={ ( event: React.DragEvent ) => startDragElementFromPanel( componentModel, event ) }
+					onDragEnd={ handleDragEnd }
+					shape="rounded"
+					ref={ itemRef }
 					sx={ {
+						border: 'solid 1px',
+						borderColor: 'divider',
+						py: 0.5,
+						px: 1,
 						display: 'flex',
+						width: '100%',
 						alignItems: 'center',
 						gap: 1,
-						minWidth: 0,
-						flexGrow: 1,
 					} }
 				>
-					<ListItemIcon size="tiny">
-						<ComponentsIcon fontSize="tiny" />
-					</ListItemIcon>
-					<Box display="flex" flex={ 1 } minWidth={ 0 } flexGrow={ 1 }>
-						<EllipsisWithTooltip
-							title={ component.name }
-							as={ Typography }
-							variant="caption"
-							color="text.primary"
-						/>
+					<Box
+						display="flex"
+						alignItems="center"
+						gap={ 1 }
+						minWidth={ 0 }
+						flexGrow={ 1 }
+						onClick={ handleClick }
+					>
+						<ListItemIcon size="tiny">
+							<ComponentsIcon fontSize="tiny" />
+						</ListItemIcon>
+						<Indicator isActive={ isEditing } isError={ !! error }>
+							<Box display="flex" flex={ 1 } minWidth={ 0 } flexGrow={ 1 }>
+								{ isEditing ? (
+									<EditableField
+										ref={ editableRef }
+										as={ Typography }
+										variant="caption"
+										{ ...getEditableProps() }
+									/>
+								) : (
+									<EllipsisWithTooltip
+										title={ component.name }
+										as={ Typography }
+										variant="caption"
+										color="text.primary"
+									/>
+								) }
+							</Box>
+						</Indicator>
 					</Box>
-				</Box>
-				<IconButton size="tiny" { ...bindTrigger( popupState ) } aria-label="More actions">
-					<DotsVerticalIcon fontSize="tiny" />
-				</IconButton>
-			</ListItemButton>
+					<IconButton size="tiny" { ...bindTrigger( popupState ) } aria-label="More actions">
+						<DotsVerticalIcon fontSize="tiny" />
+					</IconButton>
+				</ListItemButton>
+			</WarningInfotip>
 			<Menu
 				{ ...bindMenu( popupState ) }
 				anchorOrigin={ {
@@ -110,8 +146,19 @@ export const ComponentItem = ( { component }: ComponentItemProps ) => {
 					horizontal: 'right',
 				} }
 			>
+				<MenuListItem
+					sx={ { minWidth: '160px' } }
+					onClick={ () => {
+						popupState.close();
+						openEditMode();
+					} }
+				>
+					{ __( 'Rename', 'elementor' ) }
+				</MenuListItem>
 				<MenuListItem sx={ { minWidth: '160px' } } onClick={ handleArchiveClick }>
-					{ __( 'Archive', 'elementor' ) }
+					<Typography variant="caption" sx={ { color: 'error.light' } }>
+						{ __( 'Archive', 'elementor' ) }
+					</Typography>
 				</MenuListItem>
 			</Menu>
 		</Stack>
@@ -133,3 +180,38 @@ const addComponentToPage = ( model: DropElementParams[ 'model' ] ) => {
 		options: { ...options, useHistory: false, scrollIntoView: true },
 	} );
 };
+
+const validateComponentTitle = ( newTitle: string ) => {
+	const result = validateComponentName( newTitle );
+
+	if ( ! result.errorMessage ) {
+		return null;
+	}
+
+	return result.errorMessage;
+};
+
+const Indicator = styled( Box, {
+	shouldForwardProp: ( prop ) => prop !== 'isActive' && prop !== 'isError',
+} )( ( { theme, isActive, isError } ) => ( {
+	display: 'flex',
+	width: '100%',
+	flexGrow: 1,
+	borderRadius: theme.spacing( 0.5 ),
+	border: getIndicatorBorder( { isActive, isError, theme } ),
+	padding: `0 ${ theme.spacing( 1 ) }`,
+	marginLeft: isActive ? theme.spacing( 1 ) : 0,
+	minWidth: 0,
+} ) );
+
+const getIndicatorBorder = ( { isActive, isError, theme }: { isActive: boolean; isError: boolean; theme: Theme } ) => {
+	if ( isError ) {
+		return `2px solid ${ theme.palette.error.main }`;
+	}
+
+	if ( isActive ) {
+		return `2px solid ${ theme.palette.secondary.main }`;
+	}
+
+	return 'none';
+};

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

@@ -4,6 +4,7 @@ import { Box, Divider, Icon, 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 { ComponentItem } from './components-item';
 import { LoadingComponents } from './loading-components';
 import { useSearch } from './search-provider';
@@ -25,7 +26,13 @@ export function ComponentsList() {
 	return (
 		<List sx={ { display: 'flex', flexDirection: 'column', gap: 1, px: 2 } }>
 			{ components.map( ( component ) => (
-				<ComponentItem key={ component.uid } component={ component } />
+				<ComponentItem
+					key={ component.uid }
+					component={ component }
+					renameComponent={ ( newName ) => {
+						renameComponent( component.uid, newName );
+					} }
+				/>
 			) ) }
 		</List>
 	);

package/src/components/create-component-form/utils/component-form-schema.ts

@@ -1,21 +1,19 @@
 import { z } from '@elementor/schema';
 import { __ } from '@wordpress/i18n';
 
-const MIN_NAME_LENGTH = 2;
+export const MIN_NAME_LENGTH = 2;
 const MAX_NAME_LENGTH = 50;
 
+const baseComponentSchema = z
+	.string()
+	.trim()
+	.max( MAX_NAME_LENGTH, __( 'Component name is too long. Please keep it under 50 characters.', 'elementor' ) );
+
 export const createBaseComponentSchema = ( existingNames: string[] ) => {
 	return z.object( {
-		componentName: z
-			.string()
-			.trim()
-			.max(
-				MAX_NAME_LENGTH,
-				__( 'Component name is too long. Please keep it under 50 characters.', 'elementor' )
-			)
-			.refine( ( value ) => ! existingNames.includes( value ), {
-				message: __( 'Component name already exists', 'elementor' ),
-			} ),
+		componentName: baseComponentSchema.refine( ( value ) => ! existingNames.includes( value ), {
+			message: __( 'Component name already exists', 'elementor' ),
+		} ),
 	} );
 };
 

package/src/components/create-component-form/utils/replace-element-with-component.ts

@@ -34,7 +34,6 @@ export const createComponentModel = ( component: ComponentInstanceParams ): Omit
 			overridable_props: component.overridableProps,
 		},
 		editor_settings: {
-			title: component.name,
 			component_uid: component.uid,
 		},
 	};

package/src/components/edit-component/edit-component.tsx

@@ -73,15 +73,45 @@ function getUpdatedComponentPath( path: ComponentsPathItem[], nextDocument: V1Do
 		return path.slice( 0, componentIndex + 1 );
 	}
 
+	const instanceId = nextDocument?.container.view?.el?.dataset.id;
+	const instanceTitle = getInstanceTitle( instanceId, path );
+
 	return [
 		...path,
 		{
-			instanceId: nextDocument?.container.view?.el?.dataset.id,
+			instanceId,
+			instanceTitle,
 			componentId: nextDocument.id,
 		},
 	];
 }
 
+function getInstanceTitle( instanceId: string | undefined, path: ComponentsPathItem[] ): string | undefined {
+	if ( ! instanceId ) {
+		return undefined;
+	}
+
+	const documentsManager = getV1DocumentsManager();
+	const parentDocId = path.at( -1 )?.componentId ?? documentsManager.getInitialId();
+	const parentDoc = documentsManager.get( parentDocId );
+
+	type EditorSettings = { title?: string };
+	type ContainerWithChildren = V1Element & {
+		children?: {
+			findRecursive?: ( predicate: ( child: V1Element ) => boolean ) => V1Element | undefined;
+		};
+	};
+
+	const parentContainer = parentDoc?.container as unknown as ContainerWithChildren | undefined;
+	const widget = parentContainer?.children?.findRecursive?.(
+		( container: V1Element ) => container.id === instanceId
+	);
+
+	const editorSettings = widget?.model?.get?.( 'editor_settings' ) as EditorSettings | undefined;
+
+	return editorSettings?.title;
+}
+
 function getComponentDOMElement( id: V1Document[ 'id' ] | undefined ) {
 	if ( ! id ) {
 		return null;

package/src/create-component-type.ts

@@ -1,5 +1,6 @@
 import {
 	type BackboneModel,
+	type BackboneModelConstructor,
 	type CreateTemplatedElementTypeOptions,
 	createTemplatedElementView,
 	type ElementModel,
@@ -8,10 +9,12 @@ import {
 	type LegacyWindow,
 } from '@elementor/editor-canvas';
 import { getCurrentDocument } from '@elementor/editor-documents';
+import { __getState as getState } from '@elementor/store';
 import { __ } from '@wordpress/i18n';
 
 import { apiClient } from './api';
 import { type ComponentInstanceProp } from './prop-types/component-instance-prop-type';
+import { type ComponentsSlice, selectComponentByUid } from './store/store';
 import { type ExtendedWindow } from './types';
 import { switchToComponent } from './utils/switch-to-component';
 import { trackComponentEvent } from './utils/tracking';
@@ -36,6 +39,18 @@ type ContextMenuGroup = {
 	actions: ContextMenuAction[];
 };
 
+type ComponentModel = ElementModel & {
+	componentId?: number | string;
+};
+
+type ComponentModelInstance = BackboneModel< ComponentModel > & {
+	trigger: ( event: string, ...args: unknown[] ) => void;
+	getTitle: () => string;
+	getComponentId: () => number | null;
+	getComponentName: () => string;
+	getComponentUid: () => string | null;
+};
+
 export const COMPONENT_WIDGET_TYPE = 'e-component';
 
 const updateGroups = ( groups: ContextMenuGroup[], config: ContextMenuGroupConfig ): ContextMenuGroup[] => {
@@ -64,8 +79,9 @@ export function createComponentType(
 	options: CreateTemplatedElementTypeOptions & { showLockedByModal?: ( lockedBy: string ) => void }
 ): typeof ElementType {
 	const legacyWindow = window as unknown as LegacyWindow;
+	const WidgetType = legacyWindow.elementor.modules.elements.types.Widget;
 
-	return class extends legacyWindow.elementor.modules.elements.types.Widget {
+	return class extends WidgetType {
 		getType() {
 			return options.type;
 		}
@@ -73,6 +89,10 @@ export function createComponentType(
 		getView() {
 			return createComponentView( { ...options } );
 		}
+
+		getModel(): BackboneModelConstructor< ComponentModel > {
+			return createComponentModel();
+		}
 	};
 }
 
@@ -253,3 +273,67 @@ function setInactiveRecursively( model: BackboneModel< ElementModel > ) {
 		} );
 	}
 }
+
+function createComponentModel(): BackboneModelConstructor< ComponentModel > {
+	const legacyWindow = window as unknown as LegacyWindow;
+	const WidgetType = legacyWindow.elementor.modules.elements.types.Widget;
+	const widgetTypeInstance = new WidgetType() as unknown as BackboneModelConstructor< ElementModel >;
+	const BaseWidgetModel = widgetTypeInstance.getModel();
+
+	return BaseWidgetModel.extend( {
+		initialize( this: ComponentModelInstance, attributes: unknown, options: unknown ): void {
+			BaseWidgetModel.prototype.initialize.call( this, attributes, options );
+
+			const componentInstance = this.get( 'settings' )?.get( 'component_instance' ) as
+				| ComponentInstanceProp
+				| undefined;
+			if ( componentInstance?.value ) {
+				const componentId = componentInstance.value.component_id?.value;
+				if ( componentId && typeof componentId === 'number' ) {
+					this.set( 'componentId', componentId );
+				}
+			}
+		},
+
+		getTitle( this: ComponentModelInstance ): string {
+			const editorSettings = this.get( 'editor_settings' ) as
+				| {
+						title?: string;
+						component_uid?: string;
+				  }
+				| undefined;
+
+			const instanceTitle = editorSettings?.title;
+			if ( instanceTitle ) {
+				return instanceTitle;
+			}
+
+			const componentUid = editorSettings?.component_uid;
+			if ( componentUid ) {
+				const component = selectComponentByUid( getState() as ComponentsSlice, componentUid );
+				if ( component?.name ) {
+					return component.name;
+				}
+			}
+
+			return ( window as unknown as LegacyWindow ).elementor.getElementData( this ).title;
+		},
+
+		getComponentId( this: ComponentModelInstance ): number | null {
+			return ( this.get( 'componentId' ) as number | undefined ) || null;
+		},
+
+		getComponentName( this: ComponentModelInstance ): string {
+			return this.getTitle();
+		},
+
+		getComponentUid( this: ComponentModelInstance ): string | null {
+			const editorSettings = this.get( 'editor_settings' ) as
+				| {
+						component_uid?: string;
+				  }
+				| undefined;
+			return editorSettings?.component_uid || null;
+		},
+	} );
+}

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

@@ -0,0 +1,7 @@
+import { __dispatch as dispatch } from '@elementor/store';
+
+import { slice } from '../store';
+
+export const renameComponent = ( componentUid: string, newName: string ) => {
+	dispatch( slice.actions.rename( { componentUid, name: newName } ) );
+};

package/src/store/store.ts

@@ -30,12 +30,14 @@ type ComponentsState = {
 	archivedData: PublishedComponent[];
 	path: ComponentsPathItem[];
 	currentComponentId: V1Document[ 'id' ] | null;
+	updatedComponentNames: Record< number, string >;
 };
 
 export type ComponentsSlice = SliceState< typeof slice >;
 
 export type ComponentsPathItem = {
 	instanceId?: string;
+	instanceTitle?: string;
 	componentId: V1Document[ 'id' ];
 };
 
@@ -48,6 +50,7 @@ export const initialState: ComponentsState = {
 	archivedData: [],
 	path: [],
 	currentComponentId: null,
+	updatedComponentNames: {},
 };
 
 export const SLICE_NAME = 'components';
@@ -111,6 +114,20 @@ export const slice = createSlice( {
 
 			component.overridableProps = payload.overridableProps;
 		},
+		rename: ( state, { payload }: PayloadAction< { componentUid: string; name: string } > ) => {
+			const component = state.data.find( ( comp ) => comp.uid === payload.componentUid );
+
+			if ( ! component ) {
+				return;
+			}
+			if ( component.id ) {
+				state.updatedComponentNames[ component.id ] = payload.name;
+			}
+			component.name = payload.name;
+		},
+		cleanUpdatedComponentNames: ( state ) => {
+			state.updatedComponentNames = {};
+		},
 	},
 	extraReducers: ( builder ) => {
 		builder.addCase( loadComponents.fulfilled, ( state, { payload }: PayloadAction< GetComponentResponse > ) => {
@@ -140,6 +157,10 @@ export const useComponent = ( componentId: ComponentId | null ) => {
 	return useSelector( ( state: ComponentsSlice ) => ( componentId ? selectComponent( state, componentId ) : null ) );
 };
 
+export const selectComponentByUid = ( state: ComponentsSlice, componentUid: string ) =>
+	state[ SLICE_NAME ].data.find( ( component ) => component.uid === componentUid ) ??
+	state[ SLICE_NAME ].unpublishedData.find( ( component ) => component.uid === componentUid );
+
 export const selectComponents = createSelector(
 	selectData,
 	selectUnpublishedData,
@@ -209,3 +230,11 @@ export const selectArchivedComponents = createSelector(
 	selectArchivedData,
 	( archivedData: PublishedComponent[] ) => archivedData
 );
+export const selectUpdatedComponentNames = createSelector(
+	( state: ComponentsSlice ) => state[ SLICE_NAME ].updatedComponentNames,
+	( updatedComponentNames ) =>
+		Object.entries( updatedComponentNames ).map( ( [ componentId, title ] ) => ( {
+			componentId: Number( componentId ),
+			title,
+		} ) )
+);

package/src/sync/before-save.ts

@@ -5,6 +5,7 @@ import { type DocumentSaveStatus } from '../types';
 import { createComponentsBeforeSave } from './create-components-before-save';
 import { setComponentOverridablePropsSettingsBeforeSave } from './set-component-overridable-props-settings-before-save';
 import { updateArchivedComponentBeforeSave } from './update-archived-component-before-save';
+import { updateComponentTitleBeforeSave } from './update-component-title-before-save';
 import { updateComponentsBeforeSave } from './update-components-before-save';
 
 type Options = {
@@ -27,5 +28,6 @@ export const beforeSave = ( { container, status }: Options ) => {
 		createComponentsBeforeSave( { elements, status } ),
 		updateComponentsBeforeSave( { elements, status } ),
 		setComponentOverridablePropsSettingsBeforeSave( { container } ),
+		updateComponentTitleBeforeSave(),
 	] );
 };

package/src/sync/update-component-title-before-save.ts

@@ -0,0 +1,18 @@
+import { __dispatch as dispatch, __getState as getState } from '@elementor/store';
+
+import { apiClient } from '../api';
+import { selectUpdatedComponentNames, slice } from '../store/store';
+
+export const updateComponentTitleBeforeSave = async () => {
+	const updatedComponentNames = selectUpdatedComponentNames( getState() );
+
+	if ( ! updatedComponentNames.length ) {
+		return;
+	}
+
+	const result = await apiClient.updateComponentTitle( updatedComponentNames );
+
+	if ( result.failedIds.length === 0 ) {
+		dispatch( slice.actions.cleanUpdatedComponentNames() );
+	}
+};