@elementor/editor-global-classes 4.2.0-879 → 4.2.0-881

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elementor/editor-global-classes",
-  "version": "4.2.0-879",
+  "version": "4.2.0-881",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -39,29 +39,29 @@
     "dev": "tsup --config=../../tsup.dev.ts"
   },
   "dependencies": {
-    "@elementor/editor": "4.2.0-879",
-    "@elementor/editor-current-user": "4.2.0-879",
-    "@elementor/editor-documents": "4.2.0-879",
-    "@elementor/editor-editing-panel": "4.2.0-879",
-    "@elementor/editor-mcp": "4.2.0-879",
-    "@elementor/editor-panels": "4.2.0-879",
-    "@elementor/editor-props": "4.2.0-879",
-    "@elementor/editor-variables": "4.2.0-879",
-    "@elementor/editor-styles": "4.2.0-879",
-    "@elementor/editor-canvas": "4.2.0-879",
-    "@elementor/editor-styles-repository": "4.2.0-879",
-    "@elementor/editor-ui": "4.2.0-879",
-    "@elementor/editor-v1-adapters": "4.2.0-879",
-    "@elementor/http-client": "4.2.0-879",
+    "@elementor/editor": "4.2.0-881",
+    "@elementor/editor-current-user": "4.2.0-881",
+    "@elementor/editor-documents": "4.2.0-881",
+    "@elementor/editor-editing-panel": "4.2.0-881",
+    "@elementor/editor-mcp": "4.2.0-881",
+    "@elementor/editor-panels": "4.2.0-881",
+    "@elementor/editor-props": "4.2.0-881",
+    "@elementor/editor-variables": "4.2.0-881",
+    "@elementor/editor-styles": "4.2.0-881",
+    "@elementor/editor-canvas": "4.2.0-881",
+    "@elementor/editor-styles-repository": "4.2.0-881",
+    "@elementor/editor-ui": "4.2.0-881",
+    "@elementor/editor-v1-adapters": "4.2.0-881",
+    "@elementor/http-client": "4.2.0-881",
     "@elementor/icons": "~1.75.1",
-    "@elementor/query": "4.2.0-879",
-    "@elementor/schema": "4.2.0-879",
-    "@elementor/store": "4.2.0-879",
+    "@elementor/query": "4.2.0-881",
+    "@elementor/schema": "4.2.0-881",
+    "@elementor/store": "4.2.0-881",
     "@elementor/ui": "1.37.5",
-    "@elementor/utils": "4.2.0-879",
+    "@elementor/utils": "4.2.0-881",
     "@tanstack/react-virtual": "^3.13.24",
     "@wordpress/i18n": "^5.13.0",
-    "@elementor/events": "4.2.0-879"
+    "@elementor/events": "4.2.0-881"
   },
   "peerDependencies": {
     "react": "^18.3.1",

package/src/components/class-manager/class-manager-button.tsx

@@ -5,14 +5,12 @@ import {
 } from '@elementor/editor-documents';
 import { useUserStylesCapability } from '@elementor/editor-styles-repository';
 import { SaveChangesDialog, useDialog } from '@elementor/editor-ui';
-import { isExperimentActive } from '@elementor/editor-v1-adapters';
 import { IconButton, Tooltip } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
 import { globalClassesStylesProvider } from '../../global-classes-styles-provider';
 import { usePrefetchCssClassUsage } from '../../hooks/use-prefetch-css-class-usage';
 import { trackGlobalClasses } from '../../utils/tracking';
-import { usePanelActions } from './class-manager-panel';
 import { FlippedColorSwatchIcon } from './flipped-color-swatch-icon';
 
 const trackGlobalClassesButton = () => {
@@ -24,7 +22,6 @@ const trackGlobalClassesButton = () => {
 
 export const ClassManagerButton = () => {
 	const document = useActiveDocument();
-	const { open: openPanel } = usePanelActions();
 	const { save: saveDocument } = useActiveDocumentActions();
 	const { open: openSaveChangesDialog, close: closeSaveChangesDialog, isOpen: isSaveChangesDialogOpen } = useDialog();
 	const { prefetchClassesUsage } = usePrefetchCssClassUsage();
@@ -38,15 +35,11 @@ export const ClassManagerButton = () => {
 	}
 
 	const toggleClassesManagerPanel = () => {
-		if ( isExperimentActive( 'e_editor_design_system_panel' ) ) {
-			window.dispatchEvent(
-				new CustomEvent( 'elementor/toggle-design-system', {
-					detail: { tab: 'classes' as const },
-				} )
-			);
-		} else {
-			openPanel();
-		}
+		window.dispatchEvent(
+			new CustomEvent( 'elementor/toggle-design-system', {
+				detail: { tab: 'classes' as const },
+			} )
+		);
 	};
 
 	const handleOpenPanel = () => {

package/src/components/class-manager/class-manager-panel.tsx

@@ -1,32 +1,12 @@
 import * as React from 'react';
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import { useSuppressedMessage } from '@elementor/editor-current-user';
-import { reloadCurrentDocument, setDocumentModifiedStatus } from '@elementor/editor-documents';
-import {
-	__createPanel as createPanel,
-	Panel,
-	PanelBody,
-	PanelFooter,
-	PanelHeader,
-	PanelHeaderTitle,
-} from '@elementor/editor-panels';
-import { ConfirmationDialog, SaveChangesDialog, ThemeProvider, useDialog } from '@elementor/editor-ui';
-import { changeEditMode } from '@elementor/editor-v1-adapters';
-import { XIcon } from '@elementor/icons';
+import { setDocumentModifiedStatus } from '@elementor/editor-documents';
+import { PanelFooter } from '@elementor/editor-panels';
+import { ConfirmationDialog, SaveChangesDialog, useDialog } from '@elementor/editor-ui';
 import { useMutation } from '@elementor/query';
 import { __dispatch as dispatch } from '@elementor/store';
-import {
-	Alert,
-	Box,
-	Button,
-	Chip,
-	DialogHeader,
-	Divider,
-	ErrorBoundary,
-	IconButton,
-	type IconButtonProps,
-	Stack,
-} from '@elementor/ui';
+import { Alert, Box, Button, Chip, DialogHeader, Divider, ErrorBoundary, Stack } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
 import { useClassesOrder } from '../../hooks/use-classes-order';
@@ -54,62 +34,22 @@ type StopSyncConfirmationDialogProps = {
 	onConfirm: () => void;
 };
 
-const id = 'global-classes-manager';
-
 export type ClassManagerPanelEmbeddedProps = {
 	onRequestClose: () => void | Promise< void >;
 	onExposeCloseAttempt?: ( attemptClose: ( () => void ) | null ) => void;
 };
 
 export function ClassManagerPanelEmbedded( { onRequestClose, onExposeCloseAttempt }: ClassManagerPanelEmbeddedProps ) {
-	return (
-		<ClassManagerPanelRoot
-			embedded
-			onRequestClose={ onRequestClose }
-			onExposeCloseAttempt={ onExposeCloseAttempt }
-		/>
-	);
-}
-
-export function ClassManagerPanel() {
-	return <ClassManagerPanelRoot />;
+	return <ClassManagerPanelContent onRequestClose={ onRequestClose } onExposeCloseAttempt={ onExposeCloseAttempt } />;
 }
 
-export const { panel, usePanelActions } = createPanel( {
-	id,
-	component: ClassManagerPanel,
-	allowedEditModes: [ 'edit', id ],
-	onOpen: () => {
-		changeEditMode( id );
-
-		blockPanelInteractions();
-	},
-	onClose: async () => {
-		changeEditMode( 'edit' );
-		await reloadCurrentDocument();
-		unblockPanelInteractions();
-	},
-	isOpenPreviousElement: true,
-} );
-
-type ClassManagerPanelRootProps = {
-	embedded?: boolean;
-	onRequestClose?: () => void | Promise< void >;
+type ClassManagerPanelContentProps = {
+	onRequestClose: () => void | Promise< void >;
 	onExposeCloseAttempt?: ( attemptClose: ( () => void ) | null ) => void;
 };
 
-function ClassManagerPanelRoot( {
-	embedded = false,
-	onRequestClose,
-	onExposeCloseAttempt,
-}: ClassManagerPanelRootProps = {} ) {
+function ClassManagerPanelContent( { onRequestClose, onExposeCloseAttempt }: ClassManagerPanelContentProps ) {
 	const isDirty = useDirtyState();
-	const { close: closeStandalonePanel } = usePanelActions();
-	const closePanel = useMemo(
-		() => ( embedded ? onRequestClose ?? ( async () => {} ) : closeStandalonePanel ),
-		[ embedded, onRequestClose, closeStandalonePanel ]
-	);
-
 	const { open: openSaveChangesDialog, close: closeSaveChangesDialog, isOpen: isSaveChangesDialogOpen } = useDialog();
 	const [ stopSyncConfirmation, setStopSyncConfirmation ] = useState< string | null >( null );
 	const [ startSyncConfirmation, setStartSyncConfirmation ] = useState< string | null >( null );
@@ -129,30 +69,26 @@ function ClassManagerPanelRoot( {
 			return;
 		}
 
-		void closePanel();
-	}, [ isDirty, openSaveChangesDialog, closePanel ] );
+		void onRequestClose();
+	}, [ isDirty, openSaveChangesDialog, onRequestClose ] );
 
 	useEffect( () => {
-		if ( ! embedded || ! onExposeCloseAttempt ) {
+		if ( ! onExposeCloseAttempt ) {
 			return;
 		}
 
 		onExposeCloseAttempt( () => handleClosePanel() );
 
 		return () => onExposeCloseAttempt( null );
-	}, [ embedded, onExposeCloseAttempt, handleClosePanel ] );
+	}, [ onExposeCloseAttempt, handleClosePanel ] );
 
 	useEffect( () => {
-		if ( ! embedded ) {
-			return;
-		}
-
 		blockPanelInteractions();
 
 		return () => {
 			unblockPanelInteractions();
 		};
-	}, [ embedded ] );
+	}, [] );
 
 	const handleStopSync = useCallback( ( classId: string ) => {
 		dispatch(
@@ -193,56 +129,70 @@ function ClassManagerPanelRoot( {
 
 	usePreventUnload();
 
-	const searchFiltersBlock = (
-		<Box px={ 2 } pb={ 1 }>
-			<Stack direction="row" alignItems="center" justifyContent="space-between" gap={ 0.5 } sx={ { pb: 0.5 } }>
-				<Box sx={ embedded ? { flexGrow: 1, minWidth: 0 } : { flexGrow: 1 } }>
-					<ClassManagerSearch />
-				</Box>
-				<CssClassFilter />
-				{ embedded && <TotalCssClassCounter /> }
-			</Stack>
-			<ActiveFilters />
-		</Box>
-	);
-
-	const listArea = (
-		<Box
-			ref={ setScrollElement }
-			px={ 2 }
-			sx={ {
-				flexGrow: 1,
-				overflowY: 'auto',
-				...( embedded ? { minHeight: 0 } : {} ),
-			} }
-		>
-			<GlobalClassesList
-				disabled={ isPublishing }
-				scrollElement={ scrollElement }
-				onStopSyncRequest={ handleStopSyncRequest }
-				onStartSyncRequest={ ( classId ) => setStartSyncConfirmation( classId ) }
-			/>
-		</Box>
-	);
-
-	const saveFooter = (
-		<PanelFooter>
-			<Button
-				fullWidth
-				size="small"
-				color="global"
-				variant="contained"
-				onClick={ publish }
-				disabled={ ! isDirty }
-				loading={ isPublishing }
-			>
-				{ __( 'Save changes', 'elementor' ) }
-			</Button>
-		</PanelFooter>
-	);
-
-	const dialogs = (
+	return (
 		<>
+			<ErrorBoundary fallback={ <ErrorBoundaryFallback /> }>
+				<SearchAndFilterProvider>
+					<Stack
+						direction="column"
+						sx={ {
+							height: '100%',
+							width: '100%',
+							flex: 1,
+							minHeight: 0,
+							overflow: 'hidden',
+						} }
+					>
+						<Box px={ 2 } pb={ 1 }>
+							<Stack
+								direction="row"
+								alignItems="center"
+								justifyContent="space-between"
+								gap={ 0.5 }
+								sx={ { pb: 0.5 } }
+							>
+								<Box sx={ { flexGrow: 1, minWidth: 0 } }>
+									<ClassManagerSearch />
+								</Box>
+								<CssClassFilter />
+								<TotalCssClassCounter />
+							</Stack>
+							<ActiveFilters />
+						</Box>
+						<Divider />
+						<Box
+							ref={ setScrollElement }
+							px={ 2 }
+							sx={ {
+								flexGrow: 1,
+								overflowY: 'auto',
+								minHeight: 0,
+							} }
+						>
+							<GlobalClassesList
+								disabled={ isPublishing }
+								scrollElement={ scrollElement }
+								onStopSyncRequest={ handleStopSyncRequest }
+								onStartSyncRequest={ ( classId ) => setStartSyncConfirmation( classId ) }
+							/>
+						</Box>
+						<PanelFooter>
+							<Button
+								fullWidth
+								size="small"
+								color="global"
+								variant="contained"
+								onClick={ publish }
+								disabled={ ! isDirty }
+								loading={ isPublishing }
+							>
+								{ __( 'Save changes', 'elementor' ) }
+							</Button>
+						</PanelFooter>
+					</Stack>
+				</SearchAndFilterProvider>
+			</ErrorBoundary>
+			<ClassManagerIntroduction />
 			{ startSyncConfirmation && (
 				<StartSyncToV3Modal
 					externalOpen
@@ -286,7 +236,7 @@ function ClassManagerPanelRoot( {
 								action: async () => {
 									await publish();
 									closeSaveChangesDialog();
-									void closePanel();
+									void onRequestClose();
 								},
 							},
 						} }
@@ -295,88 +245,8 @@ function ClassManagerPanelRoot( {
 			) }
 		</>
 	);
-
-	const classManagerLayout = embedded ? (
-		<Stack
-			direction="column"
-			sx={ {
-				height: '100%',
-				width: '100%',
-				flex: 1,
-				minHeight: 0,
-				overflow: 'hidden',
-			} }
-		>
-			{ searchFiltersBlock }
-			<Divider />
-			{ listArea }
-			{ saveFooter }
-		</Stack>
-	) : (
-		<Panel>
-			<PanelHeader>
-				<Stack p={ 1 } pl={ 2 } width="100%" direction="row" alignItems="center">
-					<Stack width="100%" direction="row" gap={ 1 }>
-						<PanelHeaderTitle sx={ { display: 'flex', alignItems: 'center', gap: 0.5 } }>
-							<FlippedColorSwatchIcon fontSize="inherit" />
-							{ __( 'Class Manager', 'elementor' ) }
-						</PanelHeaderTitle>
-						<TotalCssClassCounter />
-					</Stack>
-					<ClassPanelCloseButton
-						disabled={ isPublishing }
-						onClose={ () => {
-							if ( isDirty ) {
-								openSaveChangesDialog();
-								return;
-							}
-
-							void closeStandalonePanel();
-						} }
-					/>
-				</Stack>
-			</PanelHeader>
-			<PanelBody
-				sx={ {
-					display: 'flex',
-					flexDirection: 'column',
-					height: '100%',
-				} }
-			>
-				{ searchFiltersBlock }
-				<Divider />
-				{ listArea }
-			</PanelBody>
-			{ saveFooter }
-		</Panel>
-	);
-
-	const core = (
-		<>
-			<ErrorBoundary fallback={ <ErrorBoundaryFallback /> }>
-				<SearchAndFilterProvider>{ classManagerLayout }</SearchAndFilterProvider>
-			</ErrorBoundary>
-			<ClassManagerIntroduction />
-			{ dialogs }
-		</>
-	);
-
-	return embedded ? core : <ThemeProvider>{ core }</ThemeProvider>;
 }
 
-const ClassPanelCloseButton = ( { onClose, sx, ...props }: IconButtonProps & { onClose: () => void } ) => (
-	<IconButton
-		size="small"
-		color="secondary"
-		onClick={ onClose }
-		aria-label="Close"
-		sx={ { marginLeft: 'auto', ...sx } }
-		{ ...props }
-	>
-		<XIcon fontSize="small" />
-	</IconButton>
-);
-
 const ErrorBoundaryFallback = () => (
 	<Box role="alert" sx={ { minHeight: '100%', p: 2 } }>
 		<Alert severity="error" sx={ { mb: 2, maxWidth: 400, textAlign: 'center' } }>

package/src/init.ts

@@ -5,17 +5,12 @@ import {
 	registerStyleProviderToColors,
 } from '@elementor/editor-editing-panel';
 import { getMCPByDomain } from '@elementor/editor-mcp';
-import { __registerPanel as registerPanel } from '@elementor/editor-panels';
 import { stylesRepository } from '@elementor/editor-styles-repository';
-import { isExperimentActive } from '@elementor/editor-v1-adapters';
 import { __registerSlice as registerSlice } from '@elementor/store';
 
 import { ClassManagerButton } from './components/class-manager/class-manager-button';
-import { panel } from './components/class-manager/class-manager-panel';
 import { ConvertLocalClassToGlobalClass } from './components/convert-local-class-to-global-class';
 import { GlobalStylesImportListener } from './components/global-styles-import-listener';
-import { OpenPanelFromEvent } from './components/open-panel-from-event';
-import { OpenPanelFromUrl } from './components/open-panel-from-url';
 import { PopulateStore } from './components/populate-store';
 import { GLOBAL_CLASSES_PROVIDER_KEY, globalClassesStylesProvider } from './global-classes-styles-provider';
 import { PrefetchCssClassUsage } from './hooks/use-prefetch-css-class-usage';
@@ -26,10 +21,6 @@ import { SyncWithDocumentSave } from './sync-with-document';
 export function init() {
 	registerSlice( slice );
 
-	if ( ! isExperimentActive( 'e_editor_design_system_panel' ) ) {
-		registerPanel( panel );
-	}
-
 	stylesRepository.register( globalClassesStylesProvider );
 
 	injectIntoLogic( {
@@ -52,18 +43,6 @@ export function init() {
 		component: PrefetchCssClassUsage,
 	} );
 
-	if ( ! isExperimentActive( 'e_editor_design_system_panel' ) ) {
-		injectIntoLogic( {
-			id: 'global-classes-open-panel-from-url',
-			component: OpenPanelFromUrl,
-		} );
-
-		injectIntoLogic( {
-			id: 'global-classes-open-panel-from-event',
-			component: OpenPanelFromEvent,
-		} );
-	}
-
 	injectIntoCssClassConvert( {
 		id: 'global-classes-convert-from-local-class',
 		component: ConvertLocalClassToGlobalClass,

package/src/sync-with-document.tsx

@@ -1,26 +1,19 @@
 import { useEffect } from 'react';
-import { __privateListenTo as listenTo, isExperimentActive, v1ReadyEvent } from '@elementor/editor-v1-adapters';
+import { __privateListenTo as listenTo, v1ReadyEvent } from '@elementor/editor-v1-adapters';
 
-import { usePanelActions } from './components/class-manager/class-manager-panel';
 import { syncWithDocumentSave } from './sync-with-document-save';
 
 export function SyncWithDocumentSave() {
-	const { open: openClassPanel } = usePanelActions();
-
 	useEffect( () => {
 		const unsubscribe = listenTo( v1ReadyEvent(), () => {
-			const open = isExperimentActive( 'e_editor_design_system_panel' )
-				? () => {
-						window.dispatchEvent( new CustomEvent( 'elementor/open-global-classes-manager' ) );
-				  }
-				: openClassPanel;
+			const open = () => {
+				window.dispatchEvent( new CustomEvent( 'elementor/open-global-classes-manager' ) );
+			};
 
 			syncWithDocumentSave( { open } );
 		} );
 
 		return unsubscribe;
-
-		// eslint-disable-next-line react-hooks/exhaustive-deps -- bind once at v1 ready; openClassPanel from createPanel is stable
 	}, [] );
 
 	return null;

package/src/components/open-panel-from-event.tsx

@@ -1,19 +0,0 @@
-import { useEffect } from 'react';
-
-import { usePanelActions } from './class-manager/class-manager-panel';
-
-const EVENT_OPEN_GLOBAL_CLASSES_MANAGER = 'elementor/open-global-classes-manager';
-
-export function OpenPanelFromEvent() {
-	const { open } = usePanelActions();
-
-	useEffect( () => {
-		const handler = () => open();
-
-		window.addEventListener( EVENT_OPEN_GLOBAL_CLASSES_MANAGER, handler );
-
-		return () => window.removeEventListener( EVENT_OPEN_GLOBAL_CLASSES_MANAGER, handler );
-	}, [ open ] );
-
-	return null;
-}

package/src/components/open-panel-from-url.tsx

@@ -1,40 +0,0 @@
-import { useEffect, useRef } from 'react';
-import { __privateListenTo as listenTo, routeOpenEvent } from '@elementor/editor-v1-adapters';
-
-import { usePanelActions } from './class-manager/class-manager-panel';
-
-const ACTIVE_PANEL_PARAM = 'active-panel';
-const PANEL_ID = 'global-classes-manager';
-const DEFAULT_PANEL_ROUTE = 'panel/elements';
-
-export function OpenPanelFromUrl() {
-	const { open } = usePanelActions();
-	const hasOpened = useRef( false );
-
-	useEffect( () => {
-		const urlParams = new URLSearchParams( window.location.search );
-		const activePanel = urlParams.get( ACTIVE_PANEL_PARAM );
-
-		if ( activePanel !== PANEL_ID ) {
-			return;
-		}
-
-		// Listen for the default panel route to open - this signals Elementor initialization is complete
-		const cleanup = listenTo( routeOpenEvent( DEFAULT_PANEL_ROUTE ), () => {
-			if ( hasOpened.current ) {
-				return;
-			}
-
-			hasOpened.current = true;
-
-			// Open panel after default route is established
-			requestAnimationFrame( () => {
-				open();
-			} );
-		} );
-
-		return cleanup;
-	}, [ open ] );
-
-	return null;
-}