@elementor/editor-editing-panel 0.19.0 → 1.1.0

package/src/hooks/use-prop-value-history.ts

@@ -0,0 +1,45 @@
+import { useCallback, useMemo } from 'react';
+import { getSessionStorageItem, setSessionStorageItem } from '@elementor/utils';
+
+import { useElement } from '../contexts/element-context';
+
+export const PROPS_VALUES_HISTORY_PREFIX = 'elementor/editor-editing-panel/prop-value-history';
+
+export const usePropValueHistory = () => {
+	const { element } = useElement();
+	const elementKey = `${ PROPS_VALUES_HISTORY_PREFIX }/${ element.id }`;
+
+	const getElementPropsHistory = useCallback( () => {
+		return getSessionStorageItem< Record< string, unknown > >( elementKey );
+	}, [ elementKey ] );
+
+	const getPropValue = useCallback(
+		< T >( propKey: string ) => {
+			const elementPropValues = getElementPropsHistory();
+			return ( elementPropValues?.[ propKey ] ?? null ) as T | null;
+		},
+		[ getElementPropsHistory ]
+	);
+
+	const setPropValue = useCallback(
+		( propKey: string, propValue: unknown ) => {
+			const elementPropValues = getElementPropsHistory();
+			const updatedElementPropValues = { ...elementPropValues, [ propKey ]: propValue };
+			setSessionStorageItem( elementKey, updatedElementPropValues );
+		},
+		[ getElementPropsHistory, elementKey ]
+	);
+
+	const removeProp = useCallback(
+		( propKey: string ) => {
+			const elementPropValues = getElementPropsHistory();
+			const updatedElementPropValues = Object.fromEntries(
+				Object.entries( elementPropValues || {} ).filter( ( [ key ] ) => key !== propKey )
+			);
+			setSessionStorageItem( elementKey, updatedElementPropValues );
+		},
+		[ getElementPropsHistory, elementKey ]
+	);
+
+	return useMemo( () => ( { getPropValue, setPropValue, removeProp } ), [ getPropValue, removeProp, setPropValue ] );
+};

package/src/hooks/use-style-prop-history.ts

@@ -0,0 +1,75 @@
+import { useCallback, useMemo } from 'react';
+import { getElementStyles, getVariantByMeta, updateStyle } from '@elementor/editor-elements';
+import { type PropKey } from '@elementor/editor-props';
+
+import { useElement } from '../contexts/element-context';
+import { useStyle } from '../contexts/style-context';
+import { usePropValueHistory } from './use-prop-value-history';
+
+export const useStylePropsHistory = ( props: PropKey[] ) => {
+	const { element } = useElement();
+	const { id: styleDefID, meta } = useStyle();
+	const { getPropValue, setPropValue, removeProp } = usePropValueHistory();
+
+	const styleDef = getElementStyles( element.id )?.[ styleDefID ];
+	const styleVariant = styleDef ? getVariantByMeta( styleDef, meta ) : null;
+	const styleVariantPath = `${ styleDefID }-${ styleVariant?.meta.breakpoint }-${ styleVariant?.meta.state }`;
+
+	const saveStylePropsHistory = useCallback( () => {
+		props.forEach( ( propKey ) => {
+			const propValue = styleVariant?.props[ propKey ];
+
+			if ( propValue ) {
+				const propPath = `${ styleVariantPath }-${ propKey }`;
+				setPropValue( propPath, propValue );
+			}
+		} );
+	}, [ props, setPropValue, styleVariant?.props, styleVariantPath ] );
+
+	const updateStylePropsFromHistory = useCallback( () => {
+		const propValuesFromHistory = props.reduce( ( allProps, currentPropKey ) => {
+			const propPath = `${ styleVariantPath }-${ currentPropKey }`;
+			const propHistory = getPropValue( propPath );
+
+			if ( propHistory ) {
+				removeProp( propPath );
+				return { ...allProps, [ currentPropKey ]: propHistory };
+			}
+
+			return allProps;
+		}, {} );
+
+		if ( Object.keys( propValuesFromHistory ).length ) {
+			updateStyle( {
+				elementID: element.id,
+				styleDefID,
+				meta,
+				props: propValuesFromHistory,
+				bind: 'classes',
+			} );
+		}
+	}, [ element.id, getPropValue, meta, props, removeProp, styleDefID, styleVariantPath ] );
+
+	const clearCurrentStyleProps = useCallback( () => {
+		const resetValues = props.reduce(
+			( allProps, currentPropKey ) => ( {
+				...allProps,
+				[ currentPropKey ]: undefined,
+			} ),
+			{}
+		);
+
+		updateStyle( {
+			elementID: element.id,
+			styleDefID,
+			meta,
+			props: resetValues,
+			bind: 'classes',
+		} );
+	}, [ element.id, meta, props, styleDefID ] );
+
+	return useMemo(
+		() => ( { saveStylePropsHistory, updateStylePropsFromHistory, clearCurrentStyleProps } ),
+		[ saveStylePropsHistory, updateStylePropsFromHistory, clearCurrentStyleProps ]
+	);
+};

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

