@elementor/editor-canvas 3.35.0-397 → 3.35.0-399

package/dist/index.js

@@ -98,14 +98,6 @@ var import_editor_styles = require("@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 checkIfUserHasPro = () => {
-  const extendedWindow = window;
-  const hasPro = extendedWindow.elementor?.helpers?.hasPro;
-  if (typeof hasPro === "function") {
-    return hasPro();
-  }
-  return false;
-};
 var initWidgetsSchemaResource = (reg) => {
   const { mcpServer } = reg;
   mcpServer.resource("styles-best-practices", BEST_PRACTICES_URI, async () => {
@@ -115,9 +107,9 @@ var initWidgetsSchemaResource = (reg) => {
           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.
+This flexboxes are by default "flex" with "stretch" alignment. To ensure proper layout, define the "justify-content" and "align-items" as in the schema.
 
-When applicable for styles, apply style PropValues using the ${STYLE_SCHEMA_URI}. Custom css is for Elementor PRO users and intended to support only new CSS features not yet available in the UI.
+When applicable for styles, apply style PropValues using the ${STYLE_SCHEMA_URI}.
 The css string must follow standard CSS syntax, with properties and values separated by semicolons, no selectors, or nesting rules allowed.`
         }
       ]
@@ -127,11 +119,7 @@ The css string must follow standard CSS syntax, with properties and values separ
     "styles-schema",
     new import_editor_mcp.ResourceTemplate(STYLE_SCHEMA_URI, {
       list: () => {
-        const isPro = checkIfUserHasPro();
         const categories = [...Object.keys((0, import_editor_styles.getStylesSchema)())];
-        if (!isPro) {
-          categories.push("custom_css");
-        }
         return {
           resources: categories.map((category) => ({
             uri: `elementor://styles/schema/${category}`,
@@ -145,16 +133,6 @@ The css string must follow standard CSS syntax, with properties and values separ
     },
     async (uri, variables) => {
       const category = typeof variables.category === "string" ? variables.category : variables.category?.[0];
-      if (category === "custom_css" && checkIfUserHasPro()) {
-        return {
-          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. Use this as a last resort for properties that are not covered with the schema. Do not use selectors, only the CSS content"
-            }
-          ]
-        };
-      }
       const stylesSchema = (0, import_editor_styles.getStylesSchema)()[category];
       if (!stylesSchema) {
         throw new Error(`No styles schema found for category: ${category}`);
@@ -165,7 +143,9 @@ The css string must follow standard CSS syntax, with properties and values separ
           {
             uri: uri.toString(),
             mimeType: "application/json",
-            text: JSON.stringify(asJson)
+            text: JSON.stringify(
+              import_editor_props.Schema.enrichWithIntention(asJson, 'Desired CSS in format "property: value;"')
+            )
           }
         ]
       };
@@ -2229,7 +2209,7 @@ var validateInput = {
   validateStyles(values) {
     const styleSchema = (0, import_editor_styles6.getStylesSchema)();
     const customCssValue = values.custom_css;
-    const result = this.validateProps(styleSchema, values, ["custom_css"]);
+    const result = this.validateProps(styleSchema, values, ["custom_css", "$intention"]);
     const appendInvalidCustomCssErr = () => {
       result.valid = false;
       result.errors = result.errors || [];
@@ -2310,9 +2290,6 @@ Prefer this tool over any other tool for building HTML structure, unless you are
    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-tabs", "e-div-block", and "e-flexbox".
 8. Make sure that non-container elements do NOT have any nested elements.
-9. **CRITICAL - CUSTOM CSS USAGE**: ALWAYS Prefer using style schema. Custom CSS is ONLY FOR UNSUPPRTED schema styles.
-   ALWAYS PRIORITIZE using the style schema PropValues for styling elements as they provide better user experience in the editor, and UI features for the end-users.
-   Use custom_css only for style attributes that ARE NOT SUPPORTED via the style schema AFTER YOU CHECK THE [${STYLE_SCHEMA_URI}].
 
 # DESIGN VECTORS - Concrete Implementation Guidance
 
@@ -2447,9 +2424,6 @@ background:
           "unit": { "$$type": "string", "value": "px" }
         }
       },
-    },
-    "button1": {
-      "custom_css": "background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); padding: 12px 24px;"
     }
   }
 }
