@elementor/editor-variables 3.35.0-393 → 3.35.0-395

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elementor/editor-variables",
-  "version": "3.35.0-393",
+  "version": "3.35.0-395",
   "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-393",
-    "@elementor/editor-canvas": "3.35.0-393",
-    "@elementor/editor-controls": "3.35.0-393",
-    "@elementor/editor-current-user": "3.35.0-393",
-    "@elementor/editor-editing-panel": "3.35.0-393",
-    "@elementor/editor-mcp": "3.35.0-393",
-    "@elementor/editor-panels": "3.35.0-393",
-    "@elementor/editor-props": "3.35.0-393",
-    "@elementor/editor-ui": "3.35.0-393",
-    "@elementor/editor-v1-adapters": "3.35.0-393",
-    "@elementor/http-client": "3.35.0-393",
+    "@elementor/editor": "3.35.0-395",
+    "@elementor/editor-canvas": "3.35.0-395",
+    "@elementor/editor-controls": "3.35.0-395",
+    "@elementor/editor-current-user": "3.35.0-395",
+    "@elementor/editor-editing-panel": "3.35.0-395",
+    "@elementor/editor-mcp": "3.35.0-395",
+    "@elementor/editor-panels": "3.35.0-395",
+    "@elementor/editor-props": "3.35.0-395",
+    "@elementor/editor-ui": "3.35.0-395",
+    "@elementor/editor-v1-adapters": "3.35.0-395",
+    "@elementor/http-client": "3.35.0-395",
     "@elementor/icons": "^1.63.0",
-    "@elementor/mixpanel": "3.35.0-393",
-    "@elementor/schema": "3.35.0-393",
+    "@elementor/mixpanel": "3.35.0-395",
+    "@elementor/schema": "3.35.0-395",
     "@elementor/ui": "1.36.17",
     "@wordpress/i18n": "^5.13.0"
   },

package/src/components/variables-manager/variables-manager-create-menu.tsx

@@ -1,15 +1,25 @@
 import * as React from 'react';
-import { createElement, useRef } from 'react';
+import { createElement, useMemo, useRef } from 'react';
+import { PromotionChip } from '@elementor/editor-ui';
 import { PlusIcon } from '@elementor/icons';
-import { bindMenu, bindTrigger, IconButton, Menu, MenuItem, type PopupState, Typography } from '@elementor/ui';
+import { bindMenu, bindTrigger, Box, IconButton, Menu, MenuItem, type PopupState, Typography } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
+import { useQuotaPermissions } from '../../hooks/use-quota-permissions';
 import { type TVariablesList } from '../../storage';
 import { trackVariablesManagerEvent } from '../../utils/tracking';
 import { getVariableTypes } from '../../variables-registry/variable-type-registry';
 
 export const SIZE = 'tiny';
 
+type MenuOptionConfig = {
+	key: string;
+	propTypeKey: string;
+	variableType: string;
+	defaultValue: string;
+	icon: React.ElementType;
+};
+
 type VariableManagerCreateMenuProps = {
 	variables: TVariablesList;
 	onCreate: ( type: string, defaultName: string, defaultValue: string ) => void;
@@ -27,22 +37,19 @@ export const VariableManagerCreateMenu = ( {
 
 	const variableTypes = getVariableTypes();
 
-	const menuOptions = Object.entries( variableTypes )
-		.filter( ( [ , variable ] ) => !! variable.defaultValue )
-		.map( ( [ key, variable ] ) => {
-			const displayName = variable.variableType.charAt( 0 ).toUpperCase() + variable.variableType.slice( 1 );
-
-			return {
-				key,
-				name: displayName,
-				icon: variable.icon,
-				onClick: () => {
-					const defaultName = getDefaultName( variables, key, variable.variableType );
-					onCreate( key, defaultName, variable.defaultValue || '' );
-					trackVariablesManagerEvent( { action: 'add', varType: variable.variableType } );
-				},
-			};
-		} );
+	const menuOptionConfigs = useMemo(
+		() =>
+			Object.entries( variableTypes )
+				.filter( ( [ , variable ] ) => !! variable.defaultValue )
+				.map( ( [ key, variable ] ) => ( {
+					key,
+					propTypeKey: variable.propTypeUtil.key,
+					variableType: variable.variableType,
+					defaultValue: variable.defaultValue || '',
+					icon: variable.icon,
+				} ) ),
+		[ variableTypes ]
+	);
 
 	return (
 		<>
@@ -76,31 +83,66 @@ export const VariableManagerCreateMenu = ( {
 				} }
 				data-testid="variable-manager-create-menu"
 			>
-				{ menuOptions.map( ( option ) => (
-					<MenuItem
-						key={ option.key }
-						onClick={ () => {
-							option.onClick?.();
-							menuState.close();
-						} }
-						sx={ {
-							gap: 1.5,
-						} }
-					>
-						{ createElement( option.icon, {
-							fontSize: SIZE,
-							color: 'action',
-						} ) }
-						<Typography variant="caption" color="text.primary">
-							{ option.name }
-						</Typography>
-					</MenuItem>
+				{ menuOptionConfigs.map( ( config ) => (
+					<MenuOption
+						key={ config.key }
+						config={ config }
+						variables={ variables }
+						onCreate={ onCreate }
+						onClose={ menuState.close }
+					/>
 				) ) }
 			</Menu>
 		</>
 	);
 };
 
+const MenuOption = ( {
+	config,
+	variables,
+	onCreate,
+	onClose,
+}: {
+	config: MenuOptionConfig;
+	variables: TVariablesList;
+	onCreate: VariableManagerCreateMenuProps[ 'onCreate' ];
+	onClose: () => void;
+} ) => {
+	const displayName = config.variableType.charAt( 0 ).toUpperCase() + config.variableType.slice( 1 );
+	const userQuotaPermissions = useQuotaPermissions( config.propTypeKey );
+	const isDisabled = ! userQuotaPermissions.canAdd();
+
+	const handleClick = () => {
+		if ( isDisabled ) {
+			return;
+		}
+
+		const defaultName = getDefaultName( variables, config.key, config.variableType );
+
+		onCreate( config.key, defaultName, config.defaultValue );
+		trackVariablesManagerEvent( { action: 'add', varType: config.variableType } );
+		onClose();
+	};
+
+	return (
+		<MenuItem onClick={ handleClick } sx={ { gap: 1.5, cursor: isDisabled ? 'default' : 'pointer' } }>
+			{ createElement( config.icon, { fontSize: SIZE, color: isDisabled ? 'disabled' : 'action' } ) }
+			<Typography variant="caption" color={ isDisabled ? 'text.disabled' : 'text.primary' }>
+				{ displayName }
+			</Typography>
+			{ isDisabled && (
+				<Box
+					onClick={ () => {
+						event?.stopPropagation();
+					} }
+				>
+					<PromotionChip onClick={ () => {} } />
+				</Box>
+			) }
+		</MenuItem>
+	);
+};
+
 const getDefaultName = ( variables: TVariablesList, type: string, baseName: string ) => {
 	const existingNames = Object.values( variables )
 		.filter( ( variable ) => variable.type === type )

package/src/register-variable-types.tsx

@@ -47,6 +47,7 @@ export function registerVariableTypes() {
 	registerVariableType( {
 		...sizePromotions,
 		key: sizeVariablePropTypeUtil.key,
+		defaultValue: '0px',
 	} );
 
 	registerVariableType( {