@elementor/editor-editing-panel 1.40.0 → 1.41.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elementor/editor-editing-panel",
-  "version": "1.40.0",
+  "version": "1.41.0",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -40,8 +40,8 @@
   },
   "dependencies": {
     "@elementor/editor": "0.19.4",
-    "@elementor/editor-canvas": "0.22.1",
-    "@elementor/editor-controls": "0.33.0",
+    "@elementor/editor-canvas": "0.22.2",
+    "@elementor/editor-controls": "0.34.0",
     "@elementor/editor-current-user": "0.5.0",
     "@elementor/editor-documents": "0.13.6",
     "@elementor/editor-elements": "0.8.4",
@@ -49,16 +49,17 @@
     "@elementor/editor-props": "0.12.1",
     "@elementor/editor-responsive": "0.13.5",
     "@elementor/editor-styles": "0.6.8",
-    "@elementor/editor-styles-repository": "0.10.0",
-    "@elementor/editor-ui": "0.9.0",
+    "@elementor/editor-styles-repository": "0.10.1",
+    "@elementor/editor-ui": "0.10.0",
     "@elementor/editor-v1-adapters": "0.12.0",
-    "@elementor/icons": "1.40.1",
+    "@elementor/icons": "1.44.0",
     "@elementor/locations": "0.8.0",
     "@elementor/menus": "0.1.5",
     "@elementor/schema": "0.1.2",
     "@elementor/session": "0.1.0",
     "@elementor/ui": "1.34.5",
     "@elementor/utils": "0.4.0",
+    "@elementor/wp-media": "0.6.0",
     "@wordpress/i18n": "^5.13.0"
   },
   "peerDependencies": {

package/src/action.tsx

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import { type ElementType as ReactElementType } from 'react';
+import { IconButton, Tooltip } from '@elementor/ui';
+
+const SIZE = 'tiny';
+
+type ActionProps = {
+	title: string;
+	visible?: boolean;
+	icon: ReactElementType;
+	onClick: () => void;
+};
+
+export default function Action( { title, visible = true, icon: Icon, onClick }: ActionProps ) {
+	if ( ! visible ) {
+		return null;
+	}
+
+	return (
+		<Tooltip placement="bottom" title={ title } arrow={ true }>
+			<IconButton aria-label={ title } size={ SIZE } onClick={ onClick }>
+				<Icon fontSize={ SIZE } />
+			</IconButton>
+		</Tooltip>
+	);
+}

package/src/components/add-or-remove-content.tsx

@@ -13,9 +13,17 @@ type Props = {
 	isAdded: boolean;
 	onAdd: () => void;
 	onRemove: () => void;
+	disabled?: boolean;
 };
 
-export const AddOrRemoveContent = ( { isAdded, label, onAdd, onRemove, children }: PropsWithChildren< Props > ) => {
+export const AddOrRemoveContent = ( {
+	isAdded,
+	label,
+	onAdd,
+	onRemove,
+	children,
+	disabled,
+}: PropsWithChildren< Props > ) => {
 	return (
 		<SectionContent>
 			<Stack
@@ -28,11 +36,11 @@ export const AddOrRemoveContent = ( { isAdded, label, onAdd, onRemove, children
 			>
 				<ControlLabel>{ label }</ControlLabel>
 				{ isAdded ? (
-					<IconButton size={ SIZE } onClick={ onRemove } aria-label="Remove">
+					<IconButton size={ SIZE } onClick={ onRemove } aria-label="Remove" disabled={ disabled }>
 						<MinusIcon fontSize={ SIZE } />
 					</IconButton>
 				) : (
-					<IconButton size={ SIZE } onClick={ onAdd } aria-label="Add">
+					<IconButton size={ SIZE } onClick={ onAdd } aria-label="Add" disabled={ disabled }>
 						<PlusIcon fontSize={ SIZE } />
 					</IconButton>
 				) }

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

@@ -24,6 +24,7 @@ type CssClassItemProps = {
 	id: string | null;
 	provider: string | null;
 	label: string;
+	fixed?: boolean;
 	isActive: boolean;
 	color: ChipOwnProps[ 'color' ];
 	icon: ReactElement | null;
@@ -37,7 +38,7 @@ type CssClassItemProps = {
 const CHIP_SIZE = 'tiny';
 
 export function CssClassItem( props: CssClassItemProps ) {
-	const { chipProps, icon, color: colorProp, ...classProps } = props;
+	const { chipProps, icon, color: colorProp, fixed, ...classProps } = props;
 	const { id, provider, label, isActive, onClickActive, renameLabel, setError } = classProps;
 
 	const { meta, setMetaState } = useStyle();
@@ -139,7 +140,7 @@ export function CssClassItem( props: CssClassItemProps ) {
 				) }
 			</UnstableChipGroup>
 			<CssClassProvider { ...classProps } handleRename={ openEditMode }>
-				<CssClassMenu popupState={ popupState } anchorEl={ chipRef } />
+				<CssClassMenu popupState={ popupState } anchorEl={ chipRef } fixed={ fixed } />
 			</CssClassProvider>
 		</>
 	);

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

@@ -30,9 +30,10 @@ const STATES: State[] = [
 type CssClassMenuProps = {
 	popupState: PopupState;
 	anchorEl: HTMLElement | null;
+	fixed?: boolean;
 };
 
-export function CssClassMenu( { popupState, anchorEl }: CssClassMenuProps ) {
+export function CssClassMenu( { popupState, anchorEl, fixed }: CssClassMenuProps ) {
 	const { provider } = useCssClass();
 
 	const handleKeyDown = ( e: React.KeyboardEvent< HTMLElement > ) => {
@@ -57,7 +58,7 @@ export function CssClassMenu( { popupState, anchorEl }: CssClassMenuProps ) {
 			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, closeMenu: popupState.close } ) }
+			{ getMenuItemsByProvider( { provider, closeMenu: popupState.close, fixed } ) }
 			<MenuSubheader sx={ { typography: 'caption', color: 'text.secondary', pb: 0.5, pt: 1 } }>
 				{ __( 'States', 'elementor' ) }
 			</MenuSubheader>
@@ -80,7 +81,15 @@ function useModifiedStates( styleId: string | null ): Partial< Record< StyleDefi
 	);
 }
 
-function getMenuItemsByProvider( { provider, closeMenu }: { provider: string | null; closeMenu: () => void } ) {
+function getMenuItemsByProvider( {
+	provider,
+	closeMenu,
+	fixed,
+}: {
+	provider: string | null;
+	closeMenu: () => void;
+	fixed?: boolean;
+} ) {
 	if ( ! provider ) {
 		return [];
 	}
@@ -88,11 +97,12 @@ function getMenuItemsByProvider( { provider, closeMenu }: { provider: string | n
 	const providerInstance = stylesRepository.getProviderByKey( provider );
 	const providerActions = providerInstance?.actions;
 
-	const [ canUpdate, canDelete ] = [ providerActions?.update, providerActions?.delete ];
+	const canUpdate = providerActions?.update;
+	const canUnapply = ! fixed;
 
 	const actions = [
 		canUpdate && <RenameClassMenuItem key="rename-class" closeMenu={ closeMenu } />,
-		canDelete && <UnapplyClassMenuItem key="unapply-class" closeMenu={ closeMenu } />,
+		canUnapply && <UnapplyClassMenuItem key="unapply-class" closeMenu={ closeMenu } />,
 	].filter( Boolean );
 
 	if ( actions.length ) {

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

@@ -121,6 +121,7 @@ export function CssClassSelector() {
 							return (
 								<CssClassItem
 									key={ chipProps.key }
+									fixed={ value.fixed }
 									label={ value.label }
 									provider={ value.provider }
 									id={ value.value }

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

@@ -31,7 +31,6 @@ export function useApplyClass() {
 					const prevActiveId = activeId;
 
 					applyClass( classId );
-					setDocumentModifiedStatus( true );
 
 					return prevActiveId;
 				},
@@ -76,7 +75,6 @@ export function useUnapplyClass() {
 					const prevActiveId = activeId;
 
 					unapplyClass( classId );
-					setDocumentModifiedStatus( true );
 
 					return prevActiveId;
 				},
@@ -158,13 +156,19 @@ function useSetClasses() {
 	const { element } = useElement();
 	const currentClassesProp = useClassesProp();
 
+	const isVersion330Active = isExperimentActive( 'e_v_3_30' );
+
 	return useMemo( () => {
 		const setClasses = ( ids: StyleDefinitionID[] ) => {
 			updateElementSettings( {
 				id: element.id,
 				props: { [ currentClassesProp ]: classesPropTypeUtil.create( ids ) },
-				withHistory: false,
+				withHistory: isVersion330Active ? false : true,
 			} );
+
+			if ( isVersion330Active ) {
+				setDocumentModifiedStatus( true );
+			}
 		};
 
 		const getAppliedClasses = () =>
@@ -174,5 +178,5 @@ function useSetClasses() {
 			setClasses,
 			getAppliedClasses,
 		};
-	}, [ currentClassesProp, element.id ] );
+	}, [ currentClassesProp, element.id, isVersion330Active ] );
 }

package/src/components/section-content.tsx

@@ -1,7 +1,11 @@
-import { type FC, type PropsWithChildren } from 'react';
+import { createContext, type FC, type PropsWithChildren, useContext, useRef } from 'react';
 import * as React from 'react';
 import { Stack } from '@elementor/ui';
 
+const SectionContentRefContext = createContext< React.RefObject< HTMLElement > | null >( null );
+
+export const useSectionContentRef = () => useContext( SectionContentRefContext );
+
 type SectionContentProps = PropsWithChildren< {
 	gap?: number;
 	sx?: {
@@ -9,8 +13,14 @@ type SectionContentProps = PropsWithChildren< {
 	};
 } >;
 
-export const SectionContent: FC< SectionContentProps > = ( { gap = 2, sx, children } ) => (
-	<Stack gap={ gap } sx={ { ...sx } }>
-		{ children }
-	</Stack>
-);
+export const SectionContent: FC< SectionContentProps > = ( { gap = 2, sx, children } ) => {
+	const ref = useRef< HTMLElement >( null );
+
+	return (
+		<SectionContentRefContext.Provider value={ ref }>
+			<Stack gap={ gap } sx={ { ...sx } } ref={ ref }>
+				{ children }
+			</Stack>
+		</SectionContentRefContext.Provider>
+	);
+};

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

@@ -2,11 +2,14 @@ import * as React from 'react';
 import { BackgroundControl } from '@elementor/editor-controls';
 
 import { StylesField } from '../../../controls-registry/styles-field';
+import { SectionContent } from '../../section-content';
 
 export const BackgroundSection = () => {
 	return (
-		<StylesField bind="background">
-			<BackgroundControl />
-		</StylesField>
+		<SectionContent>
+			<StylesField bind="background">
+				<BackgroundControl />
+			</StylesField>
+		</SectionContent>
 	);
 };

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

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { __ } from '@wordpress/i18n';
 
+import { useStyle } from '../../../contexts/style-context';
 import { useStylesFields } from '../../../hooks/use-styles-fields';
 import { AddOrRemoveContent } from '../../add-or-remove-content';
 import { BorderColorField } from './border-color-field';
@@ -14,6 +15,7 @@ const initialBorder = {
 };
 
 export const BorderField = () => {
+	const { canEdit } = useStyle();
 	const [ border, setBorder ] = useStylesFields( Object.keys( initialBorder ) );
 
 	const addBorder = () => {
@@ -36,6 +38,7 @@ export const BorderField = () => {
 			isAdded={ hasBorder }
 			onAdd={ addBorder }
 			onRemove={ removeBorder }
+			disabled={ ! canEdit }
 		>
 			<BorderWidthField />
 			<BorderColorField />

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

@@ -6,6 +6,7 @@ import { __ } from '@wordpress/i18n';
 
 import { useStylesInheritanceChain } from '../../../contexts/styles-inheritance-context';
 import { StylesField } from '../../../controls-registry/styles-field';
+import { EXPERIMENTAL_FEATURES } from '../../../sync/experiments-flags';
 import { ControlLabel } from '../../control-label';
 
 type Displays = 'block' | 'flex' | 'inline-block' | 'inline-flex' | 'none';
@@ -32,7 +33,7 @@ const displayFieldItems: ToggleButtonGroupItem< Displays >[] = [
 ];
 
 export const DisplayField = () => {
-	const isDisplayNoneFeatureActive = isExperimentActive( 'e_v_3_30' );
+	const isDisplayNoneFeatureActive = isExperimentActive( EXPERIMENTAL_FEATURES.V_3_30 );
 	const items = [ ...displayFieldItems ];
 
 	if ( isDisplayNoneFeatureActive ) {

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

@@ -6,6 +6,7 @@ import { ArrowDownSmallIcon, ArrowUpSmallIcon, PencilIcon } from '@elementor/ico
 import { DirectionProvider, Grid, ThemeProvider } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
+import { useStyle } from '../../../contexts/style-context';
 import { StylesField } from '../../../controls-registry/styles-field';
 import { useDirection } from '../../../hooks/use-direction';
 import { useStylesField } from '../../../hooks/use-styles-field';
@@ -47,8 +48,9 @@ const items: ToggleButtonGroupItem< GroupControlItemOption >[] = [
 ];
 
 export const FlexOrderField = () => {
-	const { isSiteRtl } = useDirection(),
-		[ order, setOrder ] = useStylesField< NumberPropValue | null >( 'order' );
+	const { isSiteRtl } = useDirection();
+	const [ order, setOrder ] = useStylesField< NumberPropValue | null >( 'order' );
+	const { canEdit } = useStyle();
 
 	const [ groupControlValue, setGroupControlValue ] = useState( getGroupControlValue( order?.value || null ) );
 
@@ -79,6 +81,7 @@ export const FlexOrderField = () => {
 									value={ groupControlValue }
 									onChange={ handleToggleButtonChange }
 									exclusive={ true }
+									disabled={ ! canEdit }
 								/>
 							</Grid>
 						</Grid>

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

@@ -11,6 +11,7 @@ import { ExpandIcon, PencilIcon, ShrinkIcon } from '@elementor/icons';
 import { DirectionProvider, Grid, ThemeProvider } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
+import { useStyle } from '../../../contexts/style-context';
 import { StylesField } from '../../../controls-registry/styles-field';
 import { useDirection } from '../../../hooks/use-direction';
 import { useStylesFields } from '../../../hooks/use-styles-fields';
@@ -44,6 +45,7 @@ const items: ToggleButtonGroupItem< GroupItem >[] = [
 
 export const FlexSizeField = () => {
 	const { isSiteRtl } = useDirection();
+	const { canEdit } = useStyle();
 
 	const [ fields, setFields ] = useStylesFields< {
 		'flex-grow': NumberPropValue | null;
@@ -93,19 +95,21 @@ export const FlexSizeField = () => {
 			<ThemeProvider>
 				<SectionContent>
 					<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap">
-						<Grid item xs={ 6 }>
-							<StylesField bind={ activeGroup ?? '' }>
+						<StylesField bind={ activeGroup ?? '' }>
+							<Grid item xs={ 6 }>
 								<ControlLabel>{ __( 'Size', 'elementor' ) }</ControlLabel>
-							</StylesField>
-						</Grid>
-						<Grid item xs={ 6 } sx={ { display: 'flex', justifyContent: 'end' } }>
-							<ControlToggleButtonGroup
-								value={ activeGroup }
-								onChange={ onChangeGroup }
-								items={ items }
-								exclusive={ true }
-							/>
-						</Grid>
+							</Grid>
+
+							<Grid item xs={ 6 } sx={ { display: 'flex', justifyContent: 'end' } }>
+								<ControlToggleButtonGroup
+									value={ activeGroup }
+									onChange={ onChangeGroup }
+									disabled={ ! canEdit }
+									items={ items }
+									exclusive={ true }
+								/>
+							</Grid>
+						</StylesField>
 					</Grid>
 					{ 'custom' === activeGroup && <FlexCustomField /> }
 				</SectionContent>

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

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { StrokeControl } from '@elementor/editor-controls';
 import { __ } from '@wordpress/i18n';
 
+import { useStyle } from '../../../contexts/style-context';
 import { StylesField } from '../../../controls-registry/styles-field';
 import { useStylesField } from '../../../hooks/use-styles-field';
 import { AddOrRemoveContent } from '../../add-or-remove-content';
@@ -24,6 +25,7 @@ const initTextStroke = {
 };
 
 export const TextStrokeField = () => {
+	const { canEdit } = useStyle();
 	const [ textStroke, setTextStroke ] = useStylesField( 'stroke' );
 
 	const addTextStroke = () => {
@@ -43,6 +45,7 @@ export const TextStrokeField = () => {
 				isAdded={ hasTextStroke }
 				onAdd={ addTextStroke }
 				onRemove={ removeTextStroke }
+				disabled={ ! canEdit }
 			>
 				<StrokeControl />
 			</AddOrRemoveContent>

package/src/components/style-tab.tsx

@@ -50,7 +50,7 @@ const PanelSection = ( { section }: { section: Section } ) => {
 	const SectionComponent = component;
 	const isExpanded = isExperimentActive( EXPERIMENTAL_FEATURES.V_3_30 )
 		? tabDefaults.defaultSectionsExpanded.style?.includes( name )
-		: true;
+		: false;
 
 	return (
 		<Section title={ title } defaultExpanded={ isExpanded }>

package/src/contexts/style-context.tsx

@@ -6,7 +6,7 @@ import {
 	type StyleDefinitionState,
 	type StyleDefinitionVariant,
 } from '@elementor/editor-styles';
-import { type StylesProvider, stylesRepository } from '@elementor/editor-styles-repository';
+import { type StylesProvider, stylesRepository, useUserStylesCapability } from '@elementor/editor-styles-repository';
 
 import { StylesProviderNotFoundError } from '../errors';
 
@@ -14,6 +14,7 @@ type ContextValue = {
 	setId: Dispatch< StyleDefinition[ 'id' ] | null >;
 	meta: StyleDefinitionVariant[ 'meta' ];
 	setMetaState: Dispatch< StyleDefinitionState >;
+	canEdit?: boolean;
 } & ( ContextValueWithProvider | ContextValueWithoutProvider );
 
 type ContextValueWithProvider = {
@@ -33,11 +34,15 @@ type Props = PropsWithChildren< Omit< ContextValue, 'provider' > >;
 export function StyleProvider( { children, ...props }: Props ) {
 	const provider = props.id === null ? null : getProviderByStyleId( props.id );
 
+	const { userCan } = useUserStylesCapability();
+
 	if ( props.id && ! provider ) {
 		throw new StylesProviderNotFoundError( { context: { styleId: props.id } } );
 	}
 
-	return <Context.Provider value={ { ...props, provider } as ContextValue }>{ children }</Context.Provider>;
+	const canEdit = userCan( provider?.getKey() ?? '' ).updateProps;
+
+	return <Context.Provider value={ { ...props, provider, canEdit } as ContextValue }>{ children }</Context.Provider>;
 }
 
 export function useStyle() {
@@ -57,3 +62,7 @@ export function getProviderByStyleId( styleId: StyleDefinitionID ) {
 
 	return styleProvider ?? null;
 }
+
+export function useIsStyle(): boolean {
+	return !! useContext( Context );
+}

package/src/contexts/styles-inheritance-context.tsx

@@ -3,6 +3,7 @@ import { createContext, type PropsWithChildren, useContext } from 'react';
 import { getWidgetsCache, useElementSetting } from '@elementor/editor-elements';
 import { classesPropTypeUtil, type ClassesPropValue } from '@elementor/editor-props';
 import { getBreakpointsTree } from '@elementor/editor-responsive';
+import { getStylesSchema } from '@elementor/editor-styles';
 import { stylesRepository } from '@elementor/editor-styles-repository';
 
 import { useStylesRerender } from '../hooks/use-styles-rerender';
@@ -50,13 +51,17 @@ export function useStylesInheritanceChain( path: string[] ): SnapshotPropValue[]
 		throw new Error( 'useStylesInheritanceChain must be used within a StyleInheritanceProvider' );
 	}
 
+	const schema = getStylesSchema();
+
+	const topLevelPropType = schema?.[ path[ 0 ] ];
+
 	const snapshot = useStylesInheritanceSnapshot();
 
 	if ( ! snapshot ) {
 		return [];
 	}
 
-	return context.getInheritanceChain( snapshot, path );
+	return context.getInheritanceChain( snapshot, path, topLevelPropType );
 }
 
 const useAppliedStyles = () => {
@@ -68,12 +73,9 @@ const useAppliedStyles = () => {
 
 	const classesProp = useElementSetting< ClassesPropValue >( element.id, currentClassesProp );
 
-	const appliedStyles = classesPropTypeUtil.extract( classesProp );
+	const appliedStyles = classesPropTypeUtil.extract( classesProp ) ?? [];
 
-	return stylesRepository
-		.all()
-		.filter( ( style ) => appliedStyles?.includes( style.id ) )
-		.concat( baseStyles );
+	return stylesRepository.all().filter( ( style ) => [ ...baseStyles, ...appliedStyles ].includes( style.id ) );
 };
 
 const useBaseStyles = () => {
@@ -81,5 +83,5 @@ const useBaseStyles = () => {
 	const widgetsCache = getWidgetsCache();
 	const widgetCache = widgetsCache?.[ elementType.key ];
 
-	return Object.values( widgetCache?.base_styles ?? {} );
+	return Object.keys( widgetCache?.base_styles ?? {} );
 };

package/src/controls-actions.ts

@@ -1,9 +1,11 @@
 import { createMenu } from '@elementor/menus';
 
+import Action from './action';
 import PopoverAction from './popover-action';
 
 export const controlActionsMenu = createMenu( {
 	components: {
+		Action,
 		PopoverAction,
 	},
 } );

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

@@ -3,6 +3,7 @@ import { ControlAdornmentsProvider, PropKeyProvider, PropProvider } from '@eleme
 import { type PropKey, type PropValue } from '@elementor/editor-props';
 import { getStylesSchema } from '@elementor/editor-styles';
 
+import { useStyle } from '../contexts/style-context';
 import { useStylesField } from '../hooks/use-styles-field';
 import { StylesInheritanceIndicator } from '../styles-inheritance/styles-inheritance-indicator';
 import { createTopLevelOjectType } from './create-top-level-object-type';
@@ -15,6 +16,7 @@ export type StylesFieldProps = {
 
 export const StylesField = ( { bind, placeholder, children }: StylesFieldProps ) => {
 	const [ value, setValue ] = useStylesField( bind );
+	const { canEdit } = useStyle();
 
 	const stylesSchema = getStylesSchema();
 
@@ -41,6 +43,7 @@ export const StylesField = ( { bind, placeholder, children }: StylesFieldProps )
 				value={ values }
 				setValue={ setValues }
 				placeholder={ placeholderValues }
+				disabled={ ! canEdit }
 			>
 				<PropKeyProvider bind={ bind }>{ children }</PropKeyProvider>
 			</PropProvider>

package/src/init.ts

@@ -1,11 +1,14 @@
 import { injectIntoLogic } from '@elementor/editor';
 import { PrefetchUserData } from '@elementor/editor-current-user';
 import { __registerPanel as registerPanel } from '@elementor/editor-panels';
-import { blockCommand } from '@elementor/editor-v1-adapters';
+import { blockCommand, isExperimentActive } from '@elementor/editor-v1-adapters';
 
 import { EditingPanelHooks } from './components/editing-panel-hooks';
 import { init as initDynamics } from './dynamics/init';
 import { panel } from './panel';
+import { initResetStyleProps } from './reset-style-props';
+import { init as initStylesInheritance } from './styles-inheritance/init';
+import { EXPERIMENTAL_FEATURES } from './sync/experiments-flags';
 import { isAtomicWidgetSelected } from './sync/is-atomic-widget-selected';
 
 export function init() {
@@ -24,6 +27,13 @@ export function init() {
 
 	// TODO: Move it from here once we have dynamic package.
 	initDynamics();
+
+	// TODO: Move it from here once we have styles-inheritance package.
+	initStylesInheritance();
+
+	if ( isExperimentActive( EXPERIMENTAL_FEATURES.V_3_30 ) ) {
+		initResetStyleProps();
+	}
 }
 
 const blockV1Panel = () => {

package/src/reset-style-props.tsx

@@ -0,0 +1,31 @@
+import { useBoundProp } from '@elementor/editor-controls';
+import { BrushBigIcon } from '@elementor/icons';
+import { __ } from '@wordpress/i18n';
+
+import { useIsStyle } from './contexts/style-context';
+import { controlActionsMenu } from './controls-actions';
+
+const { registerAction } = controlActionsMenu;
+
+export function initResetStyleProps() {
+	registerAction( {
+		id: 'reset-style-value',
+		useProps: useResetStyleValueProps,
+	} );
+}
+
+// Temporary fix for the issue with ControlToggleButtonGroup.
+const EXCLUDED_BINDS = [ 'order', 'flex-grow', 'flex-shrink', 'flex-basis' ];
+
+export function useResetStyleValueProps() {
+	const isStyle = useIsStyle();
+	const { value, setValue, path, bind } = useBoundProp();
+
+	return {
+		visible:
+			isStyle && value !== null && value !== undefined && path.length <= 2 && ! EXCLUDED_BINDS.includes( bind ),
+		title: __( 'Clear', 'elementor' ),
+		icon: BrushBigIcon,
+		onClick: () => setValue( null ),
+	};
+}

package/src/styles-inheritance/components/action-icons.tsx

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import { Box } from '@elementor/ui';
+
+export const ActionIcons = () => (
+	<Box display="flex" gap={ 0.5 } alignItems="center">
+		{ /* Action Slot */ }
+	</Box>
+);