@elementor/editor-canvas 4.2.0-946 → 4.2.0-beta2

package/package.json

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

package/src/__tests__/parse-xml.ts

@@ -0,0 +1,2 @@
+export const parseXml = ( xml: string ): Document =>
+	new DOMParser().parseFromString( `<root>${ xml }</root>`, 'application/xml' );

package/src/components/__tests__/elements-overlays.test.tsx

@@ -19,6 +19,10 @@ jest.mock( '@elementor/editor-v1-adapters', () => ( {
 	isExperimentActive: jest.fn(),
 } ) );
 
+function mockGridComputedStyle( element: HTMLElement ) {
+	element.computedStyleMap = jest.fn().mockReturnValue( new Map( [ [ 'display', { toString: () => 'grid' } ] ] ) );
+}
+
 describe( '<ElementsOverlays />', () => {
 	beforeEach( () => {
 		const documentEl = createDOMElement( { tag: 'div' } );
@@ -26,6 +30,9 @@ describe( '<ElementsOverlays />', () => {
 		const atomic1El = createDOMElement( { tag: 'div', attrs: { 'data-atomic': '', id: '10' } } );
 		const atomic2El = createDOMElement( { tag: 'div', attrs: { 'data-atomic': '', id: '20' } } );
 
+		mockGridComputedStyle( atomic1El );
+		mockGridComputedStyle( atomic2El );
+
 		jest.mocked( useEditMode ).mockReturnValue( 'edit' );
 		jest.mocked( useIsRouteActive ).mockReturnValue( false );
 		jest.mocked( isExperimentActive ).mockReturnValue( true );

package/src/components/elements-overlays.tsx

@@ -8,9 +8,13 @@ import {
 } from '@elementor/editor-v1-adapters';
 
 import type { ElementOverlayConfig } from '../types/element-overlay';
-import { GridOutlineOverlay } from './grid-outline';
+import { GridEmptyCellPositioner, GridOutlineOverlay } from './grid-outline';
 import { OutlineOverlay } from './outline-overlay';
 
+const hasGridStyleDisplay = ( element: HTMLElement ): boolean => {
+	return element.computedStyleMap().get( 'display' )?.toString() === 'grid';
+};
+
 const ELEMENTS_DATA_ATTR = 'atomic';
 
 const overlayRegistry: ElementOverlayConfig[] = [
@@ -18,9 +22,13 @@ const overlayRegistry: ElementOverlayConfig[] = [
 		component: OutlineOverlay,
 		shouldRender: () => true,
 	},
+	{
+		component: GridEmptyCellPositioner,
+		shouldRender: ( { element } ) => hasGridStyleDisplay( element ),
+	},
 	{
 		component: GridOutlineOverlay,
-		shouldRender: ( { element, isSelected } ) => isSelected && element.dataset.eType === 'e-grid',
+		shouldRender: ( { isSelected, element } ) => isSelected && hasGridStyleDisplay( element ),
 	},
 ];
 
@@ -37,18 +45,19 @@ export function ElementsOverlays() {
 		return null;
 	}
 
-	return elements.map( ( { id, domElement, isGlobal } ) => {
+	return elements.map( ( { id, domElement, isGlobal, widgetType } ) => {
 		const isSelected = selected.element?.id === id;
 
 		return overlayRegistry.map(
 			( { shouldRender, component: Overlay }, index ) =>
-				shouldRender( { id, element: domElement, isSelected } ) && (
+				shouldRender( { id, element: domElement, isSelected, widgetType } ) && (
 					<Overlay
 						key={ `${ id }-${ index }` }
 						id={ id }
 						element={ domElement }
 						isSelected={ isSelected }
 						isGlobal={ isGlobal }
+						widgetType={ widgetType }
 					/>
 				)
 		);
@@ -59,18 +68,20 @@ type ElementData = {
 	id: string;
 	domElement: HTMLElement;
 	isGlobal: boolean;
+	widgetType: string | undefined;
 };
 
-function useElementsDom() {
+function useElementsDom(): ElementData[] {
 	return useListenTo(
 		[ windowEvent( 'elementor/editor/element-rendered' ), windowEvent( 'elementor/editor/element-destroyed' ) ],
-		() => {
+		(): ElementData[] => {
 			return getElements()
 				.filter( ( el ) => isV4Element( el.view?.el?.dataset ) )
 				.map( ( element ) => ( {
 					id: element.id,
 					domElement: element.view?.getDomElement?.()?.get?.( 0 ),
 					isGlobal: element.model.get( 'isGlobal' ) ?? false,
+					widgetType: element.model.get( 'widgetType' ),
 				} ) )
 				.filter( ( item ): item is ElementData => !! item.domElement );
 		}

package/src/components/grid-outline/__tests__/grid-outline-overlay.test.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { createDOMElement, renderWithTheme } from 'test-utils';
-import { useSelectedElementSettings } from '@elementor/editor-elements';
+import { useElementEditorSettings } from '@elementor/editor-elements';
 import { screen } from '@testing-library/react';
 
 import { useElementRect } from '../../../hooks/use-element-rect';
@@ -34,12 +34,10 @@ const EMPTY_TRACKS: GridTracks = {
 	borderColor: '',
 };
 
-function mockGridOutlineSetting( value: { $$type: 'boolean'; value: boolean } | null ) {
-	jest.mocked( useSelectedElementSettings ).mockReturnValue( {
-		element: { id: ID, type: 'e-grid' },
-		elementType: {} as never,
-		settings: { grid_outline: value },
-	} );
+function mockGridOutlineSetting( gridOutline: boolean | undefined ) {
+	jest.mocked( useElementEditorSettings ).mockReturnValue(
+		gridOutline === undefined ? {} : { grid_outline: gridOutline }
+	);
 }
 
 function mockFloating() {
@@ -87,7 +85,7 @@ describe( '<GridOutlineOverlay />', () => {
 	} );
 
 	it( 'renders the outline svg with the element id when the setting is enabled', () => {
-		mockGridOutlineSetting( { $$type: 'boolean', value: true } );
+		mockGridOutlineSetting( true );
 
 		renderOverlay();
 
@@ -97,8 +95,8 @@ describe( '<GridOutlineOverlay />', () => {
 		expect( overlay.querySelector( 'svg' ) ).toBeInTheDocument();
 	} );
 
-	it( 'treats a null setting as default-on and renders the outline', () => {
-		mockGridOutlineSetting( null );
+	it( 'treats an unset setting as default-on and renders the outline', () => {
+		mockGridOutlineSetting( undefined );
 
 		renderOverlay();
 
@@ -106,7 +104,7 @@ describe( '<GridOutlineOverlay />', () => {
 	} );
 
 	it( 'renders nothing when the setting is explicitly disabled', () => {
-		mockGridOutlineSetting( { $$type: 'boolean', value: false } );
+		mockGridOutlineSetting( false );
 
 		renderOverlay();
 
@@ -114,7 +112,7 @@ describe( '<GridOutlineOverlay />', () => {
 	} );
 
 	it( 'renders nothing while tracks have not resolved yet', () => {
-		mockGridOutlineSetting( { $$type: 'boolean', value: true } );
+		mockGridOutlineSetting( true );
 		jest.mocked( useGridTracks ).mockReturnValue( EMPTY_TRACKS );
 
 		renderOverlay();
@@ -123,7 +121,7 @@ describe( '<GridOutlineOverlay />', () => {
 	} );
 
 	it( 'renders one rect per cell when the grid has a gap', () => {
-		mockGridOutlineSetting( null );
+		mockGridOutlineSetting( undefined );
 		jest.mocked( useGridTracks ).mockReturnValue( {
 			...NON_EMPTY_TRACKS,
 			columns: [ 100, 100, 100 ],
@@ -140,7 +138,7 @@ describe( '<GridOutlineOverlay />', () => {
 	} );
 
 	it( 'renders boundary lines when the grid has no gap', () => {
-		mockGridOutlineSetting( null );
+		mockGridOutlineSetting( undefined );
 		jest.mocked( useGridTracks ).mockReturnValue( {
 			...NON_EMPTY_TRACKS,
 			columns: [ 100, 100, 100 ],
@@ -157,7 +155,7 @@ describe( '<GridOutlineOverlay />', () => {
 	} );
 
 	it( 'mounts inside the canvas wrapper portal', () => {
-		mockGridOutlineSetting( null );
+		mockGridOutlineSetting( undefined );
 
 		renderOverlay();
 

package/src/components/grid-outline/grid-empty-cell-positioner.tsx

@@ -0,0 +1,46 @@
+import { useEffect } from 'react';
+
+import { useElementRect } from '../../hooks/use-element-rect';
+import { useGridTracks } from '../../hooks/use-grid-tracks';
+import type { ElementOverlayProps } from '../../types/element-overlay';
+import { findFirstEmptyCell } from '../../utils/find-first-empty-cell';
+
+const CSS_VAR_ROW = '--e-grid-empty-cell-row';
+const CSS_VAR_COL = '--e-grid-empty-cell-col';
+const CSS_VAR_VISIBILITY = '--e-grid-empty-cell-visibility';
+
+const clearGridEmptyCellStyles = ( target: HTMLElement ): void => {
+	target.style.removeProperty( CSS_VAR_ROW );
+	target.style.removeProperty( CSS_VAR_COL );
+	target.style.removeProperty( CSS_VAR_VISIBILITY );
+};
+
+export const GridEmptyCellPositioner = ( { element }: ElementOverlayProps ): null => {
+	const rect = useElementRect( element );
+	const tracks = useGridTracks( element, rect );
+
+	useEffect( () => {
+		if ( ! element ) {
+			return;
+		}
+
+		const firstEmpty = findFirstEmptyCell( element, tracks.columns.length, tracks.rows.length );
+
+		if ( ! firstEmpty ) {
+			element.style.removeProperty( CSS_VAR_ROW );
+			element.style.removeProperty( CSS_VAR_COL );
+			element.style.setProperty( CSS_VAR_VISIBILITY, 'hidden' );
+			return () => clearGridEmptyCellStyles( element );
+		}
+
+		element.style.setProperty( CSS_VAR_ROW, String( firstEmpty.row + 1 ) );
+		element.style.setProperty( CSS_VAR_COL, String( firstEmpty.col + 1 ) );
+		element.style.setProperty( CSS_VAR_VISIBILITY, 'visible' );
+
+		return () => {
+			clearGridEmptyCellStyles( element );
+		};
+	}, [ element, tracks ] );
+
+	return null;
+};

package/src/components/grid-outline/grid-outline-overlay.tsx

@@ -1,6 +1,5 @@
 import * as React from 'react';
-import { useSelectedElementSettings } from '@elementor/editor-elements';
-import { booleanPropTypeUtil } from '@elementor/editor-props';
+import { useElementEditorSettings } from '@elementor/editor-elements';
 import { Box } from '@elementor/ui';
 import { FloatingPortal } from '@floating-ui/react';
 
@@ -12,8 +11,8 @@ import { CANVAS_WRAPPER_ID } from '../outline-overlay';
 import { GridOutline } from './grid-outline';
 
 export const GridOutlineOverlay = ( { element, id, isSelected }: ElementOverlayProps ): React.ReactElement | null => {
-	const { settings } = useSelectedElementSettings();
-	const enabled = booleanPropTypeUtil.extract( settings?.grid_outline );
+	const settings = useElementEditorSettings( id );
+	const enabled = settings?.grid_outline;
 	const rect = useElementRect( element );
 	const tracks = useGridTracks( element, rect );
 	const { floating } = useFloatingOnElement( { element, isSelected } );

package/src/components/grid-outline/grid-outline.tsx

@@ -54,6 +54,14 @@ const renderLines = ( tracks: GridTracks, width: number, height: number ) => {
 	];
 };
 
+const isDragActiveFromDom = ( element: HTMLElement | null ): boolean => {
+	return Boolean(
+		element?.querySelector(
+			'.e-dragging-over, .elementor-dragging-on-child, .elementor-draggable-over, .elementor-widget-placeholder, .elementor-sortable-placeholder'
+		)
+	);
+};
+
 export function GridOutline( { element, tracks, width, height }: Props ) {
 	const cells = useMemo( () => computeCellRects( tracks, width, height ), [ tracks, width, height ] );
 	const hasGap = tracks.columnGap > 0 || tracks.rowGap > 0;
@@ -76,7 +84,9 @@ export function GridOutline( { element, tracks, width, height }: Props ) {
 			>
 				{ hasGap ? renderCells( cells, tracks.borderColor ) : renderLines( tracks, width, height ) }
 			</svg>
-			{ emptyCellRect && <FirstEmptyCell rect={ emptyCellRect } color={ tracks.borderColor } /> }
+			{ emptyCellRect && ! isDragActiveFromDom( element ) && (
+				<FirstEmptyCell rect={ emptyCellRect } color={ tracks.borderColor } />
+			) }
 		</>
 	);
 }

package/src/components/grid-outline/index.ts

@@ -1 +1,2 @@
+export { GridEmptyCellPositioner } from './grid-empty-cell-positioner';
 export { GridOutlineOverlay } from './grid-outline-overlay';

package/src/components/outline-overlay.tsx

@@ -6,6 +6,7 @@ import { useBindReactPropsToElement } from '../hooks/use-bind-react-props-to-ele
 import { useFloatingOnElement } from '../hooks/use-floating-on-element';
 import { useHasOverlapping } from '../hooks/use-has-overlapping';
 import type { ElementOverlayProps } from '../types/element-overlay';
+import { shouldUseSmallerOutlineOffset } from '../utils/outline-offset-utils';
 
 export const CANVAS_WRAPPER_ID = 'elementor-preview-responsive-wrapper';
 
@@ -25,13 +26,19 @@ const OverlayBox = styled( Box, {
 	} )
 );
 
-export const OutlineOverlay = ( { element, isSelected, id, isGlobal = false }: Props ): React.ReactElement | false => {
+export const OutlineOverlay = ( {
+	element,
+	isSelected,
+	id,
+	isGlobal = false,
+	widgetType,
+}: Props ): React.ReactElement | false => {
 	const { context, floating, isVisible } = useFloatingOnElement( { element, isSelected } );
 	const { getFloatingProps, getReferenceProps } = useInteractions( [ useHover( context ) ] );
 	const hasOverlapping = useHasOverlapping();
 
 	useBindReactPropsToElement( element, getReferenceProps );
-	const isSmallerOffset = element.offsetHeight <= 1;
+	const isSmallerOffset = shouldUseSmallerOutlineOffset( element, widgetType );
 
 	return (
 		isVisible &&

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

@@ -11,6 +11,11 @@ import {
 } from '@elementor/editor-elements';
 import { type z } from '@elementor/schema';
 
+import {
+	collectEmptyMessageErrors,
+	collectFormAncestorErrors,
+	collectSubmitButtonErrors,
+} from '../form-structure/utils';
 import { doUpdateElementProperty } from '../mcp/utils/do-update-element-property';
 import { mergeCustomCssText } from '../mcp/utils/merge-custom-css';
 import { RequiredChildrenEnforcer } from './utils/required-children-enforcer';
@@ -294,6 +299,12 @@ export class CompositionBuilder {
 			throw new Error( `Invalid element structure:\n${ childTypeErrors.join( '\n' ) }` );
 		}
 
+		const formErrors = [
+			...collectFormAncestorErrors( this.xml ),
+			...collectSubmitButtonErrors( this.xml ),
+			...collectEmptyMessageErrors( this.xml ),
+		];
+
 		const children = Array.from( this.xml.children );
 		for ( const childNode of children ) {
 			const modelTree = this.buildModelTree( childNode, widgetsCache );
@@ -332,6 +343,7 @@ export class CompositionBuilder {
 		return {
 			configErrors,
 			styleErrors,
+			formErrors,
 			rootContainers: [ ...this.rootContainers ],
 		};
 	}

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;