@elementor/editor-editing-panel 1.17.0 → 1.18.0

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

@@ -1,98 +1,49 @@
 import * as React from 'react';
-import { ControlLabel } from '@elementor/editor-controls';
-import { type StringPropValue } from '@elementor/editor-props';
-import { StrikethroughIcon, UnderlineIcon } from '@elementor/icons';
-import { Grid, ToggleButton as ToggleButtonBase, ToggleButtonGroup, type ToggleButtonProps } from '@elementor/ui';
+import { ControlLabel, ToggleControl, type ToggleControlProps } from '@elementor/editor-controls';
+import { MinusIcon, OverlineIcon, StrikethroughIcon, UnderlineIcon } from '@elementor/icons';
+import { Grid } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
-import { useStylesField } from '../../../hooks/use-styles-field';
-
-const buttonSize = 'tiny';
-
-export const TextDecorationField = () => {
-	const [ textDecoration, setTextDecoration ] = useStylesField< StringPropValue | null >( 'text-decoration' );
-
-	const formats = [ ...( textDecoration?.value || '' ).split( ' ' ) ];
-	const handleSetTextDecoration = ( newValue: string | null ) => {
-		if ( newValue === null ) {
-			return setTextDecoration( null );
-		}
-
-		setTextDecoration( {
-			$$type: 'string',
-			value: newValue,
-		} );
-	};
-
-	return (
+import { StylesField } from '../../../controls-registry/styles-field';
+
+type Decoration = 'none' | 'underline' | 'line-through' | 'overline';
+
+const options: ToggleControlProps< Decoration >[ 'options' ] = [
+	{
+		value: 'none',
+		label: __( 'None', 'elementor' ),
+		renderContent: ( { size } ) => <MinusIcon fontSize={ size } />,
+		showTooltip: true,
+		exclusive: true,
+	},
+	{
+		value: 'underline',
+		label: __( 'Underline', 'elementor' ),
+		renderContent: ( { size } ) => <UnderlineIcon fontSize={ size } />,
+		showTooltip: true,
+	},
+	{
+		value: 'line-through',
+		label: __( 'Line-through', 'elementor' ),
+		renderContent: ( { size } ) => <StrikethroughIcon fontSize={ size } />,
+		showTooltip: true,
+	},
+	{
+		value: 'overline',
+		label: __( 'Overline', 'elementor' ),
+		renderContent: ( { size } ) => <OverlineIcon fontSize={ size } />,
+		showTooltip: true,
+	},
+];
+export const TextDecorationField = () => (
+	<StylesField bind={ 'text-decoration' }>
 		<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap">
 			<Grid item xs={ 6 }>
-				<ControlLabel>{ __( 'Style', 'elementor' ) }</ControlLabel>
+				<ControlLabel>{ __( 'Line decoration', 'elementor' ) }</ControlLabel>
 			</Grid>
 			<Grid item xs={ 6 } display="flex" justifyContent="end">
-				<ToggleButtonGroup value={ formats }>
-					<ShorthandControl
-						value="line-through"
-						currentValues={ textDecoration?.value || '' }
-						updateValues={ handleSetTextDecoration }
-						aria-label="line-through"
-					>
-						<StrikethroughIcon fontSize={ buttonSize } />
-					</ShorthandControl>
-					<ShorthandControl
-						value="underline"
-						currentValues={ textDecoration?.value || '' }
-						updateValues={ handleSetTextDecoration }
-						aria-label="underline"
-					>
-						<UnderlineIcon fontSize={ buttonSize } />
-					</ShorthandControl>
-				</ToggleButtonGroup>
+				<ToggleControl options={ options } exclusive={ false } />
 			</Grid>
 		</Grid>
-	);
-};
-
-type ShorthandControlProps = React.PropsWithChildren< {
-	value: string;
-	currentValues: string;
-	updateValues: ( newValue: string | null ) => void;
-	'aria-label': string;
-} >;
-
-export const ShorthandControl = ( {
-	children,
-	value,
-	currentValues,
-	updateValues,
-	'aria-label': ariaLabel,
-}: ShorthandControlProps ) => {
-	const valuesArr = currentValues.split( ' ' ).filter( Boolean );
-	const selected = valuesArr.includes( value );
-
-	const toggleValue = ( newValue: string ) => {
-		if ( selected ) {
-			updateValues( valuesArr.filter( ( v ) => v !== newValue ).join( ' ' ) || null );
-		} else {
-			updateValues( [ ...valuesArr, newValue ].join( ' ' ) );
-		}
-	};
-
-	return (
-		<ToggleButton value={ value } onChange={ toggleValue } selected={ selected } aria-label={ ariaLabel }>
-			{ children }
-		</ToggleButton>
-	);
-};
-
-type ControlToggleButtonProps = Omit< ToggleButtonProps, 'onChange' > & {
-	onChange: ( newValue: string ) => void;
-};
-
-const ToggleButton = ( { onChange, ...props }: ControlToggleButtonProps ) => {
-	const handleChange = ( _e: React.MouseEvent< HTMLElement >, newValue: string ) => {
-		onChange( newValue );
-	};
-
-	return <ToggleButtonBase { ...props } onChange={ handleChange } size={ buttonSize } />;
-};
+	</StylesField>
+);

