@elementor/editor-editing-panel 1.10.0 → 1.11.0

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

@@ -1,33 +1,41 @@
 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 { Grid, withDirection } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
 import { StylesField } from '../../../controls-registry/styles-field';
+import { RotatedIcon } from '../layout-section/utils/rotated-icon';
 
-type Alignments = 'left' | 'center' | 'right' | 'justify';
+type Alignments = 'start' | 'center' | 'end' | 'justify';
+
+const StartIcon = withDirection( AlignLeftIcon );
+const EndIcon = withDirection( AlignRightIcon );
 
 const options: ToggleButtonGroupItem< Alignments >[] = [
 	{
-		value: 'left',
-		label: __( 'Left', 'elementor' ),
-		renderContent: ( { size } ) => <AlignLeftIcon fontSize={ size } />,
+		value: 'start',
+		label: __( 'Start', 'elementor' ),
+		renderContent: () => <RotatedIcon icon={ StartIcon } size="tiny" />,
+		showTooltip: true,
 	},
 	{
 		value: 'center',
 		label: __( 'Center', 'elementor' ),
 		renderContent: ( { size } ) => <AlignCenterIcon fontSize={ size } />,
+		showTooltip: true,
 	},
 	{
-		value: 'right',
-		label: __( 'Right', 'elementor' ),
-		renderContent: ( { size } ) => <AlignRightIcon fontSize={ size } />,
+		value: 'end',
+		label: __( 'End', 'elementor' ),
+		renderContent: () => <RotatedIcon icon={ EndIcon } size="tiny" />,
+		showTooltip: true,
 	},
 	{
 		value: 'justify',
 		label: __( 'Justify', 'elementor' ),
 		renderContent: ( { size } ) => <AlignJustifiedIcon fontSize={ size } />,
+		showTooltip: true,
 	},
 ];
 

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

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

package/src/components/style-tab.tsx

@@ -11,7 +11,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 { CssClassSelector } from './css-class-selector';
+import { CssClassSelector } from './css-classes/css-class-selector';
 import { Section } from './section';
 import { SectionsList } from './sections-list';
 import { BackgroundSection } from './style-sections/background-section/background-section';

package/src/controls-registry/controls-registry.tsx

