@elementor/editor-canvas 3.33.0-301 → 3.33.0-303

package/dist/index.js

@@ -1656,7 +1656,7 @@ The css string must follow standard CSS syntax, with properties and values separ
           contents: [
             {
               uri: uri.toString(),
-              text: "Free style inline CSS string of properties and their values. Applicable for a single element, only the properties and values are accepted."
+              text: "Free style inline CSS string of properties and their values. Applicable for a single element, only the properties and values are accepted. Use this as a last resort for properties that are not covered with the schema."
             }
           ]
         };
@@ -1877,7 +1877,6 @@ var doUpdateElementProperty = (params) => {
 
 // src/mcp/tools/build-composition/prompt.ts
 var import_editor_mcp2 = require("@elementor/editor-mcp");
-var CUSTOM_CSS_URI = STYLE_SCHEMA_URI.replace("{category}", "custom_css");
 var generatePrompt = () => {
   const buildCompositionsToolPrompt = (0, import_editor_mcp2.toolPrompts)("build-compositions");
   buildCompositionsToolPrompt.description(`
@@ -1891,9 +1890,8 @@ Prefer this tool over any other tool for building HTML structure, unless you are
 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. [${CUSTOM_CSS_URI}]
+2. [${STYLE_SCHEMA_URI}]
    Required to understand the styles schema for the widgets. All widgets share the same styles schema.
-   USE ONLY THE "custom_css" CATEGORY FROM THE STYLES SCHEMA FOR STYLING THE ELEMENTS with this tool.
 3. List of allowed custom tags for building the structure is derived from the list of widgets schema resources.
 
 # Instructions
@@ -1907,9 +1905,8 @@ Prefer this tool over any other tool for building HTML structure, unless you are
    \`<e-flexbox configuration-id="flex1"><e-heading configuration-id="heading2"></e-heading></e-flexbox>\`
    In the elementConfig property, provide the actual configuration object for each configuration-id used in the XML structure.
    In the stylesConfig property, provide the actual styles configuration object for each configuration-id used in the XML structure.
-   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.
+6. Do not add any attribute nodes, classes, id's, and no text nodes allowed.
    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.
@@ -1925,7 +1922,7 @@ 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.
+- Attempt to use layout, margin, padding, size properties from the styles schema.
 - If your elements library is limited, encourage use of nesting containers to achieve complex layouts.
 
 # CONSTRAINTS
@@ -1960,7 +1957,17 @@ A Heading and a button inside a flexbox
   },
   stylesConfig: {
     "heading1": {
-      "custom_css": "font-size: 24px; color: #333;"
+      "font-size": {
+        "$$type": "size",
+        "value": {
+          "size": { "$$type": "number", "value": 24 },
+          "unit": { "$$type": "string", "value": "px" }
+        }
+      },
+      "color": {
+        "$$type": "color",
+        "value": { "$$type": "string", "value": "#333" }
+      }
     }
   },
 }
@@ -1982,7 +1989,7 @@ A Heading and a button inside a flexbox
 You should use these IDs as reference for further configuration, styling or changing elements later on.`
   );
   buildCompositionsToolPrompt.instruction(
-    `If you have global styles/classes available in the project, you should prefer using them over inline styles, and you are welcome to execute relevant tools AFTER this tool execution, to apply global classes to the created elements.`
+    `You must use styles/variables/classes that are available in the project resources, you should prefer using them over inline styles, and you are welcome to execute relevant tools AFTER this tool execution, to apply global classes to the created elements.`
   );
   return buildCompositionsToolPrompt.prompt();
 };
@@ -2001,7 +2008,9 @@ var inputSchema = {
       import_schema.z.string().describe("_styles property name"),
       import_schema.z.any().describe("The PropValue for the style property. MANDATORY")
     )
-  ).describe("A record mapping element IDs to their styles configuration objects.").default({})
+  ).describe(
+    `A record mapping element IDs to their styles configuration objects. Use the actual styles schema from [${STYLE_SCHEMA_URI}].`
+  ).default({})
 };
 var outputSchema = {
   errors: import_schema.z.string().describe("Error message if the composition building failed").optional(),
@@ -2158,8 +2167,6 @@ Before using this tool, check the definitions of the elements PropTypes at the r
 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}
 
-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
 - elementId: The ID of the element to configure. MANDATORY
