@elementor/editor-components 3.35.0-341 → 3.35.0-342

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@elementor/editor-components",
   "description": "Elementor editor components",
-  "version": "3.35.0-341",
+  "version": "3.35.0-342",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -40,28 +40,29 @@
     "dev": "tsup --config=../../tsup.dev.ts"
   },
   "dependencies": {
-    "@elementor/editor": "3.35.0-341",
-    "@elementor/editor-canvas": "3.35.0-341",
-    "@elementor/editor-controls": "3.35.0-341",
-    "@elementor/editor-documents": "3.35.0-341",
-    "@elementor/editor-editing-panel": "3.35.0-341",
-    "@elementor/editor-elements": "3.35.0-341",
-    "@elementor/editor-elements-panel": "3.35.0-341",
-    "@elementor/editor-mcp": "3.35.0-341",
-    "@elementor/editor-props": "3.35.0-341",
-    "@elementor/editor-styles-repository": "3.35.0-341",
-    "@elementor/editor-ui": "3.35.0-341",
-    "@elementor/editor-v1-adapters": "3.35.0-341",
-    "@elementor/http-client": "3.35.0-341",
+    "@elementor/editor": "3.35.0-342",
+    "@elementor/editor-canvas": "3.35.0-342",
+    "@elementor/editor-controls": "3.35.0-342",
+    "@elementor/editor-documents": "3.35.0-342",
+    "@elementor/editor-editing-panel": "3.35.0-342",
+    "@elementor/editor-elements": "3.35.0-342",
+    "@elementor/editor-elements-panel": "3.35.0-342",
+    "@elementor/editor-mcp": "3.35.0-342",
+    "@elementor/editor-panels": "3.35.0-342",
+    "@elementor/editor-props": "3.35.0-342",
+    "@elementor/editor-styles-repository": "3.35.0-342",
+    "@elementor/editor-ui": "3.35.0-342",
+    "@elementor/editor-v1-adapters": "3.35.0-342",
+    "@elementor/http-client": "3.35.0-342",
     "@elementor/icons": "^1.62.0",
-    "@elementor/mixpanel": "3.35.0-341",
-    "@elementor/query": "3.35.0-341",
-    "@elementor/schema": "3.35.0-341",
-    "@elementor/store": "3.35.0-341",
+    "@elementor/mixpanel": "3.35.0-342",
+    "@elementor/query": "3.35.0-342",
+    "@elementor/schema": "3.35.0-342",
+    "@elementor/store": "3.35.0-342",
     "@elementor/ui": "1.36.17",
-    "@elementor/utils": "3.35.0-341",
+    "@elementor/utils": "3.35.0-342",
     "@wordpress/i18n": "^5.13.0",
-    "@elementor/editor-notifications": "3.35.0-341"
+    "@elementor/editor-notifications": "3.35.0-342"
   },
   "peerDependencies": {
     "react": "^18.3.1",

package/src/components/instance-editing-panel/empty-state.tsx

@@ -0,0 +1,35 @@
+import * as React from 'react';
+import { ComponentPropListIcon, PencilIcon } from '@elementor/icons';
+import { Button, Stack, Typography } from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+
+export const EmptyState = ( { onEditComponent }: { onEditComponent: () => void } ) => {
+	return (
+		<Stack
+			alignItems="center"
+			justifyContent="start"
+			height="100%"
+			color="text.secondary"
+			sx={ { p: 2.5, pt: 8, pb: 5.5, mt: 1 } }
+			gap={ 1.5 }
+		>
+			<ComponentPropListIcon fontSize="large" />
+
+			<Typography align="center" variant="subtitle2">
+				{ __( 'No properties yet', 'elementor' ) }
+			</Typography>
+
+			<Typography align="center" variant="caption" maxWidth="170px">
+				{ __(
+					'Edit the component to add properties, manage them or update the design across all instances.',
+					'elementor'
+				) }
+			</Typography>
+
+			<Button variant="outlined" color="secondary" size="small" sx={ { mt: 1 } } onClick={ onEditComponent }>
+				<PencilIcon fontSize="small" />
+				{ __( 'Edit component', 'elementor' ) }
+			</Button>
+		</Stack>
+	);
+};

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

@@ -0,0 +1,73 @@
+import * as React from 'react';
+import { useElement } from '@elementor/editor-editing-panel';
+import { useElementSetting, useSelectedElement } from '@elementor/editor-elements';
+import { PanelBody, PanelHeader, PanelHeaderTitle } from '@elementor/editor-panels';
+import { type NumberPropValue } from '@elementor/editor-props';
+import { ComponentsIcon, PencilIcon } from '@elementor/icons';
+import { __getState as getState } from '@elementor/store';
+import { IconButton, Stack, Tooltip } from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+
+import { componentInstancePropTypeUtil } from '../../prop-types/component-instance-prop-type';
+import { selectComponent, selectOverridableProps } from '../../store/store';
+import { type OverridablePropsGroup } from '../../types';
+import { switchToComponent } from '../../utils/switch-to-component';
+import { EmptyState } from './empty-state';
+import { OverridePropsGroup } from './override-props-group';
+
+export function InstanceEditingPanel() {
+	const { element } = useElement();
+	const settings = useElementSetting( element.id, 'component_instance' );
+	const componentId = ( componentInstancePropTypeUtil.extract( settings )?.component_id as NumberPropValue ).value;
+
+	const component = componentId ? selectComponent( getState(), componentId ) : null;
+	const overridableProps = componentId ? selectOverridableProps( getState(), componentId ) : null;
+
+	const componentInstanceId = useSelectedElement()?.element?.id ?? null;
+
+	if ( ! componentId || ! overridableProps || ! component ) {
+		return null;
+	}
+
+	/* translators: %s: component name. */
+	const panelTitle = __( 'Edit %s', 'elementor' ).replace( '%s', component.name );
+
+	const handleEditComponent = () => switchToComponent( componentId, componentInstanceId );
+
+	const groups = overridableProps.groups.order
+		.map( ( groupId ) =>
+			overridableProps.groups.items[ groupId ] ? overridableProps.groups.items[ groupId ] : null
+		)
+		.filter( Boolean ) as OverridablePropsGroup[];
+
+	const isEmpty = groups.length === 0 || Object.keys( overridableProps.props ).length === 0;
+
+	return (
+		<>
+			<PanelHeader sx={ { justifyContent: 'start' } }>
+				<Stack direction="row" alignContent="space-between" flexGrow={ 1 }>
+					<Stack direction="row" alignItems="center" justifyContent="start" gap={ 1 } flexGrow={ 1 }>
+						<ComponentsIcon fontSize="small" sx={ { color: 'text.tertiary' } } />
+						<PanelHeaderTitle>{ component.name }</PanelHeaderTitle>
+					</Stack>
+					<Tooltip title={ panelTitle }>
+						<IconButton size="tiny" onClick={ handleEditComponent } aria-label={ panelTitle }>
+							<PencilIcon fontSize="tiny" />
+						</IconButton>
+					</Tooltip>
+				</Stack>
+			</PanelHeader>
+			<PanelBody>
+				{ isEmpty ? (
+					<EmptyState onEditComponent={ handleEditComponent } />
+				) : (
+					<Stack direction="column" alignItems="stretch">
+						{ groups.map( ( group ) => (
+							<OverridePropsGroup key={ group.id } group={ group } props={ overridableProps.props } />
+						) ) }
+					</Stack>
+				) }
+			</PanelBody>
+		</>
+	);
+}

package/src/components/instance-editing-panel/override-props-group.tsx

@@ -0,0 +1,56 @@
+import * as React from 'react';
+import { useId } from 'react';
+import { useStateByElement } from '@elementor/editor-editing-panel';
+import { CollapseIcon } from '@elementor/editor-ui';
+import { Collapse, ListItemButton, ListItemText, Stack } from '@elementor/ui';
+
+import { type OverridableProp, type OverridablePropsGroup } from '../../types';
+
+type Props = {
+	group: OverridablePropsGroup;
+	props: Record< string, OverridableProp >;
+};
+
+export function OverridePropsGroup( { group, props }: Props ) {
+	const [ isOpen, setIsOpen ] = useStateByElement( group.id, true );
+
+	const handleClick = () => {
+		setIsOpen( ! isOpen );
+	};
+
+	const id = useId();
+	const labelId = `label-${ id }`;
+	const contentId = `content-${ id }`;
+
+	const title = group.label;
+
+	return (
+		<>
+			<ListItemButton
+				id={ labelId }
+				aria-controls={ contentId }
+				aria-label={ `${ title } section` }
+				onClick={ handleClick }
+				p={ 0 }
+				sx={ { '&:hover': { backgroundColor: 'transparent' } } }
+			>
+				<Stack direction="row" alignItems="center" justifyItems="start" flexGrow={ 1 } gap={ 0.5 }>
+					<ListItemText
+						secondary={ title }
+						secondaryTypographyProps={ { color: 'text.primary', variant: 'caption', fontWeight: 'bold' } }
+						sx={ { flexGrow: 0, flexShrink: 1, marginInlineEnd: 1 } }
+					/>
+				</Stack>
+				<CollapseIcon open={ isOpen } color="secondary" fontSize="tiny" />
+			</ListItemButton>
+			<Collapse id={ contentId } aria-labelledby={ labelId } in={ isOpen } timeout="auto">
+				<Stack direction="column" gap={ 1 } p={ 2 }>
+					{ group.props.map( ( propId ) => (
+						// TODO: Render actual controls
+						<pre key={ propId }>{ JSON.stringify( props[ propId ], null, 2 ) }</pre>
+					) ) }
+				</Stack>
+			</Collapse>
+		</>
+	);
+}

package/src/create-component-type.ts

@@ -8,11 +8,11 @@ import {
 	type LegacyWindow,
 } from '@elementor/editor-canvas';
 import { getCurrentDocument } from '@elementor/editor-documents';
-import { __privateRunCommand as runCommand } from '@elementor/editor-v1-adapters';
 import { __ } from '@wordpress/i18n';
 
 import { apiClient } from './api';
 import { type ComponentInstancePropValue, type ExtendedWindow } from './types';
+import { switchToComponent } from './utils/switch-to-component';
 import { trackComponentEvent } from './utils/tracking';
 
 type ContextMenuEventData = { location: string; secondaryLocation: string; trigger: string };
@@ -179,12 +179,7 @@ function createComponentView(
 			if ( ! isAllowedToSwitchDocument ) {
 				options.showLockedByModal?.( lockedBy || '' );
 			} else {
-				runCommand( 'editor/documents/switch', {
-					id: this.getComponentId(),
-					mode: 'autosave',
-					selector: `[data-id="${ this.model.get( 'id' ) }"]`,
-					shouldScroll: false,
-				} );
+				switchToComponent( this.getComponentId(), this.model.get( 'id' ) );
 			}
 		}
 

package/src/hooks/use-component-instance-settings.ts

@@ -0,0 +1,15 @@
+import { useElement } from '@elementor/editor-editing-panel';
+import { useElementSetting } from '@elementor/editor-elements';
+
+import {
+	componentInstancePropTypeUtil,
+	type ComponentInstancePropValue,
+} from '../prop-types/component-instance-prop-type';
+
+export function useComponentInstanceSettings() {
+	const { element } = useElement();
+
+	const settings = useElementSetting< ComponentInstancePropValue >( element.id, 'component_instance' );
+
+	return componentInstancePropTypeUtil.extract( settings );
+}

package/src/hooks/use-navigate-back.ts

@@ -1,9 +1,9 @@
 import { useCallback } from 'react';
 import { getV1DocumentsManager } from '@elementor/editor-documents';
-import { __privateRunCommand as runCommand } from '@elementor/editor-v1-adapters';
 import { __useSelector as useSelector } from '@elementor/store';
 
 import { selectPath } from '../store/store';
+import { switchToComponent } from '../utils/switch-to-component';
 
 export function useNavigateBack() {
 	const path = useSelector( selectPath );
@@ -13,22 +13,12 @@ export function useNavigateBack() {
 	return useCallback( () => {
 		const { componentId: prevComponentId, instanceId: prevComponentInstanceId } = path.at( -2 ) ?? {};
 
-		const switchToDocument = ( id: number, selector?: string ) => {
-			runCommand( 'editor/documents/switch', {
-				id,
-				selector,
-				mode: 'autosave',
-				setAsInitial: false,
-				shouldScroll: false,
-			} );
-		};
-
 		if ( prevComponentId && prevComponentInstanceId ) {
-			switchToDocument( prevComponentId, `[data-id="${ prevComponentInstanceId }"]` );
+			switchToComponent( prevComponentId, prevComponentInstanceId );
 
 			return;
 		}
 
-		switchToDocument( documentsManager.getInitialId() );
+		switchToComponent( documentsManager.getInitialId() );
 	}, [ path, documentsManager ] );
 }

package/src/init.ts

@@ -9,6 +9,7 @@ import {
 	FIELD_TYPE,
 	injectIntoPanelHeaderTop,
 	registerControlReplacement,
+	registerEditingPanelReplacement,
 	registerFieldIndicator,
 } from '@elementor/editor-editing-panel';
 import { type V1ElementData } from '@elementor/editor-elements';
@@ -26,6 +27,7 @@ import { COMPONENT_DOCUMENT_TYPE } from './components/consts';
 import { CreateComponentForm } from './components/create-component-form/create-component-form';
 import { EditComponent } from './components/edit-component/edit-component';
 import { openEditModeDialog } from './components/in-edit-mode';
+import { InstanceEditingPanel } from './components/instance-editing-panel/instance-editing-panel';
 import { OverridablePropControl } from './components/overridable-props/overridable-prop-control';
 import { OverridablePropIndicator } from './components/overridable-props/overridable-prop-indicator';
 import { createComponentType, TYPE } from './create-component-type';
@@ -109,6 +111,12 @@ export function init() {
 		condition: ( { value } ) => componentOverridablePropTypeUtil.isValid( value ),
 	} );
 
+	registerEditingPanelReplacement( {
+		id: 'component-instance-edit-panel',
+		condition: ( _, elementType ) => elementType.key === 'e-component',
+		component: InstanceEditingPanel,
+	} );
+
 	settingsTransformersRegistry.register( 'component-instance', componentInstanceTransformer );
 	settingsTransformersRegistry.register( 'overridable', componentOverridableTransformer );
 

package/src/prop-types/component-instance-override-prop-type.ts

@@ -0,0 +1,18 @@
+import { createPropUtils } from '@elementor/editor-props';
+import { z } from '@elementor/schema';
+
+export const componentInstanceOverridePropTypeUtil = createPropUtils(
+	'override',
+	z.object( {
+		override_key: z.string(),
+		override_value: z.unknown(),
+		schema_source: z.object( {
+			type: z.literal( 'component' ),
+			id: z.number(),
+		} ),
+	} )
+);
+
+export type ComponentInstanceOverridePropValue = z.infer<
+	typeof componentInstanceOverridePropTypeUtil.schema
+>[ 'value' ];

package/src/prop-types/component-instance-overrides-prop-type.ts

@@ -0,0 +1,13 @@
+import { createPropUtils } from '@elementor/editor-props';
+import { z } from '@elementor/schema';
+
+import { componentInstanceOverridePropTypeUtil } from './component-instance-override-prop-type';
+
+export const componentInstanceOverridesPropTypeUtil = createPropUtils(
+	'overrides',
+	z.array( componentInstanceOverridePropTypeUtil.schema )
+);
+
+export type ComponentInstanceOverridesPropValue = z.infer<
+	typeof componentInstanceOverridesPropTypeUtil.schema
+>[ 'value' ];

package/src/prop-types/component-instance-prop-type.ts

@@ -0,0 +1,14 @@
+import { createPropUtils, numberPropTypeUtil } from '@elementor/editor-props';
+import { z } from '@elementor/schema';
+
+import { componentInstanceOverridesPropTypeUtil } from './component-instance-overrides-prop-type';
+
+export const componentInstancePropTypeUtil = createPropUtils(
+	'component-instance',
+	z.object( {
+		component_id: numberPropTypeUtil.schema,
+		overrides: componentInstanceOverridesPropTypeUtil.schema,
+	} )
+);
+
+export type ComponentInstancePropValue = z.infer< typeof componentInstancePropTypeUtil.schema >[ 'value' ];

package/src/store/store.ts

@@ -133,7 +133,7 @@ const selectUnpublishedData = ( state: ComponentsSlice ) => state[ SLICE_NAME ].
 const getCreatedThisSession = ( state: ComponentsSlice ) => state[ SLICE_NAME ].createdThisSession;
 const getPath = ( state: ComponentsSlice ) => state[ SLICE_NAME ].path;
 const getCurrentComponentId = ( state: ComponentsSlice ) => state[ SLICE_NAME ].currentComponentId;
-const selectComponent = ( state: ComponentsSlice, componentId: ComponentId ) =>
+export const selectComponent = ( state: ComponentsSlice, componentId: ComponentId ) =>
 	state[ SLICE_NAME ].data.find( ( component ) => component.id === componentId );
 
 export const selectComponents = createSelector(

package/src/utils/switch-to-component.ts

@@ -0,0 +1,11 @@
+import { __privateRunCommand as runCommand } from '@elementor/editor-v1-adapters';
+
+export function switchToComponent( componentId: number | string, componentInstanceId?: string | null ) {
+	runCommand( 'editor/documents/switch', {
+		id: componentId,
+		selector: componentInstanceId ? `[data-id="${ componentInstanceId }"]` : undefined,
+		mode: 'autosave',
+		setAsInitial: false,
+		shouldScroll: false,
+	} );
+}