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

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"],
@@ -4164,7 +4194,7 @@ function extractElementData(element) {
     widgetType: model.widgetType || void 0,
     version: resolveElementVersion(element)
   };
-  const title = model.title || element.model?.editor_settings?.title;
+  const title = model.title || element.model?.editor_settings?.title || element.model.getTitle?.();
   if (title) {
     result.title = title;
   }
@@ -4599,7 +4629,7 @@ import {
   createElement as createElement13,
   deleteElement as deleteElement2,
   getContainer as getContainer5,
-  getWidgetsCache as getWidgetsCache8
+  getWidgetsCache as getWidgetsCache9
 } from "@elementor/editor-elements";
 
 // src/composition-builder/composition-builder.ts
@@ -4608,18 +4638,18 @@ import {
   deleteElement,
   generateElementId as generateElementId2,
   getContainer as getContainer4,
-  getWidgetsCache as getWidgetsCache7
+  getWidgetsCache as getWidgetsCache8
 } from "@elementor/editor-elements";
 
 // src/mcp/utils/do-update-element-property.ts
 import {
   createElementStyle,
   getElementStyles,
-  getWidgetsCache as getWidgetsCache6,
+  getWidgetsCache as getWidgetsCache7,
   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";
 
@@ -4637,6 +4667,58 @@ var readStoredCustomCssText = (raw) => {
   }
 };
 
