@elementor/editor-editing-panel 1.1.0 → 1.2.0

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

@@ -1,82 +1,109 @@
 import * as React from 'react';
+import { type JSX } from 'react';
 import { ControlLabel, type ToggleButtonGroupItem, ToggleControl } from '@elementor/editor-controls';
 import {
 	JustifyBottomIcon,
-	JustifyCenterIcon,
-	JustifyDistributeVerticalIcon,
-	JustifySpaceAroundVerticalIcon,
-	JustifySpaceBetweenVerticalIcon,
+	JustifyCenterIcon as CenterIcon,
+	JustifyDistributeVerticalIcon as EvenlyIcon,
+	JustifySpaceAroundVerticalIcon as AroundIcon,
+	JustifySpaceBetweenVerticalIcon as BetweenIcon,
 	JustifyTopIcon,
 } from '@elementor/icons';
-import { Stack } from '@elementor/ui';
+import {
+	DirectionProvider,
+	Stack,
+	ThemeProvider,
+	type ToggleButtonProps,
+	useTheme,
+	withDirection,
+} 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 { rotateFlexIcon } from './utils/rotate-flex-icon';
+import { type FlexDirection } from './flex-direction-field';
 
 type JustifyContent = 'start' | 'center' | 'end' | 'space-between' | 'space-around' | 'space-evenly';
 
 export const JustifyContentField = () => {
-	const [ direction ] = useStylesField( 'flex-direction' );
+	const options = useOptions(),
+		{ isSiteRtl } = useDirection();
 
-	const { isUiRtl, isSiteRtl } = useDirection(),
-		sx = { transform: rotateFlexIcon( direction as string, -1 ) } as const,
-		shouldReverseOrder = isSiteRtl !== isUiRtl;
+	return (
+		<DirectionProvider rtl={ isSiteRtl }>
+			<ThemeProvider>
+				<StylesField bind="justify-content">
+					<Stack gap={ 1 }>
+						<ControlLabel>{ __( 'Justify Content', 'elementor' ) }</ControlLabel>
+						<ToggleControl options={ options } fullWidth={ true } />
+					</Stack>
+				</StylesField>
+			</ThemeProvider>
+		</DirectionProvider>
+	);
+};
 
