@elementor/editor-editing-panel 1.43.1 → 1.44.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elementor/editor-editing-panel",
-  "version": "1.43.1",
+  "version": "1.44.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.2",
-    "@elementor/editor-controls": "0.35.0",
+    "@elementor/editor-canvas": "0.22.3",
+    "@elementor/editor-controls": "0.36.0",
     "@elementor/editor-current-user": "0.5.0",
     "@elementor/editor-documents": "0.13.6",
     "@elementor/editor-elements": "0.8.4",
@@ -50,7 +50,7 @@
     "@elementor/editor-responsive": "0.13.5",
     "@elementor/editor-styles": "0.6.8",
     "@elementor/editor-styles-repository": "0.10.1",
-    "@elementor/editor-ui": "0.10.1",
+    "@elementor/editor-ui": "0.11.0",
     "@elementor/editor-v1-adapters": "0.12.0",
     "@elementor/icons": "1.44.0",
     "@elementor/locations": "0.8.0",

package/src/action.tsx

@@ -17,7 +17,7 @@ export default function Action( { title, visible = true, icon: Icon, onClick }:
 	}
 
 	return (
-		<Tooltip placement="bottom" title={ title } arrow={ true }>
+		<Tooltip placement="top" title={ title } arrow={ true }>
 			<IconButton aria-label={ title } size={ SIZE } onClick={ onClick }>
 				<Icon fontSize={ SIZE } />
 			</IconButton>

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

@@ -3,26 +3,25 @@ import { type PropsWithChildren } from 'react';
 import { MinusIcon, PlusIcon } from '@elementor/icons';
 import { Collapse, IconButton, Stack } from '@elementor/ui';
 
-import { ControlLabel } from './control-label';
 import { SectionContent } from './section-content';
 
 const SIZE = 'tiny';
 
 type Props = {
-	label: string;
 	isAdded: boolean;
 	onAdd: () => void;
 	onRemove: () => void;
 	disabled?: boolean;
+	renderLabel: () => React.ReactNode;
 };
 
 export const AddOrRemoveContent = ( {
 	isAdded,
-	label,
 	onAdd,
 	onRemove,
 	children,
 	disabled,
+	renderLabel,
 }: PropsWithChildren< Props > ) => {
 	return (
 		<SectionContent>
@@ -34,7 +33,7 @@ export const AddOrRemoveContent = ( {
 					marginInlineEnd: -0.75,
 				} }
 			>
-				<ControlLabel>{ label }</ControlLabel>
+				{ renderLabel() }
 				{ isAdded ? (
 					<IconButton size={ SIZE } onClick={ onRemove } aria-label="Remove" disabled={ disabled }>
 						<MinusIcon fontSize={ SIZE } />

package/src/components/collapsible-content.tsx

@@ -1,15 +1,32 @@
 import * as React from 'react';
-import { useState } from 'react';
-import { Button, Collapse, Stack } from '@elementor/ui';
+import { type ReactNode, useState } from 'react';
+import { Button, Collapse, Stack, styled } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
 import { CollapseIcon } from './collapse-icon';
 
+type StaticItem< T = unknown > = T extends ( ...args: unknown[] ) => unknown ? never : T;
+
+type CallbackItem< T > = ( isOpen: boolean ) => T;
+export type CollapsibleValue< T > = CallbackItem< T > | StaticItem< T >;
+
 type CollapsibleContentProps = React.PropsWithChildren< {
 	defaultOpen?: boolean;
+	titleEnd?: CollapsibleValue< ReactNode | string > | null;
 } >;
 
-export const CollapsibleContent = ( { children, defaultOpen = false }: CollapsibleContentProps ) => {
+const IndicatorsWrapper = styled( 'div' )`
+	position: absolute;
+	top: 0;
+	right: ${ ( { theme } ) => theme.spacing( 3 ) };
+	height: 100%;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+`;
+
+export const CollapsibleContent = ( { children, defaultOpen = false, titleEnd = null }: CollapsibleContentProps ) => {
 	const [ open, setOpen ] = useState( defaultOpen );
 
 	const handleToggle = () => {
@@ -18,20 +35,31 @@ export const CollapsibleContent = ( { children, defaultOpen = false }: Collapsib
 
 	return (
 		<Stack>
-			<Button
-				fullWidth
-				size="small"
-				color="secondary"
-				variant="outlined"
-				onClick={ handleToggle }
-				endIcon={ <CollapseIcon open={ open } /> }
-				sx={ { my: 0.5 } }
-			>
-				{ open ? __( 'Show less', 'elementor' ) : __( 'Show more', 'elementor' ) }
-			</Button>
+			<Stack sx={ { position: 'relative' } }>
+				<Button
+					fullWidth
+					size="small"
+					color="secondary"
+					variant="outlined"
+					onClick={ handleToggle }
+					endIcon={ <CollapseIcon open={ open } /> }
+					sx={ { my: 0.5 } }
+				>
+					{ open ? __( 'Show less', 'elementor' ) : __( 'Show more', 'elementor' ) }
+				</Button>
+				{ titleEnd && <IndicatorsWrapper>{ getCollapsibleValue( titleEnd, open ) }</IndicatorsWrapper> }
+			</Stack>
 			<Collapse in={ open } timeout="auto" unmountOnExit>
 				{ children }
 			</Collapse>
 		</Stack>
 	);
 };
+
+export function getCollapsibleValue< T >( value: CollapsibleValue< T >, isOpen: boolean ): T {
+	if ( typeof value === 'function' ) {
+		return ( value as CallbackItem< T > )( isOpen );
+	}
+
+	return value;
+}

package/src/components/control-label.tsx

@@ -5,7 +5,7 @@ import { Stack } from '@elementor/ui';
 
 export const ControlLabel = ( { children }: PropsWithChildren< object > ) => {
 	return (
-		<Stack direction="row" alignItems="center" justifyItems="start" gap={ 1 }>
+		<Stack direction="row" alignItems="center" justifyItems="start" gap={ 0.25 }>
 			<ControlFormLabel>{ children }</ControlFormLabel>
 			<ControlAdornments />
 		</Stack>

package/src/components/section.tsx

@@ -1,34 +1,48 @@
 import * as React from 'react';
-import { type PropsWithChildren, useId } from 'react';
+import { type PropsWithChildren, type ReactNode, useId } from 'react';
+import { isExperimentActive } from '@elementor/editor-v1-adapters';
 import { Collapse, Divider, ListItemButton, ListItemText, Stack } from '@elementor/ui';
 
 import { useStateByElement } from '../hooks/use-state-by-element';
+import { EXPERIMENTAL_FEATURES } from '../sync/experiments-flags';
 import { CollapseIcon } from './collapse-icon';
+import { type CollapsibleValue, getCollapsibleValue } from './collapsible-content';
 
 type Props = PropsWithChildren< {
 	title: string;
 	defaultExpanded?: boolean;
+	titleEnd?: CollapsibleValue< ReactNode | string >;
 } >;
 
-export function Section( { title, children, defaultExpanded = false }: Props ) {
+export function Section( { title, children, defaultExpanded = false, titleEnd }: Props ) {
 	const [ isOpen, setIsOpen ] = useStateByElement( title, !! defaultExpanded );
 
+	const handleClick = () => {
+		setIsOpen( ! isOpen );
+	};
+
 	const id = useId();
 	const labelId = `label-${ id }`;
 	const contentId = `content-${ id }`;
 
+	const isUsingTitleEnd = isExperimentActive( EXPERIMENTAL_FEATURES.V_3_30 );
+
 	return (
 		<>
 			<ListItemButton
 				id={ labelId }
 				aria-controls={ contentId }
-				onClick={ () => setIsOpen( ! isOpen ) }
+				onClick={ handleClick }
 				sx={ { '&:hover': { backgroundColor: 'transparent' } } }
 			>
-				<ListItemText
-					secondary={ title }
-					secondaryTypographyProps={ { color: 'text.primary', variant: 'caption', fontWeight: 'bold' } }
-				/>
+				<Stack direction="row" alignItems="center" justifyItems="start" flexGrow={ 1 } gap={ 0.5 }>
+					<ListItemText
+						secondary={ title }
+						secondaryTypographyProps={ { color: 'text.primary', variant: 'caption', fontWeight: 'bold' } }
+						sx={ { flexGrow: 0, flexShrink: 1, marginInlineEnd: 1 } }
+					/>
+					{ isUsingTitleEnd ? getCollapsibleValue( titleEnd, isOpen ) : null }
+				</Stack>
 				<CollapseIcon open={ isOpen } color="secondary" fontSize="tiny" />
 			</ListItemButton>
 			<Collapse id={ contentId } aria-labelledby={ labelId } in={ isOpen } timeout="auto" unmountOnExit>

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

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { ControlFormLabel } from '@elementor/editor-controls';
 import { __ } from '@wordpress/i18n';
 
 import { useStyle } from '../../../contexts/style-context';
@@ -34,11 +35,11 @@ export const BorderField = () => {
 
 	return (
 		<AddOrRemoveContent
-			label={ __( 'Border', 'elementor' ) }
 			isAdded={ hasBorder }
 			onAdd={ addBorder }
 			onRemove={ removeBorder }
 			disabled={ ! canEdit }
+			renderLabel={ () => <ControlFormLabel>{ __( 'Border', 'elementor' ) }</ControlFormLabel> }
 		>
 			<BorderWidthField />
 			<BorderColorField />

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

@@ -45,15 +45,15 @@ export const DimensionsField = () => {
 };
 const DimensionField = ( { side, label }: { side: Side; label: string } ) => {
 	return (
-		<Grid container gap={ 0.75 } alignItems="center">
-			<Grid item xs={ 12 }>
-				<ControlLabel>{ label }</ControlLabel>
-			</Grid>
-			<Grid item xs={ 12 }>
-				<StylesField bind={ side }>
+		<StylesField bind={ side }>
+			<Grid container gap={ 0.75 } alignItems="center">
+				<Grid item xs={ 12 }>
+					<ControlLabel>{ label }</ControlLabel>
+				</Grid>
+				<Grid item xs={ 12 }>
 					<SizeControl startIcon={ sideIcons[ side ] } extendedValues={ [ 'auto' ] } />
-				</StylesField>
+				</Grid>
 			</Grid>
-		</Grid>
+		</StylesField>
 	);
 };

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

@@ -7,10 +7,10 @@ import { __ } from '@wordpress/i18n';
 
 import { StylesField, type StylesFieldProps } from '../../../controls-registry/styles-field';
 import { useStylesField } from '../../../hooks/use-styles-field';
-import { CollapsibleContent } from '../../collapsible-content';
 import { ControlLabel } from '../../control-label';
 import { PanelDivider } from '../../panel-divider';
 import { SectionContent } from '../../section-content';
+import { StyleTabCollapsibleContent } from '../../style-tab-collapsible-content';
 import { ObjectFitField } from './object-fit-field';
 import { ObjectPositionField } from './object-position-field';
 import { OverflowField } from './overflow-field';
@@ -61,7 +61,7 @@ export const SizeSection = () => {
 				<OverflowField />
 			</Stack>
 			{ isVersion330Active && (
-				<CollapsibleContent>
+				<StyleTabCollapsibleContent fields={ [ 'aspect-ratio', 'object-fit' ] }>
 					<Stack gap={ 2 }>
 						<StylesField bind={ 'aspect-ratio' }>
 							<AspectRatioControl label={ __( 'Aspect Ratio', 'elementor' ) } />
@@ -74,7 +74,7 @@ export const SizeSection = () => {
 							</Grid>
 						) }
 					</Stack>
-				</CollapsibleContent>
+				</StyleTabCollapsibleContent>
 			) }
 		</SectionContent>
 	);

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-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/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/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';