@elementor/editor-editing-panel 3.33.0-99 → 3.34.3

package/src/components/settings-control.tsx

@@ -0,0 +1,79 @@
+import * as React from 'react';
+import { ControlAdornmentsProvider } from '@elementor/editor-controls';
+import { type Control, type ControlLayout, type ElementControl } from '@elementor/editor-elements';
+import { Divider, styled } from '@elementor/ui';
+
+import { Control as BaseControl } from '../controls-registry/control';
+import { ControlTypeContainer } from '../controls-registry/control-type-container';
+import { controlsRegistry, type ControlType } from '../controls-registry/controls-registry';
+import { SettingsField } from '../controls-registry/settings-field';
+import { getFieldIndicators } from '../field-indicators-registry';
+import { ControlLabel } from './control-label';
+
+const Wrapper = styled( 'span' )`
+	display: contents;
+`;
+
+export const SettingsControl = ( { control: { value, type } }: { control: Control | ElementControl } ) => {
+	if ( ! controlsRegistry.get( value.type as ControlType ) ) {
+		return null;
+	}
+
+	const layout = value.meta?.layout || controlsRegistry.getLayout( value.type as ControlType );
+	const controlProps = populateChildControlProps( value.props );
+
+	if ( layout === 'custom' ) {
+		controlProps.label = value.label;
+	}
+
+	if ( type === 'element-control' ) {
+		return <ControlLayout control={ value } layout={ layout } controlProps={ controlProps } />;
+	}
+
+	return (
+		<SettingsField bind={ value.bind } propDisplayName={ value.label || value.bind }>
+			<ControlLayout control={ value } layout={ layout } controlProps={ controlProps } />
+		</SettingsField>
+	);
+};
+
+const ControlLayout = ( {
+	control,
+	layout,
+	controlProps,
+}: {
+	control: Control[ 'value' ] | ElementControl[ 'value' ];
+	layout: ControlLayout;
+	controlProps: Record< string, unknown >;
+} ) => {
+	const controlType = control.type as ControlType;
+
+	return (
+		<ControlAdornmentsProvider items={ getFieldIndicators( 'settings' ) }>
+			{ control.meta?.topDivider && <Divider /> }
+			<Wrapper data-type="settings-field">
+				<ControlTypeContainer layout={ layout }>
+					{ control.label && layout !== 'custom' ? <ControlLabel>{ control.label }</ControlLabel> : null }
+					<BaseControl type={ controlType } props={ controlProps } />
+				</ControlTypeContainer>
+			</Wrapper>
+		</ControlAdornmentsProvider>
+	);
+};
+
+function populateChildControlProps( props: Record< string, unknown > ) {
+	if ( props.childControlType ) {
+		const childComponent = controlsRegistry.get( props.childControlType as ControlType );
+		const childPropType = controlsRegistry.getPropTypeUtil( props.childControlType as ControlType );
+		props = {
+			...props,
+			childControlConfig: {
+				component: childComponent,
+				props: props.childControlProps || {},
+				propTypeUtil: childPropType,
+			},
+		};
+	}
+
+	return props;
+}

package/src/components/settings-tab.tsx

@@ -1,17 +1,12 @@
 import * as React from 'react';
-import { ControlFormLabel } from '@elementor/editor-controls';
-import { type Control } from '@elementor/editor-elements';
+import { type Control, type ControlItem, type Element, type ElementControl } from '@elementor/editor-elements';
 import { SessionStorageProvider } from '@elementor/session';
-import { Divider } from '@elementor/ui';
 
 import { useElement } from '../contexts/element-context';
-import { Control as BaseControl } from '../controls-registry/control';
-import { ControlTypeContainer } from '../controls-registry/control-type-container';
-import { controlsRegistry, type ControlType } from '../controls-registry/controls-registry';
-import { SettingsField } from '../controls-registry/settings-field';
 import { useDefaultPanelSettings } from '../hooks/use-default-panel-settings';
 import { Section } from './section';
 import { SectionsList } from './sections-list';
