@elementor/editor-global-classes 4.1.0-manual → 4.2.0-839

package/package.json

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

package/src/api.ts

@@ -1,4 +1,4 @@
-import { type StyleDefinition, type StyleDefinitionID, type StyleDefinitionsMap } from '@elementor/editor-styles';
+import { type StyleDefinition, type StyleDefinitionID } from '@elementor/editor-styles';
 import { type HttpResponse, httpService } from '@elementor/http-client';
 
 import { type CssClassUsage } from './components/css-class-usage/types';
@@ -7,13 +7,24 @@ import { type GlobalClasses } from './store';
 const RESOURCE_URL = '/global-classes';
 const BASE_URL = 'elementor/v1';
 const RESOURCE_USAGE_URL = `${ RESOURCE_URL }/usage`;
+const RESOURCE_POST_URL = `${ RESOURCE_URL }/post`;
+const RESOURCE_STYLES_URL = `${ RESOURCE_URL }/styles`;
 
 type GlobalClassesUsageResponse = HttpResponse< CssClassUsage >;
 
-export type GlobalClassesGetAllResponse = HttpResponse<
-	StyleDefinitionsMap,
+export type GlobalClassIndexEntry = {
+	id: StyleDefinitionID;
+	label: string;
+};
+
+export type GlobalClassesIndexHttpResponse = HttpResponse< GlobalClassIndexEntry[], Record< string, never > >;
+
+export type StyleDefinitionsNullableMap = Record< StyleDefinitionID, StyleDefinition | null >;
+
+export type GlobalClassesStylesHttpResponse = HttpResponse<
+	StyleDefinitionsNullableMap,
 	{
-		order: StyleDefinition[ 'id' ][];
+		order: StyleDefinitionID[];
 	}
 >;
 
