@elementor/editor-canvas 4.2.0-beta1 → 4.2.3

package/src/form-structure/__tests__/form-structure-utils.test.ts

@@ -1,7 +1,11 @@
 import type { V1Element } from '@elementor/editor-elements';
 
+import { parseXml } from '../../__tests__/parse-xml';
 import {
 	clipboardRootsAreAtomicForms,
+	collectEmptyMessageErrors,
+	collectFormAncestorErrors,
+	collectSubmitButtonErrors,
 	FORM_ELEMENT_TYPE,
 	getClipboardElementType,
 	movedContainersIncludeAtomicFormRoot,
@@ -67,4 +71,218 @@ describe( 'form-structure utils', () => {
 			expect( clipboardRootsAreAtomicForms( [] ) ).toBe( false );
 		} );
 	} );
+
+	describe( 'collectFormAncestorErrors', () => {
+		it( 'returns no errors when form field is a direct child of e-form', () => {
+			const xml = parseXml( `
+				<e-form>
+					<e-form-input />
+				</e-form>
+			` );
+			expect( collectFormAncestorErrors( xml ) ).toHaveLength( 0 );
+		} );
+		it( 'returns no errors when form field is a deep descendant of e-form (valid)', () => {
+			const xml = parseXml( `
+				<e-form>
+					<e-flexbox>
+						<e-form-input />
+					</e-flexbox>
+				</e-form>
+			` );
+			expect( collectFormAncestorErrors( xml ) ).toHaveLength( 0 );
+		} );
+		it( 'returns no errors when e-form wraps multiple containers with fields (valid)', () => {
+			const xml = parseXml( `
+				<e-flexbox>
+					<e-form>
+						<e-form-input />
+					</e-form>
+				</e-flexbox>
+			` );
+			expect( collectFormAncestorErrors( xml ) ).toHaveLength( 0 );
+		} );
+		it( 'returns an error when form field has no e-form ancestor (invalid)', () => {
+			const xml = parseXml( `
+				<e-flexbox>
+					<e-flexbox>
+						<e-form-input />
+					</e-flexbox>
+				</e-flexbox>
+			` );
+			const errors = collectFormAncestorErrors( xml );
+			expect( errors ).toHaveLength( 1 );
+			expect( errors[ 0 ] ).toContain( 'e-form-input' );
+			expect( errors[ 0 ] ).toContain( 'e-form' );
+		} );
+		it( 'returns an error for each orphaned form field', () => {
+			const xml = parseXml( `
+				<e-flexbox>
+					<e-form-input />
+					<e-form-label />
+				</e-flexbox>
+			` );
+			expect( collectFormAncestorErrors( xml ) ).toHaveLength( 2 );
+		} );
+		it( 'includes configuration-id in the error message when present', () => {
+			const xml = parseXml( `
+				<e-flexbox>
+					<e-form-input configuration-id="my-input" />
+				</e-flexbox>
+			` );
+			const errors = collectFormAncestorErrors( xml );
+			expect( errors[ 0 ] ).toContain( 'configuration-id="my-input"' );
+		} );
+		it( 'returns no errors when there are no form fields at all', () => {
+			const xml = parseXml( `
+				<e-flexbox>
+					<e-heading />
+				</e-flexbox>
+			` );
+			expect( collectFormAncestorErrors( xml ) ).toHaveLength( 0 );
+		} );
+	} );
+
+	describe( 'collectSubmitButtonErrors', () => {
+		it( 'returns no errors when e-form has exactly one submit button', () => {
+			const xml = parseXml( `
+				<e-form>
+					<e-form-input />
+					<e-form-submit-button />
+				</e-form>
+			` );
+			expect( collectSubmitButtonErrors( xml ) ).toHaveLength( 0 );
+		} );
+
+		it( 'returns no errors when submit button is nested inside a container within e-form', () => {
+			const xml = parseXml( `
+				<e-form>
+					<e-flexbox>
+						<e-form-submit-button />
+					</e-flexbox>
+				</e-form>
+			` );
+			expect( collectSubmitButtonErrors( xml ) ).toHaveLength( 0 );
+		} );
+
+		it( 'returns an error when e-form has no submit button', () => {
+			const xml = parseXml( `
+				<e-form>
+					<e-form-input />
+				</e-form>
+			` );
+			const errors = collectSubmitButtonErrors( xml );
+			expect( errors ).toHaveLength( 1 );
+			expect( errors[ 0 ] ).toContain( 'e-form-submit-button' );
+		} );
+
+		it( 'returns an error when e-form has more than one submit button', () => {
+			const xml = parseXml( `
+				<e-form>
+					<e-form-submit-button />
+					<e-form-submit-button />
+				</e-form>
+			` );
+			const errors = collectSubmitButtonErrors( xml );
+			expect( errors ).toHaveLength( 1 );
+			expect( errors[ 0 ] ).toContain( '2' );
+		} );
+
+		it( 'returns one error per e-form that is missing a submit button', () => {
+			const xml = parseXml( `
+				<e-form>
+					<e-form-input />
+				</e-form>
+				<e-form>
+					<e-form-input />
+				</e-form>
+			` );
+			expect( collectSubmitButtonErrors( xml ) ).toHaveLength( 2 );
+		} );
+
+		it( 'returns no errors when there are no e-form elements', () => {
+			const xml = parseXml( `
+				<e-flexbox>
+					<e-heading />
+				</e-flexbox>
+			` );
+			expect( collectSubmitButtonErrors( xml ) ).toHaveLength( 0 );
+		} );
+	} );
+
+	describe( 'collectEmptyMessageErrors', () => {
+		it( 'returns no errors when success message has children', () => {
+			const xml = parseXml( `
+				<e-form>
+					<e-form-success-message>
+						<e-atomic-paragraph />
+					</e-form-success-message>
+				</e-form>
+			` );
+			expect( collectEmptyMessageErrors( xml ) ).toHaveLength( 0 );
+		} );
+
+		it( 'returns no errors when error message has children', () => {
+			const xml = parseXml( `
+				<e-form>
+					<e-form-error-message>
+						<e-atomic-paragraph />
+					</e-form-error-message>
+				</e-form>
+			` );
+			expect( collectEmptyMessageErrors( xml ) ).toHaveLength( 0 );
+		} );
+
+		it( 'returns an error when success message is empty', () => {
+			const xml = parseXml( `
+				<e-form>
+					<e-form-success-message />
+				</e-form>
+			` );
+			const errors = collectEmptyMessageErrors( xml );
+			expect( errors ).toHaveLength( 1 );
+			expect( errors[ 0 ] ).toContain( 'e-form-success-message' );
+		} );
+
+		it( 'returns an error when error message is empty', () => {
+			const xml = parseXml( `
+				<e-form>
+					<e-form-error-message />
+				</e-form>
+			` );
+			const errors = collectEmptyMessageErrors( xml );
+			expect( errors ).toHaveLength( 1 );
+			expect( errors[ 0 ] ).toContain( 'e-form-error-message' );
+		} );
+
+		it( 'returns two errors when both success and error messages are empty', () => {
+			const xml = parseXml( `
+				<e-form>
+					<e-form-success-message />
+					<e-form-error-message />
+				</e-form>
+			` );
+			expect( collectEmptyMessageErrors( xml ) ).toHaveLength( 2 );
+		} );
+
+		it( 'returns no errors when there are no message elements', () => {
+			const xml = parseXml( `
+				<e-form>
+					<e-form-input />
+					<e-form-submit-button />
+				</e-form>
+			` );
+			expect( collectEmptyMessageErrors( xml ) ).toHaveLength( 0 );
+		} );
+
+		it( 'returns no errors when message element is outside e-form but has children', () => {
+			const xml = parseXml( `
+				<e-flexbox>
+					<e-form-success-message>
+						<e-atomic-paragraph />
+					</e-form-success-message>
+				</e-flexbox>
+			` );
+			expect( collectEmptyMessageErrors( xml ) ).toHaveLength( 0 );
+		} );
+	} );
 } );

