@elementor/editor-editing-panel 4.3.0-1060 → 4.3.0-1062

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elementor/editor-editing-panel",
-  "version": "4.3.0-1060",
+  "version": "4.3.0-1062",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -39,31 +39,31 @@
     "dev": "tsup --config=../../tsup.dev.ts"
   },
   "dependencies": {
-    "@elementor/editor": "4.3.0-1060",
-    "@elementor/editor-canvas": "4.3.0-1060",
-    "@elementor/editor-controls": "4.3.0-1060",
-    "@elementor/editor-documents": "4.3.0-1060",
-    "@elementor/editor-elements": "4.3.0-1060",
-    "@elementor/editor-interactions": "4.3.0-1060",
-    "@elementor/editor-notifications": "4.3.0-1060",
-    "@elementor/editor-panels": "4.3.0-1060",
-    "@elementor/editor-props": "4.3.0-1060",
-    "@elementor/editor-responsive": "4.3.0-1060",
-    "@elementor/editor-styles": "4.3.0-1060",
-    "@elementor/editor-styles-repository": "4.3.0-1060",
-    "@elementor/editor-ui": "4.3.0-1060",
-    "@elementor/editor-v1-adapters": "4.3.0-1060",
-    "@elementor/http-client": "4.3.0-1060",
+    "@elementor/editor": "4.3.0-1062",
+    "@elementor/editor-canvas": "4.3.0-1062",
+    "@elementor/editor-controls": "4.3.0-1062",
+    "@elementor/editor-documents": "4.3.0-1062",
+    "@elementor/editor-elements": "4.3.0-1062",
+    "@elementor/editor-interactions": "4.3.0-1062",
+    "@elementor/editor-notifications": "4.3.0-1062",
+    "@elementor/editor-panels": "4.3.0-1062",
+    "@elementor/editor-props": "4.3.0-1062",
+    "@elementor/editor-responsive": "4.3.0-1062",
+    "@elementor/editor-styles": "4.3.0-1062",
+    "@elementor/editor-styles-repository": "4.3.0-1062",
+    "@elementor/editor-ui": "4.3.0-1062",
+    "@elementor/editor-v1-adapters": "4.3.0-1062",
+    "@elementor/http-client": "4.3.0-1062",
     "@elementor/icons": "~1.75.1",
-    "@elementor/editor-variables": "4.3.0-1060",
-    "@elementor/locations": "4.3.0-1060",
-    "@elementor/menus": "4.3.0-1060",
-    "@elementor/query": "4.3.0-1060",
-    "@elementor/schema": "4.3.0-1060",
-    "@elementor/session": "4.3.0-1060",
+    "@elementor/editor-variables": "4.3.0-1062",
+    "@elementor/locations": "4.3.0-1062",
+    "@elementor/menus": "4.3.0-1062",
+    "@elementor/query": "4.3.0-1062",
+    "@elementor/schema": "4.3.0-1062",
+    "@elementor/session": "4.3.0-1062",
     "@elementor/ui": "1.37.5",
-    "@elementor/utils": "4.3.0-1060",
-    "@elementor/wp-media": "4.3.0-1060",
+    "@elementor/utils": "4.3.0-1062",
+    "@elementor/wp-media": "4.3.0-1062",
     "@wordpress/i18n": "^5.13.0"
   },
   "peerDependencies": {

package/src/controls-registry/element-controls/list-items-control/list-actions.ts

@@ -0,0 +1,129 @@
+import { type ItemsActionPayload } from '@elementor/editor-controls';
+import {
+	createElements,
+	duplicateElements,
+	getContainer,
+	moveElements,
+	removeElements,
+} from '@elementor/editor-elements';
+import { booleanPropTypeUtil } from '@elementor/editor-props';
+import { __ } from '@wordpress/i18n';
+
+export type ListItem = {
+	id: string;
+	title?: string;
+};
+
+export const LIST_ITEM_ELEMENT_TYPE = 'e-list-item';
+
+const TRAILING_NUMBER = /(\d+)\s*$/;
+
+const getItemTitle = ( position: number ) => `Item ${ position }`;
+
+const getNextItemNumber = ( existingTitles: ( string | undefined )[] ) => {
+	const taken = new Set( existingTitles.filter( ( title ): title is string => Boolean( title ) ) );
+
+	const highest = existingTitles.reduce( ( max: number, title ) => {
+		const [ , trailingNumber ] = title?.match( TRAILING_NUMBER ) ?? [];
+		const parsed = trailingNumber ? Number( trailingNumber ) : 0;
+
+		return Number.isFinite( parsed ) && parsed > max ? parsed : max;
+	}, 0 );
+
+	let next = highest + 1;
+
+	while ( taken.has( getItemTitle( next ) ) ) {
+		next += 1;
+	}
+
+	return next;
+};
+
+export const duplicateItem = ( { items }: { items: ItemsActionPayload< ListItem > } ) => {
+	duplicateElements( {
+		elementIds: items.map( ( { item } ) => item.id ),
+		title: __( 'Duplicate List Item', 'elementor' ),
+	} );
+};
+
+export const moveItem = ( {
+	toIndex,
+	listContainerId,
+	movedElementId,
+}: {
+	toIndex: number;
+	listContainerId: string;
+	movedElementId: string;
+} ) => {
+	const movedElement = getContainer( movedElementId );
+	const listContainer = getContainer( listContainerId );
+
+	if ( ! movedElement || ! listContainer ) {
+		throw new Error( 'List item or list container not found' );
+	}
+
+	moveElements( {
+		title: __( 'Reorder List Items', 'elementor' ),
+		moves: [
+			{
+				element: movedElement,
+				targetContainer: listContainer,
+				options: { at: toIndex },
+			},
+		],
+	} );
+};
+
+export const removeItem = ( { items }: { items: ItemsActionPayload< ListItem > } ) => {
+	removeElements( {
+		title: __( 'List Items', 'elementor' ),
+		elementIds: items.map( ( { item } ) => item.id ),
+	} );
+};
+
+export const addItem = ( {
+	existingTitles,
+	listContainerId,
+	items,
+	showMarkers,
+}: {
+	existingTitles: ( string | undefined )[];
+	listContainerId: string;
+	items: ItemsActionPayload< ListItem >;
+	showMarkers: boolean;
+} ) => {
+	const listContainer = getContainer( listContainerId );
+
+	if ( ! listContainer ) {
+		throw new Error( 'List container not found' );
+	}
+
+	const titles = [ ...existingTitles ];
+
+	items.forEach( ( { index } ) => {
+		const position = getNextItemNumber( titles );
+
+		createElements( {
+			title: __( 'List Items', 'elementor' ),
+			elements: [
+				{
+					container: listContainer,
+					model: {
+						elType: LIST_ITEM_ELEMENT_TYPE,
+						settings: {
+							show_markers: booleanPropTypeUtil.create( showMarkers ),
+						},
+						hydrateDefaultChildren: true,
+						editor_settings: {
+							title: getItemTitle( position ),
+							initial_position: position,
+						},
+					},
+					options: { at: index },
+				},
+			],
+		} );
+
+		titles.push( getItemTitle( position ) );
+	} );
+};

package/src/controls-registry/element-controls/list-items-control/list-items-control.tsx

@@ -0,0 +1,152 @@
+import * as React from 'react';
+import { ControlFormLabel, Repeater, type RepeaterItem, type SetRepeaterValuesMeta } from '@elementor/editor-controls';
+import { updateElementEditorSettings, useElementChildren, useElementEditorSettings } from '@elementor/editor-elements';
+import { booleanPropTypeUtil, type CreateOptions } from '@elementor/editor-props';
+import { Stack, TextField } from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+
+import { useElement } from '../../../contexts/element-context';
+import { addItem, duplicateItem, LIST_ITEM_ELEMENT_TYPE, type ListItem, moveItem, removeItem } from './list-actions';
+import { useShowMarkersWriteThrough } from './use-show-markers-write-through';
+
+const LIST_ELEMENT_TYPE = 'e-list';
+
+const getEffectiveListItemLabel = ( label: string | undefined, fallbackLabel: string ) => {
+	return label?.trim() ? label : fallbackLabel;
+};
+
+const getDefaultListItemLabel = ( index: number ) => {
+	return `Item ${ index + 1 }`;
+};
+
+export const ListItemsControl = ( { label }: { label: string } ) => {
+	return <ListItemsControlContent label={ label } />;
+};
+
+const ListItemsControlContent = ( { label }: { label: string } ) => {
+	const { element, settings } = useElement();
+	const { [ LIST_ITEM_ELEMENT_TYPE ]: listItems } = useElementChildren(
+		element.id,
+		{ [ LIST_ELEMENT_TYPE ]: LIST_ITEM_ELEMENT_TYPE },
+		{ includeSelfAsParent: true }
+	);
+	// The root owns `show_markers`, but each child item needs a mirrored copy for its own
+	// `Child_Dependency`, so the repeater hosts the write-through that keeps those values undoable.
+	const showMarkers = booleanPropTypeUtil.extract( settings.show_markers ) ?? true;
+
+	useShowMarkersWriteThrough( element.id, showMarkers );
+
+	const repeaterValues: RepeaterItem< ListItem >[] = listItems.map( ( item, index ) => ( {
+		id: item.id,
+		title: item.editorSettings?.title ?? getDefaultListItemLabel( index ),
+		index,
+	} ) );
+
+	const setValue = (
+		_newValues: RepeaterItem< ListItem >[],
+		_options: CreateOptions,
+		meta?: SetRepeaterValuesMeta< RepeaterItem< ListItem > >
+	) => {
+		if ( meta?.action?.type === 'add' ) {
+			return addItem( {
+				existingTitles: repeaterValues.map( ( { title } ) => title ),
+				listContainerId: element.id,
+				items: meta.action.payload,
+				showMarkers,
+			} );
+		}
+
+		if ( meta?.action?.type === 'remove' ) {
+			return removeItem( { items: meta.action.payload } );
+		}
+
+		if ( meta?.action?.type === 'duplicate' ) {
+			return duplicateItem( { items: meta.action.payload } );
+		}
+
+		if ( meta?.action?.type === 'reorder' ) {
+			const { from, to } = meta.action.payload;
+
+			return moveItem( {
+				toIndex: to,
+				listContainerId: element.id,
+				movedElementId: listItems[ from ].id,
+			} );
+		}
+	};
+
+	return (
+		<Repeater
+			showToggle={ false }
+			values={ repeaterValues }
+			setValues={ setValue }
+			showRemove={ repeaterValues.length > 1 }
+			label={ label }
+			// List items are child elements, not a prop on the root, so there is nothing meaningful
+			// to expose or bind here. Using an unrelated prop key just to satisfy adornment context
+			// makes the panel act as if that real prop belongs to this repeater.
+			adornment={ () => null }
+			itemSettings={ {
+				getId: ( { item } ) => item.id,
+				initialValues: { id: '', title: 'Item' },
+				Label: ItemLabel,
+				Content: ItemContent,
+				Icon: () => null,
+			} }
+		/>
+	);
+};
+
+const ItemLabel = ( { value, index }: { value: ListItem; index: number } ) => {
+	const fallbackLabel = value.title ?? getDefaultListItemLabel( index );
+
+	return (
+		<Stack sx={ { minHeight: 20 } } direction="row" alignItems="center" gap={ 1.5 }>
+			{ value.id ? (
+				<ListItemRepeaterLabel elementId={ value.id } fallbackLabel={ fallbackLabel } />
+			) : (
+				<span>{ fallbackLabel }</span>
+			) }
+		</Stack>
+	);
+};
+
+const ItemContent = ( { value }: { value: ListItem } ) => {
+	if ( ! value.id ) {
+		return null;
+	}
+
+	return (
+		<Stack p={ 2 } gap={ 1.5 }>
+			<ListItemLabelControl elementId={ value.id } fallbackLabel={ value.title ?? '' } />
+		</Stack>
+	);
+};
+
+const ListItemRepeaterLabel = ( { elementId, fallbackLabel }: { elementId: string; fallbackLabel: string } ) => {
+	const editorSettings = useElementEditorSettings( elementId );
+	const label = getEffectiveListItemLabel( editorSettings?.title, fallbackLabel );
+
+	return <span>{ label }</span>;
+};
+
+const ListItemLabelControl = ( { elementId, fallbackLabel }: { elementId: string; fallbackLabel: string } ) => {
+	const editorSettings = useElementEditorSettings( elementId );
+	const label = getEffectiveListItemLabel( editorSettings?.title, fallbackLabel );
+
+	return (
+		<Stack gap={ 1 }>
+			<ControlFormLabel>{ __( 'Item name', 'elementor' ) }</ControlFormLabel>
+			<TextField
+				size="tiny"
+				value={ label }
+				onChange={ ( { target }: React.ChangeEvent< HTMLInputElement > ) => {
+					updateElementEditorSettings( {
+						elementId,
+						settings: { title: target.value },
+					} );
+				} }
+			/>
+		</Stack>
+	);
+};

package/src/controls-registry/element-controls/list-items-control/use-show-markers-write-through.ts

@@ -0,0 +1,89 @@
+import { useEffect, useRef } from 'react';
+import { getContainer, getElementSettings, updateElementSettings } from '@elementor/editor-elements';
+import { booleanPropTypeUtil } from '@elementor/editor-props';
+import { undoable } from '@elementor/editor-v1-adapters';
+import { __ } from '@wordpress/i18n';
+
+import { HISTORY_DEBOUNCE_WAIT } from '../../../hooks/use-styles-fields';
+import { LIST_ITEM_ELEMENT_TYPE } from './list-actions';
+
+type CascadeShowMarkersPayload = {
+	listId: string;
+	showMarkers: boolean;
+};
+
+type CascadeShowMarkersResult = {
+	previous: Record< string, ReturnType< typeof booleanPropTypeUtil.create > | null | undefined >;
+};
+
+// `show_markers` lives on the root list, but each `e-list-item` also carries a mirrored copy so its
+// own `Child_Dependency` can attach/detach the marker child. This write-through keeps those mirrored
+// props in sync through a debounced undoable history entry so Undo restores the switch and all items.
+export const cascadeShowMarkersToItems = undoable< CascadeShowMarkersPayload, CascadeShowMarkersResult, undefined >(
+	{
+		do: ( { listId, showMarkers } ) => {
+			const itemIds = getListItemIds( listId );
+
+			const previous = Object.fromEntries(
+				itemIds.map(
+					( itemId ) =>
+						[
+							itemId,
+							getElementSettings< ReturnType< typeof booleanPropTypeUtil.create > >( itemId, [
+								'show_markers',
+							] ).show_markers,
+						] as const
+				)
+			);
+
+			itemIds.forEach( ( itemId ) => {
+				updateElementSettings( {
+					id: itemId,
+					props: { show_markers: booleanPropTypeUtil.create( showMarkers ) },
+					withHistory: false,
+				} );
+			} );
+
+			return { previous };
+		},
+		undo: ( _payload, { previous } ) => {
+			Object.entries( previous ).forEach( ( [ itemId, previousValue ] ) => {
+				updateElementSettings( {
+					id: itemId,
+					props: { show_markers: previousValue ?? null },
+					withHistory: false,
+				} );
+			} );
+		},
+	},
+	{
+		title: __( 'List', 'elementor' ),
+		subtitle: __( 'Show Markers', 'elementor' ),
+		debounce: { wait: HISTORY_DEBOUNCE_WAIT },
+	}
+);
+
+function getListItemIds( listId: string ): string[] {
+	const list = getContainer( listId );
+
+	const itemContainers = ( list?.children ?? [] ).filter(
+		( child ) => child.model.get( 'elType' ) === LIST_ITEM_ELEMENT_TYPE
+	);
+
+	return itemContainers.map( ( item ): string => item.id );
+}
+
+export function useShowMarkersWriteThrough( listId: string, showMarkers: boolean ): void {
+	const previousRef = useRef< { listId: string; showMarkers: boolean } | null >( null );
+
+	useEffect( () => {
+		const previous = previousRef.current;
+		previousRef.current = { listId, showMarkers };
+
+		if ( ! previous || previous.listId !== listId || previous.showMarkers === showMarkers ) {
+			return;
+		}
+
+		cascadeShowMarkersToItems( { listId, showMarkers } );
+	}, [ listId, showMarkers ] );
+}

package/src/controls-registry/element-controls/registry.ts

@@ -2,9 +2,11 @@ import { type ControlComponent } from '@elementor/editor-controls';
 
 import { type ControlRegistry, controlsRegistry } from '../controls-registry';
 import { AccordionItemsControl } from './accordion-items-control/accordion-items-control';
+import { ListItemsControl } from './list-items-control/list-items-control';
 import { TabsControl } from './tabs-control/tabs-control';
 
 const controlTypes = {
+	'list-items': { component: ListItemsControl as ControlComponent, layout: 'full' },
 	tabs: { component: TabsControl as ControlComponent, layout: 'full' },
 	'accordion-items': { component: AccordionItemsControl as ControlComponent, layout: 'full' },
 } as const satisfies ControlRegistry;