@elementor/editor-editing-panel 0.19.0 → 1.1.0

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

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { ControlLabel, NumberControl } from '@elementor/editor-controls';
+import { Grid } from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+
+import { StylesField } from '../../../controls-registry/styles-field';
+
+export const ZIndexField = () => {
+	return (
+		<StylesField bind="z-index">
+			<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap">
+				<Grid item xs={ 6 }>
+					<ControlLabel>{ __( 'Z-Index', 'elementor' ) }</ControlLabel>
+				</Grid>
+				<Grid item xs={ 6 }>
+					<NumberControl />
+				</Grid>
+			</Grid>
+		</StylesField>
+	);
+};

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

@@ -0,0 +1,45 @@
+import * as React from 'react';
+import { ControlLabel, type ToggleButtonGroupItem, ToggleControl } from '@elementor/editor-controls';
+import { ExpandBottomIcon, EyeIcon, EyeOffIcon } from '@elementor/icons';
+import { Grid } from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+
+import { StylesField } from '../../../controls-registry/styles-field';
+
+type Overflows = 'visible' | 'hidden' | 'auto';
+
+const options: ToggleButtonGroupItem< Overflows >[] = [
+	{
+		value: 'visible',
+		label: __( 'Visible', 'elementor' ),
+		renderContent: ( { size } ) => <EyeIcon fontSize={ size } />,
+		showTooltip: true,
+	},
+	{
+		value: 'hidden',
+		label: __( 'Hidden', 'elementor' ),
+		renderContent: ( { size } ) => <EyeOffIcon fontSize={ size } />,
+		showTooltip: true,
+	},
+	{
+		value: 'auto',
+		label: __( 'Auto', 'elementor' ),
+		renderContent: ( { size } ) => <ExpandBottomIcon fontSize={ size } />,
+		showTooltip: true,
+	},
+];
+
+export const OverflowField = () => {
+	return (
+		<StylesField bind={ 'overflow' }>
+			<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap">
+				<Grid item xs={ 6 }>
+					<ControlLabel>{ __( 'Overflow', 'elementor' ) }</ControlLabel>
+				</Grid>
+				<Grid item xs={ 6 } sx={ { display: 'flex', justifyContent: 'flex-end' } }>
+					<ToggleControl options={ options } />
+				</Grid>
+			</Grid>
+		</StylesField>
+	);
+};

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

@@ -0,0 +1,62 @@
+import * as React from 'react';
+import { ControlLabel, SizeControl } from '@elementor/editor-controls';
+import { Divider, Grid, Stack } from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+
+import { StylesField, type StylesFieldProps } from '../../../controls-registry/styles-field';
+import { OverflowField } from './overflow-field';
+
+export const SizeSection = () => {
+	return (
+		<Stack gap={ 1.5 }>
+			<Grid container gap={ 2 } flexWrap="nowrap">
+				<Grid item xs={ 6 }>
+					<SizeField bind="width" label={ __( 'Width', 'elementor' ) } />
+				</Grid>
+				<Grid item xs={ 6 }>
+					<SizeField bind="height" label={ __( 'Height', 'elementor' ) } />
+				</Grid>
+			</Grid>
+			<Grid container gap={ 2 } flexWrap="nowrap">
+				<Grid item xs={ 6 }>
+					<SizeField bind="min-width" label={ __( 'Min. Width', 'elementor' ) } />
+				</Grid>
+				<Grid item xs={ 6 }>
+					<SizeField bind="min-height" label={ __( 'Min. Height', 'elementor' ) } />
+				</Grid>
+			</Grid>
+			<Grid container gap={ 2 } flexWrap="nowrap">
+				<Grid item xs={ 6 }>
+					<SizeField bind="max-width" label={ __( 'Max. Width', 'elementor' ) } />
+				</Grid>
+				<Grid item xs={ 6 }>
+					<SizeField bind="max-height" label={ __( 'Max. Height', 'elementor' ) } />
+				</Grid>
+			</Grid>
+			<Divider />
+			<Stack>
+				<OverflowField />
+			</Stack>
+		</Stack>
+	);
+};
+
+type ControlProps = {
+	bind: StylesFieldProps[ 'bind' ];
+	label: string;
+};
+
+const SizeField = ( { label, bind }: ControlProps ) => {
+	return (
+		<StylesField bind={ bind }>
+			<Grid container gap={ 1 } alignItems="center">
+				<Grid item xs={ 12 }>
+					<ControlLabel>{ label }</ControlLabel>
+				</Grid>
+				<Grid item xs={ 12 }>
+					<SizeControl />
+				</Grid>
+			</Grid>
+		</StylesField>
+	);
+};

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

