@elementor/editor-canvas 0.20.0 → 0.21.0

package/src/__tests__/styles-prop-resolver.test.ts

@@ -168,7 +168,7 @@ describe( 'styles prop resolver', () => {
 				} ),
 			},
 			expected: {
-				background: '#ee00ff',
+				'background-color': '#ee00ff',
 			},
 		},
 		{
@@ -189,7 +189,7 @@ describe( 'styles prop resolver', () => {
 				} ),
 			},
 			expected: {
-				background: 'url(https://localhost.test/test-image.png)',
+				'background-image': 'url(https://localhost.test/test-image.png)',
 			},
 		},
 		{
@@ -250,11 +250,13 @@ describe( 'styles prop resolver', () => {
 				} ),
 			},
 			expected: {
-				background:
-					'linear-gradient(blue, blue),linear-gradient(yellow, yellow),' +
-					'url(thumbnail-image-url-123) 0% 0% / 1400px auto,' +
-					'url(medium_large-image-url-123) repeat-x fixed 200px 30px / auto' +
-					' #000',
+				'background-color': '#000',
+				'background-attachment': 'scroll,scroll,scroll,fixed',
+				'background-image':
+					'linear-gradient(blue, blue),linear-gradient(yellow, yellow),url(thumbnail-image-url-123),url(medium_large-image-url-123)',
+				'background-position': '0% 0%,0% 0%,0% 0%,200px 30px',
+				'background-repeat': 'repeat,repeat,repeat,repeat-x',
+				'background-size': 'auto auto,auto auto,1400px auto,auto',
 			},
 		},
 		{
@@ -291,7 +293,75 @@ describe( 'styles prop resolver', () => {
 				} ),
 			},
 			expected: {
-				background: 'url(medium_large-image-url-123) repeat-x,url(thumbnail-image-url-123) fixed',
+				'background-image': 'url(medium_large-image-url-123),url(thumbnail-image-url-123)',
+				'background-attachment': 'scroll,fixed',
+				'background-repeat': 'repeat-x,repeat',
+			},
+		},
+		{
+			name: 'background (same url and position, attachment with only defaults, different repeat)',
+			prepare: () => {
+				jest.mocked( getMediaAttachment ).mockImplementation(
+					( args ) => Promise.resolve( mockAttachmentData( args.id ) ) as never
+				);
+			},
+			props: {
+				background: backgroundPropTypeUtil.create( {
+					'background-overlay': backgroundOverlayPropTypeUtil.create( [
+						backgroundImageOverlayPropTypeUtil.create( {
+							image: imagePropTypeUtil.create( {
+								src: imageSrcPropTypeUtil.create( {
+									id: imageAttachmentIdPropType.create( 123 ),
+									url: null,
+								} ),
+								size: 'medium_large',
+							} ),
+							position: 'center left',
+							repeat: 'repeat-x',
+							attachment: 'scroll',
+						} ),
+						backgroundImageOverlayPropTypeUtil.create( {
+							image: imagePropTypeUtil.create( {
+								src: imageSrcPropTypeUtil.create( {
+									id: imageAttachmentIdPropType.create( 123 ),
+									url: null,
+								} ),
+								size: 'medium_large',
+							} ),
+							position: 'center left',
+							repeat: 'no-repeat',
+						} ),
+						backgroundImageOverlayPropTypeUtil.create( {
+							image: imagePropTypeUtil.create( {
+								src: imageSrcPropTypeUtil.create( {
+									id: imageAttachmentIdPropType.create( 123 ),
+									url: null,
+								} ),
+								size: 'medium_large',
+							} ),
+							position: 'center left',
+							repeat: 'repeat',
+							attachment: 'scroll',
+						} ),
+						backgroundImageOverlayPropTypeUtil.create( {
+							image: imagePropTypeUtil.create( {
+								src: imageSrcPropTypeUtil.create( {
+									id: imageAttachmentIdPropType.create( 123 ),
+									url: null,
+								} ),
+								size: 'medium_large',
+							} ),
+							position: 'center left',
+						} ),
+					] ),
+				} ),
+			},
+			expected: {
+				'background-image':
+					'url(medium_large-image-url-123),url(medium_large-image-url-123),url(medium_large-image-url-123),url(medium_large-image-url-123)',
+				'background-position': 'center left',
+				'background-repeat': 'repeat-x,no-repeat,repeat,repeat',
+				'background-attachment': 'scroll',
 			},
 		},
 		{
@@ -336,9 +406,39 @@ describe( 'styles prop resolver', () => {
 				} ),
 			},
 			expected: {
-				background:
-					'linear-gradient(190deg, red 10%,yellow 40%,rgb(255,0,255) 87%),' +
-					'radial-gradient(circle at bottom left, rgb(0,190,245,0.7) 60%,rgb(255,0,255) 93%)',
+				'background-image':
+					'linear-gradient(190deg, red 10%,yellow 40%,rgb(255,0,255) 87%),radial-gradient(circle at bottom left, rgb(0,190,245,0.7) 60%,rgb(255,0,255) 93%)',
+			},
+		},
+		{
+			name: 'background with manually set default values',
+			props: {
+				background: backgroundPropTypeUtil.create( {
+					color: colorPropTypeUtil.create( '#000' ),
+					'background-overlay': backgroundOverlayPropTypeUtil.create( [
+						backgroundImageOverlayPropTypeUtil.create( {
+							image: imagePropTypeUtil.create( {
+								src: imageSrcPropTypeUtil.create( {
+									id: imageAttachmentIdPropType.create( 123 ),
+									url: null,
+								} ),
+							} ),
+							repeat: stringPropTypeUtil.create( 'repeat' ),
+							size: backgroundImageSizeScalePropTypeUtil.create( {
+								width: sizePropTypeUtil.create( {
+									size: 1400,
+									unit: 'px',
+								} ),
+							} ),
+						} ),
+					] ),
+				} ),
+			},
+			expected: {
+				'background-color': '#000',
+				'background-image': 'url(original-image-url-123)',
+				'background-repeat': 'repeat',
+				'background-size': '1400px auto',
 			},
 		},
 	] )( 'it should resolve props for `$name`', async ( { prepare, props, expected } ) => {

package/src/init-style-transformers.ts

@@ -7,6 +7,7 @@ import { backgroundGradientOverlayTransformer } from './transformers/styles/back
 import { backgroundImageOverlayTransformer } from './transformers/styles/background-image-overlay-transformer';
 import { backgroundImagePositionOffsetTransformer } from './transformers/styles/background-image-position-offset-transformer';
 import { backgroundImageSizeScaleTransformer } from './transformers/styles/background-image-size-scale-transformer';
+import { backgroundOverlayTransformer } from './transformers/styles/background-overlay-transformer';
 import { backgroundTransformer } from './transformers/styles/background-transformer';
 import { colorStopTransformer } from './transformers/styles/color-stop-transformer';
 import { createCombineArrayTransformer } from './transformers/styles/create-combine-array-transformer';
@@ -29,7 +30,7 @@ export function initStyleTransformers() {
 		)
 		.register( 'box-shadow', createCombineArrayTransformer( ',' ) )
 		.register( 'background', backgroundTransformer )
-		.register( 'background-overlay', createCombineArrayTransformer( ',' ) )
+		.register( 'background-overlay', backgroundOverlayTransformer )
 		.register( 'background-color-overlay', backgroundColorOverlayTransformer )
 		.register( 'background-image-overlay', backgroundImageOverlayTransformer )
 		.register( 'background-gradient-overlay', backgroundGradientOverlayTransformer )

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

@@ -1,7 +1,5 @@
 import { createTransformer } from '../create-transformer';
 
-const DEFAULT_POSITION_VALUE = '0% 0%';
-
 type BackgroundImageOverlay = {
 	image?: {
 		src?: string;
@@ -12,6 +10,14 @@ type BackgroundImageOverlay = {
 	attachment?: string;
 };
 
+export type BackgroundImageTransformed = {
+	src: string | null;
+	repeat: string | null;
+	attachment: string | null;
+	size: string | null;
+	position: string | null;
+};
+
 export const backgroundImageOverlayTransformer = createTransformer( ( value: BackgroundImageOverlay ) => {
 	const { image, size = null, position = null, repeat = null, attachment = null } = value;
 
@@ -21,12 +27,13 @@ export const backgroundImageOverlayTransformer = createTransformer( ( value: Bac
 
 	const src = image.src ? `url(${ image.src })` : null;
 
-	const backgroundStyles = [
+	const backgroundStyles: BackgroundImageTransformed = {
 		src,
 		repeat,
 		attachment,
-		size ? `${ position || DEFAULT_POSITION_VALUE } / ${ size }` : position,
-	].filter( Boolean );
+		size,
+		position,
+	};
 
-	return backgroundStyles.join( ' ' );
+	return backgroundStyles;
 } );

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

@@ -0,0 +1,77 @@
+import { createTransformer } from '../create-transformer';
+import { type BackgroundImageTransformed } from './background-image-overlay-transformer';
+
+type BackgroundOverlay = ( BackgroundImageTransformed | string )[];
+
+export type BackgroundOverlayTransformed = {
+	'background-image'?: string | null;
+	'background-repeat'?: string | null;
+	'background-attachment'?: string | null;
+	'background-size'?: string | null;
+	'background-position'?: string | null;
+};
+
+export const backgroundOverlayTransformer = createTransformer(
+	( value: BackgroundOverlay ): BackgroundOverlayTransformed | null => {
+		if ( ! value || value.length === 0 ) {
+			return null;
+		}
+
+		const normalizedValues = normalizeOverlayValues( value );
+
+		const images = getValuesString( normalizedValues, 'src', 'none', true );
+		const repeats = getValuesString( normalizedValues, 'repeat', 'repeat' );
+		const attachments = getValuesString( normalizedValues, 'attachment', 'scroll' );
+		const sizes = getValuesString( normalizedValues, 'size', 'auto auto' );
+		const positions = getValuesString( normalizedValues, 'position', '0% 0%' );
+
+		return {
+			'background-image': images,
+			'background-repeat': repeats,
+			'background-attachment': attachments,
+			'background-size': sizes,
+			'background-position': positions,
+		};
+	}
+);
+
+function normalizeOverlayValues( overlays: BackgroundOverlay ): BackgroundImageTransformed[] {
+	return overlays.map( ( item ) => {
+		if ( typeof item === 'string' ) {
+			return {
+				src: item,
+				repeat: null,
+				attachment: null,
+				size: null,
+				position: null,
+			};
+		}
+
+		return item;
+	} );
+}
+
+function getValuesString(
+	items: Partial< BackgroundImageTransformed >[],
+	prop: keyof BackgroundImageTransformed,
+	defaultValue: string,
+	preventUnification: boolean = false
+) {
+	const isEmpty = items.filter( ( item ) => item?.[ prop ] ).length === 0;
+
+	if ( isEmpty ) {
+		return null;
+	}
+
+	const formattedValues = items.map( ( item ) => item[ prop ] ?? defaultValue );
+
+	if ( ! preventUnification ) {
+		const allSame = formattedValues.every( ( value ) => value === formattedValues[ 0 ] );
+
+		if ( allSame ) {
+			return formattedValues[ 0 ];
+		}
+	}
+
+	return formattedValues.join( ',' );
+}

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

@@ -1,13 +1,17 @@
+import { createMultiPropsValue } from '../../renderers/multi-props';
 import { createTransformer } from '../create-transformer';
+import { type BackgroundOverlayTransformed } from './background-overlay-transformer';
 
 type Background = {
-	'background-overlay'?: string;
+	'background-overlay'?: BackgroundOverlayTransformed;
 	color?: string;
 };
 
 export const backgroundTransformer = createTransformer( ( value: Background ) => {
-	const overlays = value[ 'background-overlay' ] ?? '';
-	const color = value.color ?? '';
+	const { color = null, 'background-overlay': overlays = null } = value;
 
-	return `${ overlays } ${ color }`.trim();
+	return createMultiPropsValue( {
+		...overlays,
+		'background-color': color,
+	} );
 } );