@elementor/editor-editing-panel 1.24.0 → 1.28.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elementor/editor-editing-panel",
-  "version": "1.24.0",
+  "version": "1.28.0",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -39,16 +39,17 @@
     "dev": "tsup --config=../../tsup.dev.ts"
   },
   "dependencies": {
-    "@elementor/editor": "0.18.5",
-    "@elementor/editor-controls": "0.21.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.7.0",
-    "@elementor/editor-panels": "0.14.0",
-    "@elementor/editor-props": "0.11.1",
-    "@elementor/editor-responsive": "0.13.3",
-    "@elementor/editor-styles": "0.6.4",
-    "@elementor/editor-styles-repository": "0.8.1",
-    "@elementor/editor-ui": "0.5.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.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 __( 'Format is not valid', 'elementor' );
-	}
+	const result = validateStyleLabel( newLabel );
 
-	if ( stylesRepository.isLabelExist( newLabel ) ) {
-		return __( 'Existing name', 'elementor' );
+	if ( result.isValid ) {
+		return null;
 	}
 
-	return null;
+	return result.error;
 };

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

@@ -1,31 +1,37 @@
 import * as React from 'react';
 import { type StyleDefinitionState } from '@elementor/editor-styles';
-import { 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 } from '@elementor/ui';
+import { bindMenu, Divider, Menu, MenuSubheader, type PopupState, Stack } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
 import { useStyle } from '../../contexts/style-context';
 import { useUnapplyClass } from '../../hooks/use-unapply-class';
+import { type StyleDefinitionStateWithNormal } from '../../styles-inheritance/types';
+import { StyleIndicator, type StyleIndicatorVariant } from '../style-indicator';
 
 const STATES: NonNullable< StyleDefinitionState >[] = [ 'hover', 'focus', 'active' ];
 
 type CssClassMenuProps = {
 	styleId: string | null;
-	provider: string;
+	provider: string | null;
 	popupState: PopupState;
 	handleRename: () => void;
 	anchorEl: HTMLElement | null;
 };
 
 export function CssClassMenu( { styleId, provider, popupState, handleRename, anchorEl }: CssClassMenuProps ) {
+	const styledStates = useStyledStates( styleId );
+
+	const indicatorVariant = ! provider || isElementsStylesProvider( provider ) ? 'local' : 'global';
+
 	const handleKeyDown = ( e: React.KeyboardEvent< HTMLElement > ) => {
 		e.stopPropagation();
 	};
 
 	return (
 		<Menu
-			MenuListProps={ { dense: true } }
+			MenuListProps={ { dense: true, sx: { minWidth: '160px' } } }
 			{ ...bindMenu( popupState ) }
 			anchorEl={ anchorEl }
 			anchorOrigin={ {
@@ -37,34 +43,62 @@ 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 } ) }
 			<MenuSubheader sx={ { typography: 'caption', color: 'text.secondary', pb: 0.5, pt: 1 } }>
-				{ __( 'Pseudo classes', 'elementor' ) }
+				{ __( 'States', 'elementor' ) }
 			</MenuSubheader>
-			<StateMenuItem key="normal" state={ null } styleId={ styleId } closeMenu={ popupState.close } />
+			<StateMenuItem
+				key="normal"
+				state={ null }
+				styleId={ styleId }
+				closeMenu={ popupState.close }
+				isStyled={ styledStates.normal }
+				indicatorVariant={ indicatorVariant }
+			/>
 			{ STATES.map( ( state ) => {
 				return (
-					<StateMenuItem key={ state } state={ state } styleId={ styleId } closeMenu={ popupState.close } />
+					<StateMenuItem
+						key={ state }
+						state={ state }
+						styleId={ styleId }
+						closeMenu={ popupState.close }
+						isStyled={ styledStates[ state ] }
+						indicatorVariant={ indicatorVariant }
+					/>
 				);
 			} ) }
 		</Menu>
 	);
 }
 
