@elementor/editor-canvas 0.26.0 → 0.28.0

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

@@ -1,6 +1,7 @@
 import { mockStylesSchema } from 'test-utils';
 import { styleTransformersRegistry } from '@elementor/editor-canvas';
 import {
+	backdropFilterPropTypeUtil,
 	backgroundColorOverlayPropTypeUtil,
 	backgroundGradientOverlayPropTypeUtil,
 	backgroundImageOverlayPropTypeUtil,
@@ -15,15 +16,21 @@ import {
 	brightnessFilterPropTypeUtil,
 	colorPropTypeUtil,
 	colorStopPropTypeUtil,
+	contrastFilterPropTypeUtil,
 	dimensionsPropTypeUtil,
 	filterPropTypeUtil,
 	gradientColorStopPropTypeUtil,
+	grayscaleFilterPropTypeUtil,
+	hueRotateFilterPropTypeUtil,
 	imageAttachmentIdPropType,
 	imagePropTypeUtil,
 	imageSrcPropTypeUtil,
+	invertFilterPropTypeUtil,
 	layoutDirectionPropTypeUtil,
 	numberPropTypeUtil,
 	type Props,
+	saturateFilterPropTypeUtil,
+	sepiaFilterPropTypeUtil,
 	shadowPropTypeUtil,
 	sizePropTypeUtil,
 	stringPropTypeUtil,
@@ -280,10 +287,63 @@ describe( 'styles prop resolver', () => {
 					brightnessFilterPropTypeUtil.create( {
 						amount: sizePropTypeUtil.create( { size: 90, unit: '%' } ),
 					} ),
+					contrastFilterPropTypeUtil.create( {
+						contrast: sizePropTypeUtil.create( { size: 50, unit: '%' } ),
+					} ),
+					grayscaleFilterPropTypeUtil.create( {
+						grayscale: sizePropTypeUtil.create( { size: 70, unit: '%' } ),
+					} ),
+					invertFilterPropTypeUtil.create( {
+						invert: sizePropTypeUtil.create( { size: 60, unit: '%' } ),
+					} ),
+					sepiaFilterPropTypeUtil.create( {
+						sepia: sizePropTypeUtil.create( { size: 30, unit: '%' } ),
+					} ),
+					saturateFilterPropTypeUtil.create( {
+						saturate: sizePropTypeUtil.create( { size: 25, unit: '%' } ),
+					} ),
+					hueRotateFilterPropTypeUtil.create( {
+						'hue-rotate': sizePropTypeUtil.create( { size: 10, unit: 'deg' } ),
+					} ),
+				] ),
+			},
+			expected: {
+				filter: 'blur(1px) brightness(90%) contrast(50%) grayscale(70%) invert(60%) sepia(30%) saturate(25%) hue-rotate(10deg)',
+			},
+		},
+		{
+			name: 'backdrop-filter',
+			props: {
+				'backdrop-filter': backdropFilterPropTypeUtil.create( [
+					blurFilterPropTypeUtil.create( {
+						radius: sizePropTypeUtil.create( { size: 2, unit: 'rem' } ),
+					} ),
+					brightnessFilterPropTypeUtil.create( {
+						amount: sizePropTypeUtil.create( { size: 80, unit: '%' } ),
+					} ),
+					contrastFilterPropTypeUtil.create( {
+						contrast: sizePropTypeUtil.create( { size: 50, unit: '%' } ),
+					} ),
+					grayscaleFilterPropTypeUtil.create( {
+						grayscale: sizePropTypeUtil.create( { size: 70, unit: '%' } ),
+					} ),
+					invertFilterPropTypeUtil.create( {
+						invert: sizePropTypeUtil.create( { size: 60, unit: '%' } ),
+					} ),
+					sepiaFilterPropTypeUtil.create( {
+						sepia: sizePropTypeUtil.create( { size: 30, unit: '%' } ),
+					} ),
+					saturateFilterPropTypeUtil.create( {
+						saturate: sizePropTypeUtil.create( { size: 25, unit: '%' } ),
+					} ),
+					hueRotateFilterPropTypeUtil.create( {
+						'hue-rotate': sizePropTypeUtil.create( { size: 10, unit: 'deg' } ),
+					} ),
 				] ),
 			},
 			expected: {
-				filter: 'blur(1px) brightness(90%)',
+				'backdrop-filter':
+					'blur(2rem) brightness(80%) contrast(50%) grayscale(70%) invert(60%) sepia(30%) saturate(25%) hue-rotate(10deg)',
 			},
 		},
 		{

package/src/init-style-transformers.ts

@@ -32,6 +32,7 @@ export function initStyleTransformers() {
 			)
 		)
 		.register( 'filter', filterTransformer )
+		.register( 'backdrop-filter', filterTransformer )
 		.register( 'box-shadow', createCombineArrayTransformer( ',' ) )
 		.register( 'background', backgroundTransformer )
 		.register( 'background-overlay', backgroundOverlayTransformer )

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

@@ -7,17 +7,28 @@ export const filterTransformer = createTransformer( ( filterValues: FilterItemPr
 		return null;
 	}
 
-	return filterValues.map( mapToFilterFunctionString ).join( ' ' );
+	return filterValues.filter( Boolean ).map( mapToFilterFunctionString ).join( ' ' );
 } );
 
 const mapToFilterFunctionString = ( value: FilterItemPropValue[ 'value' ] ): string => {
 	if ( 'radius' in value ) {
-		return `blur(${ value.radius })`;
+		return value.radius ? `blur(${ value.radius })` : '';
 	}
 
 	if ( 'amount' in value ) {
-		return `brightness(${ value.amount })`;
+		return value.amount ? `brightness(${ value.amount })` : '';
 	}
 
-	return '';
+	if ( 'xAxis' in value && 'yAxis' in value && 'blur' in value && 'color' in value ) {
+		const { xAxis, yAxis, blur, color } = value;
+		return `drop-shadow(${ xAxis || '0px' } ${ yAxis || '0px' } ${ blur || '10px' } ${ color || 'transparent' })`;
+	}
+
+	const keys = Object.keys( value );
+
+	if ( ! keys[ 0 ] ) {
+		return '';
+	}
+
+	return value[ keys[ 0 ] ] ? `${ keys[ 0 ] }(${ value[ keys[ 0 ] ] })` : '';
 };