@elementor/editor-components 4.0.0-manual → 4.0.1

package/src/components/instance-editing-panel/override-prop-control.tsx

@@ -10,6 +10,7 @@ import {
 	BaseControl,
 	controlsRegistry,
 	type ControlType,
+	ControlTypeContainer,
 	createTopLevelObjectType,
 	ElementProvider,
 	isDynamicPropValue,
@@ -18,7 +19,7 @@ import {
 } from '@elementor/editor-editing-panel';
 import { type Control, getElementSettings, getElementType } from '@elementor/editor-elements';
 import { type AnyTransformable, type PropType, type PropValue } from '@elementor/editor-props';
-import { Stack } from '@elementor/ui';
+import { Box } from '@elementor/ui';
 
 import { useControlsByWidgetType } from '../../hooks/use-controls-by-widget-type';
 import {
@@ -50,6 +51,7 @@ import { resolveOverridePropValue } from '../../utils/resolve-override-prop-valu
 import { ControlLabel } from '../control-label';
 import { OverrideControlInnerElementNotFoundError } from '../errors';
 import { useResolvedOriginValue } from './use-resolved-origin-value';
+import { correctExposedEmptyOverride } from './utils/correct-exposed-empty-override';
 
 type Props = {
 	overrideKey: string;
@@ -123,12 +125,14 @@ function OverrideControl( { overridableProp }: InternalProps ) {
 			return;
 		}
 
-		const newPropValue = getTempNewValueForDynamicProp(
+		let newPropValue = getTempNewValueForDynamicProp(
 			propType,
 			propValue,
 			newValue[ overridableProp.overrideKey ]
 		);
 
+		newPropValue = correctExposedEmptyOverride( newPropValue, matchingOverride );
+
 		const newOverrideValue = createOverrideValue( {
 			matchingOverride,
 			overrideKey: overridableProp.overrideKey,
@@ -214,10 +218,14 @@ function OverrideControl( { overridableProp }: InternalProps ) {
 					>
 						<PropKeyProvider bind={ overridableProp.overrideKey }>
 							<ControlReplacementsProvider replacements={ controlReplacements }>
-								<Stack direction="column" gap={ 1 } mb={ 1.5 }>
-									{ layout !== 'custom' && <ControlLabel>{ overridableProp.label }</ControlLabel> }
-									<OriginalControl control={ control } controlProps={ controlProps } />
-								</Stack>
+								<Box mb={ 1.5 }>
+									<ControlTypeContainer layout={ layout }>
+										{ layout !== 'custom' && (
+											<ControlLabel>{ overridableProp.label }</ControlLabel>
+										) }
+										<OriginalControl control={ control } controlProps={ controlProps } />
+									</ControlTypeContainer>
+								</Box>
 							</ControlReplacementsProvider>
 						</PropKeyProvider>
 					</PropProvider>

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/components/instance-editing-panel/utils/correct-exposed-empty-override.ts

@@ -0,0 +1,28 @@
+import { type ComponentInstanceOverrideProp } from '../../../prop-types/component-instance-override-prop-type';
+import { type ComponentInstanceOverride } from '../../../prop-types/component-instance-overrides-prop-type';
+import {
+	type ComponentOverridableProp,
+	componentOverridablePropTypeUtil,
+} from '../../../prop-types/component-overridable-prop-type';
+
+type OverrideValue = ComponentInstanceOverrideProp | ComponentOverridableProp;
+
+// The control receives the resolved value, so when exposing a prop that was never overridden,
+// origin_value will be the resolved value instead of null.
+// So here, we correct this by resetting origin_value to null.
+export function correctExposedEmptyOverride(
+	newPropValue: OverrideValue,
+	matchingOverride: ComponentInstanceOverride | null
+): OverrideValue {
+	const newOverridableValue = componentOverridablePropTypeUtil.extract( newPropValue );
+	const isExposingEmptyOverride = newOverridableValue && matchingOverride === null;
+
+	if ( ! isExposingEmptyOverride ) {
+		return newPropValue;
+	}
+
+	return componentOverridablePropTypeUtil.create( {
+		override_key: newOverridableValue.override_key,
+		origin_value: 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,
@@ -13,6 +14,7 @@ import {
 } from '@elementor/editor-canvas';
 import { getCurrentDocument } from '@elementor/editor-documents';
 import { type V1ElementData } from '@elementor/editor-elements';
+import { notify } from '@elementor/editor-notifications';
 import { __getState as getState } from '@elementor/store';
 import { hasProInstalled } from '@elementor/utils';
 import { __ } from '@wordpress/i18n';
@@ -21,15 +23,15 @@ 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 { isProComponentsSupported, isProOutdatedForComponents } from './utils/is-pro-components-supported';
 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 = {
@@ -52,7 +54,54 @@ type ComponentModelInstance = BackboneModel< ComponentModel > & {
 
 export const COMPONENT_WIDGET_TYPE = 'e-component';
 
-const EDIT_COMPONENT_UPGRADE_URL = 'https://go.elementor.com/go-pro-components-edit/';
+const EDIT_COMPONENT_DB_CLICK_UPGRADE_URL =
+	'https://go.elementor.com/go-pro-components-Instance-edit-canvas-double-click/';
+const EDIT_COMPONENT_CONTEXT_MENU_UPGRADE_URL =
+	'https://go.elementor.com/go-pro-components-Instance-edit-context-menu/';
+
+const UPDATE_PLUGINS_URL = '/wp-admin/plugins.php';
+
+const COMPONENT_EDIT_UPGRADE_NOTIFICATION_ID = 'component-edit-upgrade';
+const COMPONENT_EDIT_UPDATE_NOTIFICATION_ID = 'component-edit-update';
+
+const COMPONENT_EDIT_UPGRADE_AUTO_HIDE_DURATION = 2000;
+
+function notifyComponentEditUpgrade() {
+	notify( {
+		type: 'promotion',
+		id: COMPONENT_EDIT_UPGRADE_NOTIFICATION_ID,
+		message: __( 'Editing components requires an active Pro subscription.', 'elementor' ),
+		autoHideDuration: COMPONENT_EDIT_UPGRADE_AUTO_HIDE_DURATION,
+		additionalActionProps: [
+			{
+				size: 'small',
+				variant: 'contained',
+				color: 'promotion',
+				href: EDIT_COMPONENT_DB_CLICK_UPGRADE_URL,
+				target: '_blank',
+				children: __( 'Upgrade Now', 'elementor' ),
+			},
+		],
+	} );
+}
+
+function notifyComponentEditUpdate() {
+	notify( {
+		type: 'info',
+		id: COMPONENT_EDIT_UPDATE_NOTIFICATION_ID,
+		message: __( 'To edit components, update Elementor Pro to the latest version.', 'elementor' ),
+		additionalActionProps: [
+			{
+				size: 'small',
+				variant: 'contained',
+				color: 'info',
+				href: UPDATE_PLUGINS_URL,
+				target: '_blank',
+				children: __( 'Update Now', 'elementor' ),
+			},
+		],
+	} );
+}
 
 const updateGroups = ( groups: ContextMenuGroup[], config: ContextMenuGroupConfig ): ContextMenuGroup[] => {
 	const disableMap = new Map( Object.entries( config.disable ?? {} ) );
@@ -67,18 +116,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;
 
@@ -99,11 +151,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 ) {
@@ -215,22 +263,35 @@ function createComponentView(
 		_getContextMenuConfig() {
 			const isAdministrator = isUserAdministrator();
 			const hasPro = hasProInstalled();
+			const isOutdated = isProOutdatedForComponents();
+			const showPromoBadge = ! hasPro && ! isOutdated;
+
+			const badgeClass = 'elementor-context-menu-list__item__shortcut__promotion-badge';
+			const proBadge = `<a href="${ EDIT_COMPONENT_CONTEXT_MENU_UPGRADE_URL }" target="_blank" onclick="event.stopPropagation()" class="${ badgeClass }"><i class="eicon-upgrade-crown"></i></a>`;
+
+			const editComponentAction: ContextMenuAction = {
+				name: 'edit component',
+				icon: 'eicon-edit',
+				title: () => __( 'Edit Component', 'elementor' ),
+				...( showPromoBadge && { shortcut: proBadge, hasShortcutAction: true } ),
+				isEnabled: () => isProComponentsSupported() || isOutdated,
+				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 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 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,
 				},
 			};
 
@@ -238,7 +299,7 @@ function createComponentView(
 				clipboard: [ 'pasteStyle', 'resetStyle' ],
 			};
 
-			return { add: isAdministrator ? addedGroup : {}, disable: disabledGroup };
+			return { add: addedGroup, disable: disabledGroup };
 		}
 
 		async switchDocument() {
@@ -255,9 +316,12 @@ function createComponentView(
 		}
 
 		editComponent( { trigger, location, secondaryLocation }: ContextMenuEventData ) {
-			const hasPro = hasProInstalled();
+			if ( isProOutdatedForComponents() ) {
+				notifyComponentEditUpdate();
+				return;
+			}
 
-			if ( ! hasPro || this.isComponentCurrentlyEdited() ) {
+			if ( ! isProComponentsSupported() || this.isComponentCurrentlyEdited() ) {
 				return;
 			}
 
@@ -276,10 +340,47 @@ 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();
 
-			if ( ! isUserAdministrator() || ! hasProInstalled() ) {
+			if ( ! isUserAdministrator() ) {
+				return;
+			}
+
+			if ( isProOutdatedForComponents() ) {
+				notifyComponentEditUpdate();
+				return;
+			}
+
+			if ( ! hasProInstalled() ) {
+				notifyComponentEditUpgrade();
 				return;
 			}
 

package/src/index.ts

@@ -1 +1,93 @@
 export { init } from './init';
+
+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, 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';
+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';
+
+export { useComponents } from './hooks/use-components';
+export { useComponentsPermissions } from './hooks/use-components-permissions';
+export { useSanitizeOverridableProps } from './hooks/use-sanitize-overridable-props';
+
+export { componentInstanceOverridePropTypeUtil } from './prop-types/component-instance-override-prop-type';
+export type {
+	ComponentInstanceOverrideProp,
+	ComponentInstanceOverridePropValue,
+} from './prop-types/component-instance-override-prop-type';
+export { componentInstanceOverridesPropTypeUtil } from './prop-types/component-instance-overrides-prop-type';
+export type {
+	ComponentInstanceOverride,
+	ComponentInstanceOverridesPropValue,
+} from './prop-types/component-instance-overrides-prop-type';
+export { componentInstancePropTypeUtil } from './prop-types/component-instance-prop-type';
+export type { ComponentInstanceProp, ComponentInstancePropValue } from './prop-types/component-instance-prop-type';
+export { componentOverridablePropTypeUtil } from './prop-types/component-overridable-prop-type';
+export type {
+	ComponentOverridableProp,
+	ComponentOverridablePropValue,
+} from './prop-types/component-overridable-prop-type';
+
+export { ComponentInstanceProvider } from './provider/component-instance-context';
+export {
+	OverridablePropProvider,
+	useComponentInstanceElement,
+	useOverridablePropValue,
+} from './provider/overridable-prop-context';
+
+export { loadComponentsAssets } from './store/actions/load-components-assets';
+export { updateOverridableProp } from './store/actions/update-overridable-prop';
+export { componentsActions } from './store/dispatchers';
+export { componentsSelectors } from './store/selectors';
+export {
+	SLICE_NAME,
+	createComponentsAction,
+	registerComponentsReducer,
+	selectOverridableProps,
+	selectPath,
+	slice,
+	useCurrentComponent,
+	useCurrentComponentId,
+	useIsSanitizedComponent,
+	useOverridableProps,
+} from './store/store';
+export type { ComponentsPathItem, ComponentsSlice, ComponentsState, SanitizeAttributes } from './store/store';
+
+export { publishDraftComponentsInPageBeforeSave } from './sync/publish-draft-components-in-page-before-save';
+
+export type {
+	Component,
+	ComponentFormValues,
+	ComponentId,
+	DocumentSaveStatus,
+	ExtendedWindow,
+	OriginalElementData,
+	OriginPropFields,
+	OverridableProp,
+	OverridableProps,
+	OverridablePropsGroup,
+	PublishedComponent,
+	StylesDefinition,
+	UnpublishedComponent,
+	UpdatedComponentName,
+} from './types';
+
+export { filterValidOverridableProps } from './utils/filter-valid-overridable-props';
+export { getContainerByOriginId } from './utils/get-container-by-origin-id';
+export { getOverridableProp } from './utils/get-overridable-prop';
+export { getPropTypeForComponentOverride } from './utils/get-prop-type-for-component-override';
+export { isComponentInstance } from './utils/is-component-instance';
+export { resolveOverridePropValue } from './utils/resolve-override-prop-value';
+export { switchToComponent } from './utils/switch-to-component';
+export { onElementDrop, trackComponentEvent } from './utils/tracking';
+export type { Source } from './utils/tracking';

package/src/init.ts

@@ -17,11 +17,11 @@ 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';
 import { COMPONENT_WIDGET_TYPE, createComponentType } from './create-component-type';
-import { initExtended } from './extended/init';
 import { PopulateStore } from './populate-store';
 import { initCircularNestingPrevention } from './prevent-circular-nesting';
 import { loadComponentsAssets } from './store/actions/load-components-assets';
@@ -38,7 +38,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;
@@ -83,6 +87,4 @@ export function init() {
 	initCircularNestingPrevention();
 
 	initLoadComponentDataAfterInstanceAdded();
-
-	initExtended();
 }

package/src/store/actions/update-overridable-prop.ts

@@ -1,16 +1,15 @@
-import { __dispatch as dispatch, __getState as getState } from '@elementor/store';
-
 import { type ComponentOverridablePropValue } from '../../prop-types/component-overridable-prop-type';
 import { type OriginPropFields, type OverridableProps } from '../../types';
 import { resolveOverridePropValue } from '../../utils/resolve-override-prop-value';
-import { selectOverridableProps, slice } from '../store';
+import { componentsActions } from '../dispatchers';
+import { componentsSelectors } from '../selectors';
 
 export function updateOverridableProp(
 	componentId: number,
 	propValue: ComponentOverridablePropValue,
 	originPropFields?: OriginPropFields
 ) {
-	const overridableProps = selectOverridableProps( getState(), componentId );
+	const overridableProps = componentsSelectors.getOverridableProps( componentId );
 
 	if ( ! overridableProps ) {
 		return;
@@ -44,10 +43,5 @@ export function updateOverridableProp(
 		},
 	} satisfies OverridableProps;
 
-	dispatch(
-		slice.actions.setOverridableProps( {
-			componentId,
-			overridableProps: newOverridableProps,
-		} )
-	);
+	componentsActions.setOverridableProps( componentId, newOverridableProps );
 }

package/src/store/dispatchers.ts

@@ -0,0 +1,63 @@
+import { type V1Document } from '@elementor/editor-documents';
+import { __dispatch as dispatch, __getStore as getStore } from '@elementor/store';
+
+import { type ComponentId, type OverridableProps, type PublishedComponent, type UnpublishedComponent } from '../types';
+import { type ComponentsPathItem, type SanitizeAttributes, slice } from './store';
+
+function safeDispatch() {
+	return getStore()?.dispatch;
+}
+
+export const componentsActions = {
+	add( components: PublishedComponent | PublishedComponent[] ) {
+		dispatch( slice.actions.add( components ) );
+	},
+	load( components: PublishedComponent[] ) {
+		dispatch( slice.actions.load( components ) );
+	},
+	addUnpublished( component: UnpublishedComponent ) {
+		dispatch( slice.actions.addUnpublished( component ) );
+	},
+	removeUnpublished( uids: string | string[] ) {
+		dispatch( slice.actions.removeUnpublished( uids ) );
+	},
+	resetUnpublished() {
+		dispatch( slice.actions.resetUnpublished() );
+	},
+	removeStyles( id: ComponentId ) {
+		dispatch( slice.actions.removeStyles( { id } ) );
+	},
+	addStyles( styles: Record< string, unknown > ) {
+		dispatch( slice.actions.addStyles( styles ) );
+	},
+	addCreatedThisSession( uid: string ) {
+		dispatch( slice.actions.addCreatedThisSession( uid ) );
+	},
+	removeCreatedThisSession( uid: string ) {
+		dispatch( slice.actions.removeCreatedThisSession( uid ) );
+	},
+	archive( componentId: ComponentId ) {
+		dispatch( slice.actions.archive( componentId ) );
+	},
+	setCurrentComponentId( id: V1Document[ 'id' ] | null ) {
+		safeDispatch()?.( slice.actions.setCurrentComponentId( id ) );
+	},
+	setPath( path: ComponentsPathItem[] ) {
+		safeDispatch()?.( slice.actions.setPath( path ) );
+	},
+	setOverridableProps( componentId: ComponentId, overridableProps: OverridableProps ) {
+		dispatch( slice.actions.setOverridableProps( { componentId, overridableProps } ) );
+	},
+	rename( componentUid: string, name: string ) {
+		dispatch( slice.actions.rename( { componentUid, name } ) );
+	},
+	cleanUpdatedComponentNames() {
+		dispatch( slice.actions.cleanUpdatedComponentNames() );
+	},
+	updateComponentSanitizedAttribute( componentId: ComponentId, attribute: SanitizeAttributes ) {
+		dispatch( slice.actions.updateComponentSanitizedAttribute( { componentId, attribute } ) );
+	},
+	resetSanitizedComponents() {
+		dispatch( slice.actions.resetSanitizedComponents() );
+	},
+};