+import { SettingsControl } from './settings-control';
 
 export const SettingsTab = () => {
 	const { elementType, element } = useElement();
@@ -23,11 +18,13 @@ export const SettingsTab = () => {
 	return (
 		<SessionStorageProvider prefix={ element.id }>
 			<SectionsList>
-				{ elementType.controls.map( ( { type, value }, index ) => {
-					if ( type === 'control' ) {
-						return <Control key={ value.bind } control={ value } />;
+				{ elementType.controls.map( ( control, index ) => {
+					if ( isControl( control ) ) {
+						return <SettingsControl key={ getKey( control, element ) } control={ control } />;
 					}
 
+					const { type, value } = control;
+
 					if ( type === 'section' ) {
 						return (
 							<Section
@@ -36,8 +33,8 @@ export const SettingsTab = () => {
 								defaultExpanded={ isDefaultExpanded( value.label ) }
 							>
 								{ value.items?.map( ( item ) => {
-									if ( item.type === 'control' ) {
-										return <Control key={ item.value.bind } control={ item.value } />;
+									if ( isControl( item ) ) {
+										return <SettingsControl key={ getKey( item, element ) } control={ item } />;
 									}
 
 									// TODO: Handle 2nd level sections
@@ -54,41 +51,14 @@ export const SettingsTab = () => {
 	);
 };
 
-const Control = ( { control }: { control: Control[ 'value' ] } ) => {
-	if ( ! controlsRegistry.get( control.type as ControlType ) ) {
-		return null;
-	}
-
-	const layout = control.meta?.layout || controlsRegistry.getLayout( control.type as ControlType );
-	const controlProps = populateChildControlProps( control.props );
-	if ( layout === 'custom' ) {
-		controlProps.label = control.label;
+function getKey( control: Control | ElementControl, element: Element ) {
+	if ( control.type === 'control' ) {
+		return control.value.bind + '.' + element.id;
 	}
 
-	return (
-		<SettingsField bind={ control.bind } propDisplayName={ control.label || control.bind }>
-			{ control.meta?.topDivider && <Divider /> }
-			<ControlTypeContainer layout={ layout }>
-				{ control.label && layout !== 'custom' ? <ControlFormLabel>{ control.label }</ControlFormLabel> : null }
-				<BaseControl type={ control.type as ControlType } props={ controlProps } />
-			</ControlTypeContainer>
-		</SettingsField>
-	);
-};
-
-function populateChildControlProps( props: Record< string, unknown > ) {
-	if ( props.childControlType ) {
-		const childComponent = controlsRegistry.get( props.childControlType as ControlType );
-		const childPropType = controlsRegistry.getPropTypeUtil( props.childControlType as ControlType );
-		props = {
-			...props,
-			childControlConfig: {
-				component: childComponent,
-				props: props.childControlProps || {},
-				propTypeUtil: childPropType,
-			},
-		};
-	}
+	return control.value.type + '.' + element.id;
+}
 
-	return props;
+function isControl( control: ControlItem ): control is Control | ElementControl {
+	return control.type === 'control' || control.type === 'element-control';
 }

package/src/components/style-sections/border-section/border-section.tsx

@@ -1,14 +1,16 @@
 import * as React from 'react';
 
-import { PanelDivider } from '../../panel-divider';
 import { SectionContent } from '../../section-content';
-import { BorderField } from './border-field';
+import { BorderColorField } from './border-color-field';
 import { BorderRadiusField } from './border-radius-field';
+import { BorderStyleField } from './border-style-field';
+import { BorderWidthField } from './border-width-field';
 
 export const BorderSection = () => (
 	<SectionContent>
+		<BorderWidthField />
+		<BorderColorField />
+		<BorderStyleField />
 		<BorderRadiusField />
-		<PanelDivider />
-		<BorderField />
 	</SectionContent>
 );

package/src/components/style-sections/effects-section/blend-mode-field.tsx

@@ -0,0 +1,44 @@
+import * as React from 'react';
+import { SelectControl } from '@elementor/editor-controls';
+import { __ } from '@wordpress/i18n';
+
+import { StylesField } from '../../../controls-registry/styles-field';
+import { StylesFieldLayout } from '../../styles-field-layout';
+
+const BLEND_MODE_LABEL = __( 'Blend mode', 'elementor' );
+
+const blendModeOptions = [
+	{ label: __( 'Normal', 'elementor' ), value: 'normal' },
+	{ label: __( 'Multiply', 'elementor' ), value: 'multiply' },
+	{ label: __( 'Screen', 'elementor' ), value: 'screen' },
+	{ label: __( 'Overlay', 'elementor' ), value: 'overlay' },
+	{ label: __( 'Darken', 'elementor' ), value: 'darken' },
+	{ label: __( 'Lighten', 'elementor' ), value: 'lighten' },
+	{ label: __( 'Color dodge', 'elementor' ), value: 'color-dodge' },
+	{ label: __( 'Color burn', 'elementor' ), value: 'color-burn' },
+	{ label: __( 'Saturation', 'elementor' ), value: 'saturation' },
+	{ label: __( 'Color', 'elementor' ), value: 'color' },
+	{ label: __( 'Difference', 'elementor' ), value: 'difference' },
+	{ label: __( 'Exclusion', 'elementor' ), value: 'exclusion' },
+	{ label: __( 'Hue', 'elementor' ), value: 'hue' },
+	{ label: __( 'Luminosity', 'elementor' ), value: 'luminosity' },
+	{ label: __( 'Soft light', 'elementor' ), value: 'soft-light' },
+	{ label: __( 'Hard light', 'elementor' ), value: 'hard-light' },
+];
+
+export const BlendModeField = () => {
+	return (
+		<StylesField bind="mix-blend-mode" propDisplayName={ BLEND_MODE_LABEL }>
+			<StylesFieldLayout label={ BLEND_MODE_LABEL }>
+				<SelectControl
+					options={ blendModeOptions }
+					MenuProps={ {
+						sx: {
+							maxHeight: '256px',
+						},
+					} }
+				/>
+			</StylesFieldLayout>
+		</StylesField>
+	);
+};

package/src/components/style-sections/effects-section/effects-section.tsx

@@ -13,6 +13,7 @@ import { StylesField } from '../../../controls-registry/styles-field';
 import { getRecentlyUsedList } from '../../../utils/get-recently-used-styles';
 import { PanelDivider } from '../../panel-divider';
 import { SectionContent } from '../../section-content';
+import { BlendModeField } from './blend-mode-field';
 import { OpacityControlField } from './opacity-control-field';
 
 const BOX_SHADOW_LABEL = __( 'Box shadow', 'elementor' );
@@ -26,7 +27,9 @@ export const EffectsSection = () => {
 	const { meta } = useStyle();
 
 	return (
-		<SectionContent>
+		<SectionContent gap={ 1 }>
+			<BlendModeField />
+			<PanelDivider />
 			<OpacityControlField />
 			<PanelDivider />
 			<StylesField bind="box-shadow" propDisplayName={ BOX_SHADOW_LABEL }>

package/src/components/style-sections/layout-section/flex-size-field.tsx

@@ -9,7 +9,7 @@ import {
 	type ToggleButtonGroupItem,
 	useBoundProp,
 } from '@elementor/editor-controls';
-import { flexPropTypeUtil, type FlexPropValue, numberPropTypeUtil } from '@elementor/editor-props';
+import { flexPropTypeUtil, type FlexPropValue, numberPropTypeUtil, sizePropTypeUtil } from '@elementor/editor-props';
 import { ExpandIcon, PencilIcon, ShrinkIcon } from '@elementor/icons';
 import { __ } from '@wordpress/i18n';
 
@@ -130,16 +130,16 @@ const createFlexValueForGroup = ( group: GroupItem | null, flexValue: FlexPropVa
 	if ( group === 'flex-grow' ) {
 		return flexPropTypeUtil.create( {
 			flexGrow: numberPropTypeUtil.create( DEFAULT ),
-			flexShrink: null,
-			flexBasis: null,
+			flexShrink: numberPropTypeUtil.create( 0 ),
+			flexBasis: sizePropTypeUtil.create( { unit: 'auto', size: '' } ),
 		} );
 	}
 
 	if ( group === 'flex-shrink' ) {
 		return flexPropTypeUtil.create( {
-			flexGrow: null,
+			flexGrow: numberPropTypeUtil.create( 0 ),
 			flexShrink: numberPropTypeUtil.create( DEFAULT ),
-			flexBasis: null,
+			flexBasis: sizePropTypeUtil.create( { unit: 'auto', size: '' } ),
 		} );
 	}
 
@@ -197,15 +197,17 @@ const getActiveGroup = ( {
 		return null;
 	}
 
-	if ( ( shrink && grow ) || basis ) {
+	const isAutoBasis = basis === null || ( typeof basis === 'object' && basis.unit === 'auto' );
+
+	if ( basis && ! isAutoBasis ) {
 		return 'custom';
 	}
 
-	if ( grow === DEFAULT ) {
+	if ( grow === DEFAULT && ( shrink === null || shrink === 0 ) && isAutoBasis ) {
 		return 'flex-grow';
 	}
 
-	if ( shrink === DEFAULT ) {
+	if ( shrink === DEFAULT && ( grow === null || grow === 0 ) && isAutoBasis ) {
 		return 'flex-shrink';
 	}
 

package/src/components/style-sections/typography-section/font-family-field.tsx

@@ -20,7 +20,11 @@ export const FontFamilyField = () => {
 	return (
 		<StylesField bind="font-family" propDisplayName={ FONT_FAMILY_LABEL }>
 			<StylesFieldLayout label={ FONT_FAMILY_LABEL }>
-				<FontFamilyControl fontFamilies={ fontFamilies } sectionWidth={ sectionWidth } />
+				<FontFamilyControl
+					fontFamilies={ fontFamilies }
+					sectionWidth={ sectionWidth }
+					ariaLabel={ FONT_FAMILY_LABEL }
+				/>
 			</StylesFieldLayout>
 		</StylesField>
 	);

package/src/components/style-sections/typography-section/font-size-field.tsx

@@ -14,7 +14,7 @@ export const FontSizeField = () => {
 	return (
 		<StylesField bind="font-size" propDisplayName={ FONT_SIZE_LABEL }>
 			<StylesFieldLayout label={ FONT_SIZE_LABEL } ref={ rowRef }>
-				<SizeControl anchorRef={ rowRef } />
+				<SizeControl anchorRef={ rowRef } ariaLabel={ FONT_SIZE_LABEL } />
 			</StylesFieldLayout>
 		</StylesField>
 	);

package/src/components/style-sections/typography-section/letter-spacing-field.tsx

@@ -14,7 +14,7 @@ export const LetterSpacingField = () => {
 	return (
 		<StylesField bind="letter-spacing" propDisplayName={ LETTER_SPACING_LABEL }>
 			<StylesFieldLayout label={ LETTER_SPACING_LABEL } ref={ rowRef }>
-				<SizeControl anchorRef={ rowRef } />
+				<SizeControl anchorRef={ rowRef } min={ -Number.MAX_SAFE_INTEGER } />
 			</StylesFieldLayout>
 		</StylesField>
 	);

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

@@ -11,7 +11,7 @@ export const TextColorField = () => {
 	return (
 		<StylesField bind="color" propDisplayName={ TEXT_COLOR_LABEL }>
 			<StylesFieldLayout label={ TEXT_COLOR_LABEL }>
-				<ColorControl />
+				<ColorControl id="text-color-control" />
 			</StylesFieldLayout>
 		</StylesField>
 	);

package/src/components/style-sections/typography-section/word-spacing-field.tsx

@@ -14,7 +14,7 @@ export const WordSpacingField = () => {
 	return (
 		<StylesField bind="word-spacing" propDisplayName={ WORD_SPACING_LABEL }>
 			<StylesFieldLayout label={ WORD_SPACING_LABEL } ref={ rowRef }>
-				<SizeControl anchorRef={ rowRef } />
+				<SizeControl anchorRef={ rowRef } min={ -Number.MAX_SAFE_INTEGER } />
 			</StylesFieldLayout>
 		</StylesField>
 	);

package/src/components/style-tab-section.tsx

@@ -4,13 +4,13 @@ import { useDefaultPanelSettings } from '../hooks/use-default-panel-settings';
 import { Section } from './section';
 import { getStylesInheritanceIndicators } from './style-tab-collapsible-content';
 
-type Section = {
+type SectionType = {
 	component: () => React.JSX.Element;
 	name: string;
 	title: string;
 };
 
-type Props = { section: Section; fields?: string[]; unmountOnExit?: boolean };
+type Props = { section: SectionType; fields?: string[]; unmountOnExit?: boolean };
 
 export const StyleTabSection = ( { section, fields = [], unmountOnExit = true }: Props ) => {
 	const { component, name, title } = section;

package/src/components/style-tab.tsx

@@ -3,7 +3,7 @@ import { useState } from 'react';
 import { CLASSES_PROP_KEY } from '@elementor/editor-props';
 import { useActiveBreakpoint } from '@elementor/editor-responsive';
 import { type StyleDefinitionID, type StyleDefinitionState } from '@elementor/editor-styles';
-import { EXPERIMENTAL_FEATURES, isExperimentActive } from '@elementor/editor-v1-adapters';
+import { createLocation } from '@elementor/locations';
 import { SessionStorageProvider } from '@elementor/session';
 import { Box, Divider, Stack } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
@@ -15,7 +15,6 @@ import { StyleProvider } from '../contexts/style-context';
 import { StyleInheritanceProvider } from '../contexts/styles-inheritance-context';
 import { useActiveStyleDefId } from '../hooks/use-active-style-def-id';
 import { CssClassSelector } from './css-classes/css-class-selector';
-import { CustomCss } from './custom-css';
 import { SectionsList } from './sections-list';
 import { BackgroundSection } from './style-sections/background-section/background-section';
 import { BorderSection } from './style-sections/border-section/border-section';
@@ -29,6 +28,8 @@ import { StyleTabSection } from './style-tab-section';
 
 const TABS_HEADER_HEIGHT = '37px';
 
+export const { Slot: StyleTabSlot, inject: injectIntoStyleTab } = createLocation();
+
 export const stickyHeaderStyles = {
 	position: 'sticky',
 	zIndex: 1100,
@@ -39,10 +40,13 @@ export const stickyHeaderStyles = {
 
 export const StyleTab = () => {
 	const currentClassesProp = useCurrentClassesProp();
-	const [ activeStyleDefId, setActiveStyleDefId ] = useActiveStyleDefId( currentClassesProp );
+	const [ activeStyleDefId, setActiveStyleDefId ] = useActiveStyleDefId( currentClassesProp ?? '' );
 	const [ activeStyleState, setActiveStyleState ] = useState< StyleDefinitionState | null >( null );
 	const breakpoint = useActiveBreakpoint();
-	const shouldRenderCustomCss = isExperimentActive( EXPERIMENTAL_FEATURES.CUSTOM_CSS );
+
+	if ( ! currentClassesProp ) {
+		return null;
+	}
 
 	return (
 		<ClassesPropProvider prop={ currentClassesProp }>
@@ -159,6 +163,7 @@ export const StyleTab = () => {
 									title: __( 'Effects', 'elementor' ),
 								} }
 								fields={ [
+									'mix-blend-mode',
 									'box-shadow',
 									'opacity',
 									'transform',
@@ -168,17 +173,7 @@ export const StyleTab = () => {
 									'transition',
 								] }
 							/>
-							{ shouldRenderCustomCss && (
-								<StyleTabSection
-									section={ {
-										component: CustomCss,
-										name: 'Custom CSS',
-										title: __( 'Custom CSS', 'elementor' ),
-									} }
-									fields={ [ 'custom_css' ] }
-									unmountOnExit={ false }
-								/>
-							) }
+							<StyleTabSlot />
 						</SectionsList>
 						<Box sx={ { height: '150px' } } />
 					</StyleInheritanceProvider>
@@ -198,7 +193,7 @@ function ClassesHeader( { children }: { children: React.ReactNode } ) {
 	);
 }
 
-function useCurrentClassesProp(): string {
+function useCurrentClassesProp(): string | null {
 	const { elementType } = useElement();
 
 	const prop = Object.entries( elementType.propsSchema ).find(
@@ -206,7 +201,7 @@ function useCurrentClassesProp(): string {
 	);
 
 	if ( ! prop ) {
-		throw new Error( 'Element does not have a classes prop' );
+		return null;
 	}
 
 	return prop[ 0 ];

package/src/components/styles-field-layout.tsx

@@ -20,7 +20,14 @@ export const StylesFieldLayout = React.forwardRef< HTMLDivElement, StylesFieldLa
 const Row = React.forwardRef< HTMLDivElement, { label: string; children: React.ReactNode } >(
 	( { label, children }, ref ) => {
 		return (
-			<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap" ref={ ref }>
+			<Grid
+				container
+				gap={ 2 }
+				alignItems="center"
+				flexWrap="nowrap"
+				ref={ ref }
+				aria-label={ `${ label } control` }
+			>
 				<Grid item xs={ 6 }>
 					<ControlLabel>{ label }</ControlLabel>
 				</Grid>

package/src/controls-registry/conditional-field.tsx

@@ -12,7 +12,7 @@ export const ConditionalField: React.FC< {
 
 	const { values: depValues } = useStylesFields( depList );
 
-	const isHidden = ! isDependencyMet( propType?.dependencies, depValues );
+	const isHidden = ! isDependencyMet( propType?.dependencies, depValues ).isMet;
 
 	return isHidden ? null : children;
 };

package/src/controls-registry/control-type-container.tsx

@@ -18,10 +18,22 @@ const StyledContainer = styled( Box, {
 	...getGridLayout( layout ),
 } ) );
 
-const getGridLayout = ( layout: Omit< ControlLayout, 'custom' > ) => ( {
+const getGridLayout = ( layout: ControlLayout ) => ( {
 	justifyContent: 'space-between',
-	gridTemplateColumns: {
-		full: 'minmax(0, 1fr)',
-		'two-columns': 'repeat(2, minmax(0, 1fr))',
-	}[ layout as string ],
+	...getStyleByLayout( layout ),
 } );
+
+const getStyleByLayout = ( layout: ControlLayout ) => {
+	if ( layout === 'full' ) {
+		return {
+			gridTemplateColumns: 'minmax(0, 1fr)',
+		};
+	}
+
+	if ( layout === 'two-columns' ) {
+		return {
+			alignItems: 'center',
+			gridTemplateColumns: 'repeat(2, minmax(0, 1fr))',
+		};
+	}
+};

package/src/controls-registry/controls-registry.tsx

@@ -1,34 +1,42 @@
 import {
 	type ControlComponent,
+	DateTimeControl,
+	HtmlTagControl,
 	ImageControl,
+	InlineEditingControl,
 	KeyValueControl,
 	LinkControl,
 	NumberControl,
+	QueryControl,
 	RepeatableControl,
-	SelectControl,
+	SelectControlWrapper,
 	SizeControl,
 	SvgMediaControl,
 	SwitchControl,
 	TextAreaControl,
 	TextControl,
+	ToggleControl,
 	UrlControl,
 } from '@elementor/editor-controls';
 import { type ControlLayout } from '@elementor/editor-elements';
 import {
 	booleanPropTypeUtil,
+	DateTimePropTypeUtil,
+	htmlPropTypeUtil,
 	imagePropTypeUtil,
 	imageSrcPropTypeUtil,
 	keyValuePropTypeUtil,
 	linkPropTypeUtil,
 	numberPropTypeUtil,
 	type PropTypeUtil,
+	queryPropTypeUtil,
 	sizePropTypeUtil,
 	stringPropTypeUtil,
 } from '@elementor/editor-props';
 
 import { ControlTypeAlreadyRegisteredError, ControlTypeNotRegisteredError } from '../errors';
 
-type ControlRegistry = Record<
+export type ControlRegistry = Record<
 	string,
 	// eslint-disable-next-line @typescript-eslint/no-explicit-any
 	{ component: ControlComponent; layout: ControlLayout; propTypeUtil?: PropTypeUtil< string, any > }
@@ -40,13 +48,18 @@ const controlTypes = {
 	text: { component: TextControl, layout: 'full', propTypeUtil: stringPropTypeUtil },
 	textarea: { component: TextAreaControl, layout: 'full', propTypeUtil: stringPropTypeUtil },
 	size: { component: SizeControl, layout: 'two-columns', propTypeUtil: sizePropTypeUtil },
-	select: { component: SelectControl, layout: 'two-columns', propTypeUtil: stringPropTypeUtil },
+	select: { component: SelectControlWrapper, layout: 'two-columns', propTypeUtil: stringPropTypeUtil },
 	link: { component: LinkControl, layout: 'custom', propTypeUtil: linkPropTypeUtil },
+	query: { component: QueryControl, layout: 'full', propTypeUtil: queryPropTypeUtil },
 	url: { component: UrlControl, layout: 'full', propTypeUtil: stringPropTypeUtil },
 	switch: { component: SwitchControl, layout: 'two-columns', propTypeUtil: booleanPropTypeUtil },
 	number: { component: NumberControl, layout: 'two-columns', propTypeUtil: numberPropTypeUtil },
 	repeatable: { component: RepeatableControl, layout: 'full', propTypeUtil: undefined },
 	'key-value': { component: KeyValueControl, layout: 'full', propTypeUtil: keyValuePropTypeUtil },
+	'html-tag': { component: HtmlTagControl, layout: 'two-columns', propTypeUtil: stringPropTypeUtil },
+	toggle: { component: ToggleControl, layout: 'full', propTypeUtil: stringPropTypeUtil },
+	'date-time': { component: DateTimeControl, layout: 'full', propTypeUtil: DateTimePropTypeUtil },
+	'inline-editing': { component: InlineEditingControl, layout: 'full', propTypeUtil: htmlPropTypeUtil },
 } as const satisfies ControlRegistry;
 
 export type ControlType = keyof typeof controlTypes;
@@ -56,7 +69,7 @@ export type ControlTypes = {
 };
 
 class ControlsRegistry {
-	constructor( private readonly controlsRegistry: ControlRegistry = controlTypes ) {
+	constructor( private readonly controlsRegistry: ControlRegistry ) {
 		this.controlsRegistry = controlsRegistry;
 	}
 
@@ -98,4 +111,4 @@ class ControlsRegistry {
 	}
 }
 
-export const controlsRegistry = new ControlsRegistry();
+export const controlsRegistry = new ControlsRegistry( controlTypes );

package/src/controls-registry/element-controls/get-element-by-type.ts

@@ -0,0 +1,21 @@
+import { getContainer } from '@elementor/editor-elements';
+
+export const getElementByType = ( elementId: string, type: string ) => {
+	const currentElement = getContainer( elementId );
+
+	if ( ! currentElement ) {
+		throw new Error( `Current element not found, elementId: ${ elementId }` );
+	}
+
+	if ( currentElement.model.get( 'elType' ) === type ) {
+		return currentElement;
+	}
+
+	const element = currentElement.children?.findRecursive?.( ( child ) => child.model.get( 'elType' ) === type );
+
+	if ( ! element ) {
+		throw new Error( `Child element ${ type } not found` );
+	}
+
+	return element;
+};

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

@@ -0,0 +1,16 @@
+import { type ControlComponent } from '@elementor/editor-controls';
+
+import { type ControlRegistry, controlsRegistry } from '../controls-registry';
+import { TabsControl } from './tabs-control/tabs-control';
+
+const controlTypes = {
+	tabs: { component: TabsControl as ControlComponent, layout: 'full' },
+} as const satisfies ControlRegistry;
+
+export const registerElementControls = () => {
+	Object.entries< ( typeof controlTypes )[ keyof typeof controlTypes ] >( controlTypes ).forEach(
+		( [ type, { component, layout } ] ) => {
+			controlsRegistry.register( type, component, layout );
+		}
+	);
+};