@@ -2469,16 +2443,23 @@ background:
   },
   "stylesConfig": {
     "hero-section": {
-      "custom_css": "display: flex; flex-direction: column; align-items: flex-start; gap: 3rem; background: radial-gradient(circle at 30% 20%, rgba(216, 67, 21, 0.1) 0%, transparent 60%), linear-gradient(135deg, #faf8f6 0%, #f0ebe6 100%); padding: 10rem 3rem;"
+      "display": { "$$type": "string", "value": "flex" },
+      "flex-direction": { "$$type": "string", "value": "column" },
+      "align-items": { "$$type": "string", "value": "flex-start" },
+      "background": {
+        "$$type": "color",
+        "value": "#f0ebe6",
+        "$intention": "background: #f0ebe6",
+      }
     },
     "hero-title": {
-      "custom_css": "font-size: 4.5rem; font-weight: 900; line-height: 1.05; letter-spacing: -0.04em; color: #2d2622; max-width: 700px;"
-    },
-    "hero-subtitle": {
-      "custom_css": "font-size: 1.25rem; font-weight: 200; line-height: 1.7; letter-spacing: 0.01em; color: #5a534d; max-width: 600px;"
-    },
-    "hero-cta": {
-      "custom_css": "background: #d84315; color: #ffffff; padding: 1.25rem 3rem; font-size: 1rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; border-radius: 2px; box-shadow: 0 4px 16px rgba(216, 67, 21, 0.25); transition: transform 0.15s ease-out, box-shadow 0.15s ease-out;"
+      "font-size": {
+          "$$type": "size",
+          "value": {
+            "size": { "$$type": "number", "value": 72 },
+            "unit": { "$$type": "string", "value": "px" }
+          }
+        },
     }
   }
 }
