@elementor/editor-editing-panel 1.48.0 → 3.32.0-20

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elementor/editor-editing-panel",
-  "version": "1.48.0",
+  "version": "3.32.0-20",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -18,11 +18,11 @@
   },
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/elementor/elementor-packages.git",
+    "url": "git+https://github.com/elementor/elementor.git",
     "directory": "packages/core/editor-editing-panel"
   },
   "bugs": {
-    "url": "https://github.com/elementor/elementor-packages/issues"
+    "url": "https://github.com/elementor/elementor/issues"
   },
   "publishConfig": {
     "access": "public"
@@ -39,26 +39,26 @@
     "dev": "tsup --config=../../tsup.dev.ts"
   },
   "dependencies": {
-    "@elementor/editor": "0.21.0",
-    "@elementor/editor-canvas": "0.26.0",
-    "@elementor/editor-controls": "1.3.0",
-    "@elementor/editor-documents": "0.13.9",
-    "@elementor/editor-elements": "0.9.0",
-    "@elementor/editor-panels": "0.17.0",
-    "@elementor/editor-props": "0.16.0",
-    "@elementor/editor-responsive": "0.13.6",
-    "@elementor/editor-styles": "0.6.12",
-    "@elementor/editor-styles-repository": "0.10.5",
-    "@elementor/editor-ui": "0.14.0",
-    "@elementor/editor-v1-adapters": "0.12.1",
+    "@elementor/editor": "3.32.0-20",
+    "@elementor/editor-canvas": "3.32.0-20",
+    "@elementor/editor-controls": "3.32.0-20",
+    "@elementor/editor-documents": "3.32.0-20",
+    "@elementor/editor-elements": "3.32.0-20",
+    "@elementor/editor-panels": "3.32.0-20",
+    "@elementor/editor-props": "3.32.0-20",
+    "@elementor/editor-responsive": "3.32.0-20",
+    "@elementor/editor-styles": "3.32.0-20",
+    "@elementor/editor-styles-repository": "3.32.0-20",
+    "@elementor/editor-ui": "3.32.0-20",
+    "@elementor/editor-v1-adapters": "3.32.0-20",
     "@elementor/icons": "1.46.0",
-    "@elementor/locations": "0.8.0",
-    "@elementor/menus": "0.1.5",
-    "@elementor/schema": "0.1.2",
-    "@elementor/session": "0.1.0",
-    "@elementor/ui": "1.36.0",
-    "@elementor/utils": "0.5.0",
-    "@elementor/wp-media": "0.6.1",
+    "@elementor/locations": "3.32.0-20",
+    "@elementor/menus": "3.32.0-20",
+    "@elementor/schema": "3.32.0-20",
+    "@elementor/session": "3.32.0-20",
+    "@elementor/ui": "1.36.2",
+    "@elementor/utils": "3.32.0-20",
+    "@elementor/wp-media": "3.32.0-20",
     "@wordpress/i18n": "^5.13.0"
   },
   "peerDependencies": {

package/src/components/css-classes/css-class-convert-local.tsx

@@ -0,0 +1,77 @@
+import * as React from 'react';
+import { deleteElementStyle, getElementSetting, updateElementSettings } from '@elementor/editor-elements';
+import { classesPropTypeUtil, type ClassesPropValue } from '@elementor/editor-props';
+import { type StyleDefinition } from '@elementor/editor-styles';
+import { createLocation } from '@elementor/locations';
+import { useSessionStorage } from '@elementor/session';
+
+import { useClassesProp } from '../../contexts/classes-prop-context';
+import { useElement } from '../../contexts/element-context';
+import { useStyle } from '../../contexts/style-context';
+
+export const { Slot: CssClassConvertSlot, inject: injectIntoCssClassConvert } = createLocation< {
+	styleDef: StyleDefinition | null;
+	successCallback: ( newId: string ) => void;
+	canConvert: boolean;
+} >();
+
+type OwnProps = {
+	styleDef: StyleDefinition | null;
+	closeMenu: () => void;
+	canConvert: boolean;
+};
+
+/**
+ * Convert a local class to a global class injection point
+ * @param props
+ */
+export const CssClassConvert = ( props: OwnProps ) => {
+	const { element } = useElement();
+	const elementId = element.id;
+	const currentClassesProp = useClassesProp();
+	const { setId: setActiveId } = useStyle();
+	const [ , saveValue ] = useSessionStorage( `last-converted-class-generated-name` );
+
+	const successCallback = ( newId: string ) => {
+		if ( ! props.styleDef ) {
+			throw new Error( 'Style definition is required for converting local class to global class.' );
+		}
+
+		onConvert( {
+			newId,
+			elementId,
+			classesProp: currentClassesProp,
+			styleDef: props.styleDef,
+		} );
+
+		saveValue( newId );
+		setActiveId( newId );
+		props.closeMenu();
+	};
+
+	return (
+		<CssClassConvertSlot
+			canConvert={ !! props.canConvert }
+			styleDef={ props.styleDef }
+			successCallback={ successCallback }
+		/>
+	);
+};
+
+type OnConvertOptions = {
+	newId: string;
+	elementId: string;
+	classesProp: string;
+	styleDef: StyleDefinition;
+};
+
+const onConvert = ( opts: OnConvertOptions ) => {
+	const { newId, elementId, classesProp } = opts;
+	deleteElementStyle( elementId, opts.styleDef.id );
+	const currentUsedClasses = getElementSetting< ClassesPropValue >( elementId, classesProp ) || { value: [] };
+	updateElementSettings( {
+		id: elementId,
+		props: { [ classesProp ]: classesPropTypeUtil.create( [ newId, ...currentUsedClasses.value ] ) },
+		withHistory: false,
+	} );
+};

package/src/components/css-classes/css-class-item.tsx

@@ -1,8 +1,9 @@
 import * as React from 'react';
-import { type ReactElement, useState } from 'react';
+import { type ReactElement, useEffect, useState } from 'react';
 import { stylesRepository, useUserStylesCapability, validateStyleLabel } from '@elementor/editor-styles-repository';
 import { EditableField, EllipsisWithTooltip, useEditable } from '@elementor/editor-ui';
 import { DotsVerticalIcon } from '@elementor/icons';
+import { useSessionStorage } from '@elementor/session';
 import {
 	type AutocompleteRenderGetTagProps,
 	bindTrigger,
@@ -10,6 +11,7 @@ import {
 	type ChipOwnProps,
 	Stack,
 	type Theme,
+	ThemeProvider,
 	Typography,
 	UnstableChipGroup,
 	usePopupState,
@@ -48,6 +50,10 @@ export function CssClassItem( props: CssClassItemProps ) {
 
 	const { userCan } = useUserStylesCapability();
 
+	const [ convertedFromLocalId, , clearConvertedFromLocalId ] = useSessionStorage(
+		`last-converted-class-generated-name`
+	);
+
 	const {
 		ref,
 		isEditing,
@@ -68,8 +74,17 @@ export function CssClassItem( props: CssClassItemProps ) {
 
 	const isShowingState = isActive && meta.state;
 
+	useEffect( () => {
+		if ( convertedFromLocalId && id === convertedFromLocalId ) {
+			clearConvertedFromLocalId();
+			openEditMode();
+		}
+		// eslint-disable-next-line react-compiler/react-compiler
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [ id ] );
+
 	return (
-		<>
+		<ThemeProvider palette="default">
 			<UnstableChipGroup
 				ref={ setChipRef }
 				{ ...chipGroupProps }
@@ -144,7 +159,7 @@ export function CssClassItem( props: CssClassItemProps ) {
 			<CssClassProvider { ...classProps } handleRename={ openEditMode }>
 				<CssClassMenu popupState={ popupState } anchorEl={ chipRef } fixed={ fixed } />
 			</CssClassProvider>
-		</>
+		</ThemeProvider>
 	);
 }
 

package/src/components/css-classes/css-class-menu.tsx

@@ -1,15 +1,20 @@
 import * as React from 'react';
 import { type StyleDefinitionState } from '@elementor/editor-styles';
-import { stylesRepository, useUserStylesCapability } from '@elementor/editor-styles-repository';
+import {
+	isElementsStylesProvider,
+	stylesRepository,
+	useUserStylesCapability,
+} from '@elementor/editor-styles-repository';
 import { MenuItemInfotip, MenuListItem } from '@elementor/editor-ui';
 import { bindMenu, Divider, Menu, MenuSubheader, type PopupState, Stack } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
 import { useStyle } from '../../contexts/style-context';
 import { type StyleDefinitionStateWithNormal } from '../../styles-inheritance/types';
-import { getStylesProviderThemeColor } from '../../utils/get-styles-provider-color';
+import { getTempStylesProviderThemeColor } from '../../utils/get-styles-provider-color';
 import { StyleIndicator } from '../style-indicator';
 import { useCssClass } from './css-class-context';
+import { LocalClassSubMenu } from './local-class-sub-menu';
 import { useUnapplyClass } from './use-apply-and-unapply-class';
 
 type State = {
@@ -32,6 +37,7 @@ type CssClassMenuProps = {
 
 export function CssClassMenu( { popupState, anchorEl, fixed }: CssClassMenuProps ) {
 	const { provider } = useCssClass();
+	const isLocalStyle = provider ? isElementsStylesProvider( provider ) : true;
 
 	const handleKeyDown = ( e: React.KeyboardEvent< HTMLElement > ) => {
 		e.stopPropagation();
@@ -54,6 +60,7 @@ export function CssClassMenu( { popupState, anchorEl, fixed }: CssClassMenuProps
 			// Workaround for focus-visible issue.
 			disableAutoFocusItem
 		>
+			{ isLocalStyle && <LocalClassSubMenu popupState={ popupState } /> }
 			{ /* It has to be an array since MUI menu doesn't accept a Fragment as a child, and wrapping the items with an HTML element disrupts keyboard navigation */ }
 			{ getMenuItemsByProvider( { provider, closeMenu: popupState.close, fixed } ) }
 			<MenuSubheader sx={ { typography: 'caption', color: 'text.secondary', pb: 0.5, pt: 1 } }>
@@ -161,7 +168,7 @@ function StateMenuItem( { state, closeMenu, ...props }: StateMenuItemProps ) {
 					{ isStyled && (
 						<StyleIndicator
 							aria-label={ __( 'Has style', 'elementor' ) }
-							getColor={ getStylesProviderThemeColor( provider ?? '' ) }
+							getColor={ getTempStylesProviderThemeColor( provider ?? '' ) }
 						/>
 					) }
 					{ state ?? 'normal' }

package/src/components/css-classes/css-class-selector.tsx

@@ -53,7 +53,7 @@ const EMPTY_OPTION = {
 	label: __( 'local', 'elementor' ),
 	value: null,
 	fixed: true,
-	color: 'accent',
+	color: getTempStylesProviderColorName( 'accent' ),
 	icon: <MapPinIcon />,
 	provider: null,
 } satisfies StyleDefOption;
@@ -221,7 +221,7 @@ function useOptions() {
 					label: styleDef.label,
 					value: styleDef.id,
 					fixed: isElements,
-					color: getStylesProviderColorName( provider.getKey() ),
+					color: getTempStylesProviderColorName( getStylesProviderColorName( provider.getKey() ) ),
 					icon: isElements ? <MapPinIcon /> : null,
 					provider: provider.getKey(),
 				};
@@ -229,6 +229,14 @@ function useOptions() {
 		} );
 }
 
+function getTempStylesProviderColorName( color: ChipOwnProps[ 'color' ] ): ChipOwnProps[ 'color' ] {
+	if ( color === 'accent' ) {
+		return 'primary';
+	}
+
+	return color;
+}
+
 function useCreateAction() {
 	const [ provider, createAction ] = useCreateAndApplyClass();
 	if ( ! provider || ! createAction ) {

package/src/components/css-classes/local-class-sub-menu.tsx

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import { MenuSubheader, type PopupState } from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+
+import { CssClassConvert } from './css-class-convert-local';
+import { useCanConvertLocalClassToGlobal } from './use-can-convert-local-class-to-global';
+
+type OwnProps = {
+	popupState: PopupState;
+};
+
+export const LocalClassSubMenu = ( props: OwnProps ) => {
+	const { canConvert, styleDef } = useCanConvertLocalClassToGlobal();
+
+	return (
+		<>
+			<MenuSubheader sx={ { typography: 'caption', color: 'text.secondary', pb: 0.5, pt: 1 } }>
+				{ __( 'Local Class', 'elementor' ) }
+			</MenuSubheader>
+			<CssClassConvert canConvert={ canConvert } styleDef={ styleDef } closeMenu={ props.popupState.close } />
+		</>
+	);
+};

package/src/components/css-classes/use-apply-and-unapply-class.ts

@@ -4,13 +4,12 @@ import { getElementLabel, getElementSetting, updateElementSettings } from '@elem
 import { classesPropTypeUtil, type ClassesPropValue } from '@elementor/editor-props';
 import { type StyleDefinitionID } from '@elementor/editor-styles';
 import { useGetStylesRepositoryCreateAction } from '@elementor/editor-styles-repository';
-import { isExperimentActive, undoable } from '@elementor/editor-v1-adapters';
+import { undoable } from '@elementor/editor-v1-adapters';
 import { __ } from '@wordpress/i18n';
 
 import { useClassesProp } from '../../contexts/classes-prop-context';
 import { useElement } from '../../contexts/element-context';
 import { useStyle } from '../../contexts/style-context';
-import { EXPERIMENTAL_FEATURES } from '../../sync/experiments-flags';
 
 type UndoableClassActionPayload = {
 	classId: StyleDefinitionID;
@@ -30,12 +29,10 @@ export function useApplyClass() {
 	const { id: activeId, setId: setActiveId } = useStyle();
 	const { element } = useElement();
 
-	const isVersion330Active = isExperimentActive( EXPERIMENTAL_FEATURES.V_3_30 );
-
 	const applyClass = useApply();
 	const unapplyClass = useUnapply();
 
-	const undoableApply = useMemo( () => {
+	return useMemo( () => {
 		return undoable(
 			{
 				do: ( { classId }: UndoableClassActionPayload ) => {
@@ -59,27 +56,16 @@ export function useApplyClass() {
 			}
 		);
 	}, [ activeId, applyClass, element.id, unapplyClass, setActiveId ] );
-
-	const applyWithoutHistory = useCallback(
-		( { classId }: UndoableClassActionPayload ) => {
-			applyClass( classId );
-		},
-		[ applyClass ]
-	);
-
-	return isVersion330Active ? undoableApply : applyWithoutHistory;
 }
 
 export function useUnapplyClass() {
 	const { id: activeId, setId: setActiveId } = useStyle();
 	const { element } = useElement();
 
-	const isVersion330Active = isExperimentActive( EXPERIMENTAL_FEATURES.V_3_30 );
-
 	const applyClass = useApply();
 	const unapplyClass = useUnapply();
 
-	const undoableUnapply = useMemo( () => {
+	return useMemo( () => {
 		return undoable(
 			{
 				do: ( { classId }: UndoableClassActionPayload ) => {
@@ -103,22 +89,11 @@ export function useUnapplyClass() {
 			}
 		);
 	}, [ activeId, applyClass, element.id, unapplyClass, setActiveId ] );
-
-	const unapplyWithoutHistory = useCallback(
-		( { classId }: UndoableClassActionPayload ) => {
-			unapplyClass( classId );
-		},
-		[ unapplyClass ]
-	);
-
-	return isVersion330Active ? undoableUnapply : unapplyWithoutHistory;
 }
 
 export function useCreateAndApplyClass() {
 	const { id: activeId, setId: setActiveId } = useStyle();
 
-	const isVersion330Active = isExperimentActive( EXPERIMENTAL_FEATURES.V_3_30 );
-
 	const [ provider, createAction ] = useGetStylesRepositoryCreateAction() ?? [ null, null ];
 	const deleteAction = provider?.actions.delete;
 
@@ -157,25 +132,11 @@ export function useCreateAndApplyClass() {
 		);
 	}, [ activeId, applyClass, createAction, deleteAction, provider, setActiveId, unapplyClass ] );
 
-	const createAndApplyWithoutHistory = useCallback(
-		( { classLabel }: CreateAndApplyClassPayload ) => {
-			if ( ! createAction ) {
-				return;
-			}
-
-			const createdId = createAction( classLabel );
-			applyClass( createdId );
-		},
-		[ applyClass, createAction ]
-	);
-
 	if ( ! provider || ! undoableCreateAndApply ) {
 		return [ null, null ];
 	}
 
-	return isVersion330Active
-		? ( [ provider, undoableCreateAndApply ] as const )
-		: ( [ provider, createAndApplyWithoutHistory ] as const );
+	return [ provider, undoableCreateAndApply ] as const;
 }
 
 function useApply() {
@@ -231,24 +192,20 @@ function useClasses() {
 	const { element } = useElement();
 	const currentClassesProp = useClassesProp();
 
-	const isVersion330Active = isExperimentActive( EXPERIMENTAL_FEATURES.V_3_30 );
-
 	return useMemo( () => {
 		const setClasses = ( ids: StyleDefinitionID[] ) => {
 			updateElementSettings( {
 				id: element.id,
 				props: { [ currentClassesProp ]: classesPropTypeUtil.create( ids ) },
-				withHistory: isVersion330Active ? false : true,
+				withHistory: false,
 			} );
 
-			if ( isVersion330Active ) {
-				setDocumentModifiedStatus( true );
-			}
+			setDocumentModifiedStatus( true );
 		};
 
 		const getAppliedClasses = () =>
 			getElementSetting< ClassesPropValue >( element.id, currentClassesProp )?.value || [];
 
 		return { setClasses, getAppliedClasses };
-	}, [ currentClassesProp, element.id, isVersion330Active ] );
+	}, [ currentClassesProp, element.id ] );
 }

package/src/components/css-classes/use-can-convert-local-class-to-global.ts

@@ -0,0 +1,22 @@
+import { isElementsStylesProvider } from '@elementor/editor-styles-repository';
+
+import { useElement } from '../../contexts/element-context';
+import { useStyle } from '../../contexts/style-context';
+
+export const useCanConvertLocalClassToGlobal = () => {
+	const { element } = useElement();
+	const { provider, id, meta } = useStyle();
+	const styleDef = provider?.actions.get( id, { elementId: element.id, ...meta } );
+
+	const isLocalStylesProvider = provider && isElementsStylesProvider( provider?.getKey() );
+	const variants = styleDef?.variants || [];
+
+	const canConvert = !! ( isLocalStylesProvider && variants.length );
+
+	return {
+		canConvert,
+		isLocalStylesProvider,
+		id,
+		styleDef: styleDef || null,
+	};
+};

package/src/components/custom-css.tsx

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { TextField } from '@elementor/ui';
+
+import { useCustomCss } from '../hooks/use-custom-css';
+import { SectionContent } from './section-content';
+
+export const CustomCss = () => {
+	const { customCss, setCustomCss } = useCustomCss();
+
+	return (
+		<SectionContent>
+			<TextField
+				value={ customCss?.raw || '' }
+				onChange={ ( ev: React.ChangeEvent< HTMLInputElement > ) =>
+					setCustomCss( ev.target.value, { history: { propDisplayName: 'Custom CSS' } } )
+				}
+				multiline
+			/>
+		</SectionContent>
+	);
+};

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

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import { Fragment } from 'react';
-import { isExperimentActive } from '@elementor/editor-v1-adapters';
 import { Divider, Stack, Tab, TabPanel, Tabs, useTabs } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
@@ -8,7 +7,6 @@ import { useElement } from '../contexts/element-context';
 import { ScrollProvider } from '../contexts/scroll-context';
 import { useDefaultPanelSettings } from '../hooks/use-default-panel-settings';
 import { useStateByElement } from '../hooks/use-state-by-element';
-import { EXPERIMENTAL_FEATURES } from '../sync/experiments-flags';
 import { SettingsTab } from './settings-tab';
 import { stickyHeaderStyles, StyleTab } from './style-tab';
 
@@ -27,9 +25,7 @@ export const EditingPanelTabs = () => {
 
 const PanelTabContent = () => {
 	const editorDefaults = useDefaultPanelSettings();
-	const defaultComponentTab = isExperimentActive( EXPERIMENTAL_FEATURES.V_3_30 )
-		? ( editorDefaults.defaultTab as TabValue )
-		: 'settings';
+	const defaultComponentTab = editorDefaults.defaultTab as TabValue;
 
 	const [ currentTab, setCurrentTab ] = useStateByElement< TabValue >( 'tab', defaultComponentTab );
 	const { getTabProps, getTabPanelProps, getTabsProps } = useTabs< TabValue >( currentTab );

package/src/components/popover-body.tsx

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import { PopoverBody as BasePopoverBody } from '@elementor/editor-ui';
+
+import { useSectionWidth } from '../contexts/section-context';
+
+type Props = React.ComponentProps< typeof BasePopoverBody >;
+
+export const PopoverBody = ( props: Props ) => {
+	const sectionWidth = useSectionWidth();
+
+	return <BasePopoverBody { ...props } width={ sectionWidth } />;
+};

package/src/components/section.tsx

@@ -1,11 +1,9 @@
 import * as React from 'react';
 import { type PropsWithChildren, type ReactNode, useId, useRef } from 'react';
-import { isExperimentActive } from '@elementor/editor-v1-adapters';
 import { Collapse, Divider, ListItemButton, ListItemText, Stack } from '@elementor/ui';
 
 import { SectionRefContext } from '../contexts/section-context';
 import { useStateByElement } from '../hooks/use-state-by-element';
-import { EXPERIMENTAL_FEATURES } from '../sync/experiments-flags';
 import { CollapseIcon } from './collapse-icon';
 import { type CollapsibleValue, getCollapsibleValue } from './collapsible-content';
 
@@ -27,8 +25,6 @@ export function Section( { title, children, defaultExpanded = false, titleEnd }:
 	const labelId = `label-${ id }`;
 	const contentId = `content-${ id }`;
 
-	const isUsingTitleEnd = isExperimentActive( EXPERIMENTAL_FEATURES.V_3_30 );
-
 	return (
 		<>
 			<ListItemButton
@@ -43,7 +39,7 @@ export function Section( { title, children, defaultExpanded = false, titleEnd }:
 						secondaryTypographyProps={ { color: 'text.primary', variant: 'caption', fontWeight: 'bold' } }
 						sx={ { flexGrow: 0, flexShrink: 1, marginInlineEnd: 1 } }
 					/>
-					{ isUsingTitleEnd ? getCollapsibleValue( titleEnd, isOpen ) : null }
+					{ getCollapsibleValue( titleEnd, isOpen ) }
 				</Stack>
 				<CollapseIcon open={ isOpen } color="secondary" fontSize="tiny" />
 			</ListItemButton>

package/src/components/settings-tab.tsx

@@ -1,22 +1,15 @@
 import * as React from 'react';
 import { ControlFormLabel } from '@elementor/editor-controls';
 import { type Control } from '@elementor/editor-elements';
-import { isExperimentActive } from '@elementor/editor-v1-adapters';
 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 {
-	type ControlType,
-	getControl,
-	getDefaultLayout,
-	getPropTypeUtil,
-} from '../controls-registry/controls-registry';
+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 { EXPERIMENTAL_FEATURES } from '../sync/experiments-flags';
 import { Section } from './section';
 import { SectionsList } from './sections-list';
 
@@ -25,9 +18,7 @@ export const SettingsTab = () => {
 	const settingsDefault = useDefaultPanelSettings();
 
 	const isDefaultExpanded = ( sectionId: string ) =>
-		isExperimentActive( EXPERIMENTAL_FEATURES.V_3_30 )
-			? settingsDefault.defaultSectionsExpanded.settings?.includes( sectionId )
-			: true;
+		settingsDefault.defaultSectionsExpanded.settings?.includes( sectionId );
 
 	return (
 		<SessionStorageProvider prefix={ element.id }>
@@ -64,11 +55,11 @@ export const SettingsTab = () => {
 };
 
 const Control = ( { control }: { control: Control[ 'value' ] } ) => {
-	if ( ! getControl( control.type as ControlType ) ) {
+	if ( ! controlsRegistry.get( control.type as ControlType ) ) {
 		return null;
 	}
 
-	const layout = control.meta?.layout || getDefaultLayout( control.type as ControlType );
+	const layout = control.meta?.layout || controlsRegistry.getLayout( control.type as ControlType );
 	const controlProps = populateChildControlProps( control.props );
 	if ( layout === 'custom' ) {
 		controlProps.label = control.label;
@@ -87,8 +78,8 @@ const Control = ( { control }: { control: Control[ 'value' ] } ) => {
 
 function populateChildControlProps( props: Record< string, unknown > ) {
 	if ( props.childControlType ) {
-		const childComponent = getControl( props.childControlType as ControlType );
-		const childPropType = getPropTypeUtil( props.childControlType as ControlType );
+		const childComponent = controlsRegistry.get( props.childControlType as ControlType );
+		const childPropType = controlsRegistry.getPropTypeUtil( props.childControlType as ControlType );
 		props = {
 			...props,
 			childControlConfig: {