@elementor/editor-global-classes 4.0.0-564 → 4.0.0-591

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elementor/editor-global-classes",
-  "version": "4.0.0-564",
+  "version": "4.0.0-591",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -39,28 +39,28 @@
     "dev": "tsup --config=../../tsup.dev.ts"
   },
   "dependencies": {
-    "@elementor/editor": "4.0.0-564",
-    "@elementor/editor-current-user": "4.0.0-564",
-    "@elementor/editor-documents": "4.0.0-564",
-    "@elementor/editor-editing-panel": "4.0.0-564",
-    "@elementor/editor-mcp": "4.0.0-564",
-    "@elementor/editor-panels": "4.0.0-564",
-    "@elementor/editor-props": "4.0.0-564",
-    "@elementor/editor-variables": "4.0.0-564",
-    "@elementor/editor-styles": "4.0.0-564",
-    "@elementor/editor-canvas": "4.0.0-564",
-    "@elementor/editor-styles-repository": "4.0.0-564",
-    "@elementor/editor-ui": "4.0.0-564",
-    "@elementor/editor-v1-adapters": "4.0.0-564",
-    "@elementor/http-client": "4.0.0-564",
+    "@elementor/editor": "4.0.0-591",
+    "@elementor/editor-current-user": "4.0.0-591",
+    "@elementor/editor-documents": "4.0.0-591",
+    "@elementor/editor-editing-panel": "4.0.0-591",
+    "@elementor/editor-mcp": "4.0.0-591",
+    "@elementor/editor-panels": "4.0.0-591",
+    "@elementor/editor-props": "4.0.0-591",
+    "@elementor/editor-variables": "4.0.0-591",
+    "@elementor/editor-styles": "4.0.0-591",
+    "@elementor/editor-canvas": "4.0.0-591",
+    "@elementor/editor-styles-repository": "4.0.0-591",
+    "@elementor/editor-ui": "4.0.0-591",
+    "@elementor/editor-v1-adapters": "4.0.0-591",
+    "@elementor/http-client": "4.0.0-591",
     "@elementor/icons": "^1.63.0",
-    "@elementor/query": "4.0.0-564",
-    "@elementor/schema": "4.0.0-564",
-    "@elementor/store": "4.0.0-564",
+    "@elementor/query": "4.0.0-591",
+    "@elementor/schema": "4.0.0-591",
+    "@elementor/store": "4.0.0-591",
     "@elementor/ui": "1.36.17",
-    "@elementor/utils": "4.0.0-564",
+    "@elementor/utils": "4.0.0-591",
     "@wordpress/i18n": "^5.13.0",
-    "@elementor/events": "4.0.0-564"
+    "@elementor/events": "4.0.0-591"
   },
   "peerDependencies": {
     "react": "^18.3.1",

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

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { useRef, useState } from 'react';
 import { validateStyleLabel } from '@elementor/editor-styles-repository';
 import { EditableField, EllipsisWithTooltip, MenuListItem, useEditable, WarningInfotip } from '@elementor/editor-ui';
+import { isExperimentActive } from '@elementor/editor-v1-adapters';
 import { DotsVerticalIcon } from '@elementor/icons';
 import {
 	bindMenu,
@@ -32,6 +33,8 @@ type ClassItemProps = React.PropsWithChildren< {
 	disabled?: boolean;
 	sortableTriggerProps: SortableTriggerProps;
 	showSortIndicator?: boolean;
+	syncToV3?: boolean;
+	onToggleSync?: ( id: string, newValue: boolean ) => void;
 } >;
 
 export const ClassItem = ( {
@@ -42,6 +45,8 @@ export const ClassItem = ( {
 	disabled,
 	sortableTriggerProps,
 	showSortIndicator,
+	syncToV3,
+	onToggleSync,
 }: ClassItemProps ) => {
 	const itemRef = useRef< HTMLElement >( null );
 	const {
@@ -137,6 +142,20 @@ export const ClassItem = ( {
 						{ __( 'Rename', 'elementor' ) }
 					</Typography>
 				</MenuListItem>
+				{ isExperimentActive( 'e_design_system_sync' ) && onToggleSync && (
+					<MenuListItem
+						onClick={ () => {
+							popupState.close();
+							onToggleSync( id, ! syncToV3 );
+						} }
+					>
+						<Typography variant="caption" sx={ { color: 'text.primary' } }>
+							{ syncToV3
+								? __( 'Stop syncing to Version 3', 'elementor' )
+								: __( 'Sync to Version 3', 'elementor' ) }
+						</Typography>
+					</MenuListItem>
+				) }
 				<MenuListItem
 					onClick={ () => {
 						popupState.close();

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

@@ -1,5 +1,6 @@
 import * as React from 'react';
-import { useEffect } from 'react';
+import { useCallback, useEffect, useState } from 'react';
+import { useSuppressedMessage } from '@elementor/editor-current-user';
 import { getCurrentDocument, getV1DocumentsManager, setDocumentModifiedStatus } from '@elementor/editor-documents';
 import {
 	__createPanel as createPanel,
@@ -9,7 +10,7 @@ import {
 	PanelHeader,
 	PanelHeaderTitle,
 } from '@elementor/editor-panels';
-import { SaveChangesDialog, ThemeProvider, useDialog } from '@elementor/editor-ui';
+import { ConfirmationDialog, SaveChangesDialog, ThemeProvider, useDialog } from '@elementor/editor-ui';
 import { __privateRunCommand as runCommand, changeEditMode } from '@elementor/editor-v1-adapters';
 import { XIcon } from '@elementor/icons';
 import { useMutation } from '@elementor/query';
@@ -42,6 +43,15 @@ import { hasDeletedItems, onDelete } from './delete-class';
 import { FlippedColorSwatchIcon } from './flipped-color-swatch-icon';
 import { GlobalClassesList } from './global-classes-list';
 import { blockPanelInteractions, unblockPanelInteractions } from './panel-interactions';
+import { StartSyncToV3Modal } from './start-sync-to-v3-modal';
+
+const STOP_SYNC_MESSAGE_KEY = 'stop-sync-class';
+
+type StopSyncConfirmationDialogProps = {
+	open: boolean;
+	onClose: () => void;
+	onConfirm: () => void;
+};
 
 const id = 'global-classes-manager';
 
@@ -83,6 +93,9 @@ export function ClassManagerPanel() {
 	const isDirty = useDirtyState();
 	const { close: closePanel } = usePanelActions();
 	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 { mutateAsync: publish, isPending: isPublishing } = usePublish();
 
@@ -91,6 +104,41 @@ export function ClassManagerPanel() {
 		closeSaveChangesDialog();
 	};
 
+	const handleStopSync = useCallback( ( classId: string ) => {
+		dispatch(
+			slice.actions.update( {
+				style: {
+					id: classId,
+					sync_to_v3: false,
+				},
+			} )
+		);
+		setStopSyncConfirmation( null );
+	}, [] );
+
+	const handleStartSync = useCallback( ( classId: string ) => {
+		dispatch(
+			slice.actions.update( {
+				style: {
+					id: classId,
+					sync_to_v3: true,
+				},
+			} )
+		);
+		setStartSyncConfirmation( null );
+	}, [] );
+
+	const handleStopSyncRequest = useCallback(
+		( classId: string ) => {
+			if ( ! isStopSyncSuppressed ) {
+				setStopSyncConfirmation( classId );
+			} else {
+				handleStopSync( classId );
+			}
+		},
+		[ isStopSyncSuppressed, handleStopSync ]
+	);
+
 	usePreventUnload();
 
 	return (
@@ -145,7 +193,11 @@ export function ClassManagerPanel() {
 									overflowY: 'auto',
 								} }
 							>
-								<GlobalClassesList disabled={ isPublishing } />
+								<GlobalClassesList
+									disabled={ isPublishing }
+									onStopSyncRequest={ handleStopSyncRequest }
+									onStartSyncRequest={ ( classId ) => setStartSyncConfirmation( classId ) }
+								/>
 							</Box>
 						</PanelBody>
 
@@ -166,6 +218,20 @@ export function ClassManagerPanel() {
 				</Panel>
 			</ErrorBoundary>
 			<ClassManagerIntroduction />
+			{ startSyncConfirmation && (
+				<StartSyncToV3Modal
+					externalOpen
+					onExternalClose={ () => setStartSyncConfirmation( null ) }
+					onConfirm={ () => handleStartSync( startSyncConfirmation ) }
+				/>
+			) }
+			{ stopSyncConfirmation && (
+				<StopSyncConfirmationDialog
+					open
+					onClose={ () => setStopSyncConfirmation( null ) }
+					onConfirm={ () => handleStopSync( stopSyncConfirmation ) }
+				/>
+			) }
 			{ isSaveChangesDialogOpen && (
 				<SaveChangesDialog>
 					<DialogHeader onClose={ closeSaveChangesDialog } logo={ false }>
@@ -261,3 +327,35 @@ const TotalCssClassCounter = () => {
 		/>
 	);
 };
+
+const StopSyncConfirmationDialog = ( { open, onClose, onConfirm }: StopSyncConfirmationDialogProps ) => {
+	const [ , suppressStopSyncMessage ] = useSuppressedMessage( STOP_SYNC_MESSAGE_KEY );
+
+	return (
+		<ConfirmationDialog open={ open } onClose={ onClose }>
+			<ConfirmationDialog.Title icon={ FlippedColorSwatchIcon } iconColor="primary">
+				{ __( 'Un-sync typography class', 'elementor' ) }
+			</ConfirmationDialog.Title>
+			<ConfirmationDialog.Content>
+				<ConfirmationDialog.ContentText>
+					{ __( "You're about to stop syncing a typography class to version 3.", 'elementor' ) }
+				</ConfirmationDialog.ContentText>
+				<ConfirmationDialog.ContentText sx={ { mt: 1 } }>
+					{ __(
+						"Note that if it's being used anywhere, the affected elements will inherit the default typography.",
+						'elementor'
+					) }
+				</ConfirmationDialog.ContentText>
+			</ConfirmationDialog.Content>
+			<ConfirmationDialog.Actions
+				onClose={ onClose }
+				onConfirm={ onConfirm }
+				cancelLabel={ __( 'Cancel', 'elementor' ) }
+				confirmLabel={ __( 'Got it', 'elementor' ) }
+				color="primary"
+				onSuppressMessage={ suppressStopSyncMessage }
+				suppressLabel={ __( "Don't show again", 'elementor' ) }
+			/>
+		</ConfirmationDialog>
+	);
+};

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

@@ -19,9 +19,11 @@ import { SortableItem, SortableProvider } from './sortable';
 
 type GlobalClassesListProps = {
 	disabled?: boolean;
+	onStopSyncRequest?: ( id: string ) => void;
+	onStartSyncRequest?: ( id: string ) => void;
 };
 
-export const GlobalClassesList = ( { disabled }: GlobalClassesListProps ) => {
+export const GlobalClassesList = ( { disabled, onStopSyncRequest, onStartSyncRequest }: GlobalClassesListProps ) => {
 	const {
 		search: { debouncedValue: searchValue },
 	} = useSearchAndFilters();
@@ -73,28 +75,28 @@ export const GlobalClassesList = ( { disabled }: GlobalClassesListProps ) => {
 					onChange={ reorderClasses }
 					disableDragOverlay={ ! allowSorting }
 				>
-					{ filteredCssClasses?.map( ( { id, label } ) => (
-						<SortableItem key={ id } id={ id }>
+					{ filteredCssClasses?.map( ( cssClass ) => (
+						<SortableItem key={ cssClass.id } id={ cssClass.id }>
 							{ ( { isDragged, isDragPlaceholder, triggerProps, triggerStyle } ) => {
 								if ( isDragged && ! draggedItemId ) {
-									setDraggedItemId( id );
+									setDraggedItemId( cssClass.id );
 								}
 								return (
 									<ClassItem
-										id={ id }
-										label={ label }
+										id={ cssClass.id }
+										label={ cssClass.label }
 										renameClass={ ( newLabel: string ) => {
 											trackGlobalClasses( {
 												event: 'classRenamed',
-												classId: id,
-												oldValue: label,
+												classId: cssClass.id,
+												oldValue: cssClass.label,
 												newValue: newLabel,
 												source: 'class-manager',
 											} );
 											dispatch(
 												slice.actions.update( {
 													style: {
-														id,
+														id: cssClass.id,
 														label: newLabel,
 													},
 												} )
@@ -107,6 +109,23 @@ export const GlobalClassesList = ( { disabled }: GlobalClassesListProps ) => {
 											style: triggerStyle,
 										} }
 										showSortIndicator={ allowSorting }
+										syncToV3={ cssClass.sync_to_v3 }
+										onToggleSync={ ( id, newValue ) => {
+											if ( ! newValue && onStopSyncRequest ) {
+												onStopSyncRequest( id );
+											} else if ( newValue && onStartSyncRequest ) {
+												onStartSyncRequest( id );
+											} else {
+												dispatch(
+													slice.actions.update( {
+														style: {
+															id,
+															sync_to_v3: newValue,
+														},
+													} )
+												);
+											}
+										} }
 									/>
 								);
 							} }

package/src/components/class-manager/start-sync-to-v3-modal.tsx

@@ -0,0 +1,76 @@
+import * as React from 'react';
+import { useState } from 'react';
+import {
+	Box,
+	Button,
+	Checkbox,
+	Dialog,
+	DialogActions,
+	DialogContent,
+	FormControlLabel,
+	Typography,
+} from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+
+const IMAGE_URL = 'https://assets.elementor.com/packages/v1/images/class-manager-sync-modal.png';
+
+type StartSyncToV3ModalProps = {
+	externalOpen?: boolean;
+	onExternalClose?: () => void;
+	onConfirm?: () => void;
+};
+
+export const StartSyncToV3Modal = ( { externalOpen, onExternalClose, onConfirm }: StartSyncToV3ModalProps = {} ) => {
+	const [ shouldShowAgain, setShouldShowAgain ] = useState( true );
+
+	const handleClose = () => {
+		onExternalClose?.();
+	};
+
+	const handleConfirm = () => {
+		onConfirm?.();
+		onExternalClose?.();
+	};
+
+	return (
+		<Dialog open={ !! externalOpen } onClose={ handleClose } maxWidth="sm" fullWidth>
+			<DialogContent sx={ { p: 0 } }>
+				<Box component="img" src={ IMAGE_URL } alt="" sx={ { width: '100%', display: 'block' } } />
+				<Box sx={ { px: 3, pt: 4, pb: 1 } }>
+					<Typography variant="h6">{ __( 'Sync class to version 3 Global Fonts', 'elementor' ) }</Typography>
+					<Typography variant="body2" color="secondary" sx={ { mb: 2, pt: 1 } }>
+						{ __(
+							'Only typography settings supported in version 3 will be applied, including: font family, responsive font sizes, weight, text transform, decoration, line height, letter spacing, and word spacing. Changes made in the class will automatically apply to version 3.',
+							'elementor'
+						) }
+					</Typography>
+				</Box>
+			</DialogContent>
+			<DialogActions sx={ { justifyContent: 'space-between', px: 3, pb: 2 } }>
+				<FormControlLabel
+					control={
+						<Checkbox
+							checked={ ! shouldShowAgain }
+							onChange={ ( e: React.ChangeEvent< HTMLInputElement > ) =>
+								setShouldShowAgain( ! e.target.checked )
+							}
+						/>
+					}
+					label={
+						<Typography variant="body2" color="secondary">
+							{ __( "Don't show again", 'elementor' ) }
+						</Typography>
+					}
+				/>
+				<Box sx={ { display: 'flex', gap: 1 } }>
+					<Button onClick={ handleClose } color="secondary" size="small">
+						{ __( 'Cancel', 'elementor' ) }
+					</Button>
+					<Button onClick={ handleConfirm } variant="contained" size="small">
+						{ __( 'Sync to version 3', 'elementor' ) }
+					</Button>
+				</Box>
+			</DialogActions>
+		</Dialog>
+	);
+};