@elementor/editor-editing-panel 4.3.0-1048 → 4.3.0-1049

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elementor/editor-editing-panel",
-  "version": "4.3.0-1048",
+  "version": "4.3.0-1049",
   "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-1048",
-    "@elementor/editor-canvas": "4.3.0-1048",
-    "@elementor/editor-controls": "4.3.0-1048",
-    "@elementor/editor-documents": "4.3.0-1048",
-    "@elementor/editor-elements": "4.3.0-1048",
-    "@elementor/editor-interactions": "4.3.0-1048",
-    "@elementor/editor-notifications": "4.3.0-1048",
-    "@elementor/editor-panels": "4.3.0-1048",
-    "@elementor/editor-props": "4.3.0-1048",
-    "@elementor/editor-responsive": "4.3.0-1048",
-    "@elementor/editor-styles": "4.3.0-1048",
-    "@elementor/editor-styles-repository": "4.3.0-1048",
-    "@elementor/editor-ui": "4.3.0-1048",
-    "@elementor/editor-v1-adapters": "4.3.0-1048",
-    "@elementor/http-client": "4.3.0-1048",
+    "@elementor/editor": "4.3.0-1049",
+    "@elementor/editor-canvas": "4.3.0-1049",
+    "@elementor/editor-controls": "4.3.0-1049",
+    "@elementor/editor-documents": "4.3.0-1049",
+    "@elementor/editor-elements": "4.3.0-1049",
+    "@elementor/editor-interactions": "4.3.0-1049",
+    "@elementor/editor-notifications": "4.3.0-1049",
+    "@elementor/editor-panels": "4.3.0-1049",
+    "@elementor/editor-props": "4.3.0-1049",
+    "@elementor/editor-responsive": "4.3.0-1049",
+    "@elementor/editor-styles": "4.3.0-1049",
+    "@elementor/editor-styles-repository": "4.3.0-1049",
+    "@elementor/editor-ui": "4.3.0-1049",
+    "@elementor/editor-v1-adapters": "4.3.0-1049",
+    "@elementor/http-client": "4.3.0-1049",
     "@elementor/icons": "~1.75.1",
-    "@elementor/editor-variables": "4.3.0-1048",
-    "@elementor/locations": "4.3.0-1048",
-    "@elementor/menus": "4.3.0-1048",
-    "@elementor/query": "4.3.0-1048",
-    "@elementor/schema": "4.3.0-1048",
-    "@elementor/session": "4.3.0-1048",
+    "@elementor/editor-variables": "4.3.0-1049",
+    "@elementor/locations": "4.3.0-1049",
+    "@elementor/menus": "4.3.0-1049",
+    "@elementor/query": "4.3.0-1049",
+    "@elementor/schema": "4.3.0-1049",
+    "@elementor/session": "4.3.0-1049",
     "@elementor/ui": "1.37.5",