+// src/mcp/utils/resolve-canonical-prop-name.ts
+import { getWidgetsCache as getWidgetsCache6 } from "@elementor/editor-elements";
+function buildAliasToCanonicalMap(schema2) {
+  const aliasToCanonical = {};
+  for (const [canonical, propType] of Object.entries(schema2)) {
+    const aliases = propType.meta?.aliases;
+    if (!Array.isArray(aliases)) {
+      continue;
+    }
+    for (const alias of aliases) {
+      if (typeof alias === "string" && alias) {
+        aliasToCanonical[alias] = canonical;
+      }
+    }
+  }
+  return aliasToCanonical;
+}
+function resolveCanonicalPropName(elementType, propertyName) {
+  const schema2 = getWidgetsCache6()?.[elementType]?.atomic_props_schema;
+  if (!schema2 || schema2[propertyName]) {
+    return propertyName;
+  }
+  return buildAliasToCanonicalMap(schema2)[propertyName] ?? propertyName;
+}
+function resolveCanonicalPropKeys(elementType, props) {
+  const schema2 = getWidgetsCache6()?.[elementType]?.atomic_props_schema;
+  if (!schema2) {
+    return { ...props };
+  }
+  const aliasToCanonical = buildAliasToCanonicalMap(schema2);
+  const resolved = {};
+  for (const [key, value] of Object.entries(props)) {
+    if (schema2[key]) {
+      resolved[key] = value;
+    }
+  }
+  for (const [key, value] of Object.entries(props)) {
+    if (schema2[key]) {
+      continue;
+    }
+    const canonical = aliasToCanonical[key];
+    if (!canonical) {
+      resolved[key] = value;
+      continue;
+    }
+    if (!Object.prototype.hasOwnProperty.call(resolved, canonical)) {
+      resolved[canonical] = value;
+    }
+  }
+  return resolved;
+}
+
 // src/mcp/utils/do-update-element-property.ts
 var LOCAL_STYLE_META = {
   breakpoint: "desktop",
@@ -4653,7 +4735,8 @@ function resolvePropValue(value, forceKey) {
   });
 }
 var doUpdateElementProperty = (params) => {
-  const { elementId, propertyName, propertyValue, elementType, customCssWriteMode = "replace" } = params;
+  const { elementId, propertyValue, elementType, customCssWriteMode = "replace" } = params;
+  const propertyName = params.propertyName === "_styles" ? params.propertyName : resolveCanonicalPropName(elementType, params.propertyName);
   if (propertyName === "_styles") {
     const elementStyles = getElementStyles(elementId) || {};
     const propertyMapValue = propertyValue;
@@ -4702,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;
@@ -4741,7 +4824,7 @@ var doUpdateElementProperty = (params) => {
     }
     return;
   }
-  const elementPropSchema = getWidgetsCache6()?.[elementType]?.atomic_props_schema;
+  const elementPropSchema = getWidgetsCache7()?.[elementType]?.atomic_props_schema;
   if (!elementPropSchema) {
     throw new Error(`No prop schema found for element type: ${elementType}`);
   }
@@ -4824,7 +4907,7 @@ var CompositionBuilder = class _CompositionBuilder {
   api = {
     createElement: createElement12,
     deleteElement,
-    getWidgetsCache: getWidgetsCache7,
+    getWidgetsCache: getWidgetsCache8,
     generateElementId: generateElementId2,
     getContainer: getContainer4,
     doUpdateElementProperty
@@ -5346,7 +5429,7 @@ var initBuildCompositionsTool = (reg) => {
       const { xmlStructure, elementConfig, stylesConfig } = adaptLeafRootParams({
         ...rawParams,
         stylesConfig: convertedStyles,
-        widgetsCache: getWidgetsCache8() ?? {}
+        widgetsCache: getWidgetsCache9() ?? {}
       });
       let generatedXML = "";
       const errors = [];
@@ -5358,7 +5441,7 @@ var initBuildCompositionsTool = (reg) => {
         const compositionBuilder = CompositionBuilder.fromXMLString(xmlStructure, {
           createElement: createElement13,
           deleteElement: deleteElement2,
-          getWidgetsCache: getWidgetsCache8
+          getWidgetsCache: getWidgetsCache9
         });
         compositionBuilder.setElementConfig(elementConfig);
         compositionBuilder.setStylesConfig(stylesConfig);
@@ -5443,7 +5526,7 @@ function assertCompositionXmlUsesV4WidgetsOnly(xmlStructure) {
   if (doc.querySelector("parsererror")) {
     throw new Error("Failed to parse XML string: " + doc);
   }
-  const widgetsCache = getWidgetsCache8() ?? {};
+  const widgetsCache = getWidgetsCache9() ?? {};
   for (const node of doc.querySelectorAll("*")) {
     const type = node.tagName;
     const widgetData = widgetsCache[type];
@@ -5460,10 +5543,10 @@ function assertCompositionXmlUsesV4WidgetsOnly(xmlStructure) {
 }
 
 // src/mcp/tools/configure-element/tool.ts
-import { getWidgetsCache as getWidgetsCache10 } from "@elementor/editor-elements";
+import { getContainer as getContainer6, getWidgetsCache as getWidgetsCache11 } from "@elementor/editor-elements";
 
 // src/mcp/utils/validate-input.ts
-import { getWidgetsCache as getWidgetsCache9 } from "@elementor/editor-elements";
+import { getWidgetsCache as getWidgetsCache10 } from "@elementor/editor-elements";
 import { Schema as Schema4 } from "@elementor/editor-props";
 import { getStylesSchema as getStylesSchema3 } from "@elementor/editor-styles";
 var _widgetsSchema = null;
@@ -5471,7 +5554,7 @@ var validateInput = {
   get widgetsSchema() {
     if (!_widgetsSchema) {
       const schema2 = {};
-      const cache = getWidgetsCache9();
+      const cache = getWidgetsCache10();
       if (!cache) {
         return {};
       }
@@ -5712,19 +5795,28 @@ var initConfigureElementTool = (reg) => {
       { description: "Dynamic tags catalog", uri: DYNAMIC_TAGS_URI }
     ],
     handler: async ({ elementId, propertiesToChange, elementType, style }) => {
-      const widgetData = getWidgetsCache10()?.[elementType];
+      const widgetData = getWidgetsCache11()?.[elementType];
       if (!widgetData) {
         throw new Error(
           `Unknown element type: ${elementType}. Check the available-widgets resource for valid types.`
         );
       }
+      const container = getContainer6(elementId);
+      if (!container) {
+        throw new Error(`Element with id ${elementId} not found`);
+      }
+      const isElementTypeMatchingId = container.settings.get("widgetType") === elementType || container.type === elementType;
+      if (!isElementTypeMatchingId) {
+        throw new Error(`Element with ID ${elementId} is not of type ${elementType}`);
+      }
       if (!widgetData.atomic_props_schema) {
         throw new Error(
           `This tool does not support V3 elements. Please use the elementor-v3-mcp tools instead for element type: ${elementType}`
         );
       }
-      const toUpdate = Object.entries(propertiesToChange);
-      const { valid, errors } = validateInput.validatePropSchema(elementType, propertiesToChange);
+      const propertiesToUpdate = resolveCanonicalPropKeys(elementType, propertiesToChange);
+      const toUpdate = Object.entries(propertiesToUpdate);
+      const { valid, errors } = validateInput.validatePropSchema(elementType, propertiesToUpdate);
       if (!valid) {
         const errorMessage = `Failed to configure element "${elementId}" due to invalid properties: ${errors?.join(
           "\n- "
@@ -5804,7 +5896,7 @@ Provide styling as raw CSS via the "style" parameter (a flat map of CSS property
 }
 
 // src/mcp/tools/get-element-config/tool.ts
-import { getContainer as getContainer6, getElementStyles as getElementStyles2, getWidgetsCache as getWidgetsCache11 } from "@elementor/editor-elements";
+import { getContainer as getContainer7, getElementStyles as getElementStyles2, getWidgetsCache as getWidgetsCache12 } from "@elementor/editor-elements";
 import { Schema as Schema5 } from "@elementor/editor-props";
 import { z as z3 } from "@elementor/schema";
 var schema = {
@@ -5839,12 +5931,12 @@ var initGetElementConfigTool = (reg) => {
     schema,
     outputSchema: outputSchema3,
     handler: async ({ elementId }) => {
-      const element = getContainer6(elementId);
+      const element = getContainer7(elementId);
       if (!element) {
         throw new Error(`Element with ID ${elementId} not found.`);
       }
       const elementType = element.model.get("widgetType") || element.model.get("elType") || "";
-      const widgetData = getWidgetsCache11()?.[elementType];
+      const widgetData = getWidgetsCache12()?.[elementType];
       if (!widgetData) {
         throw new Error(
           `Unknown element type: ${elementType}. Check the available-widgets resource for valid types.`
@@ -5856,7 +5948,7 @@ var initGetElementConfigTool = (reg) => {
         );
       }
       const elementRawSettings = element.settings;
-      const propSchema = getWidgetsCache11()?.[elementType]?.atomic_props_schema;
+      const propSchema = getWidgetsCache12()?.[elementType]?.atomic_props_schema;
       if (!elementRawSettings || !propSchema) {
         throw new Error(`No settings or prop schema found for element ID: ${elementId}`);
       }
@@ -6108,7 +6200,7 @@ function shouldBlock(sourceElements, targetElements) {
 }
 
 // src/style-commands/paste-style.ts
-import { getContainer as getContainer7, getElementSetting, updateElementSettings as updateElementSettings2 } from "@elementor/editor-elements";
+import { getContainer as getContainer8, getElementSetting, updateElementSettings as updateElementSettings2 } from "@elementor/editor-elements";
 import { classesPropTypeUtil } from "@elementor/editor-props";
 import {
   __privateListenTo as listenTo5,
@@ -6117,7 +6209,7 @@ import {
 } from "@elementor/editor-v1-adapters";
 
 // src/utils/command-utils.ts
-import { getElementLabel as getElementLabel2, getWidgetsCache as getWidgetsCache12 } from "@elementor/editor-elements";
+import { getElementLabel as getElementLabel2, getWidgetsCache as getWidgetsCache13 } from "@elementor/editor-elements";
 import { CLASSES_PROP_KEY } from "@elementor/editor-props";
 import { __ as __5 } from "@wordpress/i18n";
 function hasAtomicWidgets(args) {
@@ -6142,7 +6234,7 @@ function getClassesProp(container) {
 }
 function getContainerSchema(container) {
   const type = container?.model.get("widgetType") || container?.model.get("elType");
-  const widgetsCache = getWidgetsCache12();
+  const widgetsCache = getWidgetsCache13();
   const elementType = widgetsCache?.[type];
   return elementType?.atomic_props_schema ?? null;
 }
@@ -6261,7 +6353,7 @@ function pasteStyles(args, pasteLocalStyle) {
   }
   const clipboardElements = getClipboardElements(storageKey);
   const [clipboardElement] = clipboardElements ?? [];
-  const clipboardContainer = getContainer7(clipboardElement.id);
+  const clipboardContainer = getContainer8(clipboardElement.id);
   if (!clipboardElement || !clipboardContainer || !isAtomicWidget(clipboardContainer)) {
     return;
   }
@@ -6538,10 +6630,10 @@ function useEscapeOnCanvas(canvasDocument, onEscape) {
 }
 
 // src/utils/after-render.ts
-import { getContainer as getContainer8 } from "@elementor/editor-elements";
+import { getContainer as getContainer9 } from "@elementor/editor-elements";
 function doAfterRender(elementIds, callback) {
   const pending = elementIds.map((elementId) => {
-    const view = getContainer8(elementId)?.view;
+    const view = getContainer9(elementId)?.view;
     if (!view || !hasDoAfterRender(view)) {
       return void 0;
     }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@elementor/editor-canvas",
   "description": "Elementor Editor Canvas",
-  "version": "4.2.0-938",
+  "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-938",
+    "@elementor/editor": "4.2.0-940",
     "dompurify": "^3.2.6",
-    "@elementor/editor-controls": "4.2.0-938",
-    "@elementor/editor-documents": "4.2.0-938",
-    "@elementor/editor-elements": "4.2.0-938",
-    "@elementor/editor-interactions": "4.2.0-938",
-    "@elementor/editor-mcp": "4.2.0-938",
-    "@elementor/editor-notifications": "4.2.0-938",
-    "@elementor/editor-props": "4.2.0-938",
-    "@elementor/editor-responsive": "4.2.0-938",
-    "@elementor/editor-styles": "4.2.0-938",
-    "@elementor/editor-styles-repository": "4.2.0-938",
-    "@elementor/editor-ui": "4.2.0-938",
-    "@elementor/editor-v1-adapters": "4.2.0-938",
-    "@elementor/http-client": "4.2.0-938",
-    "@elementor/schema": "4.2.0-938",
-    "@elementor/twing": "4.2.0-938",
+    "@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-938",
-    "@elementor/wp-media": "4.2.0-938",
+    "@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/mcp/resources/document-structure-resource.ts

@@ -136,7 +136,10 @@ function extractElementData( element: UnknownVersionElementInstanceData ): Recor
 		version: resolveElementVersion( element ),
 	};
 
-	const title = model.title || element.model?.editor_settings?.title;
+	const title =
+		model.title ||
+		element.model?.editor_settings?.title ||
+		( element.model as unknown as Record< string, CallableFunction > ).getTitle?.();
 
 	if ( title ) {
 		result.title = title;

package/src/mcp/tools/configure-element/tool.ts

@@ -1,10 +1,12 @@
-import { getWidgetsCache } from '@elementor/editor-elements';
+import { getContainer, getWidgetsCache } from '@elementor/editor-elements';
 import { type MCPRegistryEntry } from '@elementor/editor-mcp';
+import { type PropValue } from '@elementor/editor-props';
 
 import { DYNAMIC_TAGS_URI } from '../../resources/dynamic-tags-resource';
 import { WIDGET_SCHEMA_URI } from '../../resources/widgets-schema-resource';
 import { convertCssToAtomic } from '../../utils/convert-css-to-atomic';
 import { doUpdateElementProperty } from '../../utils/do-update-element-property';
+import { resolveCanonicalPropKeys } from '../../utils/resolve-canonical-prop-name';
 import { validateInput } from '../../utils/validate-input';
 import { CONFIGURE_ELEMENT_GUIDE_URI, generatePrompt } from './prompt';
 import { inputSchema as schema, outputSchema } from './schema';
@@ -42,20 +44,31 @@ export const initConfigureElementTool = ( reg: MCPRegistryEntry ) => {
 					`Unknown element type: ${ elementType }. Check the available-widgets resource for valid types.`
 				);
 			}
+			const container = getContainer( elementId );
+			if ( ! container ) {
+				throw new Error( `Element with id ${ elementId } not found` );
+			}
+			const isElementTypeMatchingId =
+				container.settings.get( 'widgetType' ) === elementType ||
+				( container as Record< string, unknown > ).type === elementType;
+			if ( ! isElementTypeMatchingId ) {
+				throw new Error( `Element with ID ${ elementId } is not of type ${ elementType }` );
+			}
 			if ( ! widgetData.atomic_props_schema ) {
 				throw new Error(
 					`This tool does not support V3 elements. Please use the elementor-v3-mcp tools instead for element type: ${ elementType }`
 				);
 			}
-			const toUpdate = Object.entries( propertiesToChange );
-			const { valid, errors } = validateInput.validatePropSchema( elementType, propertiesToChange );
+			const propertiesToUpdate = resolveCanonicalPropKeys( elementType, propertiesToChange );
+			const toUpdate = Object.entries( propertiesToUpdate );
+			const { valid, errors } = validateInput.validatePropSchema( elementType, propertiesToUpdate );
 			if ( ! valid ) {
 				const errorMessage = `Failed to configure element "${ elementId }" due to invalid properties: ${ errors?.join(
 					'\n- '
 				) }`;
 				throw new Error( errorMessage );
 			}
-			for ( const [ propertyName, propertyValue ] of toUpdate ) {
+			for ( const [ propertyName, propertyValue ] of toUpdate as [ string, PropValue ][] ) {
 				try {
 					doUpdateElementProperty( {
 						elementId,

package/src/mcp/utils/__tests__/do-update-element-property.test.ts

@@ -143,6 +143,49 @@ describe( 'doUpdateElementProperty', () => {
 		);
 	} );
 
+	it( 'persists canonical prop key when an alias property name is used', () => {
+		// Arrange
+		const propertyValue = 'resolved-title';
+		jest.mocked( getWidgetsCache ).mockReturnValue( {
+			[ ELEMENT_TYPE ]: {
+				atomic_props_schema: {
+					// @ts-ignore: Mock type
+					[ PROPERTY_NAME ]: {
+						...PROP_SCHEMA_ENTRY,
+						meta: { aliases: [ 'text' ] },
+					},
+				},
+			},
+		} );
+		jest.mocked( Schema.validatePropValue ).mockReturnValue( {
+			jsonSchema: EXPECTED_JSON_SCHEMA_SNIPPET,
+			valid: true,
+			errorMessages: [],
+			errors: [],
+		} );
+
+		// Act
+		doUpdateElementProperty( {
+			elementId: ELEMENT_ID,
+			elementType: ELEMENT_TYPE,
+			propertyName: 'text',
+			propertyValue,
+		} );
+
+		// Assert
+		expect( Schema.validatePropValue ).toHaveBeenCalledWith(
+			expect.objectContaining( PROP_SCHEMA_ENTRY ),
+			propertyValue
+		);
+		expect( updateElementSettings ).toHaveBeenCalledWith( {
+			id: ELEMENT_ID,
+			props: {
+				[ PROPERTY_NAME ]: propertyValue,
+			},
+			withHistory: false,
+		} );
+	} );
+
 	it( 'replaces existing local style custom_css by default', () => {
 		// Arrange
 		jest.mocked( getElementStyles ).mockReturnValue( {