@elementor/editor-editing-panel 1.11.1 → 1.12.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elementor/editor-editing-panel",
-  "version": "1.11.1",
+  "version": "1.12.0",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -40,14 +40,14 @@
   },
   "dependencies": {
     "@elementor/editor": "0.18.0",
-    "@elementor/editor-controls": "0.10.0",
-    "@elementor/editor-elements": "0.5.3",
+    "@elementor/editor-controls": "0.11.0",
+    "@elementor/editor-elements": "0.5.4",
     "@elementor/editor-panels": "0.11.0",
-    "@elementor/editor-props": "0.9.1",
+    "@elementor/editor-props": "0.9.2",
     "@elementor/editor-responsive": "0.13.0",
-    "@elementor/editor-styles": "0.5.6",
-    "@elementor/editor-styles-repository": "0.7.1",
-    "@elementor/editor-ui": "0.3.0",
+    "@elementor/editor-styles": "0.5.7",
+    "@elementor/editor-styles-repository": "0.7.2",
+    "@elementor/editor-ui": "0.4.0",
     "@elementor/editor-v1-adapters": "0.10.0",
     "@elementor/icons": "1.31.0",
     "@elementor/locations": "0.7.6",

package/src/components/css-classes/css-class-item.tsx

@@ -127,4 +127,6 @@ const validateLabel = ( newLabel: string ) => {
 	if ( stylesRepository.isLabelExist( newLabel ) ) {
 		return __( 'Existing name', 'elementor' );
 	}
+
+	return null;
 };

package/src/components/css-classes/css-class-selector.tsx

@@ -169,13 +169,8 @@ function useCreateActions( {
 				pushAppliedId( createdId );
 				setActiveId( createdId );
 			},
-			condition: ( options, inputValue ) => {
-				const isUniqueLabel = ! options.some(
-					( option ) => option.label.toLowerCase() === inputValue.toLowerCase()
-				);
-
-				return !! inputValue && isUniqueLabel;
-			},
+			condition: ( _, inputValue ) =>
+				stylesRepository.isLabelValid( inputValue ) && ! stylesRepository.isLabelExist( inputValue ),
 			// translators: %s is the singular label of css class provider (e.g "Global CSS Class").
 			group: __( 'Create New %s', 'elementor' ).replace( '%s', provider.labels?.singular ?? '' ),
 		};

package/src/components/panel-divider.tsx

@@ -0,0 +1,4 @@
+import * as React from 'react';
+import { Divider } from '@elementor/ui';
+
+export const PanelDivider = () => <Divider sx={ { my: 0.5 } } />;

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

@@ -10,7 +10,7 @@ export const BorderColorField = () => {
 		<StylesField bind={ 'border-color' }>
 			<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap">
 				<Grid item xs={ 6 }>
-					<ControlLabel>{ __( 'Border Color', 'elementor' ) }</ControlLabel>
+					<ControlLabel>{ __( 'Border color', 'elementor' ) }</ControlLabel>
 				</Grid>
 				<Grid item xs={ 6 }>
 					<ColorControl />

package/src/components/style-sections/border-section/border-radius-field.tsx

@@ -21,14 +21,13 @@ const EndStartIcon = withDirection( RadiusBottomLeftIcon );
 const EndEndIcon = withDirection( RadiusBottomRightIcon );
 
 const getStartStartLabel = ( isSiteRtl: boolean ) =>
-	isSiteRtl ? __( 'Top Right', 'elementor' ) : __( 'Top Left', 'elementor' );
+	isSiteRtl ? __( 'Top right', 'elementor' ) : __( 'Top left', 'elementor' );
 const getStartEndLabel = ( isSiteRtl: boolean ) =>
-	isSiteRtl ? __( 'Top Left', 'elementor' ) : __( 'Top Right', 'elementor' );
+	isSiteRtl ? __( 'Top left', 'elementor' ) : __( 'Top right', 'elementor' );
 const getEndStartLabel = ( isSiteRtl: boolean ) =>
-	isSiteRtl ? __( 'Bottom Right', 'elementor' ) : __( 'Bottom Left', 'elementor' );
+	isSiteRtl ? __( 'Bottom right', 'elementor' ) : __( 'Bottom left', 'elementor' );
 const getEndEndLabel = ( isSiteRtl: boolean ) =>
-	isSiteRtl ? __( 'Bottom Left', 'elementor' ) : __( 'Bottom Right', 'elementor' );
-
+	isSiteRtl ? __( 'Bottom left', 'elementor' ) : __( 'Bottom right', 'elementor' );
 const getCorners = ( isSiteRtl: boolean ): EqualUnequalItems => [
 	{
 		label: getStartStartLabel( isSiteRtl ),
@@ -59,7 +58,7 @@ export const BorderRadiusField = () => {
 		<StylesField bind={ 'border-radius' }>
 			<EqualUnequalSizesControl
 				items={ getCorners( isSiteRtl ) }
-				label={ __( 'Border Radius', 'elementor' ) }
+				label={ __( 'Border radius', 'elementor' ) }
 				icon={ <BorderCornersIcon fontSize={ 'tiny' } /> }
 				multiSizePropTypeUtil={ borderRadiusPropTypeUtil }
 			/>

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

@@ -1,13 +1,14 @@
 import * as React from 'react';
-import { Divider, Stack } from '@elementor/ui';
+import { Stack } from '@elementor/ui';
 
+import { PanelDivider } from '../../panel-divider';
 import { BorderField } from './border-field';
 import { BorderRadiusField } from './border-radius-field';
 
 export const BorderSection = () => (
 	<Stack gap={ 1.5 }>
 		<BorderRadiusField />
-		<Divider />
+		<PanelDivider />
 		<BorderField />
 	</Stack>
 );

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

@@ -21,9 +21,9 @@ export const BorderStyleField = () => {
 		<StylesField bind={ 'border-style' }>
 			<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap">
 				<Grid item xs={ 6 }>
-					<ControlLabel>{ __( 'Border Type', 'elementor' ) }</ControlLabel>
+					<ControlLabel>{ __( 'Border type', 'elementor' ) }</ControlLabel>
 				</Grid>
-				<Grid item xs={ 6 }>
+				<Grid item xs={ 6 } sx={ { overflow: 'hidden' } }>
 					<SelectControl options={ borderStyles } />
 				</Grid>
 			</Grid>

package/src/components/style-sections/border-section/border-width-field.tsx

@@ -34,7 +34,7 @@ export const BorderWidthField = () => {
 		<StylesField bind={ 'border-width' }>
 			<EqualUnequalSizesControl
 				items={ edges }
-				label={ __( 'Border Width', 'elementor' ) }
+				label={ __( 'Border width', 'elementor' ) }
 				icon={ <SideAllIcon fontSize={ 'tiny' } /> }
 				multiSizePropTypeUtil={ borderWidthPropTypeUtil }
 			/>

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

@@ -2,12 +2,13 @@ import * as React from 'react';
 import { ControlLabel } from '@elementor/editor-controls';
 import { useParentElement } from '@elementor/editor-elements';
 import { type StringPropValue } from '@elementor/editor-props';
-import { Divider, Stack } from '@elementor/ui';
+import { Stack } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
 import { useElement } from '../../../contexts/element-context';
 import { useComputedStyle } from '../../../hooks/use-computed-style';
 import { useStylesField } from '../../../hooks/use-styles-field';
+import { PanelDivider } from '../../panel-divider';
 import { AlignItemsField } from './align-items-field';
 import { AlignSelfChild } from './align-self-child-field';
 import { DisplayField } from './display-field';
@@ -38,7 +39,7 @@ const FlexFields = () => (
 		<FlexDirectionField />
 		<JustifyContentField />
 		<AlignItemsField />
-		<Divider />
+		<PanelDivider />
 		<GapControlField />
 		<WrapField />
 	</>
@@ -46,7 +47,7 @@ const FlexFields = () => (
 
 const FlexChildFields = () => (
 	<>
-		<Divider />
+		<PanelDivider />
 		<ControlLabel>{ __( 'Flex child', 'elementor' ) }</ControlLabel>
 		<AlignSelfChild />
 		<FlexOrderField />

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

@@ -24,7 +24,7 @@ export const PositionField = ( { onChange }: Props ) => {
 				<Grid item xs={ 6 }>
 					<ControlLabel>{ __( 'Position', 'elementor' ) }</ControlLabel>
 				</Grid>
-				<Grid item xs={ 6 }>
+				<Grid item xs={ 6 } sx={ { overflow: 'hidden' } }>
 					<SelectControl options={ positionOptions } onChange={ onChange } />
 				</Grid>
 			</Grid>

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

@@ -1,9 +1,10 @@
 import * as React from 'react';
 import { ControlLabel, SizeControl } from '@elementor/editor-controls';
-import { Divider, Grid, Stack } from '@elementor/ui';
+import { Grid, Stack } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
 import { StylesField, type StylesFieldProps } from '../../../controls-registry/styles-field';
+import { PanelDivider } from '../../panel-divider';
 import { OverflowField } from './overflow-field';
 
 export const SizeSection = () => {
@@ -19,21 +20,21 @@ export const SizeSection = () => {
 			</Grid>
 			<Grid container gap={ 2 } flexWrap="nowrap">
 				<Grid item xs={ 6 }>
-					<SizeField bind="min-width" label={ __( 'Min. Width', 'elementor' ) } />
+					<SizeField bind="min-width" label={ __( 'Min. width', 'elementor' ) } />
 				</Grid>
 				<Grid item xs={ 6 }>
-					<SizeField bind="min-height" label={ __( 'Min. Height', 'elementor' ) } />
+					<SizeField bind="min-height" label={ __( 'Min. height', 'elementor' ) } />
 				</Grid>
 			</Grid>
 			<Grid container gap={ 2 } flexWrap="nowrap">
 				<Grid item xs={ 6 }>
-					<SizeField bind="max-width" label={ __( 'Max. Width', 'elementor' ) } />
+					<SizeField bind="max-width" label={ __( 'Max. width', 'elementor' ) } />
 				</Grid>
 				<Grid item xs={ 6 }>
-					<SizeField bind="max-height" label={ __( 'Max. Height', 'elementor' ) } />
+					<SizeField bind="max-height" label={ __( 'Max. height', 'elementor' ) } />
 				</Grid>
 			</Grid>
-			<Divider />
+			<PanelDivider />
 			<Stack>
 				<OverflowField />
 			</Stack>

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

@@ -1,9 +1,10 @@
 import * as React from 'react';
 import { LinkedDimensionsControl } from '@elementor/editor-controls';
-import { Divider, Stack } from '@elementor/ui';
+import { Stack } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
 import { StylesField } from '../../../controls-registry/styles-field';
+import { PanelDivider } from '../../panel-divider';
 
 export const SpacingSection = () => {
 	return (
@@ -11,7 +12,7 @@ export const SpacingSection = () => {
 			<StylesField bind={ 'padding' }>
 				<LinkedDimensionsControl label={ __( 'Padding', 'elementor' ) } />
 			</StylesField>
-			<Divider />
+			<PanelDivider />
 			<StylesField bind={ 'margin' }>
 				<LinkedDimensionsControl label={ __( 'Margin', 'elementor' ) } />
 			</StylesField>

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

@@ -17,9 +17,9 @@ export const FontFamilyField = () => {
 		<StylesField bind="font-family">
 			<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap">
 				<Grid item xs={ 6 }>
-					<ControlLabel>{ __( 'Font Family', 'elementor' ) }</ControlLabel>
+					<ControlLabel>{ __( 'Font family', 'elementor' ) }</ControlLabel>
 				</Grid>
-				<Grid item xs={ 6 }>
+				<Grid item xs={ 6 } sx={ { overflow: 'hidden' } }>
 					<FontFamilyControl fontFamilies={ fontFamilies } />
 				</Grid>
 			</Grid>

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

@@ -10,7 +10,7 @@ export const FontSizeField = () => {
 		<StylesField bind="font-size">
 			<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap">
 				<Grid item xs={ 6 }>
-					<ControlLabel>{ __( 'Font Size', 'elementor' ) }</ControlLabel>
+					<ControlLabel>{ __( 'Font size', 'elementor' ) }</ControlLabel>
 				</Grid>
 				<Grid item xs={ 6 }>
 					<SizeControl />

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

@@ -0,0 +1,36 @@
+import * as React from 'react';
+import { ControlLabel, 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';
+
+type FontStyle = 'normal' | 'italic';
+const options: ToggleButtonGroupItem< FontStyle >[] = [
+	{
+		value: 'normal',
+		label: __( 'Normal', 'elementor' ),
+		renderContent: ( { size } ) => <MinusIcon fontSize={ size } />,
+		showTooltip: true,
+	},
+	{
+		value: 'italic',
+		label: __( 'Italic', 'elementor' ),
+		renderContent: ( { size } ) => <ItalicIcon fontSize={ size } />,
+		showTooltip: true,
+	},
+];
+
+export const FontStyleField = () => (
+	<StylesField bind="font-style">
+		<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap">
+			<Grid item xs={ 6 }>
+				<ControlLabel>{ __( 'Font Style', 'elementor' ) }</ControlLabel>
+			</Grid>
+			<Grid item xs={ 6 } display="flex" justifyContent="end">
+				<ToggleControl options={ options } />
+			</Grid>
+		</Grid>
+	</StylesField>
+);

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

@@ -22,9 +22,9 @@ export const FontWeightField = () => {
 		<StylesField bind="font-weight">
 			<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap">
 				<Grid item xs={ 6 }>
-					<ControlLabel>{ __( 'Font Weight', 'elementor' ) }</ControlLabel>
+					<ControlLabel>{ __( 'Font weight', 'elementor' ) }</ControlLabel>
 				</Grid>
-				<Grid item xs={ 6 }>
+				<Grid item xs={ 6 } sx={ { overflow: 'hidden' } }>
 					<SelectControl options={ fontWeightOptions } />
 				</Grid>
 			</Grid>

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

@@ -10,7 +10,7 @@ export const LetterSpacingField = () => {
 		<StylesField bind="letter-spacing">
 			<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap">
 				<Grid item xs={ 6 }>
-					<ControlLabel>{ __( 'Letter Spacing', 'elementor' ) }</ControlLabel>
+					<ControlLabel>{ __( 'Letter spacing', 'elementor' ) }</ControlLabel>
 				</Grid>
 				<Grid item xs={ 6 }>
 					<SizeControl />

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

@@ -10,7 +10,7 @@ export const LineHeightField = () => {
 		<StylesField bind="line-height">
 			<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap">
 				<Grid item xs={ 6 }>
-					<ControlLabel>{ __( 'Line Height', 'elementor' ) }</ControlLabel>
+					<ControlLabel>{ __( 'Line height', 'elementor' ) }</ControlLabel>
 				</Grid>
 				<Grid item xs={ 6 }>
 					<SizeControl />

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

@@ -10,7 +10,7 @@ export const TextColorField = () => {
 		<StylesField bind="color">
 			<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap">
 				<Grid item xs={ 6 }>
-					<ControlLabel>{ __( 'Text Color', 'elementor' ) }</ControlLabel>
+					<ControlLabel>{ __( 'Text color', 'elementor' ) }</ControlLabel>
 				</Grid>
 				<Grid item xs={ 6 }>
 					<ColorControl />

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

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { ControlLabel } from '@elementor/editor-controls';
 import { type StringPropValue } from '@elementor/editor-props';
-import { ItalicIcon, StrikethroughIcon, UnderlineIcon } from '@elementor/icons';
+import { StrikethroughIcon, UnderlineIcon } from '@elementor/icons';
 import { Grid, ToggleButton as ToggleButtonBase, ToggleButtonGroup, type ToggleButtonProps } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
@@ -9,23 +9,10 @@ import { useStylesField } from '../../../hooks/use-styles-field';
 
 const buttonSize = 'tiny';
 
-export const TextStyleField = () => {
-	const [ fontStyle, setFontStyle ] = useStylesField< StringPropValue | null >( 'font-style' );
+export const TextDecorationField = () => {
 	const [ textDecoration, setTextDecoration ] = useStylesField< StringPropValue | null >( 'text-decoration' );
 
-	const formats = [ fontStyle?.value, ...( textDecoration?.value || '' ).split( ' ' ) ];
-
-	const handleSetFontStyle = ( newValue: string | null ) => {
-		if ( newValue === null ) {
-			return setFontStyle( null );
-		}
-
-		setFontStyle( {
-			$$type: 'string',
-			value: newValue,
-		} );
-	};
-
+	const formats = [ ...( textDecoration?.value || '' ).split( ' ' ) ];
 	const handleSetTextDecoration = ( newValue: string | null ) => {
 		if ( newValue === null ) {
 			return setTextDecoration( null );
@@ -44,14 +31,6 @@ export const TextStyleField = () => {
 			</Grid>
 			<Grid item xs={ 6 } display="flex" justifyContent="end">
 				<ToggleButtonGroup value={ formats }>
-					<ToggleButton
-						value="italic"
-						onChange={ ( v ) => handleSetFontStyle( fontStyle?.value === v ? null : v ) }
-						aria-label="italic"
-						sx={ { marginLeft: 'auto' } }
-					>
-						<ItalicIcon fontSize={ buttonSize } />
-					</ToggleButton>
 					<ShorthandControl
 						value="line-through"
 						currentValues={ textDecoration?.value || '' }

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

@@ -38,7 +38,7 @@ export const TextStrokeField = () => {
 
 	return (
 		<AddOrRemoveContent
-			label={ __( 'Text Stroke', 'elementor' ) }
+			label={ __( 'Text stroke', 'elementor' ) }
 			isAdded={ hasTextStroke }
 			onAdd={ addTextStroke }
 			onRemove={ removeTextStroke }

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

@@ -39,7 +39,7 @@ export const TransformField = () => (
 	<StylesField bind={ 'text-transform' }>
 		<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap">
 			<Grid item xs={ 6 }>
-				<ControlLabel>{ __( 'Text Transform', 'elementor' ) }</ControlLabel>
+				<ControlLabel>{ __( 'Text transform', 'elementor' ) }</ControlLabel>
 			</Grid>
 			<Grid item xs={ 6 } display="flex" justifyContent="end">
 				<ToggleControl options={ options } />

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

@@ -1,17 +1,19 @@
 import * as React from 'react';
-import { Divider, Stack } from '@elementor/ui';
+import { Stack } from '@elementor/ui';
 
 import { CollapsibleContent } from '../../collapsible-content';
+import { PanelDivider } from '../../panel-divider';
 import { FontFamilyField } from './font-family-field';
 import { FontSizeField } from './font-size-field';
+import { FontStyleField } from './font-style-field';
 import { FontWeightField } from './font-weight-field';
 import { LetterSpacingField } from './letter-spacing-field';
 import { LineHeightField } from './line-height-field';
 import { TextAlignmentField } from './text-alignment-field';
 import { TextColorField } from './text-color-field';
+import { TextDecorationField } from './text-decoration-field';
 import { TextDirectionField } from './text-direction-field';
 import { TextStrokeField } from './text-stroke-field';
-import { TextStyleField } from './text-style-field';
 import { TransformField } from './transform-field';
 import { WordSpacingField } from './word-spacing-field';
 
@@ -21,7 +23,7 @@ export const TypographySection = () => {
 			<FontFamilyField />
 			<FontWeightField />
 			<FontSizeField />
-			<Divider />
+			<PanelDivider />
 			<TextAlignmentField />
 			<TextColorField />
 			<CollapsibleContent>
@@ -29,10 +31,11 @@ export const TypographySection = () => {
 					<LineHeightField />
 					<LetterSpacingField />
 					<WordSpacingField />
-					<Divider />
-					<TextStyleField />
+					<PanelDivider />
+					<TextDecorationField />
 					<TransformField />
 					<TextDirectionField />
+					<FontStyleField />
 					<TextStrokeField />
 				</Stack>
 			</CollapsibleContent>

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

@@ -10,7 +10,7 @@ export const WordSpacingField = () => {
 		<StylesField bind="word-spacing">
 			<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap">
 				<Grid item xs={ 6 }>
-					<ControlLabel>{ __( 'Word Spacing', 'elementor' ) }</ControlLabel>
+					<ControlLabel>{ __( 'Word spacing', 'elementor' ) }</ControlLabel>
 				</Grid>
 				<Grid item xs={ 6 }>
 					<SizeControl />

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

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { PropKeyProvider, PropProvider } from '@elementor/editor-controls';
 import { updateElementSettings, useElementSetting } from '@elementor/editor-elements';
-import { type LinkPropValue, type PropKey, type PropValue } from '@elementor/editor-props';
+import { type PropKey, type PropValue } from '@elementor/editor-props';
 
 import { useElement } from '../contexts/element-context';
 import { createTopLevelOjectType } from './create-top-level-object-type';
@@ -16,16 +16,10 @@ export const SettingsField = ( { bind, children }: Props ) => {
 
 	const settingsValue = useElementSetting< PropValue >( element.id, bind );
 
-	const linkValue = useElementSetting< PropValue >( element.id, 'link' ) as LinkPropValue;
-
 	const value = { [ bind ]: settingsValue };
 
 	const propType = createTopLevelOjectType( { schema: elementType.propsSchema } );
 
-	if ( bind === 'tag' && linkValue?.value && 'div-block' === elementType.key ) {
-		return null;
-	}
-
 	const setValue = ( newValue: Record< string, PropValue > ) => {
 		updateElementSettings( {
 			id: element.id,