-    "@elementor/utils": "4.3.0-1048",
-    "@elementor/wp-media": "4.3.0-1048",
+    "@elementor/utils": "4.3.0-1049",
+    "@elementor/wp-media": "4.3.0-1049",
     "@wordpress/i18n": "^5.13.0"
   },
   "peerDependencies": {

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

@@ -0,0 +1,141 @@
+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 { ACCORDION_ELEMENT_TYPE, ACCORDION_ITEM_ELEMENT_TYPE, type AccordionItem, useActions } from './use-actions';
+import { useShowIconWriteThrough } from './use-show-icon-write-through';
+
+export const AccordionItemsControl = ( { label }: { label: string } ) => {
+	const { element, settings } = useElement();
+	const { addItem, duplicateItem, moveItem, removeItem } = useActions();
+
+	// Items are direct children of the root, so the root itself is the parent to read them from —
+	// there is no menu / content-area indirection as in Tabs.
+	const { [ ACCORDION_ITEM_ELEMENT_TYPE ]: items } = useElementChildren(
+		element.id,
+		{ [ ACCORDION_ELEMENT_TYPE ]: ACCORDION_ITEM_ELEMENT_TYPE },
+		{ includeSelfAsParent: true }
+	);
+
+	// The root's `show_icon` (rendered elsewhere in this same "Content" section via the standard
+	// `Switch_Control` -> `SettingsField` pipeline). Read here, alongside the repeater, purely to
+	// drive the write-through to every head - see `useShowIconWriteThrough` for why this can't live
+	// inside the generic switch control itself.
+	const showIcon = booleanPropTypeUtil.extract( settings.show_icon ) ?? true;
+
+	useShowIconWriteThrough( element.id, showIcon );
+
+	const repeaterValues: RepeaterItem< AccordionItem >[] = items.map( ( item, index ) => {
+		return {
+			id: item.id,
+			title: item.editorSettings?.title,
+			index,
+		};
+	} );
+
+	const setValue = (
+		_newValues: RepeaterItem< AccordionItem >[],
+		_options: CreateOptions,
+		meta?: SetRepeaterValuesMeta< RepeaterItem< AccordionItem > >
+	) => {
+		if ( meta?.action?.type === 'add' ) {
+			return addItem( {
+				accordionId: element.id,
+				// The new item's number comes from the titles already in use, not from the item count -
+				// see `getNextItemNumber`.
+				existingTitles: repeaterValues.map( ( { title } ) => title ),
+				items: meta.action.payload,
+				showIcon,
+			} );
+		}
+
+		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( {
+				accordionId: element.id,
+				movedElementId: items[ from ].id,
+				toIndex: to,
+			} );
+		}
+	};
+
+	return (
+		<Repeater
+			showToggle={ false }
+			values={ repeaterValues }
+			setValues={ setValue }
+			showRemove={ repeaterValues.length > 1 }
+			label={ label }
+			// Accordion items are element children, not a prop on the root, so this repeater has no
+			// prop of its own to bind to - and the default adornments include the component
+			// "expose property" indicator, which reads whatever prop key is in context. Wrapping the
+			// repeater in a `SettingsField` just to give that indicator a context (the way Tabs does
+			// with `default-active-tab`) made exposing "Accordion Items" write the overridable wrapper
+			// into `default_state`, so the Default State toggle - the real owner of that key - turned
+			// exposed at the same time. Nothing here is exposable, hence no adornments at all.
+			adornment={ () => null }
+			itemSettings={ {
+				getId: ( { item } ) => item.id,
+				initialValues: { id: '', title: __( 'Accordion Item', 'elementor' ) },
+				Label: ItemLabel,
+				Content: ItemContent,
+				Icon: () => null,
+			} }
+		/>
+	);
+};
+
+const ItemLabel = ( { value }: { value: AccordionItem } ) => {
+	return (
+		<Stack sx={ { minHeight: 20 } } direction="row" alignItems="center" gap={ 1.5 }>
+			<span>{ value?.title }</span>
+		</Stack>
+	);
+};
+
+const ItemContent = ( { value }: { value: AccordionItem } ) => {
+	if ( ! value.id ) {
+		return null;
+	}
+
+	return (
+		<Stack p={ 2 } gap={ 1.5 }>
+			<ItemNameControl elementId={ value.id } />
+		</Stack>
+	);
+};
+
+const ItemNameControl = ( { elementId }: { elementId: string } ) => {
+	const editorSettings = useElementEditorSettings( elementId );
+
+	const label = editorSettings?.title ?? '';
+
+	return (
+		<Stack gap={ 1 }>
+			<ControlFormLabel>{ __( '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/accordion-items-control/use-actions.ts

@@ -0,0 +1,235 @@
+import { type ItemsActionPayload } from '@elementor/editor-controls';
+import {
+	type CreateElementParams,
+	createElements,
+	duplicateElements,
+	generateElementId,
+	getContainer,
+	moveElements,
+	removeElements,
+	type V1ElementData,
+} from '@elementor/editor-elements';
+import { booleanPropTypeUtil, escapedHtmlPropTypeUtil } from '@elementor/editor-props';
+import { __, sprintf } from '@wordpress/i18n';
+
+export type AccordionItem = {
+	id: string;
+	title?: string;
+};
+
+export const ACCORDION_ELEMENT_TYPE = 'e-accordion';
+export const ACCORDION_ITEM_ELEMENT_TYPE = 'e-accordion-item';
+
+const ACCORDION_ITEM_HEADER_ELEMENT_TYPE = 'e-accordion-item-header';
+const ACCORDION_ITEM_TITLE_ELEMENT_TYPE = 'e-accordion-item-title';
+const ACCORDION_ITEM_ICON_ELEMENT_TYPE = 'e-accordion-item-icon';
+const ACCORDION_ITEM_CONTENT_ELEMENT_TYPE = 'e-accordion-item-content';
+const PARAGRAPH_WIDGET_TYPE = 'e-paragraph';
+
+const getItemTitle = ( position: number ) =>
+	/* translators: %d: Accordion item position. */
+	sprintf( __( 'Accordion Item %d', 'elementor' ), position );
+
+const TRAILING_NUMBER = /(\d+)\s*$/;
+
+// Picks the number for a newly added item from the titles that exist right now, never from how many
+// items there are.
+//
+// The Repeater's add action reports `index = items.length`, i.e. the current visible count. Deriving
+// the number from that collides after a delete: remove "Accordion Item 1" from the default pair and
+// the count drops to 1, so the next add would be numbered 2 — a duplicate of the surviving
+// "Accordion Item 2". The number is not just a Structure-panel label, it is baked into the item's
+// rendered paragraph, so the canvas would show two identical headers.
+//
+// Taking `max( trailing number of each existing title ) + 1` keeps the surviving item in view when
+// the number is chosen, which is what fixes that case. The final loop then guarantees the property
+// we actually care about — the new title differs from every title currently present — even when a
+// user has renamed items by hand. It cannot know about numbers used by items that were already
+// deleted, so a delete-the-highest-then-add sequence can still reuse a number; that reuse is never a
+// visible duplicate, which is the failure that matters.
+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;
+};
+
+// Builds one `e-accordion-item` subtree, mirroring `Atomic_Accordion::build_default_item()`.
+//
+// Each level of an atomic element's default children is hydrated independently
+// (`AtomicElementBaseModel.onElementCreate()`), so the title slot's own defaults cannot know which
+// item they belong to and would render an unnumbered "Accordion Item". Spelling the
+// item -> header -> title -> paragraph chain out here is what lets the numbered text reach the
+// rendered paragraph, exactly as the default two-item tree does. The icon and content branches need
+// no per-index content, so they keep hydrating their own defaults.
+//
+// `V1ElementData` is the plain-object form of a model tree: nested `elements` are objects that
+// Backbone turns into models on `initialize`, and ids have to be generated here because only the
+// outermost model gets one from `document/elements/create`.
+const buildItemModel = ( position: number, showIcon: boolean ): V1ElementData => {
+	const numberedTitle = getItemTitle( position );
+
+	return {
+		elType: ACCORDION_ITEM_ELEMENT_TYPE,
+		id: generateElementId(),
+		editor_settings: { title: numberedTitle, initial_position: position },
+		elements: [
+			{
+				elType: ACCORDION_ITEM_HEADER_ELEMENT_TYPE,
+				id: generateElementId(),
+				editor_settings: { title: __( 'Header', 'elementor' ) },
+				// Seeded from the root's *current* `show_icon` value, not the schema default: if a user
+				// has already turned Show Icon off, a newly added item must start with its icon hidden
+				// too, not re-show one just because the item itself is brand new. See the comment on
+				// the mirrored prop in `Atomic_Accordion_Item_Header` for why this duplication exists.
+				settings: { show_icon: booleanPropTypeUtil.create( showIcon ) },
+				elements: [
+					{
+						elType: ACCORDION_ITEM_TITLE_ELEMENT_TYPE,
+						id: generateElementId(),
+						editor_settings: { title: __( 'Title', 'elementor' ) },
+						elements: [
+							{
+								elType: 'widget',
+								widgetType: PARAGRAPH_WIDGET_TYPE,
+								id: generateElementId(),
+								// A leaf still needs an explicit empty `elements`: `ElementModel.initialize()` only
+								// turns the attribute into a collection when it is defined, and v1 code walking a
+								// subtree (`deselectRecursive()` on delete) calls `.forEach()` on it unguarded.
+								elements: [],
+								settings: {
+									paragraph: escapedHtmlPropTypeUtil.create( numberedTitle ),
+									tag: { $$type: 'string', value: 'span' },
+								},
+							},
+						],
+					},
+					{
+						elType: ACCORDION_ITEM_ICON_ELEMENT_TYPE,
+						id: generateElementId(),
+						editor_settings: { title: __( 'Icon', 'elementor' ) },
+						elements: [],
+						hydrateDefaultChildren: true,
+					},
+				],
+			},
+			{
+				elType: ACCORDION_ITEM_CONTENT_ELEMENT_TYPE,
+				id: generateElementId(),
+				editor_settings: { title: __( 'Content', 'elementor' ) },
+				elements: [],
+				hydrateDefaultChildren: true,
+			},
+		],
+	};
+};
+
+export const useActions = () => {
+	const addItem = ( {
+		accordionId,
+		existingTitles,
+		items,
+		showIcon,
+	}: {
+		accordionId: string;
+		existingTitles: ( string | undefined )[];
+		items: ItemsActionPayload< AccordionItem >;
+		// The root's *current* `show_icon` value, so the new item's header starts in sync with it
+		// instead of the schema default - see the comment on `buildItemModel`.
+		showIcon: boolean;
+	} ) => {
+		const accordion = getContainer( accordionId );
+
+		if ( ! accordion ) {
+			throw new Error( 'Accordion container not found' );
+		}
+
+		// Grows as we go, so adding several items in one action can't hand out the same number twice.
+		const titles = [ ...existingTitles ];
+
+		items.forEach( () => {
+			const position = getNextItemNumber( titles );
+
+			createElements( {
+				title: __( 'Accordion', 'elementor' ),
+				elements: [
+					{
+						container: accordion,
+						// `buildItemModel()` returns `V1ElementData`, whose `elements` field is plain nested
+						// data (`V1ElementData[]`) - correct for a tree we're constructing to send as a
+						// creation payload. `CreateElementParams['model']` is derived from
+						// `V1ElementModelProps`, whose `elements` field is typed as `V1Model<...>[]` - live
+						// Backbone-model wrappers with `get`/`set`/`toJSON`, the shape for reading an
+						// *existing* element out of the document, not for describing one to create. A single
+						// cast is enough (the two types overlap enough for TS to allow it directly); no
+						// `unknown` escape hatch needed.
+						model: buildItemModel( position, showIcon ) as CreateElementParams[ 'model' ],
+					},
+				],
+			} );
+
+			titles.push( getItemTitle( position ) );
+		} );
+	};
+
+	const removeItem = ( { items }: { items: ItemsActionPayload< AccordionItem > } ) => {
+		removeElements( {
+			title: __( 'Accordion', 'elementor' ),
+			elementIds: items.map( ( { item } ) => item.id ),
+		} );
+	};
+
+	const duplicateItem = ( { items }: { items: ItemsActionPayload< AccordionItem > } ) => {
+		duplicateElements( {
+			title: __( 'Duplicate Accordion Item', 'elementor' ),
+			elementIds: items.map( ( { item } ) => item.id ),
+		} );
+	};
+
+	const moveItem = ( {
+		accordionId,
+		movedElementId,
+		toIndex,
+	}: {
+		accordionId: string;
+		movedElementId: string;
+		toIndex: number;
+	} ) => {
+		const accordion = getContainer( accordionId );
+		const movedElement = getContainer( movedElementId );
+
+		if ( ! accordion || ! movedElement ) {
+			throw new Error( 'Accordion item or container not found' );
+		}
+
+		moveElements( {
+			title: __( 'Reorder Accordion Items', 'elementor' ),
+			moves: [
+				{
+					element: movedElement,
+					targetContainer: accordion,
+					options: { at: toIndex },
+				},
+			],
+		} );
+	};
+
+	return {
+		addItem,
+		removeItem,
+		duplicateItem,
+		moveItem,
+	};
+};

package/src/controls-registry/element-controls/accordion-items-control/use-show-icon-write-through.ts

@@ -0,0 +1,135 @@
+import { useEffect, useRef } from 'react';
+import { getContainer, getElementSettings, updateElementSettings, type V1Element } 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 { ACCORDION_ITEM_ELEMENT_TYPE } from './use-actions';
+
+const ACCORDION_ITEM_HEADER_ELEMENT_TYPE = 'e-accordion-item-header';
+
+type CascadeShowIconPayload = {
+	accordionId: string;
+	showIcon: boolean;
+};
+
+// A header's `show_icon` is either an explicit boolean prop value (`booleanPropTypeUtil.create`'s
+// return shape) or `null`/absent when it was never set - see `undo()` below for why both must
+// round-trip correctly.
+type CascadeShowIconResult = {
+	previous: Record< string, ReturnType< typeof booleanPropTypeUtil.create > | null | undefined >;
+};
+
+// `show_icon` is global on the root (`Atomic_Accordion::define_props_schema()`); every
+// `e-accordion-item-header` carries a *mirrored* `show_icon` prop of its own purely because the
+// children-dependencies reconciler evaluates a rule against the declaring element's own settings
+// and can only attach/detach that element's own direct children (see the comment on both props in
+// PHP). This function is the write-through: it pushes the root's current value onto every header's
+// mirrored prop, in one undo-able history transaction, so a single undo restores every header at
+// once. It does not touch the icon child itself - each header's own `Child_Dependency` (bound to that
+// header's settings `change` event) reacts to the prop flip and attaches/detaches/restashes the icon
+// on its own, exactly as it would if the header's `show_icon` had been changed directly.
+export const cascadeShowIconToHeaders = undoable< CascadeShowIconPayload, CascadeShowIconResult, undefined >(
+	{
+		do: ( { accordionId, showIcon } ) => {
+			const headerIds = getAccordionHeaderIds( accordionId );
+
+			const previous = Object.fromEntries(
+				headerIds.map(
+					( headerId ) =>
+						[
+							headerId,
+							getElementSettings< ReturnType< typeof booleanPropTypeUtil.create > >( headerId, [
+								'show_icon',
+							] ).show_icon,
+						] as const
+				)
+			);
+
+			headerIds.forEach( ( headerId ) => {
+				updateElementSettings( {
+					id: headerId,
+					props: { show_icon: booleanPropTypeUtil.create( showIcon ) },
+					withHistory: false,
+				} );
+			} );
+
+			return { previous };
+		},
+		undo: ( _payload, { previous } ) => {
+			// Write back whatever `previousValue` actually was, including `null`/`undefined` (a header
+			// whose `show_icon` was never explicitly set before the cascade). Skipping on falsy here
+			// used to only ever skip that unset case - explicit `false` is a *prop object*
+			// (`{ $$type: 'boolean', value: false }`), never itself falsy - so the guard silently ate
+			// the common case (the default two-item tree's headers start with `show_icon` unset) instead
+			// of the one it looked like it was guarding against. An explicit `null` evaluates the same
+			// as "unset" in the `Child_Dependency` reconciler (`extractValue()` -> `?.value` is
+			// `undefined` either way), so this restores the icon exactly as it was.
+			Object.entries( previous ).forEach( ( [ headerId, previousValue ] ) => {
+				updateElementSettings( {
+					id: headerId,
+					props: { show_icon: previousValue ?? null },
+					withHistory: false,
+				} );
+			} );
+		},
+	},
+	{
+		title: __( 'Accordion', 'elementor' ),
+		subtitle: __( 'Show Icon', 'elementor' ),
+		// `undoable()`'s debounce only delays when the *history entry* is pushed onto the undo stack -
+		// the settings write itself (`do()`) still runs synchronously on every call. The root's own
+		// `show_icon` change goes through `SettingsField` -> `useUndoableUpdateElementProp`
+		// (`settings-field.tsx`), which debounces its history push by `HISTORY_DEBOUNCE_WAIT` (800ms).
+		// Without matching that here, this cascade's history entry (pushed immediately) would land on
+		// the undo stack *before* the root's (pushed 800ms later), so the first Undo after a toggle
+		// would revert the root switch alone while every header stayed on its new value - the switch and
+		// the icons would visibly disagree until a second Undo. Matching the debounce window fixes the
+		// stack order to be deterministic (root's own entry, then this one) regardless of how quickly a
+		// user hits Undo. It does not make the two changes one atomic transaction - see the comment on
+		// `useShowIconWriteThrough` for why that would require forking the shared `Switch_Control`.
+		debounce: { wait: HISTORY_DEBOUNCE_WAIT },
+	}
+);
+
+function getAccordionHeaderIds( accordionId: string ): string[] {
+	const accordion = getContainer( accordionId );
+
+	const itemContainers = ( accordion?.children ?? [] ).filter(
+		( child ) => child.model.get( 'elType' ) === ACCORDION_ITEM_ELEMENT_TYPE
+	);
+
+	const headerContainers = itemContainers
+		.map(
+			( item ) =>
+				item.children?.find( ( child ) => child.model.get( 'elType' ) === ACCORDION_ITEM_HEADER_ELEMENT_TYPE )
+		)
+		.filter( ( header ): header is V1Element => Boolean( header ) );
+
+	return headerContainers.map( ( header ) => header.id );
+}
+
+// Watches the root's *current* `show_icon` value (read reactively from the panel's element
+// settings) and cascades it to every header on change. Skips the very first render for a given
+// element so mounting the panel on an already-toggled-off accordion doesn't re-fire a no-op
+// cascade. Deliberately lives alongside the repeater control rather than inside the generic
+// `Switch_Control` -> `SettingsField` pipeline: that pipeline is shared by every atomic element's
+// switch controls, so it is not a safe place to special-case one element's cross-element write-
+// through.
+export function useShowIconWriteThrough( accordionId: string, showIcon: boolean ): void {
+	const previousRef = useRef< { accordionId: string; showIcon: boolean } | null >( null );
+
+	useEffect( () => {
+		const previous = previousRef.current;
+		previousRef.current = { accordionId, showIcon };
+
+		// No baseline yet, or the accordion identity changed (e.g. a different element got selected
+		// into the same mounted control) - just record the new baseline, never cascade.
+		if ( ! previous || previous.accordionId !== accordionId || previous.showIcon === showIcon ) {
+			return;
+		}
+
+		cascadeShowIconToHeaders( { accordionId, showIcon } );
+	}, [ accordionId, showIcon ] );
+}

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

@@ -1,10 +1,12 @@
 import { type ControlComponent } from '@elementor/editor-controls';
 
 import { type ControlRegistry, controlsRegistry } from '../controls-registry';
+import { AccordionItemsControl } from './accordion-items-control/accordion-items-control';
 import { TabsControl } from './tabs-control/tabs-control';
 
 const controlTypes = {
 	tabs: { component: TabsControl as ControlComponent, layout: 'full' },
+	'accordion-items': { component: AccordionItemsControl as ControlComponent, layout: 'full' },
 } as const satisfies ControlRegistry;
 
 export const registerElementControls = () => {