@elementor/editor-variables 4.1.0-788 → 4.1.0-789

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elementor/editor-variables",
-  "version": "4.1.0-788",
+  "version": "4.1.0-789",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -39,22 +39,22 @@
     "dev": "tsup --config=../../tsup.dev.ts"
   },
   "dependencies": {
-    "@elementor/editor": "4.1.0-788",
-    "@elementor/editor-canvas": "4.1.0-788",
-    "@elementor/editor-controls": "4.1.0-788",
-    "@elementor/editor-current-user": "4.1.0-788",
-    "@elementor/editor-mcp": "4.1.0-788",
-    "@elementor/editor-panels": "4.1.0-788",
-    "@elementor/editor-props": "4.1.0-788",
-    "@elementor/editor-ui": "4.1.0-788",
-    "@elementor/editor-v1-adapters": "4.1.0-788",
-    "@elementor/menus": "4.1.0-788",
-    "@elementor/http-client": "4.1.0-788",
+    "@elementor/editor": "4.1.0-789",
+    "@elementor/editor-canvas": "4.1.0-789",
+    "@elementor/editor-controls": "4.1.0-789",
+    "@elementor/editor-current-user": "4.1.0-789",
+    "@elementor/editor-mcp": "4.1.0-789",
+    "@elementor/editor-panels": "4.1.0-789",
+    "@elementor/editor-props": "4.1.0-789",
+    "@elementor/editor-ui": "4.1.0-789",
+    "@elementor/editor-v1-adapters": "4.1.0-789",
+    "@elementor/menus": "4.1.0-789",
+    "@elementor/http-client": "4.1.0-789",
     "@elementor/icons": "^1.72.0",
-    "@elementor/events": "4.1.0-788",
-    "@elementor/schema": "4.1.0-788",
+    "@elementor/events": "4.1.0-789",
+    "@elementor/schema": "4.1.0-789",
     "@elementor/ui": "1.37.5",
-    "@elementor/utils": "4.1.0-788",
+    "@elementor/utils": "4.1.0-789",
     "@wordpress/i18n": "^5.13.0"
   },
   "peerDependencies": {

package/src/components/variables-repeater-item-slot.tsx

@@ -2,12 +2,16 @@ import * as React from 'react';
 import {
 	type BackgroundColorOverlayPropValue,
 	type BoxShadowPropValue,
+	cssFilterFunctionPropUtil,
+	dropShadowFilterPropTypeUtil,
 	type KeyValuePropValue,
 	type PropValue,
 	selectionSizePropTypeUtil,
 	type SelectionSizePropValue,
 	shadowPropTypeUtil,
 } from '@elementor/editor-props';
+import { Box } from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
 
 import { getVariable } from '../hooks/use-prop-variables';
 import { sizeValue } from '../utils/size-value';
@@ -32,7 +36,7 @@ export const BackgroundRepeaterColorIndicator = ( { value }: Props ) => {
 export const BackgroundRepeaterLabel = ( { value }: Props ) => {
 	const colorVariable = useColorVariable( value as BackgroundColorOverlayPropValue );
 
-	return <span>{ colorVariable?.label }</span>;
+	return <Box component="span">{ colorVariable?.label }</Box>;
 };
 
 export const BoxShadowRepeaterColorIndicator = ( { value }: Props ) => {
@@ -41,24 +45,73 @@ export const BoxShadowRepeaterColorIndicator = ( { value }: Props ) => {
 	return <ColorIndicator component="span" size="inherit" value={ colorVariable?.value } />;
 };
 
+export const FilterDropShadowIconIndicator = ( { value }: Props ) => {
+	const { args } = cssFilterFunctionPropUtil.extract( value ) || {};
+	const { color } = dropShadowFilterPropTypeUtil.extract( args ) || {};
+	const colorVariable = getVariable( color?.value || '' );
+
+	return <ColorIndicator component="span" size="inherit" value={ colorVariable?.value } />;
+};
+
+export const FilterSingleSizeRepeaterLabel = ( { value }: Props ) => {
+	const cssFilterFunction = cssFilterFunctionPropUtil.extract( value );
+
+	if ( dropShadowFilterPropTypeUtil.isValid( cssFilterFunction?.args ) ) {
+		return null;
+	}
+
+	const args = cssFilterFunction?.args as { value?: { size?: PropValue } };
+	const func = cssFilterFunction?.func?.value ?? '';
+	const rendered = sizeValue( args?.value?.size );
+
+	return (
+		<>
+			<Box component="span" style={ { textTransform: 'capitalize' } }>
+				{ `${ func }: ` }
+			</Box>
+			<Box component="span">{ rendered }</Box>
+		</>
+	);
+};
+
+export const FilterDropShadowRepeaterLabel = ( { value }: Props ) => {
+	const { args } = cssFilterFunctionPropUtil.extract( value ) || {};
+	const { xAxis, yAxis, blur } = dropShadowFilterPropTypeUtil.extract( args ) || {};
+
+	const labels = [];
+
+	for ( const val of [ xAxis, yAxis, blur ] ) {
+		const rendered = sizeValue( val );
+		if ( rendered ) {
+			labels.push( rendered );
+		}
+	}
+
+	return (
+		<Box component="span">
+			{ __( 'Drop shadow:', 'elementor' ) } { labels.join( ' ' ) }
+		</Box>
+	);
+};
+
 export const BoxShadowRepeaterLabel = ( { value }: Props ) => {
-	const shadowPropValue = shadowPropTypeUtil.extract( value ) || {};
+	const { position, hOffset, vOffset, blur, spread } = shadowPropTypeUtil.extract( value ) || {};
 
 	const labels: string[] = [];
 
-	for ( const key of [ 'hOffset', 'vOffset', 'blur', 'spread' ] ) {
-		const rendered = sizeValue( shadowPropValue[ key as keyof typeof shadowPropValue ] );
+	for ( const val of [ hOffset, vOffset, blur, spread ] ) {
+		const rendered = sizeValue( val );
 		if ( rendered ) {
 			labels.push( rendered );
 		}
 	}
 
-	const positionLabel = shadowPropValue.position?.value || 'outset';
+	const positionLabel = position?.value || 'outset';
 
 	return (
-		<span style={ { textTransform: 'capitalize' } }>
+		<Box component="span" style={ { textTransform: 'capitalize' } }>
 			{ positionLabel }: { labels.join( ' ' ) }
-		</span>
+		</Box>
 	);
 };
 
@@ -76,5 +129,5 @@ export const TransitionsSizeVariableLabel = ( { value: prop }: Props ) => {
 		label += variable?.value;
 	}
 
-	return <span>{ label }</span>;
+	return <Box component="span">{ label }</Box>;
 };

package/src/repeater-injections.ts

@@ -1,6 +1,8 @@
 import { injectIntoRepeaterItemIcon, injectIntoRepeaterItemLabel } from '@elementor/editor-controls';
 import {
 	backgroundColorOverlayPropTypeUtil,
+	cssFilterFunctionPropUtil,
+	dropShadowFilterPropTypeUtil,
 	type PropValue,
 	selectionSizePropTypeUtil,
 	shadowPropTypeUtil,
@@ -11,6 +13,9 @@ import {
 	BackgroundRepeaterLabel,
 	BoxShadowRepeaterColorIndicator,
 	BoxShadowRepeaterLabel,
+	FilterDropShadowIconIndicator,
+	FilterDropShadowRepeaterLabel,
+	FilterSingleSizeRepeaterLabel,
 	TransitionsSizeVariableLabel,
 } from './components/variables-repeater-item-slot';
 import { colorVariablePropTypeUtil, customSizeVariablePropTypeUtil, sizeVariablePropTypeUtil } from './prop-types';
@@ -23,11 +28,12 @@ export function registerRepeaterInjections() {
 	backgroundOverlayRepeaterInjections();
 	boxShadowRepeaterInjections();
 	transitionsRepeaterInjections();
+	filterRepeaterInjections();
 }
 
-const backgroundOverlayRepeaterInjections = () => {
+function backgroundOverlayRepeaterInjections() {
 	injectIntoRepeaterItemIcon( {
-		id: 'color-variables-background-icon',
+		id: 'background-color-variables-icon',
 		component: BackgroundRepeaterColorIndicator,
 		condition: ( { value }: Args ) => {
 			return hasAssignedColorVariable( backgroundColorOverlayPropTypeUtil.extract( value )?.color );
@@ -35,17 +41,17 @@ const backgroundOverlayRepeaterInjections = () => {
 	} );
 
 	injectIntoRepeaterItemLabel( {
-		id: 'color-variables-label',
+		id: 'background-color-variables-label',
 		component: BackgroundRepeaterLabel,
 		condition: ( { value }: Args ) => {
 			return hasAssignedColorVariable( backgroundColorOverlayPropTypeUtil.extract( value )?.color );
 		},
 	} );
-};
+}
 
-const boxShadowRepeaterInjections = () => {
+function boxShadowRepeaterInjections() {
 	injectIntoRepeaterItemIcon( {
-		id: 'color-variables-box-shadow-icon',
+		id: 'box-shadow-color-variables-icon',
 		component: BoxShadowRepeaterColorIndicator,
 		condition: ( { value }: Args ) => {
 			const { color } = shadowPropTypeUtil.extract( value ) || {};
@@ -67,9 +73,9 @@ const boxShadowRepeaterInjections = () => {
 			);
 		},
 	} );
-};
+}
 
-const transitionsRepeaterInjections = () => {
+function transitionsRepeaterInjections() {
 	injectIntoRepeaterItemLabel( {
 		id: 'transition-size-variables-label',
 		component: TransitionsSizeVariableLabel,
@@ -77,9 +83,63 @@ const transitionsRepeaterInjections = () => {
 			return hasAssignedSizeVariable( selectionSizePropTypeUtil.extract( value )?.size );
 		},
 	} );
-};
+}
+
+function filterRepeaterInjections() {
+	injectIntoRepeaterItemIcon( {
+		id: 'filters-color-variables-icon',
+		component: FilterDropShadowIconIndicator,
+		condition: ( { value }: Args ) => {
+			if ( ! cssFilterFunctionPropUtil.isValid( value ) ) {
+				return false;
+			}
+
+			const args = cssFilterFunctionPropUtil.extract( value )?.args;
+			if ( dropShadowFilterPropTypeUtil.isValid( args ) ) {
+				return hasAssignedColorVariable( dropShadowFilterPropTypeUtil.extract( args )?.color );
+			}
+
+			return false;
+		},
+	} );
+
+	injectIntoRepeaterItemLabel( {
+		id: 'filters-drop-shadow-size-variables-label',
+		component: FilterDropShadowRepeaterLabel,
+		condition: ( { value }: Args ) => {
+			if ( ! cssFilterFunctionPropUtil.isValid( value ) ) {
+				return false;
+			}
 
-const hasAssignedSizeVariable = ( value: PropValue ): boolean => {
+			const args = cssFilterFunctionPropUtil.extract( value )?.args;
+			if ( dropShadowFilterPropTypeUtil.isValid( args ) ) {
+				const { xAxis, yAxis, blur } = dropShadowFilterPropTypeUtil.extract( args ) || {};
+				return (
+					hasAssignedSizeVariable( xAxis ) ||
+					hasAssignedSizeVariable( yAxis ) ||
+					hasAssignedSizeVariable( blur )
+				);
+			}
+
+			return false;
+		},
+	} );
+
+	injectIntoRepeaterItemLabel( {
+		id: 'filters-size-variables-label',
+		component: FilterSingleSizeRepeaterLabel,
+		condition: ( { value }: Args ) => {
+			if ( ! cssFilterFunctionPropUtil.isValid( value ) ) {
+				return false;
+			}
+
+			const args = cssFilterFunctionPropUtil.extract( value )?.args as { value?: { size?: PropValue } };
+			return hasAssignedSizeVariable( args?.value?.size );
+		},
+	} );
+}
+
+function hasAssignedSizeVariable( value: PropValue ): boolean {
 	if ( sizeVariablePropTypeUtil.isValid( value ) ) {
 		return true;
 	}
@@ -89,8 +149,8 @@ const hasAssignedSizeVariable = ( value: PropValue ): boolean => {
 	}
 
 	return false;
-};
+}
 
-const hasAssignedColorVariable = ( value: PropValue ): boolean => {
+function hasAssignedColorVariable( value: PropValue ): boolean {
 	return !! colorVariablePropTypeUtil.isValid( value );
-};
+}