@elementor/editor-editing-panel 1.19.0 → 1.21.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elementor/editor-editing-panel",
-  "version": "1.19.0",
+  "version": "1.21.0",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -40,14 +40,14 @@
   },
   "dependencies": {
     "@elementor/editor": "0.18.3",
-    "@elementor/editor-controls": "0.18.0",
+    "@elementor/editor-controls": "0.19.0",
     "@elementor/editor-current-user": "0.3.0",
-    "@elementor/editor-elements": "0.6.4",
+    "@elementor/editor-elements": "0.6.5",
     "@elementor/editor-panels": "0.13.0",
-    "@elementor/editor-props": "0.11.0",
+    "@elementor/editor-props": "0.11.1",
     "@elementor/editor-responsive": "0.13.3",
-    "@elementor/editor-styles": "0.6.3",
-    "@elementor/editor-styles-repository": "0.7.7",
+    "@elementor/editor-styles": "0.6.4",
+    "@elementor/editor-styles-repository": "0.7.8",
     "@elementor/editor-ui": "0.4.2",
     "@elementor/editor-v1-adapters": "0.11.0",
     "@elementor/icons": "1.37.0",

package/src/components/section.tsx

@@ -22,9 +22,13 @@ export function Section( { title, children, defaultExpanded = false }: Props ) {
 				id={ labelId }
 				aria-controls={ contentId }
 				onClick={ () => setIsOpen( ( prev ) => ! prev ) }
+				sx={ { '&:hover': { backgroundColor: 'transparent' } } }
 			>
-				<ListItemText secondary={ title } />
-				<CollapseIcon open={ isOpen } color="secondary" />
+				<ListItemText
+					secondary={ title }
+					secondaryTypographyProps={ { sx: { typography: 'caption', fontWeight: 'bold' } } }
+				/>
+				<CollapseIcon open={ isOpen } color="secondary" fontSize="tiny" />
 			</ListItemButton>
 			<Collapse id={ contentId } aria-labelledby={ labelId } in={ isOpen } timeout="auto" unmountOnExit>
 				<Stack gap={ 2.5 } p={ 2 }>

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

@@ -0,0 +1,83 @@
+import * as React from 'react';
+import { ControlLabel, type ToggleButtonGroupItem, ToggleControl } from '@elementor/editor-controls';
+import {
+	JustifyBottomIcon,
+	JustifyCenterIcon as CenterIcon,
+	JustifyDistributeVerticalIcon as EvenlyIcon,
+	JustifySpaceAroundVerticalIcon as AroundIcon,
+	JustifySpaceBetweenVerticalIcon as BetweenIcon,
+	JustifyTopIcon,
+} from '@elementor/icons';
+import { DirectionProvider, Stack, ThemeProvider, withDirection } from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+
+import { StylesField } from '../../../controls-registry/styles-field';
+import { useDirection } from '../../../hooks/use-direction';
+import { RotatedIcon } from './utils/rotated-icon';
+
+type AlignContent = 'start' | 'center' | 'end' | 'space-between' | 'space-around' | 'space-evenly';
+
+const StartIcon = withDirection( JustifyTopIcon );
+const EndIcon = withDirection( JustifyBottomIcon );
+
+const iconProps = {
+	isClockwise: false,
+	offset: 0,
+	disableRotationForReversed: true,
+};
+
+const options: ToggleButtonGroupItem< AlignContent >[] = [
+	{
+		value: 'start',
+		label: __( 'Start', 'elementor' ),
+		renderContent: ( { size } ) => <RotatedIcon icon={ StartIcon } size={ size } { ...iconProps } />,
+		showTooltip: true,
+	},
+	{
+		value: 'center',
+		label: __( 'Center', 'elementor' ),
+		renderContent: ( { size } ) => <RotatedIcon icon={ CenterIcon } size={ size } { ...iconProps } />,
+		showTooltip: true,
+	},
+	{
+		value: 'end',
+		label: __( 'End', 'elementor' ),
+		renderContent: ( { size } ) => <RotatedIcon icon={ EndIcon } size={ size } { ...iconProps } />,
+		showTooltip: true,
+	},
+	{
+		value: 'space-between',
+		label: __( 'Space between', 'elementor' ),
+		renderContent: ( { size } ) => <RotatedIcon icon={ BetweenIcon } size={ size } { ...iconProps } />,
+		showTooltip: true,
+	},
+	{
+		value: 'space-around',
+		label: __( 'Space around', 'elementor' ),
+		renderContent: ( { size } ) => <RotatedIcon icon={ AroundIcon } size={ size } { ...iconProps } />,
+		showTooltip: true,
+	},
+	{
+		value: 'space-evenly',
+		label: __( 'Space evenly', 'elementor' ),
+		renderContent: ( { size } ) => <RotatedIcon icon={ EvenlyIcon } size={ size } { ...iconProps } />,
+		showTooltip: true,
+	},
+];
+
+export const AlignContentField = () => {
+	const { isSiteRtl } = useDirection();
+
+	return (
+		<DirectionProvider rtl={ isSiteRtl }>
+			<ThemeProvider>
+				<StylesField bind="align-content">
+					<Stack gap={ 1 }>
+						<ControlLabel>{ __( 'Align content', 'elementor' ) }</ControlLabel>
+						<ToggleControl options={ options } fullWidth={ true } />
+					</Stack>
+				</StylesField>
+			</ThemeProvider>
+		</DirectionProvider>
+	);
+};

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

@@ -37,7 +37,7 @@ export const DisplayField = () => {
 
 	return (
 		<StylesField bind="display">
-			<Stack gap={ 1 }>
+			<Stack gap={ 0.75 }>
 				<ControlLabel>{ __( 'Display', 'elementor' ) }</ControlLabel>
 				<ToggleControl options={ options } fullWidth={ true } />
 			</Stack>

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

@@ -71,7 +71,7 @@ export const JustifyContentField = () => {
 		<DirectionProvider rtl={ isSiteRtl }>
 			<ThemeProvider>
 				<StylesField bind="justify-content">
-					<Stack gap={ 1 }>
+					<Stack gap={ 0.75 }>
 						<ControlLabel>{ __( 'Justify content', 'elementor' ) }</ControlLabel>
 						<ToggleControl options={ options } fullWidth={ true } />
 					</Stack>

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

@@ -9,6 +9,7 @@ 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 { AlignContentField } from './align-content-field';
 import { AlignItemsField } from './align-items-field';
 import { AlignSelfChild } from './align-self-child-field';
 import { DisplayField } from './display-field';
@@ -34,16 +35,21 @@ export const LayoutSection = () => {
 	);
 };
 
-const FlexFields = () => (
-	<>
-		<FlexDirectionField />
-		<JustifyContentField />
-		<AlignItemsField />
-		<PanelDivider />
-		<GapControlField />
-		<WrapField />
-	</>
-);
+const FlexFields = () => {
+	const [ flexWrap ] = useStylesField< StringPropValue >( 'flex-wrap' );
+
+	return (
+		<>
+			<FlexDirectionField />
+			<JustifyContentField />
+			<AlignItemsField />
+			<PanelDivider />
+			<GapControlField />
+			<WrapField />
+			{ [ 'wrap', 'wrap-reverse' ].includes( flexWrap?.value as string ) && <AlignContentField /> }
+		</>
+	);
+};
 
 const FlexChildFields = () => (
 	<>

package/src/components/style-sections/layout-section/utils/rotated-icon.tsx

@@ -11,6 +11,7 @@ type Props = {
 	size: ToggleButtonProps[ 'size' ];
 	isClockwise?: boolean;
 	offset?: number;
+	disableRotationForReversed?: boolean;
 };
 
 const CLOCKWISE_ANGLES: Record< FlexDirection, number > = {
@@ -27,26 +28,40 @@ const COUNTER_CLOCKWISE_ANGLES: Record< FlexDirection, number > = {
 	'column-reverse': -270,
 };
 
-export const RotatedIcon = ( { icon: Icon, size, isClockwise = true, offset = 0 }: Props ) => {
-	const rotate = useRef( useGetTargetAngle( isClockwise, offset ) );
-	rotate.current = useGetTargetAngle( isClockwise, offset, rotate );
+export const RotatedIcon = ( {
+	icon: Icon,
+	size,
+	isClockwise = true,
+	offset = 0,
+	disableRotationForReversed = false,
+}: Props ) => {
+	const rotate = useRef( useGetTargetAngle( isClockwise, offset, disableRotationForReversed ) );
+	rotate.current = useGetTargetAngle( isClockwise, offset, disableRotationForReversed, rotate );
 
 	return <Icon fontSize={ size } sx={ { transition: '.3s', rotate: `${ rotate.current }deg` } } />;
 };
 
-const useGetTargetAngle = ( isClockwise: boolean, offset: number, existingRef?: React.MutableRefObject< number > ) => {
+const useGetTargetAngle = (
+	isClockwise: boolean,
+	offset: number,
+	disableRotationForReversed: boolean,
+	existingRef?: React.MutableRefObject< number >
+) => {
 	const [ direction ] = useStylesField< StringPropValue >( 'flex-direction' );
 	const isRtl = 'rtl' === useTheme().direction;
 	const rotationMultiplier = isRtl ? -1 : 1;
 	const angleMap = isClockwise ? CLOCKWISE_ANGLES : COUNTER_CLOCKWISE_ANGLES;
 
-	const currentAngle = existingRef
-		? existingRef.current * rotationMultiplier // Multiply by rotationMultiplier to get the correct angle for RTL, as it will have returned multiplied by this
-		: angleMap[ ( direction?.value as FlexDirection ) || 'row' ] + offset;
-	const targetAngle = angleMap[ ( direction?.value as FlexDirection ) || 'row' ] + offset;
+	const currentDirection = ( direction?.value as FlexDirection ) || 'row';
+	const currentAngle = existingRef ? existingRef.current * rotationMultiplier : angleMap[ currentDirection ] + offset;
+	const targetAngle = angleMap[ currentDirection ] + offset;
 
-	const diffToTargetAngle = ( targetAngle - currentAngle + 360 ) % 360; // Make sure the diff is between 0, 360;
-	const formattedDiff = ( ( diffToTargetAngle + 180 ) % 360 ) - 180; // Get the angle to rotate as a value between -180, 180
+	const diffToTargetAngle = ( targetAngle - currentAngle + 360 ) % 360;
+	const formattedDiff = ( ( diffToTargetAngle + 180 ) % 360 ) - 180;
+
+	if ( disableRotationForReversed && [ 'row-reverse', 'column-reverse' ].includes( currentDirection ) ) {
+		return 0;
+	}
 
 	return ( currentAngle + formattedDiff ) * rotationMultiplier;
 };

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

@@ -44,7 +44,7 @@ export const DimensionsField = () => {
 };
 const DimensionField = ( { side, label }: { side: Side; label: string } ) => {
 	return (
-		<Grid container gap={ 1 } alignItems="center">
+		<Grid container gap={ 0.75 } alignItems="center">
 			<Grid item xs={ 12 }>
 				<ControlLabel>{ label }</ControlLabel>
 			</Grid>

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

@@ -60,7 +60,7 @@ type ControlProps = {
 const SizeField = ( { label, bind, extendedValues }: ControlProps ) => {
 	return (
 		<StylesField bind={ bind }>
-			<Grid container gap={ 1 } alignItems="center">
+			<Grid container gap={ 0.75 } alignItems="center">
 				<Grid item xs={ 12 }>
 					<ControlLabel>{ label }</ControlLabel>
 				</Grid>

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

@@ -146,7 +146,7 @@ const DynamicSettings = ( { controls }: { controls: DynamicTag[ 'atomic_controls
 
 	return (
 		<>
-			<Tabs indicatorColor="secondary" textColor="secondary" { ...getTabsProps() }>
+			<Tabs size="small" variant="fullWidth" { ...getTabsProps() }>
 				{ tabs.map( ( { value }, index ) => (
 					<Tab key={ index } label={ value.label } sx={ { px: 1, py: 0.5 } } { ...getTabProps( index ) } />
 				) ) }
@@ -178,7 +178,7 @@ const Control = ( { control }: { control: Control[ 'value' ] } ) => {
 
 	return (
 		<DynamicControl bind={ control.bind }>
-			<Grid container gap={ 1 }>
+			<Grid container gap={ 0.75 }>
 				{ control.label ? (
 					<Grid item xs={ 12 }>
 						<ControlLabel>{ control.label }</ControlLabel>