@@ -2549,9 +2530,6 @@ A Heading and a button inside a flexbox
       },
   },
   stylesConfig: {
-    "flex1": {
-      "custom_css": "background: radial-gradient(circle at 20% 30%, rgba(216, 67, 21, 0.08) 0%, transparent 50%), radial-gradient(circle at 80% 70%, rgba(0, 191, 165, 0.06) 0%, transparent 50%), linear-gradient(135deg, #faf8f6 0%, #f0ebe6 100%); display: flex; flex-direction: column; align-items: center; padding: 80px 32px; gap: 48px;"
-    },
     "heading1": {
       "font-size": {
         "$$type": "size",
@@ -2604,7 +2582,7 @@ var inputSchema = {
   stylesConfig: import_schema.z.record(
     import_schema.z.string().describe("The configuration id"),
     import_schema.z.record(
-      import_schema.z.string().describe("StyleSchema property name. Last priority is custom_css!"),
+      import_schema.z.string().describe("StyleSchema property name"),
       import_schema.z.any().describe(`The PropValue for the style property. MANDATORY, refer to [${STYLE_SCHEMA_URI}]`)
     )
   ).describe(
@@ -3151,8 +3129,6 @@ The tool accepts both the structure, the styling and the configuration of each e
 - Second step: decide which elements to create, and their configuration and styles.
   Retrieve the used elements configuration schema from the resource [${ELEMENT_SCHEMA_URI}]
 - Third step: define the styles for each element, using the common styles schema from the resource [${STYLE_SCHEMA_URI}]. List the resource to see all available style properties.
-  For background and complicated layered styles, you can use "custom_css" property, which is supported only for ELEMENTOR PRO users ONLY.
-  The custom css is intented to deal with yet unsupported CSS features that ARE NOT PART OF THE STYLE SCHEMA, to enable PRO users to support new CSS features.
 
 ## Workflow for build-compositions tool
 1. **Parse user requirements** - Undestand what needs to be built (structure, content, styling).
@@ -3174,10 +3150,7 @@ The tool accepts both the structure, the styling and the configuration of each e
 
 6. **Create stylesConfig** - For each configuration-id:
    - Use style schema PropValues from [${STYLE_SCHEMA_URI}]
-   - **Priority**: Use style schema PropValues over custom_css
    - **Use global variables** for colors, sizes, fonts where applicable
-   - **custom_css (PRO Users Only)**: The property appears only for PRO user. The purpose of custom_css is to support new CSS features not yet available in the style schema.
-     The schema supports multiple layers of background, gradients, filters. Prefer NOT USING custom_css.
    - **Important**: Global classes are applied AFTER building the composition. Once built, apply classes using the "apply-global-class" tool - after completion of building the composition.
 
 7. **Validate** - Ensure:

package/dist/index.mjs

@@ -47,14 +47,6 @@ import { getStylesSchema } 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 checkIfUserHasPro = () => {
-  const extendedWindow = window;
-  const hasPro = extendedWindow.elementor?.helpers?.hasPro;
-  if (typeof hasPro === "function") {
-    return hasPro();
-  }
-  return false;
-};
 var initWidgetsSchemaResource = (reg) => {
   const { mcpServer } = reg;
   mcpServer.resource("styles-best-practices", BEST_PRACTICES_URI, async () => {
@@ -64,9 +56,9 @@ var initWidgetsSchemaResource = (reg) => {
           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.
+This flexboxes are by default "flex" with "stretch" alignment. To ensure proper layout, define the "justify-content" and "align-items" as in the schema.
 
-When applicable for styles, apply style PropValues using the ${STYLE_SCHEMA_URI}. Custom css is for Elementor PRO users and intended to support only new CSS features not yet available in the UI.
+When applicable for styles, apply style PropValues using the ${STYLE_SCHEMA_URI}.
 The css string must follow standard CSS syntax, with properties and values separated by semicolons, no selectors, or nesting rules allowed.`
         }
       ]
@@ -76,11 +68,7 @@ The css string must follow standard CSS syntax, with properties and values separ
     "styles-schema",
     new ResourceTemplate(STYLE_SCHEMA_URI, {
       list: () => {
-        const isPro = checkIfUserHasPro();
         const categories = [...Object.keys(getStylesSchema())];
-        if (!isPro) {
-          categories.push("custom_css");
-        }
         return {
           resources: categories.map((category) => ({
             uri: `elementor://styles/schema/${category}`,
@@ -94,16 +82,6 @@ The css string must follow standard CSS syntax, with properties and values separ
     },
     async (uri, variables) => {
       const category = typeof variables.category === "string" ? variables.category : variables.category?.[0];
-      if (category === "custom_css" && checkIfUserHasPro()) {
-        return {
-          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. Use this as a last resort for properties that are not covered with the schema. Do not use selectors, only the CSS content"
-            }
-          ]
-        };
-      }
       const stylesSchema = getStylesSchema()[category];
       if (!stylesSchema) {
         throw new Error(`No styles schema found for category: ${category}`);
@@ -114,7 +92,9 @@ The css string must follow standard CSS syntax, with properties and values separ
           {
             uri: uri.toString(),
             mimeType: "application/json",
-            text: JSON.stringify(asJson)
+            text: JSON.stringify(
+              Schema.enrichWithIntention(asJson, 'Desired CSS in format "property: value;"')
+            )
           }
         ]
       };
@@ -2203,7 +2183,7 @@ var validateInput = {
   validateStyles(values) {
     const styleSchema = getStylesSchema4();
     const customCssValue = values.custom_css;
-    const result = this.validateProps(styleSchema, values, ["custom_css"]);
+    const result = this.validateProps(styleSchema, values, ["custom_css", "$intention"]);
     const appendInvalidCustomCssErr = () => {
       result.valid = false;
       result.errors = result.errors || [];
@@ -2284,9 +2264,6 @@ Prefer this tool over any other tool for building HTML structure, unless you are
    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-tabs", "e-div-block", and "e-flexbox".
 8. Make sure that non-container elements do NOT have any nested elements.
-9. **CRITICAL - CUSTOM CSS USAGE**: ALWAYS Prefer using style schema. Custom CSS is ONLY FOR UNSUPPRTED schema styles.
-   ALWAYS PRIORITIZE using the style schema PropValues for styling elements as they provide better user experience in the editor, and UI features for the end-users.
-   Use custom_css only for style attributes that ARE NOT SUPPORTED via the style schema AFTER YOU CHECK THE [${STYLE_SCHEMA_URI}].
 
 # DESIGN VECTORS - Concrete Implementation Guidance
 
@@ -2421,9 +2398,6 @@ background:
           "unit": { "$$type": "string", "value": "px" }
         }
       },
-    },
-    "button1": {
-      "custom_css": "background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); padding: 12px 24px;"
     }
   }
 }
@@ -2443,16 +2417,23 @@ background:
   },
   "stylesConfig": {
     "hero-section": {
-      "custom_css": "display: flex; flex-direction: column; align-items: flex-start; gap: 3rem; background: radial-gradient(circle at 30% 20%, rgba(216, 67, 21, 0.1) 0%, transparent 60%), linear-gradient(135deg, #faf8f6 0%, #f0ebe6 100%); padding: 10rem 3rem;"
+      "display": { "$$type": "string", "value": "flex" },
+      "flex-direction": { "$$type": "string", "value": "column" },
+      "align-items": { "$$type": "string", "value": "flex-start" },
+      "background": {
+        "$$type": "color",
+        "value": "#f0ebe6",
+        "$intention": "background: #f0ebe6",
+      }
     },
     "hero-title": {
-      "custom_css": "font-size: 4.5rem; font-weight: 900; line-height: 1.05; letter-spacing: -0.04em; color: #2d2622; max-width: 700px;"
-    },
-    "hero-subtitle": {
-      "custom_css": "font-size: 1.25rem; font-weight: 200; line-height: 1.7; letter-spacing: 0.01em; color: #5a534d; max-width: 600px;"
-    },
-    "hero-cta": {
-      "custom_css": "background: #d84315; color: #ffffff; padding: 1.25rem 3rem; font-size: 1rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; border-radius: 2px; box-shadow: 0 4px 16px rgba(216, 67, 21, 0.25); transition: transform 0.15s ease-out, box-shadow 0.15s ease-out;"
+      "font-size": {
+          "$$type": "size",
+          "value": {
+            "size": { "$$type": "number", "value": 72 },
+            "unit": { "$$type": "string", "value": "px" }
+          }
+        },
     }
   }
 }
@@ -2523,9 +2504,6 @@ A Heading and a button inside a flexbox
       },
   },
   stylesConfig: {
-    "flex1": {
-      "custom_css": "background: radial-gradient(circle at 20% 30%, rgba(216, 67, 21, 0.08) 0%, transparent 50%), radial-gradient(circle at 80% 70%, rgba(0, 191, 165, 0.06) 0%, transparent 50%), linear-gradient(135deg, #faf8f6 0%, #f0ebe6 100%); display: flex; flex-direction: column; align-items: center; padding: 80px 32px; gap: 48px;"
-    },
     "heading1": {
       "font-size": {
         "$$type": "size",
@@ -2578,7 +2556,7 @@ var inputSchema = {
   stylesConfig: z.record(
     z.string().describe("The configuration id"),
     z.record(
-      z.string().describe("StyleSchema property name. Last priority is custom_css!"),
+      z.string().describe("StyleSchema property name"),
       z.any().describe(`The PropValue for the style property. MANDATORY, refer to [${STYLE_SCHEMA_URI}]`)
     )
   ).describe(
@@ -3125,8 +3103,6 @@ The tool accepts both the structure, the styling and the configuration of each e
 - Second step: decide which elements to create, and their configuration and styles.
   Retrieve the used elements configuration schema from the resource [${ELEMENT_SCHEMA_URI}]
 - Third step: define the styles for each element, using the common styles schema from the resource [${STYLE_SCHEMA_URI}]. List the resource to see all available style properties.
-  For background and complicated layered styles, you can use "custom_css" property, which is supported only for ELEMENTOR PRO users ONLY.
-  The custom css is intented to deal with yet unsupported CSS features that ARE NOT PART OF THE STYLE SCHEMA, to enable PRO users to support new CSS features.
 
 ## Workflow for build-compositions tool
 1. **Parse user requirements** - Undestand what needs to be built (structure, content, styling).
@@ -3148,10 +3124,7 @@ The tool accepts both the structure, the styling and the configuration of each e
 
 6. **Create stylesConfig** - For each configuration-id:
    - Use style schema PropValues from [${STYLE_SCHEMA_URI}]
-   - **Priority**: Use style schema PropValues over custom_css
    - **Use global variables** for colors, sizes, fonts where applicable
-   - **custom_css (PRO Users Only)**: The property appears only for PRO user. The purpose of custom_css is to support new CSS features not yet available in the style schema.
-     The schema supports multiple layers of background, gradients, filters. Prefer NOT USING custom_css.
    - **Important**: Global classes are applied AFTER building the composition. Once built, apply classes using the "apply-global-class" tool - after completion of building the composition.
 
 7. **Validate** - Ensure:

package/package.json

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

package/src/mcp/mcp-description.ts

@@ -39,8 +39,6 @@ The tool accepts both the structure, the styling and the configuration of each e
 - Second step: decide which elements to create, and their configuration and styles.
   Retrieve the used elements configuration schema from the resource [${ ELEMENT_SCHEMA_URI }]
 - Third step: define the styles for each element, using the common styles schema from the resource [${ STYLE_SCHEMA_URI }]. List the resource to see all available style properties.
-  For background and complicated layered styles, you can use "custom_css" property, which is supported only for ELEMENTOR PRO users ONLY.
-  The custom css is intented to deal with yet unsupported CSS features that ARE NOT PART OF THE STYLE SCHEMA, to enable PRO users to support new CSS features.
 
 ## Workflow for build-compositions tool
 1. **Parse user requirements** - Undestand what needs to be built (structure, content, styling).
@@ -62,10 +60,7 @@ The tool accepts both the structure, the styling and the configuration of each e
 
 6. **Create stylesConfig** - For each configuration-id:
    - Use style schema PropValues from [${ STYLE_SCHEMA_URI }]
-   - **Priority**: Use style schema PropValues over custom_css
    - **Use global variables** for colors, sizes, fonts where applicable
-   - **custom_css (PRO Users Only)**: The property appears only for PRO user. The purpose of custom_css is to support new CSS features not yet available in the style schema.
-     The schema supports multiple layers of background, gradients, filters. Prefer NOT USING custom_css.
    - **Important**: Global classes are applied AFTER building the composition. Once built, apply classes using the "apply-global-class" tool - after completion of building the composition.
 
 7. **Validate** - Ensure:

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

@@ -15,21 +15,6 @@ 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';
 
-const checkIfUserHasPro = () => {
-	const extendedWindow = window as Window & {
-		elementor?: {
-			helpers?: {
-				hasPro?: () => boolean;
-			};
-		};
-	};
-	const hasPro = extendedWindow.elementor?.helpers?.hasPro;
-	if ( typeof hasPro === 'function' ) {
-		return hasPro();
-	}
-	return false;
-};
-
 export const initWidgetsSchemaResource = ( reg: MCPRegistryEntry ) => {
 	const { mcpServer } = reg;
 
@@ -40,9 +25,9 @@ export const initWidgetsSchemaResource = ( reg: MCPRegistryEntry ) => {
 					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.
+This flexboxes are by default "flex" with "stretch" alignment. To ensure proper layout, define the "justify-content" and "align-items" as in the schema.
 
-When applicable for styles, apply style PropValues using the ${ STYLE_SCHEMA_URI }. Custom css is for Elementor PRO users and intended to support only new CSS features not yet available in the UI.
+When applicable for styles, apply style PropValues using the ${ STYLE_SCHEMA_URI }.
 The css string must follow standard CSS syntax, with properties and values separated by semicolons, no selectors, or nesting rules allowed.`,
 				},
 			],
@@ -53,11 +38,7 @@ The css string must follow standard CSS syntax, with properties and values separ
 		'styles-schema',
 		new ResourceTemplate( STYLE_SCHEMA_URI, {
 			list: () => {
-				const isPro = checkIfUserHasPro();
 				const categories = [ ...Object.keys( getStylesSchema() ) ];
-				if ( ! isPro ) {
-					categories.push( 'custom_css' );
-				}
 				return {
 					resources: categories.map( ( category ) => ( {
 						uri: `elementor://styles/schema/${ category }`,
@@ -71,16 +52,6 @@ The css string must follow standard CSS syntax, with properties and values separ
 		},
 		async ( uri, variables ) => {
 			const category = typeof variables.category === 'string' ? variables.category : variables.category?.[ 0 ];
-			if ( category === 'custom_css' && checkIfUserHasPro() ) {
-				return {
-					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. Use this as a last resort for properties that are not covered with the schema. Do not use selectors, only the CSS content',
-						},
-					],
-				};
-			}
 			const stylesSchema = getStylesSchema()[ category ];
 			if ( ! stylesSchema ) {
 				throw new Error( `No styles schema found for category: ${ category }` );
@@ -91,7 +62,9 @@ The css string must follow standard CSS syntax, with properties and values separ
 					{
 						uri: uri.toString(),
 						mimeType: 'application/json',
-						text: JSON.stringify( asJson ),
+						text: JSON.stringify(
+							Schema.enrichWithIntention( asJson, 'Desired CSS in format "property: value;"' )
+						),
 					},
 				],
 			};

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

@@ -58,9 +58,6 @@ Prefer this tool over any other tool for building HTML structure, unless you are
    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-tabs", "e-div-block", and "e-flexbox".
 8. Make sure that non-container elements do NOT have any nested elements.
-9. **CRITICAL - CUSTOM CSS USAGE**: ALWAYS Prefer using style schema. Custom CSS is ONLY FOR UNSUPPRTED schema styles.
-   ALWAYS PRIORITIZE using the style schema PropValues for styling elements as they provide better user experience in the editor, and UI features for the end-users.
-   Use custom_css only for style attributes that ARE NOT SUPPORTED via the style schema AFTER YOU CHECK THE [${ STYLE_SCHEMA_URI }].
 
 # DESIGN VECTORS - Concrete Implementation Guidance
 
@@ -195,9 +192,6 @@ background:
           "unit": { "$$type": "string", "value": "px" }
         }
       },
-    },
-    "button1": {
-      "custom_css": "background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); padding: 12px 24px;"
     }
   }
 }