@@ -4,6 +4,7 @@ import {
 	LinkControl,
 	SelectControl,
 	SizeControl,
+	SvgMediaControl,
 	TextAreaControl,
 	TextControl,
 	UrlControl,
@@ -15,7 +16,8 @@ type ControlRegistry = Record< string, { component: ControlComponent; layout: Co
 
 const controlTypes = {
 	image: { component: ImageControl, layout: 'full' },
-	text: { component: TextControl, layout: 'two-columns' },
+	'svg-media': { component: SvgMediaControl, layout: 'full' },
+	text: { component: TextControl, layout: 'full' },
 	textarea: { component: TextAreaControl, layout: 'full' },
 	size: { component: SizeControl, layout: 'two-columns' },
 	select: { component: SelectControl, layout: 'two-columns' },

package/src/controls-registry/settings-field.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { PropKeyProvider, PropProvider } from '@elementor/editor-controls';
 import { updateElementSettings, useElementSetting } from '@elementor/editor-elements';
-import { type PropKey, type PropValue } from '@elementor/editor-props';
+import { type LinkPropValue, type PropKey, type PropValue } from '@elementor/editor-props';
 
 import { useElement } from '../contexts/element-context';
 import { createTopLevelOjectType } from './create-top-level-object-type';
@@ -15,10 +15,17 @@ export const SettingsField = ( { bind, children }: Props ) => {
 	const { element, elementType } = useElement();
 
 	const settingsValue = useElementSetting< PropValue >( element.id, bind );
+
+	const linkValue = useElementSetting< PropValue >( element.id, 'link' ) as LinkPropValue;
+
 	const value = { [ bind ]: settingsValue };
 
 	const propType = createTopLevelOjectType( { schema: elementType.propsSchema } );
 
+	if ( bind === 'tag' && linkValue?.value && 'div-block' === elementType.key ) {
+		return null;
+	}
+
 	const setValue = ( newValue: Record< string, PropValue > ) => {
 		updateElementSettings( {
 			id: element.id,

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

@@ -30,7 +30,7 @@ type OptionEntry = [ string, Option[] ];
 
 const SIZE = 'tiny';
 
-export type DynamicSelectionProps = {
+type DynamicSelectionProps = {
 	onSelect?: () => void;
 };
 

package/src/dynamics/dynamic-control.tsx

@@ -6,7 +6,7 @@ import { createTopLevelOjectType } from '../controls-registry/create-top-level-o
 import { useDynamicTag } from './hooks/use-dynamic-tag';
 import { dynamicPropTypeUtil, type DynamicPropValue } from './utils';
 
-export type DynamicControlProps = React.PropsWithChildren< {
+type DynamicControlProps = React.PropsWithChildren< {
 	bind: PropKey;
 } >;
 

package/src/dynamics/types.ts

@@ -1,5 +1,5 @@
-import { type ControlItem, type PropsSchema } from '@elementor/editor-elements';
-import { type TransformablePropType, type TransformablePropValue } from '@elementor/editor-props';
+import { type ControlItem } from '@elementor/editor-elements';
+import { type PropsSchema, type TransformablePropType, type TransformablePropValue } from '@elementor/editor-props';
 
 export type ExtendedWindow = Window & {
 	elementor?: {

package/src/dynamics/utils.ts

@@ -9,9 +9,9 @@ import { z } from '@elementor/schema';
 
 import { type DynamicPropType } from './types';
 
-export const DYNAMIC_PROP_TYPE_KEY = 'dynamic';
+const DYNAMIC_PROP_TYPE_KEY = 'dynamic';
 
-export const isDynamicPropType = ( prop: TransformablePropType ): prop is DynamicPropType =>
+const isDynamicPropType = ( prop: TransformablePropType ): prop is DynamicPropType =>
 	prop.key === DYNAMIC_PROP_TYPE_KEY;
 
 export const getDynamicPropType = ( propType: PropType ): DynamicPropType | null => {

package/src/hooks/use-persist-dynamic-value.ts

@@ -1,8 +1,8 @@
 import { type PropValue } from '@elementor/editor-props';
+import { useSessionStorage } from '@elementor/session';
 
 import { useElement } from '../contexts/element-context';
 import { type DynamicPropValue } from '../dynamics/types';
-import { useSessionStorage } from './use-session-storage';
 
 export const usePersistDynamicValue = < T extends DynamicPropValue | PropValue >( propKey: string ) => {
 	const { element } = useElement();

package/src/hooks/use-styles-fields.ts

@@ -1,8 +1,16 @@
-import { useEffect, useReducer } from 'react';
-import { createElementStyle, type ElementID } from '@elementor/editor-elements';
+import { useEffect, useMemo, useReducer } from 'react';
+import {
+	createElementStyle,
+	type CreateElementStyleArgs,
+	deleteElementStyle,
+	type ElementID,
+	getElementLabel,
+} from '@elementor/editor-elements';
 import type { Props } from '@elementor/editor-props';
 import { getVariantByMeta, type StyleDefinition, type StyleDefinitionVariant } from '@elementor/editor-styles';
 import { type StylesProvider } from '@elementor/editor-styles-repository';
+import { LOCAL_STYLES_RESERVED_LABEL } from '@elementor/editor-styles-repository';
+import { undoable } from '@elementor/editor-v1-adapters';
 import { __ } from '@wordpress/i18n';
 
 import { useClassesProp } from '../contexts/classes-prop-context';
@@ -15,6 +23,9 @@ export function useStylesFields< T extends Props >( propNames: ( keyof T & strin
 	const { id, meta, provider } = useStyle();
 	const classesProp = useClassesProp();
 
+	const undoableUpdateStyle = useUndoableUpdateStyle();
+	const undoableCreateElementStyle = useUndoableCreateElementStyle();
+
 	const [ , reRender ] = useReducer( ( p ) => ! p, false );
 
 	useEffect( () => provider?.subscribe( reRender ), [ provider ] );
@@ -29,22 +40,23 @@ export function useStylesFields< T extends Props >( propNames: ( keyof T & strin
 
 	const setValue = ( props: T ) => {
 		if ( id === null ) {
-			createElementStyle( {
+			undoableCreateElementStyle( {
 				elementId: element.id,
 				classesProp,
 				meta,
 				props,
-				label: __( 'local', 'elementor' ),
 			} );
 
 			return;
 		}
 
-		if ( ! provider.actions.updateProps ) {
-			throw new StylesProviderCannotUpdatePropsError( { context: { providerKey: provider.key } } );
-		}
-
-		provider.actions.updateProps( { id, meta, props }, { elementId: element.id } );
+		undoableUpdateStyle( {
+			elementId: element.id,
+			styleId: id,
+			provider,
+			meta,
+			props,
+		} );
 	};
 
 	return [ value, setValue ] as const;
@@ -79,3 +91,95 @@ function getProps< T extends Props >( { styleId, elementId, provider, meta, prop
 		propNames.map( ( key ) => [ key, variant?.props[ key ] ?? null ] )
 	) as NullableValues< T >;
 }
+
+type UndoableCreateElementStyleArgs = Omit< CreateElementStyleArgs, 'label' >;
+
+function useUndoableCreateElementStyle() {
+	return useMemo( () => {
+		return undoable(
+			{
+				do: ( payload: UndoableCreateElementStyleArgs ) => {
+					return createElementStyle( {
+						...payload,
+						label: LOCAL_STYLES_RESERVED_LABEL,
+					} );
+				},
+
+				undo: ( { elementId }, styleId ) => {
+					deleteElementStyle( elementId, styleId );
+				},
+
+				redo: ( payload, styleId ) => {
+					return createElementStyle( {
+						...payload,
+						styleId,
+						label: LOCAL_STYLES_RESERVED_LABEL,
+					} );
+				},
+			},
+			{
+				title: ( { elementId } ) => getElementLabel( elementId ),
+				subtitle: __( 'Style edited', 'elementor' ),
+			}
+		);
+	}, [] );
+}
+
+type UndoableUpdateStyleArgs = {
+	elementId: ElementID;
+	styleId: StyleDefinition[ 'id' ];
+	provider: StylesProvider;
+	meta: StyleDefinitionVariant[ 'meta' ];
+	props: Props;
+};
+
+function useUndoableUpdateStyle() {
+	return useMemo( () => {
+		return undoable(
+			{
+				do: ( { elementId, styleId, provider, meta, props }: UndoableUpdateStyleArgs ) => {
+					if ( ! provider.actions.updateProps ) {
+						throw new StylesProviderCannotUpdatePropsError( {
+							context: { providerKey: provider.key },
+						} );
+					}
+
+					const style = provider.actions.getById( styleId, { elementId } );
+
+					const prevProps = getCurrentProps( style, meta );
+
+					provider.actions.updateProps(
+						{
+							id: styleId,
+							meta,
+							props,
+						},
+						{ elementId }
+					);
+
+					return prevProps;
+				},
+
+				undo: ( { elementId, styleId, meta, provider }, prevProps ) => {
+					provider.actions.updateProps?.( { id: styleId, meta, props: prevProps }, { elementId } );
+				},
+			},
+			{
+				title: ( { elementId } ) => getElementLabel( elementId ),
+				subtitle: __( 'Style edited', 'elementor' ),
+			}
+		);
+	}, [] );
+}
+
+function getCurrentProps( style: StyleDefinition | null, meta: StyleDefinitionVariant[ 'meta' ] ) {
+	if ( ! style ) {
+		return {};
+	}
+
+	const variant = getVariantByMeta( style, meta );
+
+	const props = variant?.props ?? {};
+
+	return structuredClone( props );
+}

package/src/index.ts

@@ -1,7 +1,7 @@
 export { useBoundProp } from '@elementor/editor-controls';
 export type { PopoverActionProps } from './popover-action';
 export { replaceControl } from './control-replacement';
-export { injectIntoClassSelectorActions } from './components/css-class-selector';
+export { injectIntoClassSelectorActions } from './components/css-classes/css-class-selector';
 export { usePanelActions, usePanelStatus } from './panel';
 
 import init from './init';

package/src/init.ts

@@ -1,6 +1,6 @@
 import { injectIntoLogic } from '@elementor/editor';
 import { __registerPanel as registerPanel } from '@elementor/editor-panels';
-import { __privateBlockDataCommand as blockDataCommand } from '@elementor/editor-v1-adapters';
+import { blockCommand } from '@elementor/editor-v1-adapters';
 
 import { EditingPanelHooks } from './components/editing-panel-hooks';
 import { init as initDynamics } from './dynamics/init';
@@ -21,7 +21,7 @@ export default function init() {
 }
 
 const blockV1Panel = () => {
-	blockDataCommand( {
+	blockCommand( {
 		command: 'panel/editor/open',
 		condition: isAtomicWidgetSelected,
 	} );

package/src/sync/types.ts

@@ -1,8 +1,9 @@
-import { type ControlItem, type PropsSchema, type V1Element } from '@elementor/editor-elements';
+import { type ControlItem, type V1Element } from '@elementor/editor-elements';
+import { type PropsSchema } from '@elementor/editor-props';
 
-export type SupportedFonts = 'system' | 'googlefonts' | 'customfonts';
+type SupportedFonts = 'system' | 'googlefonts' | 'customfonts';
 
-export type EnqueueFont = ( fontFamily: string, context?: 'preview' | 'editor' ) => void;
+type EnqueueFont = ( fontFamily: string, context?: 'preview' | 'editor' ) => void;
 
 export type ExtendedWindow = Window & {
 	elementor?: {

package/src/components/collapsible-field.tsx

@@ -1,36 +0,0 @@
-import * as React from 'react';
-import { useState } from 'react';
-import { MinusIcon, PlusIcon } from '@elementor/icons';
-import { Collapse, IconButton, Stack } from '@elementor/ui';
-import { __ } from '@wordpress/i18n';
-
-type CollapsibleFieldProps = React.PropsWithChildren< {
-	label: React.ReactNode;
-	defaultOpen?: boolean;
-} >;
-
-export const CollapsibleField = ( { label, children, defaultOpen = false }: CollapsibleFieldProps ) => {
-	const [ open, setOpen ] = useState( defaultOpen );
-
-	const handleToggle = () => {
-		setOpen( ( prevOpen ) => ! prevOpen );
-	};
-
-	return (
-		<Stack gap={ 1.5 }>
-			<Stack direction="row" justifyContent="space-between" alignItems="center" sx={ { py: 0.5 } }>
-				{ label }
-				<IconButton
-					onClick={ handleToggle }
-					size="tiny"
-					aria-label={ open ? __( 'Close', 'elementor' ) : __( 'Expand', 'elementor' ) }
-				>
-					{ open ? <MinusIcon fontSize="tiny" /> : <PlusIcon fontSize="tiny" /> }
-				</IconButton>
-			</Stack>
-			<Collapse in={ open } unmountOnExit>
-				{ children }
-			</Collapse>
-		</Stack>
-	);
-};

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

@@ -1,101 +0,0 @@
-import * as React from 'react';
-import { type StyleDefinitionState } from '@elementor/editor-styles';
-import { CheckIcon } from '@elementor/icons';
-import {
-	bindMenu,
-	Divider,
-	ListItemIcon,
-	ListItemText,
-	ListSubheader,
-	Menu,
-	MenuItem,
-	type PopupState,
-	styled,
-} from '@elementor/ui';
-import { __ } from '@wordpress/i18n';
-
-import { useStyle } from '../contexts/style-context';
-import { useUnapplyClass } from '../hooks/use-unapply-class';
-
-const STATES: NonNullable< StyleDefinitionState >[] = [ 'hover', 'focus', 'active' ];
-
-type CssClassMenuProps = { styleId: string; isFixed: boolean; popupState: PopupState };
-
-export function CssClassMenu( { styleId, isFixed = false, popupState }: CssClassMenuProps ) {
-	const handleKeyDown = ( e: React.KeyboardEvent< HTMLElement > ) => {
-		e.stopPropagation();
-	};
-
-	return (
-		<Menu
-			MenuListProps={ { dense: true } }
-			{ ...bindMenu( popupState ) }
-			anchorOrigin={ {
-				vertical: 'top',
-				horizontal: 'right',
-			} }
-			onKeyDown={ handleKeyDown }
-		>
-			{ /* It has to be an array since MUI menu doesn't accept a Fragment as a child, and wrapping the items with an HTML element disrupts keyboard navigation */ }
-			{ ! isFixed && [
-				<UnapplyClassMenuItem key="unapply-class" styleId={ styleId } />,
-				<Divider key="global-class-items-divider" />,
-			] }
-			<ListSubheader>{ __( 'Add a pseudo selector', 'elementor' ) }</ListSubheader>
-			<StateMenuItem key="normal" state={ null } styleId={ styleId } />
-			{ STATES.map( ( state ) => {
-				return <StateMenuItem key={ state } state={ state } styleId={ styleId } />;
-			} ) }
-		</Menu>
-	);
-}
-
-type StateMenuItemProps = {
-	state: StyleDefinitionState;
-	styleId: string;
-};
-
-function StateMenuItem( { state, styleId, ...props }: StateMenuItemProps ) {
-	const { id: activeId, setId: setActiveId, setMetaState: setActiveMetaState, meta } = useStyle();
-	const { state: activeState } = meta;
-
-	const isActive = styleId === activeId;
-	const isSelected = state === activeState && isActive;
-
-	return (
-		<StyledMenuItem
-			{ ...props }
-			selected={ isSelected }
-			onClick={ () => {
-				if ( ! isActive ) {
-					setActiveId( styleId );
-				}
-
-				setActiveMetaState( state );
-			} }
-		>
-			{ isSelected && (
-				<ListItemIcon>
-					<CheckIcon />
-				</ListItemIcon>
-			) }
-			<ListItemText primary={ state ? `:${ state }` : 'Normal' } />
-		</StyledMenuItem>
-	);
-}
-
-function UnapplyClassMenuItem( { styleId, ...props }: { styleId: string } ) {
-	const unapplyClass = useUnapplyClass( styleId );
-
-	return (
-		<StyledMenuItem { ...props } onClick={ unapplyClass }>
-			<ListItemText primary="Remove" />
-		</StyledMenuItem>
-	);
-}
-
-const StyledMenuItem = styled( MenuItem )( {
-	'&:hover': {
-		color: 'text.primary', // Overriding global CSS from the editor.
-	},
-} );