@elementor/editor-variables 3.35.0-343 → 3.35.0-345

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elementor/editor-variables",
-  "version": "3.35.0-343",
+  "version": "3.35.0-345",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -39,20 +39,20 @@
     "dev": "tsup --config=../../tsup.dev.ts"
   },
   "dependencies": {
-    "@elementor/editor": "3.35.0-343",
-    "@elementor/editor-canvas": "3.35.0-343",
-    "@elementor/editor-controls": "3.35.0-343",
-    "@elementor/editor-current-user": "3.35.0-343",
-    "@elementor/editor-editing-panel": "3.35.0-343",
-    "@elementor/editor-mcp": "3.35.0-343",
-    "@elementor/editor-panels": "3.35.0-343",
-    "@elementor/editor-props": "3.35.0-343",
-    "@elementor/editor-ui": "3.35.0-343",
-    "@elementor/editor-v1-adapters": "3.35.0-343",
-    "@elementor/http-client": "3.35.0-343",
+    "@elementor/editor": "3.35.0-345",
+    "@elementor/editor-canvas": "3.35.0-345",
+    "@elementor/editor-controls": "3.35.0-345",
+    "@elementor/editor-current-user": "3.35.0-345",
+    "@elementor/editor-editing-panel": "3.35.0-345",
+    "@elementor/editor-mcp": "3.35.0-345",
+    "@elementor/editor-panels": "3.35.0-345",
+    "@elementor/editor-props": "3.35.0-345",
+    "@elementor/editor-ui": "3.35.0-345",
+    "@elementor/editor-v1-adapters": "3.35.0-345",
+    "@elementor/http-client": "3.35.0-345",
     "@elementor/icons": "^1.62.0",
-    "@elementor/mixpanel": "3.35.0-343",
-    "@elementor/schema": "3.35.0-343",
+    "@elementor/mixpanel": "3.35.0-345",
+    "@elementor/schema": "3.35.0-345",
     "@elementor/ui": "1.36.17",
     "@wordpress/i18n": "^5.13.0"
   },

package/src/components/ui/empty-state.tsx

@@ -9,11 +9,36 @@ type Props = {
 	title: string;
 	message: string;
 	onAdd?: () => void;
+	children?: React.ReactNode;
 };
 