@@ -0,0 +1,51 @@
+import { useEffect, useRef } from 'react';
+import { updateStyle, useElementStyleProp } from '@elementor/editor-elements';
+import type { PropKey, PropValue } from '@elementor/editor-props';
+
+import { useClassesProp } from '../contexts/classes-prop-context';
+import { useElement } from '../contexts/element-context';
+import { useStyle } from '../contexts/style-context';
+
+export const useStylesField = < T extends PropValue >(
+	propName: PropKey
+): [
+	T | null,
+	( newValue: T ) => void,
+	( callback: ( newValue: T | null, previousValue: T | null ) => void ) => void,
+] => {
+	const { element } = useElement();
+	const { id, meta } = useStyle();
+	const classesProp = useClassesProp();
+	const previousValue = useRef< T | null >( null );
+	const onChangeCallbacks = useRef< Set< ( newValue: T | null, previousValue: T | null ) => void > >( new Set() );
+
+	const value = useElementStyleProp< T >( {
+		elementID: element.id,
+		styleDefID: id,
+		meta,
+		propName,
+	} );
+
+	const setValue = ( newValue: T ) => {
+		updateStyle( {
+			elementID: element.id,
+			styleDefID: id,
+			props: { [ propName ]: newValue },
+			meta,
+			bind: classesProp,
+		} );
+	};
+
+	const registerChangeListener = ( callback: ( newValue: T | null, previousValue: T | null ) => void ) => {
+		onChangeCallbacks.current.add( callback );
+	};
+
+	useEffect( () => {
+		onChangeCallbacks.current.forEach( ( cb ) => {
+			cb( value, previousValue.current );
+		} );
+		previousValue.current = value;
+	}, [ value ] );
+
+	return [ value, setValue, registerChangeListener ];
+};

package/src/index.ts

@@ -1,7 +1,6 @@
-export type { PopoverActionProps } from './controls/control-actions/actions/popover-action';
+export { useBoundProp } from '@elementor/editor-controls';
+export type { PopoverActionProps } from './popover-action';
 export { replaceControl } from './control-replacement';
-export { useControl } from './controls/control-context';
-export { controlActionsMenu } from './controls/control-actions/control-actions-menu';
 
 import init from './init';
 

package/src/init.ts

@@ -1,10 +1,11 @@
-import { panel } from './panel';
 import { injectIntoLogic } from '@elementor/editor';
-import { shouldUseV2Panel } from './sync/should-use-v2-panel';
-import { EditingPanelHooks } from './components/editing-panel-hooks';
 import { __registerPanel as registerPanel } from '@elementor/editor-panels';
 import { __privateBlockDataCommand as blockDataCommand } from '@elementor/editor-v1-adapters';
+
+import { EditingPanelHooks } from './components/editing-panel-hooks';
 import { init as initDynamics } from './dynamics/init';
