@elementor/editor-editing-panel 4.2.0-885 → 4.2.0-886

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elementor/editor-editing-panel",
-  "version": "4.2.0-885",
+  "version": "4.2.0-886",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -39,31 +39,31 @@
     "dev": "tsup --config=../../tsup.dev.ts"
   },
   "dependencies": {
-    "@elementor/editor": "4.2.0-885",
-    "@elementor/editor-canvas": "4.2.0-885",
-    "@elementor/editor-controls": "4.2.0-885",
-    "@elementor/editor-documents": "4.2.0-885",
-    "@elementor/editor-elements": "4.2.0-885",
-    "@elementor/editor-interactions": "4.2.0-885",
-    "@elementor/editor-notifications": "4.2.0-885",
-    "@elementor/editor-panels": "4.2.0-885",
-    "@elementor/editor-props": "4.2.0-885",
-    "@elementor/editor-responsive": "4.2.0-885",
-    "@elementor/editor-styles": "4.2.0-885",
-    "@elementor/editor-styles-repository": "4.2.0-885",
-    "@elementor/editor-ui": "4.2.0-885",
-    "@elementor/editor-v1-adapters": "4.2.0-885",
-    "@elementor/http-client": "4.2.0-885",
+    "@elementor/editor": "4.2.0-886",
+    "@elementor/editor-canvas": "4.2.0-886",
+    "@elementor/editor-controls": "4.2.0-886",
+    "@elementor/editor-documents": "4.2.0-886",
+    "@elementor/editor-elements": "4.2.0-886",
+    "@elementor/editor-interactions": "4.2.0-886",
+    "@elementor/editor-notifications": "4.2.0-886",
+    "@elementor/editor-panels": "4.2.0-886",
+    "@elementor/editor-props": "4.2.0-886",
+    "@elementor/editor-responsive": "4.2.0-886",
+    "@elementor/editor-styles": "4.2.0-886",
+    "@elementor/editor-styles-repository": "4.2.0-886",
+    "@elementor/editor-ui": "4.2.0-886",
+    "@elementor/editor-v1-adapters": "4.2.0-886",
+    "@elementor/http-client": "4.2.0-886",
     "@elementor/icons": "~1.75.1",
-    "@elementor/editor-variables": "4.2.0-885",
-    "@elementor/locations": "4.2.0-885",
-    "@elementor/menus": "4.2.0-885",
-    "@elementor/query": "4.2.0-885",
-    "@elementor/schema": "4.2.0-885",
-    "@elementor/session": "4.2.0-885",
+    "@elementor/editor-variables": "4.2.0-886",
+    "@elementor/locations": "4.2.0-886",
+    "@elementor/menus": "4.2.0-886",
+    "@elementor/query": "4.2.0-886",
+    "@elementor/schema": "4.2.0-886",
+    "@elementor/session": "4.2.0-886",
     "@elementor/ui": "1.37.5",
-    "@elementor/utils": "4.2.0-885",
-    "@elementor/wp-media": "4.2.0-885",
+    "@elementor/utils": "4.2.0-886",
+    "@elementor/wp-media": "4.2.0-886",
     "@wordpress/i18n": "^5.13.0"
   },
   "peerDependencies": {

package/src/components/css-classes/css-class-menu.tsx

@@ -18,7 +18,7 @@ import { StyleIndicator } from '../style-indicator';
 import { useCssClass } from './css-class-context';
 import { DuplicateClassMenuItem } from './duplicate-class-menu-item';
 import { LocalClassSubMenu } from './local-class-sub-menu';
-import { useUnapplyClass } from './use-apply-and-unapply-class';
+import { useUndoableUnapplyClass } from './use-apply-and-unapply-class';
 
 type State = {
 	key: StyleDefinitionStateWithNormal;
@@ -264,7 +264,7 @@ function StateMenuItem( { state, label, closeMenu, ...props }: StateMenuItemProp
 
 function UnapplyClassMenuItem( { closeMenu, ...props }: { closeMenu: () => void } ) {
 	const { id: classId, label: classLabel, provider } = useCssClass();
-	const unapplyClass = useUnapplyClass();
+	const unapplyClass = useUndoableUnapplyClass();
 
 	return classId ? (
 		<MenuListItem

package/src/components/css-classes/css-class-selector.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { type ReactElement, useRef, useState } from 'react';
+import { type ReactElement, useCallback, useRef, useState } from 'react';
 import { type ClassesPropValue } from '@elementor/editor-props';
 import {
 	isElementsStylesProvider,
@@ -39,7 +39,14 @@ import {
 	type ValidationResult,
 } from '../creatable-autocomplete';
 import { CssClassItem } from './css-class-item';
-import { useApplyClass, useCreateAndApplyClass, useUnapplyClass } from './use-apply-and-unapply-class';
+import { MissingClassesAlert } from './missing-classes-alert';
+import {
+	useCreateAndApplyClass,
+	useUnapplyClasses,
+	useUndoableApplyClass,
+	useUndoableUnapplyClass,
+} from './use-apply-and-unapply-class';
+import { useMissingClassesIds } from './use-missing-classes';
 
 const ID = 'elementor-css-class-selector';
 const TAGS_LIMIT = 50;
@@ -94,6 +101,15 @@ export function CssClassSelector() {
 
 	const canEdit = active.provider ? userCan( active.provider ).updateProps : true;
 
+	const missingClassesIds = useMissingClassesIds();
+	const hasMissingClasses = missingClassesIds.length > 0;
+
+	const unapplyClasses = useUnapplyClasses();
+
+	const clearMissingClasses = useCallback( () => {
+		unapplyClasses( missingClassesIds );
+	}, [ missingClassesIds, unapplyClasses ] );
+
 	return (
 		<Stack p={ 2 }>
 			<Stack direction="row" gap={ 1 } alignItems="center" justifyContent="space-between">
@@ -172,6 +188,7 @@ export function CssClassSelector() {
 					}
 				/>
 			</WarningInfotip>
+			{ hasMissingClasses && <MissingClassesAlert onDismiss={ clearMissingClasses } /> }
 			{ ! canEdit && (
 				<InfoAlert sx={ { mt: 1 } }>
 					{ __( 'With your current role, you can use existing classes but can’t modify them.', 'elementor' ) }
@@ -365,8 +382,8 @@ function useAppliedOptions( options: StyleDefOption[] ) {
 }
 
 function useHandleSelect() {
-	const apply = useApplyClass();
-	const unapply = useUnapplyClass();
+	const apply = useUndoableApplyClass();
+	const unapply = useUndoableUnapplyClass();
 
 	return ( _selectedOptions: StyleDefOption[], reason: AutocompleteChangeReason, option: StyleDefOption ) => {
 		if ( ! option.value ) {

package/src/components/css-classes/duplicate-class-menu-item.tsx

@@ -7,7 +7,7 @@ import { __ } from '@wordpress/i18n';
 import { trackStyles } from '../../utils/tracking/subscribe';
 import { PENDING_CLASS_RENAME_SESSION_KEY } from './consts';
 import { useCssClass } from './css-class-context';
-import { useApplyClass } from './use-apply-and-unapply-class';
+import { useUndoableApplyClass } from './use-apply-and-unapply-class';
 
 const DUPLICATE_LABEL_PREFIX = 'copy-of';
 
@@ -24,7 +24,7 @@ export function getUniqueDuplicateLabel( originalLabel: string, existingLabels:
 export function DuplicateClassMenuItem( { closeMenu }: { closeMenu: () => void } ) {
 	const { id: classId, provider } = useCssClass();
 	const { userCan } = useUserStylesCapability();
-	const applyClass = useApplyClass();
+	const applyClass = useUndoableApplyClass();
 	const [ , setPendingEditId ] = useSessionStorage( PENDING_CLASS_RENAME_SESSION_KEY, 'app' );
 
 	if ( ! provider || ! classId ) {

package/src/components/css-classes/missing-classes-alert.tsx

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import { AlertTriangleFilledIcon } from '@elementor/icons';
+import { Alert, AlertTitle, Typography } from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+
+type MissingClassesAlertProps = {
+	onDismiss: () => void;
+};
+
+export function MissingClassesAlert( { onDismiss }: MissingClassesAlertProps ) {
+	return (
+		<Alert
+			severity="warning"
+			onClose={ onDismiss }
+			size="small"
+			icon={ <AlertTriangleFilledIcon fontSize="tiny" /> }
+			sx={ { mt: 1 } }
+		>
+			<AlertTitle>{ __( 'Some classes are missing', 'elementor' ) }</AlertTitle>
+			<Typography variant="caption" textColor="primary">
+				{ __( 'A class was removed from your site and is no longer active on this element', 'elementor' ) }
+			</Typography>
+		</Alert>
+	);
+}

package/src/components/css-classes/use-apply-and-unapply-class.ts

@@ -24,12 +24,12 @@ type CreateAndApplyClassUndoData = {
 	createdId: StyleDefinitionID;
 };
 
-export function useApplyClass() {
+export function useUndoableApplyClass() {
 	const { id: activeId, setId: setActiveId } = useStyle();
 	const { element } = useElement();
 
-	const applyClass = useApply();
-	const unapplyClass = useUnapply();
+	const applyClass = useApplyClass();
+	const unapplyClasses = useUnapplyClasses();
 
 	return useMemo( () => {
 		return undoable(
@@ -42,7 +42,7 @@ export function useApplyClass() {
 					return prevActiveId;
 				},
 				undo: ( { classId }: UndoableClassActionPayload, prevActiveId: string | null ) => {
-					unapplyClass( classId );
+					unapplyClasses( [ classId ] );
 					setActiveId( prevActiveId );
 				},
 			},
@@ -54,15 +54,15 @@ export function useApplyClass() {
 				},
 			}
 		);
-	}, [ activeId, applyClass, element.id, unapplyClass, setActiveId ] );
+	}, [ activeId, applyClass, element.id, unapplyClasses, setActiveId ] );
 }
 
-export function useUnapplyClass() {
+export function useUndoableUnapplyClass() {
 	const { id: activeId, setId: setActiveId } = useStyle();
 	const { element } = useElement();
 
-	const applyClass = useApply();
-	const unapplyClass = useUnapply();
+	const applyClass = useApplyClass();
+	const unapplyClasses = useUnapplyClasses();
 
 	return useMemo( () => {
 		return undoable(
@@ -70,7 +70,7 @@ export function useUnapplyClass() {
 				do: ( { classId }: UndoableClassActionPayload ) => {
 					const prevActiveId = activeId;
 
-					unapplyClass( classId );
+					unapplyClasses( [ classId ] );
 
 					return prevActiveId;
 				},
@@ -87,7 +87,7 @@ export function useUnapplyClass() {
 				},
 			}
 		);
-	}, [ activeId, applyClass, element.id, unapplyClass, setActiveId ] );
+	}, [ activeId, applyClass, element.id, unapplyClasses, setActiveId ] );
 }
 
 export function useCreateAndApplyClass() {
@@ -96,8 +96,8 @@ export function useCreateAndApplyClass() {
 	const [ provider, createAction ] = useGetStylesRepositoryCreateAction() ?? [ null, null ];
 	const deleteAction = provider?.actions.delete;
 
-	const applyClass = useApply();
-	const unapplyClass = useUnapply();
+	const applyClass = useApplyClass();
+	const unapplyClasses = useUnapplyClasses();
 
 	const undoableCreateAndApply = useMemo( () => {
 		if ( ! provider || ! createAction ) {
@@ -114,7 +114,7 @@ export function useCreateAndApplyClass() {
 					return { prevActiveId, createdId };
 				},
 				undo: ( _: CreateAndApplyClassPayload, { prevActiveId, createdId }: CreateAndApplyClassUndoData ) => {
-					unapplyClass( createdId );
+					unapplyClasses( [ createdId ] );
 					deleteAction?.( createdId );
 
 					setActiveId( prevActiveId );
@@ -138,7 +138,7 @@ export function useCreateAndApplyClass() {
 				},
 			}
 		);
-	}, [ activeId, applyClass, createAction, deleteAction, provider, setActiveId, unapplyClass ] );
+	}, [ activeId, applyClass, createAction, deleteAction, provider, setActiveId, unapplyClasses ] );
 
 	if ( ! provider || ! undoableCreateAndApply ) {
 		return [ null, null ];
@@ -147,7 +147,7 @@ export function useCreateAndApplyClass() {
 	return [ provider, undoableCreateAndApply ] as const;
 }
 
-function useApply() {
+function useApplyClass() {
 	const { element } = useElement();
 	const { setId: setActiveId } = useStyle();
 	const { setClasses, getAppliedClasses } = useClasses();
@@ -170,25 +170,28 @@ function useApply() {
 	);
 }
 
-function useUnapply() {
+export function useUnapplyClasses() {
 	const { element } = useElement();
 	const { id: activeId, setId: setActiveId } = useStyle();
 	const { setClasses, getAppliedClasses } = useClasses();
 
 	return useCallback(
-		( classIDToUnapply: StyleDefinitionID ) => {
+		( classIDsToUnapply: StyleDefinitionID[] ) => {
 			const appliedClasses = getAppliedClasses();
 
-			if ( ! appliedClasses.includes( classIDToUnapply ) ) {
+			if ( ! classIDsToUnapply.every( ( classID ) => appliedClasses.includes( classID ) ) ) {
+				const missingClasses = classIDsToUnapply.filter( ( classID ) => ! appliedClasses.includes( classID ) );
 				throw new Error(
-					`Class ${ classIDToUnapply } is not applied to element ${ element.id }, cannot unapply it.`
+					`Classes ${ missingClasses.join( ', ' ) } are not applied to element ${
+						element.id
+					}, cannot unapply them.`
 				);
 			}
 
-			const updatedClassesIds = appliedClasses.filter( ( id ) => id !== classIDToUnapply );
+			const updatedClassesIds = appliedClasses.filter( ( id ) => ! classIDsToUnapply.includes( id ) );
 			setClasses( updatedClassesIds );
 
-			if ( activeId === classIDToUnapply ) {
+			if ( activeId && classIDsToUnapply.includes( activeId ) ) {
 				setActiveId( updatedClassesIds[ 0 ] ?? null );
 			}
 		},

package/src/components/css-classes/use-missing-classes.ts

@@ -0,0 +1,17 @@
+import { type ClassesPropValue } from '@elementor/editor-props';
+import { useProviders } from '@elementor/editor-styles-repository';
+
+import { useClassesProp } from '../../contexts/classes-prop-context';
+import { usePanelElementSetting } from '../../contexts/element-context';
+
+export function useMissingClassesIds(): string[] {
+	const providers = useProviders();
+	const currentClassesProp = useClassesProp();
+	const appliedIds = usePanelElementSetting< ClassesPropValue >( currentClassesProp )?.value ?? [];
+
+	const allKnownIds = new Set(
+		providers.flatMap( ( provider ) => provider.actions.all().map( ( style ) => style.id ) )
+	);
+
+	return appliedIds.filter( ( id ) => ! allKnownIds.has( id ) );
+}

package/src/hooks/use-active-style-def-id.ts

@@ -1,6 +1,7 @@
 import { getElementStyles } from '@elementor/editor-elements';
 import { type ClassesPropValue, type PropKey } from '@elementor/editor-props';
 import { type StyleDefinitionID } from '@elementor/editor-styles';
+import { useProviders } from '@elementor/editor-styles-repository';
 
 import { useElement, usePanelElementSetting } from '../contexts/element-context';
 import { useStateByElement } from './use-state-by-element';
@@ -12,13 +13,22 @@ export function useActiveStyleDefId( classProp: PropKey ) {
 	);
 
 	const appliedClassesIds = usePanelElementSetting< ClassesPropValue >( classProp )?.value || [];
+	const validAppliedClassesIds = useValidClassIds( appliedClassesIds );
 
 	const fallback = useFirstAppliedClass( appliedClassesIds );
 
-	const activeAndAppliedClassId = useActiveAndAppliedClassId( activeStyledDefId, appliedClassesIds );
+	const activeAndAppliedClassId = useActiveAndAppliedClassId( activeStyledDefId, validAppliedClassesIds );
 	return [ activeAndAppliedClassId || fallback?.id || null, setActiveStyledDefId ] as const;
 }
 
+function useValidClassIds( appliedClassesIds: string[] ) {
+	const providers = useProviders();
+	const allKnownIds = new Set(
+		providers.flatMap( ( provider ) => provider.actions.all().map( ( style ) => style.id ) )
+	);
+	return appliedClassesIds.filter( ( id ) => allKnownIds.has( id ) );
+}
+
 function useFirstAppliedClass( appliedClassesIds: string[] ) {
 	const { element } = useElement();
 	const stylesDefs = getElementStyles( element.id ) ?? {};