@elementor/editor-controls 0.6.0 → 0.7.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@elementor/editor-controls",
   "description": "This package contains the controls model and utils for the Elementor editor",
-  "version": "0.6.0",
+  "version": "0.7.0",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -40,12 +40,12 @@
     "dev": "tsup --config=../../tsup.dev.ts"
   },
   "dependencies": {
-    "@elementor/editor-props": "0.7.0",
-    "@elementor/icons": "^1.20.0",
+    "@elementor/editor-props": "0.8.0",
+    "@elementor/icons": "1.24.0",
     "@elementor/session": "0.1.0",
-    "@elementor/ui": "^1.22.0",
+    "@elementor/ui": "1.23.3",
     "@elementor/utils": "0.3.0",
-    "@elementor/wp-media": "0.2.3",
+    "@elementor/wp-media": "0.4.0",
     "@wordpress/i18n": "^5.13.0"
   },
   "peerDependencies": {

package/src/components/repeater.tsx

@@ -35,6 +35,7 @@ export type RepeaterProps< T > = {
 		Content: React.ComponentType< {
 			anchorEl: AnchorEl;
 			bind: PropKey;
+			value: T;
 		} >;
 	};
 };
@@ -100,7 +101,7 @@ export const Repeater = < T, >( {
 						duplicateItem={ () => duplicateRepeaterItem( index ) }
 						toggleDisableItem={ () => toggleDisableRepeaterItem( index ) }
 					>
-						{ ( props ) => <itemSettings.Content { ...props } bind={ String( index ) } /> }
+						{ ( props ) => <itemSettings.Content { ...props } value={ value } bind={ String( index ) } /> }
 					</RepeaterItem>
 				) ) }
 			</Stack>

