@elementor/editor-controls 0.32.0 → 0.34.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.32.0",
+  "version": "0.34.0",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -43,11 +43,11 @@
     "@elementor/editor-current-user": "0.5.0",
     "@elementor/editor-elements": "0.8.4",
     "@elementor/editor-props": "0.12.1",
-    "@elementor/editor-ui": "0.9.0",
+    "@elementor/editor-ui": "0.10.0",
     "@elementor/editor-v1-adapters": "0.12.0",
     "@elementor/env": "0.3.5",
     "@elementor/http-client": "0.3.0",
-    "@elementor/icons": "1.40.1",
+    "@elementor/icons": "1.44.0",
     "@elementor/locations": "0.8.0",
     "@elementor/query": "0.2.4",
     "@elementor/session": "0.1.0",

package/src/bound-prop-context/prop-context.tsx

@@ -15,6 +15,7 @@ type PropContext< T extends PropValue, P extends PropType > = {
 	value: T | null;
 	propType: P;
 	placeholder?: T;
+	disabled?: boolean;
 };
 
 const PropContext = createContext< PropContext< PropValue, PropType > | null >( null );
@@ -29,6 +30,7 @@ export const PropProvider = < T extends PropValue, P extends PropType >( {
 	setValue,
 	propType,
 	placeholder,
+	disabled,
 }: PropProviderProps< T, P > ) => {
 	return (
 		<PropContext.Provider
@@ -37,6 +39,7 @@ export const PropProvider = < T extends PropValue, P extends PropType >( {
 				propType,
 				setValue: setValue as SetValue< PropValue >,
 				placeholder,
+				disabled,
 			} }
 		>
 			{ children }

package/src/bound-prop-context/prop-key-context.tsx

@@ -21,6 +21,7 @@ export type PropKeyContextValue< T, P > = {
 	propType: P;
 	placeholder?: T;
 	path: PropKey[];
+	disabled?: boolean;
 };
 
 const PropKeyContext = createContext< PropKeyContextValue< PropValue, PropType > | null >( null );

package/src/bound-prop-context/use-bound-prop.ts

@@ -19,6 +19,7 @@ type UseBoundProp< TValue extends PropValue > = {
 	placeholder?: TValue;
 	path: PropKey[];
 	restoreValue: () => void;
+	disabled?: boolean;
 };
 
 export function useBoundProp< T extends PropValue = PropValue >(): PropKeyContextValue< T, PropType >;

package/src/components/control-toggle-button-group.tsx

@@ -14,6 +14,7 @@ import {
 	useTheme,
 } from '@elementor/ui';
 
+import ControlActions from '../control-actions/control-actions';
 import { ConditionalTooltip } from './conditional-tooltip';
 
 type RenderContentProps = { size: ToggleButtonProps[ 'size' ] };
@@ -45,6 +46,7 @@ type ExclusiveValue< TValue > = TValue;
 type NonExclusiveValue< TValue > = TValue[];
 
 type Props< TValue > = {
+	disabled?: boolean;
 	justify?: StackProps[ 'justifyContent' ];
 	size?: ToggleButtonProps[ 'size' ];
 	items: ToggleButtonGroupItem< TValue | null >[];
@@ -72,6 +74,7 @@ export const ControlToggleButtonGroup = < TValue, >( {
 	maxItems,
 	exclusive = false,
 	fullWidth = false,
+	disabled,
 }: Props< TValue > ) => {
 	const shouldSliceItems = exclusive && maxItems !== undefined && items.length > maxItems;
 	const menuItems = shouldSliceItems ? items.slice( maxItems - 1 ) : [];
@@ -94,12 +97,13 @@ export const ControlToggleButtonGroup = < TValue, >( {
 	}, [ menuItems?.length, fixedItems.length ] );
 
 	return (
-		<>
+		<ControlActions>
 			<StyledToggleButtonGroup
 				justify={ justify }
 				value={ value }
 				onChange={ handleChange }
 				exclusive={ exclusive }
+				disabled={ disabled }
 				sx={ {
 					direction: isRtl ? 'rtl /* @noflip */' : 'ltr /* @noflip */',
 					display: 'grid',
@@ -129,7 +133,7 @@ export const ControlToggleButtonGroup = < TValue, >( {
 					/>
 				) }
 			</StyledToggleButtonGroup>
-		</>
+		</ControlActions>
 	);
 };
 

package/src/components/popover-content.tsx

@@ -6,10 +6,12 @@ type PopoverContentProps = PropsWithChildren< {
 	alignItems?: 'center';
 	gap?: number;
 	p?: 1.5 | 2 | 2.5;
+	pt?: 2.5;
+	pb?: 3;
 } >;
 
-export const PopoverContent: FC< PopoverContentProps > = ( { alignItems, gap = 1.5, p, children } ) => (
-	<Stack alignItems={ alignItems } gap={ gap } p={ p }>
+export const PopoverContent: FC< PopoverContentProps > = ( { alignItems, gap = 1.5, p, pt, pb, children } ) => (
+	<Stack alignItems={ alignItems } gap={ gap } p={ p } pt={ pt } pb={ pb }>
 		{ children }
 	</Stack>
 );

package/src/components/repeater.tsx

@@ -37,6 +37,7 @@ type RepeaterProps< T > = {
 	addToBottom?: boolean;
 	openOnAdd?: boolean;
 	setValues: ( newValue: T[] ) => void;
+	disabled?: boolean;
 	itemSettings: {
 		initialValues: T;
 		Label: React.ComponentType< { value: T } >;
@@ -54,6 +55,7 @@ const EMPTY_OPEN_ITEM = -1;
 export const Repeater = < T, >( {
 	label,
 	itemSettings,
+	disabled = false,
 	openOnAdd = false,
 	addToBottom = false,
 	values: repeaterValues = [],
@@ -120,10 +122,10 @@ export const Repeater = < T, >( {
 		setItems(
 			items.map( ( value, pos ) => {
 				if ( pos === index ) {
-					const { disabled, ...rest } = value;
+					const { disabled: propDisabled, ...rest } = value;
 
 					// If the items should not be disabled, remove the disabled property.
-					return { ...rest, ...( disabled ? {} : { disabled: true } ) } as Item< T >;
+					return { ...rest, ...( propDisabled ? {} : { disabled: true } ) } as Item< T >;
 				}
 
 				return value;
@@ -141,6 +143,8 @@ export const Repeater = < T, >( {
 		} );
 	};
 
+	const ItemWrapper = disabled ? React.Fragment : SortableItem;
+
 	return (
 		<SectionContent>
 			<Stack
@@ -155,8 +159,9 @@ export const Repeater = < T, >( {
 				</Typography>
 				<ControlAdornments />
 				<IconButton
-					sx={ { ml: 'auto' } }
 					size={ SIZE }
+					sx={ { ml: 'auto' } }
+					disabled={ disabled }
 					onClick={ addRepeaterItem }
 					aria-label={ __( 'Add item', 'elementor' ) }
 				>
@@ -173,9 +178,10 @@ export const Repeater = < T, >( {
 						}
 
 						return (
-							<SortableItem id={ key } key={ `sortable-${ key }` }>
+							<ItemWrapper id={ key } key={ `sortable-${ key }` }>
 								<RepeaterItem
-									disabled={ value?.disabled }
+									disabled={ disabled }
+									propDisabled={ value?.disabled }
 									label={
 										<RepeaterItemLabelSlot value={ value }>
 											<itemSettings.Label value={ value } />
@@ -196,7 +202,7 @@ export const Repeater = < T, >( {
 										<itemSettings.Content { ...props } value={ value } bind={ String( index ) } />
 									) }
 								</RepeaterItem>
-							</SortableItem>
+							</ItemWrapper>
 						);
 					} ) }
 				</SortableProvider>
@@ -207,7 +213,7 @@ export const Repeater = < T, >( {
 
 type RepeaterItemProps = {
 	label: React.ReactNode;
-	disabled?: boolean;
+	propDisabled?: boolean;
 	startIcon: UnstableTagProps[ 'startIcon' ];
 	removeItem: () => void;
 	duplicateItem: () => void;
@@ -215,11 +221,12 @@ type RepeaterItemProps = {
 	children: ( { anchorEl }: { anchorEl: AnchorEl } ) => React.ReactNode;
 	openOnMount: boolean;
 	onOpen: () => void;
+	disabled?: boolean;
 };
 
 const RepeaterItem = ( {
 	label,
-	disabled,
+	propDisabled,
 	startIcon,
 	children,
 	removeItem,
@@ -227,17 +234,19 @@ const RepeaterItem = ( {
 	toggleDisableItem,
 	openOnMount,
 	onOpen,
+	disabled,
 }: RepeaterItemProps ) => {
 	const [ anchorEl, setAnchorEl ] = useState< AnchorEl >( null );
 	const { popoverState, popoverProps, ref, setRef } = usePopover( openOnMount, onOpen );
 
 	const duplicateLabel = __( 'Duplicate', 'elementor' );
-	const toggleLabel = disabled ? __( 'Show', 'elementor' ) : __( 'Hide', 'elementor' );
+	const toggleLabel = propDisabled ? __( 'Show', 'elementor' ) : __( 'Hide', 'elementor' );
 	const removeLabel = __( 'Remove', 'elementor' );
 
 	return (
 		<>
 			<UnstableTag
+				disabled={ disabled }
 				label={ label }
 				showActionsOnHover
 				fullWidth
@@ -255,7 +264,7 @@ const RepeaterItem = ( {
 						</Tooltip>
 						<Tooltip title={ toggleLabel } placement="top">
 							<IconButton size={ SIZE } onClick={ toggleDisableItem } aria-label={ toggleLabel }>
-								{ disabled ? <EyeOffIcon fontSize={ SIZE } /> : <EyeIcon fontSize={ SIZE } /> }
+								{ propDisabled ? <EyeOffIcon fontSize={ SIZE } /> : <EyeIcon fontSize={ SIZE } /> }
 							</IconButton>
 						</Tooltip>
 						<Tooltip title={ removeLabel } placement="top">

package/src/components/text-field-inner-selection.tsx

@@ -14,6 +14,7 @@ type TextFieldInnerSelectionProps = {
 	onKeyUp?: ( event: React.KeyboardEvent< HTMLInputElement > ) => void;
 	endAdornment: React.ReactNode;
 	startAdornment?: React.ReactNode;
+	disabled?: boolean;
 };
 
 export const TextFieldInnerSelection = forwardRef(
@@ -28,6 +29,7 @@ export const TextFieldInnerSelection = forwardRef(
 			onKeyUp,
 			endAdornment,
 			startAdornment,
+			disabled,
 		}: TextFieldInnerSelectionProps,
 		ref
 	) => {
@@ -38,6 +40,7 @@ export const TextFieldInnerSelection = forwardRef(
 				fullWidth
 				type={ type }
 				value={ value }
+				disabled={ disabled }
 				onChange={ onChange }
 				onKeyDown={ onKeyDown }
 				onKeyUp={ onKeyUp }
@@ -56,12 +59,14 @@ type SelectionEndAdornmentProps< T extends string > = {
 	options: T[];
 	onClick: ( value: T ) => void;
 	value: T;
+	disabled?: boolean;
 };
 
 export const SelectionEndAdornment = < T extends string >( {
 	options,
 	onClick,
 	value,
+	disabled,
 }: SelectionEndAdornmentProps< T > ) => {
 	const popupState = usePopupState( {
 		variant: 'popover',
@@ -78,6 +83,7 @@ export const SelectionEndAdornment = < T extends string >( {
 			<Button
 				size="small"
 				color="secondary"
+				disabled={ disabled }
 				sx={ { font: 'inherit', minWidth: 'initial', textTransform: 'uppercase' } }
 				{ ...bindTrigger( popupState ) }
 			>

package/src/control-actions/control-actions.tsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { type PropsWithChildren, type ReactElement } from 'react';
 import { styled, UnstableFloatingActionBar } from '@elementor/ui';
 
+import { useBoundProp } from '../bound-prop-context';
 import { useControlActions } from './control-actions-context';
 
 // CSS hack to hide empty floating bars.
@@ -11,14 +12,19 @@ const FloatingBarContainer = styled( 'span' )`
 	.MuiFloatingActionBar-popper:has( .MuiFloatingActionBar-actions:empty ) {
 		display: none;
 	}
+
+	.MuiFloatingActionBar-popper {
+		z-index: 1000;
+	}
 `;
 
 type ControlActionsProps = PropsWithChildren< object >;
 
 export default function ControlActions( { children }: ControlActionsProps ) {
 	const { items } = useControlActions();
+	const { disabled } = useBoundProp();
 
-	if ( items.length === 0 ) {
+	if ( items.length === 0 || disabled ) {
 		return children;
 	}
 
@@ -26,7 +32,9 @@ export default function ControlActions( { children }: ControlActionsProps ) {
 
 	return (
 		<FloatingBarContainer>
-			<UnstableFloatingActionBar actions={ menuItems }>{ children as ReactElement }</UnstableFloatingActionBar>
+			<UnstableFloatingActionBar actions={ menuItems } placement="bottom-start">
+				{ children as ReactElement }
+			</UnstableFloatingActionBar>
 		</FloatingBarContainer>
 	);
 }

package/src/controls/aspect-ratio-control.tsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { useState } from 'react';
 import { stringPropTypeUtil } from '@elementor/editor-props';
 import { MenuListItem } from '@elementor/editor-ui';
+import { ArrowsMoveHorizontalIcon, ArrowsMoveVerticalIcon } from '@elementor/icons';
 import { Grid, Select, type SelectChangeEvent, Stack, TextField } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
@@ -23,7 +24,7 @@ const RATIO_OPTIONS = [
 const CUSTOM_RATIO = 'custom';
 
 export const AspectRatioControl = createControl( ( { label }: { label: string } ) => {
-	const { value: aspectRatioValue, setValue: setAspectRatioValue } = useBoundProp( stringPropTypeUtil );
+	const { value: aspectRatioValue, setValue: setAspectRatioValue, disabled } = useBoundProp( stringPropTypeUtil );
 
 	const isCustomSelected =
 		aspectRatioValue && ! RATIO_OPTIONS.some( ( option ) => option.value === aspectRatioValue );
@@ -68,16 +69,17 @@ export const AspectRatioControl = createControl( ( { label }: { label: string }
 	};
 
 	return (
-		<Stack direction="column" gap={ 2 }>
+		<Stack direction="column" pt={ 2 } gap={ 2 }>
 			<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap">
 				<Grid item xs={ 6 }>
 					<ControlLabel>{ label }</ControlLabel>
 				</Grid>
 				<Grid item xs={ 6 }>
 					<Select
-						sx={ { overflow: 'hidden' } }
-						displayEmpty
 						size="tiny"
+						displayEmpty
+						sx={ { overflow: 'hidden' } }
+						disabled={ disabled }
 						value={ selectedValue }
 						onChange={ handleSelectChange }
 						fullWidth
@@ -99,9 +101,12 @@ export const AspectRatioControl = createControl( ( { label }: { label: string }
 							size="tiny"
 							type="number"
 							fullWidth
+							disabled={ disabled }
 							value={ customWidth }
 							onChange={ handleCustomWidthChange }
-							placeholder={ __( 'Width', 'elementor' ) }
+							InputProps={ {
+								startAdornment: <ArrowsMoveHorizontalIcon fontSize="tiny" />,
+							} }
 						/>
 					</Grid>
 					<Grid item xs={ 6 }>
@@ -109,9 +114,12 @@ export const AspectRatioControl = createControl( ( { label }: { label: string }
 							size="tiny"
 							type="number"
 							fullWidth
+							disabled={ disabled }
 							value={ customHeight }
 							onChange={ handleCustomHeightChange }
-							placeholder={ __( 'Height', 'elementor' ) }
+							InputProps={ {
+								startAdornment: <ArrowsMoveVerticalIcon fontSize="tiny" />,
+							} }
 						/>
 					</Grid>
 				</Grid>

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

@@ -7,7 +7,6 @@ import { __ } from '@wordpress/i18n';
 import { PropKeyProvider, PropProvider, useBoundProp } from '../../bound-prop-context';
 import { ControlFormLabel } from '../../components/control-form-label';
 import { ControlLabel } from '../../components/control-label';
-import { SectionContent } from '../../components/section-content';
 import { createControl } from '../../create-control';
 import { ColorControl } from '../color-control';
 import { BackgroundOverlayRepeaterControl } from './background-overlay/background-overlay-repeater-control';
@@ -20,25 +19,23 @@ export const BackgroundControl = createControl( () => {
 
 	return (
 		<PropProvider { ...propContext }>
-			<SectionContent>
-				<PropKeyProvider bind="background-overlay">
-					<BackgroundOverlayRepeaterControl />
-				</PropKeyProvider>
-				<PropKeyProvider bind="color">
-					<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap">
-						<Grid item xs={ 6 }>
-							{ isUsingNestedProps ? (
-								<ControlLabel>{ colorLabel }</ControlLabel>
-							) : (
-								<ControlFormLabel>{ colorLabel }</ControlFormLabel>
-							) }
-						</Grid>
-						<Grid item xs={ 6 }>
-							<ColorControl />
-						</Grid>
+			<PropKeyProvider bind="background-overlay">
+				<BackgroundOverlayRepeaterControl />
+			</PropKeyProvider>
+			<PropKeyProvider bind="color">
+				<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap">
+					<Grid item xs={ 6 }>
+						{ isUsingNestedProps ? (
+							<ControlLabel>{ colorLabel }</ControlLabel>
+						) : (
+							<ControlFormLabel>{ colorLabel }</ControlFormLabel>
+						) }
 					</Grid>
-				</PropKeyProvider>
-			</SectionContent>
+					<Grid item xs={ 6 }>
+						<ColorControl />
+					</Grid>
+				</Grid>
+			</PropKeyProvider>
 		</PropProvider>
 	);
 } );

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

@@ -71,12 +71,13 @@ const backgroundResolutionOptions = [
 ];
 
 export const BackgroundOverlayRepeaterControl = createControl( () => {
-	const { propType, value: overlayValues, setValue } = useBoundProp( backgroundOverlayPropTypeUtil );
+	const { propType, value: overlayValues, setValue, disabled } = useBoundProp( backgroundOverlayPropTypeUtil );
 
 	return (
 		<PropProvider propType={ propType } value={ overlayValues } setValue={ setValue }>
 			<Repeater
 				openOnAdd
+				disabled={ disabled }
 				values={ overlayValues ?? [] }
 				setValues={ setValue }
 				label={ __( 'Overlay', 'elementor' ) }

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

@@ -13,12 +13,13 @@ import { SelectControl } from './select-control';
 import { SizeControl } from './size-control';
 
 export const BoxShadowRepeaterControl = createControl( () => {
-	const { propType, value, setValue } = useBoundProp( boxShadowPropTypeUtil );
+	const { propType, value, setValue, disabled } = useBoundProp( boxShadowPropTypeUtil );
 
 	return (
 		<PropProvider propType={ propType } value={ value } setValue={ setValue }>
 			<Repeater
 				openOnAdd
+				disabled={ disabled }
 				values={ value ?? [] }
 				setValues={ setValue }
 				label={ __( 'Box shadow', 'elementor' ) }

package/src/controls/color-control.tsx

@@ -13,7 +13,7 @@ type Props = Partial< Omit< UnstableColorFieldProps, 'value' | 'onChange' > > &
 
 export const ColorControl = createControl(
 	( { propTypeUtil = colorPropTypeUtil, anchorEl, slotProps = {}, ...props }: Props ) => {
-		const { value, setValue } = useBoundProp( propTypeUtil );
+		const { value, setValue, disabled } = useBoundProp( propTypeUtil );
 
 		const handleChange = ( selectedColor: string ) => {
 			setValue( selectedColor || null );
@@ -27,6 +27,7 @@ export const ColorControl = createControl(
 					value={ value ?? '' }
 					onChange={ handleChange }
 					{ ...props }
+					disabled={ disabled }
 					slotProps={ {
 						...slotProps,
 						colorPicker: {

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

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { type ReactNode, useId, useRef } from 'react';
 import { type PropKey, type PropTypeUtil, sizePropTypeUtil, type SizePropValue } from '@elementor/editor-props';
+import { isExperimentActive } from '@elementor/editor-v1-adapters';
 import { bindPopover, bindToggle, Grid, Popover, Stack, ToggleButton, Tooltip, usePopupState } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
@@ -58,9 +59,10 @@ export function EqualUnequalSizesControl< TMultiPropType extends string, TPropVa
 		propType: multiSizePropType,
 		value: multiSizeValue,
 		setValue: setMultiSizeValue,
+		disabled: multiSizeDisabled,
 	} = useBoundProp( multiSizePropTypeUtil );
 
-	const { value: sizeValue, setValue: setSizeValue } = useBoundProp( sizePropTypeUtil );
+	const { value: sizeValue, setValue: setSizeValue, disabled: sizeDisabled } = useBoundProp( sizePropTypeUtil );
 
 	const splitEqualValue = () => {
 		if ( ! sizeValue ) {
@@ -115,6 +117,7 @@ export function EqualUnequalSizesControl< TMultiPropType extends string, TPropVa
 								{ ...bindToggle( popupState ) }
 								selected={ popupState.isOpen }
 								aria-label={ tooltipLabel }
+								disabled={ multiSizeDisabled || sizeDisabled }
 							>
 								{ icon }
 							</ToggleButton>
@@ -139,7 +142,7 @@ export function EqualUnequalSizesControl< TMultiPropType extends string, TPropVa
 				} }
 			>
 				<PropProvider propType={ multiSizePropType } value={ getMultiSizeValues() } setValue={ setNestedProp }>
-					<PopoverContent p={ 1.5 }>
+					<PopoverContent p={ 1.5 } pt={ 2.5 } pb={ 3 }>
 						<PopoverGridContainer>
 							<MultiSizeValueControl item={ items[ 0 ] } />
 							<MultiSizeValueControl item={ items[ 1 ] } />
@@ -155,17 +158,25 @@ export function EqualUnequalSizesControl< TMultiPropType extends string, TPropVa
 	);
 }
 
-const MultiSizeValueControl = ( { item }: { item: Item } ) => (
-	<PropKeyProvider bind={ item.bind }>
-		<Grid item xs={ 6 }>
-			<Grid container gap={ 0.75 } alignItems="center">
-				<Grid item xs={ 12 }>
-					<ControlFormLabel>{ item.label }</ControlFormLabel>
-				</Grid>
-				<Grid item xs={ 12 }>
-					<SizeControl startIcon={ item.icon } />
+const MultiSizeValueControl = ( { item }: { item: Item } ) => {
+	const isUsingNestedProps = isExperimentActive( 'e_v_3_30' );
+
+	return (
+		<PropKeyProvider bind={ item.bind }>
+			<Grid item xs={ 6 }>
+				<Grid container gap={ 0.75 } alignItems="center">
+					<Grid item xs={ 12 }>
+						{ isUsingNestedProps ? (
+							<ControlLabel>{ item.label }</ControlLabel>
+						) : (
+							<ControlFormLabel>{ item.label }</ControlFormLabel>
+						) }
+					</Grid>
+					<Grid item xs={ 12 }>
+						<SizeControl startIcon={ item.icon } />
+					</Grid>
 				</Grid>
 			</Grid>
-		</Grid>
-	</PropKeyProvider>
-);
+		</PropKeyProvider>
+	);
+};

package/src/controls/font-family-control/font-family-control.tsx

@@ -43,7 +43,7 @@ type FontFamilyControlProps = {
 
 export const FontFamilyControl = createControl( ( { fontFamilies }: FontFamilyControlProps ) => {
 	const [ searchValue, setSearchValue ] = useState( '' );
-	const { value: fontFamily, setValue: setFontFamily } = useBoundProp( stringPropTypeUtil );
+	const { value: fontFamily, setValue: setFontFamily, disabled } = useBoundProp( stringPropTypeUtil );
 
 	const popoverState = usePopupState( { variant: 'popover' } );
 
@@ -68,6 +68,7 @@ export const FontFamilyControl = createControl( ( { fontFamilies }: FontFamilyCo
 					endIcon={ <ChevronDownIcon fontSize="tiny" /> }
 					{ ...bindTrigger( popoverState ) }
 					fullWidth
+					disabled={ disabled }
 				/>
 			</ControlActions>
 			<Popover

package/src/controls/gap-control.tsx

@@ -15,8 +15,10 @@ export const GapControl = createControl( ( { label }: { label: string } ) => {
 		value: directionValue,
 		setValue: setDirectionValue,
 		propType,
+		disabled: directionDisabled,
 	} = useBoundProp( layoutDirectionPropTypeUtil );
-	const { value: sizeValue, setValue: setSizeValue } = useBoundProp( sizePropTypeUtil );
+
+	const { value: sizeValue, setValue: setSizeValue, disabled: sizeDisabled } = useBoundProp( sizePropTypeUtil );
 
 	const isLinked = ! directionValue && ! sizeValue ? true : !! sizeValue;
 
@@ -54,6 +56,7 @@ export const GapControl = createControl( ( { label }: { label: string } ) => {
 						selected={ isLinked }
 						sx={ { marginLeft: 'auto' } }
 						onChange={ onLinkToggle }
+						disabled={ sizeDisabled || directionDisabled }
 					>
 						<LinkedIcon fontSize={ 'tiny' } />
 					</ToggleButton>