@@ -217,16 +211,23 @@ background:
   },
   "stylesConfig": {
     "hero-section": {
-      "custom_css": "display: flex; flex-direction: column; align-items: flex-start; gap: 3rem; background: radial-gradient(circle at 30% 20%, rgba(216, 67, 21, 0.1) 0%, transparent 60%), linear-gradient(135deg, #faf8f6 0%, #f0ebe6 100%); padding: 10rem 3rem;"
+      "display": { "$$type": "string", "value": "flex" },
+      "flex-direction": { "$$type": "string", "value": "column" },
+      "align-items": { "$$type": "string", "value": "flex-start" },
+      "background": {
+        "$$type": "color",
+        "value": "#f0ebe6",
+        "$intention": "background: #f0ebe6",
+      }
     },
     "hero-title": {
-      "custom_css": "font-size: 4.5rem; font-weight: 900; line-height: 1.05; letter-spacing: -0.04em; color: #2d2622; max-width: 700px;"
-    },
-    "hero-subtitle": {
-      "custom_css": "font-size: 1.25rem; font-weight: 200; line-height: 1.7; letter-spacing: 0.01em; color: #5a534d; max-width: 600px;"
-    },
-    "hero-cta": {
-      "custom_css": "background: #d84315; color: #ffffff; padding: 1.25rem 3rem; font-size: 1rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; border-radius: 2px; box-shadow: 0 4px 16px rgba(216, 67, 21, 0.25); transition: transform 0.15s ease-out, box-shadow 0.15s ease-out;"
+      "font-size": {
+          "$$type": "size",
+          "value": {
+            "size": { "$$type": "number", "value": 72 },
+            "unit": { "$$type": "string", "value": "px" }
+          }
+        },
     }
   }
 }
