@elementor/editor-editing-panel 1.38.1 → 1.40.0

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

@@ -13,9 +13,9 @@ import {
 	validateStyleLabel,
 } from '@elementor/editor-styles-repository';
 import { WarningInfotip } from '@elementor/editor-ui';
-import { MapPinIcon } from '@elementor/icons';
+import { ColorSwatchIcon, MapPinIcon } from '@elementor/icons';
 import { createLocation } from '@elementor/locations';
-import { Chip, FormLabel, Stack } from '@elementor/ui';
+import { type AutocompleteChangeReason, Box, Chip, FormLabel, Link, Stack, Typography } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
 import { useClassesProp } from '../../contexts/classes-prop-context';
@@ -29,6 +29,7 @@ import {
 	type ValidationResult,
 } from '../creatable-autocomplete';
 import { CssClassItem } from './css-class-item';
+import { useApplyClass, useUnapplyClass } from './use-apply-and-unapply-class';
 
 const ID = 'elementor-css-class-selector';
 const TAGS_LIMIT = 50;
@@ -58,13 +59,13 @@ export const { Slot: ClassSelectorActionsSlot, inject: injectIntoClassSelectorAc
 export function CssClassSelector() {
 	const options = useOptions();
 
-	const { value: appliedIds, setValue: setAppliedIds, pushValue: pushAppliedId } = useAppliedClassesIds();
+	const { value: appliedIds, pushValue: pushAppliedId } = useAppliedClassesIds();
 	const { id: activeId, setId: setActiveId } = useStyle();
 
 	const autocompleteRef = useRef< HTMLElement | null >( null );
 	const [ renameError, setRenameError ] = useState< string | null >( null );
 
-	const handleApply = useHandleApply( appliedIds, setAppliedIds );
+	const handleSelect = useHandleSelect();
 	const { create, validate, entityName } = useCreateAction( { pushAppliedId, setActiveId } );
 
 	const applied = useAppliedOptions( options, appliedIds );
@@ -97,10 +98,11 @@ export function CssClassSelector() {
 					options={ options }
 					selected={ applied }
 					entityName={ entityName }
-					onSelect={ handleApply }
+					onSelect={ handleSelect }
 					onCreate={ create ?? undefined }
 					validate={ validate ?? undefined }
 					limitTags={ TAGS_LIMIT }
+					renderEmptyState={ EmptyState }
 					getLimitTagsText={ ( more ) => (
 						<Chip size="tiny" variant="standard" label={ `+${ more }` } clickable />
 					) }
@@ -139,6 +141,33 @@ export function CssClassSelector() {
 	);
 }
 
+const EmptyState = ( { searchValue, onClear }: { searchValue: string; onClear: () => void } ) => (
+	<Box sx={ { py: 4 } }>
+		<Stack
+			gap={ 1 }
+			alignItems="center"
+			color="text.secondary"
+			justifyContent="center"
+			sx={ { px: 2, m: 'auto', maxWidth: '236px' } }
+		>
+			<ColorSwatchIcon sx={ { transform: 'rotate(90deg)' } } fontSize="large" />
+			<Typography align="center" variant="subtitle2">
+				{ __( 'Sorry, nothing matched', 'elementor' ) }
+				<br />
+				&ldquo;{ searchValue }&rdquo;.
+			</Typography>
+			<Typography align="center" variant="caption" sx={ { mb: 2 } }>
+				{ __( 'With your current role,', 'elementor' ) }
+				<br />
+				{ __( 'you can only use existing classes.', 'elementor' ) }
+			</Typography>
+			<Link color="text.secondary" variant="caption" component="button" onClick={ onClear }>
+				{ __( 'Clear & try again', 'elementor' ) }
+			</Link>
+		</Stack>
+	</Box>
+);
+
 const updateClassByProvider = ( provider: string | null, data: UpdateActionPayload ) => {
 	if ( ! provider ) {
 		return;
@@ -263,42 +292,27 @@ function useAppliedClassesIds() {
 
 	return {
 		value,
-		setValue,
 		pushValue,
 	};
 }
 
-function useHandleApply( appliedIds: StyleDefinitionID[], setAppliedIds: ( ids: StyleDefinitionID[] ) => void ) {
-	const { id: activeId, setId: setActiveId } = useStyle();
-
-	return ( selectedOptions: StyleDefOption[] ) => {
-		const selectedValues = selectedOptions
-			.map( ( { value } ) => value )
-			.filter( ( value ) => value !== EMPTY_OPTION.value );
-
-		const isSameClassesAlreadyApplied =
-			selectedValues.length === appliedIds.length &&
-			selectedValues.every( ( value ) => appliedIds.includes( value ) );
-
-		// Should not trigger to avoid register an undo step.
-		if ( isSameClassesAlreadyApplied ) {
-			return;
-		}
-
-		setAppliedIds( selectedValues );
-
-		const addedValue = selectedValues.find( ( id ) => ! appliedIds.includes( id ) );
-
-		if ( addedValue ) {
-			setActiveId( addedValue );
+function useHandleSelect() {
+	const apply = useApplyClass();
+	const unapply = useUnapplyClass();
 
+	return ( _selectedOptions: StyleDefOption[], reason: AutocompleteChangeReason, option: StyleDefOption ) => {
+		if ( ! option.value ) {
 			return;
 		}
 
-		const removedValue = appliedIds.find( ( id ) => ! selectedValues.includes( id ) );
+		switch ( reason ) {
+			case 'selectOption':
+				apply( { classId: option.value, classLabel: option.label } );
+				break;
 
-		if ( removedValue && removedValue === activeId ) {
-			setActiveId( selectedValues[ 0 ] ?? null );
+			case 'removeOption':
+				unapply( { classId: option.value, classLabel: option.label } );
+				break;
 		}
 	};
 }

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

@@ -0,0 +1,178 @@
+import { useCallback, useMemo } from 'react';
+import { setDocumentModifiedStatus } from '@elementor/editor-documents';
+import { getElementLabel, getElementSetting, updateElementSettings } from '@elementor/editor-elements';
+import { classesPropTypeUtil, type ClassesPropValue } from '@elementor/editor-props';
+import { type StyleDefinitionID } from '@elementor/editor-styles';
+import { isExperimentActive, 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';
+
+type UndoableClassActionPayload = {
+	classId: StyleDefinitionID;
+	classLabel: string;
+};
+
+export function useApplyClass() {
+	const { id: activeId, setId: setActiveId } = useStyle();
+	const { element } = useElement();
+
+	const isVersion330Active = isExperimentActive( 'e_v_3_30' );
+
+	const applyClass = useApply();
+	const unapplyClass = useUnapply();
+
+	const undoableApply = useMemo( () => {
+		return undoable(
+			{
+				do: ( { classId }: UndoableClassActionPayload ) => {
+					const prevActiveId = activeId;
+
+					applyClass( classId );
+					setDocumentModifiedStatus( true );
+
+					return prevActiveId;
+				},
+				undo: ( { classId }: UndoableClassActionPayload, prevActiveId: string | null ) => {
+					unapplyClass( classId );
+					setActiveId( prevActiveId );
+				},
+			},
+			{
+				title: getElementLabel( element.id ),
+				subtitle: ( { classLabel } ) => {
+					/* translators: %s is the class name. */
+					return __( `class %s applied`, 'elementor' ).replace( '%s', classLabel );
+				},
+			}
+		);
+	}, [ 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( 'e_v_3_30' );
+
+	const applyClass = useApply();
+	const unapplyClass = useUnapply();
+
+	const undoableUnapply = useMemo( () => {
+		return undoable(
+			{
+				do: ( { classId }: UndoableClassActionPayload ) => {
+					const prevActiveId = activeId;
+
+					unapplyClass( classId );
+					setDocumentModifiedStatus( true );
+
+					return prevActiveId;
+				},
+				undo: ( { classId }: UndoableClassActionPayload, prevActiveId: string | null ) => {
+					applyClass( classId );
+					setActiveId( prevActiveId );
+				},
+			},
+			{
+				title: getElementLabel( element.id ),
+				subtitle: ( { classLabel } ) => {
+					/* translators: %s is the class name. */
+					return __( `class %s removed`, 'elementor' ).replace( '%s', classLabel );
+				},
+			}
+		);
+	}, [ activeId, applyClass, element.id, unapplyClass, setActiveId ] );
+
+	const unapplyWithoutHistory = useCallback(
+		( { classId }: UndoableClassActionPayload ) => {
+			unapplyClass( classId );
+		},
+		[ unapplyClass ]
+	);
+
+	return isVersion330Active ? undoableUnapply : unapplyWithoutHistory;
+}
+
+function useApply() {
+	const { element } = useElement();
+	const { setId: setActiveId } = useStyle();
+	const { setClasses, getAppliedClasses } = useSetClasses();
+
+	return useCallback(
+		( classIDToApply: StyleDefinitionID ) => {
+			const appliedClasses = getAppliedClasses();
+
+			if ( appliedClasses.includes( classIDToApply ) ) {
+				throw new Error(
+					`Class ${ classIDToApply } is already applied to element ${ element.id }, cannot re-apply.`
+				);
+			}
+
+			const updatedClassesIds = [ ...appliedClasses, classIDToApply ];
+			setClasses( updatedClassesIds );
+			setActiveId( classIDToApply );
+		},
+		[ element.id, getAppliedClasses, setActiveId, setClasses ]
+	);
+}
+
+function useUnapply() {
+	const { element } = useElement();
+	const { id: activeId, setId: setActiveId } = useStyle();
+	const { setClasses, getAppliedClasses } = useSetClasses();
+
+	return useCallback(
+		( classIDToUnapply: StyleDefinitionID ) => {
+			const appliedClasses = getAppliedClasses();
+
+			if ( ! appliedClasses.includes( classIDToUnapply ) ) {
+				throw new Error(
+					`Class ${ classIDToUnapply } is not applied to element ${ element.id }, cannot unapply it.`
+				);
+			}
+
+			const updatedClassesIds = appliedClasses.filter( ( id ) => id !== classIDToUnapply );
+			setClasses( updatedClassesIds );
+
+			if ( activeId === classIDToUnapply ) {
+				setActiveId( updatedClassesIds[ 0 ] ?? null );
+			}
+		},
+		[ activeId, element.id, getAppliedClasses, setActiveId, setClasses ]
+	);
+}
+
+function useSetClasses() {
+	const { element } = useElement();
+	const currentClassesProp = useClassesProp();
+
+	return useMemo( () => {
+		const setClasses = ( ids: StyleDefinitionID[] ) => {
+			updateElementSettings( {
+				id: element.id,
+				props: { [ currentClassesProp ]: classesPropTypeUtil.create( ids ) },
+				withHistory: false,
+			} );
+		};
+
+		const getAppliedClasses = () =>
+			getElementSetting< ClassesPropValue >( element.id, currentClassesProp )?.value || [];
+
+		return {
+			setClasses,
+			getAppliedClasses,
+		};
+	}, [ currentClassesProp, element.id ] );
+}

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

@@ -1,11 +1,14 @@
 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';
 
 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';
 
@@ -23,7 +26,10 @@ export const EditingPanelTabs = () => {
 };
 
 const PanelTabContent = () => {
-	const defaultComponentTab = 'settings';
+	const editorDefaults = useDefaultPanelSettings();
+	const defaultComponentTab = isExperimentActive( EXPERIMENTAL_FEATURES.V_3_30 )
+		? ( editorDefaults.defaultTab as TabValue )
+		: 'settings';
 
 	const [ currentTab, setCurrentTab ] = useStateByElement< TabValue >( 'tab', defaultComponentTab );
 	const { getTabProps, getTabPanelProps, getTabsProps } = useTabs< TabValue >( currentTab );

package/src/components/settings-tab.tsx

@@ -1,6 +1,7 @@
 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';
 
@@ -9,11 +10,19 @@ import { Control as BaseControl } from '../controls-registry/control';
 import { ControlTypeContainer } from '../controls-registry/control-type-container';
 import { type ControlType, getControl, getDefaultLayout } 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';
 
 export const SettingsTab = () => {
 	const { elementType, element } = useElement();
+	const settingsDefault = useDefaultPanelSettings();
+
+	const isDefaultExpanded = ( sectionId: string ) =>
+		isExperimentActive( EXPERIMENTAL_FEATURES.V_3_30 )
+			? settingsDefault.defaultSectionsExpanded.settings?.includes( sectionId )
+			: true;
 
 	return (
 		<SessionStorageProvider prefix={ element.id }>
@@ -25,7 +34,11 @@ export const SettingsTab = () => {
 
 					if ( type === 'section' ) {
 						return (
-							<Section title={ value.label } key={ type + '.' + index } defaultExpanded={ true }>
+							<Section
+								title={ value.label }
+								key={ type + '.' + index }
+								defaultExpanded={ isDefaultExpanded( value.label ) }
+							>
 								{ value.items?.map( ( item ) => {
 									if ( item.type === 'control' ) {
 										return <Control key={ item.value.bind } control={ item.value } />;

package/src/components/style-indicator.tsx

@@ -1,6 +1,6 @@
 import { styled } from '@elementor/ui';
 
-export type StyleIndicatorVariant = 'overridden' | 'local' | 'global';
+type StyleIndicatorVariant = 'overridden' | 'local' | 'global';
 
 export const StyleIndicator = styled( 'div', {
 	shouldForwardProp: ( prop ) => prop !== 'variant',

package/src/components/style-sections/size-section/object-fit-field.tsx

@@ -21,7 +21,7 @@ type Props = {
 export const ObjectFitField = ( { onChange }: Props ) => {
 	return (
 		<StylesField bind="object-fit">
-			<Grid container pt={ 2 } gap={ 2 } alignItems="center" flexWrap="nowrap">
+			<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap">
 				<Grid item xs={ 6 }>
 					<ControlLabel>{ __( 'Object fit', 'elementor' ) }</ControlLabel>
 				</Grid>

package/src/components/style-sections/size-section/object-position-field.tsx

@@ -25,7 +25,7 @@ type Props = {
 export const ObjectPositionField = ( { onChange }: Props ) => {
 	return (
 		<StylesField bind="object-position">
-			<Grid container pt={ 2 } gap={ 2 } alignItems="center" flexWrap="nowrap">
+			<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap">
 				<Grid item xs={ 6 }>
 					<ControlLabel>{ __( 'Object position', 'elementor' ) }</ControlLabel>
 				</Grid>

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { type ExtendedValue, SizeControl } from '@elementor/editor-controls';
+import { AspectRatioControl, type ExtendedValue, SizeControl } from '@elementor/editor-controls';
 import type { StringPropValue } from '@elementor/editor-props';
 import { isExperimentActive } from '@elementor/editor-v1-adapters';
 import { Grid, Stack } from '@elementor/ui';
@@ -68,10 +68,18 @@ export const SizeSection = () => {
 			</Stack>
 			{ isVersion330Active && (
 				<CollapsibleContent>
-					<ObjectFitField onChange={ onFitChange } />
-					<Grid item xs={ 6 }>
-						{ isNotFill && <ObjectPositionField /> }
-					</Grid>
+					<Stack gap={ 2 }>
+						<StylesField bind={ 'aspect-ratio' }>
+							<AspectRatioControl label={ __( 'Aspect Ratio', 'elementor' ) } />
+						</StylesField>
+						<PanelDivider />
+						<ObjectFitField onChange={ onFitChange } />
+						{ isNotFill && (
+							<Grid item xs={ 6 }>
+								<ObjectPositionField />
+							</Grid>
+						) }
+					</Stack>
 				</CollapsibleContent>
 			) }
 		</SectionContent>

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

@@ -25,7 +25,7 @@ import { WordSpacingField } from './word-spacing-field';
 export const TypographySection = () => {
 	const [ columnCount ] = useStylesField< NumberPropValue >( 'column-count' );
 	const isVersion330Active = isExperimentActive( 'e_v_3_30' );
-	const hasMultiColumns = columnCount?.value && columnCount?.value > 1;
+	const hasMultiColumns = !! ( columnCount?.value && columnCount?.value > 1 );
 	return (
 		<SectionContent>
 			<FontFamilyField />

package/src/components/style-tab.tsx

@@ -3,6 +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 { isExperimentActive } from '@elementor/editor-v1-adapters';
 import { SessionStorageProvider } from '@elementor/session';
 import { Divider, Stack } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
@@ -13,6 +14,8 @@ import { useScrollDirection } from '../contexts/scroll-context';
 import { StyleProvider } from '../contexts/style-context';
 import { StyleInheritanceProvider } from '../contexts/styles-inheritance-context';
 import { useActiveStyleDefId } from '../hooks/use-active-style-def-id';
+import { useDefaultPanelSettings } from '../hooks/use-default-panel-settings';
+import { EXPERIMENTAL_FEATURES } from '../sync/experiments-flags';
 import { CssClassSelector } from './css-classes/css-class-selector';
 import { Section } from './section';
 import { SectionsList } from './sections-list';
@@ -35,6 +38,27 @@ export const stickyHeaderStyles = {
 	transition: 'top 300ms ease',
 };
 
+type Section = {
+	component: () => React.JSX.Element;
+	name: string;
+	title: string;
+};
+
+const PanelSection = ( { section }: { section: Section } ) => {
+	const { component, name, title } = section;
+	const tabDefaults = useDefaultPanelSettings();
+	const SectionComponent = component;
+	const isExpanded = isExperimentActive( EXPERIMENTAL_FEATURES.V_3_30 )
+		? tabDefaults.defaultSectionsExpanded.style?.includes( name )
+		: true;
+
+	return (
+		<Section title={ title } defaultExpanded={ isExpanded }>
+			<SectionComponent />
+		</Section>
+	);
+};
+
 export const StyleTab = () => {
 	const currentClassesProp = useCurrentClassesProp();
 	const [ activeStyleDefId, setActiveStyleDefId ] = useActiveStyleDefId( currentClassesProp );
@@ -59,30 +83,62 @@ export const StyleTab = () => {
 							<Divider />
 						</ClassesHeader>
 						<SectionsList>
-							<Section title={ __( 'Layout', 'elementor' ) }>
-								<LayoutSection />
-							</Section>
-							<Section title={ __( 'Spacing', 'elementor' ) }>
-								<SpacingSection />
-							</Section>
-							<Section title={ __( 'Size', 'elementor' ) }>
-								<SizeSection />
-							</Section>
-							<Section title={ __( 'Position', 'elementor' ) }>
-								<PositionSection />
-							</Section>
-							<Section title={ __( 'Typography', 'elementor' ) }>
-								<TypographySection />
-							</Section>
-							<Section title={ __( 'Background', 'elementor' ) }>
-								<BackgroundSection />
-							</Section>
-							<Section title={ __( 'Border', 'elementor' ) }>
-								<BorderSection />
-							</Section>
-							<Section title={ __( 'Effects', 'elementor' ) }>
-								<EffectsSection />
-							</Section>
+							<PanelSection
+								section={ {
+									component: LayoutSection,
+									name: 'Layout',
+									title: __( 'Layout', 'elementor' ),
+								} }
+							/>
+							<PanelSection
+								section={ {
+									component: SpacingSection,
+									name: 'Spacing',
+									title: __( 'Spacing', 'elementor' ),
+								} }
+							/>
+							<PanelSection
+								section={ {
+									component: SizeSection,
+									name: 'Size',
+									title: __( 'Size', 'elementor' ),
+								} }
+							/>
+							<PanelSection
+								section={ {
+									component: PositionSection,
+									name: 'Position',
+									title: __( 'Position', 'elementor' ),
+								} }
+							/>
+							<PanelSection
+								section={ {
+									component: TypographySection,
+									name: 'Typography',
+									title: __( 'Typography', 'elementor' ),
+								} }
+							/>
+							<PanelSection
+								section={ {
+									component: BackgroundSection,
+									name: 'Background',
+									title: __( 'Background', 'elementor' ),
+								} }
+							/>
+							<PanelSection
+								section={ {
+									component: BorderSection,
+									name: 'Border',
+									title: __( 'Border', 'elementor' ),
+								} }
+							/>
+							<PanelSection
+								section={ {
+									component: EffectsSection,
+									name: 'Effects',
+									title: __( 'Effects', 'elementor' ),
+								} }
+							/>
 						</SectionsList>
 					</StyleInheritanceProvider>
 				</SessionStorageProvider>
@@ -114,3 +170,5 @@ function useCurrentClassesProp(): string {
 
 	return prop[ 0 ];
 }
+
+export { PanelSection as StyleTabSection };

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

@@ -5,6 +5,7 @@ import {
 	SelectControl,
 	SizeControl,
 	SvgMediaControl,
+	SwitchControl,
 	TextAreaControl,
 	TextControl,
 	UrlControl,
@@ -22,6 +23,7 @@ const controlTypes = {
 	select: { component: SelectControl, layout: 'two-columns' },
 	link: { component: LinkControl, layout: 'full' },
 	url: { component: UrlControl, layout: 'full' },
+	switch: { component: SwitchControl, layout: 'two-columns' },
 } as const satisfies ControlRegistry;
 
 export type ControlType = keyof typeof controlTypes;

package/src/hooks/use-active-style-def-id.ts

@@ -1,12 +1,15 @@
-import { useState } from 'react';
 import { getElementStyles, useElementSetting } from '@elementor/editor-elements';
 import { type ClassesPropValue, type PropKey } from '@elementor/editor-props';
 import { type StyleDefinitionID } from '@elementor/editor-styles';
 
 import { useElement } from '../contexts/element-context';
+import { useStateByElement } from './use-state-by-element';
 
 export function useActiveStyleDefId( classProp: PropKey ) {
-	const [ activeStyledDefId, setActiveStyledDefId ] = useState< StyleDefinitionID | null >( null );
+	const [ activeStyledDefId, setActiveStyledDefId ] = useStateByElement< StyleDefinitionID | null >(
+		'active-style-id',
+		null
+	);
 
 	const appliedClassesIds = useAppliedClassesIds( classProp )?.value || [];
 

package/src/hooks/use-default-panel-settings.ts

@@ -0,0 +1,33 @@
+import { createContext, useContext } from 'react';
+
+import { useElement } from '../contexts/element-context';
+
+type Defaults = {
+	defaultSectionsExpanded: Record< string, string[] >;
+	defaultTab: string;
+};
+
+const fallbackEditorSettings: Defaults = {
+	defaultSectionsExpanded: {
+		settings: [ 'Content', 'Settings' ],
+		style: [],
+	},
+	defaultTab: 'settings',
+};
+
+const defaultPanelSettingsContext = createContext< Record< string, Defaults | undefined > >( {
+	'e-div-block': {
+		defaultSectionsExpanded: fallbackEditorSettings.defaultSectionsExpanded,
+		defaultTab: 'style',
+	},
+	'e-flexbox': {
+		defaultSectionsExpanded: fallbackEditorSettings.defaultSectionsExpanded,
+		defaultTab: 'style',
+	},
+} );
+
+export const useDefaultPanelSettings = () => {
+	const { element } = useElement();
+	const defaults = useContext( defaultPanelSettingsContext )[ element.type ];
+	return defaults || fallbackEditorSettings;
+};

package/src/hooks/use-state-by-element.ts

@@ -3,10 +3,11 @@ import { isExperimentActive } from '@elementor/editor-v1-adapters';
 import { getSessionStorageItem, setSessionStorageItem } from '@elementor/session';
 
 import { useElement } from '../contexts/element-context';
+import { EXPERIMENTAL_FEATURES } from '../sync/experiments-flags';
 
 export const useStateByElement = < T >( key: string, initialValue: T ) => {
 	const { element } = useElement();
-	const isFeatureActive = isExperimentActive( 'e_v_3_30' );
+	const isFeatureActive = isExperimentActive( EXPERIMENTAL_FEATURES.V_3_30 );
 	const lookup = `elementor/editor-state/${ element.id }/${ key }`;
 	const storedValue = isFeatureActive ? getSessionStorageItem< T >( lookup ) : initialValue;
 	const [ value, setValue ] = useState( storedValue ?? initialValue );