@elementor/editor-editing-panel 4.3.0-998 → 4.3.0-beta1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elementor/editor-editing-panel",
-  "version": "4.3.0-998",
+  "version": "4.3.0-beta1",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -39,31 +39,31 @@
     "dev": "tsup --config=../../tsup.dev.ts"
   },
   "dependencies": {
-    "@elementor/editor": "4.3.0-998",
-    "@elementor/editor-canvas": "4.3.0-998",
-    "@elementor/editor-controls": "4.3.0-998",
-    "@elementor/editor-documents": "4.3.0-998",
-    "@elementor/editor-elements": "4.3.0-998",
-    "@elementor/editor-interactions": "4.3.0-998",
-    "@elementor/editor-notifications": "4.3.0-998",
-    "@elementor/editor-panels": "4.3.0-998",
-    "@elementor/editor-props": "4.3.0-998",
-    "@elementor/editor-responsive": "4.3.0-998",
-    "@elementor/editor-styles": "4.3.0-998",
-    "@elementor/editor-styles-repository": "4.3.0-998",
-    "@elementor/editor-ui": "4.3.0-998",
-    "@elementor/editor-v1-adapters": "4.3.0-998",
-    "@elementor/http-client": "4.3.0-998",
+    "@elementor/editor": "4.3.0-beta1",
+    "@elementor/editor-canvas": "4.3.0-beta1",
+    "@elementor/editor-controls": "4.3.0-beta1",
+    "@elementor/editor-documents": "4.3.0-beta1",
+    "@elementor/editor-elements": "4.3.0-beta1",
+    "@elementor/editor-interactions": "4.3.0-beta1",
+    "@elementor/editor-notifications": "4.3.0-beta1",
+    "@elementor/editor-panels": "4.3.0-beta1",
+    "@elementor/editor-props": "4.3.0-beta1",
+    "@elementor/editor-responsive": "4.3.0-beta1",
+    "@elementor/editor-styles": "4.3.0-beta1",
+    "@elementor/editor-styles-repository": "4.3.0-beta1",
+    "@elementor/editor-ui": "4.3.0-beta1",
+    "@elementor/editor-v1-adapters": "4.3.0-beta1",
+    "@elementor/http-client": "4.3.0-beta1",
     "@elementor/icons": "~1.75.1",
-    "@elementor/editor-variables": "4.3.0-998",
-    "@elementor/locations": "4.3.0-998",
-    "@elementor/menus": "4.3.0-998",
-    "@elementor/query": "4.3.0-998",
-    "@elementor/schema": "4.3.0-998",
-    "@elementor/session": "4.3.0-998",
+    "@elementor/editor-variables": "4.3.0-beta1",
+    "@elementor/locations": "4.3.0-beta1",
+    "@elementor/menus": "4.3.0-beta1",
+    "@elementor/query": "4.3.0-beta1",
+    "@elementor/schema": "4.3.0-beta1",
+    "@elementor/session": "4.3.0-beta1",
     "@elementor/ui": "1.37.5",
-    "@elementor/utils": "4.3.0-998",
-    "@elementor/wp-media": "4.3.0-998",
+    "@elementor/utils": "4.3.0-beta1",
+    "@elementor/wp-media": "4.3.0-beta1",
     "@wordpress/i18n": "^5.13.0"
   },
   "peerDependencies": {

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

@@ -16,37 +16,12 @@ import { type StyleDefinitionStateWithNormal } from '../../styles-inheritance/ty
 import { getTempStylesProviderThemeColor } from '../../utils/get-styles-provider-color';
 import { trackStyles } from '../../utils/tracking/subscribe';
 import { StyleIndicator } from '../style-indicator';
+import { usePseudoStates } from '../style-states/use-pseudo-states';
 import { useCssClass } from './css-class-context';
 import { DuplicateClassMenuItem } from './duplicate-class-menu-item';
 import { LocalClassSubMenu } from './local-class-sub-menu';
 import { useUndoableUnapplyClass } from './use-apply-and-unapply-class';
 
-type State = {
-	key: StyleDefinitionStateWithNormal;
-	value: StyleDefinitionState | null;
-	label: string;
-};
-
-const DEFAULT_PSEUDO_STATES: State[] = [
-	{ key: 'normal', value: null, label: __( 'normal', 'elementor' ) },
-	{ key: 'hover', value: 'hover', label: __( 'hover', 'elementor' ) },
-	{ key: 'focus', value: 'focus', label: __( 'focus', 'elementor' ) },
-	{ key: 'active', value: 'active', label: __( 'active', 'elementor' ) },
-];
-
-function usePseudoStates(): State[] {
-	const { elementType } = useElement();
-	const { pseudoStates = [] } = elementType;
-
-	const additionalStates: State[] = pseudoStates.map( ( { name, value } ) => ( {
-		key: value as StyleDefinitionStateWithNormal,
-		value: value as StyleDefinitionState,
-		label: name,
-	} ) );
-
-	return [ ...DEFAULT_PSEUDO_STATES, ...additionalStates ];
-}
-
 type CssClassMenuProps = {
 	popupState: PopupState;
 	anchorEl: HTMLElement | null;
@@ -81,8 +56,19 @@ export function CssClassMenu( { popupState, anchorEl, fixed }: CssClassMenuProps
 		>
 			{ isLocalStyle && <LocalClassSubMenu popupState={ popupState } /> }
 			{ /* It has to be an array since MUI menu doesn't accept a Fragment as a child, and wrapping the items with an HTML element disrupts keyboard navigation */ }
-			{ getMenuItemsByProvider( { provider, closeMenu: popupState.close, fixed } ) }
-			<MenuSubheader sx={ { typography: 'caption', color: 'text.secondary', pb: 0.5, pt: 1 } }>
+			{ getMenuItemsByProvider( {
+				provider,
+				closeMenu: popupState.close,
+				fixed,
+			} ) }
+			<MenuSubheader
+				sx={ {
+					typography: 'caption',
+					color: 'text.secondary',
+					pb: 0.5,
+					pt: 1,
+				} }
+			>
 				{ __( 'States', 'elementor' ) }
 			</MenuSubheader>
 			{ pseudoStates.map( ( state ) => {
@@ -113,7 +99,14 @@ function ClassStatesMenu( { closeMenu }: { closeMenu: () => void } ) {
 	return (
 		<>
 			<Divider />
-			<MenuSubheader sx={ { typography: 'caption', color: 'text.secondary', pb: 0.5, pt: 1 } }>
+			<MenuSubheader
+				sx={ {
+					typography: 'caption',
+					color: 'text.secondary',
+					pb: 0.5,
+					pt: 1,
+				} }
+			>
 				{ customTitle }
 			</MenuSubheader>
 			{ elementStates.map( ( state ) => {
@@ -201,7 +194,13 @@ function getMenuItemsByProvider( {
 		actions.unshift(
 			<MenuSubheader
 				key="provider-label"
-				sx={ { typography: 'caption', color: 'text.secondary', pb: 0.5, pt: 1, textTransform: 'capitalize' } }
+				sx={ {
+					typography: 'caption',
+					color: 'text.secondary',
+					pb: 0.5,
+					pt: 1,
+					textTransform: 'capitalize',
+				} }
 			>
 				{ providerInstance?.labels?.singular }
 			</MenuSubheader>

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

@@ -300,6 +300,7 @@ function useOptions() {
 
 	return useProviders()
 		.filter( isProviderEditable )
+		.filter( ( provider ) => provider.getKey() !== 'default-styles' )
 		.flatMap< StyleDefOption >( ( provider ) => {
 			const isElements = isElementsStylesProvider( provider.getKey() );
 			const styleDefs = provider.actions.all( { elementId: element.id } );

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

@@ -1,7 +1,6 @@
 import { Fragment } from 'react';
 import * as React from 'react';
 import { getWidgetsCache } from '@elementor/editor-elements';
-import { isExperimentActive } from '@elementor/editor-v1-adapters';
 import { Divider, Stack, Tab, TabPanel, Tabs, useTabs } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
@@ -31,7 +30,6 @@ const PanelTabContent = () => {
 	const { element } = useElement();
 	const editorDefaults = useDefaultPanelSettings();
 	const defaultComponentTab = editorDefaults.defaultTab as TabValue;
-	const isInteractionsActive = isExperimentActive( 'e_interactions' );
 	const isPromotedElement = !! getWidgetsCache()?.[ element.type ]?.meta?.is_pro_promotion;
 
 	const [ storedTab, setCurrentTab ] = useStateByElement< TabValue >( 'tab', defaultComponentTab );
@@ -55,9 +53,7 @@ const PanelTabContent = () => {
 							<Tab label={ __( 'General', 'elementor' ) } { ...getTabProps( 'settings' ) } />
 						) }
 						<Tab label={ __( 'Style', 'elementor' ) } { ...getTabProps( 'style' ) } />
-						{ isInteractionsActive && (
-							<Tab label={ __( 'Interactions', 'elementor' ) } { ...getTabProps( 'interactions' ) } />
-						) }
+						<Tab label={ __( 'Interactions', 'elementor' ) } { ...getTabProps( 'interactions' ) } />
 					</Tabs>
 					<Divider />
 				</Stack>
@@ -69,11 +65,9 @@ const PanelTabContent = () => {
 				<TabPanel { ...getTabPanelProps( 'style' ) } disablePadding>
 					<StyleTab />
 				</TabPanel>
-				{ isInteractionsActive && (
-					<TabPanel { ...getTabPanelProps( 'interactions' ) } disablePadding>
-						<InteractionsTab />
-					</TabPanel>
-				) }
+				<TabPanel { ...getTabPanelProps( 'interactions' ) } disablePadding>
+					<InteractionsTab />
+				</TabPanel>
 			</Stack>
 		</ScrollProvider>
 	);

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

@@ -6,6 +6,7 @@ import { styled } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
 import { useStyle } from '../../../contexts/style-context';
+import { useInheritedValues } from '../../../contexts/styles-inheritance-context';
 import { useStylesField } from '../../../hooks/use-styles-field';
 import { useStylesFields } from '../../../hooks/use-styles-fields';
 import { PanelDivider } from '../../panel-divider';
@@ -38,6 +39,10 @@ const DEPENDENT_PROP_NAMES: Array< keyof DependentValues > = [
 
 export const PositionSection = () => {
 	const { value: position } = useStylesField< StringPropValue >( 'position', withHistoryLabel( POSITION_LABEL ) );
+	const inheritedPosition = useInheritedValues( [ 'position' ] ).position as StringPropValue | null;
+	const resolvedPosition = position ?? inheritedPosition ?? null;
+	const isPositionUnsetOrStatic = ! resolvedPosition || resolvedPosition.value === POSITION_STATIC;
+
 	const positionPrevRef = useRef( position );
 	const { values: dependentValues, setValues: setDependentValues } =
 		useStylesFields< DependentValues >( DEPENDENT_PROP_NAMES );
@@ -55,19 +60,19 @@ export const PositionSection = () => {
 			clearHistory();
 		}
 
-		if ( ( ! position || position?.value === POSITION_STATIC ) && dependentValues?.[ 'z-index' ] ) {
+		if ( isPositionUnsetOrStatic && dependentValues?.[ 'z-index' ] ) {
 			setDependentValues( { 'z-index': null }, withHistoryLabel( DIMENSIONS_LABEL ) );
 		}
 
 		positionPrevRef.current = position;
 		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [ position?.value ] );
+	}, [ position?.value, isPositionUnsetOrStatic ] );
 
 	return (
 		<StyledSectionContent>
 			<PositionField />
 			<DimensionsField />
-			<ZIndexField disabled={ ! position || position?.value === POSITION_STATIC } />
+			<ZIndexField disabled={ isPositionUnsetOrStatic } />
 			<PanelDivider />
 			<OffsetField />
 		</StyledSectionContent>

package/src/components/style-sections-definition.ts

@@ -0,0 +1,119 @@
+import type * as React from 'react';
+import { __ } from '@wordpress/i18n';
+
+import { BackgroundSection } from './style-sections/background-section/background-section';
+import { BorderSection } from './style-sections/border-section/border-section';
+import { EffectsSection } from './style-sections/effects-section/effects-section';
+import { LayoutSection } from './style-sections/layout-section/layout-section';
+import { PositionSection } from './style-sections/position-section/position-section';
+import { SizeSection } from './style-sections/size-section/size-section';
+import { SpacingSection } from './style-sections/spacing-section/spacing-section';
+import { TypographySection } from './style-sections/typography-section/typography-section';
+
+export type StyleSectionDefinition = {
+	name: string;
+	title: string;
+	component: () => React.JSX.Element;
+	fields: string[];
+};
+
+export const STYLE_SECTIONS: StyleSectionDefinition[] = [
+	{
+		name: 'Layout',
+		title: __( 'Layout', 'elementor' ),
+		component: LayoutSection,
+		fields: [
+			'display',
+			'flex-direction',
+			'flex-wrap',
+			'justify-content',
+			'align-items',
+			'align-content',
+			'align-self',
+			'gap',
+			'order',
+			'grid-column',
+			'grid-row',
+			'grid-auto-rows',
+			'grid-auto-columns',
+		],
+	},
+	{
+		name: 'Spacing',
+		title: __( 'Spacing', 'elementor' ),
+		component: SpacingSection,
+		fields: [ 'margin', 'padding' ],
+	},
+	{
+		name: 'Size',
+		title: __( 'Size', 'elementor' ),
+		component: SizeSection,
+		fields: [
+			'width',
+			'min-width',
+			'max-width',
+			'height',
+			'min-height',
+			'max-height',
+			'overflow',
+			'aspect-ratio',
+			'object-fit',
+		],
+	},
+	{
+		name: 'Position',
+		title: __( 'Position', 'elementor' ),
+		component: PositionSection,
+		fields: [ 'position', 'z-index', 'scroll-margin-top' ],
+	},
+	{
+		name: 'Typography',
+		title: __( 'Typography', 'elementor' ),
+		component: TypographySection,
+		fields: [
+			'font-family',
+			'font-weight',
+			'font-size',
+			'text-align',
+			'color',
+			'line-height',
+			'letter-spacing',
+			'word-spacing',
+			'column-count',
+			'text-decoration',
+			'text-transform',
+			'direction',
+			'font-style',
+			'stroke',
+		],
+	},
+	{
+		name: 'Background',
+		title: __( 'Background', 'elementor' ),
+		component: BackgroundSection,
+		fields: [ 'background' ],
+	},
+	{
+		name: 'Border',
+		title: __( 'Border', 'elementor' ),
+		component: BorderSection,
+		fields: [ 'border-radius', 'border-width', 'border-color', 'border-style' ],
+	},
+	{
+		name: 'Effects',
+		title: __( 'Effects', 'elementor' ),
+		component: EffectsSection,
+		fields: [
+			'mix-blend-mode',
+			'box-shadow',
+			'opacity',
+			'transform',
+			'filter',
+			'backdrop-filter',
+			'transform-origin',
+			'transition',
+		],
+	},
+];
+
+export const STYLE_SECTION_NAMES = STYLE_SECTIONS.map( ( section ) => section.name );

package/src/components/style-sections.tsx

@@ -0,0 +1,22 @@
+import * as React from 'react';
+
+import { STYLE_SECTIONS } from './style-sections-definition';
+import { StyleTabSection } from './style-tab-section';
+
+export const StyleSections = () => {
+	return (
+		<>
+			{ STYLE_SECTIONS.map( ( section ) => (
+				<StyleTabSection
+					key={ section.name }
+					section={ {
+						component: section.component,
+						name: section.name,
+						title: section.title,
+					} }
+					fields={ section.fields }
+				/>
+			) ) }
+		</>
+	);
+};

package/src/components/style-states/pseudo-state-menu-items.tsx

@@ -0,0 +1,44 @@
+import * as React from 'react';
+import { type StyleDefinitionState } from '@elementor/editor-styles';
+import { MenuListItem } from '@elementor/editor-ui';
+import { MenuSubheader } from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+
+import { type PseudoStateOption } from './pseudo-states';
+
+type PseudoStateMenuItemsProps = {
+	states: PseudoStateOption[];
+	activeState: StyleDefinitionState | null;
+	onSelectState: ( state: StyleDefinitionState | null ) => void;
+	onClose?: () => void;
+};
+
+export function PseudoStateMenuItems( { states, activeState, onSelectState, onClose }: PseudoStateMenuItemsProps ) {
+	return (
+		<>
+			<MenuSubheader
+				sx={ {
+					typography: 'caption',
+					color: 'text.secondary',
+					pb: 0.5,
+					pt: 1,
+				} }
+			>
+				{ __( 'States', 'elementor' ) }
+			</MenuSubheader>
+			{ states.map( ( state ) => (
+				<MenuListItem
+					key={ state.key }
+					selected={ state.value === activeState }
+					sx={ { textTransform: 'capitalize' } }
+					onClick={ () => {
+						onSelectState( state.value );
+						onClose?.();
+					} }
+				>
+					{ state.label }
+				</MenuListItem>
+			) ) }
+		</>
+	);
+}

package/src/components/style-states/pseudo-states.ts

@@ -0,0 +1,17 @@
+import { type StyleDefinitionState } from '@elementor/editor-styles';
+import { __ } from '@wordpress/i18n';
+
+import { type StyleDefinitionStateWithNormal } from '../../styles-inheritance/types';
+
+export type PseudoStateOption = {
+	key: StyleDefinitionStateWithNormal;
+	value: StyleDefinitionState | null;
+	label: string;
+};
+
+export const DEFAULT_PSEUDO_STATES: PseudoStateOption[] = [
+	{ key: 'normal', value: null, label: __( 'normal', 'elementor' ) },
+	{ key: 'hover', value: 'hover', label: __( 'hover', 'elementor' ) },
+	{ key: 'focus', value: 'focus', label: __( 'focus', 'elementor' ) },
+	{ key: 'active', value: 'active', label: __( 'active', 'elementor' ) },
+];

package/src/components/style-states/use-pseudo-states.ts

@@ -0,0 +1,18 @@
+import { type StyleDefinitionState } from '@elementor/editor-styles';
+
+import { useElement } from '../../contexts/element-context';
+import { type StyleDefinitionStateWithNormal } from '../../styles-inheritance/types';
+import { DEFAULT_PSEUDO_STATES, type PseudoStateOption } from './pseudo-states';
+
+export function usePseudoStates(): PseudoStateOption[] {
+	const { elementType } = useElement();
+	const { pseudoStates = [] } = elementType;
+
+	const additionalStates: PseudoStateOption[] = pseudoStates.map( ( { name, value } ) => ( {
+		key: value as StyleDefinitionStateWithNormal,
+		value: value as StyleDefinitionState,
+		label: name,
+	} ) );
+
+	return [ ...DEFAULT_PSEUDO_STATES, ...additionalStates ];
+}

package/src/components/style-tab.tsx

@@ -6,7 +6,6 @@ import { type StyleDefinitionID, type StyleDefinitionState } from '@elementor/ed
 import { createLocation } from '@elementor/locations';
 import { SessionStorageProvider } from '@elementor/session';
 import { Box, Divider, Stack } from '@elementor/ui';
-import { __ } from '@wordpress/i18n';
 
 import { ClassesPropProvider } from '../contexts/classes-prop-context';
 import { useElement } from '../contexts/element-context';
@@ -16,15 +15,7 @@ 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 { SectionsList } from './sections-list';
-import { BackgroundSection } from './style-sections/background-section/background-section';
-import { BorderSection } from './style-sections/border-section/border-section';
-import { EffectsSection } from './style-sections/effects-section/effects-section';
-import { LayoutSection } from './style-sections/layout-section/layout-section';
-import { PositionSection } from './style-sections/position-section/position-section';
-import { SizeSection } from './style-sections/size-section/size-section';
-import { SpacingSection } from './style-sections/spacing-section/spacing-section';
-import { TypographySection } from './style-sections/typography-section/typography-section';
-import { StyleTabSection } from './style-tab-section';
+import { StyleSections } from './style-sections';
 
 const TABS_HEADER_HEIGHT = '37px';
 
@@ -66,118 +57,7 @@ export const StyleTab = () => {
 							<Divider />
 						</ClassesHeader>
 						<SectionsList>
-							<StyleTabSection
-								section={ {
-									component: LayoutSection,
-									name: 'Layout',
-									title: __( 'Layout', 'elementor' ),
-								} }
-								fields={ [
-									'display',
-									'flex-direction',
-									'flex-wrap',
-									'justify-content',
-									'align-items',
-									'align-content',
-									'align-self',
-									'gap',
-									'order',
-									'grid-column',
-									'grid-row',
-									'grid-auto-rows',
-									'grid-auto-columns',
-								] }
-							/>
-							<StyleTabSection
-								section={ {
-									component: SpacingSection,
-									name: 'Spacing',
-									title: __( 'Spacing', 'elementor' ),
-								} }
-								fields={ [ 'margin', 'padding' ] }
-							/>
-							<StyleTabSection
-								section={ {
-									component: SizeSection,
-									name: 'Size',
-									title: __( 'Size', 'elementor' ),
-								} }
-								fields={ [
-									'width',
-									'min-width',
-									'max-width',
-									'height',
-									'min-height',
-									'max-height',
-									'overflow',
-									'aspect-ratio',
-									'object-fit',
-								] }
-							/>
-							<StyleTabSection
-								section={ {
-									component: PositionSection,
-									name: 'Position',
-									title: __( 'Position', 'elementor' ),
-								} }
-								fields={ [ 'position', 'z-index', 'scroll-margin-top' ] }
-							/>
-							<StyleTabSection
-								section={ {
-									component: TypographySection,
-									name: 'Typography',
-									title: __( 'Typography', 'elementor' ),
-								} }
-								fields={ [
-									'font-family',
-									'font-weight',
-									'font-size',
-									'text-align',
-									'color',
-									'line-height',
-									'letter-spacing',
-									'word-spacing',
-									'column-count',
-									'text-decoration',
-									'text-transform',
-									'direction',
-									'font-style',
-									'stroke',
-								] }
-							/>
-							<StyleTabSection
-								section={ {
-									component: BackgroundSection,
-									name: 'Background',
-									title: __( 'Background', 'elementor' ),
-								} }
-								fields={ [ 'background' ] }
-							/>
-							<StyleTabSection
-								section={ {
-									component: BorderSection,
-									name: 'Border',
-									title: __( 'Border', 'elementor' ),
-								} }
-								fields={ [ 'border-radius', 'border-width', 'border-color', 'border-style' ] }
-							/>
-							<StyleTabSection
-								section={ {
-									component: EffectsSection,
-									name: 'Effects',
-									title: __( 'Effects', 'elementor' ),
-								} }
-								fields={ [
-									'mix-blend-mode',
-									'box-shadow',
-									'opacity',
-									'transform',
-									'filter',
-									'backdrop-filter',
-									'transform-origin',
-									'transition',
-								] }
-							/>
+							<StyleSections />
 							<StyleTabSlot />
 						</SectionsList>
 						<Box sx={ { height: '150px' } } />
@@ -192,7 +72,12 @@ function ClassesHeader( { children }: { children: React.ReactNode } ) {
 	const scrollDirection = useScrollDirection();
 
 	return (
-		<Stack sx={ { ...stickyHeaderStyles, top: scrollDirection === 'up' ? TABS_HEADER_HEIGHT : 0 } }>
+		<Stack
+			sx={ {
+				...stickyHeaderStyles,
+				top: scrollDirection === 'up' ? TABS_HEADER_HEIGHT : 0,
+			} }
+		>
 			{ children }
 		</Stack>
 	);

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

@@ -6,6 +6,7 @@ import { getBreakpointsTree } from '@elementor/editor-responsive';
 import { getStylesSchema } from '@elementor/editor-styles';
 import { stylesRepository } from '@elementor/editor-styles-repository';
 
+import { useDefaultStyleTagFromPreview } from '../hooks/use-default-style-tag-from-preview';
 import { useStylesRerender } from '../hooks/use-styles-rerender';
 import { createStylesInheritance } from '../styles-inheritance/create-styles-inheritance';
 import {
@@ -81,6 +82,8 @@ export function useInheritedValues( propKeys: string[] ): Record< string, PropVa
 const useAppliedStyles = () => {
 	const currentClassesProp = useClassesProp();
 	const baseStyles = useBaseStyles();
+	const defaultTagStyleId = useDefaultTagStyleId();
+	const { id: activeStyleId } = useStyle();
 
 	useStylesRerender();
 
@@ -88,7 +91,14 @@ const useAppliedStyles = () => {
 
 	const appliedStyles = classesPropTypeUtil.extract( classesProp ) ?? [];
 
-	return stylesRepository.all().filter( ( style ) => [ ...baseStyles, ...appliedStyles ].includes( style.id ) );
+	const applicableIds = [
+		...baseStyles,
+		...appliedStyles,
+		...( defaultTagStyleId ? [ defaultTagStyleId ] : [] ),
+		...( activeStyleId ? [ activeStyleId ] : [] ),
+	];
+
+	return stylesRepository.all().filter( ( style ) => applicableIds.includes( style.id ) );
 };
 
 const useBaseStyles = () => {
@@ -98,3 +108,9 @@ const useBaseStyles = () => {
 
 	return Object.keys( widgetCache?.base_styles ?? {} );
 };
+
+const useDefaultTagStyleId = () => {
+	const { element } = useElement();
+
+	return useDefaultStyleTagFromPreview( element.id );
+};