@elementor/editor-editing-panel 1.43.1 → 1.45.0

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

@@ -6,6 +6,7 @@ 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';
+import { ControlLabel } from '../../control-label';
 
 const initTextStroke = {
 	$$type: 'stroke',
@@ -41,11 +42,11 @@ export const TextStrokeField = () => {
 	return (
 		<StylesField bind={ 'stroke' }>
 			<AddOrRemoveContent
-				label={ __( 'Text stroke', 'elementor' ) }
 				isAdded={ hasTextStroke }
 				onAdd={ addTextStroke }
 				onRemove={ removeTextStroke }
 				disabled={ ! canEdit }
+				renderLabel={ () => <ControlLabel>{ __( 'Text stroke', 'elementor' ) }</ControlLabel> }
 			>
 				<StrokeControl />
 			</AddOrRemoveContent>

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

@@ -3,9 +3,9 @@ import type { NumberPropValue } from '@elementor/editor-props';
 import { isExperimentActive } from '@elementor/editor-v1-adapters';
 
 import { useStylesField } from '../../../hooks/use-styles-field';
-import { CollapsibleContent } from '../../collapsible-content';
 import { PanelDivider } from '../../panel-divider';
 import { SectionContent } from '../../section-content';
+import { StyleTabCollapsibleContent } from '../../style-tab-collapsible-content';
 import { ColumnCountField } from './column-count-field';
 import { ColumnGapField } from './column-gap-field';
 import { FontFamilyField } from './font-family-field';
@@ -34,7 +34,19 @@ export const TypographySection = () => {
 			<PanelDivider />
 			<TextAlignmentField />
 			<TextColorField />
-			<CollapsibleContent>
+			<StyleTabCollapsibleContent
+				fields={ [
+					'line-height',
+					'letter-spacing',
+					'word-spacing',
+					'column-count',
+					'text-decoration',
+					'text-transform',
+					'direction',
+					'font-style',
+					'stroke',
+				] }
+			>
 				<SectionContent sx={ { pt: 2 } }>
 					<LineHeightField />
 					<LetterSpacingField />
@@ -52,7 +64,7 @@ export const TypographySection = () => {
 					<FontStyleField />
 					<TextStrokeField />
 				</SectionContent>
-			</CollapsibleContent>
+			</StyleTabCollapsibleContent>
 		</SectionContent>
 	);
 };

package/src/components/style-sections/typography-section/word-spacing-field.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { type MutableRefObject, useRef } from 'react';
 import { SizeControl } from '@elementor/editor-controls';
 import { Grid } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
@@ -7,14 +8,16 @@ import { StylesField } from '../../../controls-registry/styles-field';
 import { ControlLabel } from '../../control-label';
 
 export const WordSpacingField = () => {
+	const rowRef: MutableRefObject< HTMLElement | undefined > = useRef();
+
 	return (
 		<StylesField bind="word-spacing">
-			<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap">
+			<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap" ref={ rowRef }>
 				<Grid item xs={ 6 }>
 					<ControlLabel>{ __( 'Word spacing', 'elementor' ) }</ControlLabel>
 				</Grid>
 				<Grid item xs={ 6 }>
-					<SizeControl />
+					<SizeControl anchorRef={ rowRef } />
 				</Grid>
 			</Grid>
 		</StylesField>

package/src/components/style-tab-collapsible-content.tsx

@@ -0,0 +1,22 @@
+import * as React from 'react';
+import { type PropsWithChildren } from 'react';
+import { isExperimentActive } from '@elementor/editor-v1-adapters';
+
+import { StylesInheritanceSectionIndicators } from '../styles-inheritance/components/styles-inheritance-section-indicators';
+import { EXPERIMENTAL_FEATURES } from '../sync/experiments-flags';
+import { CollapsibleContent } from './collapsible-content';
+type Props = PropsWithChildren< { fields?: string[] } >;
+
+export const StyleTabCollapsibleContent = ( { fields = [], children }: Props ) => {
+	return <CollapsibleContent titleEnd={ getStylesInheritanceIndicators( fields ) }>{ children }</CollapsibleContent>;
+};
+
+export function getStylesInheritanceIndicators( fields: string[] ) {
+	const isUsingFieldsIndicators = isExperimentActive( EXPERIMENTAL_FEATURES.V_3_30 );
+
+	if ( fields.length === 0 || ! isUsingFieldsIndicators ) {
+		return null;
+	}
+
+	return ( isOpen: boolean ) => ( ! isOpen ? <StylesInheritanceSectionIndicators fields={ fields } /> : null );
+}

package/src/components/style-tab-section.tsx

@@ -0,0 +1,30 @@
+import * as React from 'react';
+import { isExperimentActive } from '@elementor/editor-v1-adapters';
+
+import { useDefaultPanelSettings } from '../hooks/use-default-panel-settings';
+import { EXPERIMENTAL_FEATURES } from '../sync/experiments-flags';
+import { Section } from './section';
+import { getStylesInheritanceIndicators } from './style-tab-collapsible-content';
+
+type Section = {
+	component: () => React.JSX.Element;
+	name: string;
+	title: string;
+};
+
+type Props = { section: Section; fields?: string[] };
+
+export const StyleTabSection = ( { section, fields = [] }: Props ) => {
+	const { component, name, title } = section;
+	const tabDefaults = useDefaultPanelSettings();
+	const SectionComponent = component;
+	const isExpanded = isExperimentActive( EXPERIMENTAL_FEATURES.V_3_30 )
+		? tabDefaults.defaultSectionsExpanded.style?.includes( name )
+		: false;
+
+	return (
+		<Section title={ title } defaultExpanded={ isExpanded } titleEnd={ getStylesInheritanceIndicators( fields ) }>
+			<SectionComponent />
+		</Section>
+	);
+};

package/src/components/style-tab.tsx

@@ -3,7 +3,6 @@ import { useState } from 'react';
 import { CLASSES_PROP_KEY } from '@elementor/editor-props';
 import { useActiveBreakpoint } from '@elementor/editor-responsive';
 import { type StyleDefinitionID, type StyleDefinitionState } from '@elementor/editor-styles';
-import { isExperimentActive } from '@elementor/editor-v1-adapters';
 import { SessionStorageProvider } from '@elementor/session';
 import { Divider, Stack } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
@@ -14,10 +13,7 @@ import { useScrollDirection } from '../contexts/scroll-context';
 import { StyleProvider } from '../contexts/style-context';
 import { StyleInheritanceProvider } from '../contexts/styles-inheritance-context';
 import { useActiveStyleDefId } from '../hooks/use-active-style-def-id';
-import { useDefaultPanelSettings } from '../hooks/use-default-panel-settings';
-import { EXPERIMENTAL_FEATURES } from '../sync/experiments-flags';
 import { CssClassSelector } from './css-classes/css-class-selector';
-import { Section } from './section';
 import { SectionsList } from './sections-list';
 import { BackgroundSection } from './style-sections/background-section/background-section';
 import { BorderSection } from './style-sections/border-section/border-section';
@@ -27,6 +23,7 @@ import { PositionSection } from './style-sections/position-section/position-sect
 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';
 
 const TABS_HEADER_HEIGHT = '37px';
 
@@ -38,27 +35,6 @@ export const stickyHeaderStyles = {
 	transition: 'top 300ms ease',
 };
 
-type Section = {
-	component: () => React.JSX.Element;
-	name: string;
-	title: string;
-};
-
-const PanelSection = ( { section }: { section: Section } ) => {
-	const { component, name, title } = section;
-	const tabDefaults = useDefaultPanelSettings();
-	const SectionComponent = component;
-	const isExpanded = isExperimentActive( EXPERIMENTAL_FEATURES.V_3_30 )
-		? tabDefaults.defaultSectionsExpanded.style?.includes( name )
-		: false;
-
-	return (
-		<Section title={ title } defaultExpanded={ isExpanded }>
-			<SectionComponent />
-		</Section>
-	);
-};
-
 export const StyleTab = () => {
 	const currentClassesProp = useCurrentClassesProp();
 	const [ activeStyleDefId, setActiveStyleDefId ] = useActiveStyleDefId( currentClassesProp );
@@ -83,61 +59,103 @@ export const StyleTab = () => {
 							<Divider />
 						</ClassesHeader>
 						<SectionsList>
-							<PanelSection
+							<StyleTabSection
 								section={ {
 									component: LayoutSection,
 									name: 'Layout',
 									title: __( 'Layout', 'elementor' ),
 								} }
+								fields={ [
+									'display',
+									'flex-direction',
+									'flex-wrap',
+									'justify-content',
+									'align-items',
+									'align-content',
+									'align-self',
+									'gap',
+								] }
 							/>
-							<PanelSection
+							<StyleTabSection
 								section={ {
 									component: SpacingSection,
 									name: 'Spacing',
 									title: __( 'Spacing', 'elementor' ),
 								} }
+								fields={ [ 'margin', 'padding' ] }
 							/>
-							<PanelSection
+							<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',
+								] }
 							/>
-							<PanelSection
+							<StyleTabSection
 								section={ {
 									component: PositionSection,
 									name: 'Position',
 									title: __( 'Position', 'elementor' ),
 								} }
+								fields={ [ 'position', 'z-index', 'scroll-margin-top' ] }
 							/>
-							<PanelSection
+							<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',
+								] }
 							/>
-							<PanelSection
+							<StyleTabSection
 								section={ {
 									component: BackgroundSection,
 									name: 'Background',
 									title: __( 'Background', 'elementor' ),
 								} }
+								fields={ [ 'background' ] }
 							/>
-							<PanelSection
+							<StyleTabSection
 								section={ {
 									component: BorderSection,
 									name: 'Border',
 									title: __( 'Border', 'elementor' ),
 								} }
+								fields={ [ 'border-radius', 'border-width', 'border-color', 'border-style' ] }
 							/>
-							<PanelSection
+							<StyleTabSection
 								section={ {
 									component: EffectsSection,
 									name: 'Effects',
 									title: __( 'Effects', 'elementor' ),
 								} }
+								fields={ [ 'box-shadow' ] }
 							/>
 						</SectionsList>
 					</StyleInheritanceProvider>
@@ -170,5 +188,3 @@ function useCurrentClassesProp(): string {
 
 	return prop[ 0 ];
 }
-
-export { PanelSection as StyleTabSection };

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

@@ -5,7 +5,7 @@ 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 { StylesInheritanceIndicator } from '../styles-inheritance/components/styles-inheritance-indicator';
 import { createTopLevelOjectType } from './create-top-level-object-type';
 
 export type StylesFieldProps = {

package/src/dynamics/components/background-control-dynamic-tag.tsx

@@ -0,0 +1,48 @@
+import * as React from 'react';
+import { PropKeyProvider, PropProvider, useBoundProp } from '@elementor/editor-controls';
+import {
+	backgroundImageOverlayPropTypeUtil,
+	type BackgroundOverlayImagePropType,
+	type BackgroundOverlayPropType,
+	type ObjectPropType,
+	type UnionPropType,
+} from '@elementor/editor-props';
+import { DatabaseIcon } from '@elementor/icons';
+
+import { useDynamicTag } from '../hooks/use-dynamic-tag';
+
+// Since this is injected, the initial prop provider does not dig into the nested structure of the value.
+// We need to synthetically create a type that matches the expected structure of the value.
+
+export const BackgroundControlDynamicTagIcon = () => <DatabaseIcon fontSize="tiny" />;
+
+export const BackgroundControlDynamicTagLabel = ( { value }: { value: BackgroundOverlayPropType } ) => {
+	const context = useBoundProp( backgroundImageOverlayPropTypeUtil );
+
+	return (
+		<PropProvider { ...context } value={ value.value }>
+			<PropKeyProvider bind="image">
+				<Wrapper rawValue={ value.value } />
+			</PropKeyProvider>
+		</PropProvider>
+	);
+};
+
+const Wrapper = ( { rawValue }: { rawValue: BackgroundOverlayPropType[ 'value' ] } ) => {
+	const { propType } = useBoundProp< BackgroundOverlayPropType, UnionPropType >();
+
+	const imageOverlayPropType = propType.prop_types[ 'background-image-overlay' ] as ObjectPropType;
+	return (
+		<PropProvider propType={ imageOverlayPropType.shape.image } value={ rawValue } setValue={ () => void 0 }>
+			<PropKeyProvider bind="src">
+				<Content rawValue={ rawValue.image } />
+			</PropKeyProvider>
+		</PropProvider>
+	);
+};
+
+const Content = ( { rawValue }: { rawValue: BackgroundOverlayImagePropType } ) => {
+	const src = rawValue.value.src;
+	const dynamicTag = useDynamicTag( src.value.name || '' );
+	return <React.Fragment>{ dynamicTag?.label }</React.Fragment>;
+};

package/src/dynamics/components/dynamic-selection-control.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { ControlFormLabel, useBoundProp } from '@elementor/editor-controls';
 import type { Control, ControlsSection } from '@elementor/editor-elements';
+import { PopoverHeader } from '@elementor/editor-ui';
 import { DatabaseIcon, SettingsIcon, XIcon } from '@elementor/icons';
 import {
 	bindPopover,
@@ -15,7 +16,6 @@ import {
 	Tab,
 	TabPanel,
 	Tabs,
-	Typography,
 	UnstableTag as Tag,
 	usePopupState,
 	useTabs,
@@ -81,13 +81,11 @@ export const DynamicSelectionControl = () => {
 				{ ...bindPopover( selectionPopoverState ) }
 			>
 				<Stack>
-					<Stack direction="row" alignItems="center" pl={ 1.5 } pr={ 0.5 } py={ 1.5 }>
-						<DatabaseIcon fontSize={ SIZE } sx={ { mr: 0.5 } } />
-						<Typography variant="subtitle2">{ __( 'Dynamic tags', 'elementor' ) }</Typography>
-						<IconButton size={ SIZE } sx={ { ml: 'auto' } } onClick={ selectionPopoverState.close }>
-							<XIcon fontSize={ SIZE } />
-						</IconButton>
-					</Stack>
+					<PopoverHeader
+						title={ __( 'Dynamic tags', 'elementor' ) }
+						onClose={ selectionPopoverState.close }
+						icon={ <DatabaseIcon fontSize={ SIZE } /> }
+					/>
 					<DynamicSelection onSelect={ selectionPopoverState.close } />
 				</Stack>
 			</Popover>
@@ -116,13 +114,11 @@ export const DynamicSettingsPopover = ( { dynamicTag }: { dynamicTag: DynamicTag
 				{ ...bindPopover( popupState ) }
 			>
 				<Paper component={ Stack } sx={ { minHeight: '300px', width: '220px' } }>
-					<Stack direction="row" alignItems="center" px={ 1.5 } pt={ 2 } pb={ 1 }>
-						<DatabaseIcon fontSize={ SIZE } sx={ { mr: 0.5 } } />
-						<Typography variant="subtitle2">{ dynamicTag.label }</Typography>
-						<IconButton sx={ { ml: 'auto' } } size={ SIZE } onClick={ popupState.close }>
-							<XIcon fontSize={ SIZE } />
-						</IconButton>
-					</Stack>
+					<PopoverHeader
+						title={ dynamicTag.label }
+						onClose={ popupState.close }
+						icon={ <DatabaseIcon fontSize={ SIZE } /> }
+					/>
 					<DynamicSettings controls={ dynamicTag.atomic_controls } />
 				</Paper>
 			</Popover>

package/src/dynamics/init.ts

@@ -1,7 +1,14 @@
 import { settingsTransformersRegistry, styleTransformersRegistry } from '@elementor/editor-canvas';
+import { injectIntoRepeaterItemIcon, injectIntoRepeaterItemLabel } from '@elementor/editor-controls';
+import { type BackgroundOverlayPropType, type PropValue } from '@elementor/editor-props';
+import { type InjectedComponent } from '@elementor/locations';
 
 import { registerControlReplacement } from '../control-replacement';
 import { controlActionsMenu } from '../controls-actions';
+import {
+	BackgroundControlDynamicTagIcon,
+	BackgroundControlDynamicTagLabel,
+} from './components/background-control-dynamic-tag';
 import { DynamicSelectionControl } from './components/dynamic-selection-control';
 import { dynamicTransformer } from './dynamic-transformer';
 import { usePropDynamicAction } from './hooks/use-prop-dynamic-action';
@@ -15,6 +22,20 @@ export const init = () => {
 		condition: ( { value } ) => isDynamicPropValue( value ),
 	} );
 
+	injectIntoRepeaterItemLabel( {
+		id: 'dynamic-background-image',
+		condition: ( { value } ) =>
+			isDynamicPropValue( ( value as BackgroundOverlayPropType ).value?.image?.value?.src ),
+		component: BackgroundControlDynamicTagLabel as InjectedComponent< { value: PropValue } >,
+	} );
+
+	injectIntoRepeaterItemIcon( {
+		id: 'dynamic-background-image',
+		condition: ( { value } ) =>
+			isDynamicPropValue( ( value as BackgroundOverlayPropType ).value?.image?.value?.src ),
+		component: BackgroundControlDynamicTagIcon,
+	} );
+
 	registerPopoverAction( {
 		id: 'dynamic-tags',
 		useProps: usePropDynamicAction,

package/src/index.ts

@@ -5,5 +5,6 @@ export { injectIntoClassSelectorActions } from './components/css-classes/css-cla
 export { usePanelActions, usePanelStatus } from './panel';
 export { type ValidationResult, type ValidationEvent } from './components/creatable-autocomplete';
 export { controlActionsMenu } from './controls-actions';
+export { useFontFamilies } from './components/style-sections/typography-section/hooks/use-font-families';
 
 export { init } from './init';

package/src/popover-action.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { type ComponentType, type ElementType as ReactElementType, useId } from 'react';
-import { XIcon } from '@elementor/icons';
-import { bindPopover, bindToggle, IconButton, Popover, Stack, Tooltip, Typography, usePopupState } from '@elementor/ui';
+import { PopoverHeader } from '@elementor/editor-ui';
+import { bindPopover, bindToggle, IconButton, Popover, Tooltip, usePopupState } from '@elementor/ui';
 
 const SIZE = 'tiny';
 
@@ -44,13 +44,7 @@ export default function PopoverAction( {
 				} }
 				{ ...bindPopover( popupState ) }
 			>
-				<Stack direction="row" alignItems="center" pl={ 1.5 } pr={ 0.5 } py={ 1.5 }>
-					<Icon fontSize={ SIZE } sx={ { mr: 0.5 } } />
-					<Typography variant="subtitle2">{ title }</Typography>
-					<IconButton sx={ { ml: 'auto' } } size={ SIZE } onClick={ popupState.close }>
-						<XIcon fontSize={ SIZE } />
-					</IconButton>
-				</Stack>
+				<PopoverHeader title={ title } onClose={ popupState.close } icon={ <Icon fontSize={ SIZE } /> } />
 				<PopoverContent closePopover={ popupState.close } />
 			</Popover>
 		</>

package/src/styles-inheritance/components/{label-chip.tsx → infotip/label-chip.tsx}

@@ -4,7 +4,7 @@ import { InfoCircleIcon } from '@elementor/icons';
 import { Chip, type Theme, Tooltip } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
-import { type ChipColors } from '../types';
+import { type ChipColors } from '../../types';
 
 type Props = {
 	displayLabel: string;

package/src/styles-inheritance/{styles-inheritance-indicator.tsx → components/styles-inheritance-indicator.tsx}

@@ -6,12 +6,12 @@ import { isExperimentActive } from '@elementor/editor-v1-adapters';
 import { Tooltip } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
-import { StyleIndicator } from '../components/style-indicator';
-import { useStyle } from '../contexts/style-context';
-import { useStylesInheritanceChain } from '../contexts/styles-inheritance-context';
-import { EXPERIMENTAL_FEATURES } from '../sync/experiments-flags';
-import { isUsingIndicatorPopover } from './consts';
-import { StyleIndicatorInfotip } from './styles-inheritance-infotip';
+import { StyleIndicator } from '../../components/style-indicator';
+import { useStyle } from '../../contexts/style-context';
+import { useStylesInheritanceChain } from '../../contexts/styles-inheritance-context';
+import { EXPERIMENTAL_FEATURES } from '../../sync/experiments-flags';
+import { isUsingIndicatorPopover } from '../consts';
+import { StylesInheritanceInfotip } from './styles-inheritance-infotip';
 
 export const StylesInheritanceIndicator = () => {
 	const { path, propType } = useBoundProp();
@@ -61,14 +61,14 @@ export const StylesInheritanceIndicator = () => {
 	}
 
 	return (
-		<StyleIndicatorInfotip
+		<StylesInheritanceInfotip
 			inheritanceChain={ inheritanceChain }
 			path={ finalPath }
 			propType={ propType }
 			label={ label }
 		>
 			<StyleIndicator variant={ variantType } />
-		</StyleIndicatorInfotip>
+		</StylesInheritanceInfotip>
 	);
 };
 

package/src/styles-inheritance/{styles-inheritance-infotip.tsx → components/styles-inheritance-infotip.tsx}

@@ -18,12 +18,12 @@ import {
 } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
-import { useSectionContentRef } from '../components/section-content';
-import { useDirection } from '../hooks/use-direction';
-import { ActionIcons, BreakpointIcon, LabelChip, ValueComponent } from './components';
-import { useNormalizedInheritanceChainItems } from './hooks/use-normalized-inheritance-chain-items';
-import { stylesInheritanceTransformersRegistry } from './styles-inheritance-transformers-registry';
-import { type SnapshotPropValue } from './types';
+import { useSectionContentRef } from '../../components/section-content';
+import { useDirection } from '../../hooks/use-direction';
+import { useNormalizedInheritanceChainItems } from '../hooks/use-normalized-inheritance-chain-items';
+import { stylesInheritanceTransformersRegistry } from '../styles-inheritance-transformers-registry';
+import { type SnapshotPropValue } from '../types';
+import { ActionIcons, BreakpointIcon, LabelChip, ValueComponent } from './infotip';
 
 type Props = {
 	inheritanceChain: SnapshotPropValue[];
@@ -35,7 +35,7 @@ type Props = {
 
 const SIZE = 'tiny';
 
-export const StyleIndicatorInfotip = ( { inheritanceChain, propType, path, label, children }: Props ) => {
+export const StylesInheritanceInfotip = ( { inheritanceChain, propType, path, label, children }: Props ) => {
 	const [ showInfotip, setShowInfotip ] = useState< boolean >( false );
 	const toggleInfotip = () => setShowInfotip( ( prev ) => ! prev );
 	const closeInfotip = () => setShowInfotip( false );