package/src/form-structure/enforce-form-ancestor-commands.ts

@@ -5,9 +5,11 @@ import { __ } from '@wordpress/i18n';
 import {
 	clipboardRootsAreAtomicForms,
 	type CreateArgs,
+	FORM_ELEMENT_TYPE,
 	FORM_FIELD_ELEMENT_TYPES,
 	getArgsElementType,
 	hasClipboardElementTypes,
+	hasElementType,
 	hasElementTypes,
 	isWithinForm,
 	type MoveArgs,
@@ -46,7 +48,9 @@ function blockFormFieldCreate( args: CreateArgs ): boolean {
 		return false;
 	}
 
-	if ( ! isWithinForm( args.container ) ) {
+	const containers = args.containers ?? [ args.container ];
+
+	if ( containers.some( ( container ) => ! isWithinForm( container ) ) ) {
 		handleBlockedFormField();
 
 		return true;
@@ -58,11 +62,14 @@ function blockFormFieldCreate( args: CreateArgs ): boolean {
 function blockFormFieldMove( args: MoveArgs ): boolean {
 	const { containers = [ args.container ], target } = args;
 
-	const hasFormFieldElement = containers.some( ( container ) =>
-		container ? hasElementTypes( container, FORM_FIELD_ELEMENT_TYPES ) : false
+	// Form fields must not be outside a form, but can be moved while inside a form or the container IS a form [ED-23858]
+	const hasLooseFormFields = containers.some( ( container ) =>
+		container
+			? ! hasElementType( container, FORM_ELEMENT_TYPE ) && hasElementTypes( container, FORM_FIELD_ELEMENT_TYPES )
+			: false
 	);
 
-	if ( hasFormFieldElement && ! isWithinForm( target ) && ! movedContainersIncludeAtomicFormRoot( containers ) ) {
+	if ( hasLooseFormFields && ! isWithinForm( target ) && ! movedContainersIncludeAtomicFormRoot( containers ) ) {
 		handleBlockedFormField();
 
 		return true;

package/src/form-structure/utils.ts

@@ -7,6 +7,7 @@ type Model = {
 
 export type CreateArgs = {
 	container?: V1Element;
+	containers?: V1Element[];
 	model?: Model;
 };
 
@@ -114,3 +115,49 @@ export function clipboardRootsAreAtomicForms( elements: ClipboardElement[] ): bo
 
 	return elements.every( ( el ) => getClipboardElementType( el ) === FORM_ELEMENT_TYPE );
 }
+
+export function hasFormAncestor( node: Element ): boolean {
+	return node.closest( FORM_ELEMENT_TYPE ) !== null;
+}
+
+export function collectFormAncestorErrors( xml: Document ): string[] {
+	const errors: string[] = [];
+	for ( const node of xml.querySelectorAll( '*' ) ) {
+		if ( ! FORM_FIELD_ELEMENT_TYPES.has( node.tagName.toLowerCase() ) ) {
+			continue;
+		}
+		if ( hasFormAncestor( node ) ) {
+			continue;
+		}
+		const id = node.getAttribute( 'configuration-id' );
+		errors.push(
+			`<${ node.tagName }${
+				id ? ` configuration-id="${ id }"` : ''
+			}> must be nested inside <e-form> (any ancestor depth is allowed).`
+		);
+	}
+	return errors;
+}
+
+export function collectSubmitButtonErrors( xml: Document ): string[] {
+	const errors: string[] = [];
+	for ( const form of xml.querySelectorAll( 'e-form' ) ) {
+		const submitButtons = form.querySelectorAll( 'e-form-submit-button' );
+		if ( submitButtons.length === 0 ) {
+			errors.push( `<e-form> has no <e-form-submit-button>.` );
+		} else if ( submitButtons.length > 1 ) {
+			errors.push( `<e-form> has ${ submitButtons.length } submit buttons — only 1 is allowed.` );
+		}
+	}
+	return errors;
+}
+
+export function collectEmptyMessageErrors( xml: Document ): string[] {
+	const errors: string[] = [];
+	for ( const node of xml.querySelectorAll( 'e-form-success-message, e-form-error-message' ) ) {
+		if ( node.children.length === 0 ) {
+			errors.push( `<${ node.tagName }> must have at least one child element (e.g. <e-atomic-paragraph>).` );
+		}
+	}
+	return errors;
+}

package/src/init-style-transformers.ts

@@ -80,14 +80,14 @@ export function initStyleTransformers() {
 		)
 		.register( 'flex', flexTransformer )
 		.register(
-			'border-width',
+			'border-width-v2',
 			createMultiPropsTransformer(
 				[ 'block-start', 'block-end', 'inline-start', 'inline-end' ],
 				( { key } ) => `border-${ key }-width`
 			)
 		)
 		.register(
-			'border-radius',
+			'border-radius-v2',
 			createMultiPropsTransformer(
 				[ 'start-start', 'start-end', 'end-start', 'end-end' ],
 				( { key } ) => `border-${ key }-radius`

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

@@ -84,8 +84,11 @@ export const initBuildCompositionsTool = ( reg: MCPRegistryEntry ) => {
 				compositionBuilder.setStylesConfig( stylesConfig );
 				compositionBuilder.setCustomCSS( customCSS );
 
-				const { configErrors, rootContainers: generatedRootContainers } =
-					await compositionBuilder.build( targetContainer );
+				const {
+					configErrors,
+					formErrors,
+					rootContainers: generatedRootContainers,
+				} = await compositionBuilder.build( targetContainer );
 
 				rootContainers.push( ...generatedRootContainers );
 				generatedXML = new XMLSerializer().serializeToString( compositionBuilder.getXML() );
@@ -105,6 +108,10 @@ export const initBuildCompositionsTool = ( reg: MCPRegistryEntry ) => {
 				if ( configErrors.length ) {
 					errors.push( ...configErrors.map( ( msg ) => new Error( msg ) ) );
 				}
+
+				if ( formErrors.length ) {
+					errors.push( ...formErrors.map( ( msg ) => new Error( msg ) ) );
+				}
 			} catch ( error ) {
 				errors.push( error as Error );
 			}

package/src/types/element-overlay.ts

@@ -5,12 +5,14 @@ export type ElementOverlayProps = {
 	id: string;
 	isSelected: boolean;
 	isGlobal?: boolean;
+	widgetType?: string;
 };
 
 export type OverlayFilterArgs = {
 	id: string;
 	element: HTMLElement;
 	isSelected: boolean;
+	widgetType?: string;
 };
 
 export type ElementOverlayConfig = {

package/src/utils/__tests__/grid-outline-utils.test.ts

@@ -3,6 +3,7 @@ import {
 	computeCellRects,
 	computeGridLines,
 	parseTrackList,
+	resolveGapPx,
 	snapToHalfPixel,
 	toGridTracks,
 	toPx,
@@ -215,11 +216,29 @@ describe( 'toPx', () => {
 	} );
 } );
 
+describe( 'resolveGapPx', () => {
+	it( 'resolves a percentage gap against the reference size', () => {
+		expect( resolveGapPx( '20%', '1000px' ) ).toBe( 200 );
+		expect( resolveGapPx( '10%', '500px' ) ).toBe( 50 );
+	} );
+
+	it( 'falls back to px parsing for non-percentage gaps', () => {
+		expect( resolveGapPx( '16px', '1000px' ) ).toBe( 16 );
+		expect( resolveGapPx( 'normal', '1000px' ) ).toBe( 0 );
+	} );
+
+	it( 'returns 0 when the reference size is not a finite number', () => {
+		expect( resolveGapPx( '20%', 'auto' ) ).toBe( 0 );
+	} );
+} );
+
 type ComputedStyleParts = {
 	gridTemplateColumns: string;
 	gridTemplateRows: string;
 	columnGap: string;
 	rowGap: string;
+	width: string;
+	height: string;
 	paddingTop: string;
 	paddingRight: string;
 	paddingBottom: string;
@@ -233,6 +252,8 @@ function mockComputedStyle( parts: Partial< ComputedStyleParts > = {} ): CSSStyl
 		gridTemplateRows: 'none',
 		columnGap: 'normal',
 		rowGap: 'normal',
+		width: '1000px',
+		height: '500px',
 		paddingTop: '0px',
 		paddingRight: '0px',
 		paddingBottom: '0px',
@@ -246,6 +267,8 @@ function mockComputedStyle( parts: Partial< ComputedStyleParts > = {} ): CSSStyl
 		gridTemplateRows: resolved.gridTemplateRows,
 		columnGap: resolved.columnGap,
 		rowGap: resolved.rowGap,
+		width: resolved.width,
+		height: resolved.height,
 		paddingTop: resolved.paddingTop,
 		paddingRight: resolved.paddingRight,
 		paddingBottom: resolved.paddingBottom,
@@ -286,6 +309,22 @@ describe( 'toGridTracks', () => {
 		expect( tracks.rows ).toEqual( [] );
 	} );
 
+	it( 'resolves percentage gaps against the content-box width and height', () => {
+		const tracks = toGridTracks(
+			mockComputedStyle( {
+				gridTemplateColumns: '100px 100px',
+				gridTemplateRows: '80px 80px',
+				columnGap: '20%',
+				rowGap: '10%',
+				width: '1000px',
+				height: '500px',
+			} )
+		);
+
+		expect( tracks.columnGap ).toBe( 200 );
+		expect( tracks.rowGap ).toBe( 50 );
+	} );
+
 	it( 'reports gap as 0 when computed style returns "normal"', () => {
 		const tracks = toGridTracks(
 			mockComputedStyle( { gridTemplateColumns: '100px 100px', columnGap: 'normal', rowGap: 'normal' } )

package/src/utils/__tests__/outline-offset-utils.test.ts

@@ -0,0 +1,39 @@
+import { shouldUseSmallerOutlineOffset, THIN_ELEMENT_MAX_HEIGHT_PX } from '../outline-offset-utils';
+
+describe( 'shouldUseSmallerOutlineOffset', () => {
+	it( 'returns true for thin elements like dividers', () => {
+		// Arrange.
+		const element = document.createElement( 'hr' );
+		Object.defineProperty( element, 'offsetHeight', { value: THIN_ELEMENT_MAX_HEIGHT_PX } );
+
+		// Act.
+		const result = shouldUseSmallerOutlineOffset( element );
+
+		// Assert.
+		expect( result ).toBe( true );
+	} );
+
+	it( 'returns true for atomic form input widgets', () => {
+		// Arrange.
+		const element = document.createElement( 'input' );
+		Object.defineProperty( element, 'offsetHeight', { value: 36 } );
+
+		// Act.
+		const result = shouldUseSmallerOutlineOffset( element, 'e-form-input' );
+
+		// Assert.
+		expect( result ).toBe( true );
+	} );
+
+	it( 'returns false for other atomic widgets', () => {
+		// Arrange.
+		const element = document.createElement( 'div' );
+		Object.defineProperty( element, 'offsetHeight', { value: 100 } );
+
+		// Act.
+		const result = shouldUseSmallerOutlineOffset( element, 'e-heading' );
+
+		// Assert.
+		expect( result ).toBe( false );
+	} );
+} );

package/src/utils/grid-outline-utils.ts

@@ -28,8 +28,8 @@ export function toGridTracks( computedStyle: CSSStyleDeclaration ): GridTracks {
 	return {
 		columns: parseTrackList( computedStyle.gridTemplateColumns ),
 		rows: parseTrackList( computedStyle.gridTemplateRows ),
-		columnGap: toPx( computedStyle.columnGap ),
-		rowGap: toPx( computedStyle.rowGap ),
+		columnGap: resolveGapPx( computedStyle.columnGap, computedStyle.width ),
+		rowGap: resolveGapPx( computedStyle.rowGap, computedStyle.height ),
 		padding: {
 			top: toPx( computedStyle.paddingTop ),
 			right: toPx( computedStyle.paddingRight ),
@@ -142,3 +142,14 @@ export function toPx( value: string ): number {
 
 	return Number.isFinite( parsed ) ? parsed : 0;
 }
+
+export function resolveGapPx( value: string, referenceSize: string ): number {
+	if ( value.trim().endsWith( '%' ) ) {
+		const percent = parseFloat( value );
+		const reference = parseFloat( referenceSize );
+
+		return Number.isFinite( percent ) && Number.isFinite( reference ) ? ( percent / 100 ) * reference : 0;
+	}
+
+	return toPx( value );
+}

package/src/utils/outline-offset-utils.ts

@@ -0,0 +1,11 @@
+export const THIN_ELEMENT_MAX_HEIGHT_PX = 1;
+
+export const SMALLER_OUTLINE_OFFSET_WIDGET_TYPES = new Set( [ 'e-form-input' ] );
+
+export function shouldUseSmallerOutlineOffset( element: HTMLElement, widgetType?: string ): boolean {
+	if ( element.offsetHeight <= THIN_ELEMENT_MAX_HEIGHT_PX ) {
+		return true;
+	}
+
+	return widgetType !== undefined && SMALLER_OUTLINE_OFFSET_WIDGET_TYPES.has( widgetType );
+}