@elementor/editor-editing-panel 1.1.0 → 1.3.0

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-sections/typography-section/text-style-field.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { ControlLabel } from '@elementor/editor-controls';
+import { type StringPropValue } from '@elementor/editor-props';
 import { ItalicIcon, StrikethroughIcon, UnderlineIcon } from '@elementor/icons';
 import { Grid, ToggleButton as ToggleButtonBase, ToggleButtonGroup, type ToggleButtonProps } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
@@ -9,10 +10,32 @@ import { useStylesField } from '../../../hooks/use-styles-field';
 const buttonSize = 'tiny';
 
 export const TextStyleField = () => {
-	const [ fontStyle, setFontStyle ] = useStylesField< string | null >( 'font-style' );
-	const [ textDecoration, setTextDecoration ] = useStylesField< string | null >( 'text-decoration' );
+	const [ fontStyle, setFontStyle ] = useStylesField< StringPropValue | null >( 'font-style' );
+	const [ textDecoration, setTextDecoration ] = useStylesField< StringPropValue | null >( 'text-decoration' );
 
-	const formats = [ fontStyle, ...( textDecoration || '' ).split( ' ' ) ];
+	const formats = [ fontStyle?.value, ...( textDecoration?.value || '' ).split( ' ' ) ];
+
+	const handleSetFontStyle = ( newValue: string | null ) => {
+		if ( newValue === null ) {
+			return setFontStyle( null );
+		}
+
+		setFontStyle( {
+			$$type: 'string',
+			value: newValue,
+		} );
+	};
+
+	const handleSetTextDecoration = ( newValue: string | null ) => {
+		if ( newValue === null ) {
+			return setTextDecoration( null );
+		}
+
+		setTextDecoration( {
+			$$type: 'string',
+			value: newValue,
+		} );
+	};
 
 	return (
 		<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap">
@@ -23,7 +46,7 @@ export const TextStyleField = () => {
 				<ToggleButtonGroup value={ formats }>
 					<ToggleButton
 						value="italic"
-						onChange={ ( v ) => setFontStyle( fontStyle === v ? null : v ) }
+						onChange={ ( v ) => handleSetFontStyle( fontStyle?.value === v ? null : v ) }
 						aria-label="italic"
 						sx={ { marginLeft: 'auto' } }
 					>
@@ -31,16 +54,16 @@ export const TextStyleField = () => {
 					</ToggleButton>
 					<ShorthandControl
 						value="line-through"
-						currentValues={ textDecoration || '' }
-						updateValues={ setTextDecoration }
+						currentValues={ textDecoration?.value || '' }
+						updateValues={ handleSetTextDecoration }
 						aria-label="line-through"
 					>
 						<StrikethroughIcon fontSize={ buttonSize } />
 					</ShorthandControl>
 					<ShorthandControl
 						value="underline"
-						currentValues={ textDecoration || '' }
-						updateValues={ setTextDecoration }
+						currentValues={ textDecoration?.value || '' }
+						updateValues={ handleSetTextDecoration }
 						aria-label="underline"
 					>
 						<UnderlineIcon fontSize={ buttonSize } />

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

@@ -6,6 +6,7 @@ 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 { LineHeightField } from './line-height-field';
 import { TextAlignmentField } from './text-alignment-field';
 import { TextColorField } from './text-color-field';
 import { TextDirectionField } from './text-direction-field';
@@ -21,13 +22,14 @@ export const TypographySection = () => {
 			<FontWeightField />
 			<FontSizeField />
 			<Divider />
+			<TextAlignmentField />
 			<TextColorField />
 			<CollapsibleContent>
 				<Stack gap={ 1.5 } sx={ { pt: 1.5 } }>
+					<LineHeightField />
 					<LetterSpacingField />
 					<WordSpacingField />
 					<Divider />
-					<TextAlignmentField />
 					<TextStyleField />
 					<TransformField />
 					<TextDirectionField />

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/controls-registry/controls-registry.tsx

@@ -1,10 +1,12 @@
 import {
 	type ControlComponent,
 	ImageControl,
+	LinkControl,
 	SelectControl,
 	SizeControl,
 	TextAreaControl,
 	TextControl,
+	UrlControl,
 } from '@elementor/editor-controls';
 
 export type ControlLayout = 'full' | 'two-columns';
@@ -17,6 +19,8 @@ const controlTypes = {
 	textarea: { component: TextAreaControl, layout: 'full' },
 	size: { component: SizeControl, layout: 'two-columns' },
 	select: { component: SelectControl, layout: 'two-columns' },
+	link: { component: LinkControl, layout: 'full' },
+	url: { component: UrlControl, layout: 'full' },
 } as const satisfies ControlRegistry;
 
 export type ControlType = keyof typeof controlTypes;

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

@@ -27,15 +27,17 @@ import { type ControlType, getControlByType } from '../../controls-registry/cont
 import { usePropValueHistory } from '../../hooks/use-prop-value-history';
 import { DynamicControl } from '../dynamic-control';
 import { useDynamicTag } from '../hooks/use-dynamic-tag';
-import { type DynamicPropValue, type DynamicTag } from '../types';
+import { type DynamicTag } from '../types';
+import { dynamicPropTypeUtil } from '../utils';
 import { DynamicSelection } from './dynamic-selection';
 
 const SIZE = 'tiny';
 
 export const DynamicSelectionControl = () => {
-	const { bind, value, setValue } = useBoundProp< DynamicPropValue | null >();
+	const { setValue: setAnyValue } = useBoundProp();
+	const { bind, value } = useBoundProp( dynamicPropTypeUtil );
 	const { getPropValue: getPropValueFromHistory } = usePropValueHistory();
-	const { name: tagName = '' } = value?.value || {};
+	const { name: tagName = '' } = value;
 
 	const selectionPopoverId = useId();
 	const selectionPopoverState = usePopupState( { variant: 'popover', popupId: selectionPopoverId } );
@@ -43,8 +45,9 @@ export const DynamicSelectionControl = () => {
 	const dynamicTag = useDynamicTag( bind, tagName );
 
 	const removeDynamicTag = () => {
-		const propValue = getPropValueFromHistory< DynamicPropValue >( bind );
-		setValue( propValue ?? null );
+		const propValue = getPropValueFromHistory( bind );
+
+		setAnyValue( propValue ?? null );
 	};
 
 	if ( ! dynamicTag ) {

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

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { Fragment, useState } from 'react';
 import { useBoundProp } from '@elementor/editor-controls';
-import { type PropKey, type PropValue } from '@elementor/editor-props';
+import { type PropKey } from '@elementor/editor-props';
 import { PhotoIcon, SearchIcon } from '@elementor/icons';
 import {
 	Box,
@@ -20,8 +20,7 @@ import { __ } from '@wordpress/i18n';
 import { usePropValueHistory } from '../../hooks/use-prop-value-history';
 import { usePropDynamicTags } from '../hooks/use-prop-dynamic-tags';
 import { getAtomicDynamicTags } from '../sync/get-atomic-dynamic-tags';
-import { type DynamicPropValue } from '../types';
-import { isDynamicPropValue } from '../utils';
+import { dynamicPropTypeUtil } from '../utils';
 
 type Option = {
 	label: string;
@@ -39,10 +38,13 @@ export type DynamicSelectionProps = {
 export const DynamicSelection = ( { onSelect }: DynamicSelectionProps ) => {
 	const [ searchValue, setSearchValue ] = useState( '' );
 	const { groups: dynamicGroups } = getAtomicDynamicTags() || {};
-	const { bind, value: currentValue, setValue } = useBoundProp< DynamicPropValue | PropValue >();
+
+	const { value: anyValue } = useBoundProp();
+	const { bind, value: dynamicvalue, setValue } = useBoundProp( dynamicPropTypeUtil );
+
 	const { setPropValue: updatePropValueHistory } = usePropValueHistory();
 
-	const isCurrentValueDynamic = isDynamicPropValue( currentValue );
+	const isCurrentValueDynamic = !! dynamicvalue;
 
 	const options = useFilteredOptions( bind, searchValue );
 
@@ -52,10 +54,10 @@ export const DynamicSelection = ( { onSelect }: DynamicSelectionProps ) => {
 
 	const handleSetDynamicTag = ( value: string ) => {
 		if ( ! isCurrentValueDynamic ) {
-			updatePropValueHistory( bind, currentValue );
+			updatePropValueHistory( bind, anyValue );
 		}
 
-		setValue( { $$type: 'dynamic', value: { name: value, settings: {} } } );
+		setValue( { name: value, settings: {} } );
 
 		onSelect?.();
 	};
@@ -88,7 +90,7 @@ export const DynamicSelection = ( { onSelect }: DynamicSelectionProps ) => {
 									{ dynamicGroups?.[ category ]?.title || category }
 								</ListSubheader>
 								{ items.map( ( { value, label: tagLabel } ) => {
-									const isSelected = isCurrentValueDynamic && value === currentValue?.value?.name;
+									const isSelected = isCurrentValueDynamic && value === dynamicvalue?.name;
 
 									return (
 										<MenuItem

package/src/dynamics/dynamic-control.tsx

@@ -1,17 +1,17 @@
 import * as React from 'react';
 import { BoundPropProvider, useBoundProp } from '@elementor/editor-controls';
-import { type PropKey, type PropValue } from '@elementor/editor-props';
+import { isTransformable, type PropKey, type PropValue } from '@elementor/editor-props';
 
 import { useDynamicTag } from './hooks/use-dynamic-tag';
-import { type DynamicPropValue } from './types';
+import { dynamicPropTypeUtil } from './utils';
 
 export type DynamicControlProps = React.PropsWithChildren< {
 	bind: PropKey;
 } >;
 
 export const DynamicControl = ( { bind, children }: DynamicControlProps ) => {
-	const { value, setValue, bind: propName } = useBoundProp< DynamicPropValue >();
-	const { name = '', settings } = value?.value ?? {};
+	const { value, setValue, bind: propName } = useBoundProp( dynamicPropTypeUtil );
+	const { name = '', settings } = value ?? {};
 
 	const dynamicTag = useDynamicTag( propName, name );
 
@@ -24,13 +24,11 @@ export const DynamicControl = ( { bind, children }: DynamicControlProps ) => {
 
 	const setDynamicValue = ( newValue: PropValue ) => {
 		setValue( {
-			$$type: 'dynamic',
-			value: {
-				name,
-				settings: {
-					...settings,
-					[ bind ]: newValue,
-				},
+			name,
+			settings: {
+				...settings,
+				// The value inside the dynamic is not a transformable value, so we need to store the whole object.
+				[ bind ]: isTransformable( newValue ) ? newValue.value : newValue,
 			},
 		} );
 	};

package/src/dynamics/utils.ts

@@ -1,8 +1,15 @@
-import { isTransformable, type PropType, type PropValue, type TransformablePropType } from '@elementor/editor-props';
+import {
+	createPropUtils,
+	isTransformable,
+	type PropType,
+	type PropValue,
+	type TransformablePropType,
+} from '@elementor/editor-props';
+import { z } from '@elementor/schema';
 
-import { type DynamicPropType, type DynamicPropValue } from './types';
+import { type DynamicPropType } from './types';
 
-const DYNAMIC_PROP_TYPE_KEY = 'dynamic';
+export const DYNAMIC_PROP_TYPE_KEY = 'dynamic';
 
 export const isDynamicPropType = ( prop: TransformablePropType ): prop is DynamicPropType =>
 	prop.key === DYNAMIC_PROP_TYPE_KEY;
@@ -20,3 +27,13 @@ export const isDynamicPropValue = ( prop: PropValue ): prop is DynamicPropValue
 export const supportsDynamic = ( propType: PropType ): boolean => {
 	return !! getDynamicPropType( propType );
 };
+
+export const dynamicPropTypeUtil = createPropUtils(
+	DYNAMIC_PROP_TYPE_KEY,
+	z.strictObject( {
+		name: z.string(),
+		settings: z.record( z.any() ).optional(),
+	} )
+);
+
+export type DynamicPropValue = z.infer< typeof dynamicPropTypeUtil.schema >;

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 }))`;
-}