@elementor/editor-editing-panel 1.8.1 → 1.10.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elementor/editor-editing-panel",
-  "version": "1.8.1",
+  "version": "1.10.0",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -39,20 +39,22 @@
     "dev": "tsup --config=../../tsup.dev.ts"
   },
   "dependencies": {
-    "@elementor/editor": "0.17.3",
-    "@elementor/editor-controls": "0.6.1",
-    "@elementor/editor-elements": "0.4.2",
-    "@elementor/menus": "0.1.2",
-    "@elementor/editor-props": "0.7.1",
-    "@elementor/editor-panels": "0.10.3",
-    "@elementor/editor-responsive": "0.12.5",
-    "@elementor/editor-styles": "0.5.2",
-    "@elementor/editor-styles-repository": "0.4.1",
-    "@elementor/editor-v1-adapters": "0.9.0",
-    "@elementor/icons": "^1.20.0",
+    "@elementor/editor": "0.17.5",
+    "@elementor/editor-controls": "0.8.0",
+    "@elementor/editor-elements": "0.5.1",
+    "@elementor/menus": "0.1.3",
+    "@elementor/editor-props": "0.8.0",
+    "@elementor/editor-panels": "0.10.5",
+    "@elementor/editor-responsive": "0.12.6",
+    "@elementor/editor-styles": "0.5.4",
+    "@elementor/editor-styles-repository": "0.6.0",
+    "@elementor/editor-ui": "0.1.0",
+    "@elementor/editor-v1-adapters": "0.9.1",
+    "@elementor/icons": "1.26.0",
+    "@elementor/locations": "0.7.6",
     "@elementor/schema": "0.1.2",
     "@elementor/session": "0.1.0",
-    "@elementor/ui": "^1.22.0",
+    "@elementor/ui": "1.24.1",
     "@elementor/utils": "0.3.0",
     "@wordpress/i18n": "^5.13.0"
   },

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

@@ -1,11 +1,9 @@
 import * as React from 'react';
-import { type RefObject } from 'react';
-import { type StyleState } from '@elementor/editor-styles';
+import { type StyleDefinitionState } from '@elementor/editor-styles';
 import { CheckIcon } from '@elementor/icons';
