@elementor/editor-canvas 4.3.0-984 → 4.3.0-986

package/dist/index.js

@@ -495,8 +495,8 @@ function toGridTracks(computedStyle) {
   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),
@@ -571,6 +571,14 @@ function toPx(value) {
   const parsed = parseFloat(value);
   return Number.isFinite(parsed) ? parsed : 0;
 }
+function resolveGapPx(value, referenceSize) {
+  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);
+}
 
 // src/hooks/use-grid-children.ts
 var import_react3 = require("react");
@@ -2021,6 +2029,46 @@ function clipboardRootsAreAtomicForms(elements) {
   }
   return elements.every((el) => getClipboardElementType(el) === FORM_ELEMENT_TYPE);
 }
+function hasFormAncestor(node) {
+  return node.closest(FORM_ELEMENT_TYPE) !== null;
+}
+function collectFormAncestorErrors(xml) {
+  const errors = [];
+  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;
+}
+function collectSubmitButtonErrors(xml) {
+  const errors = [];
+  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 \u2014 only 1 is allowed.`);
+    }
+  }
+  return errors;
+}
+function collectEmptyMessageErrors(xml) {
+  const errors = [];
+  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;
+}
 
 // src/form-structure/enforce-form-ancestor-commands.ts
 var FORM_FIELDS_OUTSIDE_ALERT = {
@@ -5195,6 +5243,11 @@ var CompositionBuilder = class _CompositionBuilder {
       throw new Error(`Invalid element structure:
 ${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);
@@ -5229,6 +5282,7 @@ ${childTypeErrors.join("\n")}`);
     return {
       configErrors,
       styleErrors,
+      formErrors,
       rootContainers: [...this.rootContainers]
     };
   }
@@ -5539,7 +5593,11 @@ var initBuildCompositionsTool = (reg) => {
         compositionBuilder.setElementConfig(elementConfig);
         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());
         rootContainers.forEach((container) => {
@@ -5554,6 +5612,9 @@ var initBuildCompositionsTool = (reg) => {
         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);
       }

package/dist/index.mjs

@@ -433,8 +433,8 @@ function toGridTracks(computedStyle) {
   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),
@@ -509,6 +509,14 @@ function toPx(value) {
   const parsed = parseFloat(value);
   return Number.isFinite(parsed) ? parsed : 0;
 }
+function resolveGapPx(value, referenceSize) {
+  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);
+}
 
 // src/hooks/use-grid-children.ts
 import { useEffect as useEffect3, useState as useState2 } from "react";
@@ -1975,6 +1983,46 @@ function clipboardRootsAreAtomicForms(elements) {
   }
   return elements.every((el) => getClipboardElementType(el) === FORM_ELEMENT_TYPE);
 }
+function hasFormAncestor(node) {
+  return node.closest(FORM_ELEMENT_TYPE) !== null;
+}
+function collectFormAncestorErrors(xml) {
+  const errors = [];
+  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;
+}
+function collectSubmitButtonErrors(xml) {
+  const errors = [];
+  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 \u2014 only 1 is allowed.`);
+    }
+  }
+  return errors;
+}
+function collectEmptyMessageErrors(xml) {
+  const errors = [];
+  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;
+}
 
 // src/form-structure/enforce-form-ancestor-commands.ts
 var FORM_FIELDS_OUTSIDE_ALERT = {
@@ -5180,6 +5228,11 @@ var CompositionBuilder = class _CompositionBuilder {
       throw new Error(`Invalid element structure:
 ${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);
@@ -5214,6 +5267,7 @@ ${childTypeErrors.join("\n")}`);
     return {
       configErrors,
       styleErrors,
+      formErrors,
       rootContainers: [...this.rootContainers]
     };
   }
@@ -5524,7 +5578,11 @@ var initBuildCompositionsTool = (reg) => {
         compositionBuilder.setElementConfig(elementConfig);
         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());
         rootContainers.forEach((container) => {
@@ -5539,6 +5597,9 @@ var initBuildCompositionsTool = (reg) => {
         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);
       }

package/package.json

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

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/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/utils.ts

@@ -115,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/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/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/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 );
+}