@elementor/editor-editing-panel 1.27.0 → 1.28.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elementor/editor-editing-panel",
-  "version": "1.27.0",
+  "version": "1.28.0",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -39,17 +39,17 @@
     "dev": "tsup --config=../../tsup.dev.ts"
   },
   "dependencies": {
-    "@elementor/editor": "0.18.5",
-    "@elementor/editor-canvas": "0.17.0",
-    "@elementor/editor-controls": "0.24.0",
+    "@elementor/editor": "0.18.6",
+    "@elementor/editor-canvas": "0.18.0",
+    "@elementor/editor-controls": "0.25.0",
     "@elementor/editor-current-user": "0.3.0",
-    "@elementor/editor-elements": "0.8.0",
-    "@elementor/editor-panels": "0.14.0",
-    "@elementor/editor-props": "0.11.1",
+    "@elementor/editor-elements": "0.8.1",
+    "@elementor/editor-panels": "0.14.1",
+    "@elementor/editor-props": "0.12.0",
     "@elementor/editor-responsive": "0.13.4",
-    "@elementor/editor-styles": "0.6.5",
-    "@elementor/editor-styles-repository": "0.8.3",
-    "@elementor/editor-ui": "0.7.0",
+    "@elementor/editor-styles": "0.6.6",
+    "@elementor/editor-styles-repository": "0.8.4",
+    "@elementor/editor-ui": "0.7.1",
     "@elementor/editor-v1-adapters": "0.11.0",
     "@elementor/icons": "1.37.0",
     "@elementor/locations": "0.7.7",

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { type ReactElement, useState } from 'react';
-import { stylesRepository } from '@elementor/editor-styles-repository';
+import { stylesRepository, validateStyleLabel } from '@elementor/editor-styles-repository';
 import { EditableField, EllipsisWithTooltip, useEditable } from '@elementor/editor-ui';
 import { DotsVerticalIcon } from '@elementor/icons';
 import {
@@ -21,8 +21,8 @@ import { CssClassMenu } from './css-class-menu';
 
 type CssClassItemProps = {
 	id: string | null;
+	provider: string | null;
 	label: string;
-	provider: string;
 	isActive: boolean;
 	color: ChipOwnProps[ 'color' ];
 	icon: ReactElement | null;
@@ -36,8 +36,8 @@ const CHIP_SIZE = 'tiny';
 
 export function CssClassItem( {
 	id,
-	label,
 	provider,
+	label,
 	isActive,
 	color: colorProp,
 	icon,
@@ -64,7 +64,7 @@ export function CssClassItem( {
 
 	const color = error ? 'error' : colorProp;
 
-	const providerActions = stylesRepository.getProviderByKey( provider )?.actions;
+	const providerActions = provider ? stylesRepository.getProviderByKey( provider )?.actions : null;
 	const allowRename = Boolean( providerActions?.update );
 
 	const isShowingState = isActive && meta.state;
@@ -153,13 +153,11 @@ export function CssClassItem( {
 }
 
 const validateLabel = ( newLabel: string ) => {
-	if ( ! stylesRepository.isLabelValid( newLabel ) ) {
-		return __( 'Invalid format', 'elementor' );
-	}
+	const result = validateStyleLabel( newLabel );
 
-	if ( stylesRepository.isLabelExist( newLabel ) ) {
-		return __( 'Name exists', 'elementor' );
+	if ( result.isValid ) {
+		return null;
 	}
 
-	return null;
+	return result.error;
 };

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { type StyleDefinitionState } from '@elementor/editor-styles';
-import { ELEMENTS_STYLES_PROVIDER_KEY, stylesRepository } from '@elementor/editor-styles-repository';
+import { isElementsStylesProvider, stylesRepository } from '@elementor/editor-styles-repository';
 import { MenuListItem } from '@elementor/editor-ui';
 import { bindMenu, Divider, Menu, MenuSubheader, type PopupState, Stack } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
@@ -14,7 +14,7 @@ const STATES: NonNullable< StyleDefinitionState >[] = [ 'hover', 'focus', 'activ
 
 type CssClassMenuProps = {
 	styleId: string | null;
-	provider: string;
+	provider: string | null;
 	popupState: PopupState;
 	handleRename: () => void;
 	anchorEl: HTMLElement | null;
@@ -23,7 +23,7 @@ type CssClassMenuProps = {
 export function CssClassMenu( { styleId, provider, popupState, handleRename, anchorEl }: CssClassMenuProps ) {
 	const styledStates = useStyledStates( styleId );
 
-	const indicatorVariant = provider === ELEMENTS_STYLES_PROVIDER_KEY ? 'local' : 'global';
+	const indicatorVariant = ! provider || isElementsStylesProvider( provider ) ? 'local' : 'global';
 
 	const handleKeyDown = ( e: React.KeyboardEvent< HTMLElement > ) => {
 		e.stopPropagation();
@@ -43,6 +43,8 @@ export function CssClassMenu( { styleId, provider, popupState, handleRename, anc
 				vertical: -4,
 			} }
 			onKeyDown={ handleKeyDown }
+			// Workaround for focus-visible issue.
+			disableAutoFocusItem
 		>
 			{ /* 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, styleId, handleRename, closeMenu: popupState.close } ) }
@@ -91,12 +93,12 @@ function getMenuItemsByProvider( {
 	handleRename,
 	closeMenu,
 }: {
-	provider: string;
+	provider: string | null;
 	styleId: string | null;
 	handleRename: () => void;
 	closeMenu: () => void;
 } ) {
-	if ( ! styleId ) {
+	if ( ! styleId || ! provider ) {
 		return [];
 	}
 

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

@@ -4,16 +4,17 @@ import { getElementSetting, updateElementSettings, useElementSetting } from '@el
 import { classesPropTypeUtil, type ClassesPropValue } from '@elementor/editor-props';
 import { type StyleDefinitionID } from '@elementor/editor-styles';
 import {
-	ELEMENTS_STYLES_PROVIDER_KEY,
+	isElementsStylesProvider,
 	type StylesProvider,
 	stylesRepository,
 	type UpdateActionPayload,
 	useCreateActionsByProvider,
 	useProviders,
+	validateStyleLabel,
 } from '@elementor/editor-styles-repository';
 import { MapPinIcon } from '@elementor/icons';
 import { createLocation } from '@elementor/locations';
-import { Chip, Stack, Typography } from '@elementor/ui';
+import { Chip, FormLabel, Stack } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
 import { useClassesProp } from '../../contexts/classes-prop-context';
@@ -28,7 +29,7 @@ const TAGS_LIMIT = 50;
 type StyleDefOption = Option & {
 	color: 'accent' | 'global';
 	icon: ReactElement | null;
-	provider: string;
+	provider: string | null;
 };
 
 const EMPTY_OPTION = {
@@ -37,7 +38,7 @@ const EMPTY_OPTION = {
 	fixed: true,
 	color: 'accent',
 	icon: <MapPinIcon />,
-	provider: ELEMENTS_STYLES_PROVIDER_KEY,
+	provider: null,
 } satisfies StyleDefOption;
 
 export const { Slot: ClassSelectorActionsSlot, inject: injectIntoClassSelectorActions } = createLocation();
@@ -60,12 +61,14 @@ export function CssClassSelector() {
 	const applied = useAppliedOptions( options, appliedIds );
 	const active = applied.find( ( option ) => option.value === activeId ) ?? EMPTY_OPTION;
 
+	const showPlaceholder = applied.every( ( { fixed } ) => fixed );
+
 	return (
-		<Stack gap={ 1 } p={ 2 }>
+		<Stack p={ 2 }>
 			<Stack direction="row" gap={ 1 } alignItems="center" justifyContent="space-between">
-				<Typography component="label" variant="caption" htmlFor={ ID }>
+				<FormLabel htmlFor={ ID } size="small">
 					{ __( 'Classes', 'elementor' ) }
-				</Typography>
+				</FormLabel>
 				<Stack direction="row" gap={ 1 }>
 					<ClassSelectorActionsSlot />
 				</Stack>
@@ -73,6 +76,7 @@ export function CssClassSelector() {
 			<MultiCombobox
 				id={ ID }
 				size="tiny"
+				placeholder={ showPlaceholder ? __( 'Type to search/add global classes', 'elementor' ) : undefined }
 				options={ options }
 				selected={ applied }
 				onSelect={ handleApply }
@@ -114,7 +118,11 @@ export function CssClassSelector() {
 	);
 }
 
-const updateClassByProvider = ( provider: string, data: UpdateActionPayload ) => {
+const updateClassByProvider = ( provider: string | null, data: UpdateActionPayload ) => {
+	if ( ! provider ) {
+		return;
+	}
+
 	const providerInstance = stylesRepository.getProviderByKey( provider );
 
 	if ( ! providerInstance ) {
@@ -132,8 +140,8 @@ function useOptions() {
 	return useProviders()
 		.filter( isProviderEditable )
 		.flatMap< StyleDefOption >( ( provider ) => {
-			const isElements = provider.key === ELEMENTS_STYLES_PROVIDER_KEY;
-			const styleDefs = provider.actions.get( { elementId: element.id } );
+			const isElements = isElementsStylesProvider( provider.getKey() );
+			const styleDefs = provider.actions.all( { elementId: element.id } );
 
 			// Add empty local option for elements, as fallback.
 			if ( isElements && styleDefs.length === 0 ) {
@@ -147,7 +155,7 @@ function useOptions() {
 					fixed: isElements,
 					color: isElements ? 'accent' : 'global',
 					icon: isElements ? <MapPinIcon /> : null,
-					provider: provider.key,
+					provider: provider.getKey(),
 					// translators: %s is the plural label of the provider (e.g "Existing classes").
 					group: __( 'Existing %s', 'elementor' ).replace( '%s', provider.labels?.plural ?? '' ),
 				};
@@ -168,7 +176,7 @@ function useCreateActions( {
 			label: ( value ) => __( 'Create "%s"', 'elementor' ).replace( '%s', value ),
 			// translators: %s is the singular label of css class provider (e.g "CSS Class").
 			group: __( 'Create a new %s', 'elementor' ).replace( '%s', provider.labels?.singular ?? '' ),
-			condition: ( _, inputValue ) => isLabelValid( inputValue ) && ! hasReachedLimit( provider ),
+			condition: ( _, inputValue ) => validateStyleLabel( inputValue ).isValid && ! hasReachedLimit( provider ),
 			apply: ( label ) => {
 				const createdId = create( label );
 
@@ -184,22 +192,14 @@ function useCreateActions( {
 }
 
 function hasReachedLimit( provider: StylesProvider ) {
-	if ( provider.limit === undefined ) {
-		return false;
-	}
-
-	return provider.actions.get().length >= provider.limit;
-}
-
-function isLabelValid( newLabel: string ) {
-	return stylesRepository.isLabelValid( newLabel ) && ! stylesRepository.isLabelExist( newLabel );
+	return provider.actions.all().length >= provider.limit;
 }
 
 function useAppliedOptions( options: StyleDefOption[], appliedIds: StyleDefinitionID[] ) {
 	const applied = options.filter( ( option ) => option.value && appliedIds.includes( option.value ) );
 
 	const hasElementsProviderStyleApplied = applied.some(
-		( option ) => option.provider === ELEMENTS_STYLES_PROVIDER_KEY
+		( option ) => option.provider && isElementsStylesProvider( option.provider )
 	);
 
 	if ( ! hasElementsProviderStyleApplied ) {

package/src/components/multi-combobox.tsx

@@ -39,6 +39,7 @@ type Props< TOption extends Option > = Omit<
 	selected: TOption[];
 	options: TOption[];
 	onSelect?: ( value: TOption[] ) => void;
+	placeholder?: string;
 };
 
 export function MultiCombobox< TOption extends Option >( {
@@ -46,6 +47,7 @@ export function MultiCombobox< TOption extends Option >( {
 	selected,
 	options,
 	onSelect,
+	placeholder,
 	...props
 }: Props< TOption > ) {
 	const filter = useFilterOptions< TOption >();
@@ -67,6 +69,7 @@ export function MultiCombobox< TOption extends Option >( {
 			renderInput={ ( params ) => (
 				<TextField
 					{ ...params }
+					placeholder={ placeholder }
 					sx={ ( theme: Theme ) => ( {
 						'.MuiAutocomplete-inputRoot.MuiInputBase-adornedStart': {
 							paddingLeft: theme.spacing( 0.25 ),

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

@@ -3,45 +3,51 @@ import { type ToggleButtonGroupItem, ToggleControl } from '@elementor/editor-con
 import { Stack } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
+import { useStylesInheritanceField } from '../../../contexts/styles-inheritance-context';
 import { StylesField } from '../../../controls-registry/styles-field';
 import { ControlLabel } from '../../control-label';
 
 type Displays = 'block' | 'flex' | 'inline-block' | 'inline-flex';
 
+const displayFieldOptions: ToggleButtonGroupItem< Displays >[] = [
+	{
+		value: 'block',
+		renderContent: () => __( 'Block', 'elementor' ),
+		label: __( 'Block', 'elementor' ),
+		showTooltip: true,
+	},
+	{
+		value: 'flex',
+		renderContent: () => __( 'Flex', 'elementor' ),
+		label: __( 'Flex', 'elementor' ),
+		showTooltip: true,
+	},
+	{
+		value: 'inline-block',
+		renderContent: () => __( 'In-blk', 'elementor' ),
+		label: __( 'Inline-block', 'elementor' ),
+		showTooltip: true,
+	},
+	{
+		value: 'inline-flex',
+		renderContent: () => __( 'In-flx', 'elementor' ),
+		label: __( 'Inline-flex', 'elementor' ),
+		showTooltip: true,
+	},
+];
+
 export const DisplayField = () => {
-	const options: ToggleButtonGroupItem< Displays >[] = [
-		{
-			value: 'block',
-			renderContent: () => __( 'Block', 'elementor' ),
-			label: __( 'Block', 'elementor' ),
-			showTooltip: true,
-		},
-		{
-			value: 'flex',
-			renderContent: () => __( 'Flex', 'elementor' ),
-			label: __( 'Flex', 'elementor' ),
-			showTooltip: true,
-		},
-		{
-			value: 'inline-block',
-			renderContent: () => __( 'In-blk', 'elementor' ),
-			label: __( 'Inline-block', 'elementor' ),
-			showTooltip: true,
-		},
-		{
-			value: 'inline-flex',
-			renderContent: () => __( 'In-flx', 'elementor' ),
-			label: __( 'Inline-flex', 'elementor' ),
-			showTooltip: true,
-		},
-	];
+	const placeholder = useDisplayPlaceholderValue();
 
 	return (
-		<StylesField bind="display">
+		<StylesField bind="display" placeholder={ placeholder }>
 			<Stack gap={ 0.75 }>
 				<ControlLabel>{ __( 'Display', 'elementor' ) }</ControlLabel>
-				<ToggleControl options={ options } fullWidth={ true } />
+				<ToggleControl options={ displayFieldOptions } fullWidth={ true } />
 			</Stack>
 		</StylesField>
 	);
 };
+
+// TODO - placing this logic deliberately here, and will be removed once applied automatically to all style fields as part of ED-18491
+export const useDisplayPlaceholderValue = () => useStylesInheritanceField( 'display' )[ 0 ]?.value ?? undefined;

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

@@ -12,7 +12,7 @@ import { SectionContent } from '../../section-content';
 import { AlignContentField } from './align-content-field';
 import { AlignItemsField } from './align-items-field';
 import { AlignSelfChild } from './align-self-child-field';
-import { DisplayField } from './display-field';
+import { DisplayField, useDisplayPlaceholderValue } from './display-field';
 import { FlexDirectionField } from './flex-direction-field';
 import { FlexOrderField } from './flex-order-field';
 import { FlexSizeField } from './flex-size-field';
@@ -22,6 +22,8 @@ import { WrapField } from './wrap-field';
 
 export const LayoutSection = () => {
 	const [ display ] = useStylesField< StringPropValue >( 'display' );
+	const displayPlaceholder = useDisplayPlaceholderValue();
+	const isDisplayFlex = shouldDisplayFlexFields( display, displayPlaceholder as StringPropValue );
 	const { element } = useElement();
 	const parent = useParentElement( element.id );
 	const parentStyle = useComputedStyle( parent?.id || null );
@@ -29,7 +31,7 @@ export const LayoutSection = () => {
 	return (
 		<SectionContent>
 			<DisplayField />
-			{ ( 'flex' === display?.value || 'inline-flex' === display?.value ) && <FlexFields /> }
+			{ isDisplayFlex && <FlexFields /> }
 			{ 'flex' === parentStyle?.display && <FlexChildFields /> }
 		</SectionContent>
 	);
@@ -60,3 +62,13 @@ const FlexChildFields = () => (
 		<FlexSizeField />
 	</>
 );
+
+const shouldDisplayFlexFields = ( display: StringPropValue | null, local: StringPropValue ) => {
+	const value = display?.value ?? local?.value;
+
+	if ( ! value ) {
+		return false;
+	}
+
+	return 'flex' === value || 'inline-flex' === value;
+};

package/src/components/style-tab.tsx

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import { useState } from 'react';
-import { getElementStyles, useElementSetting } from '@elementor/editor-elements';
-import { CLASSES_PROP_KEY, type ClassesPropValue, type PropKey } from '@elementor/editor-props';
+import { CLASSES_PROP_KEY } from '@elementor/editor-props';
 import { useActiveBreakpoint } from '@elementor/editor-responsive';
 import { type StyleDefinitionID, type StyleDefinitionState } from '@elementor/editor-styles';
 import { SessionStorageProvider } from '@elementor/session';
@@ -12,6 +11,7 @@ import { ClassesPropProvider } from '../contexts/classes-prop-context';
 import { useElement } from '../contexts/element-context';
 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 { Section } from './section';
 import { SectionsList } from './sections-list';
@@ -78,23 +78,6 @@ export const StyleTab = () => {
 	);
 };
 
-function useActiveStyleDefId( currentClassesProp: PropKey ) {
-	const [ activeStyledDefId, setActiveStyledDefId ] = useState< StyleDefinitionID | null >( null );
-
-	const fallback = useFirstElementStyleDef( currentClassesProp );
-
-	return [ activeStyledDefId || fallback?.id || null, setActiveStyledDefId ] as const;
-}
-
-function useFirstElementStyleDef( currentClassesProp: PropKey ) {
-	const { element } = useElement();
-
-	const classesIds = useElementSetting< ClassesPropValue >( element.id, currentClassesProp )?.value || [];
-	const stylesDefs = getElementStyles( element.id ) ?? {};
-
-	return Object.values( stylesDefs ).find( ( styleDef ) => classesIds.includes( styleDef.id ) );
-}
-
 function useCurrentClassesProp(): string {
 	const { elementType } = useElement();
 

package/src/contexts/style-context.tsx

@@ -52,7 +52,7 @@ export function useStyle() {
 
 export function getProviderByStyleId( styleId: StyleDefinitionID ) {
 	const styleProvider = stylesRepository.getProviders().find( ( provider ) => {
-		return provider.actions.get().find( ( style ) => style.id === styleId );
+		return provider.actions.all().find( ( style ) => style.id === styleId );
 	} );
 
 	return styleProvider ?? null;

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

@@ -9,10 +9,11 @@ import { createTopLevelOjectType } from './create-top-level-object-type';
 
 export type StylesFieldProps = {
 	bind: PropKey;
+	placeholder?: PropValue;
 	children: React.ReactNode;
 };
 
-export const StylesField = ( { bind, children }: StylesFieldProps ) => {
+export const StylesField = ( { bind, placeholder, children }: StylesFieldProps ) => {
 	const [ value, setValue ] = useStylesField( bind );
 
 	const stylesSchema = getStylesSchema();
@@ -20,6 +21,7 @@ export const StylesField = ( { bind, children }: StylesFieldProps ) => {
 	const propType = createTopLevelOjectType( { schema: stylesSchema } );
 
 	const values = { [ bind ]: value };
+	const placeholderValues = { [ bind ]: placeholder };
 
 	const setValues = ( newValue: Record< string, PropValue > ) => {
 		setValue( newValue[ bind ] );
@@ -34,7 +36,12 @@ export const StylesField = ( { bind, children }: StylesFieldProps ) => {
 				},
 			] }
 		>
-			<PropProvider propType={ propType } value={ values } setValue={ setValues }>
+			<PropProvider
+				propType={ propType }
+				value={ values }
+				setValue={ setValues }
+				placeholder={ placeholderValues }
+			>
 				<PropKeyProvider bind={ bind }>{ children }</PropKeyProvider>
 			</PropProvider>
 		</ControlAdornmentsProvider>

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

@@ -0,0 +1,36 @@
+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';
+
+export function useActiveStyleDefId( classProp: PropKey ) {
+	const [ activeStyledDefId, setActiveStyledDefId ] = useState< StyleDefinitionID | null >( null );
+
+	const appliedClassesIds = useAppliedClassesIds( classProp )?.value || [];
+
+	const fallback = useFirstAppliedClass( appliedClassesIds );
+
+	const activeAndAppliedClassId = useActiveAndAppliedClassId( activeStyledDefId, appliedClassesIds );
+	return [ activeAndAppliedClassId || fallback?.id || null, setActiveStyledDefId ] as const;
+}
+
+function useFirstAppliedClass( appliedClassesIds: string[] ) {
+	const { element } = useElement();
+	const stylesDefs = getElementStyles( element.id ) ?? {};
+
+	return Object.values( stylesDefs ).find( ( styleDef ) => appliedClassesIds.includes( styleDef.id ) );
+}
+
+function useAppliedClassesIds( classProp: PropKey ) {
+	const { element } = useElement();
+
+	return useElementSetting< ClassesPropValue >( element.id, classProp );
+}
+
+function useActiveAndAppliedClassId( id: StyleDefinitionID | null, appliedClassesIds: string[] ) {
+	const isClassApplied = !! id && appliedClassesIds.includes( id );
+
+	return isClassApplied ? id : null;
+}

package/src/hooks/use-styles-fields.ts

@@ -9,7 +9,7 @@ import {
 import type { Props } from '@elementor/editor-props';
 import { getVariantByMeta, type StyleDefinition, type StyleDefinitionVariant } from '@elementor/editor-styles';
 import { type StylesProvider } from '@elementor/editor-styles-repository';
-import { LOCAL_STYLES_RESERVED_LABEL } from '@elementor/editor-styles-repository';
+import { ELEMENTS_STYLES_RESERVED_LABEL } from '@elementor/editor-styles-repository';
 import { undoable } from '@elementor/editor-v1-adapters';
 import { __ } from '@wordpress/i18n';
 
@@ -78,10 +78,10 @@ function getProps< T extends Props >( { styleId, elementId, provider, meta, prop
 		return null;
 	}
 
-	const style = provider.actions.getById?.( styleId, { elementId } );
+	const style = provider.actions.get( styleId, { elementId } );
 
 	if ( ! style ) {
-		throw new StyleNotFoundUnderProviderError( { context: { styleId, providerKey: provider.key } } );
+		throw new StyleNotFoundUnderProviderError( { context: { styleId, providerKey: provider.getKey() } } );
 	}
 
 	const variant = getVariantByMeta( style, meta );
@@ -100,7 +100,7 @@ function useUndoableCreateElementStyle() {
 				do: ( payload: UndoableCreateElementStyleArgs ) => {
 					return createElementStyle( {
 						...payload,
-						label: LOCAL_STYLES_RESERVED_LABEL,
+						label: ELEMENTS_STYLES_RESERVED_LABEL,
 					} );
 				},
 
@@ -112,7 +112,7 @@ function useUndoableCreateElementStyle() {
 					return createElementStyle( {
 						...payload,
 						styleId,
-						label: LOCAL_STYLES_RESERVED_LABEL,
+						label: ELEMENTS_STYLES_RESERVED_LABEL,
 					} );
 				},
 			},
@@ -139,11 +139,11 @@ function useUndoableUpdateStyle() {
 				do: ( { elementId, styleId, provider, meta, props }: UndoableUpdateStyleArgs ) => {
 					if ( ! provider.actions.updateProps ) {
 						throw new StylesProviderCannotUpdatePropsError( {
-							context: { providerKey: provider.key },
+							context: { providerKey: provider.getKey() },
 						} );
 					}
 
-					const style = provider.actions.getById( styleId, { elementId } );
+					const style = provider.actions.get( styleId, { elementId } );
 
 					const prevProps = getCurrentProps( style, meta );
 

package/src/index.ts

@@ -4,6 +4,4 @@ export { replaceControl } from './control-replacement';
 export { injectIntoClassSelectorActions } from './components/css-classes/css-class-selector';
 export { usePanelActions, usePanelStatus } from './panel';
 
-import init from './init';
-
-init();
+export { init } from './init';

package/src/init.ts

@@ -8,7 +8,7 @@ import { init as initDynamics } from './dynamics/init';
 import { panel } from './panel';
 import { isAtomicWidgetSelected } from './sync/is-atomic-widget-selected';
 
-export default function init() {
+export function init() {
 	registerPanel( panel );
 	blockV1Panel();
 

package/src/styles-inheritance/create-snapshots-manager.ts

@@ -1,3 +1,4 @@
+import { filterEmptyValues } from '@elementor/editor-props';
 import { type BreakpointId, type BreakpointNode } from '@elementor/editor-responsive';
 import { type StyleDefinitionState } from '@elementor/editor-styles';
 
@@ -141,13 +142,19 @@ function buildInitialSnapshotFromStyles( styles: StyleVariantDetails[] ): Styles
 		} = styleData;
 
 		Object.entries( props ).forEach( ( [ key, value ] ) => {
+			const filteredValue = filterEmptyValues( value );
+
+			if ( filteredValue === null ) {
+				return;
+			}
+
 			if ( ! snapshot[ key ] ) {
 				snapshot[ key ] = [];
 			}
 
 			const snapshotPropValue: SnapshotPropValue = {
 				...styleData,
-				value,
+				value: filteredValue,
 			};
 
 			snapshot[ key ].push( snapshotPropValue );

package/src/styles-inheritance/create-styles-inheritance.ts

@@ -22,7 +22,7 @@ function buildStyleVariantsByMetaMapping( styleDefs: StyleDefinition[] ): Breakp
 	const breakpointStateSlots: BreakpointsStatesStyles = {};
 
 	styleDefs.forEach( ( styleDef ) => {
-		const provider = getProviderByStyleId( styleDef.id )?.key ?? null;
+		const provider = getProviderByStyleId( styleDef.id )?.getKey() ?? null;
 
 		// iterate over each style definition's variants and place them in the corresponding breakpoint's base or state styles
 		styleDef.variants.forEach( ( variant ) => {

package/src/styles-inheritance/styles-inheritance-indicator.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { useBoundProp } from '@elementor/editor-controls';
-import { ELEMENTS_BASE_STYLES_PROVIDER_KEY, ELEMENTS_STYLES_PROVIDER_KEY } from '@elementor/editor-styles-repository';
+import { ELEMENTS_BASE_STYLES_PROVIDER_KEY, isElementsStylesProvider } from '@elementor/editor-styles-repository';
 import { __ } from '@wordpress/i18n';
 
 import { StyleIndicator } from '../components/style-indicator';
@@ -35,7 +35,7 @@ export const StylesInheritanceIndicator = () => {
 		return (
 			<StyleIndicator
 				aria-label={ __( 'This is the final value', 'elementor' ) }
-				variant={ currentStyleProvider?.key === ELEMENTS_STYLES_PROVIDER_KEY ? 'local' : 'global' }
+				variant={ isElementsStylesProvider( currentStyleProvider?.getKey() ) ? 'local' : 'global' }
 			/>
 		);
 	}