@elementor/editor-variables 3.35.0-349 → 3.35.0-351

package/dist/index.js

@@ -2606,23 +2606,6 @@ var VariablesSelection = ({ closePopover, onAdd, onEdit, onSettings, disabled =
   const handleClearSearch = () => {
     setSearchValue("");
   };
-  const noVariableTitle = disabled ? (0, import_i18n14.sprintf)(
-    /* translators: %s: Variable Type. */
-    (0, import_i18n14.__)("No %s variables yet", "elementor"),
-    variableType
-  ) : (0, import_i18n14.sprintf)(
-    /* translators: %s: Variable Type. */
-    (0, import_i18n14.__)("Create your first %s variable", "elementor"),
-    variableType
-  );
-  const noVariableMessage = disabled ? (0, import_i18n14.sprintf)(
-    /* translators: %s: Variable Type. */
-    (0, import_i18n14.__)(
-      "Start by creating your first %s variable to apply consistent sizing across elements.",
-      "elementor"
-    ),
-    variableType
-  ) : (0, import_i18n14.__)("Variables are saved attributes that you can apply anywhere on your site.", "elementor");
   return /* @__PURE__ */ React19.createElement(import_editor_editing_panel4.PopoverBody, null, /* @__PURE__ */ React19.createElement(
     import_editor_ui7.PopoverHeader,
     {
@@ -2657,16 +2640,38 @@ var VariablesSelection = ({ closePopover, onAdd, onEdit, onSettings, disabled =
       onClear: handleClearSearch,
       icon: /* @__PURE__ */ React19.createElement(VariableIcon, { fontSize: "large" })
     }
-  ), !hasVariables && !hasNoCompatibleVariables && /* @__PURE__ */ React19.createElement(
+  ), disabled && /* @__PURE__ */ React19.createElement(
     EmptyState,
     {
-      title: noVariableTitle,
-      message: noVariableMessage,
-      icon: /* @__PURE__ */ React19.createElement(VariableIcon, { fontSize: "large" }),
-      onAdd: disabled ? void 0 : onAdd
+      title: (0, import_i18n14.sprintf)(
+        /* translators: %s: Variable Type. */
+        (0, import_i18n14.__)("No %s variables yet", "elementor"),
+        variableType
+      ),
+      message: (0, import_i18n14.sprintf)(
+        /* translators: %s: Variable Type. */
+        (0, import_i18n14.__)("Upgrade to create %s variables and maintain consistent element sizing.", "elementor"),
+        variableType
+      ),
+      icon: /* @__PURE__ */ React19.createElement(VariableIcon, { fontSize: "large" })
     },
     emptyState
-  ), hasNoCompatibleVariables && /* @__PURE__ */ React19.createElement(
+  ), !hasVariables && !hasNoCompatibleVariables && !disabled && /* @__PURE__ */ React19.createElement(
+    EmptyState,
+    {
+      title: (0, import_i18n14.sprintf)(
+        /* translators: %s: Variable Type. */
+        (0, import_i18n14.__)("Create your first %s variable", "elementor"),
+        variableType
+      ),
+      message: (0, import_i18n14.__)(
+        "Variables are saved attributes that you can apply anywhere on your site.",
+        "elementor"
+      ),
+      icon: /* @__PURE__ */ React19.createElement(VariableIcon, { fontSize: "large" }),
+      onAdd
+    }
+  ), hasNoCompatibleVariables && !disabled && /* @__PURE__ */ React19.createElement(
     EmptyState,
     {
       title: (0, import_i18n14.__)("No compatible variables", "elementor"),
@@ -2675,9 +2680,8 @@ var VariablesSelection = ({ closePopover, onAdd, onEdit, onSettings, disabled =
         "elementor"
       ),
       icon: /* @__PURE__ */ React19.createElement(VariableIcon, { fontSize: "large" }),
-      onAdd: disabled ? void 0 : onAdd
-    },
-    emptyState
+      onAdd
+    }
   ));
 };
 
@@ -3822,7 +3826,15 @@ function init() {
   registerRepeaterInjections();
   (0, import_editor_editing_panel8.registerControlReplacement)({
     component: VariableControl,
-    condition: ({ value, placeholder }) => hasVariable(value) || hasVariable(placeholder)
+    condition: ({ value, placeholder }) => {
+      if (hasVariableAssigned(value)) {
+        return true;
+      }
+      if (value) {
+        return false;
+      }
+      return hasVariableAssigned(placeholder);
+    }
   });
   registerPopoverAction({
     id: "variables",
@@ -3837,7 +3849,7 @@ function init() {
   });
   (0, import_editor_panels2.__registerPanel)(panel);
 }
-function hasVariable(value) {
+function hasVariableAssigned(value) {
   if ((0, import_editor_props7.isTransformable)(value)) {
     return hasVariableType(value.$$type);
   }