-export const EmptyState = ( { icon, title, message, onAdd }: Props ) => {
+export const EmptyState = ( { icon, title, message, onAdd, children }: Props ) => {
 	const canAdd = usePermissions().canAdd();
+	const displayTitle = canAdd ? title : __( 'There are no variables', 'elementor' );
+	const displayMessage = canAdd
+		? message
+		: __( 'With your current role, you can only connect and detach variables.', 'elementor' );
 
+	return (
+		<Content title={ displayTitle } message={ displayMessage } icon={ icon }>
+			{ children ||
+				( onAdd && (
+					<Button variant="outlined" color="secondary" size="small" onClick={ onAdd }>
+						{ __( 'Create a variable', 'elementor' ) }
+					</Button>
+				) ) }
+		</Content>
+	);
+};
+
+type NoVariablesContentProps = {
+	title: string;
+	message: string;
+	icon?: React.ReactNode;
+	children?: React.ReactNode;
+};
+
+function Content( { title, message, icon, children }: NoVariablesContentProps ) {
 	return (
 		<Stack
 			gap={ 1 }
@@ -25,33 +50,6 @@ export const EmptyState = ( { icon, title, message, onAdd }: Props ) => {
 		>
 			{ icon }
 
-			{ canAdd ? (
-				<>
-					<Content title={ title } message={ message } />
-					{ onAdd && (
-						<Button variant="outlined" color="secondary" size="small" onClick={ onAdd }>
-							{ __( 'Create a variable', 'elementor' ) }
-						</Button>
-					) }
-				</>
-			) : (
-				<Content
-					title={ __( 'There are no variables', 'elementor' ) }
-					message={ __( 'With your current role, you can only connect and detach variables.', 'elementor' ) }
-				/>
-			) }
-		</Stack>
-	);
-};
-
-type NoVariablesContentProps = {
-	title: string;
-	message: string;
-};
-
-function Content( { title, message }: NoVariablesContentProps ) {
-	return (
-		<>
 			<Typography align="center" variant="subtitle2">
 				{ title }
 			</Typography>
@@ -59,6 +57,8 @@ function Content( { title, message }: NoVariablesContentProps ) {
 			<Typography align="center" variant="caption" maxWidth="180px">
 				{ message }
 			</Typography>
-		</>
+
+			{ children }
+		</Stack>
 	);
 }

package/src/components/variable-creation.tsx

@@ -142,21 +142,23 @@ export const VariableCreation = ( { onGoBack, onClose }: Props ) => {
 						} }
 					/>
 				</FormField>
-				<FormField errorMsg={ valueFieldError } label={ __( 'Value', 'elementor' ) }>
-					<Typography variant="h5" id="variable-value-wrapper">
-						<ValueField
-							value={ value }
-							onPropTypeKeyChange={ ( key: string ) => setPropTypeKey( key ) }
-							onChange={ ( newValue ) => {
-								setValue( newValue );
-								setErrorMessage( '' );
-								setValueFieldError( '' );
-							} }
-							onValidationChange={ setValueFieldError }
-							propType={ propType }
-						/>
-					</Typography>
-				</FormField>
+				{ ValueField && (
+					<FormField errorMsg={ valueFieldError } label={ __( 'Value', 'elementor' ) }>
+						<Typography variant="h5" id="variable-value-wrapper">
+							<ValueField
+								value={ value }
+								onPropTypeKeyChange={ ( key: string ) => setPropTypeKey( key ) }
+								onChange={ ( newValue ) => {
+									setValue( newValue );
+									setErrorMessage( '' );
+									setValueFieldError( '' );
+								} }
+								onValidationChange={ setValueFieldError }
+								propType={ propType }
+							/>
+						</Typography>
+					</FormField>
+				) }
 
 				{ errorMessage && <FormHelperText error>{ errorMessage }</FormHelperText> }
 			</PopoverContent>

package/src/components/variable-edit.tsx

@@ -206,21 +206,23 @@ export const VariableEdit = ( { onClose, onGoBack, onSubmit, editId }: Props ) =
 							} }
 						/>
 					</FormField>
-					<FormField errorMsg={ valueFieldError } label={ __( 'Value', 'elementor' ) }>
-						<Typography variant="h5">
-							<ValueField
-								propTypeKey={ variable.type }
-								value={ value }
-								onChange={ ( newValue ) => {
-									setValue( newValue );
-									setErrorMessage( '' );
-									setValueFieldError( '' );
-								} }
-								onValidationChange={ setValueFieldError }
-								propType={ propType }
-							/>
-						</Typography>
-					</FormField>
+					{ ValueField && (
+						<FormField errorMsg={ valueFieldError } label={ __( 'Value', 'elementor' ) }>
+							<Typography variant="h5">
+								<ValueField
+									propTypeKey={ variable.type }
+									value={ value }
+									onChange={ ( newValue ) => {
+										setValue( newValue );
+										setErrorMessage( '' );
+										setValueFieldError( '' );
+									} }
+									onValidationChange={ setValueFieldError }
+									propType={ propType }
+								/>
+							</Typography>
+						</FormField>
+					) }
 
 					{ errorMessage && <FormHelperText error>{ errorMessage }</FormHelperText> }
 				</PopoverContent>

package/src/components/variable-restore.tsx

@@ -121,20 +121,22 @@ export const VariableRestore = ( { variableId, onClose, onSubmit }: Props ) => {
 							} }
 						/>
 					</FormField>
