@elementor/editor-canvas 4.2.0-beta2 → 4.2.3

package/dist/index.js

@@ -522,8 +522,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),
@@ -598,6 +598,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");
@@ -2782,13 +2790,13 @@ function initStyleTransformers() {
     "layout-direction",
     createMultiPropsTransformer(["row", "column"], ({ propKey, key }) => `${key}-${propKey}`)
   ).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/dist/index.mjs

@@ -460,8 +460,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),
@@ -536,6 +536,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";
@@ -2736,13 +2744,13 @@ function initStyleTransformers() {
     "layout-direction",
     createMultiPropsTransformer(["row", "column"], ({ propKey, key }) => `${key}-${propKey}`)
   ).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/package.json

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

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