-import { createMenu } from '@elementor/menus';
 import {
 	bindMenu,
-	Box,
+	Divider,
 	ListItemIcon,
 	ListItemText,
 	ListSubheader,
@@ -16,31 +14,17 @@ import {
 } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
-import { useCssClassItem } from '../contexts/css-class-item-context';
 import { useStyle } from '../contexts/style-context';
+import { useUnapplyClass } from '../hooks/use-unapply-class';
 
-export const { useMenuItems: useStateMenuItems, registerStateMenuItem } = createMenu( {
-	components: {
-		StateMenuItem,
-	},
-} );
+const STATES: NonNullable< StyleDefinitionState >[] = [ 'hover', 'focus', 'active' ];
 
-export const { useMenuItems: useGlobalClassMenuItems, registerGlobalClassMenuItem } = createMenu( {
-	components: {
-		GlobalClassMenuItem,
-	},
-} );
+type CssClassMenuProps = { styleId: string; isFixed: boolean; popupState: PopupState };
 
-export function CssClassMenu( {
-	popupState,
-	containerRef,
-}: {
-	popupState: PopupState;
-	containerRef: RefObject< Element >;
-} ) {
-	const { isGlobal } = useCssClassItem();
-	const { default: globalClassMenuItems } = useGlobalClassMenuItems();
-	const { default: stateMenuItems } = useStateMenuItems();
+export function CssClassMenu( { styleId, isFixed = false, popupState }: CssClassMenuProps ) {
+	const handleKeyDown = ( e: React.KeyboardEvent< HTMLElement > ) => {
+		e.stopPropagation();
+	};
 
 	return (
 		<Menu
@@ -50,39 +34,38 @@ export function CssClassMenu( {
 				vertical: 'top',
 				horizontal: 'right',
 			} }
-			anchorEl={ containerRef.current }
+			onKeyDown={ handleKeyDown }
 		>
-			{ isGlobal && (
-				<GlobalClassMenuSection>
-					{ globalClassMenuItems.map( ( { id, MenuItem: MenuItemComponent } ) => (
-						<MenuItemComponent key={ id } />
-					) ) }
-				</GlobalClassMenuSection>
-			) }
+			{ /* 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 */ }
+			{ ! isFixed && [
+				<UnapplyClassMenuItem key="unapply-class" styleId={ styleId } />,
+				<Divider key="global-class-items-divider" />,
+			] }
 			<ListSubheader>{ __( 'Add a pseudo selector', 'elementor' ) }</ListSubheader>
-			{ stateMenuItems.map( ( { id, MenuItem: MenuItemComponent } ) => (
-				<MenuItemComponent key={ id } />
-			) ) }
+			<StateMenuItem key="normal" state={ null } styleId={ styleId } />
+			{ STATES.map( ( state ) => {
+				return <StateMenuItem key={ state } state={ state } styleId={ styleId } />;
+			} ) }
 		</Menu>
 	);
 }
 
 type StateMenuItemProps = {
-	state: StyleState;
-	disabled?: boolean;
+	state: StyleDefinitionState;
+	styleId: string;
 };
 
-export function StateMenuItem( { state, disabled }: StateMenuItemProps ) {
-	const { isActive, styleId } = useCssClassItem();
-	const { setId: setActiveId, setMetaState: setActiveMetaState, meta } = useStyle();
+function StateMenuItem( { state, styleId, ...props }: StateMenuItemProps ) {
+	const { id: activeId, setId: setActiveId, setMetaState: setActiveMetaState, meta } = useStyle();
 	const { state: activeState } = meta;
 
+	const isActive = styleId === activeId;
 	const isSelected = state === activeState && isActive;
 
 	return (
 		<StyledMenuItem
-			selected={ state === activeState && isActive }
-			disabled={ disabled }
+			{ ...props }
+			selected={ isSelected }
 			onClick={ () => {
 				if ( ! isActive ) {
 					setActiveId( styleId );
@@ -101,23 +84,16 @@ export function StateMenuItem( { state, disabled }: StateMenuItemProps ) {
 	);
 }
 
-type GlobalClassMenuItemProps = {
-	text: string;
-	onClick: () => void;
-};
+function UnapplyClassMenuItem( { styleId, ...props }: { styleId: string } ) {
+	const unapplyClass = useUnapplyClass( styleId );
 
-export function GlobalClassMenuItem( { text, onClick }: GlobalClassMenuItemProps ) {
 	return (
-		<StyledMenuItem onClick={ onClick }>
-			<ListItemText primary={ text } />
+		<StyledMenuItem { ...props } onClick={ unapplyClass }>
+			<ListItemText primary="Remove" />
 		</StyledMenuItem>
 	);
 }
 
-const GlobalClassMenuSection = styled( Box )( ( { theme } ) => ( {
-	borderBottom: `1px solid ${ theme?.palette.divider }`,
-} ) );
-
 const StyledMenuItem = styled( MenuItem )( {
 	'&:hover': {
 		color: 'text.primary', // Overriding global CSS from the editor.

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

@@ -1,16 +1,19 @@
 import * as React from 'react';
 import { useId, useRef } from 'react';
-import { getElementSetting, updateSettings, useElementSetting } from '@elementor/editor-elements';
+import { getElementSetting, updateElementSettings, useElementSetting } from '@elementor/editor-elements';
 import { classesPropTypeUtil, type ClassesPropValue } from '@elementor/editor-props';
 import { type StyleDefinitionID } from '@elementor/editor-styles';
 import {
 	ELEMENTS_STYLES_PROVIDER_KEY,
+	type StylesProvider,
 	stylesRepository,
 	type UpdateActionPayload,
-	useAllStylesByProvider,
 	useCreateActionsByProvider,
+	useProviders,
 } from '@elementor/editor-styles-repository';
+import { EllipsisWithTooltip } from '@elementor/editor-ui';
 import { DotsVerticalIcon } from '@elementor/icons';
+import { createLocation } from '@elementor/locations';
 import {
 	type AutocompleteRenderGetTagProps,
 	bindTrigger,
@@ -24,10 +27,8 @@ import {
 import { __ } from '@wordpress/i18n';
 
 import { useClassesProp } from '../contexts/classes-prop-context';
-import { CssClassItemProvider } from '../contexts/css-class-item-context';
 import { useElement } from '../contexts/element-context';
 import { useStyle } from '../contexts/style-context';
-import { ConditionalTooltipWrapper } from './conditional-tooltip-wrapper';
 import { CssClassMenu } from './css-class-menu';
 import { EditableField, EditableFieldProvider, useEditableField } from './editable-field';
 import { type Action, MultiCombobox, type Option } from './multi-combobox';
@@ -48,6 +49,8 @@ const EMPTY_OPTION = {
 	provider: ELEMENTS_STYLES_PROVIDER_KEY,
 } satisfies StyleDefOption;
 
+export const { Slot: ClassSelectorActionsSlot, inject: injectIntoClassSelectorActions } = createLocation();
+
 /**
  * Applied - Classes applied to an element.
  * Active - Class that is currently on edit mode.
@@ -62,16 +65,20 @@ export function CssClassSelector() {
 	const actions = useCreateActions( { pushAppliedId, setActiveId } );
 
 	const handleApply = useHandleApply( appliedIds, setAppliedIds );
-	const handleActivate = ( { value }: Option ) => setActiveId( value );
 
 	const applied = useAppliedOptions( options, appliedIds );
 	const active = applied.find( ( option ) => option.value === activeId ) ?? EMPTY_OPTION;
 
 	return (
 		<Stack gap={ 1 } p={ 2 }>
-			<Typography component="label" variant="caption" htmlFor={ ID }>
-				{ __( 'CSS Classes', 'elementor' ) }
-			</Typography>
+			<Stack direction="row" gap={ 1 } alignItems="center" justifyContent="space-between">
+				<Typography component="label" variant="caption" htmlFor={ ID }>
+					{ __( 'CSS Classes', 'elementor' ) }
+				</Typography>
+				<Stack direction="row" gap={ 1 }>
+					<ClassSelectorActionsSlot />
+				</Stack>
+			</Stack>
 			<MultiCombobox
 				id={ ID }
 				size="tiny"
@@ -87,6 +94,7 @@ export function CssClassSelector() {
 					values.map( ( value, index ) => {
 						const chipProps = getTagProps( { index } );
 						const isActive = value.value === active?.value;
+						const isElementsProvider = value.provider === ELEMENTS_STYLES_PROVIDER_KEY;
 
 						const renameLabel = ( newLabel: string ) => {
 							return updateClassByProvider( value.provider, { label: newLabel, id: value.value } );
@@ -97,7 +105,7 @@ export function CssClassSelector() {
 								key={ chipProps.key }
 								value={ value.label }
 								onSubmit={ renameLabel }
-								editable={ value.provider !== ELEMENTS_STYLES_PROVIDER_KEY }
+								editable={ ! value.fixed }
 								validation={ ( newLabel ) =>
 									renameValidation(
 										newLabel,
@@ -109,10 +117,12 @@ export function CssClassSelector() {
 									label={ value.label }
 									id={ value.value }
 									isActive={ isActive }
-									isGlobal={ value.color === 'global' }
+									isFixed={ value.fixed }
 									color={ isActive && value.color ? value.color : 'default' }
 									chipProps={ chipProps }
-									onClickActive={ () => handleActivate( value ) }
+									// There is only a single local style, which might not exist, so setting it to
+									// `null` will either return the actual style or the fallback one.
+									onClickActive={ () => setActiveId( isElementsProvider ? null : value.value ) }
 								/>
 							</EditableFieldProvider>
 						);
@@ -127,7 +137,7 @@ type CssClassItemProps = {
 	id: string;
 	label: string;
 	isActive: boolean;
-	isGlobal: boolean;
+	isFixed?: boolean;
 	color: ChipOwnProps[ 'color' ];
 	chipProps: ReturnType< AutocompleteRenderGetTagProps >;
 	onClickActive: ( id: string ) => void;
@@ -139,7 +149,7 @@ export function CssClassItem( {
 	id,
 	label,
 	isActive,
-	isGlobal,
+	isFixed = false,
 	color: colorProp,
 	chipProps,
 	onClickActive,
@@ -155,7 +165,7 @@ export function CssClassItem( {
 	const color = error ? 'error' : colorProp;
 
 	return (
-		<CssClassItemProvider styleId={ id } isActive={ isActive } isGlobal={ isGlobal }>
+		<>
 			<UnstableChipGroup ref={ chipRef } { ...chipGroupProps } aria-label={ `Edit ${ label }` } role="group">
 				<Chip
 					disabled={ submitting }
@@ -173,7 +183,7 @@ export function CssClassItem( {
 								}
 							} }
 						>
-							<ConditionalTooltipWrapper maxWidth="10ch" title={ label } />
+							<EllipsisWithTooltip maxWidth="10ch" title={ label } />
 						</EditableField>
 					}
 					variant={ isActive && ! meta.state ? 'filled' : 'standard' }
@@ -203,8 +213,8 @@ export function CssClassItem( {
 					/>
 				) }
 			</UnstableChipGroup>
-			<CssClassMenu popupState={ popupState } containerRef={ chipRef } />
-		</CssClassItemProvider>
+			<CssClassMenu styleId={ id } popupState={ popupState } isFixed={ isFixed } />
+		</>
 	);
 }
 
@@ -243,9 +253,13 @@ const isCharactersNotSupported = ( newLabel: string ) => ! VALID_SELECTOR_REGEX.
 function useOptions() {
 	const { element } = useElement();
 
-	return useAllStylesByProvider( { elementId: element.id } ).flatMap< StyleDefOption >(
-		( [ provider, styleDefs ] ) => {
+	const isProviderEditable = ( provider: StylesProvider ) => !! provider.actions.updateProps;
+
+	return useProviders()
+		.filter( isProviderEditable )
+		.flatMap< StyleDefOption >( ( provider ) => {
 			const isElements = provider.key === ELEMENTS_STYLES_PROVIDER_KEY;
+			const styleDefs = provider.actions.get( { elementId: element.id } );
 
 			// Add empty local option for elements, as fallback.
 			if ( isElements && styleDefs.length === 0 ) {
@@ -262,8 +276,7 @@ function useOptions() {
 					group: provider.labels?.plural,
 				};
 			} );
-		}
-	);
+		} );
 }
 
 function useCreateActions( {
@@ -321,7 +334,7 @@ function useAppliedClassesIds() {
 	const value = useElementSetting< ClassesPropValue >( element.id, currentClassesProp )?.value || [];
 
 	const setValue = ( ids: StyleDefinitionID[] ) => {
-		updateSettings( {
+		updateElementSettings( {
 			id: element.id,
 			props: {
 				[ currentClassesProp ]: classesPropTypeUtil.create( ids ),

package/src/components/editable-field.tsx

@@ -86,7 +86,7 @@ export const EditableFieldProvider = ( {
 
 type EditableFieldProps = ComponentProps< 'div' >;
 
-export const EditableField = ( { children, ...props }: EditableFieldProps ) => {
+export const EditableField = ( { children, onClick, ...props }: EditableFieldProps ) => {
 	const ref = useRef< HTMLElement >( null );
 	const { isEditing, closeEditMode, value, onChange, error, submit, editable } = useEditableField();
 
@@ -110,6 +110,14 @@ export const EditableField = ( { children, ...props }: EditableFieldProps ) => {
 		}
 	};
 
+	const handleClick = ( event: React.MouseEvent< HTMLDivElement > ) => {
+		if ( isEditing ) {
+			event.stopPropagation();
+		}
+
+		onClick?.( event );
+	};
+
 	const selectAll = () => {
 		const selection = getSelection();
 
@@ -131,7 +139,7 @@ export const EditableField = ( { children, ...props }: EditableFieldProps ) => {
 	return (
 		<Tooltip open={ !! error } title={ error } placement="top">
 			{ /* eslint-disable-next-line jsx-a11y/no-static-element-interactions */ }
-			<div onKeyDown={ handleKeyDown } { ...props }>
+			<div onKeyDown={ handleKeyDown } onClick={ handleClick } { ...props }>
 				<span
 					ref={ ref }
 					role="textbox"

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

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { useMemo, useState } from 'react';
 import {
 	ControlLabel,
 	ControlToggleButtonGroup,
@@ -50,8 +51,8 @@ export const FlexSizeField = () => {
 		shrink = shrinkField?.value || null,
 		basis = basisField?.value || null;
 
-	const currentGroup = React.useMemo( () => getActiveGroup( { grow, shrink, basis } ), [ grow, shrink, basis ] ),
-		[ activeGroup, setActiveGroup ] = React.useState( currentGroup );
+	const currentGroup = useMemo( () => getActiveGroup( { grow, shrink, basis } ), [ grow, shrink, basis ] ),
+		[ activeGroup, setActiveGroup ] = useState( currentGroup );
 
 	const onChangeGroup = ( group: GroupItem | null = null ) => {
 		setActiveGroup( group );

package/src/components/style-tab.tsx

@@ -3,7 +3,7 @@ import { useState } from 'react';
 import { useElementSetting, useElementStyles } from '@elementor/editor-elements';
 import { type ClassesPropValue, type PropKey } from '@elementor/editor-props';
 import { useActiveBreakpoint } from '@elementor/editor-responsive';
-import { type StyleDefinitionID, type StyleState } from '@elementor/editor-styles';
+import { type StyleDefinitionID, type StyleDefinitionState } from '@elementor/editor-styles';
 import { SessionStorageProvider } from '@elementor/session';
 import { Divider } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
@@ -28,7 +28,7 @@ const CLASSES_PROP_KEY = 'classes';
 export const StyleTab = () => {
 	const currentClassesProp = useCurrentClassesProp();
 	const [ activeStyleDefId, setActiveStyleDefId ] = useActiveStyleDefId( currentClassesProp );
-	const [ activeStyleState, setActiveStyleState ] = useState< StyleState | null >( null );
+	const [ activeStyleState, setActiveStyleState ] = useState< StyleDefinitionState | null >( null );
 	const breakpoint = useActiveBreakpoint();
 
 	return (

package/src/contexts/style-context.tsx

@@ -1,20 +1,43 @@
 import * as React from 'react';
 import { createContext, type Dispatch, type PropsWithChildren, useContext } from 'react';
-import { type StyleDefinition, type StyleState, type StyleVariant } from '@elementor/editor-styles';
+import {
+	type StyleDefinition,
+	type StyleDefinitionID,
+	type StyleDefinitionState,
+	type StyleDefinitionVariant,
+} from '@elementor/editor-styles';
+import { type StylesProvider, stylesRepository } from '@elementor/editor-styles-repository';
+
+import { StylesProviderNotFoundError } from '../errors';
 
 type ContextValue = {
-	id: StyleDefinition[ 'id' ] | null;
 	setId: Dispatch< StyleDefinition[ 'id' ] | null >;
-	meta: StyleVariant[ 'meta' ];
-	setMetaState: Dispatch< StyleState >;
+	meta: StyleDefinitionVariant[ 'meta' ];
+	setMetaState: Dispatch< StyleDefinitionState >;
+} & ( ContextValueWithProvider | ContextValueWithoutProvider );
+
+type ContextValueWithProvider = {
+	id: StyleDefinitionID;
+	provider: StylesProvider;
+};
+
+type ContextValueWithoutProvider = {
+	id: null;
+	provider: null;
 };
 
 const Context = createContext< ContextValue | null >( null );
 
-type Props = PropsWithChildren< ContextValue >;
+type Props = PropsWithChildren< Omit< ContextValue, 'provider' > >;
+
+export function StyleProvider( { children, ...props }: Props ) {
+	const provider = props.id === null ? null : getProviderByStyleId( props.id );
 
-export function StyleProvider( { children, id, setId, meta, setMetaState }: Props ) {
-	return <Context.Provider value={ { id, setId, meta, setMetaState } }>{ children }</Context.Provider>;
+	if ( props.id && ! provider ) {
+		throw new StylesProviderNotFoundError( { context: { styleId: props.id } } );
+	}
+
+	return <Context.Provider value={ { ...props, provider } as ContextValue }>{ children }</Context.Provider>;
 }
 
 export function useStyle() {
@@ -26,3 +49,11 @@ export function useStyle() {
 
 	return context;
 }
+
+function getProviderByStyleId( styleId: StyleDefinitionID ) {
+	const styleProvider = stylesRepository.getProviders().find( ( provider ) => {
+		return provider.actions.get().find( ( style ) => style.id === styleId );
+	} );
+
+	return styleProvider ?? null;
+}

package/src/controls-registry/control.tsx

@@ -1,18 +1,9 @@
 import * as React from 'react';
 import type { ComponentProps } from 'react';
-import { createError } from '@elementor/utils';
 
+import { ControlTypeNotFoundError } from '../errors';
 import { type ControlType, type ControlTypes, getControlByType } from './controls-registry';
 
-export type ControlTypeErrorContext = {
-	type: string;
-};
-
-const ControlTypeError = createError< ControlTypeErrorContext >( {
-	code: 'CONTROL_TYPE_NOT_FOUND',
-	message: `Control type not found.`,
-} );
-
 type IsRequired< T, K extends keyof T > = object extends Pick< T, K > ? false : true;
 
 type AnyPropertyRequired< T > = {
@@ -35,8 +26,8 @@ export const Control = < T extends ControlType >( { props, type }: ControlProps<
 	const ControlByType = getControlByType( type );
 
 	if ( ! ControlByType ) {
-		throw new ControlTypeError( {
-			context: { type },
+		throw new ControlTypeNotFoundError( {
+			context: { controlType: type },
 		} );
 	}
 

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { PropKeyProvider, PropProvider } from '@elementor/editor-controls';
-import { updateSettings, useElementSetting } from '@elementor/editor-elements';
+import { updateElementSettings, useElementSetting } from '@elementor/editor-elements';
 import { type PropKey, type PropValue } from '@elementor/editor-props';
 
 import { useElement } from '../contexts/element-context';
@@ -20,7 +20,7 @@ export const SettingsField = ( { bind, children }: Props ) => {
 	const propType = createTopLevelOjectType( { schema: elementType.propsSchema } );
 
 	const setValue = ( newValue: Record< string, PropValue > ) => {
-		updateSettings( {
+		updateElementSettings( {
 			id: element.id,
 			props: { ...newValue },
 		} );

package/src/errors.ts

@@ -0,0 +1,22 @@
+import { type StyleDefinitionID } from '@elementor/editor-styles';
+import { createError } from '@elementor/utils';
+
+export const ControlTypeNotFoundError = createError< { controlType: string } >( {
+	code: 'control_type_not_found',
+	message: 'Control type not found.',
+} );
+
+export const StylesProviderNotFoundError = createError< { styleId: StyleDefinitionID } >( {
+	code: 'provider_not_found',
+	message: 'Styles provider not found.',
+} );
+
+export const StylesProviderCannotUpdatePropsError = createError< { providerKey: string } >( {
+	code: 'provider_cannot_update_props',
+	message: "Styles provider doesn't support updating props.",
+} );
+
+export const StyleNotFoundUnderProviderError = createError< { styleId: StyleDefinitionID; providerKey: string } >( {
+	code: 'style_not_found_under_provider',
+	message: 'Style not found under the provider.',
+} );

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

@@ -1,33 +1,81 @@
-import { updateStyle, useElementStyleProps } from '@elementor/editor-elements';
+import { useEffect, useReducer } from 'react';
+import { createElementStyle, type ElementID } from '@elementor/editor-elements';
 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 { __ } from '@wordpress/i18n';
 
 import { useClassesProp } from '../contexts/classes-prop-context';
 import { useElement } from '../contexts/element-context';
 import { useStyle } from '../contexts/style-context';
+import { StyleNotFoundUnderProviderError, StylesProviderCannotUpdatePropsError } from '../errors';
 
 export function useStylesFields< T extends Props >( propNames: ( keyof T & string )[] ) {
 	const { element } = useElement();
-	const { id, meta } = useStyle();
+	const { id, meta, provider } = useStyle();
 	const classesProp = useClassesProp();
 
-	const value = useElementStyleProps( {
-		elementID: element.id,
-		styleDefID: id,
+	const [ , reRender ] = useReducer( ( p ) => ! p, false );
+
+	useEffect( () => provider?.subscribe( reRender ), [ provider ] );
+
+	const value = getProps< T >( {
+		elementId: element.id,
+		styleId: id,
+		provider,
 		meta,
 		propNames,
 	} );
 
-	const setValue = ( newValues: T ) => {
-		updateStyle( {
-			elementID: element.id,
-			styleDefID: id,
-			props: newValues,
-			meta,
-			bind: classesProp,
-			label: __( 'local', 'elementor' ),
-		} );
+	const setValue = ( props: T ) => {
+		if ( id === null ) {
+			createElementStyle( {
+				elementId: element.id,
+				classesProp,
+				meta,
+				props,
+				label: __( 'local', 'elementor' ),
+			} );
+
+			return;
+		}
+
+		if ( ! provider.actions.updateProps ) {
+			throw new StylesProviderCannotUpdatePropsError( { context: { providerKey: provider.key } } );
+		}
+
+		provider.actions.updateProps( { id, meta, props }, { elementId: element.id } );
 	};
 
 	return [ value, setValue ] as const;
 }
+
+type GetPropsArgs = {
+	provider: StylesProvider | null;
+	styleId: StyleDefinition[ 'id' ] | null;
+	elementId: ElementID;
+	meta: StyleDefinitionVariant[ 'meta' ];
+	propNames: string[];
+};
+
+type NullableValues< T extends Props > = {
+	[ K in keyof T ]: T[ K ] | null;
+};
+
+function getProps< T extends Props >( { styleId, elementId, provider, meta, propNames }: GetPropsArgs ) {
+	if ( ! provider || ! styleId ) {
+		return null;
+	}
+
+	const style = provider.actions.getById?.( styleId, { elementId } );
+
+	if ( ! style ) {
+		throw new StyleNotFoundUnderProviderError( { context: { styleId, providerKey: provider.key } } );
+	}
+
+	const variant = getVariantByMeta( style, meta );
+
+	return Object.fromEntries(
+		propNames.map( ( key ) => [ key, variant?.props[ key ] ?? null ] )
+	) as NullableValues< T >;
+}