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

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

@@ -2,7 +2,8 @@ import { getWidgetsCache } from '@elementor/editor-elements';
 import { type MCPRegistryEntry } 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';
+import { convertCssToAtomic } from '../../utils/convert-css-to-atomic';
 import { doUpdateElementProperty } from '../../utils/do-update-element-property';
 import { validateInput } from '../../utils/validate-input';
 import { CONFIGURE_ELEMENT_GUIDE_URI, generatePrompt } from './prompt';
@@ -31,11 +32,10 @@ export const initConfigureElementTool = ( reg: MCPRegistryEntry ) => {
 		outputSchema,
 		requiredResources: [
 			{ description: 'Widgets schema', uri: WIDGET_SCHEMA_URI },
-			{ description: 'Styles schema', uri: STYLE_SCHEMA_URI },
 			{ description: 'Configure element guide', uri: CONFIGURE_ELEMENT_GUIDE_URI },
 			{ description: 'Dynamic tags catalog', uri: DYNAMIC_TAGS_URI },
 		],
-		handler: ( { elementId, propertiesToChange, elementType, stylePropertiesToChange } ) => {
+		handler: async ( { elementId, propertiesToChange, elementType, style } ) => {
 			const widgetData = getWidgetsCache()?.[ elementType ];
 			if ( ! widgetData ) {
 				throw new Error(
@@ -49,21 +49,12 @@ export const initConfigureElementTool = ( reg: MCPRegistryEntry ) => {
 			}
 			const toUpdate = Object.entries( propertiesToChange );
 			const { valid, errors } = validateInput.validatePropSchema( elementType, propertiesToChange );
-			const { valid: stylesValid, errors: stylesErrors } = validateInput.validateStyles(
-				stylePropertiesToChange || {}
-			);
 			if ( ! valid ) {
 				const errorMessage = `Failed to configure element "${ elementId }" due to invalid properties: ${ errors?.join(
 					'\n- '
 				) }`;
 				throw new Error( errorMessage );
 			}
-			if ( ! stylesValid ) {
-				const errorMessage = `Failed to configure element "${ elementId }" due to invalid style properties: ${ stylesErrors?.join(
-					'\n- '
-				) }`;
-				throw new Error( errorMessage );
-			}
 			for ( const [ propertyName, propertyValue ] of toUpdate ) {
 				try {
 					doUpdateElementProperty( {
@@ -83,27 +74,7 @@ export const initConfigureElementTool = ( reg: MCPRegistryEntry ) => {
 					throw new Error( errorMessage );
 				}
 			}
-			for ( const [ stylePropertyName, stylePropertyValue ] of Object.entries( stylePropertiesToChange || {} ) ) {
-				try {
-					doUpdateElementProperty( {
-						elementId,
-						elementType,
-						propertyName: '_styles',
-						propertyValue: {
-							[ stylePropertyName ]: stylePropertyValue,
-						},
-					} );
-				} catch ( error ) {
-					const errorMessage = createUpdateErrorMessage( {
-						propertyName: `(style) ${ stylePropertyName }`,
-						elementId,
-						elementType,
-						propertyType: 'style',
-						error: error as Error,
-					} );
-					throw new Error( errorMessage );
-				}
-			}
+			await applyStyleFromCss( { elementId, elementType, style } );
 			return {
 				success: true,
 			};
@@ -111,6 +82,44 @@ export const initConfigureElementTool = ( reg: MCPRegistryEntry ) => {
 	} );
 };
 
+async function applyStyleFromCss( opts: {
+	elementId: string;
+	elementType: string;
+	style: Record< string, string | null >;
+} ) {
+	const { elementId, elementType, style } = opts;
+	if ( ! style || Object.keys( style ).length === 0 ) {
+		return;
+	}
+	const { props, customCss } = await convertCssToAtomic( style );
+	const styleValue: Record< string, unknown > = { ...props };
+	if ( customCss ) {
+		styleValue.custom_css = customCss;
+	}
+	if ( Object.keys( styleValue ).length === 0 ) {
+		return;
+	}
+	try {
+		doUpdateElementProperty( {
+			elementId,
+			elementType,
+			propertyName: '_styles',
+			propertyValue: styleValue,
+			customCssWriteMode: 'merge-with-stored',
+		} );
+	} catch ( error ) {
+		throw new Error(
+			createUpdateErrorMessage( {
+				propertyName: '(style)',
+				elementId,
+				elementType,
+				propertyType: 'style',
+				error: error as Error,
+			} )
+		);
+	}
+}
+
 function createUpdateErrorMessage( opts: {
 	propertyName: string;
 	elementId: string;
@@ -129,11 +138,7 @@ Check the element's PropType schema at the resource [${ WIDGET_SCHEMA_URI.replac
 		  ) }] for type "${ elementType }" to ensure the property exists and the value matches the expected PropType.
 Now that you have this information, ensure you have the schema and try again.`
 		: `
-Check the styles schema at the resource [${ STYLE_SCHEMA_URI.replace(
-				'{category}',
-				propertyName
-		  ) }] at editor-canvas__elementor://styles/schema/{category} to ensure the style property exists and the value matches the expected PropType.
-`
+Provide styling as raw CSS via the "style" parameter (a flat map of CSS property → value). Declarations that cannot be converted are stored as the element custom CSS.`
 };
 }`;
 }

package/src/mcp/utils/__tests__/convert-css-to-atomic.test.ts

@@ -0,0 +1,109 @@
+import { httpService } from '@elementor/http-client';
+
+import { convertCssToAtomic, convertStyleBlocksToAtomic } from '../convert-css-to-atomic';
+
+jest.mock( '@elementor/http-client' );
+
+const mockedHttpService = jest.mocked( httpService );
+
+const mockPost = ( responseData: unknown ) => {
+	const post = jest.fn().mockResolvedValue( { data: { data: responseData, meta: {} } } );
+	mockedHttpService.mockReturnValue( { post } as never );
+	return post;
+};
+
+describe( 'convertCssToAtomic', () => {
+	it( 'posts a single named block as a declaration map and unwraps its result', async () => {
+		// Arrange.
+		const post = mockPost( {
+			default: { props: { color: { $$type: 'color', value: 'red' } }, customCss: 'gap: 4px;' },
+		} );
+
+		// Act.
+		const result = await convertCssToAtomic( { color: 'red', gap: '4px' } );
+
+		// Assert.
+		expect( post ).toHaveBeenCalledWith( 'elementor/v1/css-to-atomic', {
+			blocks: { default: { color: 'red', gap: '4px' } },
+		} );
+		expect( result ).toEqual( {
+			props: { color: { $$type: 'color', value: 'red' } },
+			customCss: 'gap: 4px;',
+		} );
+	} );
+
+	it( 'forwards null declarations untouched so the server can emit reset props', async () => {
+		// Arrange.
+		const post = mockPost( {
+			default: { props: { color: null }, customCss: '' },
+		} );
+
+		// Act.
+		const result = await convertCssToAtomic( { color: null } );
+
+		// Assert.
+		expect( post ).toHaveBeenCalledWith( 'elementor/v1/css-to-atomic', {
+			blocks: { default: { color: null } },
+		} );
+		expect( result ).toEqual( { props: { color: null }, customCss: '' } );
+	} );
+} );
+
+describe( 'convertStyleBlocksToAtomic', () => {
+	it( 'posts every named declaration map and returns the named results map', async () => {
+		// Arrange.
+		const post = mockPost( {
+			'el-1': { props: {}, customCss: 'color: red;' },
+			'el-2': { props: {}, customCss: 'gap: 4px;' },
+		} );
+
+		// Act.
+		const results = await convertStyleBlocksToAtomic( {
+			'el-1': { color: 'red' },
+			'el-2': { gap: '4px' },
+		} );
+
+		// Assert.
+		expect( post ).toHaveBeenCalledWith( 'elementor/v1/css-to-atomic', {
+			blocks: { 'el-1': { color: 'red' }, 'el-2': { gap: '4px' } },
+		} );
+		expect( results ).toEqual( {
+			'el-1': { props: {}, customCss: 'color: red;' },
+			'el-2': { props: {}, customCss: 'gap: 4px;' },
+		} );
+	} );
+
+	it( 'posts plaintext css text blocks and returns the named results map', async () => {
+		// Arrange.
+		const post = mockPost( {
+			default: { props: { display: { $$type: 'string', value: 'flex' } }, customCss: '' },
+			hover: { props: { opacity: { $$type: 'string', value: '0.85' } }, customCss: '' },
+		} );
+
+		// Act.
+		const results = await convertStyleBlocksToAtomic( {
+			default: 'display: flex;',
+			hover: 'opacity: 0.85;',
+		} );
+
+		// Assert.
+		expect( post ).toHaveBeenCalledWith( 'elementor/v1/css-to-atomic', {
+			blocks: { default: 'display: flex;', hover: 'opacity: 0.85;' },
+		} );
+		expect( results ).toEqual( {
+			default: { props: { display: { $$type: 'string', value: 'flex' } }, customCss: '' },
+			hover: { props: { opacity: { $$type: 'string', value: '0.85' } }, customCss: '' },
+		} );
+	} );
+
+	it( 'posts an empty blocks map when given no style blocks', async () => {
+		// Arrange.
+		const post = mockPost( {} );
+
+		// Act.
+		await convertStyleBlocksToAtomic( {} );
+
+		// Assert.
+		expect( post ).toHaveBeenCalledWith( 'elementor/v1/css-to-atomic', { blocks: {} } );
+	} );
+} );

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

@@ -5,7 +5,7 @@ import {
 	updateElementStyle,
 } from '@elementor/editor-elements';
 import { Schema } from '@elementor/editor-props';
-import { getVariantByMeta } from '@elementor/editor-styles';
+import { getStylesSchema, getVariantByMeta } from '@elementor/editor-styles';
 import { __privateRunCommandSync } from '@elementor/editor-v1-adapters';
 
 import { doUpdateElementProperty } from '../do-update-element-property';
@@ -215,4 +215,42 @@ describe( 'doUpdateElementProperty', () => {
 			} )
 		);
 	} );
+
+	it( 'passes a null style value through unresolved so the editor resets the prop to default', () => {
+		// Arrange
+		jest.mocked( getStylesSchema ).mockReturnValue( {
+			color: { key: 'colorPropKey', kind: 'plain' },
+		} as never );
+		jest.mocked( getElementStyles ).mockReturnValue( {
+			[ LOCAL_STYLE_ID ]: {
+				id: LOCAL_STYLE_ID,
+				label: 'local',
+				type: 'class',
+				variants: [],
+			},
+		} );
+		jest.mocked( getVariantByMeta ).mockReturnValue( {
+			meta: { breakpoint: 'desktop', state: null },
+			props: {},
+			custom_css: null,
+		} );
+
+		// Act
+		doUpdateElementProperty( {
+			elementId: ELEMENT_ID,
+			elementType: ELEMENT_TYPE,
+			propertyName: '_styles',
+			propertyValue: {
+				color: null,
+			},
+		} );
+
+		// Assert
+		expect( Schema.adjustLlmPropValueSchema ).not.toHaveBeenCalled();
+		expect( updateElementStyle ).toHaveBeenCalledWith(
+			expect.objectContaining( {
+				props: { color: null },
+			} )
+		);
+	} );
 } );

package/src/mcp/utils/convert-css-to-atomic.ts

@@ -0,0 +1,39 @@
+import { type PropValue } from '@elementor/editor-props';
+import { type HttpResponse, httpService } from '@elementor/http-client';
+
+const CSS_TO_ATOMIC_URL = 'elementor/v1/css-to-atomic';
+const SINGLE_BLOCK_KEY = 'default';
+
+/**
+ * A flat CSS property→value map. A null value is an explicit reset: the server emits it as a null
+ * prop so the editor restores the property to its default.
+ */
+export type StyleDeclarations = Record< string, string | null >;
+
+export type StyleBlock = StyleDeclarations | string;
+
+export type CssConversionResult = {
+	props: Record< string, PropValue | null >;
+	customCss: string;
+};
+
+const convertBlocks = async (
+	blocks: Record< string, StyleBlock >
+): Promise< Record< string, CssConversionResult > > => {
+	const { data } = await httpService().post< HttpResponse< Record< string, CssConversionResult > > >(
+		CSS_TO_ATOMIC_URL,
+		{ blocks }
+	);
+
+	return data.data;
+};
+
+export const convertStyleBlocksToAtomic = async (
+	styleByName: Record< string, StyleBlock >
+): Promise< Record< string, CssConversionResult > > => convertBlocks( styleByName );
+
+export const convertCssToAtomic = async ( style: StyleDeclarations ): Promise< CssConversionResult > => {
+	const results = await convertStyleBlocksToAtomic( { [ SINGLE_BLOCK_KEY ]: style } );
+
+	return results[ SINGLE_BLOCK_KEY ];
+};

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

@@ -61,6 +61,9 @@ export const doUpdateElementProperty = ( params: OwnParams ) => {
 				if ( ! propKey && kind !== 'union' ) {
 					throw new Error( `_styles property ${ key } is not supported.` );
 				}
+				if ( val === null ) {
+					return [ key, null ];
+				}
 				return [ key, resolvePropValue( val, propKey ) ];
 			} )
 		);