@elementor/editor-editing-panel 0.18.0 → 0.19.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elementor/editor-editing-panel",
-  "version": "0.18.0",
+  "version": "0.19.0",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",

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,15 +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>

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

@@ -3,7 +3,7 @@ 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 '../../../types';
+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';

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

@@ -2,7 +2,7 @@ import * as React from 'react';
 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 '../../../types';
+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';

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

@@ -38,7 +38,7 @@ export const TextAlignmentControl = () => {
 				<Grid item xs={ 6 }>
 					<StyleControl.Label>{ __( 'Alignment', 'elementor' ) }</StyleControl.Label>
 				</Grid>
-				<Grid item xs={ 6 }>
+				<Grid item xs={ 6 } display="flex" justifyContent="end">
 					<ToggleControl options={ options } />
 				</Grid>
 			</Grid>

package/src/components/style-sections/typography-section/text-direction-control.tsx

@@ -28,7 +28,7 @@ export const TextDirectionControl = () => {
 				<Grid item xs={ 6 }>
 					<StyleControl.Label>{ __( 'Direction', 'elementor' ) }</StyleControl.Label>
 				</Grid>
-				<Grid item xs={ 6 }>
+				<Grid item xs={ 6 } display="flex" justifyContent="end">
 					<ToggleControl options={ options } />
 				</Grid>
 			</Grid>

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

@@ -18,7 +18,7 @@ export const TextStyleControl = () => {
 			<Grid item xs={ 6 }>
 				<ControlLabel>{ __( 'Style', 'elementor' ) }</ControlLabel>
 			</Grid>
-			<Grid item xs={ 6 }>
+			<Grid item xs={ 6 } display="flex" justifyContent="end">
 				<ToggleButtonGroup value={ formats }>
 					<ToggleButton
 						value="italic"

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

@@ -17,7 +17,7 @@ export const TransformControl = () => (
 			<Grid item xs={ 6 }>
 				<StyleControl.Label>{ __( 'Transform', 'elementor' ) }</StyleControl.Label>
 			</Grid>
-			<Grid item xs={ 6 }>
+			<Grid item xs={ 6 } display="flex" justifyContent="end">
 				<ToggleControl options={ options } />
 			</Grid>
 		</Grid>

package/src/components/style-tab.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { StyleContext } from '../contexts/style-context';
-import { useElementContext } from '../contexts/element-context';
+import { useElement } from '../controls/providers/element-provider';
 import { useElementStyles } from '../hooks/use-element-styles';
 import { Stack } from '@elementor/ui';
 import { SizeSection } from './style-sections/size-section';
@@ -9,6 +9,7 @@ import { PositionSection } from './style-sections/position-section/position-sect
 import { StyleDefinition } from '@elementor/editor-style';
 import { SpacingSection } from './style-sections/spacing-section/spacing-section';
 import { EffectsSection } from './style-sections/effects-section/effects-section';
+import { BackgroundSection } from './style-sections/background-section/background-section';
 
 const CLASSES_PROP_KEY = 'classes';
 
@@ -22,6 +23,7 @@ export const StyleTab = () => {
 				<SizeSection />
 				<PositionSection />
 				<TypographySection />
+				<BackgroundSection />
 				<SpacingSection />
 				<EffectsSection />
 			</Stack>
@@ -30,7 +32,7 @@ export const StyleTab = () => {
 };
 
 function useClassesProp(): string {
-	const { elementType } = useElementContext();
+	const { elementType } = useElement();
 
 	const prop = Object.entries( elementType.propsSchema ).find(
 		( [ , propType ] ) => propType.kind === 'array' && propType.key === CLASSES_PROP_KEY
@@ -44,7 +46,7 @@ function useClassesProp(): string {
 }
 
 function useStyleDefinition(): StyleDefinition | null {
-	const { element } = useElementContext();
+	const { element } = useElement();
 	const elementStyles = useElementStyles( element.id );
 
 	return Object.values( elementStyles || {} )[ 0 ] ?? null;

package/src/control-replacement.tsx

@@ -0,0 +1,3 @@
+import { createControlReplacement } from './controls/create-control-replacement';
+
+export const { replaceControl, getControlReplacement } = createControlReplacement();

package/src/controls/components/text-field-inner-selection.tsx

@@ -1,7 +1,7 @@
-import { PropValue } from '../../types';
 import * as React from 'react';
-import { bindMenu, bindTrigger, Button, InputAdornment, Menu, MenuItem, TextField, usePopupState } from '@elementor/ui';
 import { useId } from 'react';
+import { bindMenu, bindTrigger, Button, InputAdornment, Menu, MenuItem, TextField, usePopupState } from '@elementor/ui';
+import { PropValue } from '../props/types';
 
 export type TextFieldInnerSelectionProps = {
 	placeholder?: string;

package/src/controls/control-context.tsx

@@ -1,5 +1,5 @@
 import { createContext, useContext } from 'react';
-import { PropKey, PropValue } from '../types';
+import { PropKey, PropValue } from './props/types';
 
 export type ControlContext< T extends PropValue > = {
 	bind: PropKey;

package/src/controls/control-replacement.ts

@@ -1,5 +1,5 @@
-import { PropValue } from '../types';
 import { ComponentType } from 'react';
+import { PropValue } from './props/types';
 import { useControl } from './control-context';
 
 type ReplaceWhenParams = {

package/src/controls/control-types/color-control.tsx

@@ -3,7 +3,7 @@ import { UnstableColorPicker, UnstableColorPickerProps } from '@elementor/ui';
 import { useControl } from '../control-context';
 import ControlActions from '../control-actions/control-actions';
 import { createControl } from '../create-control';
-import { TransformablePropValue } from '../../types';
+import { TransformablePropValue } from '../props/types';
 
 export type ColorPropValue = TransformablePropValue< 'color', string >;
 

package/src/controls/control-types/image-control.tsx

@@ -3,8 +3,8 @@ import { Grid, Stack } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 import { ControlContext, useControl } from '../control-context';
 import { type ImageSrc, ImageMediaControl } from './image-media-control';
+import { PropValue, TransformablePropValue } from '../props/types';
 import { SettingsControl } from '../settings-control';
-import { PropValue, TransformablePropValue } from '../../types';
 import { SelectControl } from './select-control';
 import { createControl } from '../create-control';
 

package/src/controls/control-types/image-media-control.tsx

@@ -2,11 +2,11 @@ import * as React from 'react';
 import { Button, Card, CardMedia, CardOverlay, Stack } from '@elementor/ui';
 import { UploadIcon } from '@elementor/icons';
 import { useWpMediaAttachment, useWpMediaFrame } from '@elementor/wp-media';
-import { useControl } from '../control-context';
-import { TransformablePropValue } from '../../types';
 import { __ } from '@wordpress/i18n';
+import { useControl } from '../control-context';
 import ControlActions from '../control-actions/control-actions';
 import { createControl } from '../create-control';
+import { TransformablePropValue } from '../props/types';
 
 type ImageAttachmentID = TransformablePropValue< 'image-attachment-id', number >;
 

package/src/controls/control-types/select-control.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { MenuItem, Select, SelectChangeEvent } from '@elementor/ui';
 import { useControl } from '../control-context';
-import { PropValue } from '../../types';
+import { PropValue } from '../props/types';
 import ControlActions from '../control-actions/control-actions';
 import { createControl } from '../create-control';
 

package/src/controls/control-types/size-control.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { InputAdornment } from '@elementor/ui';
-import { TransformablePropValue } from '../../types';
+import { TransformablePropValue } from '../props/types';
 import { useControl } from '../control-context';
 import { useSyncExternalState } from '../hooks/use-sync-external-state';
 import { SelectionEndAdornment, TextFieldInnerSelection } from '../components/text-field-inner-selection';

package/src/controls/control-types/toggle-control.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { useControl } from '../control-context';
 import { ControlToggleButtonGroup, ToggleButtonGroupItem } from '../components/control-toggle-button-group';
-import { PropValue } from '../../types';
+import { PropValue } from '../props/types';
 import { createControl } from '../create-control';
 
 type ToggleControlProps< T extends PropValue > = {

package/src/controls/create-control-replacement.tsx

@@ -0,0 +1,53 @@
+import * as React from 'react';
+import { PropValue } from './props/types';
+import { ComponentType, createContext, useContext } from 'react';
+import { useControl } from './control-context';
+
+export type ReplaceWhenParams = {
+	value: PropValue;
+};
+
+export type CreateControlReplacement = {
+	component: ComponentType;
+	condition: ( { value }: ReplaceWhenParams ) => boolean;
+};
+
+const ControlReplacementContext = createContext< CreateControlReplacement | undefined >( undefined );
+
+export const ControlReplacementProvider = ( {
+	component,
+	condition,
+	children,
+}: React.PropsWithChildren< CreateControlReplacement > ) => {
+	return (
+		<ControlReplacementContext.Provider value={ { component, condition } }>
+			{ children }
+		</ControlReplacementContext.Provider>
+	);
+};
+export const useControlReplacement = () => {
+	const { value } = useControl();
+	const controlReplacement = useContext( ControlReplacementContext );
+
+	let shouldReplace = false;
+
+	try {
+		shouldReplace = !! controlReplacement?.condition( { value } ) && !! controlReplacement.component;
+	} catch {}
+
+	return shouldReplace ? controlReplacement?.component : undefined;
+};
+
+export const createControlReplacement = () => {
+	let controlReplacement: CreateControlReplacement;
+
+	function replaceControl( { component, condition }: CreateControlReplacement ) {
+		controlReplacement = { component, condition };
+	}
+
+	function getControlReplacement() {
+		return controlReplacement;
+	}
+
+	return { replaceControl, getControlReplacement };
+};

package/src/controls/create-control.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { ComponentProps, ComponentType } from 'react';
-import { useControlReplacement } from './control-replacement';
+import { useControlReplacement } from './create-control-replacement';
+import { ErrorBoundary } from '@elementor/ui';
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 type AnyComponentType = ComponentType< any >;
@@ -23,9 +24,17 @@ export function createControl< T extends AnyComponentType >(
 		const ControlReplacement = useControlReplacement();
 
 		if ( ControlReplacement && supportsReplacements ) {
-			return <ControlReplacement { ...props } />;
+			return (
+				<ErrorBoundary fallback={ null }>
+					<ControlReplacement { ...props } />
+				</ErrorBoundary>
+			);
 		}
 
-		return <Component { ...props } />;
+		return (
+			<ErrorBoundary fallback={ null }>
+				<Component { ...props } />
+			</ErrorBoundary>
+		);
 	} ) as ControlComponent< T >;
 }

package/src/controls/hooks/use-style-control.ts

@@ -1,11 +1,11 @@
-import { useElementContext } from '../../contexts/element-context';
+import { useElement } from '../providers/element-provider';
 import { useStyleContext } from '../../contexts/style-context';
 import { useElementStyleProp } from '../../hooks/use-element-style-prop';
 import { updateStyle } from '../../sync/update-style';
-import { PropKey, PropValue } from '../../types';
+import { PropKey, PropValue } from '../props/types';
 
 export const useStyleControl = < T extends PropValue >( propName: PropKey ) => {
-	const { element } = useElementContext();
+	const { element } = useElement();
 	const { selectedStyleDef, selectedMeta, selectedClassesProp } = useStyleContext();
 
 	const value = useElementStyleProp< T >( {

package/src/{hooks → controls/hooks}/use-widget-settings.ts

@@ -1,6 +1,6 @@
 import { commandEndEvent, __privateUseListenTo as useListenTo } from '@elementor/editor-v1-adapters';
-import { PropValue } from '../types';
 import getContainer from '../sync/get-container';
+import { PropValue } from '../props/types';
 
 export const useWidgetSettings = ( { id, bind }: { id: string; bind: string } ): PropValue => {
 	return useListenTo(

package/src/{props → controls/props}/is-transformable.ts

@@ -1,8 +1,7 @@
 import { z } from '@elementor/schema';
 
 // TODO: Move this file content a shared package.
-
-export const transformableSchema = z.object( {
+const transformableSchema = z.object( {
 	$$type: z.string(),
 	value: z.any(),
 } );

package/src/{types.ts → controls/props/types.ts}

@@ -1,39 +1,3 @@
-export type ElementID = string;
-
-export type Element = {
-	id: ElementID;
-	type: string;
-};
-
-export type ElementType = {
-	key: string;
-	controls: ControlItem[];
-	propsSchema: PropsSchema;
-	title: string;
-};
-
-export type ControlsSection = {
-	type: 'section';
-	value: {
-		description?: string;
-		label: string;
-		items: ControlItem[];
-	};
-};
-
-export type Control = {
-	type: 'control';
-	value: {
-		bind: string;
-		label?: string;
-		description?: string;
-		type: string;
-		props: Record< string, unknown >;
-	};
-};
-
-export type ControlItem = ControlsSection | Control;
-
 type PropTypeKey = string;
 
 type BasePropType = {
@@ -68,8 +32,6 @@ export type UnionPropType = BasePropType & {
 
 export type PropType = TransformablePropType | UnionPropType;
 
-export type PropsSchema = Record< Control[ 'value' ][ 'bind' ], PropType >;
-
 type MaybeArray< T > = T | T[];
 
 export type TransformablePropValue< Type extends string, Value = unknown > = {

package/src/{contexts/element-context.tsx → controls/providers/element-provider.tsx}

@@ -11,19 +11,19 @@ const Context = createContext< ContextValue | null >( null );
 
 type Props = {
 	element: Element;
-	elementType: ElementType;
 	children?: ReactNode;
+	elementType: ElementType;
 };
 
-export function ElementContext( { children, element, elementType }: Props ) {
+export function ElementProvider( { children, element, elementType }: Props ) {
 	return <Context.Provider value={ { element, elementType } }>{ children }</Context.Provider>;
 }
 
-export function useElementContext() {
+export function useElement() {
 	const context = useContext( Context );
 
 	if ( ! context ) {
-		throw new Error( 'useElementContext must be used within a ElementContextProvider' );
+		throw new Error( 'useElement must be used within a ElementProvider' );
 	}
 
 	return context;

package/src/controls/settings-control.tsx

@@ -1,9 +1,9 @@
 import * as React from 'react';
 import { ControlContext } from './control-context';
-import { PropKey, PropValue } from '../types';
-import { useElementContext } from '../contexts/element-context';
-import { useWidgetSettings } from '../hooks/use-widget-settings';
-import { updateSettings } from '../sync/update-settings';
+import { PropKey, PropValue } from './props/types';
+import { useElement } from './providers/element-provider';
+import { useWidgetSettings } from './hooks/use-widget-settings';
+import { updateSettings } from './sync/update-settings';
 import { ControlLabel } from '../components/control-label';
 
 type Props = {
@@ -12,7 +12,7 @@ type Props = {
 };
 
 const SettingsControl = ( { bind, children }: Props ) => {
-	const { element, elementType } = useElementContext();
+	const { element, elementType } = useElement();
 
 	const defaultValue = elementType.propsSchema[ bind ]?.default;
 	const settingsValue = useWidgetSettings( { id: element.id, bind } );

package/src/controls/style-control.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { PropKey } from '../types';
+import { PropKey } from './props/types';
 import { ControlContext } from '../controls/control-context';
 import { ControlLabel } from '../components/control-label';
 import { useStyleControl } from './hooks/use-style-control';

package/src/{sync → controls/sync}/get-container.ts

@@ -1,4 +1,4 @@
-import { ExtendedWindow } from './types';
+import { ExtendedWindow } from '../../sync/types';
 
 export default function getContainer( id: string ) {
 	const extendedWindow = window as unknown as ExtendedWindow;

package/src/{sync → controls/sync}/update-settings.ts

@@ -1,5 +1,5 @@
 import { __privateRunCommand as runCommand } from '@elementor/editor-v1-adapters';
-import { Props } from '../types';
+import { Props } from '../props/types';
 import getContainer from './get-container';
 
 export const updateSettings = ( { id, props }: { id: string; props: Props } ) => {

package/src/controls/types.ts

@@ -0,0 +1,39 @@
+import { PropType } from './props/types';
+
+export type ElementID = string;
+
+export type Element = {
+	id: ElementID;
+	type: string;
+};
+
+export type ElementType = {
+	key: string;
+	controls: ControlItem[];
+	propsSchema: PropsSchema;
+	title: string;
+};
+
+export type ControlsSection = {
+	type: 'section';
+	value: {
+		description?: string;
+		label: string;
+		items: ControlItem[];
+	};
+};
+
+export type Control = {
+	type: 'control';
+	value: {
+		bind: string;
+		label?: string;
+		description?: string;
+		type: string;
+		props: Record< string, unknown >;
+	};
+};
+
+export type ControlItem = ControlsSection | Control;
+
+export type PropsSchema = Record< Control[ 'value' ][ 'bind' ], PropType >;

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

@@ -4,7 +4,7 @@ import { useControl } from '../../controls/control-context';
 import { DynamicPropValue, DynamicTag } from '../types';
 import { DynamicControl } from '../dynamic-control';
 import { DatabaseIcon, SettingsIcon, XIcon } from '@elementor/icons';
-import type { Control, ControlsSection } from '../../types';
+import type { Control, ControlsSection } from '../../controls/types';
 import { DynamicSelection } from './dynamic-selection';
 import { ControlType, getControlByType } from '../../controls/controls-registry';
 import { ControlLabel } from '../../components/control-label';