+function useStyledStates( styleId: string | null ): Partial< Record< StyleDefinitionStateWithNormal, true > > {
+	const { meta } = useStyle();
+
+	const styleDef = stylesRepository.all().find( ( style ) => style.id === styleId );
+
+	return Object.fromEntries(
+		styleDef?.variants
+			.filter( ( variant ) => meta.breakpoint === variant.meta.breakpoint )
+			.map( ( variant ) => [ variant.meta.state ?? 'normal', true ] ) ?? []
+	);
+}
+
 function getMenuItemsByProvider( {
 	provider,
 	styleId,
 	handleRename,
 	closeMenu,
 }: {
-	provider: string;
+	provider: string | null;
 	styleId: string | null;
 	handleRename: () => void;
 	closeMenu: () => void;
 } ) {
-	if ( ! styleId ) {
+	if ( ! styleId || ! provider ) {
 		return [];
 	}
 
@@ -82,7 +116,7 @@ function getMenuItemsByProvider( {
 		actions.unshift(
 			<MenuSubheader
 				key="provider-label"
-				sx={ { typography: 'caption', color: 'text.secondary', pb: 0.5, pt: 1 } }
+				sx={ { typography: 'caption', color: 'text.secondary', pb: 0.5, pt: 1, textTransform: 'capitalize' } }
 			>
 				{ providerInstance?.labels?.singular }
 			</MenuSubheader>
@@ -97,9 +131,18 @@ type StateMenuItemProps = {
 	state: StyleDefinitionState;
 	styleId: string | null;
 	closeMenu: () => void;
+	isStyled?: boolean;
+	indicatorVariant: StyleIndicatorVariant;
 };
 
-function StateMenuItem( { state, styleId, closeMenu, ...props }: StateMenuItemProps ) {
+function StateMenuItem( {
+	state,
+	styleId,
+	closeMenu,
+	isStyled = false,
+	indicatorVariant,
+	...props
+}: StateMenuItemProps ) {
 	const { id: activeId, setId: setActiveId, setMetaState: setActiveMetaState, meta } = useStyle();
 	const { state: activeState } = meta;
 
@@ -121,7 +164,12 @@ function StateMenuItem( { state, styleId, closeMenu, ...props }: StateMenuItemPr
 				closeMenu();
 			} }
 		>
-			{ state ? state : 'Normal' }
+			<Stack gap={ 0.75 } direction="row" alignItems="center">
+				{ isStyled && (
+					<StyleIndicator aria-label={ __( 'Has style', 'elementor' ) } variant={ indicatorVariant } />
+				) }
+				{ state ?? 'normal' }
+			</Stack>
 		</MenuListItem>
 	);
 }

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 }>
-					{ __( 'CSS classes', 'elementor' ) }
-				</Typography>
+				<FormLabel htmlFor={ ID } size="small">
+					{ __( 'Classes', 'elementor' ) }
+				</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,8 +155,9 @@ function useOptions() {
 					fixed: isElements,
 					color: isElements ? 'accent' : 'global',
 					icon: isElements ? <MapPinIcon /> : null,
-					provider: provider.key,
-					group: provider.labels?.plural,
+					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 ?? '' ),
 				};
 			} );
 		} );