@@ -298,9 +299,6 @@ A Heading and a button inside a flexbox
       },
   },
   stylesConfig: {
-    "flex1": {
-      "custom_css": "background: radial-gradient(circle at 20% 30%, rgba(216, 67, 21, 0.08) 0%, transparent 50%), radial-gradient(circle at 80% 70%, rgba(0, 191, 165, 0.06) 0%, transparent 50%), linear-gradient(135deg, #faf8f6 0%, #f0ebe6 100%); display: flex; flex-direction: column; align-items: center; padding: 80px 32px; gap: 48px;"
-    },
     "heading1": {
       "font-size": {
         "$$type": "size",

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

@@ -17,7 +17,7 @@ export const inputSchema = {
 		.record(
 			z.string().describe( 'The configuration id' ),
 			z.record(
-				z.string().describe( 'StyleSchema property name. Last priority is custom_css!' ),
+				z.string().describe( 'StyleSchema property name' ),
 				z.any().describe( `The PropValue for the style property. MANDATORY, refer to [${ STYLE_SCHEMA_URI }]` )
 			)
 		)

package/src/mcp/utils/validate-input.ts

@@ -66,7 +66,7 @@ export const validateInput = {
 	validateStyles( values: Record< string, unknown > ): ValidationResult {
 		const styleSchema = getStylesSchema();
 		const customCssValue = values.custom_css;
-		const result = this.validateProps( styleSchema, values, [ 'custom_css' ] );
+		const result = this.validateProps( styleSchema, values, [ 'custom_css', '$intention' ] );
 		const appendInvalidCustomCssErr = () => {
 			result.valid = false;
 			result.errors = result.errors || [];