@elementor/editor-editing-panel 1.20.0 → 1.22.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elementor/editor-editing-panel",
-  "version": "1.20.0",
+  "version": "1.22.0",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -39,23 +39,23 @@
     "dev": "tsup --config=../../tsup.dev.ts"
   },
   "dependencies": {
-    "@elementor/editor": "0.18.3",
-    "@elementor/editor-controls": "0.18.1",
+    "@elementor/editor": "0.18.4",
+    "@elementor/editor-controls": "0.19.1",
     "@elementor/editor-current-user": "0.3.0",
-    "@elementor/editor-elements": "0.6.4",
-    "@elementor/editor-panels": "0.13.0",
-    "@elementor/editor-props": "0.11.0",
+    "@elementor/editor-elements": "0.6.6",
+    "@elementor/editor-panels": "0.13.1",
+    "@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-ui": "0.4.2",
+    "@elementor/editor-styles": "0.6.4",
+    "@elementor/editor-styles-repository": "0.8.0",
+    "@elementor/editor-ui": "0.4.3",
     "@elementor/editor-v1-adapters": "0.11.0",
     "@elementor/icons": "1.37.0",
-    "@elementor/locations": "0.7.6",
-    "@elementor/menus": "0.1.3",
+    "@elementor/locations": "0.7.7",
+    "@elementor/menus": "0.1.4",
     "@elementor/schema": "0.1.2",
     "@elementor/session": "0.1.0",
-    "@elementor/ui": "1.26.0",
+    "@elementor/ui": "1.32.1",
     "@elementor/utils": "0.4.0",
     "@wordpress/i18n": "^5.13.0"
   },

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

@@ -165,6 +165,9 @@ function useCreateActions( {
 		return {
 			// translators: %s is the label of the new class.
 			label: ( value ) => __( 'Create new "%s"', 'elementor' ).replace( '%s', value ),
+			// 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 ?? '' ),
+			condition: ( _, inputValue ) => isLabelValid( inputValue ) && ! hasReachedLimit( provider ),
 			apply: ( label ) => {
 				const createdId = create( label );
 
@@ -175,14 +178,22 @@ function useCreateActions( {
 				pushAppliedId( createdId );
 				setActiveId( createdId );
 			},
-			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 ?? '' ),
 		};
 	} );
 }
 
+function hasReachedLimit( provider: StylesProvider ) {
+	if ( provider.limit === undefined ) {
+		return false;
+	}
+
+	return provider.actions.get().length >= provider.limit;
+}
+
+function isLabelValid( newLabel: string ) {
+	return stylesRepository.isLabelValid( newLabel ) && ! stylesRepository.isLabelExist( newLabel );
+}
+
 function useAppliedOptions( options: StyleDefOption[], appliedIds: StyleDefinitionID[] ) {
 	const applied = options.filter( ( option ) => option.value && appliedIds.includes( option.value ) );
 

package/src/components/multi-combobox.tsx

@@ -72,7 +72,7 @@ export function MultiCombobox< TOption extends Option >( {
 				if ( reason === 'createOption' ) {
 					const [ firstAction ] = filterActions( actions, { options, inputValue: inputValue ?? '' } );
 
-					if ( firstAction.value ) {
+					if ( firstAction?.value ) {
 						return run( firstAction.apply, firstAction.value );
 					}
 				}

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