@elementor/editor-editing-panel 1.17.1 → 1.18.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elementor/editor-editing-panel",
-  "version": "1.17.1",
+  "version": "1.18.0",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -39,16 +39,17 @@
     "dev": "tsup --config=../../tsup.dev.ts"
   },
   "dependencies": {
-    "@elementor/editor": "0.18.2",
-    "@elementor/editor-controls": "0.16.0",
-    "@elementor/editor-elements": "0.6.2",
-    "@elementor/editor-panels": "0.12.2",
-    "@elementor/editor-props": "0.10.0",
-    "@elementor/editor-responsive": "0.13.2",
-    "@elementor/editor-styles": "0.6.2",
-    "@elementor/editor-styles-repository": "0.7.5",
-    "@elementor/editor-ui": "0.4.1",
-    "@elementor/editor-v1-adapters": "0.10.2",
+    "@elementor/editor": "0.18.3",
+    "@elementor/editor-controls": "0.17.0",
+    "@elementor/editor-current-user": "0.3.0",
+    "@elementor/editor-elements": "0.6.3",
+    "@elementor/editor-panels": "0.13.0",
+    "@elementor/editor-props": "0.11.0",
+    "@elementor/editor-responsive": "0.13.3",
+    "@elementor/editor-styles": "0.6.3",
+    "@elementor/editor-styles-repository": "0.7.6",
+    "@elementor/editor-ui": "0.4.2",
+    "@elementor/editor-v1-adapters": "0.11.0",
     "@elementor/icons": "1.37.0",
     "@elementor/locations": "0.7.6",
     "@elementor/menus": "0.1.3",

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { useState } from 'react';
+import { type ReactElement, useState } from 'react';
 import { stylesRepository } from '@elementor/editor-styles-repository';
 import { EditableField, EllipsisWithTooltip, useEditable } from '@elementor/editor-ui';
 import { DotsVerticalIcon } from '@elementor/icons';
@@ -19,13 +19,14 @@ import { useStyle } from '../../contexts/style-context';
 import { CssClassMenu } from './css-class-menu';
 
 type CssClassItemProps = {
-	id: string;
+	id: string | null;
 	label: string;
 	provider: string;
 	isActive: boolean;
 	color: ChipOwnProps[ 'color' ];
+	icon: ReactElement | null;
 	chipProps: ReturnType< AutocompleteRenderGetTagProps >;
-	onClickActive: ( id: string ) => void;
+	onClickActive: ( id: string | null ) => void;
 	renameLabel: ( newLabel: string ) => void;
 	validateLabel?: ( newLabel: string ) => string | undefined | null;
 };
@@ -38,11 +39,12 @@ export function CssClassItem( {
 	provider,
 	isActive,
 	color: colorProp,
+	icon,
 	chipProps,
 	onClickActive,
 	renameLabel,
 }: CssClassItemProps ) {
-	const { meta } = useStyle();
+	const { meta, setMetaState } = useStyle();
 	const popupState = usePopupState( { variant: 'popover' } );
 	const [ chipRef, setChipRef ] = useState< HTMLElement | null >( null );
 	const { onDelete, ...chipGroupProps } = chipProps;
@@ -64,6 +66,8 @@ export function CssClassItem( {
 	const providerActions = stylesRepository.getProviderByKey( provider )?.actions;
 	const allowRename = Boolean( providerActions?.update );
 
+	const isShowingState = isActive && meta.state;
+
 	return (
 		<>
 			<UnstableChipGroup ref={ setChipRef } { ...chipGroupProps } aria-label={ `Edit ${ label }` } role="group">
@@ -76,17 +80,26 @@ export function CssClassItem( {
 							<EllipsisWithTooltip maxWidth="10ch" title={ label } as="div" />
 						)
 					}
-					variant={ isActive && ! meta.state ? 'filled' : 'standard' }
+					variant={ isActive && ! meta.state && ! isEditing ? 'filled' : 'standard' }
+					shape="rounded"
+					icon={ icon }
 					color={ color }
 					onClick={ () => {
-						if ( isActive && allowRename ) {
+						if ( isShowingState ) {
+							setMetaState( null );
+							return;
+						}
+
+						if ( allowRename && isActive ) {
 							openEditMode();
+							return;
 						}
 
 						onClickActive( id );
 					} }
 					aria-pressed={ isActive }
 					sx={ {
+						cursor: isActive && allowRename && ! isShowingState ? 'text' : 'pointer',
 						'&.Mui-focusVisible': {
 							boxShadow: 'none !important',
 						},
@@ -94,17 +107,26 @@ export function CssClassItem( {
 				/>
 				{ ! isEditing && (
 					<Chip
+						icon={ isShowingState ? undefined : <DotsVerticalIcon fontSize="tiny" /> }
 						size={ CHIP_SIZE }
 						label={
-							<Stack direction="row" gap={ 0.5 } alignItems="center">
-								{ isActive && meta.state && <Typography variant="inherit">{ meta.state }</Typography> }
-								<DotsVerticalIcon fontSize="inherit" />
-							</Stack>
+							isShowingState ? (
+								<Stack direction="row" gap={ 0.5 } alignItems="center">
+									<Typography variant="inherit">{ meta.state }</Typography>
+									<DotsVerticalIcon fontSize="tiny" />
+								</Stack>
+							) : undefined
 						}
 						variant="filled"
+						shape="rounded"
 						color={ color }
 						{ ...bindTrigger( popupState ) }
 						aria-label={ __( 'Open CSS Class Menu', 'elementor' ) }
+						sx={ {
+							paddingRight: 0,
+							...( ! isShowingState ? { paddingLeft: 0 } : {} ),
+							'.MuiChip-label': isShowingState ? { paddingRight: 0 } : { padding: 0 },
+						} }
 					/>
 				) }
 			</UnstableChipGroup>

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

@@ -10,7 +10,7 @@ import { useUnapplyClass } from '../../hooks/use-unapply-class';
 const STATES: NonNullable< StyleDefinitionState >[] = [ 'hover', 'focus', 'active' ];
 
 type CssClassMenuProps = {
-	styleId: string;
+	styleId: string | null;
 	provider: string;
 	popupState: PopupState;
 	handleRename: () => void;
@@ -42,8 +42,11 @@ export function CssClassMenu( { styleId, provider, popupState, handleRename, anc
 			<ListSubheader sx={ { typography: 'caption', color: 'text.secondary', pb: 0.5, pt: 1 } }>
 				{ __( 'Pseudo classes', 'elementor' ) }
 			</ListSubheader>
+			<StateMenuItem key="normal" state={ null } styleId={ styleId } closeMenu={ popupState.close } />
 			{ STATES.map( ( state ) => {
-				return <StateMenuItem key={ state } state={ state } styleId={ styleId } />;
+				return (
+					<StateMenuItem key={ state } state={ state } styleId={ styleId } closeMenu={ popupState.close } />
+				);
 			} ) }
 		</Menu>
 	);
@@ -56,10 +59,14 @@ function getMenuItemsByProvider( {
 	closeMenu,
 }: {
 	provider: string;
-	styleId: string;
+	styleId: string | null;
 	handleRename: () => void;
 	closeMenu: () => void;
 } ) {
+	if ( ! styleId ) {
+		return [];
+	}
+
 	const providerInstance = stylesRepository.getProviderByKey( provider );
 	const providerActions = providerInstance?.actions;
 
@@ -67,7 +74,7 @@ function getMenuItemsByProvider( {
 
 	const actions = [
 		canUpdate && <RenameClassMenuItem key="rename-class" handleRename={ handleRename } closeMenu={ closeMenu } />,
-		canDelete && <UnapplyClassMenuItem key="unapply-class" styleId={ styleId } />,
+		canDelete && <UnapplyClassMenuItem key="unapply-class" styleId={ styleId } closeMenu={ closeMenu } />,
 	].filter( Boolean );
 
 	if ( actions.length ) {
@@ -87,10 +94,11 @@ function getMenuItemsByProvider( {
 
 type StateMenuItemProps = {
 	state: StyleDefinitionState;
-	styleId: string;
+	styleId: string | null;
+	closeMenu: () => void;
 };
 
-function StateMenuItem( { state, styleId, ...props }: StateMenuItemProps ) {
+function StateMenuItem( { state, styleId, closeMenu, ...props }: StateMenuItemProps ) {
 	const { id: activeId, setId: setActiveId, setMetaState: setActiveMetaState, meta } = useStyle();
 	const { state: activeState } = meta;
 
@@ -108,18 +116,26 @@ function StateMenuItem( { state, styleId, ...props }: StateMenuItemProps ) {
 				}
 
 				setActiveMetaState( state );
+
+				closeMenu();
 			} }
 		>
-			{ state }
+			{ state ? state : 'Normal' }
 		</StyledMenuItem>
 	);
 }
 
-function UnapplyClassMenuItem( { styleId, ...props }: { styleId: string } ) {
+function UnapplyClassMenuItem( { styleId, closeMenu, ...props }: { styleId: string; closeMenu: () => void } ) {
 	const unapplyClass = useUnapplyClass( styleId );
 
 	return (
-		<StyledMenuItem { ...props } onClick={ unapplyClass }>
+		<StyledMenuItem
+			{ ...props }
+			onClick={ () => {
+				unapplyClass();
+				closeMenu();
+			} }
+		>
 			{ __( 'Remove', 'elementor' ) }
 		</StyledMenuItem>
 	);

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

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { type ReactElement } from 'react';
 import { getElementSetting, updateElementSettings, useElementSetting } from '@elementor/editor-elements';
 import { classesPropTypeUtil, type ClassesPropValue } from '@elementor/editor-props';
 import { type StyleDefinitionID } from '@elementor/editor-styles';
@@ -10,6 +11,7 @@ import {
 	useCreateActionsByProvider,
 	useProviders,
 } from '@elementor/editor-styles-repository';
+import { MapPinIcon } from '@elementor/icons';
 import { createLocation } from '@elementor/locations';
 import { Chip, Stack, Typography } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
@@ -21,18 +23,20 @@ import { type Action, MultiCombobox, type Option } from '../multi-combobox';
 import { CssClassItem } from './css-class-item';
 
 const ID = 'elementor-css-class-selector';
-const TAGS_LIMIT = 8;
+const TAGS_LIMIT = 50;
 
 type StyleDefOption = Option & {
 	color: 'primary' | 'global';
+	icon: ReactElement | null;
 	provider: string;
 };
 
 const EMPTY_OPTION = {
 	label: __( 'local', 'elementor' ),
-	value: '',
+	value: null,
 	fixed: true,
 	color: 'primary',
+	icon: <MapPinIcon />,
 	provider: ELEMENTS_STYLES_PROVIDER_KEY,
 } satisfies StyleDefOption;
 
@@ -81,9 +85,11 @@ export function CssClassSelector() {
 					values.map( ( value, index ) => {
 						const chipProps = getTagProps( { index } );
 						const isActive = value.value === active?.value;
-						const isElementsProvider = value.provider === ELEMENTS_STYLES_PROVIDER_KEY;
 
 						const renameLabel = ( newLabel: string ) => {
+							if ( ! value.value ) {
+								throw new Error( `Cannot rename a class without style id` );
+							}
 							return updateClassByProvider( value.provider, { label: newLabel, id: value.value } );
 						};
 
@@ -95,10 +101,9 @@ export function CssClassSelector() {
 								id={ value.value }
 								isActive={ isActive }
 								color={ isActive && value.color ? value.color : 'default' }
+								icon={ value.icon }
 								chipProps={ chipProps }
-								// There is only a single local style, which might not exist, so setting it to
-								// `null` will either return the actual style or the fallback one.
-								onClickActive={ () => setActiveId( isElementsProvider ? null : value.value ) }
+								onClickActive={ () => setActiveId( value.value ) }
 								renameLabel={ renameLabel }
 							/>
 						);
@@ -141,6 +146,7 @@ function useOptions() {
 					value: styleDef.id,
 					fixed: isElements,
 					color: isElements ? 'primary' : 'global',
+					icon: isElements ? <MapPinIcon /> : null,
 					provider: provider.key,
 					group: provider.labels?.plural,
 				};
@@ -178,7 +184,7 @@ function useCreateActions( {
 }
 
 function useAppliedOptions( options: StyleDefOption[], appliedIds: StyleDefinitionID[] ) {
-	const applied = options.filter( ( option ) => appliedIds.includes( option.value ) );
+	const applied = options.filter( ( option ) => option.value && appliedIds.includes( option.value ) );
 
 	const hasElementsProviderStyleApplied = applied.some(
 		( option ) => option.provider === ELEMENTS_STYLES_PROVIDER_KEY

package/src/components/editing-panel-hooks.tsx

@@ -1,9 +1,7 @@
-import { useCloseEditorPanel } from '../hooks/use-close-editor-panel';
 import { useOpenEditorPanel } from '../hooks/use-open-editor-panel';
 
 export const EditingPanelHooks = () => {
 	useOpenEditorPanel();
-	useCloseEditorPanel();
 
 	return null;
 };

package/src/components/editing-panel.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { ControlActionsProvider, ControlReplacementProvider } from '@elementor/editor-controls';
 import { useSelectedElement } from '@elementor/editor-elements';
 import { Panel, PanelBody, PanelHeader, PanelHeaderTitle } from '@elementor/editor-panels';
-import { RocketIcon } from '@elementor/icons';
+import { AtomIcon } from '@elementor/icons';
 import { SessionStorageProvider } from '@elementor/session';
 import { ErrorBoundary } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
@@ -33,7 +33,7 @@ export const EditingPanel = () => {
 				<Panel>
 					<PanelHeader>
 						<PanelHeaderTitle>{ panelTitle }</PanelHeaderTitle>
-						<RocketIcon fontSize="small" sx={ { color: 'text.disabled' } } />
+						<AtomIcon fontSize="small" sx={ { color: 'text.tertiary' } } />
 					</PanelHeader>
 					<PanelBody>
 						<ControlActionsProvider items={ menuItems }>

package/src/components/multi-combobox.tsx

@@ -12,7 +12,7 @@ import {
 
 export type Option = {
 	label: string;
-	value: string;
+	value: string | null;
 	fixed?: boolean;
 	group?: string;
 	key?: string;
@@ -72,7 +72,7 @@ export function MultiCombobox< TOption extends Option >( {
 				if ( reason === 'createOption' ) {
 					const [ firstAction ] = filterActions( actions, { options, inputValue: inputValue ?? '' } );
 
-					if ( firstAction ) {
+					if ( firstAction.value ) {
 						return run( firstAction.apply, firstAction.value );
 					}
 				}
@@ -80,7 +80,7 @@ export function MultiCombobox< TOption extends Option >( {
 				// Handles the user's action selection when triggered.
 				const action = optionsAndActions.find( ( value ) => isAction( value ) );
 
-				if ( reason === 'selectOption' && action ) {
+				if ( reason === 'selectOption' && action?.value ) {
 					return run( action.apply, action.value );
 				}
 
@@ -95,7 +95,7 @@ export function MultiCombobox< TOption extends Option >( {
 					return option;
 				}
 
-				return option.key ?? option.value;
+				return option.key ?? option.value ?? option.label;
 			} }
 			filterOptions={ ( optionList, params ) => {
 				const selectedValues = selected.map( ( option ) => option.value );
@@ -109,6 +109,11 @@ export function MultiCombobox< TOption extends Option >( {
 				];
 			} }
 			groupBy={ ( option ) => option.group ?? '' }
+			renderOption={ ( optionProps, { label } ) => (
+				<li { ...optionProps } style={ { display: 'block', textOverflow: 'ellipsis' } }>
+					{ label }
+				</li>
+			) }
 		/>
 	);
 }

package/src/components/style-sections/border-section/border-radius-field.tsx

@@ -28,6 +28,7 @@ const getEndStartLabel = ( isSiteRtl: boolean ) =>
 	isSiteRtl ? __( 'Bottom right', 'elementor' ) : __( 'Bottom left', 'elementor' );
 const getEndEndLabel = ( isSiteRtl: boolean ) =>
 	isSiteRtl ? __( 'Bottom left', 'elementor' ) : __( 'Bottom right', 'elementor' );
+
 const getCorners = ( isSiteRtl: boolean ): EqualUnequalItems => [
 	{
 		label: getStartStartLabel( isSiteRtl ),
@@ -39,16 +40,16 @@ const getCorners = ( isSiteRtl: boolean ): EqualUnequalItems => [
 		icon: <RotatedIcon icon={ StartEndIcon } size="tiny" />,
 		bind: 'start-end',
 	},
-	{
-		label: getEndEndLabel( isSiteRtl ),
-		icon: <RotatedIcon icon={ EndEndIcon } size="tiny" />,
-		bind: 'end-end',
-	},
 	{
 		label: getEndStartLabel( isSiteRtl ),
 		icon: <RotatedIcon icon={ EndStartIcon } size="tiny" />,
 		bind: 'end-start',
 	},
+	{
+		label: getEndEndLabel( isSiteRtl ),
+		icon: <RotatedIcon icon={ EndEndIcon } size="tiny" />,
+		bind: 'end-end',
+	},
 ];
 
 export const BorderRadiusField = () => {

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

@@ -33,11 +33,11 @@ export const DimensionsField = () => {
 		<>
 			<Stack direction="row" gap={ 2 } flexWrap="nowrap">
 				<DimensionField side="inset-block-start" label={ __( 'Top', 'elementor' ) } />
-				<DimensionField side="inset-inline-start" label={ getInlineStartLabel( isSiteRtl ) } />
+				<DimensionField side="inset-inline-end" label={ getInlineEndLabel( isSiteRtl ) } />
 			</Stack>
 			<Stack direction="row" gap={ 2 } flexWrap="nowrap">
 				<DimensionField side="inset-block-end" label={ __( 'Bottom', 'elementor' ) } />
-				<DimensionField side="inset-inline-end" label={ getInlineEndLabel( isSiteRtl ) } />
+				<DimensionField side="inset-inline-start" label={ getInlineStartLabel( isSiteRtl ) } />
 			</Stack>
 		</>
 	);

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

@@ -12,10 +12,6 @@ export const SpacingSection = () => {
 
 	return (
 		<SectionContent>
-			<StylesField bind={ 'padding' }>
-				<LinkedDimensionsControl label={ __( 'Padding', 'elementor' ) } isSiteRtl={ isSiteRtl } />
-			</StylesField>
-			<PanelDivider />
 			<StylesField bind={ 'margin' }>
 				<LinkedDimensionsControl
 					label={ __( 'Margin', 'elementor' ) }
@@ -23,6 +19,10 @@ export const SpacingSection = () => {
 					extendedValues={ [ 'auto' ] }
 				/>
 			</StylesField>
+			<PanelDivider />
+			<StylesField bind={ 'padding' }>
+				<LinkedDimensionsControl label={ __( 'Padding', 'elementor' ) } isSiteRtl={ isSiteRtl } />
+			</StylesField>
 		</SectionContent>
 	);
 };

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

@@ -1,22 +1,15 @@
 import * as React from 'react';
-import { useMemo } 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';
-
-const supportedCategories: Record< string, string > = {
-	system: __( 'System', 'elementor' ),
-	custom: __( 'Custom Fonts', 'elementor' ),
-	googlefonts: __( 'Google Fonts', 'elementor' ),
-};
+import { useFontFamilies } from './hooks/use-font-families';
 
 export const FontFamilyField = () => {
 	const fontFamilies = useFontFamilies();
 
-	if ( Object.keys( fontFamilies ).length === 0 ) {
+	if ( fontFamilies.length === 0 ) {
 		return null;
 	}
 
@@ -33,40 +26,3 @@ export const FontFamilyField = () => {
 		</StylesField>
 	);
 };
-
-const getFontFamilies = () => {
-	const { controls } = getElementorConfig();
-
-	const options = controls?.font?.options;
-
-	if ( ! options ) {
-		return null;
-	}
-
-	return options;
-};
-
-const useFontFamilies = () => {
-	const fontFamilies = getFontFamilies();
-
-	return useMemo(
-		() =>
-			Object.entries( fontFamilies || {} ).reduce< Record< string, string[] > >( ( acc, [ font, category ] ) => {
-				const categoryLabel = supportedCategories[ category as keyof typeof supportedCategories ];
-				const existingCategory = acc[ categoryLabel ];
-
-				if ( ! categoryLabel ) {
-					return acc;
-				}
-
-				if ( ! existingCategory ) {
-					acc[ categoryLabel ] = [];
-				}
-
-				acc[ categoryLabel ].push( font );
-
-				return acc;
-			}, {} ),
-		[ fontFamilies ]
-	);
-};

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

@@ -26,7 +26,7 @@ export const FontStyleField = () => (
 	<StylesField bind="font-style">
 		<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap">
 			<Grid item xs={ 6 }>
-				<ControlLabel>{ __( 'Font Style', 'elementor' ) }</ControlLabel>
+				<ControlLabel>{ __( 'Font style', 'elementor' ) }</ControlLabel>
 			</Grid>
 			<Grid item xs={ 6 } display="flex" justifyContent="end">
 				<ToggleControl options={ options } />

package/src/components/style-sections/typography-section/hooks/use-font-families.ts

@@ -0,0 +1,52 @@
+import { useMemo } from 'react';
+import { type FontCategory } from '@elementor/editor-controls';
+import { __ } from '@wordpress/i18n';
+
+import { getElementorConfig } from '../../../../sync/get-elementor-config';
+
+const supportedCategories: Record< string, string > = {
+	system: __( 'System', 'elementor' ),
+	custom: __( 'Custom Fonts', 'elementor' ),
+	googlefonts: __( 'Google Fonts', 'elementor' ),
+};
+
+const getFontFamilies = () => {
+	const { controls } = getElementorConfig();
+
+	const options = controls?.font?.options;
+
+	if ( ! options ) {
+		return null;
+	}
+
+	return options;
+};
+
+export const useFontFamilies = () => {
+	const fontFamilies = getFontFamilies();
+
+	return useMemo( () => {
+		const categoriesOrder = [ 'system', 'custom', 'googlefonts' ];
+
+		return Object.entries( fontFamilies || {} )
+			.reduce< FontCategory[] >( ( acc, [ font, category ] ) => {
+				if ( ! supportedCategories[ category ] ) {
+					return acc;
+				}
+
+				const categoryIndex = categoriesOrder.indexOf( category );
+
+				if ( ! acc[ categoryIndex ] ) {
+					acc[ categoryIndex ] = {
+						label: supportedCategories[ category ],
+						fonts: [],
+					};
+				}
+
+				acc[ categoryIndex ].fonts.push( font );
+
+				return acc;
+			}, [] )
+			.filter( Boolean );
+	}, [ fontFamilies ] );
+};