@@ -27,27 +38,33 @@ type UpdatePayload = GlobalClasses & {
 
 export type ApiContext = 'preview' | 'frontend';
 
+function saveGlobalClasses( context: ApiContext, payload: UpdatePayload ) {
+	return httpService().put( `${ BASE_URL }${ RESOURCE_URL }`, payload, {
+		params: { context },
+	} );
+}
+
 export const apiClient = {
 	usage: () => httpService().get< GlobalClassesUsageResponse >( `${ BASE_URL }${ RESOURCE_USAGE_URL }` ),
 
 	all: ( context: ApiContext = 'preview' ) =>
-		httpService().get< GlobalClassesGetAllResponse >( `${ BASE_URL }${ RESOURCE_URL }`, {
+		httpService().get< GlobalClassesIndexHttpResponse >( `${ BASE_URL }${ RESOURCE_URL }`, {
 			params: { context },
 		} ),
 
-	publish: ( payload: UpdatePayload ) =>
-		httpService().put( 'elementor/v1' + RESOURCE_URL, payload, {
-			params: {
-				context: 'frontend' satisfies ApiContext,
-			},
+	getStylesForPost: ( postId: number, context: ApiContext = 'preview' ) =>
+		httpService().get< GlobalClassesStylesHttpResponse >( `${ BASE_URL }${ RESOURCE_POST_URL }`, {
+			params: { context, post_id: postId },
 		} ),
 
-	saveDraft: ( payload: UpdatePayload ) =>
-		httpService().put( 'elementor/v1' + RESOURCE_URL, payload, {
-			params: {
-				context: 'preview' satisfies ApiContext,
-			},
+	getStylesByIds: ( ids: StyleDefinitionID[], context: ApiContext = 'preview' ) =>
+		httpService().get< GlobalClassesStylesHttpResponse >( `${ BASE_URL }${ RESOURCE_STYLES_URL }`, {
+			params: { context, ids: ids.join( ',' ) },
 		} ),
+
+	publish: ( payload: UpdatePayload ) => saveGlobalClasses( 'frontend', payload ),
+
+	saveDraft: ( payload: UpdatePayload ) => saveGlobalClasses( 'preview', payload ),
 };
 
 export const API_ERROR_CODES = {

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

@@ -5,6 +5,7 @@ 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';
 
@@ -36,18 +37,27 @@ export const ClassManagerButton = () => {
 		return null;
 	}
 
+	const toggleClassesManagerPanel = () => {
+		if ( isExperimentActive( 'e_editor_design_system_panel' ) ) {
+			window.dispatchEvent(
+				new CustomEvent( 'elementor/toggle-design-system', {
+					detail: { tab: 'classes' as const },
+				} )
+			);
+		} else {
+			openPanel();
+		}
+	};
+
 	const handleOpenPanel = () => {
 		if ( document?.isDirty ) {
 			openSaveChangesDialog();
 			return;
 		}
 
-		openPanel();
+		toggleClassesManagerPanel();
+
 		trackGlobalClassesButton();
-		trackGlobalClasses( {
-			event: 'classManagerOpened',
-			source: 'style-panel',
-		} );
 		prefetchClassesUsage();
 	};
 
@@ -80,7 +90,7 @@ export const ClassManagerButton = () => {
 								action: async () => {
 									await saveDocument();
 									closeSaveChangesDialog();
-									openPanel();
+									toggleClassesManagerPanel();
 									trackGlobalClassesButton();
 									prefetchClassesUsage();
 								},

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

@@ -1,7 +1,7 @@
 import * as React from 'react';
-import { useCallback, useEffect, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useSuppressedMessage } from '@elementor/editor-current-user';
-import { getCurrentDocument, getV1DocumentsManager, setDocumentModifiedStatus } from '@elementor/editor-documents';
+import { reloadCurrentDocument, setDocumentModifiedStatus } from '@elementor/editor-documents';
 import {
 	__createPanel as createPanel,
 	Panel,
@@ -11,7 +11,7 @@ import {
 	PanelHeaderTitle,
 } from '@elementor/editor-panels';
 import { ConfirmationDialog, SaveChangesDialog, ThemeProvider, useDialog } from '@elementor/editor-ui';
-import { __privateRunCommand as runCommand, changeEditMode } from '@elementor/editor-v1-adapters';
+import { changeEditMode } from '@elementor/editor-v1-adapters';
 import { XIcon } from '@elementor/icons';
 import { useMutation } from '@elementor/query';
 import { __dispatch as dispatch } from '@elementor/store';
@@ -56,23 +56,25 @@ type StopSyncConfirmationDialogProps = {
 
 const id = 'global-classes-manager';
 
-const reloadDocument = () => {
-	const currentDocument = getCurrentDocument();
-	const documentsManager = getV1DocumentsManager();
+export type ClassManagerPanelEmbeddedProps = {
+	onRequestClose: () => void | Promise< void >;
+	onExposeCloseAttempt?: ( attemptClose: ( () => void ) | null ) => void;
+};
 
-	documentsManager.invalidateCache();
+export function ClassManagerPanelEmbedded( { onRequestClose, onExposeCloseAttempt }: ClassManagerPanelEmbeddedProps ) {
+	return (
+		<ClassManagerPanelRoot
+			embedded
+			onRequestClose={ onRequestClose }
+			onExposeCloseAttempt={ onExposeCloseAttempt }
+		/>
+	);
+}
 
-	return runCommand( 'editor/documents/switch', {
-		id: currentDocument?.id,
-		shouldScroll: false,
-		shouldNavigateToDefaultRoute: false,
-	} );
-};
+export function ClassManagerPanel() {
+	return <ClassManagerPanelRoot />;
+}
 
-// We need to disable the app-bar buttons, and the elements overlays when opening the classes manager panel.
-// The buttons and overlays are enabled only in edit mode, so we're creating a custom new edit mode that
-// will force them to be disabled. We can't use the `preview` edit mode in this case since it'll force
-// the panel to be closed.
 export const { panel, usePanelActions } = createPanel( {
 	id,
 	component: ClassManagerPanel,
@@ -84,19 +86,35 @@ export const { panel, usePanelActions } = createPanel( {
 	},
 	onClose: async () => {
 		changeEditMode( 'edit' );
-		await reloadDocument();
+		await reloadCurrentDocument();
 		unblockPanelInteractions();
 	},
 	isOpenPreviousElement: true,
 } );
 
-export function ClassManagerPanel() {
+type ClassManagerPanelRootProps = {
+	embedded?: boolean;
+	onRequestClose?: () => void | Promise< void >;
+	onExposeCloseAttempt?: ( attemptClose: ( () => void ) | null ) => void;
+};
+
+function ClassManagerPanelRoot( {
+	embedded = false,
+	onRequestClose,
+	onExposeCloseAttempt,
+}: ClassManagerPanelRootProps = {} ) {
 	const isDirty = useDirtyState();
-	const { close: closePanel } = usePanelActions();
+	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 );
 	const [ isStopSyncSuppressed ] = useSuppressedMessage( STOP_SYNC_MESSAGE_KEY );
+	const [ scrollElement, setScrollElement ] = useState< HTMLElement | null >( null );
 
 	const { mutateAsync: publish, isPending: isPublishing } = usePublish();
 
@@ -105,6 +123,37 @@ export function ClassManagerPanel() {
 		closeSaveChangesDialog();
 	};
 
+	const handleClosePanel = useCallback( () => {
+		if ( isDirty ) {
+			openSaveChangesDialog();
+			return;
+		}
+
+		void closePanel();
+	}, [ isDirty, openSaveChangesDialog, closePanel ] );
+
+	useEffect( () => {
+		if ( ! embedded || ! onExposeCloseAttempt ) {
+			return;
+		}
+
+		onExposeCloseAttempt( () => handleClosePanel() );
+
+		return () => onExposeCloseAttempt( null );
+	}, [ embedded, onExposeCloseAttempt, handleClosePanel ] );
+
+	useEffect( () => {
+		if ( ! embedded ) {
+			return;
+		}
+
+		blockPanelInteractions();
+
+		return () => {
+			unblockPanelInteractions();
+		};
+	}, [ embedded ] );
+
 	const handleStopSync = useCallback( ( classId: string ) => {
 		dispatch(
 			slice.actions.update( {
@@ -144,83 +193,56 @@ export function ClassManagerPanel() {
 
 	usePreventUnload();
 
-	return (
-		<ThemeProvider>
-			<ErrorBoundary fallback={ <ErrorBoundaryFallback /> }>
-				<Panel>
-					<SearchAndFilterProvider>
-						<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>
-								<CloseButton
-									sx={ { marginLeft: 'auto' } }
-									disabled={ isPublishing }
-									onClose={ () => {
-										if ( isDirty ) {
-											openSaveChangesDialog();
-											return;
-										}
-
-										closePanel();
-									} }
-								/>
-							</Stack>
-						</PanelHeader>
-						<PanelBody
-							sx={ {
-								display: 'flex',
-								flexDirection: 'column',
-								height: '100%',
-							} }
-						>
-							<Box px={ 2 } pb={ 1 }>
-								<Stack direction="row" justifyContent="spaceBetween" gap={ 0.5 } sx={ { pb: 0.5 } }>
-									<Box sx={ { flexGrow: 1 } }>
-										<ClassManagerSearch />
-									</Box>
-									<CssClassFilter />
-								</Stack>
-								<ActiveFilters />
-							</Box>
-							<Divider />
-							<Box
-								px={ 2 }
-								sx={ {
-									flexGrow: 1,
-									overflowY: 'auto',
-								} }
-							>
-								<GlobalClassesList
-									disabled={ isPublishing }
-									onStopSyncRequest={ handleStopSyncRequest }
-									onStartSyncRequest={ ( classId ) => setStartSyncConfirmation( classId ) }
-								/>
-							</Box>
-						</PanelBody>
-
-						<PanelFooter>
-							<Button
-								fullWidth
-								size="small"
-								color="global"
-								variant="contained"
-								onClick={ publish }
-								disabled={ ! isDirty }
-								loading={ isPublishing }
-							>
-								{ __( 'Save changes', 'elementor' ) }
-							</Button>
-						</PanelFooter>
-					</SearchAndFilterProvider>
-				</Panel>
-			</ErrorBoundary>
-			<ClassManagerIntroduction />
+	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 = (
+		<>
 			{ startSyncConfirmation && (
 				<StartSyncToV3Modal
 					externalOpen
@@ -264,19 +286,93 @@ export function ClassManagerPanel() {
 								action: async () => {
 									await publish();
 									closeSaveChangesDialog();
-									closePanel();
+									void closePanel();
 								},
 							},
 						} }
 					/>
 				</SaveChangesDialog>
 			) }
-		</ThemeProvider>
+		</>
+	);
+
+	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 CloseButton = ( { onClose, ...props }: IconButtonProps & { onClose: () => void } ) => (
-	<IconButton size="small" color="secondary" onClick={ onClose } aria-label="Close" { ...props }>
+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>
 );

package/src/components/class-manager/global-classes-list.tsx

@@ -3,6 +3,7 @@ import { useEffect, useMemo, useState } from 'react';
 import { type StyleDefinition, type StyleDefinitionID } from '@elementor/editor-styles';
 import { __useDispatch as useDispatch } from '@elementor/store';
 import { List, Stack, styled, Typography, type TypographyProps } from '@elementor/ui';
+import { defaultRangeExtractor, useVirtualizer } from '@tanstack/react-virtual';
 import { __ } from '@wordpress/i18n';
 
 import { useClassesOrder } from '../../hooks/use-classes-order';
@@ -17,13 +18,22 @@ import { FlippedColorSwatchIcon } from './flipped-color-swatch-icon';
 import { getNotFoundType, NotFound } from './not-found';
 import { SortableItem, SortableProvider } from './sortable';
 
+const ROW_HEIGHT = 40;
+const OVERSCAN = 6;
+
 type GlobalClassesListProps = {
 	disabled?: boolean;
+	scrollElement?: HTMLElement | null;
 	onStopSyncRequest?: ( id: string ) => void;
 	onStartSyncRequest?: ( id: string ) => void;
 };
 
-export const GlobalClassesList = ( { disabled, onStopSyncRequest, onStartSyncRequest }: GlobalClassesListProps ) => {
+export const GlobalClassesList = ( {
+	disabled,
+	scrollElement,
+	onStopSyncRequest,
+	onStartSyncRequest,
+}: GlobalClassesListProps ) => {
 	const {
 		search: { debouncedValue: searchValue },
 	} = useSearchAndFilters();
@@ -35,6 +45,27 @@ export const GlobalClassesList = ( { disabled, onStopSyncRequest, onStartSyncReq
 	const [ classesOrder, reorderClasses ] = useReorder( draggedItemId, setDraggedItemId, draggedItemLabel ?? '' );
 	const filteredCssClasses = useFilteredCssClasses();
 
+	const virtualizer = useVirtualizer( {
+		count: filteredCssClasses.length,
+		getScrollElement: () => scrollElement ?? null,
+		estimateSize: () => ROW_HEIGHT,
+		overscan: OVERSCAN,
+		getItemKey: ( index ) => filteredCssClasses[ index ].id,
+		// Keep the actively dragged row mounted even when scrolled out of view.
+		// SortableItem unregisters its render on unmount, which would make the
+		// DragOverlay clone disappear mid-drag.
+		rangeExtractor: ( range ) => {
+			const indices = new Set( defaultRangeExtractor( range ) );
+			if ( draggedItemId ) {
+				const draggedItemIndex = filteredCssClasses.findIndex( ( cssClass ) => cssClass.id === draggedItemId );
+				if ( draggedItemIndex >= 0 ) {
+					indices.add( draggedItemIndex );
+				}
+			}
+			return [ ...indices ].sort( ( a, b ) => a - b );
+		},
+	} );
+
 	useEffect( () => {
 		const handler = ( event: KeyboardEvent ) => {
 			if ( event.key === 'z' && ( event.ctrlKey || event.metaKey ) ) {
@@ -69,19 +100,36 @@ export const GlobalClassesList = ( { disabled, onStopSyncRequest, onStartSyncReq
 
 	return (
 		<DeleteConfirmationProvider>
-			<List sx={ { display: 'flex', flexDirection: 'column', gap: 0.5 } }>
+			<List
+				sx={ {
+					position: 'relative',
+					display: 'block',
+					height: virtualizer.getTotalSize(),
+					padding: 0,
+				} }
+			>
 				<SortableProvider
 					value={ classesOrder }
 					onChange={ reorderClasses }
+					onDragStart={ ( event ) => setDraggedItemId( event.active.id as StyleDefinitionID ) }
+					onDragEnd={ () => setDraggedItemId( null ) }
+					onDragCancel={ () => setDraggedItemId( null ) }
 					disableDragOverlay={ ! allowSorting }
 				>
-					{ filteredCssClasses?.map( ( cssClass ) => (
-						<SortableItem key={ cssClass.id } id={ cssClass.id }>
-							{ ( { isDragged, isDragPlaceholder, triggerProps, triggerStyle } ) => {
-								if ( isDragged && ! draggedItemId ) {
-									setDraggedItemId( cssClass.id );
-								}
-								return (
+					{ virtualizer.getVirtualItems().map( ( virtualRow ) => {
+						const cssClass = filteredCssClasses[ virtualRow.index ];
+						return (
+							<SortableItem
+								key={ virtualRow.key }
+								id={ cssClass.id }
+								style={ {
+									position: 'absolute',
+									top: virtualRow.start,
+									left: 0,
+									width: '100%',
+								} }
+							>
+								{ ( { isDragged, isDragPlaceholder, triggerProps, triggerStyle } ) => (
 									<ClassItem
 										id={ cssClass.id }
 										label={ cssClass.label }
@@ -127,10 +175,10 @@ export const GlobalClassesList = ( { disabled, onStopSyncRequest, onStartSyncReq
 											}
 										} }
 									/>
-								);
-							} }
-						</SortableItem>
-					) ) }
+								) }
+							</SortableItem>
+						);
+					} ) }
 				</SortableProvider>
 			</List>
 		</DeleteConfirmationProvider>
@@ -176,7 +224,7 @@ const useReorder = (
 				classId: draggedItemId,
 				classTitle: draggedItemLabel,
 			} );
-			setDraggedItemId( null ); // Reset after tracking
+			setDraggedItemId( null );
 		}
 	};