@elementor/editor-variables 4.0.0-527 → 4.0.0-528

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elementor/editor-variables",
-  "version": "4.0.0-527",
+  "version": "4.0.0-528",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -39,22 +39,22 @@
     "dev": "tsup --config=../../tsup.dev.ts"
   },
   "dependencies": {
-    "@elementor/editor": "4.0.0-527",
-    "@elementor/editor-canvas": "4.0.0-527",
-    "@elementor/editor-controls": "4.0.0-527",
-    "@elementor/editor-current-user": "4.0.0-527",
-    "@elementor/editor-mcp": "4.0.0-527",
-    "@elementor/editor-panels": "4.0.0-527",
-    "@elementor/editor-props": "4.0.0-527",
-    "@elementor/editor-ui": "4.0.0-527",
-    "@elementor/editor-v1-adapters": "4.0.0-527",
-    "@elementor/menus": "4.0.0-527",
-    "@elementor/http-client": "4.0.0-527",
+    "@elementor/editor": "4.0.0-528",
+    "@elementor/editor-canvas": "4.0.0-528",
+    "@elementor/editor-controls": "4.0.0-528",
+    "@elementor/editor-current-user": "4.0.0-528",
+    "@elementor/editor-mcp": "4.0.0-528",
+    "@elementor/editor-panels": "4.0.0-528",
+    "@elementor/editor-props": "4.0.0-528",
+    "@elementor/editor-ui": "4.0.0-528",
+    "@elementor/editor-v1-adapters": "4.0.0-528",
+    "@elementor/menus": "4.0.0-528",
+    "@elementor/http-client": "4.0.0-528",
     "@elementor/icons": "^1.63.0",
-    "@elementor/mixpanel": "4.0.0-527",
-    "@elementor/schema": "4.0.0-527",
+    "@elementor/mixpanel": "4.0.0-528",
+    "@elementor/schema": "4.0.0-528",
     "@elementor/ui": "1.37.2",
-    "@elementor/utils": "4.0.0-527",
+    "@elementor/utils": "4.0.0-528",
     "@wordpress/i18n": "^5.13.0"
   },
   "peerDependencies": {

package/src/api.ts

@@ -19,6 +19,8 @@ export type BatchOperation = {
 		type?: string;
 		label?: string;
 		value?: string;
+		order?: number;
+		sync_to_v3?: boolean;
 	};
 	label?: string;
 	value?: string;

package/src/batch-operations.ts

@@ -37,6 +37,7 @@ export const buildOperationsArray = (
 			} );
 		} else if ( originalVariables[ id ] ) {
 			const original = originalVariables[ id ];
+			const syncChanged = original.sync_to_v3 !== variable.sync_to_v3;
 
 			if ( original.deleted && ! variable.deleted ) {
 				operations.push( {
@@ -49,7 +50,8 @@ export const buildOperationsArray = (
 				! variable.deleted &&
 				( original.label !== variable.label ||
 					original.value !== variable.value ||
-					original.order !== variable.order )
+					original.order !== variable.order ||
+					syncChanged )
 			) {
 				operations.push( {
 					type: 'update',
@@ -58,6 +60,7 @@ export const buildOperationsArray = (
 						...( original.label !== variable.label && { label: variable.label } ),
 						...( original.value !== variable.value && { value: variable.value } ),
 						...( original.order !== variable.order && { order: variable.order } ),
+						...( syncChanged && { sync_to_v3: variable.sync_to_v3 } ),
 					},
 				} );
 			}

package/src/components/ui/stop-sync-confirmation-dialog.tsx

@@ -0,0 +1,77 @@
+import * as React from 'react';
+import { useState } from 'react';
+import { BrushIcon } from '@elementor/icons';
+import {
+	Button,
+	Checkbox,
+	Dialog,
+	DialogActions,
+	DialogContent,
+	DialogContentText,
+	DialogTitle,
+	FormControlLabel,
+	Typography,
+} from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+
+type StopSyncConfirmationDialogProps = {
+	open: boolean;
+	closeDialog: () => void;
+	onConfirm: () => void;
+	onSuppressMessage?: () => void;
+};
+
+export const StopSyncConfirmationDialog = ( {
+	open,
+	closeDialog,
+	onConfirm,
+	onSuppressMessage,
+}: StopSyncConfirmationDialogProps ) => {
+	const [ dontShowAgain, setDontShowAgain ] = useState( false );
+
+	const handleConfirm = () => {
+		if ( dontShowAgain ) {
+			onSuppressMessage?.();
+		}
+		onConfirm();
+	};
+
+	return (
+		<Dialog open={ open } onClose={ closeDialog } maxWidth="xs">
+			<DialogTitle display="flex" alignItems="center" gap={ 1 }>
+				<BrushIcon color="secondary" />
+				{ __( 'Stop syncing variable color', 'elementor' ) }
+			</DialogTitle>
+			<DialogContent>
+				<DialogContentText variant="body2" color="textPrimary">
+					{ __(
+						'This will disconnect the variable color from version 3. Existing uses on your site will automatically switch to a default color.',
+						'elementor'
+					) }
+				</DialogContentText>
+			</DialogContent>
+			<DialogActions sx={ { justifyContent: 'space-between', alignItems: 'center' } }>
+				<FormControlLabel
+					control={
+						<Checkbox
+							checked={ dontShowAgain }
+							onChange={ ( event: React.ChangeEvent< HTMLInputElement > ) =>
+								setDontShowAgain( event.target.checked )
+							}
+							size="small"
+						/>
+					}
+					label={ <Typography variant="body2">{ __( "Don't show this again", 'elementor' ) }</Typography> }
+				/>
+				<div>
+					<Button color="secondary" onClick={ closeDialog }>
+						{ __( 'Cancel', 'elementor' ) }
+					</Button>
+					<Button variant="contained" color="secondary" onClick={ handleConfirm } sx={ { ml: 1 } }>
+						{ __( 'Got it', 'elementor' ) }
+					</Button>
+				</div>
+			</DialogActions>
+		</Dialog>
+	);
+};

package/src/components/variables-manager/hooks/use-variables-manager-state.ts

@@ -45,6 +45,22 @@ export const useVariablesManagerState = () => {
 		setIsDirty( true );
 	}, [] );
 
+	const handleStartSync = useCallback( ( itemId: string ) => {
+		setVariables( ( prev ) => ( {
+			...prev,
+			[ itemId ]: { ...prev[ itemId ], sync_to_v3: true },
+		} ) );
+		setIsDirty( true );
+	}, [] );
+
+	const handleStopSync = useCallback( ( itemId: string ) => {
+		setVariables( ( prev ) => ( {
+			...prev,
+			[ itemId ]: { ...prev[ itemId ], sync_to_v3: false },
+		} ) );
+		setIsDirty( true );
+	}, [] );
+
 	const handleSearch = ( searchTerm: string ) => {
 		setSearchValue( searchTerm );
 	};
@@ -82,6 +98,8 @@ export const useVariablesManagerState = () => {
 		handleOnChange,
 		createVariable,
 		handleDeleteVariable,
+		handleStartSync,
+		handleStopSync,
 		handleSave,
 		isSaving,
 		handleSearch,

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

@@ -26,10 +26,11 @@ import { __ } from '@wordpress/i18n';
 
 import { trackVariablesManagerEvent } from '../../utils/tracking';
 import { type ErrorResponse, type MappedError, mapServerError } from '../../utils/validations';
-import { getVariableType } from '../../variables-registry/variable-type-registry';
+import { getMenuActionsForVariable, getVariableType } from '../../variables-registry/variable-type-registry';
 import { DeleteConfirmationDialog } from '../ui/delete-confirmation-dialog';
 import { EmptyState } from '../ui/empty-state';
 import { NoSearchResults } from '../ui/no-search-results';
+import { StopSyncConfirmationDialog } from '../ui/stop-sync-confirmation-dialog';
 import { useAutoEdit } from './hooks/use-auto-edit';
 import { useErrorNavigation } from './hooks/use-error-navigation';
 import { useVariablesManagerState } from './hooks/use-variables-manager-state';
@@ -67,6 +68,8 @@ export function VariablesManagerPanel() {
 		handleOnChange,
 		createVariable,
 		handleDeleteVariable,
+		handleStartSync,
+		handleStopSync,
 		handleSave,
 		isSaving,
 		handleSearch,
@@ -78,6 +81,7 @@ export function VariablesManagerPanel() {
 	const { createNavigationCallback, resetNavigation } = useErrorNavigation();
 
 	const [ deleteConfirmation, setDeleteConfirmation ] = useState< { id: string; label: string } | null >( null );
+	const [ stopSyncConfirmation, setStopSyncConfirmation ] = useState< string | null >( null );
 	const [ serverError, setServerError ] = useState< MappedError | null >( null );
 
 	usePreventUnload( isDirty );
@@ -139,22 +143,49 @@ export function VariablesManagerPanel() {
 		[ handleDeleteVariable ]
 	);
 
-	const menuActions = [
-		{
-			name: __( 'Delete', 'elementor' ),
-			icon: TrashIcon,
-			color: 'error.main',
-			onClick: ( itemId: string ) => {
-				const variable = variables[ itemId ];
-				if ( variable ) {
-					setDeleteConfirmation( { id: itemId, label: variable.label } );
-
-					const variableTypeOptions = getVariableType( variable.type );
-					trackVariablesManagerEvent( { action: 'delete', varType: variableTypeOptions?.variableType } );
-				}
-			},
+	const handleStopSyncWithConfirmation = useCallback(
+		( itemId: string ) => {
+			handleStopSync( itemId );
+			setStopSyncConfirmation( null );
 		},
-	];
+		[ handleStopSync ]
+	);
+
+	const buildMenuActions = useCallback(
+		( variableId: string ) => {
+			const variable = variables[ variableId ];
+			if ( ! variable ) {
+				return [];
+			}
+
+			const typeActions = getMenuActionsForVariable( variable.type, {
+				variable,
+				variableId,
+				handlers: {
+					onStartSync: handleStartSync,
+					onStopSync: ( itemId: string ) => setStopSyncConfirmation( itemId ),
+				},
+			} );
+
+			const deleteAction = {
+				name: __( 'Delete', 'elementor' ),
+				icon: TrashIcon,
+				color: 'error.main',
+				onClick: ( itemId: string ) => {
+					const v = variables[ itemId ];
+					if ( v ) {
+						setDeleteConfirmation( { id: itemId, label: v.label } );
+
+						const variableTypeOptions = getVariableType( v.type );
+						trackVariablesManagerEvent( { action: 'delete', varType: variableTypeOptions?.variableType } );
+					}
+				},
+			};
+
+			return [ ...typeActions, deleteAction ];
+		},
+		[ variables, handleStartSync ]
+	);
 
 	const hasVariables = Object.keys( variables ).length > 0;
 
@@ -212,7 +243,7 @@ export function VariablesManagerPanel() {
 				>
 					{ hasVariables && (
 						<VariablesManagerTable
-							menuActions={ menuActions }
+							menuActions={ buildMenuActions }
 							variables={ variables }
 							onChange={ handleOnChange }
 							autoEditVariableId={ autoEditVariableId }
@@ -314,6 +345,14 @@ export function VariablesManagerPanel() {
 				/>
 			) }
 
+			{ stopSyncConfirmation && (
+				<StopSyncConfirmationDialog
+					open
+					closeDialog={ () => setStopSyncConfirmation( null ) }
+					onConfirm={ () => handleStopSyncWithConfirmation( stopSyncConfirmation ) }
+				/>
+			) }
+
 			{ isSaveChangesDialogOpen && (
 				<SaveChangesDialog>
 					<SaveChangesDialog.Title onClose={ closeSaveChangesDialog }>

package/src/components/variables-manager/variables-manager-table.tsx

@@ -25,7 +25,7 @@ import { VariableTableCell } from './ui/variable-table-cell';
 import { VariableEditableCell } from './variable-editable-cell';
 
 type Props = {
-	menuActions: VariableManagerMenuAction[];
+	menuActions: ( variableId: string ) => VariableManagerMenuAction[];
 	variables: TVariablesList;
 	onChange: ( variables: TVariablesList ) => void;
 	autoEditVariableId?: string;
@@ -306,7 +306,7 @@ export const VariablesManagerTable = ( {
 											>
 												<Stack role="toolbar" direction="row" justifyContent="flex-end">
 													<VariableEditMenu
-														menuActions={ menuActions }
+														menuActions={ menuActions( row.id ) }
 														disabled={ isSorting }
 														itemId={ row.id }
 													/>

package/src/index.ts

@@ -3,7 +3,13 @@ export { GLOBAL_VARIABLES_URI } from './mcp/variables-resource';
 export { sizeVariablePropTypeUtil } from './prop-types/size-variable-prop-type';
 export { registerVariableTypes } from './register-variable-types';
 export { service } from './service';
-export { registerVariableType } from './variables-registry/variable-type-registry';
+export {
+	getMenuActionsForVariable,
+	registerVariableType,
+	type MenuActionContext,
+	type MenuActionsFactory,
+	type VariableManagerMenuAction,
+} from './variables-registry/variable-type-registry';
 export { hasVariable } from './hooks/use-prop-variables';
 
 import { globalVariablesLLMResolvers } from './utils/llm-propvalue-label-resolver';

package/src/register-variable-types.tsx

@@ -1,7 +1,9 @@
 import * as React from 'react';
 import { colorPropTypeUtil, sizePropTypeUtil, stringPropTypeUtil } from '@elementor/editor-props';
 import { CtaButton } from '@elementor/editor-ui';
-import { BrushIcon, ExpandDiagonalIcon, TextIcon } from '@elementor/icons';
+import { isExperimentActive } from '@elementor/editor-v1-adapters';
+import { BrushIcon, ExpandDiagonalIcon, ResetIcon, TextIcon } from '@elementor/icons';
+import { __ } from '@wordpress/i18n';
 
 import { ColorField } from './components/fields/color-field';
 import { FontField } from './components/fields/font-field';
@@ -22,6 +24,31 @@ export function registerVariableTypes() {
 		variableType: 'color',
 		startIcon: ( { value } ) => <ColorIndicator size="inherit" component="span" value={ value } />,
 		defaultValue: '#ffffff',
+		menuActionsFactory: ( { variable, variableId, handlers } ) => {
+			const actions = [];
+
+			if ( ! isExperimentActive( 'e_design_system_sync' ) ) {
+				return [];
+			}
+
+			if ( variable.sync_to_v3 ) {
+				actions.push( {
+					name: __( 'Stop syncing to Version 3', 'elementor' ),
+					icon: ResetIcon,
+					color: 'text.primary',
+					onClick: () => handlers.onStopSync( variableId ),
+				} );
+			} else {
+				actions.push( {
+					name: __( 'Sync to Version 3', 'elementor' ),
+					icon: ResetIcon,
+					color: 'text.primary',
+					onClick: () => handlers.onStartSync( variableId ),
+				} );
+			}
+
+			return actions;
+		},
 	} );
 
 	registerVariableType( {

package/src/storage.ts

@@ -5,6 +5,7 @@ export type TVariable = {
 	order?: number;
 	deleted?: boolean;
 	deleted_at?: string;
+	sync_to_v3?: boolean;
 };
 
 export type TVariablesList = Record< string, TVariable >;

package/src/types.ts

@@ -8,6 +8,7 @@ export type Variable = {
 	type: string;
 	deleted?: boolean;
 	deleted_at?: string;
+	sync_to_v3?: boolean;
 };
 
 export type StyleVariables = Record< string, Variable >;
@@ -23,4 +24,5 @@ export type NormalizedVariable = {
 	label: string;
 	value: string;
 	order?: number;
+	sync_to_v3?: boolean;
 };

package/src/utils/variables-to-list.ts

@@ -8,11 +8,18 @@ export const variablesToList = ( variables: TVariablesList ): VariableWithKey[]
 	return Object.entries( variables ).map( ( [ key, variable ] ) => ( { key, ...variable } ) );
 };
 
-export const toNormalizedVariable = ( { key, label, value, order }: VariableWithKey ): NormalizedVariable => ( {
+export const toNormalizedVariable = ( {
 	key,
 	label,
 	value,
 	order,
+	sync_to_v3: syncToV3,
+}: VariableWithKey ): NormalizedVariable => ( {
+	key,
+	label,
+	value,
+	order,
+	sync_to_v3: syncToV3,
 } );
 
 type VariableWithType = NormalizedVariable & { type: string };

package/src/variables-registry/create-variable-type-registry.ts

@@ -13,10 +13,22 @@ import {
 } from '@elementor/editor-props';
 import { type SvgIconProps } from '@elementor/ui';
 
+import { type VariableManagerMenuAction } from '../components/variables-manager/ui/variable-edit-menu';
 import { inheritanceTransformer } from '../transformers/inheritance-transformer';
 import { variableTransformer } from '../transformers/variable-transformer';
 import { type NormalizedVariable, type Variable } from '../types';
 
+export type MenuActionContext = {
+	variable: Variable;
+	variableId: string;
+	handlers: {
+		onStartSync: ( id: string ) => void;
+		onStopSync: ( id: string ) => void;
+	};
+};
+
+export type MenuActionsFactory = ( context: MenuActionContext ) => VariableManagerMenuAction[];
+
 export type ValueFieldProps = {
 	value: string;
 	onChange: ( value: string ) => void;
@@ -45,6 +57,7 @@ type VariableTypeOptions = {
 	isCompatible?: ( propType: PropType, variable: Variable ) => boolean;
 	emptyState?: JSX.Element;
 	isActive?: boolean;
+	menuActionsFactory?: MenuActionsFactory;
 };
 
 export type VariableTypesMap = Record< string, Omit< VariableTypeOptions, 'key' > >;
@@ -67,6 +80,7 @@ export function createVariableTypeRegistry() {
 		isCompatible,
 		emptyState,
 		isActive = true,
+		menuActionsFactory,
 	}: VariableTypeOptions ) => {
 		const variableTypeKey = key ?? propTypeUtil.key;
 
@@ -94,6 +108,7 @@ export function createVariableTypeRegistry() {
 			isCompatible,
 			emptyState,
 			isActive,
+			menuActionsFactory,
 		};
 
 		registerTransformer( propTypeUtil.key, styleTransformer );

package/src/variables-registry/variable-type-registry.ts

@@ -1,4 +1,22 @@
-import { createVariableTypeRegistry } from './create-variable-type-registry';
+import { type VariableManagerMenuAction } from '../components/variables-manager/ui/variable-edit-menu';
+import {
+	createVariableTypeRegistry,
+	type MenuActionContext,
+	type MenuActionsFactory,
+} from './create-variable-type-registry';
 
 export const { registerVariableType, getVariableType, getVariableTypes, hasVariableType } =
 	createVariableTypeRegistry();
+
+export function getMenuActionsForVariable(
+	variableType: string,
+	context: MenuActionContext
+): VariableManagerMenuAction[] {
+	const typeOptions = getVariableType( variableType );
+	if ( typeOptions?.menuActionsFactory ) {
+		return typeOptions.menuActionsFactory( context );
+	}
+	return [];
+}
+
+export type { MenuActionContext, MenuActionsFactory, VariableManagerMenuAction };