@@ -1,22 +1,20 @@
 import * as React from 'react';
-import { AccordionSection } from '../../accordion-section';
+import { LinkedDimensionsControl } from '@elementor/editor-controls';
 import { Divider, Stack } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
-import { LinkedDimensionsControl } from './linked-dimensions-control';
-import { StyleControl } from '../../../controls/style-control';
+
+import { StylesField } from '../../../controls-registry/styles-field';
 
 export const SpacingSection = () => {
 	return (
-		<AccordionSection title={ __( 'Spacing', 'elementor' ) }>
-			<Stack gap={ 1.5 }>
-				<StyleControl bind={ 'padding' }>
-					<LinkedDimensionsControl label={ __( 'Padding', 'elementor' ) } />
-				</StyleControl>
-				<Divider />
-				<StyleControl bind={ 'margin' }>
-					<LinkedDimensionsControl label={ __( 'Margin', 'elementor' ) } />
-				</StyleControl>
-			</Stack>
-		</AccordionSection>
+		<Stack gap={ 1.5 }>
+			<StylesField bind={ 'padding' }>
+				<LinkedDimensionsControl label={ __( 'Padding', 'elementor' ) } />
+			</StylesField>
+			<Divider />
+			<StylesField bind={ 'margin' }>
+				<LinkedDimensionsControl label={ __( 'Margin', 'elementor' ) } />
+			</StylesField>
+		</Stack>
 	);
 };

package/src/components/style-sections/typography-section/font-family-field.tsx

@@ -0,0 +1,40 @@
+import * as React from 'react';
+import { ControlLabel, FontFamilyControl } from '@elementor/editor-controls';
+import { Grid } from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+
+import { StylesField } from '../../../controls-registry/styles-field';
+import { getElementorConfig } from '../../../sync/get-elementor-config';
+
+export const FontFamilyField = () => {
+	const fontFamilies = getFontFamilies();
+
+	if ( ! fontFamilies ) {
+		return null;
+	}
+
+	return (
+		<StylesField bind="font-family">
+			<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap">
+				<Grid item xs={ 6 }>
+					<ControlLabel>{ __( 'Font Family', 'elementor' ) }</ControlLabel>
+				</Grid>
+				<Grid item xs={ 6 }>
+					<FontFamilyControl fontFamilies={ fontFamilies } />
+				</Grid>
+			</Grid>
+		</StylesField>
+	);
+};
+
+const getFontFamilies = () => {
+	const { controls } = getElementorConfig();
+
+	const options = controls?.font?.options;
+
+	if ( ! options ) {
+		return null;
+	}
+
+	return options;
+};

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

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { ControlLabel, SizeControl } from '@elementor/editor-controls';
+import { Grid } from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+
+import { StylesField } from '../../../controls-registry/styles-field';
+
+export const FontSizeField = () => {
+	return (
+		<StylesField bind="font-size">
+			<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap">
+				<Grid item xs={ 6 }>
+					<ControlLabel>{ __( 'Font Size', 'elementor' ) }</ControlLabel>
+				</Grid>
+				<Grid item xs={ 6 }>
+					<SizeControl />
+				</Grid>
+			</Grid>
+		</StylesField>
+	);
+};

package/src/components/style-sections/typography-section/{font-weight-control.tsx → font-weight-field.tsx}

@@ -1,8 +1,9 @@
 import * as React from 'react';
-import { __ } from '@wordpress/i18n';
+import { ControlLabel, SelectControl } from '@elementor/editor-controls';
 import { Grid } from '@elementor/ui';
