@elementor/editor-editing-panel 4.3.0-1041 → 4.3.0-1043

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elementor/editor-editing-panel",
-  "version": "4.3.0-1041",
+  "version": "4.3.0-1043",
   "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-1041",
-    "@elementor/editor-canvas": "4.3.0-1041",
-    "@elementor/editor-controls": "4.3.0-1041",
-    "@elementor/editor-documents": "4.3.0-1041",
-    "@elementor/editor-elements": "4.3.0-1041",
-    "@elementor/editor-interactions": "4.3.0-1041",
-    "@elementor/editor-notifications": "4.3.0-1041",
-    "@elementor/editor-panels": "4.3.0-1041",
-    "@elementor/editor-props": "4.3.0-1041",
-    "@elementor/editor-responsive": "4.3.0-1041",
-    "@elementor/editor-styles": "4.3.0-1041",
-    "@elementor/editor-styles-repository": "4.3.0-1041",
-    "@elementor/editor-ui": "4.3.0-1041",
-    "@elementor/editor-v1-adapters": "4.3.0-1041",
-    "@elementor/http-client": "4.3.0-1041",
+    "@elementor/editor": "4.3.0-1043",
+    "@elementor/editor-canvas": "4.3.0-1043",
+    "@elementor/editor-controls": "4.3.0-1043",
+    "@elementor/editor-documents": "4.3.0-1043",
+    "@elementor/editor-elements": "4.3.0-1043",
+    "@elementor/editor-interactions": "4.3.0-1043",
+    "@elementor/editor-notifications": "4.3.0-1043",
+    "@elementor/editor-panels": "4.3.0-1043",
+    "@elementor/editor-props": "4.3.0-1043",
+    "@elementor/editor-responsive": "4.3.0-1043",
+    "@elementor/editor-styles": "4.3.0-1043",
+    "@elementor/editor-styles-repository": "4.3.0-1043",
+    "@elementor/editor-ui": "4.3.0-1043",
+    "@elementor/editor-v1-adapters": "4.3.0-1043",
+    "@elementor/http-client": "4.3.0-1043",
     "@elementor/icons": "~1.75.1",
-    "@elementor/editor-variables": "4.3.0-1041",
-    "@elementor/locations": "4.3.0-1041",
-    "@elementor/menus": "4.3.0-1041",
-    "@elementor/query": "4.3.0-1041",
-    "@elementor/schema": "4.3.0-1041",
-    "@elementor/session": "4.3.0-1041",
+    "@elementor/editor-variables": "4.3.0-1043",
+    "@elementor/locations": "4.3.0-1043",
+    "@elementor/menus": "4.3.0-1043",
+    "@elementor/query": "4.3.0-1043",
+    "@elementor/schema": "4.3.0-1043",
+    "@elementor/session": "4.3.0-1043",
     "@elementor/ui": "1.37.5",
-    "@elementor/utils": "4.3.0-1041",
-    "@elementor/wp-media": "4.3.0-1041",
+    "@elementor/utils": "4.3.0-1043",
+    "@elementor/wp-media": "4.3.0-1043",
     "@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/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,7 @@ export function useInheritedValues( propKeys: string[] ): Record< string, PropVa
 const useAppliedStyles = () => {
 	const currentClassesProp = useClassesProp();
 	const baseStyles = useBaseStyles();
+	const defaultTagStyleId = useDefaultTagStyleId();
 
 	useStylesRerender();
 
@@ -88,7 +90,9 @@ const useAppliedStyles = () => {
 
 	const appliedStyles = classesPropTypeUtil.extract( classesProp ) ?? [];
 
-	return stylesRepository.all().filter( ( style ) => [ ...baseStyles, ...appliedStyles ].includes( style.id ) );
+	const applicableIds = [ ...baseStyles, ...appliedStyles, ...( defaultTagStyleId ? [ defaultTagStyleId ] : [] ) ];
+
+	return stylesRepository.all().filter( ( style ) => applicableIds.includes( style.id ) );
 };
 
 const useBaseStyles = () => {
@@ -98,3 +102,9 @@ const useBaseStyles = () => {
 
 	return Object.keys( widgetCache?.base_styles ?? {} );
 };
+
+const useDefaultTagStyleId = () => {
+	const { element } = useElement();
+
+	return useDefaultStyleTagFromPreview( element.id );
+};

package/src/hooks/use-default-style-tag-from-preview.ts

@@ -0,0 +1,14 @@
+import { getDefaultStyleTagFromPreviewElement } from '@elementor/editor-elements';
+import { __privateUseListenTo as useListenTo, commandEndEvent, windowEvent } from '@elementor/editor-v1-adapters';
+
+export function useDefaultStyleTagFromPreview( elementId: string ) {
+	return useListenTo(
+		[
+			windowEvent( 'elementor/preview/atomic-widget/render' ),
+			commandEndEvent( 'document/elements/settings' ),
+			commandEndEvent( 'document/elements/set-settings' ),
+			commandEndEvent( 'document/elements/select' ),
+		],
+		() => getDefaultStyleTagFromPreviewElement( elementId )
+	);
+}

package/src/index.ts

@@ -1,4 +1,10 @@
-export { type ValidationEvent, type ValidationResult } from './components/creatable-autocomplete';
+export {
+	CreatableAutocomplete,
+	type CreatableAutocompleteProps,
+	type Option,
+	type ValidationEvent,
+	type ValidationResult,
+} from './components/creatable-autocomplete';
 export { injectIntoCssClassConvert } from './components/css-classes/css-class-convert-local';
 export { ControlLabel } from './components/control-label';
 export { injectIntoClassSelectorActions } from './components/css-classes/css-class-selector';
@@ -6,15 +12,26 @@ export { CustomCssIndicator } from './components/custom-css-indicator';
 export { injectIntoPanelHeaderTop } from './components/editing-panel';
 export { EditingPanelTabs } from './components/editing-panel-tabs';
 export { SectionContent } from './components/section-content';
+export { SectionsList } from './components/sections-list';
 export { SettingsControl } from './components/settings-control';
 export { SettingsField } from './controls-registry/settings-field';
 export { StyleIndicator } from './components/style-indicator';
 export { injectIntoStyleTab } from './components/style-tab';
+export { StyleSections } from './components/style-sections';
+export {
+	STYLE_SECTION_NAMES,
+	STYLE_SECTIONS,
+	type StyleSectionDefinition,
+} from './components/style-sections-definition';
+export { DEFAULT_PSEUDO_STATES, type PseudoStateOption } from './components/style-states/pseudo-states';
+export { PseudoStateMenuItems } from './components/style-states/pseudo-state-menu-items';
+export { usePseudoStates } from './components/style-states/use-pseudo-states';
 export { injectIntoGridFields } from './components/style-sections/layout-section/layout-section';
 export { StyleTabSection } from './components/style-tab-section';
-export { useClassesProp } from './contexts/classes-prop-context';
+export { ClassesPropProvider, useClassesProp } from './contexts/classes-prop-context';
 export { ElementProvider, useElement } from './contexts/element-context';
-export { useStyle } from './contexts/style-context';
+export { StyleProvider, useStyle } from './contexts/style-context';
+export { StyleInheritanceProvider } from './contexts/styles-inheritance-context';
 export { Control as BaseControl } from './controls-registry/control';
 export { ControlTypeContainer } from './controls-registry/control-type-container';
 export { controlsRegistry, type ControlType } from './controls-registry/controls-registry';