+import { panel } from './panel';
+import { isAtomicWidgetSelected } from './sync/is-atomic-widget-selected';
 
 export default function init() {
 	registerPanel( panel );
@@ -22,6 +23,6 @@ export default function init() {
 const blockV1Panel = () => {
 	blockDataCommand( {
 		command: 'panel/editor/open',
-		condition: shouldUseV2Panel,
+		condition: isAtomicWidgetSelected,
 	} );
 };

package/src/panel.ts

@@ -1,4 +1,5 @@
 import { __createPanel as createPanel } from '@elementor/editor-panels';
+
 import { EditingPanel } from './components/editing-panel';
 
 export const { panel, usePanelActions, usePanelStatus } = createPanel( {

package/src/{controls/control-actions/actions/popover-action.tsx → popover-action.tsx}

@@ -1,7 +1,7 @@
 import * as React from 'react';
-import { bindPopover, bindToggle, IconButton, Popover, Stack, Tooltip, Typography, usePopupState } from '@elementor/ui';
-import { ComponentType, ElementType as ReactElementType, useId } from 'react';
+import { type ComponentType, type ElementType as ReactElementType, useId } from 'react';
 import { XIcon } from '@elementor/icons';
+import { bindPopover, bindToggle, IconButton, Popover, Stack, Tooltip, Typography, usePopupState } from '@elementor/ui';
 
 const SIZE = 'tiny';
 

package/src/sync/enqueue-font.ts

@@ -0,0 +1,7 @@
+import { type EnqueueFont, type ExtendedWindow } from './types';
+
+export const enqueueFont: EnqueueFont = ( fontFamily, context = 'editor' ) => {
+	const extendedWindow = window as unknown as ExtendedWindow;
+
+	return extendedWindow.elementor?.helpers?.enqueueFont( fontFamily, context ) ?? null;
+};

package/src/sync/get-elementor-config.ts

@@ -0,0 +1,7 @@
+import { type ExtendedWindow } from './types';
+
+export const getElementorConfig = () => {
+	const extendedWindow = window as unknown as ExtendedWindow;
+
+	return extendedWindow.elementor?.config ?? {};
+};

package/src/sync/{should-use-v2-panel.ts → is-atomic-widget-selected.ts}

@@ -1,7 +1,6 @@
-import getSelectedElements from './get-selected-elements';
-import getWidgetsCache from './get-widgets-cache';
+import { getSelectedElements, getWidgetsCache } from '@elementor/editor-elements';
 
-export const shouldUseV2Panel = () => {
+export const isAtomicWidgetSelected = () => {
 	const selectedElements = getSelectedElements();
 	const widgetCache = getWidgetsCache();
 

package/src/sync/types.ts

@@ -1,6 +1,8 @@
-import { StyleDefinition, StyleDefinitionID } from '@elementor/editor-style';
-import { ControlItem, PropsSchema } from '../controls/types';
-import { PropValue } from '../controls/props/types';
+import { type ControlItem, type PropsSchema, type V1Element } from '@elementor/editor-elements';
+
+export type SupportedFonts = 'system' | 'googlefonts' | 'customfonts';
+
+export type EnqueueFont = ( fontFamily: string, context?: 'preview' | 'editor' ) => void;
 
 export type ExtendedWindow = Window & {
 	elementor?: {
@@ -17,23 +19,20 @@ export type ExtendedWindow = Window & {
 			}
 		>;
 		getContainer?: ( id: string ) => V1Element;
+		helpers?: {
+			enqueueFont: EnqueueFont;
+		};
+		config?: {
+			controls?: {
+				font?: {
+					options?: Record< string, SupportedFonts >;
+				};
+			};
+		};
+	};
+	elementorFrontend?: {
+		config?: {
+			is_rtl?: boolean;
+		};
 	};
-};
-
-export type V1Element = {
-	model: V1Model< V1ElementModelProps >;
-	settings?: V1Model< V1ElementSettingsProps >;
-};
-
-export type V1ElementModelProps = {
-	widgetType?: string;
-	elType: string;
-	id: string;
-	styles?: Record< StyleDefinitionID, StyleDefinition >;
-};
-
-export type V1ElementSettingsProps = Record< string, PropValue >;
-
-type V1Model< T > = {
-	get: < K extends keyof T >( key: K ) => T[ K ];
 };

package/src/components/accordion-section.tsx

@@ -1,25 +0,0 @@
-import * as React from 'react';
-import { useId } from 'react';
-import { Accordion, AccordionSummary, AccordionDetails, AccordionSummaryText, Stack } from '@elementor/ui';
-
-export type AccordionSectionProps = React.PropsWithChildren< {
-	title: React.ReactNode;
-} >;
-
-export const AccordionSection = ( { title, children }: AccordionSectionProps ) => {
-	const uid = useId();
-	const labelId = `label-${ uid }`;
-	const contentId = `content-${ uid }`;
-
-	// TODO: Change to collapsible list item
-	return (
-		<Accordion disableGutters defaultExpanded>
-			<AccordionSummary aria-controls={ contentId } id={ labelId }>
-				<AccordionSummaryText primaryTypographyProps={ { variant: 'caption' } }>{ title }</AccordionSummaryText>
-			</AccordionSummary>
-			<AccordionDetails id={ contentId } aria-labelledby={ labelId }>
-				<Stack gap={ 2.5 }>{ children }</Stack>
-			</AccordionDetails>
-		</Accordion>
-	);
-};

package/src/components/control-label.tsx

@@ -1,10 +0,0 @@
-import * as React from 'react';
-import { Typography } from '@elementor/ui';
-
-export const ControlLabel = ( { children }: { children: React.ReactNode } ) => {
-	return (
-		<Typography component="label" variant="caption" color="text.secondary">
-			{ children }
-		</Typography>
-	);
-};

package/src/components/style-sections/background-section/background-color-control.tsx

@@ -1,20 +0,0 @@
-import * as React from 'react';
-import { __ } from '@wordpress/i18n';
-import { StyleControl } from '../../../controls/style-control';
-import { Grid } from '@elementor/ui';
-import { ColorControl } from '../../../controls/control-types/color-control';
-
-export const BackgroundColorControl = () => {
-	return (
-		<StyleControl bind="background-color">
-			<Grid container spacing={ 1 } alignItems="center">
-				<Grid item xs={ 6 }>
-					<StyleControl.Label>{ __( 'Color', 'elementor' ) }</StyleControl.Label>
-				</Grid>
-				<Grid item xs={ 6 }>
-					<ColorControl />
-				</Grid>
-			</Grid>
-		</StyleControl>
-	);
-};

package/src/components/style-sections/effects-section/box-shadow-repeater.tsx

@@ -1,224 +0,0 @@
-import * as React from 'react';
-import { __ } from '@wordpress/i18n';
-import { Grid, Stack, UnstableColorIndicator } from '@elementor/ui';
-import { Repeater } from '../../../controls/components/repeater';
-import { ControlContext, useControl } from '../../../controls/control-context';
-import { PropValue, TransformablePropValue } from '../../../controls/props/types';
-import { SizeControl, SizeControlValue } from '../../../controls/control-types/size-control';
-import { ColorControl, ColorPropValue } from '../../../controls/control-types/color-control';
-import { ControlLabel } from '../../control-label';
-import { SelectControl } from '../../../controls/control-types/select-control';
-
-type SetContextValue = ( v: PropValue ) => void;
-
-export type BoxShadow = TransformablePropValue< 'box-shadow', Shadow[] >;
-
-export type Shadow = TransformablePropValue<
-	'shadow',
-	{
-		position: string;
-		hOffset: SizeControlValue;
-		vOffset: SizeControlValue;
-		blur: SizeControlValue;
-		spread: SizeControlValue;
-		color: ColorPropValue;
-	}
->;
-
-export const BoxShadowRepeater = () => {
-	const { value, setValue } = useControl< BoxShadow >();
-
-	const boxShadowValues = value?.value;
-
-	const setBoxShadow = ( newValue: BoxShadow[ 'value' ] ) => {
-		setValue( {
-			$$type: 'box-shadow',
-			value: newValue,
-		} );
-	};
-
-	return (
-		<Repeater
-			values={ boxShadowValues }
-			setValues={ setBoxShadow }
-			label={ __( 'Box shadow', 'elementor' ) }
-			itemSettings={ {
-				Icon: ItemIcon,
-				Label: ItemLabel,
-				Content: ItemContent,
-				initialValues: initialShadow,
-			} }
-		/>
-	);
-};
-
-const ItemIcon = ( { value }: { value: Shadow } ) => (
-	<UnstableColorIndicator size="inherit" component="span" value={ value.value.color.value } />
-);
-
-const ItemContent = ( {
-	anchorEl,
-	value,
-	setValue,
-}: {
-	anchorEl: HTMLElement | null;
-	value: Shadow;
-	setValue: ( newValue: Shadow ) => void;
-} ) => {
-	const setShadow = ( newValue: Shadow[ 'value' ] ) => {
-		setValue( {
-			$$type: 'shadow',
-			value: newValue,
-		} );
-	};
-
-	return (
-		<Stack gap={ 1.5 }>
-			<Grid container spacing={ 1 }>
-				<Control
-					bind="color"
-					value={ value.value.color }
-					label={ __( 'Color', 'elementor' ) }
-					setValue={ ( v: ColorPropValue ) => setShadow( { ...value.value, color: v } ) }
-				>
-					<ColorControl
-						anchorEl={ anchorEl }
-						anchorOrigin={ {
-							vertical: 'top',
-							horizontal: 'right',
-						} }
-						transformOrigin={ {
-							vertical: 'top',
-							horizontal: -10,
-						} }
-					/>
-				</Control>
-				<Control
-					bind="position"
-					value={ value.value.position }
-					label={ __( 'Position', 'elementor' ) }
-					setValue={ ( v: string ) => setShadow( { ...value.value, position: v } ) }
-				>
-					<SelectControl
-						options={ [
-							{ label: 'Inset', value: 'inset' },
-							{ label: 'Outset', value: 'outset' },
-						] }
-					/>
-				</Control>
-			</Grid>
-			<Grid container spacing={ 1 }>
-				<Control
-					bind="hOffset"
-					label={ __( 'Horizontal', 'elementor' ) }
-					value={ value.value.hOffset }
-					setValue={ ( v: SizeControlValue ) => setShadow( { ...value.value, hOffset: v } ) }
-				>
-					<SizeControl />
-				</Control>
-				<Control
-					label={ __( 'Vertical', 'elementor' ) }
-					bind="vOffset"
-					value={ value.value.vOffset }
-					setValue={ ( v: SizeControlValue ) => setShadow( { ...value.value, vOffset: v } ) }
-				>
-					<SizeControl />
-				</Control>
-			</Grid>
-			<Grid container spacing={ 1 }>
-				<Control
-					bind="blur"
-					value={ value.value.blur }
-					label={ __( 'Blur', 'elementor' ) }
-					setValue={ ( v: SizeControlValue ) => setShadow( { ...value.value, blur: v } ) }
-				>
-					<SizeControl />
-				</Control>
-				<Control
-					bind="spread"
-					label={ __( 'Spread', 'elementor' ) }
-					value={ value.value.spread }
-					setValue={ ( v: SizeControlValue ) => setShadow( { ...value.value, spread: v } ) }
-				>
-					<SizeControl />
-				</Control>
-			</Grid>
-		</Stack>
-	);
-};
-
-const Control = < T extends PropValue >( {
-	value,
-	setValue,
-	label,
-	bind,
-	children,
-}: {
-	value: T;
-	bind: string;
-	label: string;
-	children: React.ReactNode;
-	setValue: ( v: T ) => void;
-} ) => (
-	<ControlContext.Provider value={ { value, setValue: setValue as SetContextValue, bind } }>
-		<Grid item xs={ 6 }>
-			<Grid container spacing={ 1 } alignItems="center">
-				<Grid item xs={ 12 }>
-					<ControlLabel>{ label }</ControlLabel>
-				</Grid>
-				<Grid item xs={ 12 }>
-					{ children }
-				</Grid>
-			</Grid>
-		</Grid>
-	</ControlContext.Provider>
-);
-
-const ItemLabel = ( { value }: { value: Shadow } ) => {
-	const { position, hOffset, vOffset, blur, spread } = value.value;
-
-	const { size: hOffsetSize, unit: hOffsetUnit } = hOffset.value;
-	const { size: vOffsetSize, unit: vOffsetUnit } = vOffset.value;
-	const { size: blurSize, unit: blurUnit } = blur.value;
-	const { size: spreadSize, unit: spreadUnit } = spread.value;
-
-	const sizes = [
-		hOffsetSize + hOffsetUnit,
-		vOffsetSize + vOffsetUnit,
-		blurSize + blurUnit,
-		spreadSize + spreadUnit,
-	].join( ' ' );
-
-	return (
-		<span style={ { textTransform: 'capitalize' } }>
-			{ position }: { sizes }
-		</span>
-	);
-};
-
-const initialShadow: Shadow = {
-	$$type: 'shadow',
-	value: {
-		hOffset: {
-			$$type: 'size',
-			value: { unit: 'px', size: 0 },
-		},
-		vOffset: {
-			$$type: 'size',
-			value: { unit: 'px', size: 0 },
-		},
-		blur: {
-			$$type: 'size',
-			value: { unit: 'px', size: 0 },
-		},
-		spread: {
-			$$type: 'size',
-			value: { unit: 'px', size: 0 },
-		},
-		color: {
-			$$type: 'color',
-			value: 'rgba(0, 0, 0, 0)',
-		},
-		position: 'inset',
-	},
-};

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

@@ -1,20 +0,0 @@
-import * as React from 'react';
-import { __ } from '@wordpress/i18n';
-import { Grid } from '@elementor/ui';
-import { StyleControl } from '../../../controls/style-control';
-import { NumberControl } from '../../../controls/control-types/number-control';
-
-export const ZIndexControl = () => {
-	return (
-		<StyleControl bind="z-index">
-			<Grid container spacing={ 1 } alignItems="center">
-				<Grid item xs={ 6 }>
-					<StyleControl.Label>{ __( 'Z-Index', 'elementor' ) }</StyleControl.Label>
-				</Grid>
-				<Grid item xs={ 6 }>
-					<NumberControl />
-				</Grid>
-			</Grid>
-		</StyleControl>
-	);
-};

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

@@ -1,49 +0,0 @@
-import * as React from 'react';
-import { AccordionSection } from '../accordion-section';
-import { StyleControl, StyleControlProps } from '../../controls/style-control';
-import { Grid, Stack } from '@elementor/ui';
-import { __ } from '@wordpress/i18n';
-import { Control as BaseControl } from '../../controls/control';
-
-export const SizeSection = () => {
-	return (
-		<AccordionSection title={ __( 'Size', 'elementor' ) }>
-			<Stack gap={ 1.5 }>
-				<Grid container spacing={ 2 }>
-					<Control bind="width" label={ __( 'Width', 'elementor' ) } />
-					<Control bind="height" label={ __( 'Height', 'elementor' ) } />
-				</Grid>
-				<Grid container spacing={ 2 }>
-					<Control bind="min-width" label={ __( 'Min. Width', 'elementor' ) } />
-					<Control bind="min-height" label={ __( 'Min. Height', 'elementor' ) } />
-				</Grid>
-				<Grid container spacing={ 2 }>
-					<Control bind="max-width" label={ __( 'Max. Width', 'elementor' ) } />
-					<Control bind="max-height" label={ __( 'Max. Height', 'elementor' ) } />
-				</Grid>
-			</Stack>
-		</AccordionSection>
-	);
-};
-
-type ControlProps = {
-	bind: StyleControlProps[ 'bind' ];
-	label: string;
-};
-
-const Control = ( { label, bind }: ControlProps ) => {
-	return (
-		<Grid item xs={ 6 }>
-			<StyleControl bind={ bind }>
-				<Grid container spacing={ 1 } alignItems="center">
-					<Grid item xs={ 12 }>
-						<StyleControl.Label>{ label }</StyleControl.Label>
-					</Grid>
-					<Grid item xs={ 12 }>
-						<BaseControl type={ 'size' } />
-					</Grid>
-				</Grid>
-			</StyleControl>
-		</Grid>
-	);
-};