@elementor/editor-editing-panel 1.48.0 → 3.32.0-20

package/src/components/style-sections/effects-section/effects-section.tsx

@@ -1,44 +1,57 @@
 import * as React from 'react';
-import { BoxShadowRepeaterControl, FilterRepeaterControl, TransformRepeaterControl } from '@elementor/editor-controls';
-import { isExperimentActive } from '@elementor/editor-v1-adapters';
+import {
+	BoxShadowRepeaterControl,
+	FilterRepeaterControl,
+	TransformRepeaterControl,
+	TransitionRepeaterControl,
+	UnstableTransformRepeaterControl,
+} from '@elementor/editor-controls';
+import { EXPERIMENTAL_FEATURES, isExperimentActive } from '@elementor/editor-v1-adapters';
 import { __ } from '@wordpress/i18n';
 
 import { StylesField } from '../../../controls-registry/styles-field';
-import { EXPERIMENTAL_FEATURES } from '../../../sync/experiments-flags';
 import { PanelDivider } from '../../panel-divider';
 import { SectionContent } from '../../section-content';
-import { OpacityControlField } from '../layout-section/opacity-control-field';
+import { OpacityControlField } from './opacity-control-field';
 
 const BOX_SHADOW_LABEL = __( 'Box shadow', 'elementor' );
-const FILTER_LABEL = __( 'Filter', 'elementor' );
+const FILTER_LABEL = __( 'Filters', 'elementor' );
 const TRANSFORM_LABEL = __( 'Transform', 'elementor' );
