@elementor/editor-editing-panel 1.46.0 → 1.47.0

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

@@ -1,29 +1,27 @@
 import * as React from 'react';
 import { FontFamilyControl } from '@elementor/editor-controls';
-import { Grid } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
+import { useSectionWidth } from '../../../contexts/section-context';
 import { StylesField } from '../../../controls-registry/styles-field';
-import { ControlLabel } from '../../control-label';
+import { StylesFieldLayout } from '../../styles-field-layout';
 import { useFontFamilies } from './hooks/use-font-families';
 
+const FONT_FAMILY_LABEL = __( 'Font family', 'elementor' );
+
 export const FontFamilyField = () => {
 	const fontFamilies = useFontFamilies();
+	const sectionWidth = useSectionWidth();
 
 	if ( fontFamilies.length === 0 ) {
 		return null;
 	}
 
 	return (
-		<StylesField bind="font-family">
-			<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap">
-				<Grid item xs={ 6 }>
-					<ControlLabel>{ __( 'Font family', 'elementor' ) }</ControlLabel>
-				</Grid>
-				<Grid item xs={ 6 } sx={ { minWidth: 0 } }>
-					<FontFamilyControl fontFamilies={ fontFamilies } />
-				</Grid>
-			</Grid>
+		<StylesField bind="font-family" propDisplayName={ FONT_FAMILY_LABEL }>
+			<StylesFieldLayout label={ FONT_FAMILY_LABEL }>
+				<FontFamilyControl fontFamilies={ fontFamilies } sectionWidth={ sectionWidth } />
+			</StylesFieldLayout>
 		</StylesField>
 	);
 };

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

@@ -1,25 +1,21 @@
 import * as React from 'react';
-import { type MutableRefObject, useRef } from 'react';
+import { useRef } from 'react';
 import { SizeControl } from '@elementor/editor-controls';
-import { Grid } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
 import { StylesField } from '../../../controls-registry/styles-field';
-import { ControlLabel } from '../../control-label';
+import { StylesFieldLayout } from '../../styles-field-layout';
+
+const FONT_SIZE_LABEL = __( 'Font size', 'elementor' );
 
 export const FontSizeField = () => {
-	const rowRef: MutableRefObject< HTMLElement | undefined > = useRef();
+	const rowRef = useRef< HTMLDivElement >( null );
 
 	return (
-		<StylesField bind="font-size">
-			<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 anchorRef={ rowRef } />
-				</Grid>
-			</Grid>
+		<StylesField bind="font-size" propDisplayName={ FONT_SIZE_LABEL }>
+			<StylesFieldLayout label={ FONT_SIZE_LABEL } ref={ rowRef }>
+				<SizeControl anchorRef={ rowRef } />
+			</StylesFieldLayout>
 		</StylesField>
 	);
 };

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

@@ -1,12 +1,15 @@
 import * as React from 'react';
-import { ControlFormLabel, type ToggleButtonGroupItem, ToggleControl } from '@elementor/editor-controls';
+import { type ToggleButtonGroupItem, ToggleControl } from '@elementor/editor-controls';
 import { ItalicIcon, MinusIcon } from '@elementor/icons';
-import { Grid } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
 import { StylesField } from '../../../controls-registry/styles-field';
+import { StylesFieldLayout } from '../../styles-field-layout';
 
 type FontStyle = 'normal' | 'italic';