package/src/controls/autocomplete-control.tsx

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { useState } from 'react';
 import { stringPropTypeUtil, type urlPropTypeUtil } from '@elementor/editor-props';
 import { XIcon } from '@elementor/icons';
 import {
@@ -42,30 +41,23 @@ export const AutocompleteControl = createControl(
 		minInputLength = 2,
 	}: Props ) => {
 		const { value = '', setValue } = useBoundProp( propType );
-		const [ inputValue, setInputValue ] = useState(
-			value && options[ value ]?.label ? options[ value ]?.label : value
-		);
 
 		const hasSelectedValue = !! (
-			inputValue &&
-			( options[ inputValue ] || Object.values( options ).find( ( { label } ) => label === inputValue ) )
+			value &&
+			( options[ value ] || Object.values( options ).find( ( { label } ) => label === value ) )
 		);
-		const allowClear = !! inputValue;
+		const allowClear = !! value;
 		const formattedOptions = Object.keys( options );
 
-		const handleChange = ( _?: React.SyntheticEvent | null, newValue: string | null = null ) => {
-			const formattedInputValue = newValue && options[ newValue ]?.label ? options[ newValue ]?.label : newValue;
-
-			setInputValue( formattedInputValue || '' );
-
-			if ( ! allowCustomValues && newValue && ! options[ newValue ] ) {
-				return;
-			}
+		const onOptionSelect = ( _: React.SyntheticEvent | null, newValue: string | null ) => {
+			setValue( newValue );
+		};
 
+		const handleChange = ( newValue: string | null ) => {
 			setValue( newValue );
 		};
 
-		const filterOptions = () => {
+		const filterOptions = ( _: string[], { inputValue }: { inputValue: string | null } ) => {
 			const formattedValue = inputValue?.toLowerCase() || '';
 
 			if ( formattedValue.length < minInputLength ) {
@@ -84,7 +76,7 @@ export const AutocompleteControl = createControl(
 		};
 
 		// Prevents MUI warning when freeSolo/allowCustomValues is false
-		const muiWarningPreventer = () => allowCustomValues || !! filterOptions().length;
+		const muiWarningPreventer = () => allowCustomValues || !! filterOptions( [], { inputValue: value } ).length;
 
 		return (
 			<ControlActions>
@@ -92,11 +84,9 @@ export const AutocompleteControl = createControl(
 					forcePopupIcon={ false }
 					disableClearable={ true } // Disabled component's auto clear icon to use our custom one instead
 					freeSolo={ muiWarningPreventer() }
-					value={ inputValue || '' }
+					value={ value || '' }
 					size={ 'tiny' }
-					onChange={ handleChange }
-					onInputChange={ handleChange }
-					onBlur={ allowCustomValues ? undefined : () => handleChange( null, value ) }
+					onChange={ onOptionSelect }
 					readOnly={ hasSelectedValue }
 					options={ formattedOptions }
 					getOptionKey={ ( option ) => option }
@@ -135,14 +125,19 @@ const TextInput = ( {
 }: {
 	params: AutocompleteRenderInputParams;
 	allowClear: boolean;
-	handleChange: ( _?: React.SyntheticEvent | null, newValue?: string | null ) => void;
+	handleChange: ( newValue: string | null ) => void;
 	placeholder: string;
 	hasSelectedValue: boolean;
 } ) => {
+	const onChange = ( event: React.ChangeEvent< HTMLInputElement > ) => {
+		handleChange( event.target.value );
+	};
+
 	return (
 		<TextField
 			{ ...params }
 			placeholder={ placeholder }
+			onChange={ onChange }
 			sx={ {
 				'& .MuiInputBase-input': {
 					cursor: hasSelectedValue ? 'default' : undefined,
@@ -163,11 +158,11 @@ const ClearButton = ( {
 }: {
 	params: AutocompleteRenderInputParams;
 	allowClear: boolean;
-	handleChange: ( _?: React.SyntheticEvent | null, newValue?: string | null ) => void;
+	handleChange: ( newValue: string | null ) => void;
 } ) => (
 	<InputAdornment position="end">
 		{ allowClear && (
-			<IconButton size={ params.size } onClick={ handleChange } sx={ { cursor: 'pointer' } }>
+			<IconButton size={ params.size } onClick={ () => handleChange( null ) } sx={ { cursor: 'pointer' } }>
 				<XIcon fontSize={ params.size } />
 			</IconButton>
 		) }

package/src/controls/background-control/background-overlay/background-image-overlay/background-image-overlay-attachment.tsx

@@ -0,0 +1,38 @@
+import * as React from 'react';
+import { PinIcon, PinnedOffIcon } from '@elementor/icons';
+import { Grid } from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+
+import { ControlLabel } from '../../../../components/control-label';
+import { type ToggleButtonGroupItem } from '../../../../components/control-toggle-button-group';
+import { ToggleControl } from '../../../toggle-control';
+
+type Attachment = 'fixed' | 'scroll';
+
+const attachmentControlOptions: ToggleButtonGroupItem< Attachment >[] = [
+	{
+		value: 'fixed',
+		label: __( 'Fixed', 'elementor' ),
+		renderContent: ( { size } ) => <PinIcon fontSize={ size } />,
+		showTooltip: true,
+	},
+	{
+		value: 'scroll',
+		label: __( 'Scroll', 'elementor' ),
+		renderContent: ( { size } ) => <PinnedOffIcon fontSize={ size } />,
+		showTooltip: true,
+	},
+];
+
+export const BackgroundImageOverlayAttachment = () => {
+	return (
+		<Grid container gap={ 8 } alignItems="center" flexWrap="nowrap">
+			<Grid item xs={ 2 }>
+				<ControlLabel>{ __( 'Attachment', 'elementor' ) }</ControlLabel>
+			</Grid>
+			<Grid item justifyContent="flex-end" xs={ 8 } sx={ { display: 'flex' } }>
+				<ToggleControl options={ attachmentControlOptions } />
+			</Grid>
+		</Grid>
+	);
+};

package/src/controls/background-control/background-overlay/background-image-overlay/background-image-overlay-position.tsx

@@ -0,0 +1,31 @@
+import * as React from 'react';
+import { Grid } from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+
+import { ControlLabel } from '../../../../components/control-label';
+import { SelectControl } from '../../../select-control';
+
+const backgroundPositionOptions = [
+	{ label: __( 'Center Center', 'elementor' ), value: 'center center' },
+	{ label: __( 'Center Left', 'elementor' ), value: 'center left' },
+	{ label: __( 'Center Right', 'elementor' ), value: 'center right' },
+	{ label: __( 'Top Center', 'elementor' ), value: 'top center' },
+	{ label: __( 'Top Left', 'elementor' ), value: 'top left' },
+	{ label: __( 'Top Right', 'elementor' ), value: 'top right' },
+	{ label: __( 'Bottom Center', 'elementor' ), value: 'bottom center' },
+	{ label: __( 'Bottom Left', 'elementor' ), value: 'bottom left' },
+	{ label: __( 'Bottom Right', 'elementor' ), value: 'bottom right' },
+];
+
+export const BackgroundImageOverlayPosition = () => {
+	return (
+		<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap">
+			<Grid item xs={ 6 }>
+				<ControlLabel>{ __( 'Position', 'elementor' ) }</ControlLabel>
+			</Grid>
+			<Grid item xs={ 6 }>
+				<SelectControl options={ backgroundPositionOptions } />
+			</Grid>
+		</Grid>
+	);
+};

package/src/controls/background-control/background-overlay/background-image-overlay/background-image-overlay-repeat.tsx

@@ -0,0 +1,50 @@
+import * as React from 'react';
+import { DotsHorizontalIcon, DotsVerticalIcon, GridDotsIcon, XIcon } from '@elementor/icons';
+import { Grid } from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+
+import { ControlLabel } from '../../../../components/control-label';
+import { type ToggleButtonGroupItem } from '../../../../components/control-toggle-button-group';
+import { ToggleControl } from '../../../toggle-control';
+
+type Repeaters = 'repeat' | 'repeat-x' | 'repeat-y' | 'no-repeat';
+
+const repeatControlOptions: ToggleButtonGroupItem< Repeaters >[] = [
+	{
+		value: 'repeat',
+		label: __( 'Repeat', 'elementor' ),
+		renderContent: ( { size } ) => <GridDotsIcon fontSize={ size } />,
+		showTooltip: true,
+	},
+	{
+		value: 'repeat-x',
+		label: __( 'Repeat-x', 'elementor' ),
+		renderContent: ( { size } ) => <DotsHorizontalIcon fontSize={ size } />,
+		showTooltip: true,
+	},
+	{
+		value: 'repeat-y',
+		label: __( 'Repeat-y', 'elementor' ),
+		renderContent: ( { size } ) => <DotsVerticalIcon fontSize={ size } />,
+		showTooltip: true,
+	},
+	{
+		value: 'no-repeat',
+		label: __( 'No-Repeat', 'elementor' ),
+		renderContent: ( { size } ) => <XIcon fontSize={ size } />,
+		showTooltip: true,
+	},
+];
+
+export const BackgroundImageOverlayRepeat = () => {
+	return (
+		<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap">
+			<Grid item xs={ 6 }>
+				<ControlLabel>{ __( 'Repeat', 'elementor' ) }</ControlLabel>
+			</Grid>
+			<Grid item xs={ 6 }>
+				<ToggleControl options={ repeatControlOptions } />
+			</Grid>
+		</Grid>
+	);
+};

package/src/controls/background-control/background-overlay/background-image-overlay/background-image-overlay-resolution.tsx

@@ -0,0 +1,27 @@
+import * as React from 'react';
+import { Grid } from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+
+import { ControlLabel } from '../../../../components/control-label';
+import { SelectControl } from '../../../select-control';
+
+const backgroundResolutionOptions = [
+	{ label: __( 'Thumbnail - 150 x 150', 'elementor' ), value: 'thumbnail' },
+	{ label: __( 'Medium - 300 x 300', 'elementor' ), value: 'medium' },
+	{ label: __( 'Medium Large - 768 x 768' ), value: 'medium_large' },
+	{ label: __( 'Large 1024 x 1024', 'elementor' ), value: 'large' },
+	{ label: __( 'Full', 'elementor' ), value: 'full' },
+];
+
+export const BackgroundImageOverlayResolution = () => {
+	return (
+		<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap">
+			<Grid item xs={ 6 }>
+				<ControlLabel>{ __( 'Resolution', 'elementor' ) }</ControlLabel>
+			</Grid>
+			<Grid item xs={ 6 }>
+				<SelectControl options={ backgroundResolutionOptions } />
+			</Grid>
+		</Grid>
+	);
+};

package/src/controls/background-control/background-overlay/background-image-overlay/background-image-overlay-size.tsx

@@ -0,0 +1,44 @@
+import * as React from 'react';
+import { ArrowBarBothIcon, ArrowsMaximizeIcon } from '@elementor/icons';
+import { Grid } from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+
+import { ControlLabel } from '../../../../components/control-label';
+import { type ToggleButtonGroupItem } from '../../../../components/control-toggle-button-group';
+import { ToggleControl } from '../../../toggle-control';
+
+type Sizes = 'auto' | 'cover' | 'contain';
+
+const sizeControlOptions: ToggleButtonGroupItem< Sizes >[] = [
+	{
+		value: 'auto',
+		label: __( 'Auto', 'elementor' ),
+		renderContent: () => 'Auto',
+		showTooltip: true,
+	},
+	{
+		value: 'cover',
+		label: __( 'Cover', 'elementor' ),
+		renderContent: ( { size } ) => <ArrowsMaximizeIcon fontSize={ size } />,
+		showTooltip: true,
+	},
+	{
+		value: 'contain',
+		label: __( 'Contain', 'elementor' ),
+		renderContent: ( { size } ) => <ArrowBarBothIcon fontSize={ size } />,
+		showTooltip: true,
+	},
+];
+
+export const BackgroundImageOverlaySize = () => {
+	return (
+		<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap">
+			<Grid item xs={ 6 }>
+				<ControlLabel>{ __( 'Size', 'elementor' ) }</ControlLabel>
+			</Grid>
+			<Grid item xs={ 6 } sx={ { display: 'flex', justifyContent: 'flex-end' } }>
+				<ToggleControl options={ sizeControlOptions } />
+			</Grid>
+		</Grid>
+	);
+};

package/src/controls/background-control/background-overlay/background-overlay-repeater-control.tsx

@@ -6,22 +6,39 @@ import {
 	backgroundOverlayPropTypeUtil,
 	type PropKey,
 } from '@elementor/editor-props';
-import { Grid, Stack, UnstableColorIndicator } from '@elementor/ui';
+import { Box, Grid, Stack, Tab, TabPanel, Tabs, UnstableColorIndicator, useTabs } from '@elementor/ui';
 import { useWpMediaAttachment } from '@elementor/wp-media';
 import { __ } from '@wordpress/i18n';
 
 import { PropKeyProvider, PropProvider, useBoundProp } from '../../../bound-prop-context';
-import { ControlLabel } from '../../../components/control-label';
 import { Repeater } from '../../../components/repeater';
 import { createControl } from '../../../create-control';
 import { ColorControl } from '../../color-control';
 import { ImageMediaControl } from '../../image-media-control';
+import { BackgroundImageOverlayAttachment } from './background-image-overlay/background-image-overlay-attachment';
+import { BackgroundImageOverlayPosition } from './background-image-overlay/background-image-overlay-position';
+import { BackgroundImageOverlayRepeat } from './background-image-overlay/background-image-overlay-repeat';
+import { BackgroundImageOverlayResolution } from './background-image-overlay/background-image-overlay-resolution';
+import { BackgroundImageOverlaySize } from './background-image-overlay/background-image-overlay-size';
 
+const defaultImagePlaceholderId = 1;
 const initialBackgroundOverlay: BackgroundOverlayItemPropValue = {
-	$$type: 'background-color-overlay',
-	value: 'rgba(0, 0, 0, 0.2)',
+	$$type: 'background-image-overlay',
+	value: {
+		'image-src': {
+			$$type: 'image-src',
+			value: {
+				id: {
+					$$type: 'image-attachment-id',
+					value: defaultImagePlaceholderId,
+				},
+			},
+		},
+	},
 };
 
+type OverlayType = 'image' | 'color';
+
 export const BackgroundOverlayRepeaterControl = createControl( () => {
 	const { propType, value: overlayValues, setValue } = useBoundProp( backgroundOverlayPropTypeUtil );
 
@@ -46,37 +63,39 @@ const ItemIcon = ( { value }: { value: BackgroundOverlayItemPropValue } ) => (
 	<UnstableColorIndicator size="inherit" component="span" value={ value.value } />
 );
 
-const ItemContent = ( { bind }: { bind: PropKey } ) => {
+const ItemContent = ( { bind, value }: { bind: PropKey; value: BackgroundOverlayItemPropValue } ) => {
 	return (
 		<PropKeyProvider bind={ bind }>
-			<Content />
+			<Content value={ value } />
 		</PropKeyProvider>
 	);
 };
 
-const Content = () => {
-	const propContext = useBoundProp( backgroundImageOverlayPropTypeUtil );
+const Content = ( { value }: { value: BackgroundOverlayItemPropValue } ) => {
+	const activeTab = deriveOverlayType( value.$$type );
+	const { getTabsProps, getTabProps, getTabPanelProps } = useTabs< OverlayType >( activeTab );
 
 	return (
-		<Stack gap={ 1.5 }>
-			<Grid container spacing={ 1 } alignItems="center">
-				<Grid item xs={ 12 }>
-					<ControlLabel>{ __( 'Color', 'elementor' ) }</ControlLabel>
-				</Grid>
-				<Grid item xs={ 12 }>
-					<ColorControl propTypeUtil={ backgroundColorOverlayPropTypeUtil } />
-				</Grid>
-			</Grid>
-			<PropProvider { ...propContext }>
-				<PropKeyProvider bind={ 'image-src' }>
-					<Grid container spacing={ 1 } alignItems="center">
-						<Grid item xs={ 12 }>
-							<ImageMediaControl />
-						</Grid>
+		<Box sx={ { width: '100%' } }>
+			<Box sx={ { borderBottom: 1, borderColor: 'divider' } }>
+				<Tabs { ...getTabsProps() } aria-label={ __( 'Background Overlay', 'elementor' ) }>
+					<Tab label={ __( 'Image', 'elementor' ) } { ...getTabProps( 'image' ) } />
+					<Tab label={ __( 'Color', 'elementor' ) } { ...getTabProps( 'color' ) } />
+				</Tabs>
+			</Box>
+			<TabPanel { ...getTabPanelProps( 'image' ) }>
+				<Stack gap={ 1.5 }>
+					<ImageOverlayContent />
+				</Stack>
+			</TabPanel>
+			<TabPanel { ...getTabPanelProps( 'color' ) }>
+				<Grid container spacing={ 1 } alignItems="center">
+					<Grid item xs={ 12 }>
+						<ColorControl propTypeUtil={ backgroundColorOverlayPropTypeUtil } />
 					</Grid>
-				</PropKeyProvider>
-			</PropProvider>
-		</Stack>
+				</Grid>
+			</TabPanel>
+		</Box>
 	);
 };
 
@@ -101,3 +120,46 @@ const ItemLabelImage = ( { value }: { value: BackgroundOverlayItemPropValue } )
 
 	return <span>{ imageTitle }</span>;
 };
+
+const ImageOverlayContent = () => {
+	const propContext = useBoundProp( backgroundImageOverlayPropTypeUtil );
+
+	return (
+		<PropProvider { ...propContext }>
+			<PropKeyProvider bind={ 'image-src' }>
+				<Grid container spacing={ 1 } alignItems="center">
+					<Grid item xs={ 12 }>
+						<ImageMediaControl />
+					</Grid>
+				</Grid>
+			</PropKeyProvider>
+			<PropKeyProvider bind={ 'resolution' }>
+				<BackgroundImageOverlayResolution />
+			</PropKeyProvider>
+			<PropKeyProvider bind={ 'position' }>
+				<BackgroundImageOverlayPosition />
+			</PropKeyProvider>
+			<PropKeyProvider bind={ 'repeat' }>
+				<BackgroundImageOverlayRepeat />
+			</PropKeyProvider>
+			<PropKeyProvider bind={ 'size' }>
+				<BackgroundImageOverlaySize />
+			</PropKeyProvider>
+			<PropKeyProvider bind={ 'attachment' }>
+				<BackgroundImageOverlayAttachment />
+			</PropKeyProvider>
+		</PropProvider>
+	);
+};
+
+const deriveOverlayType = ( type: string ): OverlayType => {
+	if ( type === 'background-color-overlay' ) {
+		return 'color';
+	}
+
+	if ( type === 'background-image-overlay' ) {
+		return 'image';
+	}
+
+	throw new Error( `Invalid overlay type: ${ type }` );
+};

package/src/controls/box-shadow-repeater-control.tsx

@@ -70,7 +70,7 @@ const Content = ( { anchorEl }: { anchorEl: HTMLElement | null } ) => {
 						<SelectControl
 							options={ [
 								{ label: __( 'Inset', 'elementor' ), value: 'inset' },
-								{ label: __( 'Outset', 'elementor' ), value: '' },
+								{ label: __( 'Outset', 'elementor' ), value: null },
 							] }
 						/>
 					</Control>
@@ -120,6 +120,7 @@ const ItemLabel = ( { value }: { value: ShadowPropValue } ) => {
 	const { size: spreadSize = '', unit: spreadUnit = '' } = spread?.value || {};
 	const { size: hOffsetSize = 'unset', unit: hOffsetUnit = '' } = hOffset?.value || {};
 	const { size: vOffsetSize = 'unset', unit: vOffsetUnit = '' } = vOffset?.value || {};
+	const positionLabel = position?.value || 'outset';
 
 	const sizes = [
 		hOffsetSize + hOffsetUnit,
@@ -130,7 +131,7 @@ const ItemLabel = ( { value }: { value: ShadowPropValue } ) => {
 
 	return (
 		<span style={ { textTransform: 'capitalize' } }>
-			{ position ?? 'outset' }: { sizes }
+			{ positionLabel }: { sizes }
 		</span>
 	);
 };

package/src/controls/equal-unequal-sizes-control.tsx

@@ -77,7 +77,7 @@ export function EqualUnequalSizesControl< TMultiPropType extends string, TPropVa
 		const isEqual = isEqualSizes( newMappedValues, items );
 
 		if ( isEqual ) {
-			return setSizeValue( Object.values( newMappedValues )[ 0 ].value );
+			return setSizeValue( Object.values( newMappedValues )[ 0 ]?.value );
 		}
 
 		setMultiSizeValue( newMappedValues );
@@ -91,6 +91,8 @@ export function EqualUnequalSizesControl< TMultiPropType extends string, TPropVa
 		return splitEqualValue() ?? null;
 	};
 
+	const isMixed = !! multiSizeValue;
+
 	return (
 		<>
 			<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap" ref={ controlRef }>
@@ -99,7 +101,7 @@ export function EqualUnequalSizesControl< TMultiPropType extends string, TPropVa
 				</Grid>
 				<Grid item xs={ 6 }>
 					<Stack direction="row" alignItems="center" gap={ 1 }>
-						<SizeControl placeholder={ __( 'MIXED', 'elementor' ) } />
+						<SizeControl placeholder={ isMixed ? __( 'Mixed', 'elementor' ) : undefined } />
 						<ToggleButton
 							size={ 'tiny' }
 							value={ 'check' }

package/src/controls/gap-control.tsx

@@ -1,48 +1,42 @@
 import * as React from 'react';
-import { gapPropTypeUtil, type GapPropValue } from '@elementor/editor-props';
+import { layoutDirectionPropTypeUtil, type PropKey, sizePropTypeUtil } from '@elementor/editor-props';
 import { DetachIcon, LinkIcon } from '@elementor/icons';
 import { Grid, Stack, ToggleButton } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
-import { PropKeyProvider, PropProvider, type SetValue, useBoundProp } from '../bound-prop-context';
+import { PropKeyProvider, PropProvider, useBoundProp } from '../bound-prop-context';
 import { ControlLabel } from '../components/control-label';
 import { createControl } from '../create-control';
 import { SizeControl } from './size-control';
 
-export type Gap = 'row' | 'column';
-
 export const GapControl = createControl( ( { label }: { label: string } ) => {
-	const { propType, value, setValue } = useBoundProp( gapPropTypeUtil );
-	const { column, row, isLinked = true } = value || {};
+	const {
+		value: directionValue,
+		setValue: setDirectionValue,
+		propType,
+	} = useBoundProp( layoutDirectionPropTypeUtil );
+	const { value: sizeValue, setValue: setSizeValue } = useBoundProp( sizePropTypeUtil );
+
+	const isLinked = ! directionValue && ! sizeValue ? true : !! sizeValue;
 
-	const setLinkedValue: SetValue< GapPropValue[ 'value' ] > = ( newValue, _, meta ) => {
+	const onLinkToggle = () => {
 		if ( ! isLinked ) {
-			return setValue( newValue );
+			setSizeValue( directionValue?.column.value );
+			return;
 		}
 
-		const newDimension = newValue[ meta?.bind as Gap ];
+		const value = sizeValue ? sizePropTypeUtil.create( sizeValue ) : null;
 
-		setValue( {
-			isLinked,
-			column: newDimension,
-			row: newDimension,
+		setDirectionValue( {
+			row: value,
+			column: value,
 		} );
 	};
 
-	const toggleLinked = () => {
-		const updatedValue = {
-			isLinked: ! isLinked,
-			column,
-			row: ! isLinked ? column : row,
-		};
-
-		setValue( updatedValue );
-	};
-
 	const LinkedIcon = isLinked ? LinkIcon : DetachIcon;
 
 	return (
-		<PropProvider propType={ propType } value={ value } setValue={ setLinkedValue }>
+		<PropProvider propType={ propType } value={ directionValue } setValue={ setDirectionValue }>
 			<Stack direction="row" gap={ 2 } flexWrap="nowrap">
 				<ControlLabel>{ label }</ControlLabel>
 				<ToggleButton
@@ -51,7 +45,7 @@ export const GapControl = createControl( ( { label }: { label: string } ) => {
 					value={ 'check' }
 					selected={ isLinked }
 					sx={ { marginLeft: 'auto' } }
-					onChange={ toggleLinked }
+					onChange={ onLinkToggle }
 				>
 					<LinkedIcon fontSize={ 'tiny' } />
 				</ToggleButton>
@@ -62,9 +56,7 @@ export const GapControl = createControl( ( { label }: { label: string } ) => {
 						<ControlLabel>{ __( 'Column', 'elementor' ) }</ControlLabel>
 					</Grid>
 					<Grid item xs={ 12 }>
-						<PropKeyProvider bind="column">
-							<SizeControl />
-						</PropKeyProvider>
+						<Control bind={ 'column' } isLinked={ isLinked } />
 					</Grid>
 				</Grid>
 				<Grid container gap={ 1 } alignItems="center">
@@ -72,12 +64,22 @@ export const GapControl = createControl( ( { label }: { label: string } ) => {
 						<ControlLabel>{ __( 'Row', 'elementor' ) }</ControlLabel>
 					</Grid>
 					<Grid item xs={ 12 }>
-						<PropKeyProvider bind="row">
-							<SizeControl />
-						</PropKeyProvider>
+						<Control bind={ 'row' } isLinked={ isLinked } />
 					</Grid>
 				</Grid>
 			</Stack>
 		</PropProvider>
 	);
 } );
+
+const Control = ( { bind, isLinked }: { bind: PropKey; isLinked: boolean } ) => {
+	if ( isLinked ) {
+		return <SizeControl />;
+	}
+
+	return (
+		<PropKeyProvider bind={ bind }>
+			<SizeControl />
+		</PropKeyProvider>
+	);
+};