-					<FormField errorMsg={ valueFieldError } label={ __( 'Value', 'elementor' ) }>
-						<Typography variant="h5">
-							<ValueField
-								value={ value }
-								onChange={ ( newValue ) => {
-									setValue( newValue );
-									setErrorMessage( '' );
-									setValueFieldError( '' );
-								} }
-								onValidationChange={ setValueFieldError }
-								propType={ propType }
-							/>
-						</Typography>
-					</FormField>
+					{ ValueField && (
+						<FormField errorMsg={ valueFieldError } label={ __( 'Value', 'elementor' ) }>
+							<Typography variant="h5">
+								<ValueField
+									value={ value }
+									onChange={ ( newValue ) => {
+										setValue( newValue );
+										setErrorMessage( '' );
+										setValueFieldError( '' );
+									} }
+									onValidationChange={ setValueFieldError }
+									propType={ propType }
+								/>
+							</Typography>
+						</FormField>
+					) }
 
 					{ errorMessage && <FormHelperText error>{ errorMessage }</FormHelperText> }
 				</PopoverContent>

package/src/components/variable-selection-popover.tsx

@@ -6,6 +6,7 @@ import { isExperimentActive } from '@elementor/editor-v1-adapters';
 import { PopoverContentRefContextProvider } from '../context/variable-selection-popover.context';
 import { VariableTypeProvider } from '../context/variable-type-context';
 import { usePermissions } from '../hooks/use-permissions';
+import { useQuotaPermissions } from '../hooks/use-quota-permissions';
 import { type Variable } from '../types';
 import { VariableCreation } from './variable-creation';
 import { VariableEdit } from './variable-edit';