+
+const FONT_STYLE_LABEL = __( 'Font style', 'elementor' );
+
 const options: ToggleButtonGroupItem< FontStyle >[] = [
 	{
 		value: 'normal',
@@ -22,15 +25,12 @@ const options: ToggleButtonGroupItem< FontStyle >[] = [
 	},
 ];
 
-export const FontStyleField = () => (
-	<StylesField bind="font-style">
-		<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap">
-			<Grid item xs={ 6 }>
-				<ControlFormLabel>{ __( 'Font style', 'elementor' ) }</ControlFormLabel>
-			</Grid>
-			<Grid item xs={ 6 } display="flex" justifyContent="end">
+export const FontStyleField = () => {
+	return (
+		<StylesField bind="font-style" propDisplayName={ FONT_STYLE_LABEL }>
+			<StylesFieldLayout label={ FONT_STYLE_LABEL }>
 				<ToggleControl options={ options } />
-			</Grid>
-		</Grid>
-	</StylesField>
-);
+			</StylesFieldLayout>
+		</StylesField>
+	);
+};

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

@@ -1,10 +1,11 @@
 import * as React from 'react';
 import { SelectControl } from '@elementor/editor-controls';
-import { Grid } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
 import { StylesField } from '../../../controls-registry/styles-field';
-import { ControlLabel } from '../../control-label';
+import { StylesFieldLayout } from '../../styles-field-layout';
+
+const FONT_WEIGHT_LABEL = __( 'Font weight', 'elementor' );
 
 const fontWeightOptions = [
 	{ value: '100', label: __( '100 - Thin', 'elementor' ) },
@@ -20,15 +21,10 @@ const fontWeightOptions = [
 
 export const FontWeightField = () => {
 	return (
-		<StylesField bind="font-weight">
-			<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap">
-				<Grid item xs={ 6 }>
-					<ControlLabel>{ __( 'Font weight', 'elementor' ) }</ControlLabel>
-				</Grid>
-				<Grid item xs={ 6 } sx={ { overflow: 'hidden' } }>
-					<SelectControl options={ fontWeightOptions } />
-				</Grid>
-			</Grid>
+		<StylesField bind="font-weight" propDisplayName={ FONT_WEIGHT_LABEL }>
+			<StylesFieldLayout label={ FONT_WEIGHT_LABEL }>
+				<SelectControl options={ fontWeightOptions } />
+			</StylesFieldLayout>
 		</StylesField>
 	);
 };

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

@@ -1,25 +1,21 @@
 import * as React from 'react';
-import { type MutableRefObject, useRef } from 'react';
+import { useRef } from 'react';
 import { SizeControl } from '@elementor/editor-controls';
-import { Grid } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
 import { StylesField } from '../../../controls-registry/styles-field';
-import { ControlLabel } from '../../control-label';
+import { StylesFieldLayout } from '../../styles-field-layout';
+
+const LETTER_SPACING_LABEL = __( 'Letter spacing', 'elementor' );
 
 export const LetterSpacingField = () => {
-	const rowRef: MutableRefObject< HTMLElement | undefined > = useRef();
+	const rowRef = useRef< HTMLDivElement >( null );
 
 	return (
-		<StylesField bind="letter-spacing">
-			<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 anchorRef={ rowRef } />
-				</Grid>
-			</Grid>
+		<StylesField bind="letter-spacing" propDisplayName={ LETTER_SPACING_LABEL }>
+			<StylesFieldLayout label={ LETTER_SPACING_LABEL } ref={ rowRef }>
+				<SizeControl anchorRef={ rowRef } />
+			</StylesFieldLayout>
 		</StylesField>
 	);
 };

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

@@ -1,25 +1,21 @@
 import * as React from 'react';
-import { type MutableRefObject, useRef } from 'react';
+import { useRef } from 'react';
 import { SizeControl } from '@elementor/editor-controls';
-import { Grid } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
 import { StylesField } from '../../../controls-registry/styles-field';
-import { ControlLabel } from '../../control-label';
+import { StylesFieldLayout } from '../../styles-field-layout';
+
+const LINE_HEIGHT_LABEL = __( 'Line height', 'elementor' );
 
 export const LineHeightField = () => {
-	const rowRef: MutableRefObject< HTMLElement | undefined > = useRef();
+	const rowRef = useRef< HTMLDivElement >( null );
 
 	return (
-		<StylesField bind="line-height">
-			<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 anchorRef={ rowRef } />
-				</Grid>
-			</Grid>
+		<StylesField bind="line-height" propDisplayName={ LINE_HEIGHT_LABEL }>
+			<StylesFieldLayout label={ LINE_HEIGHT_LABEL } ref={ rowRef }>
+				<SizeControl anchorRef={ rowRef } />
+			</StylesFieldLayout>
 		</StylesField>
 	);
 };

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

@@ -1,15 +1,17 @@
 import * as React from 'react';
 import { type ToggleButtonGroupItem, ToggleControl } from '@elementor/editor-controls';
 import { AlignCenterIcon, AlignJustifiedIcon, AlignLeftIcon, AlignRightIcon } from '@elementor/icons';
-import { Grid, withDirection } from '@elementor/ui';
+import { 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';
+import { StylesFieldLayout } from '../../styles-field-layout';
 
 type Alignments = 'start' | 'center' | 'end' | 'justify';
 
+const TEXT_ALIGNMENT_LABEL = __( 'Text align', 'elementor' );
+
 const AlignStartIcon = withDirection( AlignLeftIcon );
 const AlignEndIcon = withDirection( AlignRightIcon );
 
@@ -42,17 +44,12 @@ const options: ToggleButtonGroupItem< Alignments >[] = [
 
 export const TextAlignmentField = () => {
 	return (
-		<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>
-			</StylesField>
-		</UiProviders>
+		<StylesField bind="text-align" propDisplayName={ TEXT_ALIGNMENT_LABEL }>
+			<UiProviders>
+				<StylesFieldLayout label={ TEXT_ALIGNMENT_LABEL }>
+					<ToggleControl options={ options } />
+				</StylesFieldLayout>
+			</UiProviders>
+		</StylesField>
 	);
 };

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

@@ -1,22 +1,18 @@
 import * as React from 'react';
 import { ColorControl } from '@elementor/editor-controls';
-import { Grid } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
 import { StylesField } from '../../../controls-registry/styles-field';
-import { ControlLabel } from '../../control-label';
+import { StylesFieldLayout } from '../../styles-field-layout';
+
+const TEXT_COLOR_LABEL = __( 'Text color', 'elementor' );
 
 export const TextColorField = () => {
 	return (
-		<StylesField bind="color">
-			<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap">
-				<Grid item xs={ 6 }>
-					<ControlLabel>{ __( 'Text color', 'elementor' ) }</ControlLabel>
-				</Grid>
-				<Grid item xs={ 6 }>
-					<ColorControl />
-				</Grid>
-			</Grid>
+		<StylesField bind="color" propDisplayName={ TEXT_COLOR_LABEL }>
+			<StylesFieldLayout label={ TEXT_COLOR_LABEL }>
+				<ColorControl />
+			</StylesFieldLayout>
 		</StylesField>
 	);
 };

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

@@ -1,14 +1,15 @@
 import * as React from 'react';
 import { ToggleControl, type ToggleControlProps } from '@elementor/editor-controls';
 import { MinusIcon, OverlineIcon, StrikethroughIcon, UnderlineIcon } from '@elementor/icons';
-import { Grid } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
 import { StylesField } from '../../../controls-registry/styles-field';
-import { ControlLabel } from '../../control-label';
+import { StylesFieldLayout } from '../../styles-field-layout';
 
 type Decoration = 'none' | 'underline' | 'line-through' | 'overline';
 
+const TEXT_DECORATION_LABEL = __( 'Line decoration', 'elementor' );
+
 const options: ToggleControlProps< Decoration >[ 'options' ] = [
 	{
 		value: 'none',
@@ -37,14 +38,9 @@ const options: ToggleControlProps< Decoration >[ 'options' ] = [
 	},
 ];
 export const TextDecorationField = () => (
-	<StylesField bind={ 'text-decoration' }>
-		<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap">
-			<Grid item xs={ 6 }>
-				<ControlLabel>{ __( 'Line decoration', 'elementor' ) }</ControlLabel>
-			</Grid>
-			<Grid item xs={ 6 } display="flex" justifyContent="end">
-				<ToggleControl options={ options } exclusive={ false } />
-			</Grid>
-		</Grid>
+	<StylesField bind="text-decoration" propDisplayName={ TEXT_DECORATION_LABEL }>
+		<StylesFieldLayout label={ TEXT_DECORATION_LABEL }>
+			<ToggleControl options={ options } exclusive={ false } />
+		</StylesFieldLayout>
 	</StylesField>
 );

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

@@ -1,14 +1,15 @@
 import * as React from 'react';
 import { type ToggleButtonGroupItem, ToggleControl } from '@elementor/editor-controls';
 import { TextDirectionLtrIcon, TextDirectionRtlIcon } from '@elementor/icons';
-import { Grid } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
 import { StylesField } from '../../../controls-registry/styles-field';
-import { ControlLabel } from '../../control-label';
+import { StylesFieldLayout } from '../../styles-field-layout';
 
 type Direction = 'ltr' | 'rtl';
 
+const TEXT_DIRECTION_LABEL = __( 'Direction', 'elementor' );
+
 const options: ToggleButtonGroupItem< Direction >[] = [
 	{
 		value: 'ltr',
@@ -26,15 +27,10 @@ const options: ToggleButtonGroupItem< Direction >[] = [
 
 export const TextDirectionField = () => {
 	return (
-		<StylesField bind={ 'direction' }>
-			<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap">
-				<Grid item xs={ 6 }>
-					<ControlLabel>{ __( 'Direction', 'elementor' ) }</ControlLabel>
-				</Grid>
-				<Grid item xs={ 6 } display="flex" justifyContent="end">
-					<ToggleControl options={ options } />
-				</Grid>
-			</Grid>
+		<StylesField bind="direction" propDisplayName={ TEXT_DIRECTION_LABEL }>
+			<StylesFieldLayout label={ TEXT_DIRECTION_LABEL }>
+				<ToggleControl options={ options } />
+			</StylesFieldLayout>
 		</StylesField>
 	);
 };

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

@@ -24,6 +24,8 @@ const initTextStroke = {
 	},
 };
 
+const TEXT_STROKE_LABEL = __( 'Text stroke', 'elementor' );
+
 export const TextStrokeField = () => {
 	const { value, setValue, canEdit } = useStylesField( 'stroke' );
 
@@ -38,13 +40,13 @@ export const TextStrokeField = () => {
 	const hasTextStroke = Boolean( value );
 
 	return (
-		<StylesField bind={ 'stroke' }>
+		<StylesField bind={ 'stroke' } propDisplayName={ TEXT_STROKE_LABEL }>
 			<AddOrRemoveContent
 				isAdded={ hasTextStroke }
 				onAdd={ addTextStroke }
 				onRemove={ removeTextStroke }
 				disabled={ ! canEdit }
-				renderLabel={ () => <ControlLabel>{ __( 'Text stroke', 'elementor' ) }</ControlLabel> }
+				renderLabel={ () => <ControlLabel>{ TEXT_STROKE_LABEL }</ControlLabel> }
 			>
 				<StrokeControl />
 			</AddOrRemoveContent>

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

@@ -1,14 +1,15 @@
 import * as React from 'react';
 import { type ToggleButtonGroupItem, ToggleControl } from '@elementor/editor-controls';
 import { LetterCaseIcon, LetterCaseLowerIcon, LetterCaseUpperIcon, MinusIcon } from '@elementor/icons';
-import { Grid } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
 import { StylesField } from '../../../controls-registry/styles-field';
-import { ControlLabel } from '../../control-label';
+import { StylesFieldLayout } from '../../styles-field-layout';
 
 type Transforms = 'none' | 'capitalize' | 'uppercase' | 'lowercase';
 
+const TEXT_TRANSFORM_LABEL = __( 'Text transform', 'elementor' );
+
 const options: ToggleButtonGroupItem< Transforms >[] = [
 	{
 		value: 'none',
@@ -37,14 +38,9 @@ const options: ToggleButtonGroupItem< Transforms >[] = [
 ];
 
 export const TransformField = () => (
-	<StylesField bind={ 'text-transform' }>
-		<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap">
-			<Grid item xs={ 6 }>
-				<ControlLabel>{ __( 'Text transform', 'elementor' ) }</ControlLabel>
-			</Grid>
-			<Grid item xs={ 6 } display="flex" justifyContent="end">
-				<ToggleControl options={ options } />
-			</Grid>
-		</Grid>
+	<StylesField bind="text-transform" propDisplayName={ TEXT_TRANSFORM_LABEL }>
+		<StylesFieldLayout label={ TEXT_TRANSFORM_LABEL }>
+			<ToggleControl options={ options } />
+		</StylesFieldLayout>
 	</StylesField>
 );

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

@@ -1,25 +1,21 @@
 import * as React from 'react';
-import { type MutableRefObject, useRef } from 'react';
+import { useRef } from 'react';
 import { SizeControl } from '@elementor/editor-controls';
-import { Grid } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
 import { StylesField } from '../../../controls-registry/styles-field';
-import { ControlLabel } from '../../control-label';
+import { StylesFieldLayout } from '../../styles-field-layout';
+
+const WORD_SPACING_LABEL = __( 'Word spacing', 'elementor' );
 
 export const WordSpacingField = () => {
-	const rowRef: MutableRefObject< HTMLElement | undefined > = useRef();
+	const rowRef = useRef< HTMLDivElement >( null );
 
 	return (
-		<StylesField bind="word-spacing">
-			<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 anchorRef={ rowRef } />
-				</Grid>
-			</Grid>
+		<StylesField bind="word-spacing" propDisplayName={ WORD_SPACING_LABEL }>
+			<StylesFieldLayout label={ WORD_SPACING_LABEL } ref={ rowRef }>
+				<SizeControl anchorRef={ rowRef } />
+			</StylesFieldLayout>
 		</StylesField>
 	);
 };

package/src/components/styles-field-layout.tsx

@@ -0,0 +1,50 @@
+import * as React from 'react';
+import { Grid, Stack, type Theme } from '@elementor/ui';
+
+import { ControlLabel } from './control-label';
+
+type StylesFieldLayoutProps = {
+	label: string;
+	children: React.ReactNode;
+	direction?: 'row' | 'column';
+};
+
+export const StylesFieldLayout = React.forwardRef< HTMLDivElement, StylesFieldLayoutProps >( ( props, ref ) => {
+	const { direction = 'row', children, label } = props;
+
+	const LayoutComponent = direction === 'row' ? Row : Column;
+
+	return <LayoutComponent label={ label } ref={ ref } children={ children } />;
+} );
+
+const Row = React.forwardRef< HTMLDivElement, { label: string; children: React.ReactNode } >(
+	( { label, children }, ref ) => {
+		return (
+			<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap" ref={ ref }>
+				<Grid item xs={ 6 }>
+					<ControlLabel>{ label }</ControlLabel>
+				</Grid>
+				<Grid
+					item
+					xs={ 6 }
+					sx={ ( theme: Theme ) => ( {
+						width: `calc(50% - ${ theme.spacing( 2 ) })`,
+					} ) }
+				>
+					{ children }
+				</Grid>
+			</Grid>
+		);
+	}
+);
+
+const Column = React.forwardRef< HTMLDivElement, { label: string; children: React.ReactNode } >(
+	( { label, children }, ref ) => {
+		return (
+			<Stack gap={ 0.75 } ref={ ref }>
+				<ControlLabel>{ label }</ControlLabel>
+				{ children }
+			</Stack>
+		);
+	}
+);

package/src/contexts/section-context.tsx

@@ -0,0 +1,14 @@
+import { createContext, useContext } from 'react';
+import type { RefObject } from 'react';
+
+const FALLBACK_SECTION_WIDTH = 320;
+
+export const SectionRefContext = createContext< RefObject< HTMLElement > | null >( null );
+
+const useSectionRef = () => useContext( SectionRefContext );
+
+export const useSectionWidth = (): number => {
+	const sectionRef = useSectionRef();
+
+	return sectionRef?.current?.offsetWidth ?? FALLBACK_SECTION_WIDTH;
+};

package/src/controls-registry/control-type-container.tsx

@@ -3,6 +3,10 @@ import { type ControlLayout } from '@elementor/editor-elements';
 import { Box, type BoxProps, styled } from '@elementor/ui';
 
 export const ControlTypeContainer = ( { children, layout }: React.PropsWithChildren< { layout?: ControlLayout } > ) => {
+	if ( layout === 'custom' ) {
+		return children;
+	}
+
 	return <StyledContainer layout={ layout }>{ children }</StyledContainer>;
 };
 
@@ -14,10 +18,10 @@ const StyledContainer = styled( Box, {
 	...getGridLayout( layout ),
 } ) );
 
-const getGridLayout = ( layout: ControlLayout ) => ( {
+const getGridLayout = ( layout: Omit< ControlLayout, 'custom' > ) => ( {
 	justifyContent: 'space-between',
 	gridTemplateColumns: {
 		full: 'minmax(0, 1fr)',
 		'two-columns': 'repeat(2, minmax(0, 1fr))',
-	}[ layout ],
+	}[ layout as string ],
 } );

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

@@ -37,7 +37,7 @@ const controlTypes = {
 	textarea: { component: TextAreaControl, layout: 'full', propTypeUtil: stringPropTypeUtil },
 	size: { component: SizeControl, layout: 'two-columns', propTypeUtil: sizePropTypeUtil },
 	select: { component: SelectControl, layout: 'two-columns', propTypeUtil: stringPropTypeUtil },
-	link: { component: LinkControl, layout: 'full', propTypeUtil: linkPropTypeUtil },
+	link: { component: LinkControl, layout: 'custom', propTypeUtil: linkPropTypeUtil },
 	url: { component: UrlControl, layout: 'full', propTypeUtil: stringPropTypeUtil },
 	switch: { component: SwitchControl, layout: 'two-columns', propTypeUtil: booleanPropTypeUtil },
 	repeatable: { component: RepeatableControl, layout: 'full', propTypeUtil: undefined },