@elementor/editor-editing-panel 0.17.0 → 0.19.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elementor/editor-editing-panel",
-  "version": "0.17.0",
+  "version": "0.19.0",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -39,16 +39,17 @@
     "dev": "tsup --config=../../tsup.dev.ts"
   },
   "dependencies": {
-    "@elementor/editor": "^0.14.0",
-    "@elementor/editor-panels": "^0.7.0",
+    "@elementor/editor": "^0.15.0",
+    "@elementor/editor-panels": "^0.8.0",
     "@elementor/editor-responsive": "^0.12.1",
-    "@elementor/editor-style": "^0.4.0",
+    "@elementor/editor-style": "^0.4.1",
     "@elementor/editor-v1-adapters": "^0.8.2",
-    "@elementor/icons": "^1.13.1",
+    "@elementor/icons": "^1.17.0",
+    "@elementor/menus": "^0.1.0",
     "@elementor/schema": "^0.1.0",
-    "@elementor/ui": "^1.20.2",
+    "@elementor/ui": "^1.21.1",
     "@elementor/utils": "^0.2.1",
-    "@elementor/wp-media": "^0.1.2",
+    "@elementor/wp-media": "^0.2.0",
     "@wordpress/i18n": "^4.45.0"
   },
   "peerDependencies": {

package/src/components/editing-panel-error-fallback.tsx

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import { Alert, Box } from '@elementor/ui';
+
+export function EditorPanelErrorFallback() {
+	return (
+		<Box role="alert" sx={ { minHeight: '100%', p: 2 } }>
+			<Alert severity="error" sx={ { mb: 2, maxWidth: 400, textAlign: 'center' } }>
+				<strong>Something went wrong</strong>
+			</Alert>
+		</Box>
+	);
+}

package/src/components/editing-panel.tsx

@@ -1,35 +1,46 @@
 import * as React from 'react';
 import { __ } from '@wordpress/i18n';
 import useSelectedElements from '../hooks/use-selected-elements';
-import useElementType from '../hooks/use-element-type';
 import { Panel, PanelBody, PanelHeader, PanelHeaderTitle } from '@elementor/editor-panels';
-import { ElementContext } from '../contexts/element-context';
+import { ElementProvider } from '../controls/providers/element-provider';
+import useElementType from '../hooks/use-element-type';
 import { EditingPanelTabs } from './editing-panel-tabs';
+import { ControlReplacementProvider } from '../controls/create-control-replacement';
+import { getControlReplacement } from '../control-replacement';
+import { ErrorBoundary } from '@elementor/ui';
+import { EditorPanelErrorFallback } from './editing-panel-error-fallback';
 
 export const EditingPanel = () => {
 	const elements = useSelectedElements();
 
 	const [ selectedElement ] = elements;
 
+	// TODO: Move this into the provider.
 	const elementType = useElementType( selectedElement?.type );
 
 	if ( elements.length !== 1 || ! elementType ) {
 		return null;
 	}
 
+	const controlReplacement = getControlReplacement();
+
 	/* translators: %s: Element type title. */
 	const panelTitle = __( 'Edit %s', 'elementor' ).replace( '%s', elementType.title );
 
 	return (
-		<Panel>
-			<PanelHeader>
-				<PanelHeaderTitle>{ panelTitle }</PanelHeaderTitle>
-			</PanelHeader>
-			<PanelBody>
-				<ElementContext element={ selectedElement } elementType={ elementType }>
-					<EditingPanelTabs />
-				</ElementContext>
-			</PanelBody>
-		</Panel>
+		<ErrorBoundary fallback={ <EditorPanelErrorFallback /> }>
+			<Panel>
+				<PanelHeader>
+					<PanelHeaderTitle>{ panelTitle }</PanelHeaderTitle>
+				</PanelHeader>
+				<PanelBody>
+					<ControlReplacementProvider { ...controlReplacement }>
+						<ElementProvider element={ selectedElement } elementType={ elementType }>
+							<EditingPanelTabs />
+						</ElementProvider>
+					</ControlReplacementProvider>
+				</PanelBody>
+			</Panel>
+		</ErrorBoundary>
 	);
 };

package/src/components/settings-tab.tsx

@@ -1,14 +1,15 @@
 import * as React from 'react';
 import { Stack } from '@elementor/ui';
 import { SettingsControl } from '../controls/settings-control';
-import { useElementContext } from '../contexts/element-context';
+import { useElement } from '../controls/providers/element-provider';
 import { AccordionSection } from './accordion-section';
-import type { Control } from '../types';
+import type { Control } from '../controls/types';
 import { Control as BaseControl } from '../controls/control';
 import { ControlType, getControlByType } from '../controls/controls-registry';
+import { ControlTypeContainer } from '../controls/components/control-type-container';
 
 export const SettingsTab = () => {
-	const { elementType } = useElementContext();
+	const { elementType } = useElement();
 
 	return (
 		<Stack>
@@ -46,8 +47,10 @@ const Control = ( { control }: { control: Control[ 'value' ] } ) => {
 
 	return (
 		<SettingsControl bind={ control.bind }>
-			{ control.label ? <SettingsControl.Label>{ control.label }</SettingsControl.Label> : null }
-			<BaseControl type={ control.type as ControlType } props={ control.props } />
+			<ControlTypeContainer controlType={ control.type as ControlType }>
+				{ control.label ? <SettingsControl.Label>{ control.label }</SettingsControl.Label> : null }
+				<BaseControl type={ control.type as ControlType } props={ control.props } />
+			</ControlTypeContainer>
 		</SettingsControl>
 	);
 };

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

@@ -0,0 +1,20 @@
+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/background-section/background-section.tsx

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import { __ } from '@wordpress/i18n';
+import { Stack } from '@elementor/ui';
+import { AccordionSection } from '../../accordion-section';
+import { BackgroundColorControl } from './background-color-control';
+
+export const BackgroundSection = () => {
+	return (
+		<AccordionSection title={ __( 'Background', 'elementor' ) }>
+			<Stack gap={ 1.5 }>
+				<BackgroundColorControl />
+			</Stack>
+		</AccordionSection>
+	);
+};

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

@@ -0,0 +1,224 @@
+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/effects-section/effects-section.tsx

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { __ } from '@wordpress/i18n';
+import { Stack } from '@elementor/ui';
+import { AccordionSection } from '../../accordion-section';
+import { StyleControl } from '../../../controls/style-control';
+import { BoxShadowRepeater } from './box-shadow-repeater';
+
+export const EffectsSection = () => {
+	return (
+		<AccordionSection title={ __( 'Effects', 'elementor' ) }>
+			<Stack gap={ 1.5 }>
+				<StyleControl bind="box-shadow">
+					<BoxShadowRepeater />
+				</StyleControl>
+			</Stack>
+		</AccordionSection>
+	);
+};

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

@@ -1,16 +1,20 @@
 import * as React from 'react';
-import { StyleControl } from '../../../controls/style-control';
-import { ControlContainer } from '../../../controls/components/control-container';
 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="zIndex">
-			<ControlContainer>
-				<StyleControl.Label>{ __( 'Z-Index', 'elementor' ) }</StyleControl.Label>
-				<NumberControl />
-			</ControlContainer>
+		<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,29 +1,26 @@
 import * as React from 'react';
 import { AccordionSection } from '../accordion-section';
 import { StyleControl, StyleControlProps } from '../../controls/style-control';
-import { Stack } from '@elementor/ui';
+import { Grid, Stack } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 import { Control as BaseControl } from '../../controls/control';
-import { ControlContainer } from '../../controls/components/control-container';
 
 export const SizeSection = () => {
 	return (
 		<AccordionSection title={ __( 'Size', 'elementor' ) }>
 			<Stack gap={ 1.5 }>
-				<Stack direction="row" gap={ 2 }>
+				<Grid container spacing={ 2 }>
 					<Control bind="width" label={ __( 'Width', 'elementor' ) } />
 					<Control bind="height" label={ __( 'Height', 'elementor' ) } />
-				</Stack>
-				<Stack gap={ 1.5 } sx={ { pt: 1.5 } }>
-					<Stack direction="row" gap={ 2 }>
-						<Control bind="minWidth" label={ __( 'Min. Width', 'elementor' ) } />
-						<Control bind="minHeight" label={ __( 'Min. Height', 'elementor' ) } />
-					</Stack>
-					<Stack direction="row" gap={ 2 }>
-						<Control bind="maxWidth" label={ __( 'Max. Width', 'elementor' ) } />
-						<Control bind="maxHeight" label={ __( 'Max. Height', 'elementor' ) } />
-					</Stack>
-				</Stack>
+				</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>
 	);
@@ -36,11 +33,17 @@ type ControlProps = {
 
 const Control = ( { label, bind }: ControlProps ) => {
 	return (
-		<StyleControl bind={ bind }>
-			<ControlContainer direction="column">
-				<StyleControl.Label>{ label }</StyleControl.Label>
-				<BaseControl type={ 'size' } />
-			</ControlContainer>
-		</StyleControl>
+		<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>
 	);
 };

package/src/components/style-sections/spacing-section/linked-dimensions-control.tsx

@@ -1,29 +1,28 @@
-import { PropValue } from '../../../types';
-import { SizeControl } from '../../../controls/control-types/size-control';
 import * as React from 'react';
-import { ControlContainer } from '../../../controls/components/control-container';
-import { Stack, ToggleButton } from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+import { Grid, Stack, ToggleButton } from '@elementor/ui';
 import { DetachIcon, LinkIcon, SideBottomIcon, SideLeftIcon, SideRightIcon, SideTopIcon } from '@elementor/icons';
+import { PropValue, TransformablePropValue } from '../../../controls/props/types';
+import { SizeControl } from '../../../controls/control-types/size-control';
 import { ControlLabel } from '../../control-label';
 import { ControlContext, useControl } from '../../../controls/control-context';
-import { __ } from '@wordpress/i18n';
 
 export type Position = 'top' | 'right' | 'bottom' | 'left';
 
-export type LinkedDimensionsValue = {
-	$$type: 'linked-dimensions';
-	value: {
+export type LinkedDimensionsValue = TransformablePropValue<
+	'linked-dimensions',
+	{
 		isLinked: boolean;
 		top: PropValue;
 		right: PropValue;
 		bottom: PropValue;
 		left: PropValue;
-	};
-};
+	}
+>;
 
 export const LinkedDimensionsControl = ( { label }: { label: string } ) => {
 	const { value, setValue } = useControl< LinkedDimensionsValue >();
-	const { top, right, bottom, left, isLinked = false } = value?.value || {};
+	const { top, right, bottom, left, isLinked = true } = value?.value || {};
 
 	const setLinkedValue = ( position: Position, newValue: PropValue ) => {
 		const updatedValue = {
@@ -74,44 +73,60 @@ export const LinkedDimensionsControl = ( { label }: { label: string } ) => {
 				</ToggleButton>
 			</Stack>
 			<Stack direction="row" gap={ 2 }>
-				<ControlContainer direction={ 'column' }>
-					<ControlLabel>{ __( 'Top', 'elementor' ) }</ControlLabel>
-					<Control
-						bind={ 'top' }
-						value={ top }
-						setValue={ setLinkedValue }
-						startIcon={ <SideTopIcon fontSize={ 'tiny' } /> }
-					/>
-				</ControlContainer>
-				<ControlContainer direction={ 'column' }>
-					<ControlLabel>{ __( 'Right', 'elementor' ) }</ControlLabel>
-					<Control
-						bind={ 'right' }
-						value={ right }
-						setValue={ setLinkedValue }
-						startIcon={ <SideRightIcon fontSize={ 'tiny' } /> }
-					/>
-				</ControlContainer>
+				<Grid container spacing={ 1 } alignItems="center">
+					<Grid item xs={ 12 }>
+						<ControlLabel>{ __( 'Top', 'elementor' ) }</ControlLabel>
+					</Grid>
+					<Grid item xs={ 12 }>
+						<Control
+							bind={ 'top' }
+							value={ top }
+							setValue={ setLinkedValue }
+							startIcon={ <SideTopIcon fontSize={ 'tiny' } /> }
+						/>
+					</Grid>
+				</Grid>
+				<Grid container spacing={ 1 } alignItems="center">
+					<Grid item xs={ 12 }>
+						<ControlLabel>{ __( 'Right', 'elementor' ) }</ControlLabel>
+					</Grid>
+					<Grid item xs={ 12 }>
+						<Control
+							bind={ 'right' }
+							value={ right }
+							setValue={ setLinkedValue }
+							startIcon={ <SideRightIcon fontSize={ 'tiny' } /> }
+						/>
+					</Grid>
+				</Grid>
 			</Stack>
 			<Stack direction="row" gap={ 2 }>
-				<ControlContainer direction={ 'column' }>
-					<ControlLabel>{ __( 'Bottom', 'elementor' ) }</ControlLabel>
-					<Control
-						bind={ 'bottom' }
-						value={ bottom }
-						setValue={ setLinkedValue }
-						startIcon={ <SideBottomIcon fontSize={ 'tiny' } /> }
-					/>
-				</ControlContainer>
-				<ControlContainer direction={ 'column' }>
-					<ControlLabel>{ __( 'Left', 'elementor' ) }</ControlLabel>
-					<Control
-						bind={ 'left' }
-						value={ left }
-						setValue={ setLinkedValue }
-						startIcon={ <SideLeftIcon fontSize={ 'tiny' } /> }
-					/>
-				</ControlContainer>
+				<Grid container spacing={ 1 } alignItems="center">
+					<Grid item xs={ 12 }>
+						<ControlLabel>{ __( 'Bottom', 'elementor' ) }</ControlLabel>
+					</Grid>
+					<Grid item xs={ 12 }>
+						<Control
+							bind={ 'bottom' }
+							value={ bottom }
+							setValue={ setLinkedValue }
+							startIcon={ <SideBottomIcon fontSize={ 'tiny' } /> }
+						/>
+					</Grid>
+				</Grid>
+				<Grid container spacing={ 1 } alignItems="center">
+					<Grid item xs={ 12 }>
+						<ControlLabel>{ __( 'Left', 'elementor' ) }</ControlLabel>
+					</Grid>
+					<Grid item xs={ 12 }>
+						<Control
+							bind={ 'left' }
+							value={ left }
+							setValue={ setLinkedValue }
+							startIcon={ <SideLeftIcon fontSize={ 'tiny' } /> }
+						/>
+					</Grid>
+				</Grid>
 			</Stack>
 		</>
 	);