@@ -164,10 +173,10 @@ function useCreateActions( {
 	return useCreateActionsByProvider().map( ( [ provider, create ] ): Action< StyleDefOption > => {
 		return {
 			// translators: %s is the label of the new class.
-			label: ( value ) => __( 'Create new "%s"', 'elementor' ).replace( '%s', value ),
-			// translators: %s is the singular label of css class provider (e.g "Global CSS Class").
-			group: __( 'Create New %s', 'elementor' ).replace( '%s', provider.labels?.singular ?? '' ),
-			condition: ( _, inputValue ) => isLabelValid( inputValue ) && ! hasReachedLimit( provider ),
+			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 ) => validateStyleLabel( inputValue ).isValid && ! hasReachedLimit( provider ),
 			apply: ( label ) => {
 				const createdId = create( label );
 
@@ -183,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/editing-panel-tabs.tsx

@@ -19,14 +19,7 @@ export const EditingPanelTabs = () => {
 		// Reference: https://react.dev/learn/preserving-and-resetting-state#resetting-a-form-with-a-key
 		<Fragment key={ element.id }>
 			<Stack direction="column" sx={ { width: '100%' } }>
-				<Tabs
-					variant="fullWidth"
-					indicatorColor="secondary"
-					textColor="inherit"
-					size="small"
-					sx={ { mt: 0.5 } }
-					{ ...getTabsProps() }
-				>
+				<Tabs variant="fullWidth" size="small" sx={ { mt: 0.5 } } { ...getTabsProps() }>
 					<Tab label={ __( 'General', 'elementor' ) } { ...getTabProps( 'settings' ) } />
 					<Tab label={ __( 'Style', 'elementor' ) } { ...getTabProps( 'style' ) } />
 				</Tabs>

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-indicator.tsx

@@ -0,0 +1,23 @@
+import { styled } from '@elementor/ui';
+
+export type StyleIndicatorVariant = 'overridden' | 'local' | 'global';
+
+export const StyleIndicator = styled( 'div', {
+	shouldForwardProp: ( prop ) => prop !== 'variant',
+} )< { variant?: StyleIndicatorVariant } >`
+	width: 5px;
+	height: 5px;
+	border-radius: 50%;
+	background-color: ${ ( { theme, variant } ) => {
+		switch ( variant ) {
+			case 'overridden':
+				return theme.palette.warning.light;
+			case 'global':
+				return theme.palette.global.dark;
+			case 'local':
+				return theme.palette.accent.main;
+			default:
+				return theme.palette.text.disabled;
+		}
+	} };
+`;

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

@@ -13,7 +13,6 @@ import { __ } from '@wordpress/i18n';
 
 import { StylesField } from '../../../controls-registry/styles-field';
 import { useDirection } from '../../../hooks/use-direction';
-import { RotatedIcon } from '../layout-section/utils/rotated-icon';
 
 const StartStartIcon = withDirection( RadiusTopLeftIcon );
 const StartEndIcon = withDirection( RadiusTopRightIcon );
@@ -32,22 +31,22 @@ const getEndEndLabel = ( isSiteRtl: boolean ) =>
 const getCorners = ( isSiteRtl: boolean ): EqualUnequalItems => [
 	{
 		label: getStartStartLabel( isSiteRtl ),
-		icon: <RotatedIcon icon={ StartStartIcon } size="tiny" />,
+		icon: <StartStartIcon fontSize={ 'tiny' } />,
 		bind: 'start-start',
 	},
 	{
 		label: getStartEndLabel( isSiteRtl ),
-		icon: <RotatedIcon icon={ StartEndIcon } size="tiny" />,
+		icon: <StartEndIcon fontSize={ 'tiny' } />,
 		bind: 'start-end',
 	},
 	{
 		label: getEndStartLabel( isSiteRtl ),
-		icon: <RotatedIcon icon={ EndStartIcon } size="tiny" />,
+		icon: <EndStartIcon fontSize={ 'tiny' } />,
 		bind: 'end-start',
 	},
 	{
 		label: getEndEndLabel( isSiteRtl ),
-		icon: <RotatedIcon icon={ EndEndIcon } size="tiny" />,
+		icon: <EndEndIcon fontSize={ 'tiny' } />,
 		bind: 'end-end',
 	},
 ];

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

@@ -7,7 +7,6 @@ import { __ } from '@wordpress/i18n';
 
 import { StylesField } from '../../../controls-registry/styles-field';
 import { useDirection } from '../../../hooks/use-direction';
-import { RotatedIcon } from '../layout-section/utils/rotated-icon';
 
 const InlineStartIcon = withDirection( SideRightIcon );
 const InlineEndIcon = withDirection( SideLeftIcon );
@@ -20,7 +19,7 @@ const getEdges = ( isSiteRtl: boolean ): EqualUnequalItems => [
 	},
 	{
 		label: isSiteRtl ? __( 'Left', 'elementor' ) : __( 'Right', 'elementor' ),
-		icon: <RotatedIcon icon={ InlineStartIcon } size="tiny" />,
+		icon: <InlineStartIcon fontSize={ 'tiny' } />,
 		bind: 'inline-end',
 	},
 	{
@@ -30,7 +29,7 @@ const getEdges = ( isSiteRtl: boolean ): EqualUnequalItems => [
 	},
 	{
 		label: isSiteRtl ? __( 'Right', 'elementor' ) : __( 'Left', 'elementor' ),
-		icon: <RotatedIcon icon={ InlineEndIcon } size="tiny" />,
+		icon: <InlineEndIcon fontSize={ 'tiny' } />,
 		bind: 'inline-start',
 	},
 ];

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;