+const BACKDROP_FILTER_LABEL = __( 'Backdrop filters', 'elementor' );
+const TRANSITIONS_LABEL = __( 'Transitions', 'elementor' );
 
 export const EffectsSection = () => {
-	const isVersion331Active = isExperimentActive( EXPERIMENTAL_FEATURES.V_3_31 );
+	const shouldShowTransition = isExperimentActive( EXPERIMENTAL_FEATURES.TRANSITIONS );
+
+	const isUnstableRepeaterActive = isExperimentActive( EXPERIMENTAL_FEATURES.UNSTABLE_REPEATER );
 
 	return (
 		<SectionContent>
-			{ isVersion331Active && (
-				<>
-					<OpacityControlField />
-					<PanelDivider />
-				</>
-			) }
+			<OpacityControlField />
+			<PanelDivider />
 			<StylesField bind="box-shadow" propDisplayName={ BOX_SHADOW_LABEL }>
 				<BoxShadowRepeaterControl />
 			</StylesField>
-			{ isVersion331Active && (
+			<PanelDivider />
+			<StylesField bind="transform" propDisplayName={ TRANSFORM_LABEL }>
+				{ isUnstableRepeaterActive ? <UnstableTransformRepeaterControl /> : <TransformRepeaterControl /> }
+			</StylesField>
+			{ shouldShowTransition && (
 				<>
 					<PanelDivider />
-					<StylesField bind="transform" propDisplayName={ TRANSFORM_LABEL }>
-						<TransformRepeaterControl />
-					</StylesField>
-					<PanelDivider />
-					<StylesField bind="filter" propDisplayName={ FILTER_LABEL }>
-						<FilterRepeaterControl />
+					<StylesField bind="transition" propDisplayName={ TRANSITIONS_LABEL }>
+						<TransitionRepeaterControl />
 					</StylesField>
 				</>
 			) }
+			<PanelDivider />
+			<StylesField bind="filter" propDisplayName={ FILTER_LABEL }>
+				<FilterRepeaterControl />
+			</StylesField>
+			<PanelDivider />
+			<StylesField bind="backdrop-filter" propDisplayName={ BACKDROP_FILTER_LABEL }>
+				<FilterRepeaterControl filterPropName="backdrop-filter" />
+			</StylesField>
 		</SectionContent>
 	);
 };

package/src/components/style-sections/layout-section/display-field.tsx

@@ -1,11 +1,9 @@
 import * as React from 'react';
 import { type ToggleButtonGroupItem, ToggleControl } from '@elementor/editor-controls';
-import { isExperimentActive } from '@elementor/editor-v1-adapters';
 import { __ } from '@wordpress/i18n';
 
 import { useStylesInheritanceChain } from '../../../contexts/styles-inheritance-context';
 import { StylesField } from '../../../controls-registry/styles-field';
-import { EXPERIMENTAL_FEATURES } from '../../../sync/experiments-flags';
 import { StylesFieldLayout } from '../../styles-field-layout';
 
 type Displays = 'block' | 'flex' | 'inline-block' | 'inline-flex' | 'none';
@@ -31,34 +29,27 @@ const displayFieldItems: ToggleButtonGroupItem< Displays >[] = [
 		label: __( 'Inline-block', 'elementor' ),
 		showTooltip: true,
 	},
-];
-
-export const DisplayField = () => {
-	const isDisplayNoneFeatureActive = isExperimentActive( EXPERIMENTAL_FEATURES.V_3_30 );
-	const items = [ ...displayFieldItems ];
-
-	if ( isDisplayNoneFeatureActive ) {
-		items.push( {
-			value: 'none',
-			renderContent: () => __( 'None', 'elementor' ),
-			label: __( 'None', 'elementor' ),
-			showTooltip: true,
-		} );
-	}
-
-	items.push( {
+	{
+		value: 'none',
+		renderContent: () => __( 'None', 'elementor' ),
+		label: __( 'None', 'elementor' ),
+		showTooltip: true,
+	},
+	{
 		value: 'inline-flex',
 		renderContent: () => __( 'In-flx', 'elementor' ),
 		label: __( 'Inline-flex', 'elementor' ),
 		showTooltip: true,
-	} );
+	},
+];
 
+export const DisplayField = () => {
 	const placeholder = useDisplayPlaceholderValue();
 
 	return (
 		<StylesField bind="display" propDisplayName={ DISPLAY_LABEL } placeholder={ placeholder }>
 			<StylesFieldLayout label={ DISPLAY_LABEL } direction="column">
-				<ToggleControl options={ items } maxItems={ 4 } fullWidth={ true } />
+				<ToggleControl options={ displayFieldItems } maxItems={ 4 } fullWidth={ true } />
 			</StylesFieldLayout>
 		</StylesField>
 	);

package/src/components/style-sections/layout-section/flex-order-field.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { ControlToggleButtonGroup, NumberControl, type ToggleButtonGroupItem } from '@elementor/editor-controls';
 import { type NumberPropValue } from '@elementor/editor-props';
 import { ArrowDownSmallIcon, ArrowUpSmallIcon, PencilIcon } from '@elementor/icons';
@@ -60,6 +60,11 @@ export const FlexOrderField = () => {
 
 	const [ groupControlValue, setGroupControlValue ] = useState( getGroupControlValue( order?.value || null ) );
 
+	useEffect( () => {
+		const newGroupControlValue = getGroupControlValue( order?.value || null );
+		setGroupControlValue( newGroupControlValue );
+	}, [ order?.value ] );
+
 	const handleToggleButtonChange = ( group: GroupControlItemOption | null ) => {
 		setGroupControlValue( group );
 

package/src/components/style-sections/layout-section/flex-size-field.tsx

@@ -1,17 +1,20 @@
 import * as React from 'react';
-import { useMemo, useRef, useState } from 'react';
+import { useEffect, useMemo, useRef, useState } from 'react';
 import {
 	ControlToggleButtonGroup,
 	NumberControl,
+	PropKeyProvider,
+	PropProvider,
 	SizeControl,
 	type ToggleButtonGroupItem,
+	useBoundProp,
 } from '@elementor/editor-controls';
-import { numberPropTypeUtil, type NumberPropValue, type SizePropValue } from '@elementor/editor-props';
+import { flexPropTypeUtil, type FlexPropValue, numberPropTypeUtil } from '@elementor/editor-props';
 import { ExpandIcon, PencilIcon, ShrinkIcon } from '@elementor/icons';
 import { __ } from '@wordpress/i18n';
 
 import { StylesField } from '../../../controls-registry/styles-field';
-import { useStylesFields } from '../../../hooks/use-styles-fields';
+import { useStylesField } from '../../../hooks/use-styles-field';
 import { UiProviders } from '../../../styles-inheritance/components/ui-providers';
 import { SectionContent } from '../../section-content';
 import { StylesFieldLayout } from '../../styles-field-layout';
@@ -44,51 +47,44 @@ const items: ToggleButtonGroupItem< GroupItem >[] = [
 ];
 
 export const FlexSizeField = () => {
-	const { values, setValues, canEdit } = useStylesFields< {
-		'flex-grow': NumberPropValue | null;
-		'flex-shrink': NumberPropValue | null;
-		'flex-basis': SizePropValue | null;
-	} >( [ 'flex-grow', 'flex-shrink', 'flex-basis' ] );
-
-	const grow = values?.[ 'flex-grow' ]?.value || null;
-	const shrink = values?.[ 'flex-shrink' ]?.value || null;
-	const basis = values?.[ 'flex-basis' ]?.value || null;
+	const { value, setValue, canEdit } = useStylesField< FlexPropValue >( 'flex', {
+		history: { propDisplayName: FLEX_SIZE_LABEL },
+	} );
+
+	const flexValue = value as FlexPropValue | null;
+	const grow = flexValue?.value?.flexGrow?.value || null;
+	const shrink = flexValue?.value?.flexShrink?.value || null;
+	const basis = flexValue?.value?.flexBasis?.value || null;
+
+	const currentGroup = useMemo( () => getActiveGroup( { grow, shrink, basis } ), [ grow, shrink, basis ] );
+	const [ activeGroup, setActiveGroup ] = useState( currentGroup );
+	const [ customLocked, setCustomLocked ] = useState( false );
+
+	useEffect( () => {
+		if ( ! customLocked ) {
+			setActiveGroup( currentGroup );
+		}
+	}, [ currentGroup, customLocked ] );
 
-	const currentGroup = useMemo( () => getActiveGroup( { grow, shrink, basis } ), [ grow, shrink, basis ] ),
-		[ activeGroup, setActiveGroup ] = useState( currentGroup );
+	useEffect( () => {
+		if ( value === null ) {
+			setCustomLocked( false );
+		}
+	}, [ value ] );
 
 	const onChangeGroup = ( group: GroupItem | null = null ) => {
 		setActiveGroup( group );
+		setCustomLocked( group === 'custom' );
 
-		let props;
-
-		if ( ! group || group === 'custom' ) {
-			props = {
-				'flex-basis': null,
-				'flex-grow': null,
-				'flex-shrink': null,
-			};
-		} else if ( group === 'flex-grow' ) {
-			props = {
-				'flex-basis': null,
-				'flex-grow': numberPropTypeUtil.create( DEFAULT ),
-				'flex-shrink': null,
-			};
-		} else {
-			props = {
-				'flex-basis': null,
-				'flex-grow': null,
-				'flex-shrink': numberPropTypeUtil.create( DEFAULT ),
-			};
-		}
+		const newFlexValue = createFlexValueForGroup( group, flexValue );
 
-		setValues( props, { history: { propDisplayName: FLEX_SIZE_LABEL } } );
+		setValue( newFlexValue as FlexPropValue );
 	};
 
 	return (
 		<UiProviders>
 			<SectionContent>
-				<StylesField bind={ activeGroup ?? '' } propDisplayName={ FLEX_SIZE_LABEL }>
+				<StylesField bind="flex" propDisplayName={ FLEX_SIZE_LABEL }>
 					<StylesFieldLayout label={ FLEX_SIZE_LABEL }>
 						<ControlToggleButtonGroup
 							value={ activeGroup }
@@ -98,34 +94,72 @@ export const FlexSizeField = () => {
 							exclusive={ true }
 						/>
 					</StylesFieldLayout>
+					{ 'custom' === activeGroup && <FlexCustomField /> }
 				</StylesField>
-				{ 'custom' === activeGroup && <FlexCustomField /> }
 			</SectionContent>
 		</UiProviders>
 	);
 };
 
+const createFlexValueForGroup = ( group: GroupItem | null, flexValue: FlexPropValue | null ): FlexPropValue | null => {
+	if ( ! group ) {
+		return null;
+	}
+
+	if ( group === 'flex-grow' ) {
+		return flexPropTypeUtil.create( {
+			flexGrow: numberPropTypeUtil.create( DEFAULT ),
+			flexShrink: null,
+			flexBasis: null,
+		} );
+	}
+
+	if ( group === 'flex-shrink' ) {
+		return flexPropTypeUtil.create( {
+			flexGrow: null,
+			flexShrink: numberPropTypeUtil.create( DEFAULT ),
+			flexBasis: null,
+		} );
+	}
+
+	if ( group === 'custom' ) {
+		if ( flexValue ) {
+			return flexValue;
+		}
+		return flexPropTypeUtil.create( {
+			flexGrow: null,
+			flexShrink: null,
+			flexBasis: null,
+		} );
+	}
+
+	return null;
+};
+
 const FlexCustomField = () => {
 	const flexBasisRowRef = useRef< HTMLDivElement >( null );
+	const context = useBoundProp( flexPropTypeUtil );
 
 	return (
-		<>
-			<StylesField bind="flex-grow" propDisplayName={ FLEX_SIZE_LABEL }>
+		<PropProvider { ...context }>
+			<>
 				<StylesFieldLayout label={ __( 'Grow', 'elementor' ) }>
-					<NumberControl min={ 0 } shouldForceInt={ true } />
+					<PropKeyProvider bind="flexGrow">
+						<NumberControl min={ 0 } shouldForceInt={ true } />
+					</PropKeyProvider>
 				</StylesFieldLayout>
-			</StylesField>
-			<StylesField bind="flex-shrink" propDisplayName={ FLEX_SIZE_LABEL }>
 				<StylesFieldLayout label={ __( 'Shrink', 'elementor' ) }>
-					<NumberControl min={ 0 } shouldForceInt={ true } />
+					<PropKeyProvider bind="flexShrink">
+						<NumberControl min={ 0 } shouldForceInt={ true } />
+					</PropKeyProvider>
 				</StylesFieldLayout>
-			</StylesField>
-			<StylesField bind="flex-basis" propDisplayName={ FLEX_SIZE_LABEL }>
 				<StylesFieldLayout label={ __( 'Basis', 'elementor' ) } ref={ flexBasisRowRef }>
-					<SizeControl extendedOptions={ [ 'auto' ] } anchorRef={ flexBasisRowRef } />
+					<PropKeyProvider bind="flexBasis">
+						<SizeControl extendedOptions={ [ 'auto' ] } anchorRef={ flexBasisRowRef } />
+					</PropKeyProvider>
 				</StylesFieldLayout>
-			</StylesField>
-		</>
+			</>
+		</PropProvider>
 	);
 };
 
@@ -134,9 +168,9 @@ const getActiveGroup = ( {
 	shrink,
 	basis,
 }: {
-	grow: NumberPropValue[ 'value' ] | null;
-	shrink: NumberPropValue[ 'value' ] | null;
-	basis: SizePropValue[ 'value' ] | null;
+	grow: number | null;
+	shrink: number | null;
+	basis: { size: number; unit: string } | string | null;
 } ): GroupItem | null => {
 	if ( null === grow && null === shrink && ! basis ) {
 		return null;

package/src/components/style-sections/position-section/offset-field.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { useRef } from 'react';
-import { SizeControl, type Unit } from '@elementor/editor-controls';
+import { type LengthUnit, SizeControl } from '@elementor/editor-controls';
 import { __ } from '@wordpress/i18n';
 
 import { StylesField } from '../../../controls-registry/styles-field';
@@ -8,7 +8,7 @@ import { StylesFieldLayout } from '../../styles-field-layout';
 
 const OFFSET_LABEL = __( 'Anchor offset', 'elementor' );
 
-const UNITS: Unit[] = [ 'px', 'em', 'rem', 'vw', 'vh' ];
+const UNITS: LengthUnit[] = [ 'px', 'em', 'rem', 'vw', 'vh' ];
 
 export const OffsetField = () => {
 	const rowRef = useRef< HTMLDivElement >( null );

package/src/components/style-sections/position-section/position-section.tsx

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import { type StringPropValue } from '@elementor/editor-props';
-import { isExperimentActive } from '@elementor/editor-v1-adapters';
 import { useSessionStorage } from '@elementor/session';
 import { __ } from '@wordpress/i18n';
 
@@ -44,7 +43,6 @@ export const PositionSection = () => {
 	] );
 
 	const [ dimensionsValuesFromHistory, updateDimensionsHistory, clearDimensionsHistory ] = usePersistDimensions();
-	const isCssIdFeatureActive = isExperimentActive( 'e_v_3_30' );
 
 	const onPositionChange = ( newPosition: string | null, previousPosition: string | null | undefined ) => {
 		const meta = { history: { propDisplayName: DIMENSIONS_LABEL } };
@@ -82,12 +80,8 @@ export const PositionSection = () => {
 				</>
 			) : null }
 
-			{ isCssIdFeatureActive && (
-				<>
-					<PanelDivider />
-					<OffsetField />
-				</>
-			) }
+			<PanelDivider />
+			<OffsetField />
 		</SectionContent>
 	);
 };

package/src/components/style-sections/size-section/size-section.tsx

@@ -1,23 +1,17 @@
 import * as React from 'react';
 import { type RefObject, useRef } from 'react';
-import { AspectRatioControl, type ExtendedOption, SizeControl } from '@elementor/editor-controls';
-import type { StringPropValue } from '@elementor/editor-props';
-import { isExperimentActive } from '@elementor/editor-v1-adapters';
+import { AspectRatioControl, type ExtendedOption, PositionControl, SizeControl } from '@elementor/editor-controls';
 import { Grid, Stack } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
 import { StylesField, type StylesFieldProps } from '../../../controls-registry/styles-field';
-import { useStylesField } from '../../../hooks/use-styles-field';
 import { ControlLabel } from '../../control-label';
 import { PanelDivider } from '../../panel-divider';
 import { SectionContent } from '../../section-content';
 import { StyleTabCollapsibleContent } from '../../style-tab-collapsible-content';
 import { ObjectFitField } from './object-fit-field';
-import { ObjectPositionField } from './object-position-field';
 import { OverflowField } from './overflow-field';
 
-const EXPERIMENT_ID = 'e_v_3_30';
-
 const CssSizeProps = [
 	[
 		{
@@ -52,17 +46,9 @@ const CssSizeProps = [
 ];
 
 const ASPECT_RATIO_LABEL = __( 'Aspect Ratio', 'elementor' );
-const OBJECT_FIT_LABEL = __( 'Object fit', 'elementor' );
 
 export const SizeSection = () => {
-	const { value: fitValue } = useStylesField< StringPropValue >( 'object-fit', {
-		history: { propDisplayName: OBJECT_FIT_LABEL },
-	} );
-
-	const isNotFill = fitValue && fitValue?.value !== 'fill';
-
 	const gridRowRefs: RefObject< HTMLDivElement >[] = [ useRef( null ), useRef( null ), useRef( null ) ];
-	const isVersion330Active = isExperimentActive( EXPERIMENT_ID );
 
 	return (
 		<SectionContent>
@@ -79,22 +65,21 @@ export const SizeSection = () => {
 			<Stack>
 				<OverflowField />
 			</Stack>
-			{ isVersion330Active && (
-				<StyleTabCollapsibleContent fields={ [ 'aspect-ratio', 'object-fit' ] }>
-					<Stack gap={ 2 } pt={ 2 }>
-						<StylesField bind="aspect-ratio" propDisplayName={ ASPECT_RATIO_LABEL }>
-							<AspectRatioControl label={ ASPECT_RATIO_LABEL } />
-						</StylesField>
-						<PanelDivider />
-						<ObjectFitField />
-						{ isNotFill && (
-							<Grid item xs={ 6 }>
-								<ObjectPositionField />
-							</Grid>
-						) }
-					</Stack>
-				</StyleTabCollapsibleContent>
-			) }
+
+			<StyleTabCollapsibleContent fields={ [ 'aspect-ratio', 'object-fit' ] }>
+				<Stack gap={ 2 } pt={ 2 }>
+					<StylesField bind="aspect-ratio" propDisplayName={ ASPECT_RATIO_LABEL }>
+						<AspectRatioControl label={ ASPECT_RATIO_LABEL } />
+					</StylesField>
+					<PanelDivider />
+					<ObjectFitField />
+					<StylesField bind="object-position" propDisplayName={ __( 'Object position', 'elementor' ) }>
+						<Grid item xs={ 6 }>
+							<PositionControl />
+						</Grid>
+					</StylesField>
+				</Stack>
+			</StyleTabCollapsibleContent>
 		</SectionContent>
 	);
 };

package/src/components/style-sections/typography-section/typography-section.tsx

@@ -1,9 +1,5 @@
 import * as React from 'react';
-import type { NumberPropValue } from '@elementor/editor-props';
-import { isExperimentActive } from '@elementor/editor-v1-adapters';
-import { __ } from '@wordpress/i18n';
 
-import { useStylesField } from '../../../hooks/use-styles-field';
 import { PanelDivider } from '../../panel-divider';
 import { SectionContent } from '../../section-content';
 import { StyleTabCollapsibleContent } from '../../style-tab-collapsible-content';
@@ -23,16 +19,7 @@ import { TextStrokeField } from './text-stroke-field';
 import { TransformField } from './transform-field';
 import { WordSpacingField } from './word-spacing-field';
 
-const COLUMN_COUNT_LABEL = __( 'Column count', 'elementor' );
-
 export const TypographySection = () => {
-	const { value: columnCount } = useStylesField< NumberPropValue >( 'column-count', {
-		history: { propDisplayName: COLUMN_COUNT_LABEL },
-	} );
-	const hasMultiColumns = !! ( columnCount?.value && columnCount?.value > 1 );
-
-	const isVersion330Active = isExperimentActive( 'e_v_3_30' );
-
 	return (
 		<SectionContent>
 			<FontFamilyField />
@@ -58,12 +45,8 @@ export const TypographySection = () => {
 					<LineHeightField />
 					<LetterSpacingField />
 					<WordSpacingField />
-					{ isVersion330Active && (
-						<>
-							<ColumnCountField />
-							{ hasMultiColumns && <ColumnGapField /> }
-						</>
-					) }
+					<ColumnCountField />
+					<ColumnGapField />
 					<PanelDivider />
 					<TextDecorationField />
 					<TransformField />

package/src/components/style-tab-collapsible-content.tsx

@@ -1,9 +1,7 @@
 import * as React from 'react';
 import { type PropsWithChildren } from 'react';
-import { isExperimentActive } from '@elementor/editor-v1-adapters';
 
 import { StylesInheritanceSectionIndicators } from '../styles-inheritance/components/styles-inheritance-section-indicators';
-import { EXPERIMENTAL_FEATURES } from '../sync/experiments-flags';
 import { CollapsibleContent } from './collapsible-content';
 type Props = PropsWithChildren< { fields?: string[] } >;
 
@@ -12,9 +10,7 @@ export const StyleTabCollapsibleContent = ( { fields = [], children }: Props ) =
 };
 
 export function getStylesInheritanceIndicators( fields: string[] ) {
-	const isUsingFieldsIndicators = isExperimentActive( EXPERIMENTAL_FEATURES.V_3_30 );
-
-	if ( fields.length === 0 || ! isUsingFieldsIndicators ) {
+	if ( fields.length === 0 ) {
 		return null;
 	}
 

package/src/components/style-tab-section.tsx

@@ -1,8 +1,6 @@
 import * as React from 'react';
-import { isExperimentActive } from '@elementor/editor-v1-adapters';
 
 import { useDefaultPanelSettings } from '../hooks/use-default-panel-settings';
-import { EXPERIMENTAL_FEATURES } from '../sync/experiments-flags';
 import { Section } from './section';
 import { getStylesInheritanceIndicators } from './style-tab-collapsible-content';
 
@@ -18,9 +16,7 @@ export const StyleTabSection = ( { section, fields = [] }: Props ) => {
 	const { component, name, title } = section;
 	const tabDefaults = useDefaultPanelSettings();
 	const SectionComponent = component;
-	const isExpanded = isExperimentActive( EXPERIMENTAL_FEATURES.V_3_30 )
-		? tabDefaults.defaultSectionsExpanded.style?.includes( name )
-		: false;
+	const isExpanded = tabDefaults.defaultSectionsExpanded.style?.includes( name );
 
 	return (
 		<Section title={ title } defaultExpanded={ isExpanded } titleEnd={ getStylesInheritanceIndicators( fields ) }>

package/src/components/style-tab.tsx

@@ -3,8 +3,9 @@ import { useState } from 'react';
 import { CLASSES_PROP_KEY } from '@elementor/editor-props';
 import { useActiveBreakpoint } from '@elementor/editor-responsive';
 import { type StyleDefinitionID, type StyleDefinitionState } from '@elementor/editor-styles';
+import { EXPERIMENTAL_FEATURES, isExperimentActive } from '@elementor/editor-v1-adapters';
 import { SessionStorageProvider } from '@elementor/session';
-import { Divider, Stack } from '@elementor/ui';
+import { Box, Divider, Stack } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
 import { ClassesPropProvider } from '../contexts/classes-prop-context';
@@ -14,6 +15,7 @@ import { StyleProvider } from '../contexts/style-context';
 import { StyleInheritanceProvider } from '../contexts/styles-inheritance-context';
 import { useActiveStyleDefId } from '../hooks/use-active-style-def-id';
 import { CssClassSelector } from './css-classes/css-class-selector';
+import { CustomCss } from './custom-css';
 import { SectionsList } from './sections-list';
 import { BackgroundSection } from './style-sections/background-section/background-section';
 import { BorderSection } from './style-sections/border-section/border-section';
@@ -40,6 +42,7 @@ export const StyleTab = () => {
 	const [ activeStyleDefId, setActiveStyleDefId ] = useActiveStyleDefId( currentClassesProp );
 	const [ activeStyleState, setActiveStyleState ] = useState< StyleDefinitionState | null >( null );
 	const breakpoint = useActiveBreakpoint();
+	const shouldRenderCustomCss = isExperimentActive( EXPERIMENTAL_FEATURES.CUSTOM_CSS );
 
 	return (
 		<ClassesPropProvider prop={ currentClassesProp }>
@@ -155,9 +158,19 @@ export const StyleTab = () => {
 									name: 'Effects',
 									title: __( 'Effects', 'elementor' ),
 								} }
-								fields={ [ 'box-shadow' ] }
+								fields={ [ 'box-shadow', 'opacity', 'transform', 'filter', 'backdrop-filter' ] }
 							/>
+							{ shouldRenderCustomCss && (
+								<StyleTabSection
+									section={ {
+										component: CustomCss,
+										name: 'Custom CSS',
+										title: __( 'Custom CSS', 'elementor' ),
+									} }
+								/>
+							) }
 						</SectionsList>
+						<Box sx={ { height: '150px' } } />
 					</StyleInheritanceProvider>
 				</SessionStorageProvider>
 			</StyleProvider>

package/src/controls-actions.ts

@@ -1,7 +1,7 @@
 import { createMenu } from '@elementor/menus';
 
 import Action from './action';
-import PopoverAction from './popover-action';
+import { PopoverAction } from './popover-action';
 
 export const controlActionsMenu = createMenu( {
 	components: {

package/src/controls-registry/conditional-field.tsx

@@ -0,0 +1,26 @@
+import { useBoundProp } from '@elementor/editor-controls';
+import { isDependency, isDependencyMet, type PropKey, type PropType } from '@elementor/editor-props';
+
+import { useStylesFields } from '../hooks/use-styles-fields';
+
+export const ConditionalField: React.FC< {
+	children: React.ReactNode;
+} > = ( { children } ) => {
+	const { propType } = useBoundProp();
+
+	const depList = getDependencies( propType );
+
+	const { values: depValues } = useStylesFields( depList );
+
+	const isHidden = ! isDependencyMet( propType?.dependencies, depValues );
+
+	return isHidden ? null : children;
+};
+
+export function getDependencies( propType?: PropType ): PropKey[] {
+	if ( ! propType?.dependencies?.terms.length ) {
+		return [];
+	}
+
+	return propType.dependencies.terms.flatMap( ( term ) => ( ! isDependency( term ) ? term.path : [] ) );
+}