@elementor/editor-editing-panel 1.11.1 → 1.13.0

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,41 +1,44 @@
 import * as React from 'react';
-import { Divider, Stack } from '@elementor/ui';
 
 import { CollapsibleContent } from '../../collapsible-content';
+import { PanelDivider } from '../../panel-divider';
+import { SectionContent } from '../../section-content';
 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';
 
 export const TypographySection = () => {
 	return (
-		<Stack gap={ 1.5 }>
+		<SectionContent>
 			<FontFamilyField />
 			<FontWeightField />
 			<FontSizeField />
-			<Divider />
+			<PanelDivider />
 			<TextAlignmentField />
 			<TextColorField />
 			<CollapsibleContent>
-				<Stack gap={ 1.5 } sx={ { pt: 1.5 } }>
+				<SectionContent sx={ { pt: 2 } }>
 					<LineHeightField />
 					<LetterSpacingField />
 					<WordSpacingField />
-					<Divider />
-					<TextStyleField />
+					<PanelDivider />
+					<TextDecorationField />
 					<TransformField />
 					<TextDirectionField />
+					<FontStyleField />
 					<TextStrokeField />
-				</Stack>
+				</SectionContent>
 			</CollapsibleContent>
-		</Stack>
+		</SectionContent>
 	);
 };

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,

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

@@ -22,6 +22,7 @@ import {
 } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
+import { PopoverContent } from '../../components/popover-content';
 import { Control as BaseControl } from '../../controls-registry/control';
 import { type ControlType, getControlByType } from '../../controls-registry/controls-registry';
 import { usePersistDynamicValue } from '../../hooks/use-persist-dynamic-value';
@@ -153,15 +154,15 @@ const DynamicSettings = ( { controls }: { controls: DynamicTag[ 'atomic_controls
 
 			{ tabs.map( ( { value }, index ) => {
 				return (
-					<TabPanel key={ index } sx={ { flexGrow: 1 } } { ...getTabPanelProps( index ) }>
-						<Stack gap={ 1 } px={ 2 }>
+					<TabPanel key={ index } sx={ { flexGrow: 1, py: 0 } } { ...getTabPanelProps( index ) }>
+						<PopoverContent p={ 1.5 }>
 							{ value.items.map( ( item ) => {
 								if ( item.type === 'control' ) {
 									return <Control key={ item.value.bind } control={ item.value } />;
 								}
 								return null;
 							} ) }
-						</Stack>
+						</PopoverContent>
 					</TabPanel>
 				);
 			} ) }

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

@@ -16,6 +16,7 @@ import {
 } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
+import { PopoverContent } from '../../components/popover-content';
 import { usePersistDynamicValue } from '../../hooks/use-persist-dynamic-value';
 import { usePropDynamicTags } from '../hooks/use-prop-dynamic-tags';
 import { getAtomicDynamicTags } from '../sync/get-atomic-dynamic-tags';
@@ -85,7 +86,7 @@ export const DynamicSelection = ( { onSelect }: DynamicSelectionProps ) => {
 					<MenuList role="listbox" tabIndex={ 0 }>
 						{ options.map( ( [ category, items ], index ) => (
 							<Fragment key={ index }>
-								<ListSubheader sx={ { typography: 'caption', color: 'text.tertiary' } }>
+								<ListSubheader sx={ { px: 1.5, typography: 'caption', color: 'text.tertiary' } }>
 									{ dynamicGroups?.[ category ]?.title || category }
 								</ListSubheader>
 								{ items.map( ( { value, label: tagLabel } ) => {
@@ -97,7 +98,7 @@ export const DynamicSelection = ( { onSelect }: DynamicSelectionProps ) => {
 											selected={ isSelected }
 											// eslint-disable-next-line jsx-a11y/no-autofocus
 											autoFocus={ isSelected }
-											sx={ { typography: 'caption' } }
+											sx={ { px: 1.5, typography: 'caption' } }
 											onClick={ () => handleSetDynamicTag( value ) }
 										>
 											{ tagLabel }
@@ -108,7 +109,7 @@ export const DynamicSelection = ( { onSelect }: DynamicSelectionProps ) => {
 						) ) }
 					</MenuList>
 				) : (
-					<Stack alignItems="center" p={ 2.5 } gap={ 1.5 }>
+					<PopoverContent alignItems="center" p={ 2.5 }>
 						<PhotoIcon fontSize="large" />
 						<Typography align="center" variant="caption" color="text.secondary">
 							{ __( 'Sorry, nothing matched', 'elementor' ) }
@@ -127,7 +128,7 @@ export const DynamicSelection = ( { onSelect }: DynamicSelectionProps ) => {
 							&nbsp;
 							{ __( 'and try again.', 'elementor' ) }
 						</Typography>
-					</Stack>
+					</PopoverContent>
 				) }
 			</Box>
 		</Stack>