@elementor/editor-editing-panel 0.5.0 → 0.6.0

package/src/components/controls/style-control.tsx

@@ -0,0 +1,35 @@
+import * as React from 'react';
+import { PropKey, PropValue } from '../../types';
+import { ControlContext } from '../../contexts/control-context';
+import { updateStyle } from '../../sync/update-style';
+import { useElementStyleProp } from '../../hooks/use-element-style-prop';
+import { useElementContext } from '../../contexts/element-context';
+import { useStyleContext } from '../../contexts/style-context';
+
+export type StyleControlProps = {
+	bind: PropKey;
+	children: React.ReactNode;
+};
+
+export const StyleControl = ( { bind, children }: StyleControlProps ) => {
+	const { element } = useElementContext();
+	const { selectedStyleDef, selectedMeta } = useStyleContext();
+
+	const setValue = ( newValue: PropValue ) => {
+		updateStyle( {
+			elementID: element.id,
+			styleDefID: selectedStyleDef?.id,
+			props: { [ bind ]: newValue },
+			meta: selectedMeta,
+		} );
+	};
+
+	const value = useElementStyleProp( {
+		elementID: element.id,
+		styleDefID: selectedStyleDef?.id,
+		meta: selectedMeta,
+		propName: bind,
+	} );
+
+	return <ControlContext.Provider value={ { bind, value, setValue } }>{ children }</ControlContext.Provider>;
+};

package/src/components/{editing-panel-hooks.tsx → editing-panel/editing-panel-hooks.tsx}