@@ -56,6 +57,7 @@ type ViewProps = {
 	propTypeKey: string;
 	currentView: View;
 	selectedVariable?: Variable;
+	disabled?: boolean;
 	editId: string;
 	setEditId: ( id: string ) => void;
 	setCurrentView: ( stage: View ) => void;
@@ -73,6 +75,7 @@ type Handlers = {
 
 function RenderView( props: ViewProps ): React.ReactNode {
 	const userPermissions = usePermissions();
+	const userQuotaPremissions = useQuotaPermissions( props.propTypeKey );
 
 	const handlers: Handlers = {
 		onClose: () => {
@@ -118,6 +121,7 @@ function RenderView( props: ViewProps ): React.ReactNode {
 				onAdd={ handlers.onAdd }
 				onEdit={ handlers.onEdit }
 				onSettings={ handlers.onSettings }
+				disabled={ ! userQuotaPremissions.canAdd() }
 			/>
 		);
 	}

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

@@ -264,7 +264,7 @@ export const VariablesManagerTable = ( {
 														onValidationChange,
 														error,
 													} ) =>
-														row.valueField( {
+														row.valueField?.( {
 															ref: {
 																current: variableRowRefs.current.get(
 																	'table-ref-' + row.id
@@ -284,7 +284,7 @@ export const VariablesManagerTable = ( {
 																onFieldError?.( !! errorMsg );
 															},
 															error,
-														} )
+														} ) ?? <></>
 													}
 													onRowRef={ handleRowRef( row.id ) }
 													gap={ 0.25 }

package/src/components/variables-selection.tsx

@@ -25,10 +25,11 @@ type Props = {
 	onAdd?: () => void;
 	onEdit?: ( key: string ) => void;
 	onSettings?: () => void;
+	disabled?: boolean;
 };
 
-export const VariablesSelection = ( { closePopover, onAdd, onEdit, onSettings }: Props ) => {
-	const { icon: VariableIcon, startIcon, variableType, propTypeUtil } = useVariableType();
+export const VariablesSelection = ( { closePopover, onAdd, onEdit, onSettings, disabled = false }: Props ) => {
+	const { icon: VariableIcon, startIcon, variableType, propTypeUtil, emptyState } = useVariableType();
 
 	const { value: variable, setValue: setVariable, path } = useVariableBoundProp();
 	const [ searchValue, setSearchValue ] = useState( '' );
@@ -64,14 +65,17 @@ export const VariablesSelection = ( { closePopover, onAdd, onEdit, onSettings }:
 	if ( onAdd ) {
 		actions.push(
 			<Tooltip key="add" placement="top" title={ CREATE_LABEL }>
-				<IconButton
-					id="add-variable-button"
-					size={ SIZE }
-					onClick={ onAddAndTrack }
-					aria-label={ CREATE_LABEL }
-				>
-					<PlusIcon fontSize={ SIZE } />
-				</IconButton>
+				<span>
+					<IconButton
+						id="add-variable-button"
+						size={ SIZE }
+						onClick={ onAddAndTrack }
+						aria-label={ CREATE_LABEL }
+						disabled={ disabled }
+					>
+						<PlusIcon fontSize={ SIZE } />
+					</IconButton>
+				</span>
 			</Tooltip>
 		);
 	}
@@ -119,11 +123,28 @@ export const VariablesSelection = ( { closePopover, onAdd, onEdit, onSettings }:
 		setSearchValue( '' );
 	};
 
-	const noVariableTitle = sprintf(
-		/* translators: %s: Variable Type. */
-		__( 'Create your first %s variable', 'elementor' ),
-		variableType
-	);
+	const noVariableTitle = disabled
+		? sprintf(
+				/* translators: %s: Variable Type. */
+				__( 'No %s variables yet', 'elementor' ),
+				variableType
+		  )
+		: sprintf(
+				/* translators: %s: Variable Type. */
+				__( 'Create your first %s variable', 'elementor' ),
+				variableType
+		  );
+
+	const noVariableMessage = disabled
+		? sprintf(
+				/* translators: %s: Variable Type. */
+				__(
+					'Start by creating your first %s variable to apply consistent sizing across elements.',
+					'elementor'
+				),
+				variableType
+		  )
+		: __( 'Variables are saved attributes that you can apply anywhere on your site.', 'elementor' );
 
 	return (
 		<PopoverBody>
@@ -169,13 +190,12 @@ export const VariablesSelection = ( { closePopover, onAdd, onEdit, onSettings }:
 			{ ! hasVariables && ! hasNoCompatibleVariables && (
 				<EmptyState
 					title={ noVariableTitle }
-					message={ __(
-						'Variables are saved attributes that you can apply anywhere on your site.',
-						'elementor'
-					) }
+					message={ noVariableMessage }
 					icon={ <VariableIcon fontSize="large" /> }
-					onAdd={ onAdd }
-				/>
+					onAdd={ disabled ? undefined : onAdd }
+				>
+					{ emptyState }
+				</EmptyState>
 			) }
 
 			{ hasNoCompatibleVariables && (
@@ -186,8 +206,10 @@ export const VariablesSelection = ( { closePopover, onAdd, onEdit, onSettings }:
 						'elementor'
 					) }
 					icon={ <VariableIcon fontSize="large" /> }
-					onAdd={ onAdd }
-				/>
+					onAdd={ disabled ? undefined : onAdd }
+				>
+					{ emptyState }
+				</EmptyState>
 			) }
 		</PopoverBody>
 	);

package/src/hooks/use-quota-permissions.ts

@@ -0,0 +1,18 @@
+import { getLicenseInfo } from '../sync/license-info';
+
+declare global {
+	interface Window {
+		ElementorVariablesQuotaConfig: Record< string, number >;
+	}
+}
+
+export const useQuotaPermissions = ( variableType: string ) => {
+	const quotaConfig = window.ElementorVariablesQuotaConfig || {};
+	const limit = quotaConfig[ variableType ] || 0;
+	const hasQuota = limit > 0;
+
+	return {
+		canAdd: () => hasQuota || getLicenseInfo().hasPro,
+		canEdit: () => hasQuota || getLicenseInfo().hasPro,
+	};
+};

package/src/index.ts

@@ -1,5 +1,6 @@
 export { init } from './init';
 export { registerVariableTypes } from './register-variable-types';
+export { sizeVariablePropTypeUtil } from './prop-types/size-variable-prop-type';
 export { service } from './service';
 export { registerVariableType } from './variables-registry/variable-type-registry';
 export { GLOBAL_VARIABLES_URI } from './mcp/variables-resource';

package/src/prop-types/size-variable-prop-type.ts

@@ -0,0 +1,4 @@
+import { createPropUtils } from '@elementor/editor-props';
+import { z } from '@elementor/schema';
+
+export const sizeVariablePropTypeUtil = createPropUtils( 'global-size-variable', z.string() );

package/src/register-variable-types.tsx

@@ -1,12 +1,14 @@
 import * as React from 'react';
-import { colorPropTypeUtil, stringPropTypeUtil } from '@elementor/editor-props';
-import { BrushIcon, TextIcon } from '@elementor/icons';
+import { colorPropTypeUtil, sizePropTypeUtil, stringPropTypeUtil } from '@elementor/editor-props';
+import { UpgradeButton } from '@elementor/editor-ui';
+import { BrushIcon, ExpandDiagonalIcon, TextIcon } from '@elementor/icons';
 
 import { ColorField } from './components/fields/color-field';
 import { FontField } from './components/fields/font-field';
 import { ColorIndicator } from './components/ui/color-indicator';
 import { colorVariablePropTypeUtil } from './prop-types/color-variable-prop-type';
 import { fontVariablePropTypeUtil } from './prop-types/font-variable-prop-type';
+import { sizeVariablePropTypeUtil } from './prop-types/size-variable-prop-type';
 import { registerVariableType } from './variables-registry/variable-type-registry';
 
 export function registerVariableTypes() {
@@ -30,4 +32,14 @@ export function registerVariableTypes() {
 		variableType: 'font',
 		defaultValue: 'Roboto',
 	} );
+
+	registerVariableType( {
+		key: sizeVariablePropTypeUtil.key,
+		icon: ExpandDiagonalIcon,
+		propTypeUtil: sizeVariablePropTypeUtil,
+		fallbackPropTypeUtil: sizePropTypeUtil,
+		variableType: 'size',
+		selectionFilter: () => [],
+		emptyState: <UpgradeButton size="small" href={ 'https://go.elementor.com/go-pro-panel-size-variable/' } />,
+	} );
 }

package/src/sync/license-info.ts

@@ -0,0 +1,9 @@
+import { type CanvasExtendedWindow } from './types';
+
+export function getLicenseInfo() {
+	const extendedWindow = window as unknown as CanvasExtendedWindow;
+
+	return {
+		hasPro: !! extendedWindow.elementorPro,
+	};
+}

package/src/sync/types.ts

@@ -7,4 +7,5 @@ export type CanvasExtendedWindow = Window & {
 			enqueueFont?: EnqueueFont;
 		};
 	};
+	elementorPro?: object;
 };

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

@@ -30,7 +30,7 @@ type FallbackPropTypeUtil = ReturnType< typeof createPropUtils >;
 type VariableTypeOptions = {
 	icon: ForwardRefExoticComponent< Omit< SvgIconProps, 'ref' > & RefAttributes< SVGSVGElement > >;
 	startIcon?: ( { value }: { value: string } ) => JSX.Element;
-	valueField: ( props: ValueFieldProps ) => JSX.Element;
+	valueField?: ( props: ValueFieldProps ) => JSX.Element;
 	variableType: string;
 	key?: string;
 	defaultValue?: string;
@@ -39,6 +39,7 @@ type VariableTypeOptions = {
 	selectionFilter?: ( variables: NormalizedVariable[], propType: PropType ) => NormalizedVariable[];
 	valueTransformer?: ( value: string, type?: string ) => PropValue;
 	isCompatible?: ( propType: PropType, variable: Variable ) => boolean;
+	emptyState?: JSX.Element;
 };
 
 export type VariableTypesMap = Record< string, Omit< VariableTypeOptions, 'key' > >;
@@ -58,6 +59,7 @@ export function createVariableTypeRegistry() {
 		valueTransformer,
 		fallbackPropTypeUtil,
 		isCompatible,
+		emptyState,
 	}: VariableTypeOptions ) => {
 		const variableTypeKey = key ?? propTypeUtil.key;
 
@@ -83,6 +85,7 @@ export function createVariableTypeRegistry() {
 			valueTransformer,
 			fallbackPropTypeUtil,
 			isCompatible,
+			emptyState,
 		};
 
 		registerTransformer( propTypeUtil.key );