@elementor/editor-canvas 4.2.0-931 → 4.2.0-933

package/package.json

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

package/src/composition-builder/composition-builder.ts

@@ -13,7 +13,6 @@ import { type z } from '@elementor/schema';
 
 import { doUpdateElementProperty } from '../mcp/utils/do-update-element-property';
 import { mergeCustomCssText } from '../mcp/utils/merge-custom-css';
-import { validateInput } from '../mcp/utils/validate-input';
 import { RequiredChildrenEnforcer } from './utils/required-children-enforcer';
 import { getRequiredDefaultChildTemplates } from './utils/required-default-child-tags';
 
@@ -223,20 +222,14 @@ export class CompositionBuilder {
 			}
 
 			const styleConfig = this.elementStylesConfig[ configId ];
-			let hasInvalidStyles = false;
+			const hasInvalidStyles = false;
 			if ( styleConfig ) {
 				const validStylesPropValues: Record< string, AnyValue > = {};
 				for ( const [ styleName, stylePropValue ] of Object.entries( styleConfig ) ) {
 					if ( styleName === '$intention' ) {
 						continue;
-					}
-					const { valid, errors: validationErrors } = validateInput.validateStyles( {
-						[ styleName ]: stylePropValue,
-					} );
-					if ( ! valid ) {
-						hasInvalidStyles = true;
-						styleErrors.push( ...( validationErrors || [] ) );
 					} else {
+						// skipping actual validation - properies comes from the server
 						validStylesPropValues[ styleName ] = stylePropValue;
 					}
 				}

package/src/index.ts

@@ -1,5 +1,11 @@
 export { BREAKPOINTS_SCHEMA_URI, BREAKPOINTS_SCHEMA_FULL_URI } from './mcp/resources/breakpoints-resource';
-export { STYLE_SCHEMA_URI, STYLE_SCHEMA_FULL_URI } from './mcp/resources/widgets-schema-resource';
+export {
+	convertCssToAtomic,
+	convertStyleBlocksToAtomic,
+	type CssConversionResult,
+	type StyleBlock,
+	type StyleDeclarations,
+} from './mcp/utils/convert-css-to-atomic';
 
 export { init } from './init';
 export { isAtomicWidget } from './utils/command-utils';

package/src/mcp/canvas-mcp.ts

@@ -15,6 +15,9 @@ import { initGetElementConfigTool } from './tools/get-element-config/tool';
 import { getDynamicTagNamesByCategories } from './utils/resolve-dynamic-tag';
 
 export const initCanvasMcp = ( reg: MCPRegistryEntry ) => {
+	// TODO: Remove this comment once 4.2 released
+	// NOTE: Style schema removed in favor of css-to-schema functionality [ED-24441]
+	// Reference code can be found at any commit prior to `d338e816f0c97b90b52fe2f1ef0bfe2aad816ab0`
 	Schema.setDynamicTagNamesResolver( getDynamicTagNamesByCategories );
 	initWidgetsSchemaResource( reg );
 	initAvailableWidgetsResource( reg );

package/src/mcp/mcp-description.ts

@@ -1,4 +1,4 @@
-import { STYLE_SCHEMA_URI, WIDGET_SCHEMA_URI } from './resources/widgets-schema-resource';
+import { WIDGET_SCHEMA_URI } from './resources/widgets-schema-resource';
 
 const ELEMENT_SCHEMA_URI = WIDGET_SCHEMA_URI.replace( '{widgetType}', 'element-schema' );
 
@@ -21,7 +21,6 @@ The \`$$type\` defines how Elementor interprets the value. Providing the correct
 - **Global Variables**: Reusable colors, sizes, and fonts (\`elementor://global-variables\`)
 - **Global Classes**: Reusable style sets that can be applied to elements (\`elementor://global-classes\`)
 - **Widget Schemas**: Configuration options for each widget type (\`${ WIDGET_SCHEMA_URI }\`)
-- **Style Schema**: Common styles shared across all widgets and containers (\`${ STYLE_SCHEMA_URI }\`)
 
 # Building Compositions with build_composition
 
@@ -70,28 +69,25 @@ Map each configuration-id to its widget properties using PropValues:
 }
 \`\`\`
 
-### 6. Create stylesConfig
-Map each configuration-id to style PropValues from \`${ STYLE_SCHEMA_URI }\`:
-- Use global variables for colors, sizes, and fonts
-- Example using global variable:
+### 6. Create style
+Map each configuration-id to raw CSS declarations (property → value strings). The server converts them to native styles and stores any unconvertible declarations as the element custom CSS.
+- Example:
 \`\`\`json
 {
-  "heading-1": {
-    "color": { "$$type": "global-color-variable", "value": "primary-color-id" },
-    "font-size": { "$$type": "size", "value": "2rem" }
+  "heading-1": "color: #1a1a1a; font-size: 2rem;"
   }
 }
 \`\`\`
 
 ### 7. Execute build_composition
-Call the tool with your XML structure, elementConfig, and stylesConfig. The response will contain the created element IDs.
+Call the tool with your XML structure, elementConfig, and style. The response will contain the created element IDs.
 At the response you will also find llm_instructions for you to do afterwards, read and follow them!
 
 ## Key Points
 
 - **PropValue Types**: Arrays that accept union types are typed as mixed arrays
-- **Visual Sizing**: Widget sizes MUST be defined in stylesConfig. Widget properties like image "size" control resolution, not visual appearance
-- **Global Variables**: Reference by ID in PropValues (e.g., \`{ "$$type": "global-color-variable", "value": "variable-id" }\`)
+- **Visual Sizing**: Widget sizes MUST be defined via the style parameter (raw CSS). Widget properties like image "size" control resolution, not visual appearance
+- **Global Variables**: Reference by label/name: (e.g. var(--card-background-color)
 - **Naming Conventions**: Use meaningful, purpose-based names (e.g., "primary-button", "heading-large"), not value-based names (e.g., "blue-style", "20px-padding")
 
 ## Example: e-image PropValue Structure
@@ -109,5 +105,5 @@ At the response you will also find llm_instructions for you to do afterwards, re
   }
 }
 \`\`\`
-Note: The "size" property controls image resolution/loading, not visual size. Set visual dimensions in stylesConfig.
+Note: The "size" property controls image resolution/loading, not visual size. Set visual dimensions via the style parameter (raw CSS).
 `;

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

@@ -9,7 +9,6 @@ import {
 	type TransformablePropType,
 	type UnionPropType,
 } from '@elementor/editor-props';
-import { getStylesSchema } from '@elementor/editor-styles';
 
 import { getRequiredDefaultChildTypes } from '../../composition-builder/utils/required-default-child-tags';
 import { hasV3Controls, isWidgetAvailableForLLM } from '../utils/element-data-util';
@@ -61,7 +60,6 @@ export const CANVAS_SERVER_NAME = 'editor-canvas';
 export const WIDGET_SCHEMA_URI = 'elementor://widgets/schema/{widgetType}';
 export const WIDGET_SCHEMA_FULL_URI = `${ CANVAS_SERVER_NAME }_${ WIDGET_SCHEMA_URI }`;
 export const STYLE_SCHEMA_URI = 'elementor://styles/schema/{category}';
-export const STYLE_SCHEMA_FULL_URI = `${ CANVAS_SERVER_NAME }_${ STYLE_SCHEMA_URI }`;
 export const BEST_PRACTICES_URI = 'elementor://styles/best-practices';
 export const BEST_PRACTICES_FULL_URI = `${ CANVAS_SERVER_NAME }_${ BEST_PRACTICES_URI }`;
 
@@ -83,8 +81,7 @@ export const initWidgetsSchemaResource = ( reg: MCPRegistryEntry ) => {
 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.
 
-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.
+Styling is provided as raw CSS. The css string must follow standard CSS syntax, with properties and values separated by semicolons, no selectors, or nesting rules allowed.
 
 ** CRITICAL - VARIABLES **
 When using global variables, ensure that the variables are defined in the ${ 'elementor://global-variables' } resource.
@@ -97,43 +94,6 @@ Variables from the user context ARE NOT SUPPORTED AND WILL RESOLVE IN ERROR.
 		}
 	);
 
-	resource(
-		'styles-schema',
-		new ResourceTemplate( STYLE_SCHEMA_URI, {
-			list: () => {
-				const categories = [ ...Object.keys( getStylesSchema() ) ].filter( ( category ) => category !== 'all' );
-				return {
-					resources: categories.map( ( category ) => ( {
-						uri: `elementor://styles/schema/${ category }`,
-						name: 'Style schema for ' + category,
-					} ) ),
-				};
-			},
-		} ),
-		{
-			description: 'Common styles schema for the specified category (applicable for V4 elements only)',
-		},
-		async ( uri, variables ) => {
-			const category = typeof variables.category === 'string' ? variables.category : variables.category?.[ 0 ];
-			const stylesSchema = getStylesSchema()[ category ];
-			if ( ! stylesSchema ) {
-				throw new Error( `No styles schema found for category: ${ category }` );
-			}
-			const asJson = Schema.propTypeToJsonSchema( stylesSchema as PropType );
-			return {
-				contents: [
-					{
-						uri: uri.toString(),
-						mimeType: 'application/json',
-						text: JSON.stringify(
-							Schema.enrichWithIntention( asJson, 'Desired CSS in format "property: value;"' )
-						),
-					},
-				],
-			};
-		}
-	);
-
 	resource(
 		'widget-schema-by-type',
 		new ResourceTemplate( WIDGET_SCHEMA_URI, {

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

@@ -18,7 +18,7 @@ export const generatePrompt = () => {
 This tool support v4 elements only
 
 # WORKFLOW
-1. Check/create global classes via "create-global-class" tool
+1. Check/create global classes via "manage-global-classes" tool
 2. Build composition (THIS TOOL) - minimal inline styles
 3. Apply classes via "apply-global-class" tool
 
@@ -36,8 +36,9 @@ Some elements have internal tree structures (nesting). When using these elements
 - \`allowed_parents\` lists which element types this element can be placed inside
 
 # CONFIGURATION
-- Map configuration-id → elementConfig (props) + stylesConfig (layout only)
-- All PropValues require \`$$type\` matching schema
+- Map configuration-id → elementConfig (props) + style (raw CSS declarations)
+- elementConfig PropValues require \`$$type\` matching schema
+- style is raw CSS (property → value strings); the server converts it to native styles and stores any unconvertible declarations as the element custom CSS
 - NO LINKS in configuration
 - Retry on errors up to 10x
 
@@ -123,8 +124,7 @@ BAD: \`<e-flexbox style="height:100vh"><e-div-block style="height:100vh">overflo
 # PARAMETERS
 - **xmlStructure**: Valid XML with configuration-id attributes
 - **elementConfig**: configuration-id → widget PropValues
-- **stylesConfig**: configuration-id → style PropValues (layout only)
-- **customCSS**: configuration-id → CSS rules (no selectors, semicolon-separated)
+- **style**: configuration-id → raw CSS declarations (property → value strings; no selectors)
   ` );
 
 	buildCompositionsToolPrompt.example( `
@@ -134,13 +134,12 @@ Section with heading + button (NO explicit heights - content sizes naturally):
   elementConfig: {
     "section1": { "tag": { "$$type": "string", "value": "section" } }
   },
-  customCSS: {
-    "Section Title": "padding: 6rem 4rem; background: linear-gradient(135deg, #faf8f5 0%, #f0ebe4 100%);"
-  },
-  stylesConfig: {
+  style: {
     "Section Title": {
-      "font-size": { "$$type": "size", "value": { "size": { "$$type": "number", "value": 3.5 }, "unit": { "$$type": "string", "value": "rem" } } },
-      "color": { "$$type": "color", "value": { "$$type": "string", "value": "#2d2a26" } }
+      "padding": "6rem 4rem",
+      "background": "linear-gradient(135deg, #faf8f5 0%, #f0ebe4 100%)",
+      "font-size": "3.5rem",
+      "color": "#2d2a26"
     }
   }
 }
@@ -155,8 +154,8 @@ Note: No height/width specified on any element - flexbox handles layout automati
 	buildCompositionsToolPrompt.parameter( 'elementConfig', `Record mapping configuration IDs to widget PropValues.` );
 
 	buildCompositionsToolPrompt.parameter(
-		'stylesConfig',
-		`Record mapping configuration IDs to style PropValues (layout/positioning only).`
+		'style',
+		`Record mapping configuration IDs to raw CSS declarations (property → value strings).`
 	);
 
 	buildCompositionsToolPrompt.instruction(

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

@@ -1,6 +1,6 @@
 import { z } from '@elementor/schema';
 
-import { STYLE_SCHEMA_URI, WIDGET_SCHEMA_URI } from '../../resources/widgets-schema-resource';
+import { WIDGET_SCHEMA_URI } from '../../resources/widgets-schema-resource';
 
 export const inputSchema = {
 	xmlStructure: z.string().describe( 'The XML structure representing the composition to be built' ),
@@ -13,25 +13,18 @@ export const inputSchema = {
 			)
 		)
 		.describe( 'A record mapping element IDs to their configuration objects. REQUIRED' ),
-	stylesConfig: z
+	style: z
 		.record(
 			z.string().describe( 'The configuration id' ),
 			z.record(
-				z.string().describe( 'StyleSchema property name' ),
-				z.any().describe( `The PropValue for the style property. MANDATORY, refer to [${ STYLE_SCHEMA_URI }]` )
+				z.string().describe( 'A CSS property name, e.g. "color", "padding".' ),
+				z.string().describe( 'A CSS value, e.g. "6rem 4rem", "#2d2a26".' )
 			)
 		)
 		.describe(
-			`A record mapping element IDs to their styles configuration objects. Use the actual styles schema from [${ STYLE_SCHEMA_URI }].`
+			'A record mapping element configuration IDs to their raw CSS declarations (property→value). Converted to native styles server-side; any declaration that cannot be converted is stored as the element custom CSS.'
 		)
 		.default( {} ),
-	customCSS: z
-		.record(
-			z.string().describe( 'The configuration id' ),
-			z.string().describe( 'The custom CSS for the element. MANDATORY' )
-		)
-		.describe( 'A record mapping element IDs to their custom CSS.' )
-		.default( {} ),
 };
 
 export const outputSchema = {

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

@@ -11,7 +11,8 @@ import { type MCPRegistryEntry } from '@elementor/editor-mcp';
 import { CompositionBuilder } from '../../../composition-builder/composition-builder';
 import { AVAILABLE_WIDGETS_URI_V4 } from '../../resources/available-widgets-resource';
 import { DYNAMIC_TAGS_URI } from '../../resources/dynamic-tags-resource';
-import { BEST_PRACTICES_URI, STYLE_SCHEMA_URI, WIDGET_SCHEMA_URI } from '../../resources/widgets-schema-resource';
+import { BEST_PRACTICES_URI, WIDGET_SCHEMA_URI } from '../../resources/widgets-schema-resource';
+import { convertStyleBlocksToAtomic } from '../../utils/convert-css-to-atomic';
 import { isWidgetAvailableForLLM } from '../../utils/element-data-util';
 import { getCompositionTargetContainer } from '../../utils/get-composition-target-container';
 import { BUILD_COMPOSITIONS_GUIDE_URI, generatePrompt } from './prompt';
@@ -41,7 +42,6 @@ export const initBuildCompositionsTool = ( reg: MCPRegistryEntry ) => {
 		requiredResources: [
 			{ description: 'Build compositions guide', uri: BUILD_COMPOSITIONS_GUIDE_URI },
 			{ description: 'Widgets schema', uri: WIDGET_SCHEMA_URI },
-			{ description: 'Styles schema', uri: STYLE_SCHEMA_URI },
 			{ description: 'Global Classes', uri: 'elementor://global-classes' },
 			{ description: 'Global Variables', uri: 'elementor://global-variables' },
 			{ description: 'Styles best practices', uri: BEST_PRACTICES_URI },
@@ -51,8 +51,10 @@ export const initBuildCompositionsTool = ( reg: MCPRegistryEntry ) => {
 		outputSchema,
 		handler: async ( rawParams ) => {
 			assertCompositionXmlUsesV4WidgetsOnly( rawParams.xmlStructure );
-			const { xmlStructure, elementConfig, stylesConfig, customCSS } = adaptLeafRootParams( {
+			const { stylesConfig: convertedStyles, customCSS } = await convertCompositionStyles( rawParams.style );
+			const { xmlStructure, elementConfig, stylesConfig } = adaptLeafRootParams( {
 				...rawParams,
+				stylesConfig: convertedStyles,
 				widgetsCache: getWidgetsCache() ?? {},
 			} );
 
@@ -143,6 +145,26 @@ Remember: Global classes ensure design consistency and reusability. Don't skip a
 	} );
 };
 
+async function convertCompositionStyles( style: Record< string, Record< string, string > > ) {
+	const stylesConfig: Record< string, Record< string, unknown > > = {};
+	const customCSS: Record< string, string > = {};
+
+	if ( ! style || Object.keys( style ).length === 0 ) {
+		return { stylesConfig, customCSS };
+	}
+
+	const results = await convertStyleBlocksToAtomic( style );
+
+	for ( const [ configId, { props, customCss } ] of Object.entries( results ) ) {
+		stylesConfig[ configId ] = props;
+		if ( customCss ) {
+			customCSS[ configId ] = customCss;
+		}
+	}
+
+	return { stylesConfig, customCSS };
+}
+
 function assertCompositionXmlUsesV4WidgetsOnly( xmlStructure: string ) {
 	const doc = new DOMParser().parseFromString( xmlStructure, 'application/xml' );
 	if ( doc.querySelector( 'parsererror' ) ) {

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

@@ -1,7 +1,7 @@
 import { toolPrompts } from '@elementor/editor-mcp';
 
 import { DYNAMIC_TAGS_URI } from '../../resources/dynamic-tags-resource';
-import { STYLE_SCHEMA_URI, WIDGET_SCHEMA_URI } from '../../resources/widgets-schema-resource';
+import { WIDGET_SCHEMA_URI } from '../../resources/widgets-schema-resource';
 
 export const CONFIGURE_ELEMENT_GUIDE_URI = 'elementor://canvas/tools/configure-element-guide';
 
@@ -12,54 +12,43 @@ export const generatePrompt = () => {
 Configure an existing element on the page.
 
 # **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 parameter 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 "stylePropertiesToChange" parameter.
-3. If not sure about the PropValues schema, you can use the "get-element-configuration-values" tool to retrieve 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.
-Retrieve and check the common styles schema at the resource list "styles-schema" at editor-canvas__elementor://styles/schema/{category}
+1. [${ WIDGET_SCHEMA_URI }] — **Widget properties** (\`propertiesToChange\`): each widgetType (e.g. e-heading, e-button) has its own PropType schema; values must be PropValues with \`$$type\`.
+2. [elementor://global-variables] — **Design tokens for styling**: use labels in CSS as \`var(--label)\` or \`var(--label, fallback)\`; only variables listed here are valid.
+3. **Styling** (\`style\` parameter): flat map of CSS property → value strings — **not** PropValues. The server converts to native styles; unconvertible declarations become custom CSS.
+4. **Current state**: \`get-element-configuration-values\` returns \`properties\` as PropValues and \`style\` in stored form; when writing, send raw CSS in \`style\`, not copied PropValues.
+
+Before using this tool, read the widget PropType schema at editor-canvas__elementor://widgets/schema/{widgetType}
 
 # When to use this tool
 When a user requires to change anything in an element, such as updating text, colors, sizes, or other configurable properties.
 This tool handles elements of type "widget".
-This tool handles styling elements, using the "stylePropertiesToChange" parameter.
+This tool handles styling elements, using the "style" parameter (raw CSS as a property → value map).
 
-To CLEAR a property (i.e., set it to default or none), provide null as a value.
+To CLEAR a property (i.e., set it to default or none), provide null as a value - example: \`background-color: null\`.
 
 The element's schema must be known before using this tool.
-The style schema must be known before using this tool.
-
-Attached resource link describing how PropType schema should be parsed as PropValue for this tool.
-
-Read carefully the PropType Schema of the element and it's styles, then apply correct PropValue according to the schema.
 
-PropValue structure:
+**PropValue structure (for \`propertiesToChange\` only — not for \`style\`):**
 {
     "$$type": string, // MANDATORY as defined in the PropType schema under the "key" property
     value: unknown // The value according to the PropType schema for kinds of "array", use array with PropValues items inside. For "object", read the shape property of the PropType schema. For "plain", use strings.
 }
 
 <IMPORTANT>
-ALWAYS MAKE SURE you have the PropType schemas for the element you are configuring, and the common-styles schema for styling. If you are not sure, retrieve the schema from the resources mentioned above.
+ALWAYS MAKE SURE you have the PropType schemas for the element you are configuring. If you are not sure, retrieve the schema from the resources mentioned above.
 </IMPORTANT>
 
-You can use multiple property changes at once by providing multiple entries in the propertiesToChange object, including _style alongside non-style props.
+You can use multiple property changes at once by providing multiple entries in the propertiesToChange object.
 Some properties are nested, use the root property name, then objects with nested values inside, as the complete schema suggests.
 
 Make sure you have the "widget-schema-by-type" resource available to retrieve the PropType schema for the element type you are configuring.
-Make sure you have the "styles-schema" resources available to retrieve the common styles schema.
 
 # How to configure elements
-We use a dedicated PropType Schema for configuring elements, including styles. When you configure an element, you must use the EXACT PropType Value as defined in the schema.
-For styleProperties, use the style schema provided, as it also uses the PropType format.
-For all non-primitive types, provide the key property as defined in the schema as $$type in the generated object, as it is MANDATORY for parsing.
+We use a dedicated PropType Schema for configuring element properties (propertiesToChange). When you configure an element property, you must use the EXACT PropType Value as defined in the schema.
+For styling, use the "style" parameter with raw CSS declarations (property → value strings) - e.g. \`color: var(--primary-text, #000); height: 4rem;\`;
+For all non-primitive entries in \`propertiesToChange\`, provide the schema \`key\` as \`$$type\` in the generated object, as it is MANDATORY for parsing.
 
-Use the EXACT "PROP-TYPE" Schema given, and ALWAYS include the "key" property from the original configuration for every property you are changing.
+Use the EXACT PropType schema given, and ALWAYS include the \`key\` from the schema for every property you are changing in \`propertiesToChange\`.
 
 # Dynamic tags
 A value can be made dynamic wherever its schema exposes a variant with "$$type": "dynamic". This may be the property root OR a NESTED field: for example an image is made dynamic on its "src" (the root stays "image"), NOT on the whole "image" value.
@@ -90,8 +79,8 @@ Do NOT send "group" (it is resolved automatically). Use { "settings": {} } only
 	);
 
 	configureElementToolPrompt.parameter(
-		'stylePropertiesToChange',
-		'An object containing the style properties to change, with their new values. OPTIONAL.'
+		'style',
+		'A flat map of raw CSS declarations (property → value), e.g. { "line-height": "1.25rem", "color": "var(--primary-text, #000)" }. Set a value to null to reset that property to its default. OPTIONAL.'
 	);
 
 	configureElementToolPrompt.example( `
@@ -108,20 +97,9 @@ Do NOT send "group" (it is resolved automatically). Use { "settings": {} } only
       value: false
     },
   },
-  stylePropertiesToChange: {
-    'line-height': {
-      $$type: 'size',
-      value: {
-        size: {
-          $$type: 'number',
-          value: 20
-        },
-        unit: {
-          $$type: 'string',
-          value: 'px'
-        }
-      }
-    }
+  style: {
+    'line-height': '1.25rem',
+    'color': 'var(--primary-text, #000)'
   },
   elementId: 'element-id',
   elementType: 'element-type'
@@ -130,7 +108,7 @@ Do NOT send "group" (it is resolved automatically). Use { "settings": {} } only
 ` );
 
 	configureElementToolPrompt.instruction(
-		'The $$type property is MANDATORY for every value; it is required to parse the value and apply application-level effects.'
+		'The $$type property is MANDATORY for every value in propertiesToChange; it is not used in the style parameter (raw CSS only).'
 	);
 
 	configureElementToolPrompt.instruction( `

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

@@ -1,6 +1,6 @@
 import { z } from '@elementor/schema';
 
-import { STYLE_SCHEMA_URI, WIDGET_SCHEMA_URI } from '../../resources/widgets-schema-resource';
+import { WIDGET_SCHEMA_URI } from '../../resources/widgets-schema-resource';
 
 export const inputSchema = {
 	propertiesToChange: z
@@ -12,13 +12,19 @@ export const inputSchema = {
 			z.any()
 		)
 		.describe( 'An object record containing property names and their new values to be set on the element' ),
-	stylePropertiesToChange: z
+	style: z
 		.record(
-			z.string().describe( 'The style property name' ),
-			z.any().describe( `The style PropValue, refer to [${ STYLE_SCHEMA_URI }] how to generate values` ),
-			z.any()
+			z.string().describe( 'A CSS property name, e.g. "color", "margin-top".' ),
+			z
+				.string()
+				.nullable()
+				.describe(
+					'A CSS value, e.g. "red", "10px", "1px solid #000". Use null to reset the property to its default.'
+				)
+		)
+		.describe(
+			'Raw CSS declarations as a flat property→value map. Converted to native styles server-side; any declaration that cannot be converted is stored as the element custom CSS. A null value resets that property to its default.'
 		)
-		.describe( 'An object record containing style property names and their new values to be set on the element' )
 		.default( {} ),
 	elementType: z.string().describe( 'The type of the element to retrieve the schema' ),
 	elementId: z.string().describe( 'The unique id of the element to configure' ),