@elementor/editor-editing-panel 1.44.0 → 1.45.0

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

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { type MutableRefObject, useRef } from 'react';
 import { SizeControl } from '@elementor/editor-controls';
 import { SideBottomIcon, SideLeftIcon, SideRightIcon, SideTopIcon } from '@elementor/icons';
 import { Grid, Stack, withDirection } from '@elementor/ui';
@@ -6,6 +7,7 @@ import { __ } from '@wordpress/i18n';
 
 import { StylesField } from '../../../controls-registry/styles-field';
 import { useDirection } from '../../../hooks/use-direction';
+import { UiProviders } from '../../../styles-inheritance/components/ui-providers';
 import { ControlLabel } from '../../control-label';
 import { RotatedIcon } from '../layout-section/utils/rotated-icon';
 
@@ -29,31 +31,47 @@ const getInlineEndLabel = ( isSiteRtl: boolean ) =>
 
 export const DimensionsField = () => {
 	const { isSiteRtl } = useDirection();
+	const rowRefs: MutableRefObject< HTMLElement | undefined >[] = [ useRef(), useRef() ];
 
 	return (
-		<>
-			<Stack direction="row" gap={ 2 } flexWrap="nowrap">
-				<DimensionField side="inset-block-start" label={ __( 'Top', 'elementor' ) } />
-				<DimensionField side="inset-inline-end" label={ getInlineEndLabel( isSiteRtl ) } />
+		<UiProviders>
+			<Stack direction="row" gap={ 2 } flexWrap="nowrap" ref={ rowRefs[ 0 ] }>
+				<DimensionField side="inset-block-start" label={ __( 'Top', 'elementor' ) } rowRef={ rowRefs[ 0 ] } />
+				<DimensionField
+					side="inset-inline-end"
+					label={ getInlineEndLabel( isSiteRtl ) }
+					rowRef={ rowRefs[ 0 ] }
+				/>
 			</Stack>
-			<Stack direction="row" gap={ 2 } flexWrap="nowrap">
-				<DimensionField side="inset-block-end" label={ __( 'Bottom', 'elementor' ) } />
-				<DimensionField side="inset-inline-start" label={ getInlineStartLabel( isSiteRtl ) } />
+			<Stack direction="row" gap={ 2 } flexWrap="nowrap" ref={ rowRefs[ 1 ] }>
+				<DimensionField side="inset-block-end" label={ __( 'Bottom', 'elementor' ) } rowRef={ rowRefs[ 1 ] } />
+				<DimensionField
+					side="inset-inline-start"
+					label={ getInlineStartLabel( isSiteRtl ) }
+					rowRef={ rowRefs[ 1 ] }
+				/>
 			</Stack>
-		</>
+		</UiProviders>
 	);
 };
-const DimensionField = ( { side, label }: { side: Side; label: string } ) => {
-	return (
-		<StylesField bind={ side }>
-			<Grid container gap={ 0.75 } alignItems="center">
-				<Grid item xs={ 12 }>
-					<ControlLabel>{ label }</ControlLabel>
-				</Grid>
-				<Grid item xs={ 12 }>
-					<SizeControl startIcon={ sideIcons[ side ] } extendedValues={ [ 'auto' ] } />
-				</Grid>
+
+const DimensionField = ( {
+	side,
+	label,
+	rowRef,
+}: {
+	side: Side;
+	label: string;
+	rowRef: MutableRefObject< HTMLElement | undefined >;
+} ) => (
+	<StylesField bind={ side }>
+		<Grid container gap={ 0.75 } alignItems="center">
+			<Grid item xs={ 12 }>
+				<ControlLabel>{ label }</ControlLabel>
 			</Grid>
-		</StylesField>
-	);
-};
+			<Grid item xs={ 12 }>
+				<SizeControl startIcon={ sideIcons[ side ] } extendedOptions={ [ 'auto' ] } anchorRef={ rowRef } />
+			</Grid>
+		</Grid>
+	</StylesField>
+);

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

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { type MutableRefObject, useRef } from 'react';
 import { SizeControl } from '@elementor/editor-controls';
 import { Grid } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