-	const StartIcon = isSiteRtl ? JustifyBottomIcon : JustifyTopIcon,
-		EndIcon = isSiteRtl ? JustifyTopIcon : JustifyBottomIcon;
+const useOptions = (): ToggleButtonGroupItem< JustifyContent >[] => {
+	const StartIcon = withDirection( JustifyTopIcon ),
+		EndIcon = withDirection( JustifyBottomIcon );
 
-	const options: ToggleButtonGroupItem< JustifyContent >[] = [
+	return [
 		{
 			value: 'start',
 			label: __( 'Start', 'elementor' ),
-			renderContent: ( { size } ) => <StartIcon fontSize={ size } sx={ sx } />,
+			renderContent: ( { size } ) => <RotatedIcon icon={ StartIcon } size={ size } />,
 			showTooltip: true,
 		},
 		{
 			value: 'center',
 			label: __( 'Center', 'elementor' ),
-			renderContent: ( { size } ) => <JustifyCenterIcon fontSize={ size } sx={ sx } />,
+			renderContent: ( { size } ) => <RotatedIcon icon={ CenterIcon } size={ size } />,
 			showTooltip: true,
 		},
 		{
 			value: 'end',
 			label: __( 'End', 'elementor' ),
-			renderContent: ( { size } ) => <EndIcon fontSize={ size } sx={ sx } />,
+			renderContent: ( { size } ) => <RotatedIcon icon={ EndIcon } size={ size } />,
 			showTooltip: true,
 		},
 		{
 			value: 'space-between',
-			label: __( 'Space Between', 'elementor' ),
-			renderContent: ( { size } ) => <JustifySpaceBetweenVerticalIcon fontSize={ size } sx={ sx } />,
+			label: __( 'Space between', 'elementor' ),
+			renderContent: ( { size } ) => <RotatedIcon icon={ BetweenIcon } size={ size } />,
 			showTooltip: true,
 		},
 		{
 			value: 'space-around',
-			label: __( 'Space Around', 'elementor' ),
-			renderContent: ( { size } ) => <JustifySpaceAroundVerticalIcon fontSize={ size } sx={ sx } />,
+			label: __( 'Space around', 'elementor' ),
+			renderContent: ( { size } ) => <RotatedIcon icon={ AroundIcon } size={ size } />,
 			showTooltip: true,
 		},
 		{
 			value: 'space-evenly',
-			label: __( 'Space Evenly', 'elementor' ),
-			renderContent: ( { size } ) => <JustifyDistributeVerticalIcon fontSize={ size } sx={ sx } />,
+			label: __( 'Space evenly', 'elementor' ),
+			renderContent: ( { size } ) => <RotatedIcon icon={ EvenlyIcon } size={ size } />,
 			showTooltip: true,
 		},
 	];
+};
+
+const RotatedIcon = ( { icon: Icon, size }: { icon: JSX.ElementType; size: ToggleButtonProps[ 'size' ] } ) => {
+	const [ direction ] = useStylesField< FlexDirection >( 'flex-direction' ),
+		isRtl = 'rtl' === useTheme().direction,
+		rotationMultiplier = isRtl ? -1 : 1;
 
-	if ( shouldReverseOrder ) {
-		options.reverse();
-	}
+	const rotationAngelMap: Record< FlexDirection, number > = {
+		row: -90,
+		column: 0,
+		'row-reverse': 90,
+		'column-reverse': 180,
+	};
 
 	return (
-		<StylesField bind="justify-content">
-			<Stack gap={ 1 }>
-				<ControlLabel>{ __( 'Justify Content', 'elementor' ) }</ControlLabel>
-				<ToggleControl options={ options } fullWidth={ true } />
-			</Stack>
-		</StylesField>
+		<Icon
+			fontSize={ size }
+			sx={ { transition: '.3s', rotate: `${ rotationAngelMap[ direction || 'row' ] * rotationMultiplier }deg` } }
+		/>
 	);
 };

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

@@ -1,9 +1,15 @@
 import * as React from 'react';
-import { Stack } from '@elementor/ui';
+import { ControlLabel } from '@elementor/editor-controls';
+import { Divider, Stack } from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
 
 import { useStylesField } from '../../../hooks/use-styles-field';
+import { AlignItemsField } from './align-items-field';
 import { DisplayField } from './display-field';
+import { FlexDirectionField } from './flex-direction-field';
+import { FlexOrderField } from './flex-order-field';
 import { JustifyContentField } from './justify-content-field';
+import { WrapField } from './wrap-field';
 
 export const LayoutSection = () => {
 	const [ display ] = useStylesField( 'display' );
@@ -11,7 +17,20 @@ export const LayoutSection = () => {
 	return (
 		<Stack gap={ 2 }>
 			<DisplayField />
-			{ 'flex' === display && <JustifyContentField /> }
+			{ 'flex' === display && <FlexFields /> }
 		</Stack>
 	);
 };
+
+const FlexFields = () => (
+	<>
+		<FlexDirectionField />
+		<JustifyContentField />
+		<AlignItemsField />
+		<Divider />
+		<WrapField />
+		<Divider />
+		<ControlLabel>{ __( 'Flex child', 'elementor' ) }</ControlLabel>
+		<FlexOrderField />
+	</>
+);

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

@@ -0,0 +1,52 @@
+import * as React from 'react';
+import { ControlLabel, type ToggleButtonGroupItem, ToggleControl } from '@elementor/editor-controls';
+import { ArrowBackIcon, ArrowForwardIcon, ArrowRightIcon } from '@elementor/icons';
+import { DirectionProvider, Grid, ThemeProvider } from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+
+import { StylesField } from '../../../controls-registry/styles-field';
+import { useDirection } from '../../../hooks/use-direction';
+
+type FlexWrap = 'nowrap' | 'wrap' | 'wrap-reverse';
+
+const options: ToggleButtonGroupItem< FlexWrap >[] = [
+	{
+		value: 'nowrap',
+		label: __( 'No wrap', 'elementor' ),
+		renderContent: ( { size } ) => <ArrowRightIcon fontSize={ size } />,
+		showTooltip: true,
+	},
+	{
+		value: 'wrap',
+		label: __( 'Wrap', 'elementor' ),
+		renderContent: ( { size } ) => <ArrowBackIcon fontSize={ size } />,
+		showTooltip: true,
+	},
+	{
+		value: 'wrap-reverse',
+		label: __( 'Wrap reverse', 'elementor' ),
+		renderContent: ( { size } ) => <ArrowForwardIcon fontSize={ size } />,
+		showTooltip: true,
+	},
+];
+
+export const WrapField = () => {
+	const { isSiteRtl } = useDirection();
+
+	return (
+		<DirectionProvider rtl={ isSiteRtl }>
+			<ThemeProvider>
+				<StylesField bind={ 'flex-wrap' }>
+					<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap">
+						<Grid item xs={ 6 }>
+							<ControlLabel>{ __( 'Wrap', 'elementor' ) }</ControlLabel>
+						</Grid>
+						<Grid item xs={ 6 } sx={ { display: 'flex', justifyContent: 'flex-end' } }>
+							<ToggleControl options={ options } />
+						</Grid>
+					</Grid>
+				</StylesField>
+			</ThemeProvider>
+		</DirectionProvider>
+	);
+};

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

@@ -1,16 +1,51 @@
 import * as React from 'react';
-import { ControlLabel, StrokeControl } from '@elementor/editor-controls';
+import { StrokeControl } from '@elementor/editor-controls';
 import { __ } from '@wordpress/i18n';
 
 import { StylesField } from '../../../controls-registry/styles-field';
-import { CollapsibleField } from '../../collapsible-field';
+import { useStylesField } from '../../../hooks/use-styles-field';
+import { AddOrRemoveContent } from '../../add-or-remove-content';
+
+const initTextStroke = {
+	$$type: 'stroke',
+	value: {
+		color: {
+			$$type: 'color',
+			value: '#000000',
+		},
+		width: {
+			$$type: 'size',
+			value: {
+				unit: 'px',
+				size: 1,
+			},
+		},
+	},
+};
 
 export const TextStrokeField = () => {
+	const [ textStroke, setTextStroke ] = useStylesField( '-webkit-text-stroke' );
+
+	const addTextStroke = () => {
+		setTextStroke( initTextStroke );
+	};
+
+	const removeTextStroke = () => {
+		setTextStroke( null );
+	};
+
+	const hasTextStroke = Boolean( textStroke );
+
 	return (
-		<StylesField bind="-webkit-text-stroke">
-			<CollapsibleField label={ <ControlLabel>{ __( 'Text Stroke', 'elementor' ) }</ControlLabel> }>
+		<AddOrRemoveContent
+			label={ __( 'Text Stroke', 'elementor' ) }
+			isAdded={ hasTextStroke }
+			onAdd={ addTextStroke }
+			onRemove={ removeTextStroke }
+		>
+			<StylesField bind={ '-webkit-text-stroke' }>
 				<StrokeControl />
-			</CollapsibleField>
-		</StylesField>
+			</StylesField>
+		</AddOrRemoveContent>
 	);
 };

package/src/components/style-tab.tsx

@@ -10,7 +10,7 @@ import { __ } from '@wordpress/i18n';
 import { ClassesPropProvider } from '../contexts/classes-prop-context';
 import { useElement } from '../contexts/element-context';
 import { StyleProvider } from '../contexts/style-context';
-import { CssClassSelectorSection } from './css-class-selector-section';
+import { CssClassSelector } from './css-class-selector';
 import { Section } from './section';
 import { SectionsList } from './sections-list';
 import { BackgroundSection } from './style-sections/background-section/background-section';
@@ -32,7 +32,7 @@ export const StyleTab = () => {
 	return (
 		<ClassesPropProvider prop={ currentClassesProp }>
 			<StyleProvider meta={ { breakpoint, state: null } } id={ activeStyleDefId } setId={ setActiveStyleDefId }>
-				<CssClassSelectorSection />
+				<CssClassSelector />
 				<Divider />
 				<SectionsList>
 					<Section title={ __( 'Layout', 'elementor' ) }>

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

@@ -1,76 +0,0 @@
-import * as React from 'react';
-import { useElementSetting, useElementStyles } from '@elementor/editor-elements';
-import { type ClassesPropValue } from '@elementor/editor-props';
-import { Chip, Stack, Typography } from '@elementor/ui';
-import { __ } from '@wordpress/i18n';
-
-import { useClassesProp } from '../contexts/classes-prop-context';
-import { useElement } from '../contexts/element-context';
-import { useStyle } from '../contexts/style-context';
-import { MultiCombobox, type Option } from './multi-combobox';
-
-const ID = 'elementor-css-class-selector';
-const TAGS_LIMIT = 8;
-
-export function CssClassSelectorSection() {
-	const options = useOptions();
-
-	const { id: activeId, setId: setActiveId } = useStyle();
-	const appliedIds = useAppliedClassesIds();
-
-	const applied = options.filter( ( option ) => appliedIds.includes( option.value ) );
-	const active = options.find( ( option ) => option.value === activeId ) || null;
-
-	return (
-		<Stack gap={ 1 } p={ 2 }>
-			<Typography component="label" variant="caption" htmlFor={ ID }>
-				{ __( 'CSS Classes', 'elementor' ) }
-			</Typography>
-			<MultiCombobox
-				id={ ID }
-				size="tiny"
-				options={ options }
-				selected={ applied }
-				limitTags={ TAGS_LIMIT }
-				optionsLabel={ __( 'Global CSS Classes', 'elementor' ) }
-				renderTags={ ( tagValue, getTagProps ) =>
-					tagValue.map( ( option, index ) => {
-						const chipProps = getTagProps( { index } );
-
-						return (
-							<Chip
-								{ ...chipProps }
-								key={ chipProps.key }
-								size="small"
-								label={ option.label }
-								variant={ option.value === active?.value ? 'filled' : 'standard' }
-								color={ option.color ?? 'default' }
-								onClick={ () => setActiveId( option.value ) }
-								onDelete={ null }
-							/>
-						);
-					} )
-				}
-			/>
-		</Stack>
-	);
-}
-
-function useAppliedClassesIds() {
-	const { element } = useElement();
-	const currentClassesProp = useClassesProp();
-
-	return useElementSetting< ClassesPropValue >( element.id, currentClassesProp )?.value || [];
-}
-
-function useOptions() {
-	const { element } = useElement();
-
-	const styleDefs = useElementStyles( element.id );
-
-	return Object.values( styleDefs ).map< Option >( ( styleDef ) => ( {
-		label: styleDef.label,
-		value: styleDef.id,
-		color: 'primary',
-	} ) );
-}

package/src/components/style-sections/layout-section/utils/rotate-flex-icon.ts

@@ -1,12 +0,0 @@
-export function rotateFlexIcon( direction: string | null = 'row', initValue: number ) {
-	const rotationIndexMap: Record< string, number > = {
-		row: 0,
-		column: 1,
-		'row-reverse': 2,
-		'column-reverse': 3,
-	};
-
-	const rotationIndex = initValue + ( rotationIndexMap[ direction || 'row' ] ?? 0 );
-
-	return `rotate(calc(90deg * ${ rotationIndex }))`;
-}