-import { StyleControl } from '../../../controls/style-control';
-import { SelectControl } from '../../../controls/control-types/select-control';
+import { __ } from '@wordpress/i18n';
+
+import { StylesField } from '../../../controls-registry/styles-field';
 
 const fontWeightOptions = [
 	{ label: __( 'Light - 400', 'elementor' ), value: '400' },
@@ -12,17 +13,17 @@ const fontWeightOptions = [
 	{ label: __( 'Black - 900', 'elementor' ), value: '900' },
 ];
 
-export const FontWeightControl = () => {
+export const FontWeightField = () => {
 	return (
-		<StyleControl bind="font-weight">
-			<Grid container spacing={ 1 } alignItems="center">
+		<StylesField bind="font-weight">
+			<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap">
 				<Grid item xs={ 6 }>
-					<StyleControl.Label>{ __( 'Font Weight', 'elementor' ) }</StyleControl.Label>
+					<ControlLabel>{ __( 'Font Weight', 'elementor' ) }</ControlLabel>
 				</Grid>
 				<Grid item xs={ 6 }>
 					<SelectControl options={ fontWeightOptions } />
 				</Grid>
 			</Grid>
-		</StyleControl>
+		</StylesField>
 	);
 };

package/src/components/style-sections/typography-section/letter-spacing-field.tsx

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { ControlLabel, SizeControl } from '@elementor/editor-controls';
+import { Grid } from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+
+import { StylesField } from '../../../controls-registry/styles-field';
+
+export const LetterSpacingField = () => {
+	return (
+		<StylesField bind="letter-spacing">
+			<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap">
+				<Grid item xs={ 6 }>
+					<ControlLabel>{ __( 'Letter Spacing', 'elementor' ) }</ControlLabel>
+				</Grid>
+				<Grid item xs={ 6 }>
+					<SizeControl />
+				</Grid>
+			</Grid>
+		</StylesField>
+	);
+};

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

@@ -0,0 +1,47 @@
+import * as React from 'react';
+import { ControlLabel, type ToggleButtonGroupItem, ToggleControl } from '@elementor/editor-controls';
+import { AlignCenterIcon, AlignJustifiedIcon, AlignLeftIcon, AlignRightIcon } from '@elementor/icons';
+import { Grid } from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+
+import { StylesField } from '../../../controls-registry/styles-field';
+
+type Alignments = 'left' | 'center' | 'right' | 'justify';
+
+const options: ToggleButtonGroupItem< Alignments >[] = [
+	{
+		value: 'left',
+		label: __( 'Left', 'elementor' ),
+		renderContent: ( { size } ) => <AlignLeftIcon fontSize={ size } />,
+	},
+	{
+		value: 'center',
+		label: __( 'Center', 'elementor' ),
+		renderContent: ( { size } ) => <AlignCenterIcon fontSize={ size } />,
+	},
+	{
+		value: 'right',
+		label: __( 'Right', 'elementor' ),
+		renderContent: ( { size } ) => <AlignRightIcon fontSize={ size } />,
+	},
+	{
+		value: 'justify',
+		label: __( 'Justify', 'elementor' ),
+		renderContent: ( { size } ) => <AlignJustifiedIcon fontSize={ size } />,
+	},
+];
+
+export const TextAlignmentField = () => {
+	return (
+		<StylesField bind={ 'text-align' }>
+			<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap">
+				<Grid item xs={ 6 }>
+					<ControlLabel>{ __( 'Alignment', 'elementor' ) }</ControlLabel>
+				</Grid>
+				<Grid item xs={ 6 } display="flex" justifyContent="end">
+					<ToggleControl options={ options } />
+				</Grid>
+			</Grid>
+		</StylesField>
+	);
+};

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

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { ColorControl, ControlLabel } from '@elementor/editor-controls';
+import { Grid } from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+
+import { StylesField } from '../../../controls-registry/styles-field';
+
+export const TextColorField = () => {
+	return (
+		<StylesField bind="color">
+			<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap">
+				<Grid item xs={ 6 }>
+					<ControlLabel>{ __( 'Text Color', 'elementor' ) }</ControlLabel>
+				</Grid>
+				<Grid item xs={ 6 }>
+					<ColorControl />
+				</Grid>
+			</Grid>
+		</StylesField>
+	);
+};

package/src/components/style-sections/typography-section/{text-direction-control.tsx → text-direction-field.tsx}

@@ -1,10 +1,10 @@
 import * as React from 'react';
-import { __ } from '@wordpress/i18n';
-import { Grid } from '@elementor/ui';
+import { ControlLabel, type ToggleButtonGroupItem, ToggleControl } from '@elementor/editor-controls';
 import { TextDirectionLtrIcon, TextDirectionRtlIcon } from '@elementor/icons';
-import { ToggleButtonGroupItem } from '../../../controls/components/control-toggle-button-group';
-import { StyleControl } from '../../../controls/style-control';
-import { ToggleControl } from '../../../controls/control-types/toggle-control';
+import { Grid } from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+
+import { StylesField } from '../../../controls-registry/styles-field';
 
 type Direction = 'ltr' | 'rtl';
 
@@ -12,26 +12,26 @@ const options: ToggleButtonGroupItem< Direction >[] = [
 	{
 		value: 'ltr',
 		label: __( 'Left to Right', 'elementor' ),
-		icon: TextDirectionLtrIcon,
+		renderContent: ( { size } ) => <TextDirectionLtrIcon fontSize={ size } />,
 	},
 	{
 		value: 'rtl',
 		label: __( 'Right to Left', 'elementor' ),
-		icon: TextDirectionRtlIcon,
+		renderContent: ( { size } ) => <TextDirectionRtlIcon fontSize={ size } />,
 	},
 ];
 
-export const TextDirectionControl = () => {
+export const TextDirectionField = () => {
 	return (
-		<StyleControl bind={ 'direction' }>
-			<Grid container spacing={ 1 } alignItems="center">
+		<StylesField bind={ 'direction' }>
+			<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap">
 				<Grid item xs={ 6 }>
-					<StyleControl.Label>{ __( 'Direction', 'elementor' ) }</StyleControl.Label>
+					<ControlLabel>{ __( 'Direction', 'elementor' ) }</ControlLabel>
 				</Grid>
 				<Grid item xs={ 6 } display="flex" justifyContent="end">
 					<ToggleControl options={ options } />
 				</Grid>
 			</Grid>
-		</StyleControl>
+		</StylesField>
 	);
 };

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

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import { ControlLabel, StrokeControl } from '@elementor/editor-controls';
+import { __ } from '@wordpress/i18n';
+
+import { StylesField } from '../../../controls-registry/styles-field';
+import { CollapsibleField } from '../../collapsible-field';
+
+export const TextStrokeField = () => {
+	return (
+		<StylesField bind="-webkit-text-stroke">
+			<CollapsibleField label={ <ControlLabel>{ __( 'Text Stroke', 'elementor' ) }</ControlLabel> }>
+				<StrokeControl />
+			</CollapsibleField>
+		</StylesField>
+	);
+};

package/src/components/style-sections/typography-section/{text-style-control.tsx → text-style-field.tsx}

@@ -1,20 +1,21 @@
 import * as React from 'react';
-import { __ } from '@wordpress/i18n';
-import { Grid, ToggleButton as ToggleButtonBase, ToggleButtonGroup, ToggleButtonProps } from '@elementor/ui';
+import { ControlLabel } from '@elementor/editor-controls';
 import { ItalicIcon, StrikethroughIcon, UnderlineIcon } from '@elementor/icons';
-import { ControlLabel } from '../../control-label';
-import { useStyleControl } from '../../../controls/hooks/use-style-control';
+import { Grid, ToggleButton as ToggleButtonBase, ToggleButtonGroup, type ToggleButtonProps } from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+
+import { useStylesField } from '../../../hooks/use-styles-field';
 
 const buttonSize = 'tiny';
 
-export const TextStyleControl = () => {
-	const [ fontStyle, setFontStyle ] = useStyleControl< string | null >( 'font-style' );
-	const [ textDecoration, setTextDecoration ] = useStyleControl< string | null >( 'text-decoration' );
+export const TextStyleField = () => {
+	const [ fontStyle, setFontStyle ] = useStylesField< string | null >( 'font-style' );
+	const [ textDecoration, setTextDecoration ] = useStylesField< string | null >( 'text-decoration' );
 
 	const formats = [ fontStyle, ...( textDecoration || '' ).split( ' ' ) ];
 
 	return (
-		<Grid container spacing={ 1 } alignItems="center">
+		<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap">
 			<Grid item xs={ 6 }>
 				<ControlLabel>{ __( 'Style', 'elementor' ) }</ControlLabel>
 			</Grid>

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

@@ -0,0 +1,40 @@
+import * as React from 'react';
+import { ControlLabel, type ToggleButtonGroupItem, ToggleControl } from '@elementor/editor-controls';
+import { LetterCaseIcon, LetterCaseLowerIcon, LetterCaseUpperIcon } from '@elementor/icons';
+import { Grid } from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+
+import { StylesField } from '../../../controls-registry/styles-field';
+
+type Transforms = 'capitalize' | 'uppercase' | 'lowercase';
+
+const options: ToggleButtonGroupItem< Transforms >[] = [
+	{
+		value: 'capitalize',
+		label: __( 'Capitalize', 'elementor' ),
+		renderContent: ( { size } ) => <LetterCaseIcon fontSize={ size } />,
+	},
+	{
+		value: 'uppercase',
+		label: __( 'Uppercase', 'elementor' ),
+		renderContent: ( { size } ) => <LetterCaseUpperIcon fontSize={ size } />,
+	},
+	{
+		value: 'lowercase',
+		label: __( 'Lowercase', 'elementor' ),
+		renderContent: ( { size } ) => <LetterCaseLowerIcon fontSize={ size } />,
+	},
+];
+
+export const TransformField = () => (
+	<StylesField bind={ 'text-transform' }>
+		<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap">
+			<Grid item xs={ 6 }>
+				<ControlLabel>{ __( 'Transform', 'elementor' ) }</ControlLabel>
+			</Grid>
+			<Grid item xs={ 6 } display="flex" justifyContent="end">
+				<ToggleControl options={ options } />
+			</Grid>
+		</Grid>
+	</StylesField>
+);

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

@@ -1,38 +1,39 @@
 import * as React from 'react';
-import { AccordionSection } from '../../accordion-section';
 import { Divider, Stack } from '@elementor/ui';
-import { TextStyleControl } from './text-style-control';
-import { __ } from '@wordpress/i18n';
-import { FontSizeControl } from './font-size-control';
-import { FontWeightControl } from './font-weight-control';
-import { TextColorControl } from './text-color-control';
-import { LetterSpacingControl } from './letter-spacing-control';
-import { WordSpacingControl } from './word-spacing-control';
+
 import { CollapsibleContent } from '../../collapsible-content';
-import { TransformControl } from './transform-control';
-import { TextAlignmentControl } from './text-alignment-control';
-import { TextDirectionControl } from './text-direction-control';
+import { FontFamilyField } from './font-family-field';
+import { FontSizeField } from './font-size-field';
+import { FontWeightField } from './font-weight-field';
+import { LetterSpacingField } from './letter-spacing-field';
+import { TextAlignmentField } from './text-alignment-field';
+import { TextColorField } from './text-color-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 (
-		<AccordionSection title={ __( 'Typography', 'elementor' ) }>
-			<Stack gap={ 1.5 }>
-				<FontWeightControl />
-				<FontSizeControl />
-				<Divider />
-				<TextColorControl />
-				<CollapsibleContent>
-					<Stack gap={ 1.5 } sx={ { pt: 1.5 } }>
-						<LetterSpacingControl />
-						<WordSpacingControl />
-						<Divider />
-						<TextAlignmentControl />
-						<TextStyleControl />
-						<TransformControl />
-						<TextDirectionControl />
-					</Stack>
-				</CollapsibleContent>
-			</Stack>
-		</AccordionSection>
+		<Stack gap={ 1.5 }>
+			<FontFamilyField />
+			<FontWeightField />
+			<FontSizeField />
+			<Divider />
+			<TextColorField />
+			<CollapsibleContent>
+				<Stack gap={ 1.5 } sx={ { pt: 1.5 } }>
+					<LetterSpacingField />
+					<WordSpacingField />
+					<Divider />
+					<TextAlignmentField />
+					<TextStyleField />
+					<TransformField />
+					<TextDirectionField />
+					<TextStrokeField />
+				</Stack>
+			</CollapsibleContent>
+		</Stack>
 	);
 };

package/src/components/style-sections/typography-section/word-spacing-field.tsx

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { ControlLabel, SizeControl } from '@elementor/editor-controls';
+import { Grid } from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+
+import { StylesField } from '../../../controls-registry/styles-field';
+
+export const WordSpacingField = () => {
+	return (
+		<StylesField bind="word-spacing">
+			<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap">
+				<Grid item xs={ 6 }>
+					<ControlLabel>{ __( 'Word Spacing', 'elementor' ) }</ControlLabel>
+				</Grid>
+				<Grid item xs={ 6 }>
+					<SizeControl />
+				</Grid>
+			</Grid>
+		</StylesField>
+	);
+};