@@ -1,4 +1,4 @@
-import { useOpenEditorPanel } from '../hooks/use-open-editor-panel';
+import { useOpenEditorPanel } from '../../hooks/use-open-editor-panel';
 
 export const EditingPanelHooks = () => {
 	useOpenEditorPanel();

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

@@ -0,0 +1,26 @@
+import { Stack, Tabs, Tab, TabPanel, useTabs } from '@elementor/ui';
+import * as React from 'react';
+import { __ } from '@wordpress/i18n';
+import { SettingsTab } from './settings-tab';
+import { StyleTab } from './style-tab';
+
+type TabValue = 'settings' | 'style';
+
+export const EditingPanelTabs = () => {
+	const { getTabProps, getTabPanelProps, getTabsProps } = useTabs< TabValue >( 'settings' );
+
+	return (
+		<Stack direction="column" sx={ { width: '100%' } }>
+			<Tabs variant="fullWidth" indicatorColor="secondary" textColor="inherit" { ...getTabsProps() }>
+				<Tab label={ __( 'General', 'elementor' ) } { ...getTabProps( 'settings' ) } />
+				<Tab label={ __( 'Style', 'elementor' ) } { ...getTabProps( 'style' ) } />
+			</Tabs>
+			<TabPanel { ...getTabPanelProps( 'settings' ) } disablePadding>
+				<SettingsTab />
+			</TabPanel>
+			<TabPanel { ...getTabPanelProps( 'style' ) } disablePadding>
+				<StyleTab />
+			</TabPanel>
+		</Stack>
+	);
+};

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

@@ -0,0 +1,35 @@
+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 { EditingPanelTabs } from './editing-panel-tabs';
+
+export const EditingPanel = () => {
+	const elements = useSelectedElements();
+
+	const [ selectedElement ] = elements;
+
+	const elementType = useElementType( selectedElement?.type );
+
+	if ( elements.length !== 1 || ! elementType ) {
+		return null;
+	}
+
+	/* 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 }>
+					<EditingPanelTabs />
+				</ElementContext>
+			</PanelBody>
+		</Panel>
+	);
+};

package/src/components/editing-panel/settings-tab.tsx

@@ -0,0 +1,64 @@
+import * as React from 'react';
+import { Stack } from '@elementor/ui';
+import { SettingsControl } from '../controls/settings-control';
+import { useElementContext } from '../../contexts/element-context';
+import useElementType from '../../hooks/use-element-type';
+import type { Control } from '../../types';
+import { CollapsibleSection } from '../controls/collapsible-section';
+import { getControlByType } from '../controls/get-control-by-type';
+
+export const SettingsTab = () => {
+	const { element } = useElementContext();
+
+	const elementType = useElementType( element?.type );
+
+	if ( ! elementType ) {
+		return null;
+	}
+
+	return (
+		<Stack>
+			{ elementType.controls.map( ( { type, value }, index ) => {
+				if ( type === 'control' ) {
+					return <Control key={ value.bind } control={ value } />;
+				}
+
+				if ( type === 'section' ) {
+					return (
+						<CollapsibleSection key={ type + '.' + index } title={ value.label }>
+							{ value.items?.map( ( item ) => {
+								if ( item.type === 'control' ) {
+									return <Control key={ item.value.bind } control={ item.value } />;
+								}
+
+								// TODO: Handle 2nd level sections
+								return null;
+							} ) }
+						</CollapsibleSection>
+					);
+				}
+
+				return null;
+			} ) }
+		</Stack>
+	);
+};
+
+// TODO: Create control wrapper by type for different layouts.
+const Control = ( { control }: { control: Control[ 'value' ] } ) => {
+	const ControlComponent = getControlByType( control.type );
+
+	if ( ! ControlComponent ) {
+		return null;
+	}
+
+	return (
+		<SettingsControl key={ control.bind } bind={ control.bind }>
+			<SettingsControl.Label>{ control.label }</SettingsControl.Label>
+			<ControlComponent
+				/* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+				{ ...( control.props as any ) }
+			/>
+		</SettingsControl>
+	);
+};

package/src/components/editing-panel/style-tab.tsx

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import { StyleContext } from '../../contexts/style-context';
+import { useElementContext } from '../../contexts/element-context';
+import { useElementStyles } from '../../hooks/use-element-styles';
+
+export const StyleTab = () => {
+	const selectedElementID = useElementContext().element.id;
+	const elementStyles = useElementStyles( selectedElementID );
+	// TODO: Handle selected style state.
+	const selectedStyleDef = elementStyles ? Object.values( elementStyles )[ 0 ] : null;
+
+	return (
+		<StyleContext selectedStyleDef={ selectedStyleDef }>
+			<div>Style Tab</div>
+		</StyleContext>
+	);
+};

package/src/contexts/control-context.tsx

@@ -1,9 +1,5 @@
-import * as React from 'react';
 import { createContext, useContext } from 'react';
 import { PropKey, PropValue } from '../types';
-import { useElementContext } from './element-context';
-import { useWidgetSettings } from '../hooks/use-widget-settings';
-import { updateSettings } from '../sync/update-settings';
 
 export type ControlContext< T extends PropValue > = null | {
 	bind: PropKey;
@@ -22,24 +18,3 @@ export function useControl< T extends PropValue >( defaultValue?: T ) {
 
 	return { ...controlContext, value: controlContext.value ?? defaultValue };
 }
-
-type Props = {
-	bind: PropKey;
-	children: React.ReactNode;
-};
-
-export const ControlContextProvider = ( { bind, children }: Props ) => {
-	const { element } = useElementContext();
-	const value = useWidgetSettings( { id: element.id, bind } );
-
-	const setValue = ( newValue: PropValue ) => {
-		updateSettings( {
-			id: element.id,
-			props: {
-				[ bind ]: newValue,
-			},
-		} );
-	};
-
-	return <ControlContext.Provider value={ { setValue, value, bind } }>{ children }</ControlContext.Provider>;
-};

package/src/contexts/style-context.tsx

@@ -0,0 +1,34 @@
+import * as React from 'react';
+import { createContext, ReactNode, useContext } from 'react';
+import { StyleDefinition, StyleDefMeta } from '../types';
+import { useActiveBreakpoint } from '@elementor/editor-responsive';
+
+type ContextValue = {
+	selectedStyleDef: StyleDefinition | null;
+	selectedMeta: StyleDefMeta;
+};
+
+const Context = createContext< ContextValue | null >( null );
+
+type Props = {
+	children: ReactNode;
+	selectedStyleDef: StyleDefinition | null;
+};
+
+export function StyleContext( { children, selectedStyleDef }: Props ) {
+	const breakpoint = useActiveBreakpoint();
+	// TODO: Handle state when we support it.
+	const selectedMeta = { breakpoint, state: null } as const;
+
+	return <Context.Provider value={ { selectedStyleDef, selectedMeta } }>{ children }</Context.Provider>;
+}
+
+export function useStyleContext() {
+	const context = useContext( Context );
+
+	if ( ! context ) {
+		throw new Error( 'UseStyleContext must be used within a StyleContextProvider' );
+	}
+
+	return context;
+}

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

@@ -0,0 +1,44 @@
+import { commandEndEvent, __privateUseListenTo as useListenTo } from '@elementor/editor-v1-adapters';
+import { ElementID, PropKey, PropValue, StyleDefID, StyleDefinition, StyleDefMeta } from '../types';
+import { getElementStyles } from '../sync/get-element-styles';
+
+export type UseElementStylePropArgs = {
+	elementID: ElementID;
+	styleDefID?: StyleDefID;
+	meta: StyleDefMeta;
+	propName: PropKey;
+};
+
+export const useElementStyleProp = < T extends PropValue >( {
+	elementID,
+	styleDefID,
+	meta,
+	propName,
+}: UseElementStylePropArgs ): T | null => {
+	return useListenTo(
+		commandEndEvent( 'document/atomic-widgets/styles' ),
+		() => {
+			// TODO: return default value for style prop
+			if ( ! styleDefID ) {
+				return null;
+			}
+
+			const styleDef = getElementStyles( elementID )?.[ styleDefID ];
+
+			if ( ! styleDef ) {
+				return null;
+			}
+
+			const variant = getVariantByMeta( styleDef, meta );
+
+			return variant?.props[ propName ] ?? null;
+		},
+		[ elementID, styleDefID, propName, meta ]
+	) as T;
+};
+
+function getVariantByMeta( styleDef: StyleDefinition, meta: StyleDefMeta ) {
+	return styleDef.variants.find( ( variant ) => {
+		return variant.meta.breakpoint === meta.breakpoint && variant.meta.state === meta.state;
+	} );
+}

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

@@ -0,0 +1,13 @@
+import { __privateUseListenTo as useListenTo, commandEndEvent } from '@elementor/editor-v1-adapters';
+import { getElementStyles } from '../sync/get-element-styles';
+import { ElementID } from '../types';
+
+export const useElementStyles = ( elementID: ElementID ) => {
+	return useListenTo(
+		commandEndEvent( 'document/atomic-widgets/styles' ),
+		() => {
+			return getElementStyles( elementID );
+		},
+		[ elementID ]
+	);
+};

package/src/hooks/use-widget-settings.ts

@@ -11,6 +11,6 @@ export const useWidgetSettings = ( { id, bind }: { id: string; bind: string } ):
 
 			return value;
 		},
-		[]
+		[ id, bind ]
 	);
 };

package/src/init.ts

@@ -1,7 +1,7 @@
 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 { EditingPanelHooks } from './components/editing-panel/editing-panel-hooks';
 import { __registerPanel as registerPanel } from '@elementor/editor-panels';
 import { __privateBlockDataCommand as blockDataCommand } from '@elementor/editor-v1-adapters';
 

package/src/panel.ts

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

package/src/sync/get-element-styles.ts

@@ -0,0 +1,8 @@
+import getContainer from './get-container';
+import { ElementID, StyleDefinition } from '../types';
+
+export const getElementStyles = ( elementID: ElementID ): Record< string, StyleDefinition > | null => {
+	const container = getContainer( elementID );
+
+	return container?.model.get( 'styles' ) || null;
+};

package/src/sync/types.ts

@@ -1,4 +1,4 @@
-import { AtomicControl, PropValue } from '../types';
+import { ControlItem, PropValue, StyleDefID, StyleDefinition } from '../types';
 
 export type ExtendedWindow = Window & {
 	elementor?: {
@@ -8,7 +8,7 @@ export type ExtendedWindow = Window & {
 		widgetsCache?: Record<
 			string,
 			{
-				atomic_controls?: AtomicControl[];
+				atomic_controls?: ControlItem[];
 				controls: object;
 				title: string;
 			}
@@ -26,6 +26,7 @@ export type V1ElementModelProps = {
 	widgetType?: string;
 	elType: string;
 	id: string;
+	styles?: Record< StyleDefID, StyleDefinition >;
 };
 
 export type V1ElementSettingsProps = Record< string, PropValue >;

package/src/sync/update-style.ts

@@ -0,0 +1,23 @@
+import { __privateRunCommand as runCommand } from '@elementor/editor-v1-adapters';
+import { ElementID, PropKey, Props, StyleDefID, StyleDefMeta } from '../types';
+import getContainer from './get-container';
+
+export type UpdateStyleProps = {
+	elementID: ElementID;
+	styleDefID?: StyleDefID;
+	meta: StyleDefMeta;
+	props: Props;
+	bind?: PropKey;
+};
+
+export const updateStyle = ( { elementID, styleDefID, meta, props, bind = 'classes' }: UpdateStyleProps ) => {
+	const container = getContainer( elementID );
+
+	runCommand( 'document/atomic-widgets/styles', {
+		container,
+		styleDefId: styleDefID,
+		bind,
+		meta,
+		props,
+	} );
+};

package/src/types.ts

@@ -1,15 +1,59 @@
+export type ElementID = string;
+
 export type Element = {
-	id: string;
+	id: ElementID;
 	type: string;
 };
 
+export type Breakpoint = null | string;
+
+export type StyleDefState =
+	| null
+	| 'hover'
+	| 'focus'
+	| 'active'
+	| 'visited'
+	| 'disabled'
+	| 'checked'
+	| 'selected'
+	| 'hidden'
+	| 'visible';
+
+export type StyleDefMeta = {
+	breakpoint: Breakpoint;
+	state: StyleDefState;
+};
+
+export type StyleDefVariant = {
+	meta: StyleDefMeta;
+	props: Props;
+};
+
+export type StyleDefID = string;
+
+export type StyleDefinition = {
+	id: StyleDefID;
+	variants: StyleDefVariant[];
+	label?: string;
+	type: 'class';
+};
+
 export type ElementType = {
 	key: string;
-	controls: AtomicControl[];
+	controls: ControlItem[];
 	title: string;
 };
 
-export type AtomicControl = {
+export type ControlsSection = {
+	type: 'section';
+	value: {
+		description?: string;
+		label: string;
+		items: ControlItem[];
+	};
+};
+
+export type Control = {
 	type: 'control';
 	value: {
 		bind: string;
@@ -20,6 +64,8 @@ export type AtomicControl = {
 	};
 };
 
+export type ControlItem = ControlsSection | Control;
+
 type MaybeArray< T > = T | T[];
 
 type TransformablePropValue = {

package/src/__tests__/utils.ts

@@ -1,28 +0,0 @@
-import { V1Element, V1ElementModelProps, V1ElementSettingsProps } from '../sync/types';
-
-export function mockV1Element( {
-	model: partialModel = {},
-	settings: partialSettings = {},
-}: {
-	model?: Partial< V1ElementModelProps >;
-	settings?: Partial< V1ElementSettingsProps >;
-} ): V1Element {
-	const model = {
-		elType: 'widget',
-		id: '1',
-		...partialModel,
-	};
-
-	return {
-		model: {
-			get: ( key ) => {
-				return model[ key ];
-			},
-		},
-		settings: {
-			get: ( key ) => {
-				return partialSettings[ key ];
-			},
-		},
-	};
-}

package/src/components/__tests__/editing-panel.test.tsx

@@ -1,92 +0,0 @@
-import * as React from 'react';
-import { act, render, screen } from '@testing-library/react';
-import { EditingPanel } from '../editing-panel';
-import { V1Element, ExtendedWindow } from '../../sync/types';
-import { mockV1Element } from '../../__tests__/utils';
-import { dispatchCommandAfter } from 'test-utils';
-
-describe( '<EditingPanel />', () => {
-	const getElements = jest.fn();
-
-	function selectElements( elements: V1Element[] ) {
-		act( () => {
-			getElements.mockReturnValue( elements );
-			dispatchCommandAfter( 'document/elements/select' );
-		} );
-	}
-
-	function deselectElements() {
-		act( () => {
-			getElements.mockReturnValue( [] );
-			dispatchCommandAfter( 'document/elements/deselect' );
-		} );
-	}
-
-	beforeEach( () => {
-		const extendedWindow = window as unknown as ExtendedWindow;
-
-		extendedWindow.elementor = {
-			selection: {
-				getElements,
-			},
-			widgetsCache: {
-				'atomic-heading': {
-					controls: {},
-					atomic_controls: [],
-					title: 'Atomic Heading',
-				},
-				heading: {
-					controls: {},
-					title: 'Heading',
-				},
-			},
-		};
-	} );
-
-	it( 'should render the selected element editing panel', () => {
-		// Arrange + Act.
-		render( <EditingPanel /> );
-
-		// Assert.
-		expect( screen.queryByText( 'Edit Atomic Heading' ) ).not.toBeInTheDocument();
-
-		// Act.
-		selectElements( [ mockV1Element( { model: { widgetType: 'atomic-heading' } } ) ] );
-
-		// Assert.
-		expect( screen.getByText( 'Edit Atomic Heading' ) ).toBeInTheDocument();
-
-		// Act.
-		deselectElements();
-
-		// Assert.
-		expect( screen.queryByText( 'Edit Atomic Heading' ) ).not.toBeInTheDocument();
-	} );
-
-	it.each( [
-		{
-			title: 'multiple elements are selected',
-			selected: [
-				mockV1Element( { model: { widgetType: 'atomic-heading' } } ),
-				mockV1Element( { model: { widgetType: 'atomic-heading' } } ),
-			],
-		},
-		{
-			title: 'the element type does not exist',
-			selected: [ mockV1Element( { model: { widgetType: 'atomic-button' } } ) ],
-		},
-		{
-			title: 'the element does not have atomic controls',
-			selected: [ mockV1Element( { model: { widgetType: 'heading' } } ) ],
-		},
-	] )( 'should not render panel when $title', ( { selected } ) => {
-		// Arrange.
-		selectElements( selected );
-
-		// Act.
-		render( <EditingPanel /> );
-
-		// Assert.
-		expect( screen.queryByText( 'Edit Atomic Heading' ) ).not.toBeInTheDocument();
-	} );
-} );

package/src/components/controls/__tests__/settings-control.test.tsx

@@ -1,71 +0,0 @@
-import * as React from 'react';
-import { fireEvent, render, screen } from '@testing-library/react';
-import { SettingsControl } from '../settings-control';
-import { useControl } from '../../../contexts/control-context';
-import { updateSettings } from '../../../sync/update-settings';
-import { useWidgetSettings } from '../../../hooks/use-widget-settings';
-import { ElementContext } from '../../../contexts/element-context';
-import { Element } from '../../../types';
-
-jest.mock( '../../../sync/update-settings' );
-jest.mock( '../../../hooks/use-widget-settings' );
-
-describe( 'SettingsControl', () => {
-	beforeEach( () => {
-		jest.mocked( useWidgetSettings ).mockReturnValue( 'Hello, World!' );
-	} );
-
-	it( 'should set the initial value', () => {
-		// Arrange.
-		const element = { id: '1-heading' } as Element;
-		const bind = 'text';
-
-		// Act.
-		render(
-			<ElementContext element={ element }>
-				<SettingsControl bind={ bind }>
-					<MockControl />
-				</SettingsControl>
-			</ElementContext>
-		);
-
-		// Assert.
-		expect( screen.getByRole( 'textbox', { name: bind } ) ).toHaveValue( 'Hello, World!' );
-	} );
-
-	it( 'should pass the updated payload when input value changes', () => {
-		// Arrange.
-		const element = { id: '1-heading' } as Element;
-		const bind = 'text';
-
-		// Act.
-		render(
-			<ElementContext element={ element }>
-				<SettingsControl bind={ bind }>
-					<MockControl />
-				</SettingsControl>
-			</ElementContext>
-		);
-
-		const input = screen.getByRole( 'textbox', { name: bind } );
-		const newValue = 'Goodbye, World!';
-
-		fireEvent.change( input, { target: { value: newValue } } );
-
-		// Assert.
-		expect( jest.mocked( updateSettings ) ).toHaveBeenCalledWith( {
-			id: element.id,
-			props: { [ bind ]: newValue },
-		} );
-	} );
-} );
-
-const MockControl = () => {
-	const { value, setValue, bind } = useControl< string >( '' );
-
-	const handleChange = ( event: React.ChangeEvent< HTMLInputElement > ) => {
-		setValue( event.target.value );
-	};
-
-	return <input type="text" aria-label={ bind } value={ value } onChange={ handleChange } />;
-};