@@ -2313,15 +2320,13 @@ Now that you have this information, ensure you have the schema and try again.`;
 var import_editor_elements8 = require("@elementor/editor-elements");
 var import_editor_props5 = require("@elementor/editor-props");
 var import_schema5 = require("@elementor/schema");
-var import_utils5 = require("@elementor/utils");
 var schema = {
   elementId: import_schema5.z.string()
 };
 var outputSchema3 = {
   propValues: import_schema5.z.record(import_schema5.z.string(), import_schema5.z.any()).describe(
     "A record mapping PropTypes to their corresponding PropValues, with _styles record for style-related PropValues"
-  ),
-  customCss: import_schema5.z.string().optional().describe("The custom CSS string associated with the element, if any.")
+  )
 };
 var initGetElementConfigTool = (reg) => {
   const { addTool } = reg;
@@ -2358,9 +2363,6 @@ var initGetElementConfigTool = (reg) => {
               stylePropValues[stylePropName] = structuredClone(styleProps[stylePropName]);
             }
           });
-          if (defaultVariant.custom_css?.raw) {
-            stylePropValues.custom_css = (0, import_utils5.decodeString)(defaultVariant.custom_css.raw, void 0);
-          }
         }
       }
       return {
@@ -2410,10 +2412,7 @@ All _style properties are OPTIONAL. When a _style is defined, we MERGE the value
 
 # 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.
+This flexboxes are by default "flex" with "stretch" alignment. To ensure proper layout, define the "justify-content" and "align-items" as in the schema.
 
 Additionaly, some PropTypes have metadata information (meta property) that can help in understaind the PropType usage, such as description or other useful information.
 

package/dist/index.mjs

@@ -1623,7 +1623,7 @@ The css string must follow standard CSS syntax, with properties and values separ
           contents: [
             {
               uri: uri.toString(),
-              text: "Free style inline CSS string of properties and their values. Applicable for a single element, only the properties and values are accepted."
+              text: "Free style inline CSS string of properties and their values. Applicable for a single element, only the properties and values are accepted. Use this as a last resort for properties that are not covered with the schema."
             }
           ]
         };
@@ -1860,7 +1860,6 @@ var doUpdateElementProperty = (params) => {
 
 // src/mcp/tools/build-composition/prompt.ts
 import { toolPrompts } from "@elementor/editor-mcp";
-var CUSTOM_CSS_URI = STYLE_SCHEMA_URI.replace("{category}", "custom_css");
 var generatePrompt = () => {
   const buildCompositionsToolPrompt = toolPrompts("build-compositions");
   buildCompositionsToolPrompt.description(`
@@ -1874,9 +1873,8 @@ Prefer this tool over any other tool for building HTML structure, unless you are
 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. [${CUSTOM_CSS_URI}]
+2. [${STYLE_SCHEMA_URI}]
    Required to understand the styles schema for the widgets. All widgets share the same styles schema.
-   USE ONLY THE "custom_css" CATEGORY FROM THE STYLES SCHEMA FOR STYLING THE ELEMENTS with this tool.
 3. List of allowed custom tags for building the structure is derived from the list of widgets schema resources.
 
 # Instructions
@@ -1890,9 +1888,8 @@ Prefer this tool over any other tool for building HTML structure, unless you are
    \`<e-flexbox configuration-id="flex1"><e-heading configuration-id="heading2"></e-heading></e-flexbox>\`
    In the elementConfig property, provide the actual configuration object for each configuration-id used in the XML structure.
    In the stylesConfig property, provide the actual styles configuration object for each configuration-id used in the XML structure.
-   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.
+6. Do not add any attribute nodes, classes, id's, and no text nodes allowed.
    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.
@@ -1908,7 +1905,7 @@ 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.
+- Attempt to use layout, margin, padding, size properties from the styles schema.
 - If your elements library is limited, encourage use of nesting containers to achieve complex layouts.
 
 # CONSTRAINTS
@@ -1943,7 +1940,17 @@ A Heading and a button inside a flexbox
   },
   stylesConfig: {
     "heading1": {
-      "custom_css": "font-size: 24px; color: #333;"
+      "font-size": {
+        "$$type": "size",
+        "value": {
+          "size": { "$$type": "number", "value": 24 },
+          "unit": { "$$type": "string", "value": "px" }
+        }
+      },
+      "color": {
+        "$$type": "color",
+        "value": { "$$type": "string", "value": "#333" }
+      }
     }
   },
 }
@@ -1965,7 +1972,7 @@ A Heading and a button inside a flexbox
 You should use these IDs as reference for further configuration, styling or changing elements later on.`
   );
   buildCompositionsToolPrompt.instruction(
-    `If you have global styles/classes available in the project, you should prefer using them over inline styles, and you are welcome to execute relevant tools AFTER this tool execution, to apply global classes to the created elements.`
+    `You must use styles/variables/classes that are available in the project resources, you should prefer using them over inline styles, and you are welcome to execute relevant tools AFTER this tool execution, to apply global classes to the created elements.`
   );
   return buildCompositionsToolPrompt.prompt();
 };