package/src/components/style-tab.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { useState } from 'react';
-import { useElementSetting, useElementStyles } from '@elementor/editor-elements';
-import { type ClassesPropValue, type PropKey } from '@elementor/editor-props';
+import { getElementStyles, useElementSetting } from '@elementor/editor-elements';
+import { CLASSES_PROP_KEY, type ClassesPropValue, type PropKey } from '@elementor/editor-props';
 import { useActiveBreakpoint } from '@elementor/editor-responsive';
 import { type StyleDefinitionID, type StyleDefinitionState } from '@elementor/editor-styles';
 import { SessionStorageProvider } from '@elementor/session';
@@ -11,6 +11,7 @@ import { __ } from '@wordpress/i18n';
 import { ClassesPropProvider } from '../contexts/classes-prop-context';
 import { useElement } from '../contexts/element-context';
 import { StyleProvider } from '../contexts/style-context';
+import { StyleInheritanceProvider } from '../contexts/styles-inheritance-context';
 import { CssClassSelector } from './css-classes/css-class-selector';
 import { Section } from './section';
 import { SectionsList } from './sections-list';
@@ -23,8 +24,6 @@ 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';
 
-const CLASSES_PROP_KEY = 'classes';
-
 export const StyleTab = () => {
 	const currentClassesProp = useCurrentClassesProp();
 	const [ activeStyleDefId, setActiveStyleDefId ] = useActiveStyleDefId( currentClassesProp );
@@ -43,34 +42,36 @@ export const StyleTab = () => {
 				setMetaState={ setActiveStyleState }
 			>
 				<SessionStorageProvider prefix={ activeStyleDefId ?? '' }>
-					<CssClassSelector />
-					<Divider />
-					<SectionsList>
-						<Section title={ __( 'Layout', 'elementor' ) }>
-							<LayoutSection />
-						</Section>
-						<Section title={ __( 'Spacing', 'elementor' ) }>
-							<SpacingSection />
-						</Section>
-						<Section title={ __( 'Size', 'elementor' ) }>
-							<SizeSection />
-						</Section>
-						<Section title={ __( 'Position', 'elementor' ) }>
-							<PositionSection />
-						</Section>
-						<Section title={ __( 'Typography', 'elementor' ) }>
-							<TypographySection />
-						</Section>
-						<Section title={ __( 'Background', 'elementor' ) }>
-							<BackgroundSection />
-						</Section>
-						<Section title={ __( 'Border', 'elementor' ) }>
-							<BorderSection />
-						</Section>
-						<Section title={ __( 'Effects', 'elementor' ) }>
-							<EffectsSection />
-						</Section>
-					</SectionsList>
+					<StyleInheritanceProvider>
+						<CssClassSelector />
+						<Divider />
+						<SectionsList>
+							<Section title={ __( 'Layout', 'elementor' ) }>
+								<LayoutSection />
+							</Section>
+							<Section title={ __( 'Spacing', 'elementor' ) }>
+								<SpacingSection />
+							</Section>
+							<Section title={ __( 'Size', 'elementor' ) }>
+								<SizeSection />
+							</Section>
+							<Section title={ __( 'Position', 'elementor' ) }>
+								<PositionSection />
+							</Section>
+							<Section title={ __( 'Typography', 'elementor' ) }>
+								<TypographySection />
+							</Section>
+							<Section title={ __( 'Background', 'elementor' ) }>
+								<BackgroundSection />
+							</Section>
+							<Section title={ __( 'Border', 'elementor' ) }>
+								<BorderSection />
+							</Section>
+							<Section title={ __( 'Effects', 'elementor' ) }>
+								<EffectsSection />
+							</Section>
+						</SectionsList>
+					</StyleInheritanceProvider>
 				</SessionStorageProvider>
 			</StyleProvider>
 		</ClassesPropProvider>
@@ -89,7 +90,7 @@ function useFirstElementStyleDef( currentClassesProp: PropKey ) {
 	const { element } = useElement();
 
 	const classesIds = useElementSetting< ClassesPropValue >( element.id, currentClassesProp )?.value || [];
-	const stylesDefs = useElementStyles( element.id );
+	const stylesDefs = getElementStyles( element.id ) ?? {};
 
 	return Object.values( stylesDefs ).find( ( styleDef ) => classesIds.includes( styleDef.id ) );
 }

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

@@ -0,0 +1,65 @@
+import * as React from 'react';
+import { createContext, type PropsWithChildren, useContext } from 'react';
+import { useElementSetting } from '@elementor/editor-elements';
+import { classesPropTypeUtil, type ClassesPropValue } from '@elementor/editor-props';
+import { getBreakpointsTree } from '@elementor/editor-responsive';
+import { stylesRepository } from '@elementor/editor-styles-repository';
+
+import { createStylesInheritance } from '../styles-inheritance/create-styles-inheritance';
+import { type SnapshotPropValue, type StylesInheritanceSnapshotGetter } from '../styles-inheritance/types';
+import { useClassesProp } from './classes-prop-context';
+import { useElement } from './element-context';
+import { useStyle } from './style-context';
+
+type ContextValue = {
+	getSnapshot: StylesInheritanceSnapshotGetter;
+};
+
+const Context = createContext< ContextValue | null >( null );
+
+export function StyleInheritanceProvider( { children }: PropsWithChildren ) {
+	const styleDefs = useAppliedStyles();
+
+	const breakpointsTree = getBreakpointsTree();
+
+	const getSnapshot = createStylesInheritance( styleDefs, breakpointsTree );
+
+	return <Context.Provider value={ { getSnapshot } }>{ children }</Context.Provider>;
+}
+
+export function useStylesInheritanceFields< T extends readonly string[] >(
+	fields: T
+): { [ K in T[ number ] ]: SnapshotPropValue[] } | null {
+	const context = useContext( Context );
+	const { meta } = useStyle();
+
+	if ( ! context ) {
+		throw new Error( 'useStylesInheritanceFields must be used within a StyleInheritanceProvider' );
+	}
+
+	if ( ! meta ) {
+		return null;
+	}
+
+	const snapshot = context.getSnapshot( meta );
+
+	return fields.reduce(
+		( acc, key: T[ number ] ) => ( { ...acc, [ key ]: snapshot?.[ key ] ?? [] } ),
+		{} as { [ K in T[ number ] ]: SnapshotPropValue[] }
+	);
+}
+
+export function useStylesInheritanceField( field: string ): SnapshotPropValue[] {
+	return useStylesInheritanceFields( [ field ] )?.[ field ] ?? [];
+}
+
+const useAppliedStyles = () => {
+	const { element } = useElement();
+	const currentClassesProp = useClassesProp();
+	const classesProp = useElementSetting< ClassesPropValue >( element.id, currentClassesProp );
+
+	const appliedStyles = classesPropTypeUtil.extract( classesProp );
+	const allStyles = stylesRepository.all();
+
+	return allStyles.filter( ( style ) => appliedStyles?.includes( style.id ) );
+};

package/src/controls-registry/control.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import type { ComponentProps } from 'react';
 
+import { useElement } from '../contexts/element-context';
 import { ControlTypeNotFoundError } from '../errors';
 import { type ControlType, type ControlTypes, getControlByType } from './controls-registry';
 
@@ -24,6 +25,7 @@ type ControlProps< T extends ControlType > = AnyPropertyRequired< ComponentProps
 
 export const Control = < T extends ControlType >( { props, type }: ControlProps< T > ) => {
 	const ControlByType = getControlByType( type );
+	const { element } = useElement();
 
 	if ( ! ControlByType ) {
 		throw new ControlTypeNotFoundError( {
@@ -32,5 +34,5 @@ export const Control = < T extends ControlType >( { props, type }: ControlProps<
 	}
 
 	// @ts-expect-error ControlComponent props are inferred from the type (T).
-	return <ControlByType { ...props } />;
+	return <ControlByType { ...props } context={ { elementId: element.id } } />;
 };

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

@@ -34,6 +34,11 @@ type DynamicSelectionProps = {
 	onSelect?: () => void;
 };
 
+type NoResultsProps = {
+	searchValue: string;
+	onClear?: () => void;
+};
+
 export const DynamicSelection = ( { onSelect }: DynamicSelectionProps ) => {
 	const [ searchValue, setSearchValue ] = useState( '' );
 	const { groups: dynamicGroups } = getAtomicDynamicTags() || {};
@@ -47,6 +52,8 @@ export const DynamicSelection = ( { onSelect }: DynamicSelectionProps ) => {
 
 	const options = useFilteredOptions( searchValue );
 
+	const hasNoDynamicTags = ! options.length && ! searchValue.trim();
+
 	const handleSearch = ( event: React.ChangeEvent< HTMLInputElement > ) => {
 		setSearchValue( event.target.value );
 	};
@@ -63,85 +70,115 @@ export const DynamicSelection = ( { onSelect }: DynamicSelectionProps ) => {
 
 	return (
 		<Stack>
-			<Box px={ 1.5 } pb={ 1 }>
-				<TextField
-					fullWidth
-					size={ SIZE }
-					value={ searchValue }
-					onChange={ handleSearch }
-					placeholder={ __( 'Search dynamic tags…', 'elementor' ) }
-					InputProps={ {
-						startAdornment: (
-							<InputAdornment position="start">
-								<SearchIcon fontSize={ SIZE } />
-							</InputAdornment>
-						),
-					} }
-				/>
-			</Box>
-			<Divider />
-			<Box sx={ { overflowY: 'auto', height: 260, width: 220 } }>
-				{ options.length > 0 ? (
-					<MenuList role="listbox" tabIndex={ 0 }>
-						{ options.map( ( [ category, items ], index ) => (
-							<Fragment key={ index }>
-								<ListSubheader sx={ { px: 1.5, typography: 'caption', color: 'text.tertiary' } }>
-									{ dynamicGroups?.[ category ]?.title || category }
-								</ListSubheader>
-								{ items.map( ( { value, label: tagLabel } ) => {
-									const isSelected = isCurrentValueDynamic && value === dynamicValue?.name;
-
-									return (
-										<MenuItem
-											key={ value }
-											selected={ isSelected }
-											// eslint-disable-next-line jsx-a11y/no-autofocus
-											autoFocus={ isSelected }
-											sx={ { px: 1.5, typography: 'caption' } }
-											onClick={ () => handleSetDynamicTag( value ) }
+			{ hasNoDynamicTags ? (
+				<NoDynamicTags />
+			) : (
+				<Fragment>
+					<Box px={ 1.5 } pb={ 1 }>
+						<TextField
+							fullWidth
+							size={ SIZE }
+							value={ searchValue }
+							onChange={ handleSearch }
+							placeholder={ __( 'Search dynamic tags…', 'elementor' ) }
+							InputProps={ {
+								startAdornment: (
+									<InputAdornment position="start">
+										<SearchIcon fontSize={ SIZE } />
+									</InputAdornment>
+								),
+							} }
+						/>
+					</Box>
+					<Divider />
+					<Box sx={ { overflowY: 'auto', height: 260, width: 220 } }>
+						{ options.length > 0 ? (
+							<MenuList role="listbox" tabIndex={ 0 }>
+								{ options.map( ( [ category, items ], index ) => (
+									<Fragment key={ index }>
+										<ListSubheader
+											sx={ { px: 1.5, typography: 'caption', color: 'text.tertiary' } }
 										>
-											{ tagLabel }
-										</MenuItem>
-									);
-								} ) }
-							</Fragment>
-						) ) }
-					</MenuList>
-				) : (
-					<Stack
-						gap={ 1 }
-						alignItems="center"
-						justifyContent="center"
-						height="100%"
-						p={ 2.5 }
-						color="text.secondary"
-						sx={ { pb: 3.5 } }
-					>
-						<DatabaseIcon fontSize="large" />
-						<Typography align="center" variant="subtitle2">
-							{ __( 'Sorry, nothing matched', 'elementor' ) }
-							<br />
-							&ldquo;{ searchValue }&rdquo;.
-						</Typography>
-						<Typography align="center" variant="caption">
-							{ __( 'Try something else.', 'elementor' ) }
-							&nbsp;
-							<Link
-								color="text.secondary"
-								variant="caption"
-								component="button"
-								onClick={ () => setSearchValue( '' ) }
-							>
-								{ __( 'Clear & try again', 'elementor' ) }
-							</Link>
-						</Typography>
-					</Stack>
-				) }
-			</Box>
+											{ dynamicGroups?.[ category ]?.title || category }
+										</ListSubheader>
+										{ items.map( ( { value, label: tagLabel } ) => {
+											const isSelected = isCurrentValueDynamic && value === dynamicValue?.name;
+
+											return (
+												<MenuItem
+													key={ value }
+													selected={ isSelected }
+													// eslint-disable-next-line jsx-a11y/no-autofocus
+													autoFocus={ isSelected }
+													sx={ { px: 1.5, typography: 'caption' } }
+													onClick={ () => handleSetDynamicTag( value ) }
+												>
+													{ tagLabel }
+												</MenuItem>
+											);
+										} ) }
+									</Fragment>
+								) ) }
+							</MenuList>
+						) : (
+							<NoResults searchValue={ searchValue } onClear={ () => setSearchValue( '' ) } />
+						) }
+					</Box>
+				</Fragment>
+			) }
 		</Stack>
 	);
 };
 
+const NoResults = ( { searchValue, onClear }: NoResultsProps ) => (
+	<Stack
+		gap={ 1 }
+		alignItems="center"
+		justifyContent="center"
+		height="100%"
+		p={ 2.5 }
+		color="text.secondary"
+		sx={ { pb: 3.5 } }
+	>
+		<DatabaseIcon fontSize="large" />
+		<Typography align="center" variant="subtitle2">
+			{ __( 'Sorry, nothing matched', 'elementor' ) }
+			<br />
+			&ldquo;{ searchValue }&rdquo;.
+		</Typography>
+		<Typography align="center" variant="caption">
+			{ __( 'Try something else.', 'elementor' ) }
+			&nbsp;
+			<Link color="text.secondary" variant="caption" component="button" onClick={ onClear }>
+				{ __( 'Clear & try again', 'elementor' ) }
+			</Link>
+		</Typography>
+	</Stack>
+);
+
+const NoDynamicTags = () => (
+	<Box sx={ { overflowY: 'hidden', height: 297, width: 220 } }>
+		<Divider />
+		<Stack
+			gap={ 1 }
+			alignItems="center"
+			justifyContent="center"
+			height="100%"
+			p={ 2.5 }
+			color="text.secondary"
+			sx={ { pb: 3.5 } }
+		>
+			<DatabaseIcon fontSize="large" />
+			<Typography align="center" variant="subtitle2">
+				{ __( 'Streamline your workflow with dynamic tags', 'elementor' ) }
+			</Typography>
+			<Typography align="center" variant="caption">
+				{ __( 'You’ll need Elementor Pro to use this feature.', 'elementor' ) }
+			</Typography>
+		</Stack>
+	</Box>
+);
+
 const useFilteredOptions = ( searchValue: string ): OptionEntry[] => {
 	const dynamicTags = usePropDynamicTags();
 

package/src/init.ts

@@ -1,4 +1,5 @@
 import { injectIntoLogic } from '@elementor/editor';
+import { PrefetchUserData } from '@elementor/editor-current-user';
 import { __registerPanel as registerPanel } from '@elementor/editor-panels';
 import { blockCommand } from '@elementor/editor-v1-adapters';
 
@@ -16,6 +17,11 @@ export default function init() {
 		component: EditingPanelHooks,
 	} );
 
+	injectIntoLogic( {
+		id: 'current-user-data',
+		component: PrefetchUserData,
+	} );
+
 	// TODO: Move it from here once we have dynamic package.
 	initDynamics();
 }

package/src/sync/types.ts

@@ -1,7 +1,7 @@
 import { type ControlItem, type V1Element } from '@elementor/editor-elements';
 import { type PropsSchema } from '@elementor/editor-props';
 
-type SupportedFonts = 'system' | 'googlefonts' | 'customfonts';
+export type SupportedFonts = 'system' | 'googlefonts' | 'custom';
 
 type EnqueueFont = ( fontFamily: string, context?: 'preview' | 'editor' ) => void;
 

package/src/hooks/use-close-editor-panel.ts

@@ -1,23 +0,0 @@
-import { useEffect } from 'react';
-import { getSelectedElements, isElementInContainer, type V1Element } from '@elementor/editor-elements';
-import { __privateListenTo as listenTo, type CommandEvent, commandStartEvent } from '@elementor/editor-v1-adapters';
-
-import { usePanelActions } from '../panel';
-import { isAtomicWidgetSelected } from '../sync/is-atomic-widget-selected';
-
-export const useCloseEditorPanel = () => {
-	const { close } = usePanelActions();
-
-	return useEffect( () => {
-		return listenTo( commandStartEvent( 'document/elements/delete' ), ( e ) => {
-			const selectedElement = getSelectedElements()[ 0 ];
-			const { container: deletedContainer } = ( e as CommandEvent< { container: V1Element } > )?.args;
-			const isSelectedElementInDeletedContainer =
-				deletedContainer && selectedElement && isElementInContainer( selectedElement, deletedContainer );
-
-			if ( isSelectedElementInDeletedContainer && isAtomicWidgetSelected() ) {
-				close();
-			}
-		} );
-	}, [] ); // eslint-disable-line react-hooks/exhaustive-deps
-};