@elementor/editor-editing-panel 1.12.0 → 1.13.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elementor/editor-editing-panel",
-  "version": "1.12.0",
+  "version": "1.13.0",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -40,9 +40,9 @@
   },
   "dependencies": {
     "@elementor/editor": "0.18.0",
-    "@elementor/editor-controls": "0.11.0",
+    "@elementor/editor-controls": "0.12.0",
     "@elementor/editor-elements": "0.5.4",
-    "@elementor/editor-panels": "0.11.0",
+    "@elementor/editor-panels": "0.11.1",
     "@elementor/editor-props": "0.9.2",
     "@elementor/editor-responsive": "0.13.0",
     "@elementor/editor-styles": "0.5.7",

package/src/components/add-or-remove-content.tsx

@@ -4,6 +4,8 @@ import { ControlLabel } from '@elementor/editor-controls';
 import { MinusIcon, PlusIcon } from '@elementor/icons';
 import { Collapse, IconButton, Stack } from '@elementor/ui';
 
+import { SectionContent } from './section-content';
+
 const SIZE = 'tiny';
 
 type Props = {
@@ -15,7 +17,7 @@ type Props = {
 
 export const AddOrRemoveContent = ( { isAdded, label, onAdd, onRemove, children }: PropsWithChildren< Props > ) => {
 	return (
-		<Stack gap={ 1.5 }>
+		<SectionContent>
 			<Stack
 				direction="row"
 				sx={ {
@@ -35,8 +37,8 @@ export const AddOrRemoveContent = ( { isAdded, label, onAdd, onRemove, children
 				) }
 			</Stack>
 			<Collapse in={ isAdded } unmountOnExit>
-				<Stack gap={ 1.5 }>{ children }</Stack>
+				<SectionContent>{ children }</SectionContent>
 			</Collapse>
-		</Stack>
+		</SectionContent>
 	);
 };

package/src/components/collapsible-content.tsx

@@ -17,7 +17,7 @@ export const CollapsibleContent = ( { children, defaultOpen = false }: Collapsib
 	};
 
 	return (
-		<Stack sx={ { py: 0.5 } }>
+		<Stack>
 			<Button
 				fullWidth
 				size="small"
@@ -25,6 +25,7 @@ export const CollapsibleContent = ( { children, defaultOpen = false }: Collapsib
 				variant="outlined"
 				onClick={ handleToggle }
 				endIcon={ <CollapseIcon open={ open } /> }
+				sx={ { my: 0.5 } }
 			>
 				{ open ? __( 'Show less', 'elementor' ) : __( 'Show more', 'elementor' ) }
 			</Button>

package/src/components/popover-content.tsx

@@ -0,0 +1,15 @@
+import { type FC, type PropsWithChildren } from 'react';
+import * as React from 'react';
+import { Stack } from '@elementor/ui';
+
+type PopoverContentProps = PropsWithChildren< {
+	alignItems?: 'center';
+	gap?: number;
+	p?: 1.5 | 2 | 2.5;
+} >;
+
+export const PopoverContent: FC< PopoverContentProps > = ( { alignItems, gap = 1.5, p, children } ) => (
+	<Stack alignItems={ alignItems } gap={ gap } p={ p }>
+		{ children }
+	</Stack>
+);

package/src/components/section-content.tsx

@@ -0,0 +1,16 @@
+import { type FC, type PropsWithChildren } from 'react';
+import * as React from 'react';
+import { Stack } from '@elementor/ui';
+
+type SectionContentProps = PropsWithChildren< {
+	gap?: number;
+	sx?: {
+		pt?: number;
+	};
+} >;
+
+export const SectionContent: FC< SectionContentProps > = ( { gap = 2, sx, children } ) => (
+	<Stack gap={ gap } sx={ { ...sx } }>
+		{ children }
+	</Stack>
+);

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

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

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

@@ -1,15 +1,15 @@
 import * as React from 'react';
 import { BoxShadowRepeaterControl } from '@elementor/editor-controls';
-import { Stack } from '@elementor/ui';
 
 import { StylesField } from '../../../controls-registry/styles-field';
+import { SectionContent } from '../../section-content';
 
 export const EffectsSection = () => {
 	return (
-		<Stack gap={ 1.5 }>
+		<SectionContent>
 			<StylesField bind="box-shadow">
 				<BoxShadowRepeaterControl />
 			</StylesField>
-		</Stack>
+		</SectionContent>
 	);
 };

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

@@ -8,12 +8,13 @@ import {
 } from '@elementor/editor-controls';
 import { type NumberPropValue } from '@elementor/editor-props';
 import { ArrowDownSmallIcon, ArrowUpSmallIcon, PencilIcon } from '@elementor/icons';
-import { DirectionProvider, Grid, Stack, ThemeProvider } from '@elementor/ui';
+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 { SectionContent } from '../../section-content';
 
 type GroupControlItemOption = 'first' | 'last' | 'custom';
 
@@ -70,7 +71,7 @@ export const FlexOrderField = () => {
 	return (
 		<DirectionProvider rtl={ isSiteRtl }>
 			<ThemeProvider>
-				<Stack gap={ 2 }>
+				<SectionContent>
 					<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap">
 						<Grid item xs={ 6 }>
 							<ControlLabel>{ __( 'Order', 'elementor' ) }</ControlLabel>
@@ -101,7 +102,7 @@ export const FlexOrderField = () => {
 							</Grid>
 						</StylesField>
 					) }
-				</Stack>
+				</SectionContent>
 			</ThemeProvider>
 		</DirectionProvider>
 	);

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

@@ -9,12 +9,13 @@ import {
 } from '@elementor/editor-controls';
 import type { NumberPropValue, SizePropValue } from '@elementor/editor-props';
 import { ExpandIcon, PencilIcon, ShrinkIcon } from '@elementor/icons';
-import { DirectionProvider, Grid, Stack, ThemeProvider } from '@elementor/ui';
+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 { SectionContent } from '../../section-content';
 
 type GroupItem = 'flex-grow' | 'flex-shrink' | 'custom';
 
@@ -79,7 +80,7 @@ export const FlexSizeField = () => {
 	return (
 		<DirectionProvider rtl={ isSiteRtl }>
 			<ThemeProvider>
-				<Stack gap={ 2 }>
+				<SectionContent>
 					<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap">
 						<Grid item xs={ 6 }>
 							<ControlLabel>{ __( 'Size', 'elementor' ) }</ControlLabel>
@@ -95,7 +96,7 @@ export const FlexSizeField = () => {
 					</Grid>
 
 					{ 'custom' === activeGroup && <FlexCustomField /> }
-				</Stack>
+				</SectionContent>
 			</ThemeProvider>
 		</DirectionProvider>
 	);

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

@@ -2,13 +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 { 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 { SectionContent } from '../../section-content';
 import { AlignItemsField } from './align-items-field';
 import { AlignSelfChild } from './align-self-child-field';
 import { DisplayField } from './display-field';
@@ -26,11 +26,11 @@ export const LayoutSection = () => {
 	const parentStyle = useComputedStyle( parent?.id || null );
 
 	return (
-		<Stack gap={ 2 }>
+		<SectionContent>
 			<DisplayField />
 			{ 'flex' === display?.value && <FlexFields /> }
 			{ 'flex' === parentStyle?.display && <FlexChildFields /> }
-		</Stack>
+		</SectionContent>
 	);
 };
 

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

@@ -1,11 +1,11 @@
 import * as React from 'react';
 import { type StringPropValue } from '@elementor/editor-props';
 import { useSessionStorage } from '@elementor/session';
-import { Stack } from '@elementor/ui';
 
 import { useStyle } from '../../../contexts/style-context';
 import { useStylesField } from '../../../hooks/use-styles-field';
 import { useStylesFields } from '../../../hooks/use-styles-fields';
+import { SectionContent } from '../../section-content';
 import { DimensionsField } from './dimensions-field';
 import { PositionField } from './position-field';
 import { ZIndexField } from './z-index-field';
@@ -58,7 +58,7 @@ export const PositionSection = () => {
 	const isNotStatic = positionValue && positionValue?.value !== 'static';
 
 	return (
-		<Stack gap={ 1.5 }>
+		<SectionContent>
 			<PositionField onChange={ onPositionChange } />
 			{ isNotStatic ? (
 				<>
@@ -66,7 +66,7 @@ export const PositionSection = () => {
 					<ZIndexField />
 				</>
 			) : null }
-		</Stack>
+		</SectionContent>
 	);
 };
 

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { ControlLabel, type ToggleButtonGroupItem, ToggleControl } from '@elementor/editor-controls';
-import { ExpandBottomIcon, EyeIcon, EyeOffIcon } from '@elementor/icons';
+import { EyeIcon, EyeOffIcon, LetterAIcon } from '@elementor/icons';
 import { Grid } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
@@ -24,7 +24,7 @@ const options: ToggleButtonGroupItem< Overflows >[] = [
 	{
 		value: 'auto',
 		label: __( 'Auto', 'elementor' ),
-		renderContent: ( { size } ) => <ExpandBottomIcon fontSize={ size } />,
+		renderContent: ( { size } ) => <LetterAIcon fontSize={ size } />,
 		showTooltip: true,
 	},
 ];

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

@@ -5,11 +5,12 @@ import { __ } from '@wordpress/i18n';
 
 import { StylesField, type StylesFieldProps } from '../../../controls-registry/styles-field';
 import { PanelDivider } from '../../panel-divider';
+import { SectionContent } from '../../section-content';
 import { OverflowField } from './overflow-field';
 
 export const SizeSection = () => {
 	return (
-		<Stack gap={ 1.5 }>
+		<SectionContent>
 			<Grid container gap={ 2 } flexWrap="nowrap">
 				<Grid item xs={ 6 }>
 					<SizeField bind="width" label={ __( 'Width', 'elementor' ) } />
@@ -38,7 +39,7 @@ export const SizeSection = () => {
 			<Stack>
 				<OverflowField />
 			</Stack>
-		</Stack>
+		</SectionContent>
 	);
 };
 

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

@@ -1,14 +1,14 @@
 import * as React from 'react';
 import { LinkedDimensionsControl } from '@elementor/editor-controls';
-import { Stack } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
 import { StylesField } from '../../../controls-registry/styles-field';
 import { PanelDivider } from '../../panel-divider';
+import { SectionContent } from '../../section-content';
 
 export const SpacingSection = () => {
 	return (
-		<Stack gap={ 1.5 }>
+		<SectionContent>
 			<StylesField bind={ 'padding' }>
 				<LinkedDimensionsControl label={ __( 'Padding', 'elementor' ) } />
 			</StylesField>
@@ -16,6 +16,6 @@ export const SpacingSection = () => {
 			<StylesField bind={ 'margin' }>
 				<LinkedDimensionsControl label={ __( 'Margin', 'elementor' ) } />
 			</StylesField>
-		</Stack>
+		</SectionContent>
 	);
 };

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

@@ -1,8 +1,8 @@
 import * as React from 'react';
-import { 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';
@@ -19,7 +19,7 @@ import { WordSpacingField } from './word-spacing-field';
 
 export const TypographySection = () => {
 	return (
-		<Stack gap={ 1.5 }>
+		<SectionContent>
 			<FontFamilyField />
 			<FontWeightField />
 			<FontSizeField />
@@ -27,7 +27,7 @@ export const TypographySection = () => {
 			<TextAlignmentField />
 			<TextColorField />
 			<CollapsibleContent>
-				<Stack gap={ 1.5 } sx={ { pt: 1.5 } }>
+				<SectionContent sx={ { pt: 2 } }>
 					<LineHeightField />
 					<LetterSpacingField />
 					<WordSpacingField />
@@ -37,8 +37,8 @@ export const TypographySection = () => {
 					<TextDirectionField />
 					<FontStyleField />
 					<TextStrokeField />
-				</Stack>
+				</SectionContent>
 			</CollapsibleContent>
-		</Stack>
+		</SectionContent>
 	);
 };

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>