@@ -7,14 +8,16 @@ import { StylesField } from '../../../controls-registry/styles-field';
 import { ControlLabel } from '../../control-label';
 
 export const OffsetField = () => {
+	const rowRef: MutableRefObject< HTMLElement | undefined > = useRef();
+
 	return (
 		<StylesField bind="scroll-margin-top">
-			<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap">
+			<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap" ref={ rowRef }>
 				<Grid item xs={ 6 }>
 					<ControlLabel>{ __( 'Anchor offset', 'elementor' ) }</ControlLabel>
 				</Grid>
 				<Grid item xs={ 6 }>
-					<SizeControl units={ [ 'px', 'em', 'rem', 'vw', 'vh' ] } />
+					<SizeControl units={ [ 'px', 'em', 'rem', 'vw', 'vh' ] } anchorRef={ rowRef } />
 				</Grid>
 			</Grid>
 		</StylesField>

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

@@ -1,5 +1,6 @@
 import * as React from 'react';
-import { AspectRatioControl, type ExtendedValue, SizeControl } from '@elementor/editor-controls';
+import { type MutableRefObject, 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 { Grid, Stack } from '@elementor/ui';
@@ -15,47 +16,60 @@ 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 = [
+	[
+		{
+			bind: 'width',
+			label: __( 'Width', 'elementor' ),
+		},
+		{
+			bind: 'height',
+			label: __( 'Height', 'elementor' ),
+		},
+	],
+	[
+		{
+			bind: 'min-width',
+			label: __( 'Min width', 'elementor' ),
+		},
+		{
+			bind: 'min-height',
+			label: __( 'Min height', 'elementor' ),
+		},
+	],
+	[
+		{
+			bind: 'max-width',
+			label: __( 'Max width', 'elementor' ),
+		},
+		{
+			bind: 'max-height',
+			label: __( 'Max height', 'elementor' ),
+		},
+	],
+];
+
 export const SizeSection = () => {
 	const [ fitValue ] = useStylesField< StringPropValue >( 'object-fit' );
 
 	const isNotFill = fitValue && fitValue?.value !== 'fill';
 
-	const isVersion330Active = isExperimentActive( 'e_v_3_30' );
+	const gridRowRefs: MutableRefObject< HTMLElement | undefined >[] = [ useRef(), useRef(), useRef() ];
+	const isVersion330Active = isExperimentActive( EXPERIMENT_ID );
 
 	return (
 		<SectionContent>
-			<Grid container gap={ 2 } flexWrap="nowrap">
-				<Grid item xs={ 6 }>
-					<SizeField bind="width" label={ __( 'Width', 'elementor' ) } extendedValues={ [ 'auto' ] } />
-				</Grid>
-				<Grid item xs={ 6 }>
-					<SizeField bind="height" label={ __( 'Height', 'elementor' ) } extendedValues={ [ 'auto' ] } />
-				</Grid>
-			</Grid>
-			<Grid container gap={ 2 } flexWrap="nowrap">
-				<Grid item xs={ 6 }>
-					<SizeField
-						bind="min-width"
-						label={ __( 'Min width', 'elementor' ) }
-						extendedValues={ [ 'auto' ] }
-					/>
+			{ CssSizeProps.map( ( row, rowIndex ) => (
+				<Grid key={ rowIndex } container gap={ 2 } flexWrap="nowrap" ref={ gridRowRefs[ rowIndex ] }>
+					{ row.map( ( props ) => (
+						<Grid item xs={ 6 } key={ props.bind }>
+							<SizeField { ...props } rowRef={ gridRowRefs[ rowIndex ] } extendedOptions={ [ 'auto' ] } />
+						</Grid>
+					) ) }
 				</Grid>
-				<Grid item xs={ 6 }>
-					<SizeField
-						bind="min-height"
-						label={ __( 'Min height', 'elementor' ) }
-						extendedValues={ [ 'auto' ] }
-					/>
-				</Grid>
-			</Grid>
-			<Grid container gap={ 2 } flexWrap="nowrap">
-				<Grid item xs={ 6 }>
-					<SizeField bind="max-width" label={ __( 'Max width', 'elementor' ) } />
-				</Grid>
-				<Grid item xs={ 6 }>
-					<SizeField bind="max-height" label={ __( 'Max height', 'elementor' ) } />
-				</Grid>
-			</Grid>
+			) ) }
 			<PanelDivider />
 			<Stack>
 				<OverflowField />
@@ -83,10 +97,11 @@ export const SizeSection = () => {
 type ControlProps = {
 	bind: StylesFieldProps[ 'bind' ];
 	label: string;
-	extendedValues?: ExtendedValue[];
+	rowRef: MutableRefObject< HTMLElement | undefined >;
+	extendedOptions?: ExtendedOption[];
 };
 
-const SizeField = ( { label, bind, extendedValues }: ControlProps ) => {
+const SizeField = ( { label, bind, rowRef, extendedOptions }: ControlProps ) => {
 	return (
 		<StylesField bind={ bind }>
 			<Grid container gap={ 0.75 } alignItems="center">
@@ -94,7 +109,7 @@ const SizeField = ( { label, bind, extendedValues }: ControlProps ) => {
 					<ControlLabel>{ label }</ControlLabel>
 				</Grid>
 				<Grid item xs={ 12 }>
-					<SizeControl extendedValues={ extendedValues } />
+					<SizeControl extendedOptions={ extendedOptions } anchorRef={ rowRef } />
 				</Grid>
 			</Grid>
 		</StylesField>

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

@@ -16,7 +16,7 @@ export const SpacingSection = () => {
 				<LinkedDimensionsControl
 					label={ __( 'Margin', 'elementor' ) }
 					isSiteRtl={ isSiteRtl }
-					extendedValues={ [ 'auto' ] }
+					extendedOptions={ [ 'auto' ] }
 				/>
 			</StylesField>
 			<PanelDivider />

package/src/components/style-sections/typography-section/column-gap-field.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { type MutableRefObject, useRef } from 'react';
 import { SizeControl } from '@elementor/editor-controls';
 import { Grid } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
@@ -7,14 +8,16 @@ import { StylesField } from '../../../controls-registry/styles-field';
 import { ControlLabel } from '../../control-label';
 
 export const ColumnGapField = () => {
+	const rowRef: MutableRefObject< HTMLElement | undefined > = useRef();
+
 	return (
 		<StylesField bind="column-gap">
-			<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap">
+			<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap" ref={ rowRef }>
 				<Grid item xs={ 6 }>
 					<ControlLabel>{ __( 'Column gap', 'elementor' ) }</ControlLabel>
 				</Grid>
 				<Grid item xs={ 6 }>
-					<SizeControl />
+					<SizeControl anchorRef={ rowRef } />
 				</Grid>
 			</Grid>
 		</StylesField>

package/src/components/style-sections/typography-section/font-size-field.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { type MutableRefObject, useRef } from 'react';
 import { SizeControl } from '@elementor/editor-controls';
 import { Grid } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
@@ -7,14 +8,16 @@ import { StylesField } from '../../../controls-registry/styles-field';
 import { ControlLabel } from '../../control-label';
 
 export const FontSizeField = () => {
+	const rowRef: MutableRefObject< HTMLElement | undefined > = useRef();
+
 	return (
 		<StylesField bind="font-size">
-			<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap">
+			<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap" ref={ rowRef }>
 				<Grid item xs={ 6 }>
 					<ControlLabel>{ __( 'Font size', 'elementor' ) }</ControlLabel>
 				</Grid>
 				<Grid item xs={ 6 }>
-					<SizeControl />
+					<SizeControl anchorRef={ rowRef } />
 				</Grid>
 			</Grid>
 		</StylesField>

package/src/components/style-sections/typography-section/letter-spacing-field.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { type MutableRefObject, useRef } from 'react';
 import { SizeControl } from '@elementor/editor-controls';
 import { Grid } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
@@ -7,14 +8,16 @@ import { StylesField } from '../../../controls-registry/styles-field';
 import { ControlLabel } from '../../control-label';
 
 export const LetterSpacingField = () => {
+	const rowRef: MutableRefObject< HTMLElement | undefined > = useRef();
+
 	return (
 		<StylesField bind="letter-spacing">
-			<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap">
+			<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap" ref={ rowRef }>
 				<Grid item xs={ 6 }>
 					<ControlLabel>{ __( 'Letter spacing', 'elementor' ) }</ControlLabel>
 				</Grid>
 				<Grid item xs={ 6 }>
-					<SizeControl />
+					<SizeControl anchorRef={ rowRef } />
 				</Grid>
 			</Grid>
 		</StylesField>

package/src/components/style-sections/typography-section/line-height-field.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { type MutableRefObject, useRef } from 'react';
 import { SizeControl } from '@elementor/editor-controls';
 import { Grid } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
@@ -7,14 +8,16 @@ import { StylesField } from '../../../controls-registry/styles-field';
 import { ControlLabel } from '../../control-label';
 
 export const LineHeightField = () => {
+	const rowRef: MutableRefObject< HTMLElement | undefined > = useRef();
+
 	return (
 		<StylesField bind="line-height">
-			<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap">
+			<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap" ref={ rowRef }>
 				<Grid item xs={ 6 }>
 					<ControlLabel>{ __( 'Line height', 'elementor' ) }</ControlLabel>
 				</Grid>
 				<Grid item xs={ 6 }>
-					<SizeControl />
+					<SizeControl anchorRef={ rowRef } />
 				</Grid>
 			</Grid>
 		</StylesField>

package/src/components/style-sections/typography-section/text-alignment-field.tsx

@@ -5,6 +5,7 @@ import { Grid, withDirection } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
 import { StylesField } from '../../../controls-registry/styles-field';
+import { UiProviders } from '../../../styles-inheritance/components/ui-providers';
 import { ControlLabel } from '../../control-label';
 
 type Alignments = 'start' | 'center' | 'end' | 'justify';
@@ -41,15 +42,17 @@ const options: ToggleButtonGroupItem< Alignments >[] = [
 
 export const TextAlignmentField = () => {
 	return (
-		<StylesField bind={ 'text-align' }>
-			<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap">
-				<Grid item xs={ 6 }>
-					<ControlLabel>{ __( 'Text align', 'elementor' ) }</ControlLabel>
+		<UiProviders>
+			<StylesField bind={ 'text-align' }>
+				<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap">
+					<Grid item xs={ 6 }>
+						<ControlLabel>{ __( 'Text align', 'elementor' ) }</ControlLabel>
+					</Grid>
+					<Grid item xs={ 6 } display="flex" justifyContent="end">
+						<ToggleControl options={ options } />
+					</Grid>
 				</Grid>
-				<Grid item xs={ 6 } display="flex" justifyContent="end">
-					<ToggleControl options={ options } />
-				</Grid>
-			</Grid>
-		</StylesField>
+			</StylesField>
+		</UiProviders>
 	);
 };

package/src/components/style-sections/typography-section/word-spacing-field.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { type MutableRefObject, useRef } from 'react';
 import { SizeControl } from '@elementor/editor-controls';
 import { Grid } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
@@ -7,14 +8,16 @@ import { StylesField } from '../../../controls-registry/styles-field';
 import { ControlLabel } from '../../control-label';
 
 export const WordSpacingField = () => {
+	const rowRef: MutableRefObject< HTMLElement | undefined > = useRef();
+
 	return (
 		<StylesField bind="word-spacing">
-			<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap">
+			<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap" ref={ rowRef }>
 				<Grid item xs={ 6 }>
 					<ControlLabel>{ __( 'Word spacing', 'elementor' ) }</ControlLabel>
 				</Grid>
 				<Grid item xs={ 6 }>
-					<SizeControl />
+					<SizeControl anchorRef={ rowRef } />
 				</Grid>
 			</Grid>
 		</StylesField>

package/src/dynamics/components/background-control-dynamic-tag.tsx

@@ -0,0 +1,48 @@
+import * as React from 'react';
+import { PropKeyProvider, PropProvider, useBoundProp } from '@elementor/editor-controls';
+import {
+	backgroundImageOverlayPropTypeUtil,
+	type BackgroundOverlayImagePropType,
+	type BackgroundOverlayPropType,
+	type ObjectPropType,
+	type UnionPropType,
+} from '@elementor/editor-props';
+import { DatabaseIcon } from '@elementor/icons';
+
+import { useDynamicTag } from '../hooks/use-dynamic-tag';
+
+// Since this is injected, the initial prop provider does not dig into the nested structure of the value.
+// We need to synthetically create a type that matches the expected structure of the value.
+
+export const BackgroundControlDynamicTagIcon = () => <DatabaseIcon fontSize="tiny" />;
+
+export const BackgroundControlDynamicTagLabel = ( { value }: { value: BackgroundOverlayPropType } ) => {
+	const context = useBoundProp( backgroundImageOverlayPropTypeUtil );
+
+	return (
+		<PropProvider { ...context } value={ value.value }>
+			<PropKeyProvider bind="image">
+				<Wrapper rawValue={ value.value } />
+			</PropKeyProvider>
+		</PropProvider>
+	);
+};
+
+const Wrapper = ( { rawValue }: { rawValue: BackgroundOverlayPropType[ 'value' ] } ) => {
+	const { propType } = useBoundProp< BackgroundOverlayPropType, UnionPropType >();
+
+	const imageOverlayPropType = propType.prop_types[ 'background-image-overlay' ] as ObjectPropType;
+	return (
+		<PropProvider propType={ imageOverlayPropType.shape.image } value={ rawValue } setValue={ () => void 0 }>
+			<PropKeyProvider bind="src">
+				<Content rawValue={ rawValue.image } />
+			</PropKeyProvider>
+		</PropProvider>
+	);
+};
+
+const Content = ( { rawValue }: { rawValue: BackgroundOverlayImagePropType } ) => {
+	const src = rawValue.value.src;
+	const dynamicTag = useDynamicTag( src.value.name || '' );
+	return <React.Fragment>{ dynamicTag?.label }</React.Fragment>;
+};

package/src/dynamics/init.ts

@@ -1,7 +1,14 @@
 import { settingsTransformersRegistry, styleTransformersRegistry } from '@elementor/editor-canvas';
+import { injectIntoRepeaterItemIcon, injectIntoRepeaterItemLabel } from '@elementor/editor-controls';
+import { type BackgroundOverlayPropType, type PropValue } from '@elementor/editor-props';
+import { type InjectedComponent } from '@elementor/locations';
 
 import { registerControlReplacement } from '../control-replacement';
 import { controlActionsMenu } from '../controls-actions';
+import {
+	BackgroundControlDynamicTagIcon,
+	BackgroundControlDynamicTagLabel,
+} from './components/background-control-dynamic-tag';
 import { DynamicSelectionControl } from './components/dynamic-selection-control';
 import { dynamicTransformer } from './dynamic-transformer';
 import { usePropDynamicAction } from './hooks/use-prop-dynamic-action';
@@ -15,6 +22,20 @@ export const init = () => {
 		condition: ( { value } ) => isDynamicPropValue( value ),
 	} );
 
+	injectIntoRepeaterItemLabel( {
+		id: 'dynamic-background-image',
+		condition: ( { value } ) =>
+			isDynamicPropValue( ( value as BackgroundOverlayPropType ).value?.image?.value?.src ),
+		component: BackgroundControlDynamicTagLabel as InjectedComponent< { value: PropValue } >,
+	} );
+
+	injectIntoRepeaterItemIcon( {
+		id: 'dynamic-background-image',
+		condition: ( { value } ) =>
+			isDynamicPropValue( ( value as BackgroundOverlayPropType ).value?.image?.value?.src ),
+		component: BackgroundControlDynamicTagIcon,
+	} );
+
 	registerPopoverAction( {
 		id: 'dynamic-tags',
 		useProps: usePropDynamicAction,

package/src/styles-inheritance/components/ui-providers.tsx

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { DirectionProvider, ThemeProvider } from '@elementor/ui';
+
+import { useDirection } from '../../hooks/use-direction';
+
+interface UiProvidersProps {
+	children: React.ReactNode;
+}
+
+export const UiProviders: React.FC< UiProvidersProps > = ( { children } ) => {
+	const { isSiteRtl } = useDirection();
+
+	return (
+		<DirectionProvider rtl={ isSiteRtl }>
+			<ThemeProvider>{ children }</ThemeProvider>
+		</DirectionProvider>
+	);
+};