@elementor/editor-editing-panel 1.23.0 → 1.27.0

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

@@ -1,11 +1,6 @@
 import * as React from 'react';
 import { useState } from 'react';
-import {
-	ControlLabel,
-	ControlToggleButtonGroup,
-	NumberControl,
-	type ToggleButtonGroupItem,
-} from '@elementor/editor-controls';
+import { ControlToggleButtonGroup, NumberControl, type ToggleButtonGroupItem } from '@elementor/editor-controls';
 import { type NumberPropValue } from '@elementor/editor-props';
 import { ArrowDownSmallIcon, ArrowUpSmallIcon, PencilIcon } from '@elementor/icons';
 import { DirectionProvider, Grid, ThemeProvider } from '@elementor/ui';
@@ -14,6 +9,7 @@ import { __ } from '@wordpress/i18n';
 import { StylesField } from '../../../controls-registry/styles-field';
 import { useDirection } from '../../../hooks/use-direction';
 import { useStylesField } from '../../../hooks/use-styles-field';
+import { ControlLabel } from '../../control-label';
 import { SectionContent } from '../../section-content';
 
 type GroupControlItemOption = 'first' | 'last' | 'custom';
@@ -71,23 +67,23 @@ export const FlexOrderField = () => {
 	return (
 		<DirectionProvider rtl={ isSiteRtl }>
 			<ThemeProvider>
-				<SectionContent>
-					<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap">
-						<Grid item xs={ 6 }>
-							<ControlLabel>{ __( 'Order', 'elementor' ) }</ControlLabel>
-						</Grid>
-						<Grid item xs={ 6 } sx={ { display: 'flex', justifyContent: 'end' } }>
-							<ControlToggleButtonGroup
-								items={ items }
-								value={ groupControlValue }
-								onChange={ handleToggleButtonChange }
-								exclusive={ true }
-							/>
+				<StylesField bind={ 'order' }>
+					<SectionContent>
+						<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap">
+							<Grid item xs={ 6 }>
+								<ControlLabel>{ __( 'Order', 'elementor' ) }</ControlLabel>
+							</Grid>
+							<Grid item xs={ 6 } sx={ { display: 'flex', justifyContent: 'end' } }>
+								<ControlToggleButtonGroup
+									items={ items }
+									value={ groupControlValue }
+									onChange={ handleToggleButtonChange }
+									exclusive={ true }
+								/>
+							</Grid>
 						</Grid>
-					</Grid>
 
-					{ CUSTOM === groupControlValue && (
-						<StylesField bind={ 'order' }>
+						{ CUSTOM === groupControlValue && (
 							<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap">
 								<Grid item xs={ 6 }>
 									<ControlLabel>{ __( 'Custom order', 'elementor' ) }</ControlLabel>
@@ -100,9 +96,9 @@ export const FlexOrderField = () => {
 									/>
 								</Grid>
 							</Grid>
-						</StylesField>
-					) }
-				</SectionContent>
+						) }
+					</SectionContent>
+				</StylesField>
 			</ThemeProvider>
 		</DirectionProvider>
 	);

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

@@ -1,20 +1,20 @@
 import * as React from 'react';
 import { useMemo, useState } from 'react';
 import {
-	ControlLabel,
 	ControlToggleButtonGroup,
 	NumberControl,
 	SizeControl,
 	type ToggleButtonGroupItem,
 } from '@elementor/editor-controls';
-import type { NumberPropValue, SizePropValue } from '@elementor/editor-props';
+import { numberPropTypeUtil, type NumberPropValue, type SizePropValue } from '@elementor/editor-props';
 import { ExpandIcon, PencilIcon, ShrinkIcon } from '@elementor/icons';
 import { DirectionProvider, Grid, ThemeProvider } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
 import { StylesField } from '../../../controls-registry/styles-field';
 import { useDirection } from '../../../hooks/use-direction';
-import { useStylesField } from '../../../hooks/use-styles-field';
+import { useStylesFields } from '../../../hooks/use-styles-fields';
+import { ControlLabel } from '../../control-label';
 import { SectionContent } from '../../section-content';
 
 type GroupItem = 'flex-grow' | 'flex-shrink' | 'custom';
@@ -43,38 +43,49 @@ const items: ToggleButtonGroupItem< GroupItem >[] = [
 ];
 
 export const FlexSizeField = () => {
-	const { isSiteRtl } = useDirection(),
-		[ growField, setGrowField ] = useStylesField< NumberPropValue | null >( 'flex-grow' ),
-		[ shrinkField, setShrinkField ] = useStylesField< NumberPropValue | null >( 'flex-shrink' ),
-		[ basisField, setBasisField ] = useStylesField< SizePropValue | null >( 'flex-basis' );
+	const { isSiteRtl } = useDirection();
 
-	const grow = growField?.value || null,
-		shrink = shrinkField?.value || null,
-		basis = basisField?.value || null;
+	const [ fields, setFields ] = useStylesFields< {
+		'flex-grow': NumberPropValue | null;
+		'flex-shrink': NumberPropValue | null;
+		'flex-basis': SizePropValue | null;
+	} >( [ 'flex-grow', 'flex-shrink', 'flex-basis' ] );
+
+	const grow = fields?.[ 'flex-grow' ]?.value || null;
+	const shrink = fields?.[ 'flex-shrink' ]?.value || null;
+	const basis = fields?.[ 'flex-basis' ]?.value || null;
 
 	const currentGroup = useMemo( () => getActiveGroup( { grow, shrink, basis } ), [ grow, shrink, basis ] ),
 		[ activeGroup, setActiveGroup ] = useState( currentGroup );
 
 	const onChangeGroup = ( group: GroupItem | null = null ) => {
 		setActiveGroup( group );
-		setBasisField( null );
 
 		if ( ! group || group === 'custom' ) {
-			setGrowField( null );
-			setShrinkField( null );
+			setFields( {
+				'flex-basis': null,
+				'flex-grow': null,
+				'flex-shrink': null,
+			} );
 
 			return;
 		}
 
 		if ( group === 'flex-grow' ) {
-			setGrowField( { $$type: 'number', value: DEFAULT } );
-			setShrinkField( null );
+			setFields( {
+				'flex-basis': null,
+				'flex-grow': numberPropTypeUtil.create( DEFAULT ),
+				'flex-shrink': null,
+			} );
 
 			return;
 		}
 
-		setGrowField( null );
-		setShrinkField( { $$type: 'number', value: DEFAULT } );
+		setFields( {
+			'flex-basis': null,
+			'flex-grow': null,
+			'flex-shrink': numberPropTypeUtil.create( DEFAULT ),
+		} );
 	};
 
 	return (
@@ -83,7 +94,9 @@ export const FlexSizeField = () => {
 				<SectionContent>
 					<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap">
 						<Grid item xs={ 6 }>
-							<ControlLabel>{ __( 'Size', 'elementor' ) }</ControlLabel>
+							<StylesField bind={ activeGroup ?? '' }>
+								<ControlLabel>{ __( 'Size', 'elementor' ) }</ControlLabel>
+							</StylesField>
 						</Grid>
 						<Grid item xs={ 6 } sx={ { display: 'flex', justifyContent: 'end' } }>
 							<ControlToggleButtonGroup
@@ -94,7 +107,6 @@ export const FlexSizeField = () => {
 							/>
 						</Grid>
 					</Grid>
-
 					{ 'custom' === activeGroup && <FlexCustomField /> }
 				</SectionContent>
 			</ThemeProvider>

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { ControlLabel, type ToggleButtonGroupItem, ToggleControl } from '@elementor/editor-controls';
+import { type ToggleButtonGroupItem, ToggleControl } from '@elementor/editor-controls';
 import {
 	JustifyBottomIcon,
 	JustifyCenterIcon as CenterIcon,
@@ -13,9 +13,10 @@ import { __ } from '@wordpress/i18n';
 
 import { StylesField } from '../../../controls-registry/styles-field';
 import { useDirection } from '../../../hooks/use-direction';
+import { ControlLabel } from '../../control-label';
 import { RotatedIcon } from './utils/rotated-icon';
 
-type JustifyContent = 'start' | 'center' | 'end' | 'space-between' | 'space-around' | 'space-evenly';
+type JustifyContent = 'flex-start' | 'center' | 'flex-end' | 'space-between' | 'space-around' | 'space-evenly';
 
 const StartIcon = withDirection( JustifyTopIcon );
 const EndIcon = withDirection( JustifyBottomIcon );
@@ -27,7 +28,7 @@ const iconProps = {
 
 const options: ToggleButtonGroupItem< JustifyContent >[] = [
 	{
-		value: 'start',
+		value: 'flex-start',
 		label: __( 'Start', 'elementor' ),
 		renderContent: ( { size } ) => <RotatedIcon icon={ StartIcon } size={ size } { ...iconProps } />,
 		showTooltip: true,
@@ -39,7 +40,7 @@ const options: ToggleButtonGroupItem< JustifyContent >[] = [
 		showTooltip: true,
 	},
 	{
-		value: 'end',
+		value: 'flex-end',
 		label: __( 'End', 'elementor' ),
 		renderContent: ( { size } ) => <RotatedIcon icon={ EndIcon } size={ size } { ...iconProps } />,
 		showTooltip: true,

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { ControlLabel } from '@elementor/editor-controls';
+import { ControlFormLabel } from '@elementor/editor-controls';
 import { useParentElement } from '@elementor/editor-elements';
 import { type StringPropValue } from '@elementor/editor-props';
 import { __ } from '@wordpress/i18n';
@@ -54,7 +54,7 @@ const FlexFields = () => {
 const FlexChildFields = () => (
 	<>
 		<PanelDivider />
-		<ControlLabel>{ __( 'Flex child', 'elementor' ) }</ControlLabel>
+		<ControlFormLabel>{ __( 'Flex child', 'elementor' ) }</ControlFormLabel>
 		<AlignSelfChild />
 		<FlexOrderField />
 		<FlexSizeField />

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

@@ -1,11 +1,12 @@
 import * as React from 'react';
-import { ControlLabel, type ToggleButtonGroupItem, ToggleControl } from '@elementor/editor-controls';
+import { type ToggleButtonGroupItem, ToggleControl } from '@elementor/editor-controls';
 import { ArrowBackIcon, ArrowForwardIcon, ArrowRightIcon } from '@elementor/icons';
 import { DirectionProvider, Grid, ThemeProvider } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
 import { StylesField } from '../../../controls-registry/styles-field';
 import { useDirection } from '../../../hooks/use-direction';
+import { ControlLabel } from '../../control-label';
 
 type FlexWrap = 'nowrap' | 'wrap' | 'wrap-reverse';
 

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

@@ -1,11 +1,12 @@
 import * as React from 'react';
-import { ControlLabel, SizeControl } from '@elementor/editor-controls';
+import { SizeControl } from '@elementor/editor-controls';
 import { SideBottomIcon, SideLeftIcon, SideRightIcon, SideTopIcon } from '@elementor/icons';
 import { Grid, Stack, withDirection } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
 import { StylesField } from '../../../controls-registry/styles-field';
 import { useDirection } from '../../../hooks/use-direction';
+import { ControlLabel } from '../../control-label';
 import { RotatedIcon } from '../layout-section/utils/rotated-icon';
 
 type Side = 'inset-inline-start' | 'inset-inline-end' | 'inset-block-start' | 'inset-block-end';

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

@@ -1,9 +1,10 @@
 import * as React from 'react';
-import { ControlLabel, SelectControl } from '@elementor/editor-controls';
+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';
 
 const positionOptions = [
 	{ label: __( 'Static', 'elementor' ), value: 'static' },

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

@@ -1,9 +1,10 @@
 import * as React from 'react';
-import { ControlLabel, NumberControl } from '@elementor/editor-controls';
+import { NumberControl } 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';
 
 export const ZIndexField = () => {
 	return (

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

@@ -1,10 +1,11 @@
 import * as React from 'react';
-import { ControlLabel, type ToggleButtonGroupItem, ToggleControl } from '@elementor/editor-controls';
+import { type ToggleButtonGroupItem, ToggleControl } from '@elementor/editor-controls';
 import { EyeIcon, EyeOffIcon, LetterAIcon } from '@elementor/icons';
 import { Grid } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
 import { StylesField } from '../../../controls-registry/styles-field';
+import { ControlLabel } from '../../control-label';
 
 type Overflows = 'visible' | 'hidden' | 'auto';
 

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

@@ -1,9 +1,10 @@
 import * as React from 'react';
-import { ControlLabel, type ExtendedValue, SizeControl } from '@elementor/editor-controls';
+import { type ExtendedValue, 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 { ControlLabel } from '../../control-label';
 import { PanelDivider } from '../../panel-divider';
 import { SectionContent } from '../../section-content';
 import { OverflowField } from './overflow-field';

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

@@ -1,9 +1,10 @@
 import * as React from 'react';
-import { ControlLabel, FontFamilyControl } from '@elementor/editor-controls';
+import { FontFamilyControl } 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 { useFontFamilies } from './hooks/use-font-families';
 
 export const FontFamilyField = () => {

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

@@ -1,9 +1,10 @@
 import * as React from 'react';
-import { ControlLabel, SizeControl } from '@elementor/editor-controls';
+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';
 
 export const FontSizeField = () => {
 	return (

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { ControlLabel, type ToggleButtonGroupItem, ToggleControl } from '@elementor/editor-controls';
+import { ControlFormLabel, type ToggleButtonGroupItem, ToggleControl } from '@elementor/editor-controls';
 import { ItalicIcon, MinusIcon } from '@elementor/icons';
 import { Grid } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
@@ -26,7 +26,7 @@ export const FontStyleField = () => (
 	<StylesField bind="font-style">
 		<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap">
 			<Grid item xs={ 6 }>
-				<ControlLabel>{ __( 'Font style', 'elementor' ) }</ControlLabel>
+				<ControlFormLabel>{ __( 'Font style', 'elementor' ) }</ControlFormLabel>
 			</Grid>
 			<Grid item xs={ 6 } display="flex" justifyContent="end">
 				<ToggleControl options={ options } />

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

@@ -1,9 +1,10 @@
 import * as React from 'react';
-import { ControlLabel, SelectControl } from '@elementor/editor-controls';
+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';
 
 const fontWeightOptions = [
 	{ value: '100', label: __( '100 - Thin', 'elementor' ) },

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

@@ -1,9 +1,10 @@
 import * as React from 'react';
-import { ControlLabel, SizeControl } from '@elementor/editor-controls';
+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';
 
 export const LetterSpacingField = () => {
 	return (

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

@@ -1,9 +1,10 @@
 import * as React from 'react';
-import { ControlLabel, SizeControl } from '@elementor/editor-controls';
+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';
 
 export const LineHeightField = () => {
 	return (

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

@@ -1,22 +1,22 @@
 import * as React from 'react';
-import { ControlLabel, type ToggleButtonGroupItem, ToggleControl } from '@elementor/editor-controls';
+import { type ToggleButtonGroupItem, ToggleControl } from '@elementor/editor-controls';
 import { AlignCenterIcon, AlignJustifiedIcon, AlignLeftIcon, AlignRightIcon } from '@elementor/icons';
 import { Grid, withDirection } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
 import { StylesField } from '../../../controls-registry/styles-field';
-import { RotatedIcon } from '../layout-section/utils/rotated-icon';
+import { ControlLabel } from '../../control-label';
 
 type Alignments = 'start' | 'center' | 'end' | 'justify';
 
-const StartIcon = withDirection( AlignLeftIcon );
-const EndIcon = withDirection( AlignRightIcon );
+const AlignStartIcon = withDirection( AlignLeftIcon );
+const AlignEndIcon = withDirection( AlignRightIcon );
 
 const options: ToggleButtonGroupItem< Alignments >[] = [
 	{
 		value: 'start',
 		label: __( 'Start', 'elementor' ),
-		renderContent: () => <RotatedIcon icon={ StartIcon } size="tiny" />,
+		renderContent: ( { size } ) => <AlignStartIcon fontSize={ size } />,
 		showTooltip: true,
 	},
 	{
@@ -28,7 +28,7 @@ const options: ToggleButtonGroupItem< Alignments >[] = [
 	{
 		value: 'end',
 		label: __( 'End', 'elementor' ),
-		renderContent: () => <RotatedIcon icon={ EndIcon } size="tiny" />,
+		renderContent: ( { size } ) => <AlignEndIcon fontSize={ size } />,
 		showTooltip: true,
 	},
 	{
@@ -44,7 +44,7 @@ export const TextAlignmentField = () => {
 		<StylesField bind={ 'text-align' }>
 			<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap">
 				<Grid item xs={ 6 }>
-					<ControlLabel>{ __( 'Alignment', 'elementor' ) }</ControlLabel>
+					<ControlLabel>{ __( 'Text align', 'elementor' ) }</ControlLabel>
 				</Grid>
 				<Grid item xs={ 6 } display="flex" justifyContent="end">
 					<ToggleControl options={ options } />

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

@@ -1,9 +1,10 @@
 import * as React from 'react';
-import { ColorControl, ControlLabel } from '@elementor/editor-controls';
+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';
 
 export const TextColorField = () => {
 	return (

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

@@ -1,10 +1,11 @@
 import * as React from 'react';
-import { ControlLabel, ToggleControl, type ToggleControlProps } from '@elementor/editor-controls';
+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';
 
 type Decoration = 'none' | 'underline' | 'line-through' | 'overline';
 

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

@@ -1,10 +1,11 @@
 import * as React from 'react';
-import { ControlLabel, type ToggleButtonGroupItem, ToggleControl } from '@elementor/editor-controls';
+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';
 
 type Direction = 'ltr' | 'rtl';
 

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

@@ -37,15 +37,15 @@ export const TextStrokeField = () => {
 	const hasTextStroke = Boolean( textStroke );
 
 	return (
-		<AddOrRemoveContent
-			label={ __( 'Text stroke', 'elementor' ) }
-			isAdded={ hasTextStroke }
-			onAdd={ addTextStroke }
-			onRemove={ removeTextStroke }
-		>
-			<StylesField bind={ 'stroke' }>
+		<StylesField bind={ 'stroke' }>
+			<AddOrRemoveContent
+				label={ __( 'Text stroke', 'elementor' ) }
+				isAdded={ hasTextStroke }
+				onAdd={ addTextStroke }
+				onRemove={ removeTextStroke }
+			>
 				<StrokeControl />
-			</StylesField>
-		</AddOrRemoveContent>
+			</AddOrRemoveContent>
+		</StylesField>
 	);
 };

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

@@ -1,10 +1,11 @@
 import * as React from 'react';
-import { ControlLabel, type ToggleButtonGroupItem, ToggleControl } from '@elementor/editor-controls';
+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';
 
 type Transforms = 'none' | 'capitalize' | 'uppercase' | 'lowercase';
 

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

@@ -1,9 +1,10 @@
 import * as React from 'react';
-import { ControlLabel, SizeControl } from '@elementor/editor-controls';
+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';
 
 export const WordSpacingField = () => {
 	return (

package/src/contexts/style-context.tsx

@@ -50,7 +50,7 @@ export function useStyle() {
 	return context;
 }
 
-function getProviderByStyleId( styleId: StyleDefinitionID ) {
+export function getProviderByStyleId( styleId: StyleDefinitionID ) {
 	const styleProvider = stylesRepository.getProviders().find( ( provider ) => {
 		return provider.actions.get().find( ( style ) => style.id === styleId );
 	} );

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

@@ -23,7 +23,7 @@ const StyledContainer = styled( Box, {
 const getGridLayout = ( layout: ControlLayout ) => ( {
 	justifyContent: 'space-between',
 	gridTemplateColumns: {
-		full: '1fr',
-		'two-columns': 'repeat(2, 1fr)',
+		full: 'minmax(0, 1fr)',
+		'two-columns': 'repeat(2, minmax(0, 1fr))',
 	}[ layout ],
 } );

package/src/dynamics/components/dynamic-selection-control.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { useId } from 'react';
-import { ControlLabel, useBoundProp } from '@elementor/editor-controls';
+import { ControlFormLabel, useBoundProp } from '@elementor/editor-controls';
 import type { Control, ControlsSection } from '@elementor/editor-elements';
 import { DatabaseIcon, SettingsIcon, XIcon } from '@elementor/icons';
 import {
@@ -181,7 +181,7 @@ const Control = ( { control }: { control: Control[ 'value' ] } ) => {
 			<Grid container gap={ 0.75 }>
 				{ control.label ? (
 					<Grid item xs={ 12 }>
-						<ControlLabel>{ control.label }</ControlLabel>
+						<ControlFormLabel>{ control.label }</ControlFormLabel>
 					</Grid>
 				) : null }
 				<Grid item xs={ 12 }>

package/src/dynamics/components/dynamic-selection.tsx

@@ -58,12 +58,12 @@ export const DynamicSelection = ( { onSelect }: DynamicSelectionProps ) => {
 		setSearchValue( event.target.value );
 	};
 
-	const handleSetDynamicTag = ( value: string ) => {
+	const handleSetDynamicTag = ( value: string, label: string ) => {
 		if ( ! isCurrentValueDynamic ) {
 			updatePropValueHistory( anyValue );
 		}
 
-		setValue( { name: value, settings: {} } );
+		setValue( { name: value, settings: { label } } );
 
 		onSelect?.();
 	};
@@ -110,8 +110,8 @@ export const DynamicSelection = ( { onSelect }: DynamicSelectionProps ) => {
 													selected={ isSelected }
 													// eslint-disable-next-line jsx-a11y/no-autofocus
 													autoFocus={ isSelected }
-													sx={ { px: 1.5, typography: 'caption' } }
-													onClick={ () => handleSetDynamicTag( value ) }
+													sx={ { px: 3.5, typography: 'caption' } }
+													onClick={ () => handleSetDynamicTag( value, tagLabel ) }
 												>
 													{ tagLabel }
 												</MenuItem>