@elementor/editor-components 4.0.0-663 → 4.0.0-665

package/package.json

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

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/instance-editing-panel.tsx

@@ -1,15 +1,18 @@
 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 { 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';
 
 export function InstanceEditingPanel() {
+	const { canEdit } = useComponentsPermissions();
 	const data = useInstancePanelData();
 
 	if ( ! data ) {
@@ -21,6 +24,13 @@ 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">
 			<ComponentInstanceProvider
@@ -28,10 +38,7 @@ export function InstanceEditingPanel() {
 				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 }

package/src/components/instance-editing-panel/use-instance-panel-data.ts

@@ -13,7 +13,7 @@ type InstancePanelData = {
 	overridableProps: NonNullable< ReturnType< typeof useSanitizeOverridableProps > >;
 	groups: OverridablePropsGroup[];
 	isEmpty: boolean;
-	componentInstanceId: string | undefined;
+	componentInstanceId: string;
 };
 
 export function useInstancePanelData(): InstancePanelData | null {
@@ -29,7 +29,7 @@ export function useInstancePanelData(): InstancePanelData | null {
 
 	const overridableProps = useSanitizeOverridableProps( componentId ?? null, componentInstanceId );
 
-	if ( ! componentId || ! overridableProps || ! component ) {
+	if ( ! componentId || ! overridableProps || ! component || ! componentInstanceId ) {
 		return null;
 	}
 

package/src/consts.ts

@@ -0,0 +1 @@
+export const COMPONENT_WIDGET_TYPE = 'e-component';

package/src/create-component-type.ts

@@ -2,6 +2,7 @@ import {
 	type BackboneModel,
 	type BackboneModelConstructor,
 	type ContextMenuAction,
+	type ContextMenuEventData,
 	type CreateTemplatedElementTypeOptions,
 	createTemplatedElementView,
 	type ElementModel,
@@ -22,15 +23,14 @@ import { apiClient } from './api';
 import { type ComponentInstanceProp } from './prop-types/component-instance-prop-type';
 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 { switchToComponent } from './utils/switch-to-component';
 import { trackComponentEvent } from './utils/tracking';
 
-type ContextMenuEventData = { location: string; secondaryLocation: string; trigger: string };
-
 type ContextMenuGroupConfig = {
 	disable: Record< string, string[] >;
-	add: Record< string, { index: number; action: ContextMenuAction } >;
+	add: Record< string, { index: number; actions: ContextMenuAction[] } >;
 };
 
 type ContextMenuGroup = {
@@ -88,18 +88,21 @@ const updateGroups = ( groups: ContextMenuGroup[], config: ContextMenuGroupConfi
 			disabledActions.includes( action.name ) ? { ...action, isEnabled: () => false } : action
 		);
 
-		// Insert additional action if needed
+		// Insert additional actions if needed
 		if ( addConfig ) {
-			updatedActions.splice( addConfig.index, 0, addConfig.action );
+			updatedActions.splice( addConfig.index, 0, ...addConfig.actions );
 		}
 
 		return { ...group, actions: updatedActions };
 	} );
 };
 
-export function createComponentType(
-	options: CreateTemplatedElementTypeOptions & { showLockedByModal?: ( lockedBy: string ) => void }
-): typeof ElementType {
+type ComponentTypeOptions = CreateTemplatedElementTypeOptions & {
+	showLockedByModal?: ( lockedBy: string ) => void;
+	showDetachConfirmDialog?: ( onConfirm: () => void ) => void;
+};
+
+export function createComponentType( options: ComponentTypeOptions ): typeof ElementType {
 	const legacyWindow = window as unknown as LegacyWindow;
 	const WidgetType = legacyWindow.elementor.modules.elements.types.Widget;
 
@@ -120,11 +123,7 @@ export function createComponentType(
 	};
 }
 
-function createComponentView(
-	options: CreateTemplatedElementTypeOptions & {
-		showLockedByModal?: ( lockedBy: string ) => void;
-	}
-): typeof ElementView {
+function createComponentView( options: ComponentTypeOptions ): typeof ElementView {
 	const legacyWindow = window as unknown as LegacyWindow & ExtendedWindow;
 
 	return class extends createTemplatedElementView( options ) {
@@ -241,17 +240,29 @@ function createComponentView(
 			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 editComponentAction: ContextMenuAction = {
+				name: 'edit component',
+				icon: 'eicon-edit',
+				title: () => __( 'Edit Component', 'elementor' ),
+				...( ! hasPro && { shortcut: proBadge, hasShortcutAction: true } ),
+				isEnabled: () => hasPro,
+				callback: ( _: unknown, eventData: ContextMenuEventData ) => this.editComponent( eventData ),
+			};
+
+			const detachInstanceAction: ContextMenuAction = {
+				name: 'detach instance',
+				icon: 'eicon-chain-broken',
+				title: () => __( 'Detach from Component', 'elementor' ),
+				isEnabled: () => true,
+				callback: ( _: unknown, eventData: ContextMenuEventData ) => this.detachInstance( eventData ),
+			};
+
+			const actions = isAdministrator ? [ editComponentAction, detachInstanceAction ] : [ detachInstanceAction ];
+
 			const addedGroup = {
 				general: {
 					index: 1,
-					action: {
-						name: 'edit component',
-						icon: 'eicon-edit',
-						title: () => __( 'Edit Component', 'elementor' ),
-						...( ! hasPro && { shortcut: proBadge, hasShortcutAction: true } ),
-						isEnabled: () => hasPro,
-						callback: ( _: unknown, eventData: ContextMenuEventData ) => this.editComponent( eventData ),
-					},
+					actions,
 				},
 			};
 
@@ -259,7 +270,7 @@ function createComponentView(
 				clipboard: [ 'pasteStyle', 'resetStyle' ],
 			};
 
-			return { add: isAdministrator ? addedGroup : {}, disable: disabledGroup };
+			return { add: addedGroup, disable: disabledGroup };
 		}
 
 		async switchDocument() {
@@ -297,6 +308,33 @@ function createComponentView(
 			} );
 		}
 
+		detachInstance( { trigger, location, secondaryLocation }: ContextMenuEventData ) {
+			const componentId = this.getComponentId();
+			const instanceId = this.model.get( 'id' );
+
+			if ( ! componentId || ! instanceId ) {
+				return;
+			}
+
+			const handleConfirm = async () => {
+				try {
+					await detachComponentInstance( {
+						instanceId,
+						componentId,
+						trackingInfo: { location, secondaryLocation, trigger },
+					} );
+				} catch {
+					notify( {
+						type: 'error',
+						message: __( 'Failed to detach component instance.', 'elementor' ),
+						id: 'detach-component-instance-failed',
+					} );
+				}
+			};
+
+			options.showDetachConfirmDialog?.( handleConfirm );
+		}
+
 		handleDblClick( e: MouseEvent ) {
 			e.stopPropagation();
 

package/src/index.ts

@@ -17,6 +17,7 @@ export { EmptyState as InstanceEmptyState } from './components/instance-editing-
 export { InstancePanelBody } from './components/instance-editing-panel/instance-panel-body';
 export { EditComponentAction, InstancePanelHeader } from './components/instance-editing-panel/instance-panel-header';
 export { useInstancePanelData } from './components/instance-editing-panel/use-instance-panel-data';
+export { DetachAction } from './components/instance-editing-panel/detach-action';
 
 export { COMPONENT_WIDGET_TYPE } from './create-component-type';
 

package/src/init.ts

@@ -18,6 +18,7 @@ import { componentInstanceTransformer } from './component-instance-transformer';
 import { componentOverridableTransformer } from './component-overridable-transformer';
 import { componentOverrideTransformer } from './component-override-transformer';
 import { Components } from './components/components-tab/components';
+import { openDetachConfirmDialog } from './components/detach-instance-confirmation-dialog';
 import { openEditModeDialog } from './components/in-edit-mode';
 import { InstanceEditingPanel } from './components/instance-editing-panel/instance-editing-panel';
 import { LoadTemplateComponents } from './components/load-template-components';
@@ -42,7 +43,11 @@ export function init() {
 	registerSlice( slice );
 
 	registerElementType( COMPONENT_WIDGET_TYPE, ( options: CreateTemplatedElementTypeOptions ) =>
-		createComponentType( { ...options, showLockedByModal: openEditModeDialog } )
+		createComponentType( {
+			...options,
+			showLockedByModal: openEditModeDialog,
+			showDetachConfirmDialog: openDetachConfirmDialog,
+		} )
 	);
 
 	( window as unknown as ExtendedWindow ).elementorCommon.__beforeSave = beforeSave;

package/src/types.ts

@@ -74,7 +74,7 @@ export type ExtendedWindow = Window & {
 	elementorCommon: Record< string, unknown > & {
 		eventsManager: {
 			config: {
-				locations: Record< string, string >;
+				locations: Record< string, string | Record< string, string > >;
 				secondaryLocations: Record< string, string >;
 				triggers: Record< string, string >;
 			};

package/src/utils/detach-component-instance/detach-component-instance.ts

@@ -0,0 +1,172 @@
+import { getContainer, replaceElement, type V1Element, type V1ElementModelProps } from '@elementor/editor-elements';
+import { undoable } from '@elementor/editor-v1-adapters';
+import { __dispatch as dispatch, __getState as getState } from '@elementor/store';
+import { __ } from '@wordpress/i18n';
+
+import { componentInstanceOverridesPropTypeUtil } from '../../prop-types/component-instance-overrides-prop-type';
+import {
+	type ComponentInstanceProp,
+	componentInstancePropTypeUtil,
+} from '../../prop-types/component-instance-prop-type';
+import { selectComponent, selectCurrentComponentId, selectOverridableProps, slice } from '../../store/store';
+import { type OverridableProps } from '../../types';
+import { getComponentDocumentData } from '../component-document-data';
+import { trackComponentEvent } from '../tracking';
+import { resolveDetachedInstance } from './resolve-detached-instance';
+
+type DetachParams = {
+	instanceId: string;
+	componentId: number;
+	trackingInfo: {
+		location: string;
+		secondaryLocation?: string;
+		trigger: string;
+	};
+};
+
+type DoReturn = {
+	detachedElement: V1Element;
+	detachedInstanceElementData: V1ElementModelProps;
+	editedComponentOnDetach: number | null;
+	overridablePropsBeforeDetach: OverridableProps | null;
+	originalInstanceModel: V1ElementModelProps;
+};
+
+export async function detachComponentInstance( {
+	instanceId,
+	componentId,
+	trackingInfo,
+}: DetachParams ): Promise< DoReturn > {
+	const instanceContainer = getContainer( instanceId );
+
+	if ( ! instanceContainer ) {
+		throw new Error( `Instance container with ID "${ instanceId }" not found.` );
+	}
+
+	const componentData = await getComponentDocumentData( componentId );
+
+	if ( ! componentData ) {
+		throw new Error( `Component with ID "${ componentId }" not found.` );
+	}
+
+	const rootElement = componentData.elements?.[ 0 ];
+
+	if ( ! rootElement ) {
+		throw new Error( `Component with ID "${ componentId }" has no root element.` );
+	}
+
+	const undoableDetach = undoable(
+		{
+			do: (): DoReturn => {
+				const overrides = extractInstanceOverrides( instanceContainer );
+				const detachedInstanceElementData = resolveDetachedInstance(
+					rootElement,
+					overrides
+				) as V1ElementModelProps;
+
+				const editedComponentOnDetach = selectCurrentComponentId( getState() );
+				// We need to store the overridable props of the current component before detach to restore them on undo.
+				const overridablePropsBeforeDetach = editedComponentOnDetach
+					? selectOverridableProps( getState(), editedComponentOnDetach ) ?? null
+					: null;
+
+				const originalInstanceModel = instanceContainer.model.toJSON();
+
+				const detachedElement = replaceElement( {
+					currentElementId: instanceId,
+					newElement: detachedInstanceElementData,
+					withHistory: false,
+				} );
+
+				const componentUid = selectComponent( getState(), componentId )?.uid;
+				trackComponentEvent( {
+					action: 'detached',
+					source: 'user',
+					component_uid: componentUid,
+					instance_id: instanceId,
+					location: trackingInfo.location,
+					secondary_location: trackingInfo.secondaryLocation,
+					trigger: trackingInfo.trigger,
+				} );
+
+				return {
+					detachedElement,
+					detachedInstanceElementData,
+					editedComponentOnDetach,
+					overridablePropsBeforeDetach,
+					originalInstanceModel,
+				};
+			},
+			undo: (
+				_: undefined,
+				{
+					detachedElement,
+					originalInstanceModel,
+					overridablePropsBeforeDetach,
+					editedComponentOnDetach,
+				}: DoReturn
+			): V1Element => {
+				const restoredInstance = replaceElement( {
+					currentElementId: detachedElement.id,
+					newElement: originalInstanceModel,
+					withHistory: false,
+				} );
+
+				const currentComponentId = selectCurrentComponentId( getState() );
+				if (
+					currentComponentId &&
+					currentComponentId === editedComponentOnDetach &&
+					overridablePropsBeforeDetach
+				) {
+					dispatch(
+						slice.actions.setOverridableProps( {
+							componentId: currentComponentId,
+							overridableProps: overridablePropsBeforeDetach,
+						} )
+					);
+				}
+
+				return restoredInstance;
+			},
+			redo: ( _: undefined, doReturn: DoReturn, restoredInstance: V1Element ) => {
+				const { detachedInstanceElementData } = doReturn;
+
+				const editedComponentOnDetach = selectCurrentComponentId( getState() );
+				// We need to store the overridable props of the current component before detach to restore them on undo.
+				const overridablePropsBeforeDetach = editedComponentOnDetach
+					? selectOverridableProps( getState(), editedComponentOnDetach ) ?? null
+					: null;
+
+				const detachedElement = replaceElement( {
+					currentElementId: restoredInstance.id,
+					newElement: detachedInstanceElementData,
+					withHistory: false,
+				} );
+
+				return {
+					...doReturn,
+					detachedElement,
+					editedComponentOnDetach,
+					overridablePropsBeforeDetach,
+				};
+			},
+		},
+		{
+			title: __( 'Detach from Component', 'elementor' ),
+			subtitle: __( 'Instance detached', 'elementor' ),
+		}
+	);
+
+	return undoableDetach();
+}
+
+function extractInstanceOverrides( instanceContainer: NonNullable< ReturnType< typeof getContainer > > ) {
+	const settings = instanceContainer.model.toJSON().settings;
+	const componentInstance = componentInstancePropTypeUtil.extract(
+		settings?.component_instance as ComponentInstanceProp
+	);
+
+	const overrides = componentInstanceOverridesPropTypeUtil.extract( componentInstance?.overrides );
+
+	return overrides ?? [];
+}

package/src/utils/detach-component-instance/index.ts

@@ -0,0 +1 @@
+export { detachComponentInstance } from './detach-component-instance';

package/src/utils/detach-component-instance/regenerate-local-style-ids.ts

@@ -0,0 +1,53 @@
+import { generateElementId, type V1ElementData, type V1ElementSettingsProps } from '@elementor/editor-elements';
+import { classesPropTypeUtil, type ClassesPropValue, type PropValue } from '@elementor/editor-props';
+import { type StyleDefinition, type StyleDefinitionID } from '@elementor/editor-styles';
+
+// Ts version for atomic-widgets/assets/js/editor/utils/regenerate-local-style-ids.js
+export function regenerateLocalStyleIds( element: V1ElementData ): {
+	styles: Record< StyleDefinitionID, StyleDefinition > | undefined;
+	settings: V1ElementSettingsProps | undefined;
+} {
+	const originalStyles = element.styles;
+
+	if ( ! originalStyles || Object.keys( originalStyles ).length === 0 ) {
+		return { styles: undefined, settings: undefined };
+	}
+
+	const newStyles: Record< string, StyleDefinition > = {};
+	const styleIdMapping: Record< string, string > = {};
+
+	for ( const [ originalStyleId, style ] of Object.entries( originalStyles ) ) {
+		const newStyleId = generateLocalStyleId( element.id );
+
+		newStyles[ newStyleId ] = { ...style, id: newStyleId };
+		styleIdMapping[ originalStyleId ] = newStyleId;
+	}
+
+	const settings = element.settings;
+	if ( ! settings || Object.keys( settings ).length === 0 ) {
+		return { styles: newStyles, settings: undefined };
+	}
+
+	const updatedSettings = { ...settings };
+
+	for ( const [ propKey, propValue ] of Object.entries( updatedSettings ) ) {
+		if ( isClassesProp( propValue ) && propValue.value.length > 0 ) {
+			const updatedClasses = propValue.value.map( ( classId ) => styleIdMapping[ classId ] ?? classId );
+
+			updatedSettings[ propKey ] = classesPropTypeUtil.create( updatedClasses );
+		}
+	}
+
+	return {
+		styles: newStyles,
+		settings: updatedSettings,
+	};
+}
+
+function isClassesProp( prop: PropValue ): prop is ClassesPropValue {
+	return classesPropTypeUtil.isValid( prop );
+}
+
+function generateLocalStyleId( elementId: string ): string {
+	return `e-${ elementId }-${ generateElementId() }`;
+}