@@ -1984,7 +1991,9 @@ var inputSchema = {
       z.string().describe("_styles property name"),
       z.any().describe("The PropValue for the style property. MANDATORY")
     )
-  ).describe("A record mapping element IDs to their styles configuration objects.").default({})
+  ).describe(
+    `A record mapping element IDs to their styles configuration objects. Use the actual styles schema from [${STYLE_SCHEMA_URI}].`
+  ).default({})
 };
 var outputSchema = {
   errors: z.string().describe("Error message if the composition building failed").optional(),
@@ -2141,8 +2150,6 @@ Before using this tool, check the definitions of the elements PropTypes at the r
 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}
 
-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
 - elementId: The ID of the element to configure. MANDATORY
@@ -2296,15 +2303,13 @@ Now that you have this information, ensure you have the schema and try again.`;
 import { getContainer as getContainer4, 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;
@@ -2341,9 +2346,6 @@ var initGetElementConfigTool = (reg) => {
               stylePropValues[stylePropName] = structuredClone(styleProps[stylePropName]);
             }
           });
-          if (defaultVariant.custom_css?.raw) {
-            stylePropValues.custom_css = decodeString2(defaultVariant.custom_css.raw, void 0);
-          }
         }
       }
       return {
@@ -2393,10 +2395,7 @@ All _style properties are OPTIONAL. When a _style is defined, we MERGE the value
 
 # 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.
+This flexboxes are by default "flex" with "stretch" alignment. To ensure proper layout, define the "justify-content" and "align-items" as in the schema.
 
 Additionaly, some PropTypes have metadata information (meta property) that can help in understaind the PropType usage, such as description or other useful information.
 

package/package.json

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

package/src/mcp/mcp-description.ts

@@ -24,10 +24,7 @@ All _style properties are OPTIONAL. When a _style is defined, we MERGE the value
 
 # 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.
+This flexboxes are by default "flex" with "stretch" alignment. To ensure proper layout, define the "justify-content" and "align-items" as in the schema.
 
 Additionaly, some PropTypes have metadata information (meta property) that can help in understaind the PropType usage, such as description or other useful information.
 

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

@@ -56,7 +56,7 @@ The css string must follow standard CSS syntax, with properties and values separ
 					contents: [
 						{
 							uri: uri.toString(),
-							text: 'Free style inline CSS string of properties and their values. Applicable for a single element, only the properties and values are accepted.',
+							text: 'Free style inline CSS string of properties and their values. Applicable for a single element, only the properties and values are accepted. Use this as a last resort for properties that are not covered with the schema.',
 						},
 					],
 				};

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

@@ -2,8 +2,6 @@ import { toolPrompts } from '@elementor/editor-mcp';
 
 import { STYLE_SCHEMA_URI, WIDGET_SCHEMA_URI } from '../../resources/widgets-schema-resource';
 
-const CUSTOM_CSS_URI = STYLE_SCHEMA_URI.replace( '{category}', 'custom_css' );
-
 export const generatePrompt = () => {
 	const buildCompositionsToolPrompt = toolPrompts( 'build-compositions' );
 
@@ -18,9 +16,8 @@ Prefer this tool over any other tool for building HTML structure, unless you are
 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. [${ CUSTOM_CSS_URI }]
+2. [${ STYLE_SCHEMA_URI }]
    Required to understand the styles schema for the widgets. All widgets share the same styles schema.
-   USE ONLY THE "custom_css" CATEGORY FROM THE STYLES SCHEMA FOR STYLING THE ELEMENTS with this tool.
 3. List of allowed custom tags for building the structure is derived from the list of widgets schema resources.
 
 # Instructions
@@ -34,9 +31,8 @@ Prefer this tool over any other tool for building HTML structure, unless you are
    \`<e-flexbox configuration-id="flex1"><e-heading configuration-id="heading2"></e-heading></e-flexbox>\`
    In the elementConfig property, provide the actual configuration object for each configuration-id used in the XML structure.
    In the stylesConfig property, provide the actual styles configuration object for each configuration-id used in the XML structure.
-   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.
+6. Do not add any attribute nodes, classes, id's, and no text nodes allowed.
    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.
@@ -52,7 +48,7 @@ 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.
+- Attempt to use layout, margin, padding, size properties from the styles schema.
 - If your elements library is limited, encourage use of nesting containers to achieve complex layouts.
 
 # CONSTRAINTS
@@ -88,7 +84,17 @@ A Heading and a button inside a flexbox
   },
   stylesConfig: {
     "heading1": {
-      "custom_css": "font-size: 24px; color: #333;"
+      "font-size": {
+        "$$type": "size",
+        "value": {
+          "size": { "$$type": "number", "value": 24 },
+          "unit": { "$$type": "string", "value": "px" }
+        }
+      },
+      "color": {
+        "$$type": "color",
+        "value": { "$$type": "string", "value": "#333" }
+      }
     }
   },
 }
@@ -115,7 +121,7 @@ You should use these IDs as reference for further configuration, styling or chan
 	);
 
 	buildCompositionsToolPrompt.instruction(
-		`If you have global styles/classes available in the project, you should prefer using them over inline styles, and you are welcome to execute relevant tools AFTER this tool execution, to apply global classes to the created elements.`
+		`You must use styles/variables/classes that are available in the project resources, you should prefer using them over inline styles, and you are welcome to execute relevant tools AFTER this tool execution, to apply global classes to the created elements.`
 	);
 
 	return buildCompositionsToolPrompt.prompt();

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

@@ -1,5 +1,7 @@
 import { z } from '@elementor/schema';
 
+import { STYLE_SCHEMA_URI } from '../../resources/widgets-schema-resource';
+
 export const inputSchema = {
 	xmlStructure: z.string().describe( 'The XML structure representing the composition to be built' ),
 	elementConfig: z
@@ -16,7 +18,9 @@ export const inputSchema = {
 				z.any().describe( 'The PropValue for the style property. MANDATORY' )
 			)
 		)
-		.describe( 'A record mapping element IDs to their styles configuration objects.' )
+		.describe(
+			`A record mapping element IDs to their styles configuration objects. Use the actual styles schema from [${ STYLE_SCHEMA_URI }].`
+		)
 		.default( {} ),
 };
 

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

@@ -15,8 +15,6 @@ Before using this tool, check the definitions of the elements PropTypes at the r
 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}
 
-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
 - elementId: The ID of the element to configure. MANDATORY

package/src/mcp/tools/get-element-config/tool.ts

@@ -2,7 +2,6 @@ import { getContainer, getElementStyles, getWidgetsCache } from '@elementor/edit
 import { type MCPRegistryEntry } from '@elementor/editor-mcp';
 import { type PropValue, Schema } from '@elementor/editor-props';
 import { z } from '@elementor/schema';
-import { decodeString } from '@elementor/utils';
 
 const schema = {
 	elementId: z.string(),
@@ -14,7 +13,6 @@ const outputSchema = {
 		.describe(
 			'A record mapping PropTypes to their corresponding PropValues, with _styles record for style-related PropValues'
 		),
-	customCss: z.string().optional().describe( 'The custom CSS string associated with the element, if any.' ),
 };
 
 export const initGetElementConfigTool = ( reg: MCPRegistryEntry ) => {
@@ -57,10 +55,6 @@ export const initGetElementConfigTool = ( reg: MCPRegistryEntry ) => {
 							stylePropValues[ stylePropName ] = structuredClone( styleProps[ stylePropName ] );
 						}
 					} );
-
-					if ( defaultVariant.custom_css?.raw ) {
-						stylePropValues.custom_css = decodeString( defaultVariant.custom_css.raw, undefined );
-					}
 				}
 			}