@elementor/editor-canvas 0.25.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

@@ -16,6 +16,8 @@ import { positionTransformer } from './transformers/styles/position-transformer'
 import { shadowTransformer } from './transformers/styles/shadow-transformer';
 import { sizeTransformer } from './transformers/styles/size-transformer';
 import { strokeTransformer } from './transformers/styles/stroke-transformer';
+import { transformMoveTransformer } from './transformers/styles/transform-move-transformer';
+import { transformTransformer } from './transformers/styles/transform-transformer';
 
 export function initStyleTransformers() {
 	styleTransformersRegistry
@@ -30,6 +32,7 @@ export function initStyleTransformers() {
 			)
 		)
 		.register( 'filter', filterTransformer )
+		.register( 'backdrop-filter', filterTransformer )
 		.register( 'box-shadow', createCombineArrayTransformer( ',' ) )
 		.register( 'background', backgroundTransformer )
 		.register( 'background-overlay', backgroundOverlayTransformer )
@@ -43,6 +46,8 @@ export function initStyleTransformers() {
 		.register( 'image-src', imageSrcTransformer )
 		.register( 'image', imageTransformer )
 		.register( 'object-position', positionTransformer )
+		.register( 'transform-move', transformMoveTransformer )
+		.register( 'transform', transformTransformer )
 		.register(
 			'layout-direction',
 			createMultiPropsTransformer( [ 'row', 'column' ], ( { propKey, key } ) => `${ key }-${ propKey }` )

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 ] ] })` : '';
 };

package/src/transformers/styles/transform-move-transformer.ts

@@ -0,0 +1,11 @@
+import { createTransformer } from '../create-transformer';
+
+type TransformMove = {
+	x: string;
+	y: string;
+	z: string;
+};
+
+export const transformMoveTransformer = createTransformer( ( value: TransformMove ) => {
+	return `translate3d(${ value.x }, ${ value.y }, ${ value.z })`;
+} );

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

@@ -0,0 +1,9 @@
+import { createTransformer } from '../create-transformer';
+
+export const transformTransformer = createTransformer( ( values: string[] ) => {
+	if ( values?.length < 1 ) {
+		return null;
+	}
+
+	return values.join( ' ' );
+} );