@elementor/editor-editing-panel 1.23.0 → 1.24.0

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,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 { 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 { ControlLabel } from '../../control-label';
 import { RotatedIcon } from '../layout-section/utils/rotated-icon';
 
 type Alignments = 'start' | 'center' | 'end' | 'justify';

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/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>

package/src/styles-inheritance/styles-inheritance-indicator.tsx

@@ -6,7 +6,6 @@ import { __ } from '@wordpress/i18n';
 
 import { useStyle } from '../contexts/style-context';
 import { useStylesInheritanceField } from '../contexts/styles-inheritance-context';
-import { useStylesField } from '../hooks/use-styles-field';
 
 const Circle = styled( 'div', {
 	shouldForwardProp: ( prop ) => prop !== 'variant',
@@ -17,21 +16,23 @@ const Circle = styled( 'div', {
 	background-color: ${ ( { theme, variant } ) => {
 		switch ( variant ) {
 			case 'overridden':
-				return theme.palette.warning.main;
+				return theme.palette.warning.light;
 			case 'global-affects':
-				return theme.palette.global.main;
+				return theme.palette.global.dark;
 			case 'local-affects':
 				return theme.palette.primary.main;
 			default:
-				return theme.palette.text.secondary;
+				return theme.palette.text.disabled;
 		}
 	} };
 `;
 
 export const StylesInheritanceIndicator = () => {
-	const { bind } = useBoundProp();
+	const { value, path } = useBoundProp();
 	const { id: currentStyleId, provider: currentStyleProvider, meta: currentStyleMeta } = useStyle();
-	const [ value ] = useStylesField( bind );
+
+	// in the styles inheritance snapshot the keys are only those of the top level style schema attributes
+	const [ bind ] = path;
 	const inheritanceChain = useStylesInheritanceField( bind );
 
 	if ( ! inheritanceChain.length ) {