@elementor/editor-canvas 3.33.0-291 → 3.33.0-293

package/dist/index.mjs

@@ -441,10 +441,10 @@ var getMultiPropsValue = (multiProps) => {
 // src/renderers/create-props-resolver.ts
 var TRANSFORM_DEPTH_LIMIT = 3;
 function createPropsResolver({ transformers, schema: initialSchema, onPropResolve }) {
-  async function resolve({ props, schema, signal }) {
-    schema = schema ?? initialSchema;
+  async function resolve({ props, schema: schema2, signal }) {
+    schema2 = schema2 ?? initialSchema;
     const promises = Promise.all(
-      Object.entries(schema).map(async ([key, type]) => {
+      Object.entries(schema2).map(async ([key, type]) => {
         const value = props[key] ?? type.default;
         const transformed = await transform({ value, key, type, signal });
         onPropResolve?.({ key, value: transformed });
@@ -1112,11 +1112,11 @@ function getVal2(val) {
 var transformOriginTransformer = createTransformer((value) => {
   const x = getVal2(value.x);
   const y = getVal2(value.y);
-  const z3 = getVal2(value.z);
-  if (x === DEFAULT_XY && y === DEFAULT_XY && z3 === DEFAULT_Z) {
+  const z4 = getVal2(value.z);
+  if (x === DEFAULT_XY && y === DEFAULT_XY && z4 === DEFAULT_Z) {
     return null;
   }
-  return `${x} ${y} ${z3}`;
+  return `${x} ${y} ${z4}`;
 });
 
 // src/transformers/styles/transform-rotate-transformer.ts
@@ -1467,8 +1467,24 @@ import {
 import { getStylesSchema as getStylesSchema2 } from "@elementor/editor-styles";
 var WIDGET_SCHEMA_URI = "elementor://widgets/schema/{widgetType}";
 var STYLE_SCHEMA_URI = "elementor://styles/schema/{category}";
+var BEST_PRACTICES_URI = "elementor://styles/best-practices";
 var initWidgetsSchemaResource = (reg) => {
   const { mcpServer } = reg;
+  mcpServer.resource("styles-best-practices", BEST_PRACTICES_URI, async () => {
+    return {
+      contents: [
+        {
+          uri: BEST_PRACTICES_URI,
+          text: `# Styling best practices
+Prefer using "em" and "rem" values for text-related sizes, padding and spacing. Use percentages for dynamic sizing relative to parent containers.
+This flexboxes are by default "flex" with "stretch" alignment. To ensure proper layout, define the "justify-content" and "align-items" as in the schema, or in custom_css, depends on your needs.
+
+When applicable for styles, use the "custom_css" property for free-form CSS styling. This property accepts a string of CSS rules that will be applied directly to the element.
+The css string must follow standard CSS syntax, with properties and values separated by semicolons, no selectors, or nesting rules allowed.`
+        }
+      ]
+    };
+  });
   mcpServer.resource(
     "styles-schema",
     new ResourceTemplate(STYLE_SCHEMA_URI, {
@@ -1545,9 +1561,9 @@ var initWidgetsSchemaResource = (reg) => {
           Schema.propTypeToJsonSchema(propType)
         ])
       );
-      delete asJson.classes;
-      delete asJson._cssid;
-      delete asJson.attributes;
+      Schema.nonConfigurablePropKeys.forEach((key) => {
+        delete asJson[key];
+      });
       return {
         contents: [
           {
@@ -1620,7 +1636,11 @@ import {
   updateElementSettings,
   updateElementStyle
 } from "@elementor/editor-elements";
-import { getPropSchemaFromCache, Schema as Schema2 } from "@elementor/editor-props";
+import {
+  getPropSchemaFromCache,
+  Schema as Schema2,
+  stringPropTypeUtil
+} from "@elementor/editor-props";
 import { getStylesSchema as getStylesSchema3 } from "@elementor/editor-styles";
 function resolvePropValue(value, forceKey) {
   return Schema2.adjustLlmPropValueSchema(value, forceKey);
@@ -1647,8 +1667,12 @@ var doUpdateElementProperty = (params) => {
     Object.keys(propertyMapValue).forEach((stylePropName) => {
       const propertyRawSchema = styleSchema[stylePropName];
       if (stylePropName === "custom_css") {
+        let customCssValue = propertyMapValue[stylePropName];
+        if (typeof customCssValue === "object") {
+          customCssValue = stringPropTypeUtil.extract(customCssValue) || customCssValue?.value || "";
+        }
         customCss = {
-          raw: btoa(propertyMapValue[stylePropName])
+          raw: btoa(customCssValue)
         };
         return;
       }
@@ -1670,7 +1694,7 @@ var doUpdateElementProperty = (params) => {
     if (!localStyle) {
       createElementStyle({
         elementId,
-        custom_css: customCss,
+        ...typeof customCss !== "undefined" ? { custom_css: customCss } : {},
         classesProp: "classes",
         label: "local",
         meta: {
@@ -1689,6 +1713,7 @@ var doUpdateElementProperty = (params) => {
           breakpoint: "desktop",
           state: null
         },
+        ...typeof customCss !== "undefined" ? { custom_css: customCss } : {},
         props: {
           ...transformedStyleValues
         }
@@ -1753,6 +1778,7 @@ Prefer this tool over any other tool for building HTML structure, unless you are
    For easy execution, USE ONLY "custom_css" category from the styles schema resource to apply styles.
 5. Ensure the XML structure is valid and parsable.
 6. Do not add any attribute nodes, classes, id's, and no text nodes allowed, for inline styles prefer USE the [${CUSTOM_CSS_URI}] resource for custom_css.
+   Layout properties, such as margin, padding, align, etc. must be applied using the [${STYLE_SCHEMA_URI}] PropValues.
 7. Some elements allow nesting of other elements, and most of the DO NOT. The allowed elements that can have nested children are "e-div-block" and "e-flexbox".
 8. Make sure that non-container elements do NOT have any nested elements.
 9. Unsless the user specifically requires structure only, BE EXPRESSIVE AND VISUALLY CREATIVE AS POSSIBLE IN APPLYING STYLE CONFIGURATION.
@@ -1767,6 +1793,8 @@ Prefer this tool over any other tool for building HTML structure, unless you are
 - Always aim for a clean and professional look that aligns with modern design principles.
 - When you are required to create placeholder texts, use texts that have a length that fits the goal. When long texts are required, use longer placeholder texts. When the user specifies exact texts, use the exact texts.
 - Image size does not affect the actual size on the screen, only which quality to use. If you use images, specifically add _styles PropValues to define the image sizes.
+- Attempt to use layout, margin, padding, size properties from the styles schema and not the custom_css, unless necessary.
+- If your elements library is limited, encourage use of nesting containers to achieve complex layouts.
 
 # CONSTRAINTS
 When a tool execution fails, retry up to 10 more times, read the error message carefully, and adjust the XML structure or the configurations accordingly.
@@ -1798,7 +1826,7 @@ A Heading and a button inside a flexbox
         "value": "section"
       },
   },
-  styleConfig: {
+  stylesConfig: {
     "heading1": {
       "custom_css": "font-size: 24px; color: #333;"
     }
@@ -1814,7 +1842,7 @@ A Heading and a button inside a flexbox
     `**MANDATORY** A record mapping configuration IDs to their corresponding configuration objects, defining the PropValues for each element created.`
   );
   buildCompositionsToolPrompt.parameter(
-    "styleConfig",
+    "stylesConfig",
     `**MANDATORY** A record mapping style PropTypes to their corresponding style configuration objects, defining the PropValues for styles to be applied to elements.`
   );
   buildCompositionsToolPrompt.instruction(
@@ -1862,16 +1890,9 @@ var initBuildCompositionsTool = (reg) => {
       const { xmlStructure, elementConfig, stylesConfig } = params;
       const errors = [];
       const softErrors = [];
+      const rootContainers = [];
       const widgetsCache = getWidgetsCache4() || {};
       const documentContainer = getContainer("document");
-      const rootContainer = createElement5({
-        containerId: documentContainer.id,
-        model: {
-          elType: "container",
-          id: generateElementId()
-        },
-        options: { useHistory: false }
-      });
       try {
         const parser = new DOMParser();
         xml = parser.parseFromString(xmlStructure, "application/xml");
@@ -1880,7 +1901,7 @@ var initBuildCompositionsTool = (reg) => {
           throw new Error("Failed to parse XML structure: " + errorNode.textContent);
         }
         const children = Array.from(xml.children);
-        const iterate = (node, containerElement) => {
+        const iterate = (node, containerElement = documentContainer) => {
           const elementTag = node.tagName;
           if (!widgetsCache[elementTag]) {
             errors.push(new Error(`Unknown widget type: ${elementTag}`));
@@ -1902,6 +1923,9 @@ var initBuildCompositionsTool = (reg) => {
             },
             options: { useHistory: false }
           });
+          if (containerElement === documentContainer) {
+            rootContainers.push(newElement);
+          }
           node.setAttribute("id", newElement.id);
           const configId = node.getAttribute("configuration-id") || "";
           try {
@@ -1910,7 +1934,7 @@ var initBuildCompositionsTool = (reg) => {
             configObject._styles = styleObject;
             for (const [propertyName, propertyValue] of Object.entries(configObject)) {
               const widgetSchema = widgetsCache[elementTag];
-              if (!widgetSchema?.atomic_props_schema?.[propertyName] && propertyName !== "_styles") {
+              if (!widgetSchema?.atomic_props_schema?.[propertyName] && propertyName !== "_styles" && propertyName !== "custom_css") {
                 softErrors.push(
                   new Error(
                     `Property "${propertyName}" does not exist on element type "${elementTag}".`
@@ -1922,7 +1946,7 @@ var initBuildCompositionsTool = (reg) => {
                 doUpdateElementProperty({
                   elementId: newElement.id,
                   propertyName,
-                  propertyValue,
+                  propertyValue: propertyName === "custom_css" ? { _styles: propertyValue } : propertyValue,
                   elementType: elementTag
                 });
               } catch (error) {
@@ -1941,7 +1965,7 @@ var initBuildCompositionsTool = (reg) => {
           }
         };
         for (const childNode of children) {
-          iterate(childNode, rootContainer);
+          iterate(childNode, documentContainer);
           try {
           } catch (error) {
             errors.push(error);
@@ -1951,9 +1975,11 @@ var initBuildCompositionsTool = (reg) => {
         errors.push(error);
       }
       if (errors.length) {
-        deleteElement({
-          elementId: rootContainer.id,
-          options: { useHistory: false }
+        rootContainers.forEach((rootContainer) => {
+          deleteElement({
+            elementId: rootContainer.id,
+            options: { useHistory: false }
+          });
         });
       }
       if (errors.length > 0) {
@@ -1987,19 +2013,20 @@ Next Steps:
 // src/mcp/tools/configure-element/prompt.ts
 var configureElementToolPrompt = `Configure an existing element on the page.
 
-# **CRITICAL - REQUIRED RESOURCES (Must read before using this tool)**
+# **CRITICAL - REQUIRED INFORMATION (Must read before using this tool)**
 1. [${WIDGET_SCHEMA_URI}]
    Required to understand which widgets are available, and what are their configuration schemas.
    Every widgetType (i.e. e-heading, e-button) that is supported has it's own property schema, that you must follow in order to apply property values correctly.
 2. [${STYLE_SCHEMA_URI}]
    Required to understand the styles schema for the widgets. All widgets share the same styles schema, grouped by categories.
    Use this resource to understand which style properties are available for each element, and how to structure the "_styles" configuration property.
+3. If not sure about the PropValues schema, you can use the "get-element-configuration-values" tool to retreive the current PropValues configuration of the element.
 
 Before using this tool, check the definitions of the elements PropTypes at the resource "widget-schema-by-type" at editor-canvas__elementor://widgets/schema/{widgetType}
 All widgets share a common _style property for styling, which uses the common styles schema.
 Retreive and check the common styles schema at the resource list "styles-schema" at editor-canvas__elementor://styles/schema/{category}
 
-Unless specifically noted, attempt to use the _style property "custom_css" for any styling, read the resource editor-canvas__elementor://styles/schema/custom_css for more information.
+Attempt to use the _style property "custom_css" for any styling that have complicated schemas (such as backgrounds), read the resource editor-canvas__elementor://styles/schema/custom_css for more information.
 
 # Parameters
 - propertiesToChange: An object containing the properties to change, with their new values. MANDATORY
@@ -2044,6 +2071,7 @@ Use the EXACT "PROP-TYPE" Schema given, and ALWAYS include the "key" property fr
 \`\`\`json
 {
   propertiesToChange: {
+    // List of properties TO CHANGE, following the PropType schema for the element as defined in the resource [${WIDGET_SCHEMA_URI}]
     title: {
       $$type: 'string',
       value: 'New Title Text'
@@ -2053,8 +2081,9 @@ Use the EXACT "PROP-TYPE" Schema given, and ALWAYS include the "key" property fr
       value: false
     },
     _styles: {
+      // List of available keys available at the [${STYLE_SCHEMA_URI}] dynamic resource
       'line-height': {
-        $$type: 'size',
+        $$type: 'size', // MANDATORY do not forget to include the correct $$type for every property
         value: {
           size: {
             $$type: 'number',
@@ -2148,6 +2177,70 @@ Check the element's PropType schema at the resource [${WIDGET_SCHEMA_URI.replace
 Now that you have this information, ensure you have the schema and try again.`;
 }
 
+// src/mcp/tools/get-element-config/tool.ts
+import { getContainer as getContainer2, getElementStyles as getElementStyles2, getWidgetsCache as getWidgetsCache5 } from "@elementor/editor-elements";
+import { Schema as Schema3 } from "@elementor/editor-props";
+import { z as z3 } from "@elementor/schema";
+import { decodeString as decodeString2 } from "@elementor/utils";
+var schema = {
+  elementId: z3.string()
+};
+var outputSchema3 = {
+  propValues: z3.record(z3.string(), z3.any()).describe(
+    "A record mapping PropTypes to their corresponding PropValues, with _styles record for style-related PropValues"
+  ),
+  customCss: z3.string().optional().describe("The custom CSS string associated with the element, if any.")
+};
+var initGetElementConfigTool = (reg) => {
+  const { addTool } = reg;
+  addTool({
+    name: "get-element-configuration-values",
+    description: "Retrieve the element's configuration PropValues for a specific element by unique ID.",
+    schema,
+    outputSchema: outputSchema3,
+    handler: async ({ elementId }) => {
+      const element = getContainer2(elementId);
+      if (!element) {
+        throw new Error(`Element with ID ${elementId} not found.`);
+      }
+      const elementRawSettings = element.settings;
+      const propSchema = getWidgetsCache5()?.[element.model.get("widgetType") || ""]?.atomic_props_schema;
+      if (!elementRawSettings || !propSchema) {
+        throw new Error(`No settings or prop schema found for element ID: ${elementId}`);
+      }
+      const propValues = {};
+      const stylePropValues = {};
+      Schema3.configurableKeys(propSchema).forEach((key) => {
+        propValues[key] = structuredClone(elementRawSettings.get(key));
+      });
+      const elementStyles = getElementStyles2(elementId) || {};
+      const localStyle = Object.values(elementStyles).find((style) => style.label === "local");
+      if (localStyle) {
+        const defaultVariant = localStyle.variants.find(
+          (variant) => variant.meta.breakpoint === "desktop" && !variant.meta.state
+        );
+        if (defaultVariant) {
+          const styleProps = defaultVariant.props || {};
+          Object.keys(styleProps).forEach((stylePropName) => {
+            if (typeof styleProps[stylePropName] !== "undefined") {
+              stylePropValues[stylePropName] = structuredClone(styleProps[stylePropName]);
+            }
+          });
+          if (defaultVariant.custom_css?.raw) {
+            stylePropValues.custom_css = decodeString2(defaultVariant.custom_css.raw, void 0);
+          }
+        }
+      }
+      return {
+        propValues: {
+          ...propValues,
+          _styles: stylePropValues
+        }
+      };
+    }
+  });
+};
+
 // src/mcp/canvas-mcp.ts
 var initCanvasMcp = (reg) => {
   const { setMCPDescription } = reg;
@@ -2156,6 +2249,7 @@ var initCanvasMcp = (reg) => {
   );
   initWidgetsSchemaResource(reg);
   initBuildCompositionsTool(reg);
+  initGetElementConfigTool(reg);
   initConfigureElementTool(reg);
 };
 
@@ -2164,32 +2258,42 @@ var mcpDescription = `Canvas MCP - Working with widgets and styles: how to use t
 
 # Elementor's PropValue configuration system
 
-Every widget in Elementor has a set of properties that can be configured. These properties are defined using a strict schema, which specifies the type and structure of each property's value.
-All values are wrapped in a special structure called a "PropValue", which includes data and additional information about the type of the value.
+Every widget in Elementor has a set of properties that can be configured, defined in a STRICT SCHEMA we call "PropType".
+All widget configuration values are represented using a structure we call "PropValue".
 
-To correctly configure a widget's properties, you must follow the PropType schema defined for that widget. This schema outlines the expected structure and types for each property, ensuring that the values you provide are valid and can be properly interpreted by Elementor.
+To correctly configure a widget's properties, FOLLOW THE PropType schema defined for that widget. This schema outlines the expected structure and types for each property, ensuring that the values you provide are valid and can be properly interpreted by Elementor.
 Every widget has it's own PropType schema, retreivable from the resource [${WIDGET_SCHEMA_URI}].
 ALL WIDGETS share a common _styles property with a uniform styles schema, retreivable from the resource [${STYLE_SCHEMA_URI}].
 The style schema is grouped by categories, such as "typography", "background", "border", etc.
 
+# Tools and usage
+- Use the "get-element-configuration-values" tool to retrieve the current configuration of a specific element, including its PropValues and styles. It is recommended to use this tool when you are required to make changes to an existing element, to ensure you have the correct current configuration schema.
+  If a PropValue changes it's type (only on union PropTypes), read the new schema from the resources mentioned above, and adjust the PropValue structure accordingly.
+- Use the "build-composition" tool to create a NEW ELEMENTS in a composition on the page. You can use this tool to also create a new single element.
+- Use the "configure-element" tool to update the configuration of an EXISTING element on the page.
+
 All array types that can receive union types, are typed as mixed array, which means that each item in the array can be of any of the allowed types defined in the PropType schema.
 Example: the "background" can have a background-overlay property, which can contain multiple overlays, such as color, gradient, image, etc. Each item in the array must follow the PropType schema for each overlay type.
 All _style properties are OPTIONAL. When a _style is defined, we MERGE the values with existing styles, so only the properties you define will be changed, and the rest will remain as is.
 
+# Styling best practices
+Prefer using "em" and "rem" values for text-related sizes, padding and spacing. Use percentages for dynamic sizing relative to parent containers.
+This flexboxes are by default "flex" with "stretch" alignment. To ensure proper layout, define the "justify-content" and "align-items" as in the schema, or in custom_css, depends on your needs.
+
 When applicable for styles, use the "custom_css" property for free-form CSS styling. This property accepts a string of CSS rules that will be applied directly to the element.
 The css string must follow standard CSS syntax, with properties and values separated by semicolons, no selectors, or nesting rules allowed.
 
 Additionaly, some PropTypes have metadata information (meta property) that can help in understaind the PropType usage, such as description or other useful information.
 
-# Note about null values
-If a PropValue's value is null, omit the entire PropValue object.
+Example of null values:
+{
+  $$type: 'as-defined-for-propValue',
+  value: null
+}
 
 Example of "image" PropValue structure:
-
-PropValue structure:
 {$$type:'image',value:{src:{$$type:'image-src',value:{url:{$$type:'url',value:'https://example.com/image.jpg'}}},size:{$$type:'string',value:'full'}}}
 
-Example of 
 `;
 
 // src/prevent-link-in-link-commands.ts
@@ -2290,7 +2394,7 @@ import {
 import {
   createElementStyle as createElementStyle2,
   deleteElementStyle,
-  getElementStyles as getElementStyles2,
+  getElementStyles as getElementStyles3,
   updateElementStyle as updateElementStyle2
 } from "@elementor/editor-elements";
 import { ELEMENTS_STYLES_RESERVED_LABEL } from "@elementor/editor-styles-repository";
@@ -2298,7 +2402,7 @@ import { undoable } from "@elementor/editor-v1-adapters";
 import { __ as __3 } from "@wordpress/i18n";
 
 // src/style-commands/utils.ts
-import { getElementLabel, getWidgetsCache as getWidgetsCache5 } from "@elementor/editor-elements";
+import { getElementLabel, getWidgetsCache as getWidgetsCache6 } from "@elementor/editor-elements";
 import { CLASSES_PROP_KEY } from "@elementor/editor-props";
 import { __ as __2 } from "@wordpress/i18n";
 function hasAtomicWidgets(args) {
@@ -2323,7 +2427,7 @@ function getClassesProp(container) {
 }
 function getContainerSchema(container) {
   const type = container?.model.get("widgetType") || container?.model.get("elType");
-  const widgetsCache = getWidgetsCache5();
+  const widgetsCache = getWidgetsCache6();
   const elementType = widgetsCache?.[type];
   return elementType?.atomic_props_schema ?? null;
 }
@@ -2349,7 +2453,7 @@ var undoablePasteElementStyle = () => undoable(
         if (!classesProp) {
           return null;
         }
-        const originalStyles = getElementStyles2(container.id);
+        const originalStyles = getElementStyles3(container.id);
         const [styleId, styleDef] = Object.entries(originalStyles ?? {})[0] ?? [];
         const originalStyle = Object.keys(styleDef ?? {}).length ? styleDef : null;
         const revertData = {
@@ -2452,7 +2556,7 @@ import {
 } from "@elementor/editor-v1-adapters";
 
 // src/style-commands/undoable-actions/reset-element-style.ts
-import { createElementStyle as createElementStyle3, deleteElementStyle as deleteElementStyle2, getElementStyles as getElementStyles3 } from "@elementor/editor-elements";
+import { createElementStyle as createElementStyle3, deleteElementStyle as deleteElementStyle2, getElementStyles as getElementStyles4 } from "@elementor/editor-elements";
 import { ELEMENTS_STYLES_RESERVED_LABEL as ELEMENTS_STYLES_RESERVED_LABEL2 } from "@elementor/editor-styles-repository";
 import { undoable as undoable2 } from "@elementor/editor-v1-adapters";
 import { __ as __4 } from "@wordpress/i18n";
@@ -2461,7 +2565,7 @@ var undoableResetElementStyle = () => undoable2(
     do: ({ containers }) => {
       return containers.map((container) => {
         const elementId = container.model.get("id");
-        const containerStyles = getElementStyles3(elementId);
+        const containerStyles = getElementStyles4(elementId);
         Object.keys(containerStyles ?? {}).forEach(
           (styleId) => deleteElementStyle2(elementId, styleId)
         );

package/package.json

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

package/src/mcp/canvas-mcp.ts

@@ -3,6 +3,7 @@ import { type MCPRegistryEntry } from '@elementor/editor-mcp';
 import { initWidgetsSchemaResource } from './resources/widgets-schema-resource';
 import { initBuildCompositionsTool } from './tools/build-composition/tool';
 import { initConfigureElementTool } from './tools/configure-element/tool';
+import { initGetElementConfigTool } from './tools/get-element-config/tool';
 
 export const initCanvasMcp = ( reg: MCPRegistryEntry ) => {
 	const { setMCPDescription } = reg;
@@ -11,5 +12,6 @@ export const initCanvasMcp = ( reg: MCPRegistryEntry ) => {
 	);
 	initWidgetsSchemaResource( reg );
 	initBuildCompositionsTool( reg );
+	initGetElementConfigTool( reg );
 	initConfigureElementTool( reg );
 };

package/src/mcp/mcp-description.ts

@@ -4,30 +4,40 @@ export const mcpDescription = `Canvas MCP - Working with widgets and styles: how
 
 # Elementor's PropValue configuration system
 
-Every widget in Elementor has a set of properties that can be configured. These properties are defined using a strict schema, which specifies the type and structure of each property's value.
-All values are wrapped in a special structure called a "PropValue", which includes data and additional information about the type of the value.
+Every widget in Elementor has a set of properties that can be configured, defined in a STRICT SCHEMA we call "PropType".
+All widget configuration values are represented using a structure we call "PropValue".
 
-To correctly configure a widget's properties, you must follow the PropType schema defined for that widget. This schema outlines the expected structure and types for each property, ensuring that the values you provide are valid and can be properly interpreted by Elementor.
+To correctly configure a widget's properties, FOLLOW THE PropType schema defined for that widget. This schema outlines the expected structure and types for each property, ensuring that the values you provide are valid and can be properly interpreted by Elementor.
 Every widget has it's own PropType schema, retreivable from the resource [${ WIDGET_SCHEMA_URI }].
 ALL WIDGETS share a common _styles property with a uniform styles schema, retreivable from the resource [${ STYLE_SCHEMA_URI }].
 The style schema is grouped by categories, such as "typography", "background", "border", etc.
 
+# Tools and usage
+- Use the "get-element-configuration-values" tool to retrieve the current configuration of a specific element, including its PropValues and styles. It is recommended to use this tool when you are required to make changes to an existing element, to ensure you have the correct current configuration schema.
+  If a PropValue changes it's type (only on union PropTypes), read the new schema from the resources mentioned above, and adjust the PropValue structure accordingly.
+- Use the "build-composition" tool to create a NEW ELEMENTS in a composition on the page. You can use this tool to also create a new single element.
+- Use the "configure-element" tool to update the configuration of an EXISTING element on the page.
+
 All array types that can receive union types, are typed as mixed array, which means that each item in the array can be of any of the allowed types defined in the PropType schema.
 Example: the "background" can have a background-overlay property, which can contain multiple overlays, such as color, gradient, image, etc. Each item in the array must follow the PropType schema for each overlay type.
 All _style properties are OPTIONAL. When a _style is defined, we MERGE the values with existing styles, so only the properties you define will be changed, and the rest will remain as is.
 
+# Styling best practices
+Prefer using "em" and "rem" values for text-related sizes, padding and spacing. Use percentages for dynamic sizing relative to parent containers.
+This flexboxes are by default "flex" with "stretch" alignment. To ensure proper layout, define the "justify-content" and "align-items" as in the schema, or in custom_css, depends on your needs.
+
 When applicable for styles, use the "custom_css" property for free-form CSS styling. This property accepts a string of CSS rules that will be applied directly to the element.
 The css string must follow standard CSS syntax, with properties and values separated by semicolons, no selectors, or nesting rules allowed.
 
 Additionaly, some PropTypes have metadata information (meta property) that can help in understaind the PropType usage, such as description or other useful information.
 
-# Note about null values
-If a PropValue's value is null, omit the entire PropValue object.
+Example of null values:
+{
+  $$type: 'as-defined-for-propValue',
+  value: null
+}
 
 Example of "image" PropValue structure:
-
-PropValue structure:
 {$$type:'image',value:{src:{$$type:'image-src',value:{url:{$$type:'url',value:'https://example.com/image.jpg'}}},size:{$$type:'string',value:'full'}}}
 
-Example of 
 `;

package/src/mcp/resources/widgets-schema-resource.ts

@@ -12,10 +12,27 @@ import { getStylesSchema } from '@elementor/editor-styles';
 
 export const WIDGET_SCHEMA_URI = 'elementor://widgets/schema/{widgetType}';
 export const STYLE_SCHEMA_URI = 'elementor://styles/schema/{category}';
+export const BEST_PRACTICES_URI = 'elementor://styles/best-practices';
 
 export const initWidgetsSchemaResource = ( reg: MCPRegistryEntry ) => {
 	const { mcpServer } = reg;
 
+	mcpServer.resource( 'styles-best-practices', BEST_PRACTICES_URI, async () => {
+		return {
+			contents: [
+				{
+					uri: BEST_PRACTICES_URI,
+					text: `# Styling best practices
+Prefer using "em" and "rem" values for text-related sizes, padding and spacing. Use percentages for dynamic sizing relative to parent containers.
+This flexboxes are by default "flex" with "stretch" alignment. To ensure proper layout, define the "justify-content" and "align-items" as in the schema, or in custom_css, depends on your needs.
+
+When applicable for styles, use the "custom_css" property for free-form CSS styling. This property accepts a string of CSS rules that will be applied directly to the element.
+The css string must follow standard CSS syntax, with properties and values separated by semicolons, no selectors, or nesting rules allowed.`,
+				},
+			],
+		};
+	} );
+
 	mcpServer.resource(
 		'styles-schema',
 		new ResourceTemplate( STYLE_SCHEMA_URI, {
@@ -94,9 +111,11 @@ export const initWidgetsSchemaResource = ( reg: MCPRegistryEntry ) => {
 					Schema.propTypeToJsonSchema( propType ),
 				] )
 			);
-			delete asJson.classes;
-			delete asJson._cssid;
-			delete asJson.attributes;
+			Schema.nonConfigurablePropKeys.forEach( ( key ) => {
+				// eslint-disable-next-line @typescript-eslint/no-dynamic-delete
+				delete asJson[ key ];
+			} );
+
 			return {
 				contents: [
 					{

package/src/mcp/tools/build-composition/prompt.ts

@@ -37,6 +37,7 @@ Prefer this tool over any other tool for building HTML structure, unless you are
    For easy execution, USE ONLY "custom_css" category from the styles schema resource to apply styles.
 5. Ensure the XML structure is valid and parsable.
 6. Do not add any attribute nodes, classes, id's, and no text nodes allowed, for inline styles prefer USE the [${ CUSTOM_CSS_URI }] resource for custom_css.
+   Layout properties, such as margin, padding, align, etc. must be applied using the [${ STYLE_SCHEMA_URI }] PropValues.
 7. Some elements allow nesting of other elements, and most of the DO NOT. The allowed elements that can have nested children are "e-div-block" and "e-flexbox".
 8. Make sure that non-container elements do NOT have any nested elements.
 9. Unsless the user specifically requires structure only, BE EXPRESSIVE AND VISUALLY CREATIVE AS POSSIBLE IN APPLYING STYLE CONFIGURATION.
@@ -51,6 +52,8 @@ Prefer this tool over any other tool for building HTML structure, unless you are
 - Always aim for a clean and professional look that aligns with modern design principles.
 - When you are required to create placeholder texts, use texts that have a length that fits the goal. When long texts are required, use longer placeholder texts. When the user specifies exact texts, use the exact texts.
 - Image size does not affect the actual size on the screen, only which quality to use. If you use images, specifically add _styles PropValues to define the image sizes.
+- Attempt to use layout, margin, padding, size properties from the styles schema and not the custom_css, unless necessary.
+- If your elements library is limited, encourage use of nesting containers to achieve complex layouts.
 
 # CONSTRAINTS
 When a tool execution fails, retry up to 10 more times, read the error message carefully, and adjust the XML structure or the configurations accordingly.
@@ -83,7 +86,7 @@ A Heading and a button inside a flexbox
         "value": "section"
       },
   },
-  styleConfig: {
+  stylesConfig: {
     "heading1": {
       "custom_css": "font-size: 24px; color: #333;"
     }
@@ -102,7 +105,7 @@ A Heading and a button inside a flexbox
 	);
 
 	buildCompositionsToolPrompt.parameter(
-		'styleConfig',
+		'stylesConfig',
 		`**MANDATORY** A record mapping style PropTypes to their corresponding style configuration objects, defining the PropValues for styles to be applied to elements.`
 	);