@elementor/editor-canvas 4.2.0-939 → 4.2.0-940

package/dist/index.d.mts

@@ -300,6 +300,8 @@ type CreatePropResolverArgs = {
     onPropResolve?: (args: {
         key: string;
         value: unknown;
+        propValue: unknown;
+        propType: PropType;
     }) => void;
 };
 type ResolveArgs = {

package/dist/index.d.ts

@@ -300,6 +300,8 @@ type CreatePropResolverArgs = {
     onPropResolve?: (args: {
         key: string;
         value: unknown;
+        propValue: unknown;
+        propType: PropType;
     }) => void;
 };
 type ResolveArgs = {

package/dist/index.js

@@ -1443,7 +1443,7 @@ function createPropsResolver({ transformers, schema: initialSchema, onPropResolv
       Object.entries(schema2).map(async ([key, type]) => {
         const value = props[key] ?? type.default;
         const transformed = await transform({ value, key, type, signal, renderContext });
-        onPropResolve?.({ key, value: transformed });
+        onPropResolve?.({ key, value: transformed, propValue: value, propType: type });
         if (isMultiProps(transformed)) {
           return getMultiPropsValue(transformed);
         }
@@ -1513,6 +1513,27 @@ function createPropsResolver({ transformers, schema: initialSchema, onPropResolv
   return resolve;
 }
 
+// src/renderers/enqueue-font-from-style-prop.ts
+var import_editor_props4 = require("@elementor/editor-props");
+var maybeEnqueueFontFromStyleProp = (propType, propValue, enqueue) => {
+  if (!(0, import_editor_props4.isTransformable)(propValue) || propValue.disabled) {
+    return;
+  }
+  const typeKey = propType.kind === "union" ? propValue.$$type : propType.key;
+  const propTypeUtil = (0, import_editor_props4.getPropSchemaFromCache)(typeKey);
+  if (!propTypeUtil || !("getEnqueueFontFamily" in propTypeUtil) || typeof propTypeUtil.getEnqueueFontFamily !== "function") {
+    return;
+  }
+  const stored = propValue.value;
+  if (typeof stored !== "string") {
+    return;
+  }
+  const font = propTypeUtil.getEnqueueFontFamily(stored);
+  if (font) {
+    enqueue(font);
+  }
+};
+
 // src/transformers/create-transformers-registry.ts
 function createTransformersRegistry() {
   const transformers = {};
@@ -1545,11 +1566,8 @@ function useStylePropResolver() {
     return createPropsResolver({
       transformers: styleTransformersRegistry,
       schema: (0, import_editor_styles.getStylesSchema)(),
-      onPropResolve: ({ key, value }) => {
-        if (key !== "font-family" || typeof value !== "string") {
-          return;
-        }
-        (0, import_editor_v1_adapters8.enqueueFont)(value);
+      onPropResolve: ({ propValue, propType }) => {
+        maybeEnqueueFontFromStyleProp(propType, propValue, import_editor_v1_adapters8.enqueueFont);
       }
     });
   }, []);
@@ -2477,6 +2495,18 @@ var flexTransformer = createTransformer((value) => {
   return null;
 });
 
+// src/transformers/styles/font-family-transformer.ts
+var fontFamilyTransformer = createTransformer((value) => {
+  if (typeof value !== "string" || !value.trim()) {
+    return null;
+  }
+  const trimmed = value.trim();
+  if (trimmed.startsWith('"') && trimmed.endsWith('"') || trimmed.startsWith("'") && trimmed.endsWith("'")) {
+    return trimmed;
+  }
+  return `"${trimmed}"`;
+});
+
 // src/transformers/styles/grid-track-renderer.ts
 var GRID_TRACK_PROPERTIES = /* @__PURE__ */ new Set(["grid-template-columns", "grid-template-rows"]);
 var isGridTrackProperty = (cssProperty) => GRID_TRACK_PROPERTIES.has(cssProperty);
@@ -2628,7 +2658,7 @@ var mapToTransitionString = (value, allowedProperties) => {
 
 // src/init-style-transformers.ts
 function initStyleTransformers() {
-  styleTransformersRegistry.register("size", sizeTransformer).register("grid-track-size", gridTrackSizeTransformer).register("shadow", shadowTransformer).register("stroke", strokeTransformer).register(
+  styleTransformersRegistry.register("font-family", fontFamilyTransformer).register("size", sizeTransformer).register("grid-track-size", gridTrackSizeTransformer).register("shadow", shadowTransformer).register("stroke", strokeTransformer).register(
     "dimensions",
     createMultiPropsTransformer(
       ["block-start", "block-end", "inline-start", "inline-end"],
@@ -3346,7 +3376,7 @@ var import_client = require("react-dom/client");
 // src/legacy/replacements/inline-editing/inline-editing-elements.tsx
 var React11 = __toESM(require("react"));
 var import_editor_elements9 = require("@elementor/editor-elements");
-var import_editor_props5 = require("@elementor/editor-props");
+var import_editor_props6 = require("@elementor/editor-props");
 var import_editor_v1_adapters13 = require("@elementor/editor-v1-adapters");
 var import_i18n3 = require("@wordpress/i18n");
 
@@ -3623,11 +3653,11 @@ var InlineEditingToolbar = ({ anchor, editor, id }) => {
 };
 
 // src/legacy/replacements/inline-editing/inline-editing-eligibility.ts
-var import_editor_props4 = require("@elementor/editor-props");
+var import_editor_props5 = require("@elementor/editor-props");
 var hasKey = (propType) => {
   return "key" in propType;
 };
-var TEXT_PROP_TYPE_KEYS = /* @__PURE__ */ new Set([import_editor_props4.htmlV3PropTypeUtil.key, import_editor_props4.stringPropTypeUtil.key]);
+var TEXT_PROP_TYPE_KEYS = /* @__PURE__ */ new Set([import_editor_props5.htmlV3PropTypeUtil.key, import_editor_props5.stringPropTypeUtil.key]);
 var isCoreTextPropTypeKey = (key) => {
   return TEXT_PROP_TYPE_KEYS.has(key);
 };
@@ -3647,7 +3677,7 @@ var isInlineEditingAllowed = ({ rawValue, propTypeFromSchema }) => {
   if (rawValue === null || rawValue === void 0) {
     return isAllowedBySchema(propTypeFromSchema);
   }
-  return import_editor_props4.htmlV3PropTypeUtil.isValid(rawValue) || import_editor_props4.stringPropTypeUtil.isValid(rawValue);
+  return import_editor_props5.htmlV3PropTypeUtil.isValid(rawValue) || import_editor_props5.stringPropTypeUtil.isValid(rawValue);
 };
 
 // src/legacy/replacements/inline-editing/inline-editing-elements.tsx
@@ -3732,15 +3762,15 @@ var InlineEditingReplacement = class extends ReplacementBase {
   }
   getExtractedContentValue() {
     const propValue = this.getInlineEditablePropValue();
-    const extracted = import_editor_props5.htmlV3PropTypeUtil.extract(propValue);
-    return import_editor_props5.stringPropTypeUtil.extract(extracted?.content ?? null) ?? "";
+    const extracted = import_editor_props6.htmlV3PropTypeUtil.extract(propValue);
+    return import_editor_props6.stringPropTypeUtil.extract(extracted?.content ?? null) ?? "";
   }
   setContentValue(value) {
     const settingKey = this.getInlineEditablePropertyName();
     const html = value || "";
-    const parsed = (0, import_editor_props5.parseHtmlChildren)(html);
-    const valueToSave = import_editor_props5.htmlV3PropTypeUtil.create({
-      content: parsed.content ? import_editor_props5.stringPropTypeUtil.create(parsed.content) : null,
+    const parsed = (0, import_editor_props6.parseHtmlChildren)(html);
+    const valueToSave = import_editor_props6.htmlV3PropTypeUtil.create({
+      content: parsed.content ? import_editor_props6.stringPropTypeUtil.create(parsed.content) : null,
       children: parsed.children
     });
     (0, import_editor_v1_adapters13.undoable)(
@@ -3771,7 +3801,7 @@ var InlineEditingReplacement = class extends ReplacementBase {
       return null;
     }
     if (propType.kind === "union") {
-      const textKeys = [import_editor_props5.htmlV3PropTypeUtil.key, import_editor_props5.stringPropTypeUtil.key];
+      const textKeys = [import_editor_props6.htmlV3PropTypeUtil.key, import_editor_props6.stringPropTypeUtil.key];
       for (const key of textKeys) {
         if (propType.prop_types[key]) {
           return key;
@@ -3800,7 +3830,7 @@ var InlineEditingReplacement = class extends ReplacementBase {
   getExpectedTag() {
     const tagPropType = this.getTagPropType();
     const tagSettingKey = "tag";
-    return import_editor_props5.stringPropTypeUtil.extract(this.getSetting(tagSettingKey) ?? null) ?? import_editor_props5.stringPropTypeUtil.extract(tagPropType?.default ?? null) ?? null;
+    return import_editor_props6.stringPropTypeUtil.extract(this.getSetting(tagSettingKey) ?? null) ?? import_editor_props6.stringPropTypeUtil.extract(tagPropType?.default ?? null) ?? null;
   }
   getTagPropType() {
     const propsSchema = (0, import_editor_elements9.getElementType)(this.type)?.propsSchema;
@@ -4027,7 +4057,7 @@ function createNestedTemplatedType(type, renderer, element) {
 }
 
 // src/legacy/tabs-model-extensions.ts
-var import_editor_props6 = require("@elementor/editor-props");
+var import_editor_props7 = require("@elementor/editor-props");
 var tabModelExtensions = {
   modifyDefaultChildren(elements) {
     if (!Array.isArray(elements) || elements.length === 0) {
@@ -4043,8 +4073,8 @@ var tabModelExtensions = {
       ...paragraphElement,
       settings: {
         ...paragraphElement.settings,
-        paragraph: import_editor_props6.htmlV3PropTypeUtil.create({
-          content: import_editor_props6.stringPropTypeUtil.create(`Tab ${position}`),
+        paragraph: import_editor_props7.htmlV3PropTypeUtil.create({
+          content: import_editor_props7.stringPropTypeUtil.create(`Tab ${position}`),
           children: []
         })
       }
@@ -4057,7 +4087,7 @@ function initTabsModelExtensions() {
 }
 
 // src/mcp/canvas-mcp.ts
-var import_editor_props11 = require("@elementor/editor-props");
+var import_editor_props12 = require("@elementor/editor-props");
 
 // src/mcp/resources/available-widgets-resource.ts
 var import_editor_v1_adapters15 = require("@elementor/editor-v1-adapters");
@@ -4209,7 +4239,7 @@ function extractElementData(element) {
 }
 
 // src/mcp/resources/dynamic-tags-resource.ts
-var import_editor_props7 = require("@elementor/editor-props");
+var import_editor_props8 = require("@elementor/editor-props");
 
 // src/mcp/utils/resolve-dynamic-tag.ts
 var import_editor_v1_adapters17 = require("@elementor/editor-v1-adapters");
@@ -4277,7 +4307,7 @@ var defaultSettingValue = (propType) => {
 var DYNAMIC_TAGS_URI = "elementor://dynamic-tags";
 var settingsSchema = (propsSchema) => {
   return Object.fromEntries(
-    Object.entries(propsSchema ?? {}).filter(([key]) => !OMITTED_DYNAMIC_SETTING_KEYS.includes(key)).map(([key, propType]) => [key, import_editor_props7.Schema.propTypeToJsonSchema(propType)])
+    Object.entries(propsSchema ?? {}).filter(([key]) => !OMITTED_DYNAMIC_SETTING_KEYS.includes(key)).map(([key, propType]) => [key, import_editor_props8.Schema.propTypeToJsonSchema(propType)])
   );
 };
 var buildDynamicTagsList = () => {
@@ -4633,7 +4663,7 @@ var import_editor_elements15 = require("@elementor/editor-elements");
 
 // src/mcp/utils/do-update-element-property.ts
 var import_editor_elements14 = require("@elementor/editor-elements");
-var import_editor_props8 = require("@elementor/editor-props");
+var import_editor_props9 = require("@elementor/editor-props");
 var import_editor_styles4 = require("@elementor/editor-styles");
 var import_editor_v1_adapters21 = require("@elementor/editor-v1-adapters");
 
@@ -4710,7 +4740,7 @@ var LOCAL_STYLE_META = {
 };
 function resolvePropValue(value, forceKey) {
   const Utils = window.elementorV2.editorVariables.Utils;
-  return import_editor_props8.Schema.adjustLlmPropValueSchema(value, {
+  return import_editor_props9.Schema.adjustLlmPropValueSchema(value, {
     forceKey,
     transformers: {
       ...Utils.globalVariablesLLMResolvers,
@@ -4769,7 +4799,7 @@ var doUpdateElementProperty = (params) => {
       }
       if (propertyRawSchema.kind === "plain") {
         if (typeof propertyMapValue[stylePropName] !== "object") {
-          const propUtil = (0, import_editor_props8.getPropSchemaFromCache)(propertyRawSchema.key);
+          const propUtil = (0, import_editor_props9.getPropSchemaFromCache)(propertyRawSchema.key);
           if (propUtil) {
             const plainValue = propUtil.create(propertyMapValue[stylePropName]);
             propertyMapValue[stylePropName] = plainValue;
@@ -4822,7 +4852,7 @@ var doUpdateElementProperty = (params) => {
   }
   const propKey = elementPropSchema[propertyName].key;
   const value = resolvePropValue(propertyValue, propKey);
-  const { valid, jsonSchema } = import_editor_props8.Schema.validatePropValue(elementPropSchema[propertyName], propertyValue);
+  const { valid, jsonSchema } = import_editor_props9.Schema.validatePropValue(elementPropSchema[propertyName], propertyValue);
   if (!valid) {
     throw new Error(
       `Invalid PropValue for elementId: ${elementId}. PropKey: ${propKey}, PropValue: ${JSON.stringify(
@@ -5531,7 +5561,7 @@ var import_editor_elements18 = require("@elementor/editor-elements");
 
 // src/mcp/utils/validate-input.ts
 var import_editor_elements17 = require("@elementor/editor-elements");
-var import_editor_props9 = require("@elementor/editor-props");
+var import_editor_props10 = require("@elementor/editor-props");
 var import_editor_styles5 = require("@elementor/editor-styles");
 var _widgetsSchema = null;
 var validateInput = {
@@ -5565,10 +5595,10 @@ var validateInput = {
       if (!propSchema) {
         errors.push(`Property "${propName}" is not defined in the schema.`);
         hasInvalidKey = true;
-      } else if (!import_editor_props9.Schema.isPropKeyConfigurable(propName, propSchema)) {
+      } else if (!import_editor_props10.Schema.isPropKeyConfigurable(propName, propSchema)) {
         errors.push(`Property "${propName}" is not configurable.`);
       } else {
-        const { valid } = import_editor_props9.Schema.validatePropValue(propSchema, propValue);
+        const { valid } = import_editor_props10.Schema.validatePropValue(propSchema, propValue);
         if (!valid) {
           errors.push(
             `Invalid property "${propName}". Validate input with resource [${STYLE_SCHEMA_URI.replace(
@@ -5881,7 +5911,7 @@ Provide styling as raw CSS via the "style" parameter (a flat map of CSS property
 
 // src/mcp/tools/get-element-config/tool.ts
 var import_editor_elements19 = require("@elementor/editor-elements");
-var import_editor_props10 = require("@elementor/editor-props");
+var import_editor_props11 = require("@elementor/editor-props");
 var import_schema5 = require("@elementor/schema");
 var schema = {
   elementId: import_schema5.z.string()
@@ -5938,7 +5968,7 @@ var initGetElementConfigTool = (reg) => {
       }
       const propValues = {};
       const stylePropValues = {};
-      import_editor_props10.Schema.configurableKeys(propSchema).forEach((key) => {
+      import_editor_props11.Schema.configurableKeys(propSchema).forEach((key) => {
         propValues[key] = structuredClone(elementRawSettings.get(key));
       });
       const elementStyles = (0, import_editor_elements19.getElementStyles)(elementId) || {};
@@ -5974,7 +6004,7 @@ var initGetElementConfigTool = (reg) => {
 
 // src/mcp/canvas-mcp.ts
 var initCanvasMcp = (reg) => {
-  import_editor_props11.Schema.setDynamicTagNamesResolver(getDynamicTagNamesByCategories);
+  import_editor_props12.Schema.setDynamicTagNamesResolver(getDynamicTagNamesByCategories);
   initWidgetsSchemaResource(reg);
   initAvailableWidgetsResource(reg);
   initDocumentStructureResource(reg);
@@ -6181,12 +6211,12 @@ function shouldBlock(sourceElements, targetElements) {
 
 // src/style-commands/paste-style.ts
 var import_editor_elements23 = require("@elementor/editor-elements");
-var import_editor_props13 = require("@elementor/editor-props");
+var import_editor_props14 = require("@elementor/editor-props");
 var import_editor_v1_adapters24 = require("@elementor/editor-v1-adapters");
 
 // src/utils/command-utils.ts
 var import_editor_elements21 = require("@elementor/editor-elements");
-var import_editor_props12 = require("@elementor/editor-props");
+var import_editor_props13 = require("@elementor/editor-props");
 var import_i18n5 = require("@wordpress/i18n");
 function hasAtomicWidgets(args) {
   const { containers = [args.container] } = args;
@@ -6204,7 +6234,7 @@ function getClassesProp(container) {
     return null;
   }
   const [propKey] = Object.entries(propsSchema).find(
-    ([, propType]) => propType.kind === "plain" && propType.key === import_editor_props12.CLASSES_PROP_KEY
+    ([, propType]) => propType.kind === "plain" && propType.key === import_editor_props13.CLASSES_PROP_KEY
   ) ?? [];
   return propKey ?? null;
 }
@@ -6353,8 +6383,8 @@ function pasteClasses(containers, classes) {
       return;
     }
     const classesSetting = (0, import_editor_elements23.getElementSetting)(container.id, classesProp);
-    const currentClasses = import_editor_props13.classesPropTypeUtil.extract(classesSetting) ?? [];
-    const newClasses = import_editor_props13.classesPropTypeUtil.create(Array.from(/* @__PURE__ */ new Set([...classes, ...currentClasses])));
+    const currentClasses = import_editor_props14.classesPropTypeUtil.extract(classesSetting) ?? [];
+    const newClasses = import_editor_props14.classesPropTypeUtil.create(Array.from(/* @__PURE__ */ new Set([...classes, ...currentClasses])));
     (0, import_editor_elements23.updateElementSettings)({
       id: container.id,
       props: { [classesProp]: newClasses }

package/dist/index.mjs

@@ -1396,7 +1396,7 @@ function createPropsResolver({ transformers, schema: initialSchema, onPropResolv
       Object.entries(schema2).map(async ([key, type]) => {
         const value = props[key] ?? type.default;
         const transformed = await transform({ value, key, type, signal, renderContext });
-        onPropResolve?.({ key, value: transformed });
+        onPropResolve?.({ key, value: transformed, propValue: value, propType: type });
         if (isMultiProps(transformed)) {
           return getMultiPropsValue(transformed);
         }
@@ -1466,6 +1466,27 @@ function createPropsResolver({ transformers, schema: initialSchema, onPropResolv
   return resolve;
 }
 
+// src/renderers/enqueue-font-from-style-prop.ts
+import { getPropSchemaFromCache, isTransformable as isTransformable2 } from "@elementor/editor-props";
+var maybeEnqueueFontFromStyleProp = (propType, propValue, enqueue) => {
+  if (!isTransformable2(propValue) || propValue.disabled) {
+    return;
+  }
+  const typeKey = propType.kind === "union" ? propValue.$$type : propType.key;
+  const propTypeUtil = getPropSchemaFromCache(typeKey);
+  if (!propTypeUtil || !("getEnqueueFontFamily" in propTypeUtil) || typeof propTypeUtil.getEnqueueFontFamily !== "function") {
+    return;
+  }
+  const stored = propValue.value;
+  if (typeof stored !== "string") {
+    return;
+  }
+  const font = propTypeUtil.getEnqueueFontFamily(stored);
+  if (font) {
+    enqueue(font);
+  }
+};
+
 // src/transformers/create-transformers-registry.ts
 function createTransformersRegistry() {
   const transformers = {};
@@ -1498,11 +1519,8 @@ function useStylePropResolver() {
     return createPropsResolver({
       transformers: styleTransformersRegistry,
       schema: getStylesSchema(),
-      onPropResolve: ({ key, value }) => {
-        if (key !== "font-family" || typeof value !== "string") {
-          return;
-        }
-        enqueueFont(value);
+      onPropResolve: ({ propValue, propType }) => {
+        maybeEnqueueFontFromStyleProp(propType, propValue, enqueueFont);
       }
     });
   }, []);
@@ -2432,6 +2450,18 @@ var flexTransformer = createTransformer((value) => {
   return null;
 });
 
+// src/transformers/styles/font-family-transformer.ts
+var fontFamilyTransformer = createTransformer((value) => {
+  if (typeof value !== "string" || !value.trim()) {
+    return null;
+  }
+  const trimmed = value.trim();
+  if (trimmed.startsWith('"') && trimmed.endsWith('"') || trimmed.startsWith("'") && trimmed.endsWith("'")) {
+    return trimmed;
+  }
+  return `"${trimmed}"`;
+});
+
 // src/transformers/styles/grid-track-renderer.ts
 var GRID_TRACK_PROPERTIES = /* @__PURE__ */ new Set(["grid-template-columns", "grid-template-rows"]);
 var isGridTrackProperty = (cssProperty) => GRID_TRACK_PROPERTIES.has(cssProperty);
@@ -2583,7 +2613,7 @@ var mapToTransitionString = (value, allowedProperties) => {
 
 // src/init-style-transformers.ts
 function initStyleTransformers() {
-  styleTransformersRegistry.register("size", sizeTransformer).register("grid-track-size", gridTrackSizeTransformer).register("shadow", shadowTransformer).register("stroke", strokeTransformer).register(
+  styleTransformersRegistry.register("font-family", fontFamilyTransformer).register("size", sizeTransformer).register("grid-track-size", gridTrackSizeTransformer).register("shadow", shadowTransformer).register("stroke", strokeTransformer).register(
     "dimensions",
     createMultiPropsTransformer(
       ["block-start", "block-end", "inline-start", "inline-end"],
@@ -4619,7 +4649,7 @@ import {
   updateElementSettings,
   updateElementStyle
 } from "@elementor/editor-elements";
-import { getPropSchemaFromCache, Schema as Schema3 } from "@elementor/editor-props";
+import { getPropSchemaFromCache as getPropSchemaFromCache2, Schema as Schema3 } from "@elementor/editor-props";
 import { getStylesSchema as getStylesSchema2, getVariantByMeta } from "@elementor/editor-styles";
 import { __privateRunCommandSync as runCommandSync2 } from "@elementor/editor-v1-adapters";
 
@@ -4755,7 +4785,7 @@ var doUpdateElementProperty = (params) => {
       }
       if (propertyRawSchema.kind === "plain") {
         if (typeof propertyMapValue[stylePropName] !== "object") {
-          const propUtil = getPropSchemaFromCache(propertyRawSchema.key);
+          const propUtil = getPropSchemaFromCache2(propertyRawSchema.key);
           if (propUtil) {
             const plainValue = propUtil.create(propertyMapValue[stylePropName]);
             propertyMapValue[stylePropName] = plainValue;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@elementor/editor-canvas",
   "description": "Elementor Editor Canvas",
-  "version": "4.2.0-939",
+  "version": "4.2.0-940",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -37,26 +37,26 @@
     "react-dom": "^18.3.1"
   },
   "dependencies": {
-    "@elementor/editor": "4.2.0-939",
+    "@elementor/editor": "4.2.0-940",
     "dompurify": "^3.2.6",
-    "@elementor/editor-controls": "4.2.0-939",
-    "@elementor/editor-documents": "4.2.0-939",
-    "@elementor/editor-elements": "4.2.0-939",
-    "@elementor/editor-interactions": "4.2.0-939",
-    "@elementor/editor-mcp": "4.2.0-939",
-    "@elementor/editor-notifications": "4.2.0-939",
-    "@elementor/editor-props": "4.2.0-939",
-    "@elementor/editor-responsive": "4.2.0-939",
-    "@elementor/editor-styles": "4.2.0-939",
-    "@elementor/editor-styles-repository": "4.2.0-939",
-    "@elementor/editor-ui": "4.2.0-939",
-    "@elementor/editor-v1-adapters": "4.2.0-939",
-    "@elementor/http-client": "4.2.0-939",
-    "@elementor/schema": "4.2.0-939",
-    "@elementor/twing": "4.2.0-939",
+    "@elementor/editor-controls": "4.2.0-940",
+    "@elementor/editor-documents": "4.2.0-940",
+    "@elementor/editor-elements": "4.2.0-940",
+    "@elementor/editor-interactions": "4.2.0-940",
+    "@elementor/editor-mcp": "4.2.0-940",
+    "@elementor/editor-notifications": "4.2.0-940",
+    "@elementor/editor-props": "4.2.0-940",
+    "@elementor/editor-responsive": "4.2.0-940",
+    "@elementor/editor-styles": "4.2.0-940",
+    "@elementor/editor-styles-repository": "4.2.0-940",
+    "@elementor/editor-ui": "4.2.0-940",
+    "@elementor/editor-v1-adapters": "4.2.0-940",
+    "@elementor/http-client": "4.2.0-940",
+    "@elementor/schema": "4.2.0-940",
+    "@elementor/twing": "4.2.0-940",
     "@elementor/ui": "1.37.5",
-    "@elementor/utils": "4.2.0-939",
-    "@elementor/wp-media": "4.2.0-939",
+    "@elementor/utils": "4.2.0-940",
+    "@elementor/wp-media": "4.2.0-940",
     "@floating-ui/react": "^0.27.5",
     "@wordpress/i18n": "^5.13.0"
   },

package/src/hooks/__tests__/use-style-prop-resolver.test.ts

@@ -1,51 +1,60 @@
 import { createMockPropType } from 'test-utils';
-import { stringPropTypeUtil } from '@elementor/editor-props';
+import { fontFamilyPropTypeUtil } from '@elementor/editor-props';
+import { type BreakpointsMap } from '@elementor/editor-responsive';
 import { getStylesSchema } from '@elementor/editor-styles';
 import { enqueueFont } from '@elementor/editor-v1-adapters';
-import { act, renderHook } from '@testing-library/react';
+import { renderHook } from '@testing-library/react';
 
 import { initStyleTransformers } from '../../init-style-transformers';
+import { createStylesRenderer } from '../../renderers/create-styles-renderer';
 import { useStylePropResolver } from '../use-style-prop-resolver';
 
 jest.mock( '@elementor/editor-v1-adapters' );
-jest.mock( '@elementor/editor-styles' );
+jest.mock( '@elementor/editor-styles', () => ( {
+	...jest.requireActual( '@elementor/editor-styles' ),
+	getStylesSchema: jest.fn(),
+} ) );
 
 describe( 'useStylePropResolver', () => {
-	it( 'should call enqueueFont with the correct value when font-family is resolved', async () => {
+	it( 'should enqueue fonts from stored props when rendering styles', async () => {
 		// Arrange.
 		initStyleTransformers();
 
 		jest.mocked( getStylesSchema ).mockReturnValue( {
-			'font-family': createMockPropType( { key: 'string', kind: 'plain' } ),
-			'another-prop': createMockPropType( { key: 'string', kind: 'plain' } ),
+			'font-family': createMockPropType( { key: 'font-family', kind: 'plain' } ),
+			color: createMockPropType( { key: 'string', kind: 'plain' } ),
 		} );
 
 		const { result } = renderHook( useStylePropResolver );
 
-		// Act.
-		const resolve = result.current;
-
-		await act( () =>
-			resolve( {
-				props: {
-					'another-prop': stringPropTypeUtil.create( 'value' ),
-				},
-			} )
-		);
-
-		// Assert.
-		expect( enqueueFont ).not.toHaveBeenCalled();
+		const view = createStylesRenderer( {
+			resolve: result.current,
+			breakpoints: {} as BreakpointsMap,
+		} );
 
 		// Act.
-		await act( () =>
-			resolve( {
-				props: {
-					'font-family': stringPropTypeUtil.create( 'arial' ),
+		await view( {
+			styles: [
+				{
+					id: 'test-style',
+					type: 'class',
+					cssName: 'test-style',
+					label: 'Test style',
+					variants: [
+						{
+							meta: { breakpoint: null, state: null },
+							props: {
+								'font-family': fontFamilyPropTypeUtil.create( 'Open Sans' ),
+							},
+							custom_css: null,
+						},
+					],
 				},
-			} )
-		);
+			],
+		} );
 
 		// Assert.
-		expect( enqueueFont ).toHaveBeenCalledWith( 'arial' );
+		expect( enqueueFont ).toHaveBeenCalledWith( 'Open Sans' );
+		expect( enqueueFont ).toHaveBeenCalledTimes( 1 );
 	} );
 } );

package/src/hooks/use-style-prop-resolver.ts

@@ -3,6 +3,7 @@ import { getStylesSchema } from '@elementor/editor-styles';
 import { enqueueFont } from '@elementor/editor-v1-adapters';
 
 import { createPropsResolver } from '../renderers/create-props-resolver';
+import { maybeEnqueueFontFromStyleProp } from '../renderers/enqueue-font-from-style-prop';
 import { styleTransformersRegistry } from '../style-transformers-registry';
 
 export function useStylePropResolver() {
@@ -10,12 +11,8 @@ export function useStylePropResolver() {
 		return createPropsResolver( {
 			transformers: styleTransformersRegistry,
 			schema: getStylesSchema(),
-			onPropResolve: ( { key, value } ) => {
-				if ( key !== 'font-family' || typeof value !== 'string' ) {
-					return;
-				}
-
-				enqueueFont( value );
+			onPropResolve: ( { propValue, propType } ) => {
+				maybeEnqueueFontFromStyleProp( propType, propValue, enqueueFont );
 			},
 		} );
 	}, [] );

package/src/init-style-transformers.ts

@@ -13,6 +13,7 @@ import { createCombineArrayTransformer } from './transformers/styles/create-comb
 import { createMultiPropsTransformer } from './transformers/styles/create-multi-props-transformer';
 import { filterTransformer } from './transformers/styles/filter-transformer';
 import { flexTransformer } from './transformers/styles/flex-transformer';
+import { fontFamilyTransformer } from './transformers/styles/font-family-transformer';
 import { gridTrackSizeTransformer } from './transformers/styles/grid-track-size-transformer';
 import { perspectiveOriginTransformer } from './transformers/styles/perspective-origin-transformer';
 import { positionTransformer } from './transformers/styles/position-transformer';
@@ -30,6 +31,7 @@ import { transitionTransformer } from './transformers/styles/transition-transfor
 
 export function initStyleTransformers() {
 	styleTransformersRegistry
+		.register( 'font-family', fontFamilyTransformer )
 		.register( 'size', sizeTransformer )
 		.register( 'grid-track-size', gridTrackSizeTransformer )
 		.register( 'shadow', shadowTransformer )

package/src/renderers/__tests__/create-props-resolver.test.ts

@@ -287,8 +287,18 @@ describe( 'createPropsResolver', () => {
 
 		// Assert.
 		expect( onResolve ).toHaveBeenCalledTimes( 2 );
-		expect( onResolve ).toHaveBeenNthCalledWith( 1, { key: 'int', value: 2 } );
-		expect( onResolve ).toHaveBeenNthCalledWith( 2, { key: 'int2', value: 4 } );
+		expect( onResolve ).toHaveBeenNthCalledWith( 1, {
+			key: 'int',
+			value: 2,
+			propValue: { $$type: 'int', value: 1 },
+			propType: createMockPropType( { kind: 'plain', key: 'int' } ),
+		} );
+		expect( onResolve ).toHaveBeenNthCalledWith( 2, {
+			key: 'int2',
+			value: 4,
+			propValue: { $$type: 'int', value: 3 },
+			propType: createMockPropType( { kind: 'plain', key: 'int' } ),
+		} );
 	} );
 
 	it( 'should pass renderContext to transformers', async () => {

package/src/renderers/__tests__/create-styles-renderer.test.ts

@@ -79,6 +79,36 @@ describe( 'renderStyles', () => {
 		expect( resolve ).toHaveBeenNthCalledWith( 5, { props: { 'font-size': '50px' } } );
 	} );
 
+	it.each( [
+		[ '"Open Sans"', 'font-family:"Open Sans";' ],
+		[ 'Arial', 'font-family:Arial;' ],
+		[ 'var(--primary-font)', 'font-family:var(--primary-font);' ],
+	] )( 'should pass through font-family "%s" as-is in CSS output', async ( fontFamily, expected ) => {
+		// Arrange.
+		const styleDef: RendererStyleDefinition = {
+			id: 'test',
+			type: 'class',
+			cssName: 'test',
+			label: 'Test',
+			variants: [
+				{
+					meta: { breakpoint: null, state: null },
+					props: { 'font-family': fontFamily },
+					custom_css: null,
+				},
+			],
+		};
+
+		const resolve = jest.fn( ( { props } ) => props );
+		const renderStyles = createStylesRenderer( { breakpoints: {} as BreakpointsMap, resolve } );
+
+		// Act.
+		const result = await renderStyles( { styles: [ styleDef ] } );
+
+		// Assert.
+		expect( result[ 0 ].value ).toContain( expected );
+	} );
+
 	it( 'should add selector prefix to the output', async () => {
 		// Arrange.
 		const styleDef: RendererStyleDefinition = {

package/src/renderers/__tests__/enqueue-font-from-style-prop.test.ts

@@ -0,0 +1,29 @@
+import { createMockPropType } from 'test-utils';
+import { fontFamilyPropTypeUtil } from '@elementor/editor-props';
+import { enqueueFont } from '@elementor/editor-v1-adapters';
+
+import { maybeEnqueueFontFromStyleProp } from '../enqueue-font-from-style-prop';
+
+jest.mock( '@elementor/editor-v1-adapters' );
+
+describe( 'maybeEnqueueFontFromStyleProp', () => {
+	it( 'should enqueue when prop type implements getEnqueueFontFamily', () => {
+		maybeEnqueueFontFromStyleProp(
+			createMockPropType( { key: 'font-family', kind: 'plain' } ),
+			fontFamilyPropTypeUtil.create( 'Open Sans' ),
+			enqueueFont
+		);
+
+		expect( enqueueFont ).toHaveBeenCalledWith( 'Open Sans' );
+	} );
+
+	it( 'should not enqueue when prop type does not implement font enqueue', () => {
+		maybeEnqueueFontFromStyleProp(
+			createMockPropType( { key: 'string', kind: 'plain' } ),
+			{ $$type: 'string', value: 'red' },
+			enqueueFont
+		);
+
+		expect( enqueueFont ).not.toHaveBeenCalled();
+	} );
+} );

package/src/renderers/create-props-resolver.ts

@@ -15,7 +15,7 @@ import { getMultiPropsValue, isMultiProps } from './multi-props';
 type CreatePropResolverArgs = {
 	transformers: TransformersRegistry;
 	schema: PropsSchema;
-	onPropResolve?: ( args: { key: string; value: unknown } ) => void;
+	onPropResolve?: ( args: { key: string; value: unknown; propValue: unknown; propType: PropType } ) => void;
 };
 
 type ResolveArgs = {
@@ -48,7 +48,7 @@ export function createPropsResolver( { transformers, schema: initialSchema, onPr
 				const value = props[ key ] ?? type.default;
 				const transformed = ( await transform( { value, key, type, signal, renderContext } ) ) as PropValue;
 
-				onPropResolve?.( { key, value: transformed } );
+				onPropResolve?.( { key, value: transformed, propValue: value, propType: type } );
 
 				if ( isMultiProps( transformed ) ) {
 					return getMultiPropsValue( transformed );

package/src/renderers/create-styles-renderer.ts

@@ -1,4 +1,4 @@
-import type { Props } from '@elementor/editor-props';
+import { type Props } from '@elementor/editor-props';
 import { type Breakpoint, type BreakpointsMap } from '@elementor/editor-responsive';
 import {
 	type CustomCss,

package/src/renderers/enqueue-font-from-style-prop.ts

@@ -0,0 +1,34 @@
+import { getPropSchemaFromCache, isTransformable, type PropType } from '@elementor/editor-props';
+
+export const maybeEnqueueFontFromStyleProp = (
+	propType: PropType,
+	propValue: unknown,
+	enqueue: ( font: string ) => void
+): void => {
+	if ( ! isTransformable( propValue ) || propValue.disabled ) {
+		return;
+	}
+
+	const typeKey = propType.kind === 'union' ? propValue.$$type : propType.key;
+	const propTypeUtil = getPropSchemaFromCache( typeKey );
+
+	if (
+		! propTypeUtil ||
+		! ( 'getEnqueueFontFamily' in propTypeUtil ) ||
+		typeof propTypeUtil.getEnqueueFontFamily !== 'function'
+	) {
+		return;
+	}
+
+	const stored = propValue.value;
+
+	if ( typeof stored !== 'string' ) {
+		return;
+	}
+
+	const font = propTypeUtil.getEnqueueFontFamily( stored );
+
+	if ( font ) {
+		enqueue( font );
+	}
+};

package/src/transformers/styles/__tests__/font-family-transformer.test.ts

@@ -0,0 +1,20 @@
+import { fontFamilyTransformer } from '../font-family-transformer';
+
+function run( value: string | null ) {
+	return fontFamilyTransformer( value, { key: 'font-family', signal: undefined } );
+}
+
+describe( 'fontFamilyTransformer', () => {
+	it( 'wraps font names in quotes', () => {
+		expect( run( ' Open Sans ' ) ).toBe( '"Open Sans"' );
+		expect( run( 'Arial' ) ).toBe( '"Arial"' );
+	} );
+
+	it( 'passes through already quoted values', () => {
+		expect( run( '"Open Sans"' ) ).toBe( '"Open Sans"' );
+	} );
+
+	it( 'returns null for non-string values', () => {
+		expect( run( null ) ).toBeNull();
+	} );
+} );

package/src/transformers/styles/font-family-transformer.ts

@@ -0,0 +1,18 @@
+import { createTransformer } from '../create-transformer';
+
+export const fontFamilyTransformer = createTransformer( ( value: string | null ) => {
+	if ( typeof value !== 'string' || ! value.trim() ) {
+		return null;
+	}
+
+	const trimmed = value.trim();
+
+	if (
+		( trimmed.startsWith( '"' ) && trimmed.endsWith( '"' ) ) ||
+		( trimmed.startsWith( "'" ) && trimmed.endsWith( "'" ) )
+	) {
+		return trimmed;
+	}
+
+	return `"${ trimmed }"`;
+} );