@elementor/editor-canvas 4.4.0-1143 → 4.4.0-1144

package/dist/index.js

@@ -2464,6 +2464,9 @@ var backgroundGradientOverlayTransformer = createTransformer((value) => {
   if (value.type === "radial") {
     return `radial-gradient(circle at ${value.positions}, ${value.stops})`;
   }
+  if (value.angle === null || value.angle === void 0) {
+    return `linear-gradient(${value.stops})`;
+  }
   return `linear-gradient(${value.angle}deg, ${value.stops})`;
 });
 

package/dist/index.mjs

@@ -2420,6 +2420,9 @@ var backgroundGradientOverlayTransformer = createTransformer((value) => {
   if (value.type === "radial") {
     return `radial-gradient(circle at ${value.positions}, ${value.stops})`;
   }
+  if (value.angle === null || value.angle === void 0) {
+    return `linear-gradient(${value.stops})`;
+  }
   return `linear-gradient(${value.angle}deg, ${value.stops})`;
 });
 

package/package.json

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

package/src/transformers/styles/__tests__/background-gradient-overlay-transformer.test.ts

@@ -0,0 +1,39 @@
+import { backgroundGradientOverlayTransformer } from '../background-gradient-overlay-transformer';
+
+function run( value: { type?: 'linear' | 'radial'; angle?: number | null; stops?: string; positions?: string } ) {
+	return backgroundGradientOverlayTransformer( value, { key: 'background-overlay', signal: undefined } );
+}
+
+describe( 'backgroundGradientOverlayTransformer', () => {
+	it( 'emits the angle when a linear gradient has one', () => {
+		expect( run( { type: 'linear', angle: 180, stops: 'red 0%,blue 100%' } ) ).toBe(
+			'linear-gradient(180deg, red 0%,blue 100%)'
+		);
+	} );
+
+	it( 'omits the angle when it is null so the declaration stays valid', () => {
+		expect(
+			run( {
+				type: 'linear',
+				angle: null,
+				stops: 'rgba(0, 0, 0, 0.35) 0%,rgba(0, 0, 0, 0.35) 100%',
+			} )
+		).toBe( 'linear-gradient(rgba(0, 0, 0, 0.35) 0%,rgba(0, 0, 0, 0.35) 100%)' );
+	} );
+
+	it( 'omits the angle when it is missing', () => {
+		expect( run( { type: 'linear', stops: 'red 0%,blue 100%' } ) ).toBe( 'linear-gradient(red 0%,blue 100%)' );
+	} );
+
+	it( 'keeps an explicit zero angle', () => {
+		expect( run( { type: 'linear', angle: 0, stops: 'red 0%,blue 100%' } ) ).toBe(
+			'linear-gradient(0deg, red 0%,blue 100%)'
+		);
+	} );
+
+	it( 'emits a radial gradient from positions and stops', () => {
+		expect( run( { type: 'radial', positions: 'bottom left', stops: 'red 0%,blue 100%' } ) ).toBe(
+			'radial-gradient(circle at bottom left, red 0%,blue 100%)'
+		);
+	} );
+} );

package/src/transformers/styles/background-gradient-overlay-transformer.ts

@@ -2,9 +2,9 @@ import { createTransformer } from '../create-transformer';
 
 type BackgroundGradientOverlay = {
 	type?: 'linear' | 'radial';
-	angle?: string;
+	angle?: number | null;
 	stops?: string;
-	positions?: string;
+	positions?: string | null;
 };
 
 export const backgroundGradientOverlayTransformer = createTransformer( ( value: BackgroundGradientOverlay ) => {
@@ -12,5 +12,9 @@ export const backgroundGradientOverlayTransformer = createTransformer( ( value:
 		return `radial-gradient(circle at ${ value.positions }, ${ value.stops })`;
 	}
 
+	if ( value.angle === null || value.angle === undefined ) {
+		return `linear-gradient(${ value.stops })`;
+	}
+
 	return `linear-gradient(${ value.angle }deg, ${ value.stops })`;
 } );