@elementor/editor-editing-panel 1.39.0 → 1.41.0

package/src/init.ts

@@ -1,11 +1,14 @@
 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';
+import { blockCommand, isExperimentActive } from '@elementor/editor-v1-adapters';
 
 import { EditingPanelHooks } from './components/editing-panel-hooks';
 import { init as initDynamics } from './dynamics/init';
 import { panel } from './panel';
+import { initResetStyleProps } from './reset-style-props';
+import { init as initStylesInheritance } from './styles-inheritance/init';
+import { EXPERIMENTAL_FEATURES } from './sync/experiments-flags';
 import { isAtomicWidgetSelected } from './sync/is-atomic-widget-selected';
 
 export function init() {
@@ -24,6 +27,13 @@ export function init() {
 
 	// TODO: Move it from here once we have dynamic package.
 	initDynamics();
+
+	// TODO: Move it from here once we have styles-inheritance package.
+	initStylesInheritance();
+
+	if ( isExperimentActive( EXPERIMENTAL_FEATURES.V_3_30 ) ) {
+		initResetStyleProps();
+	}
 }
 
 const blockV1Panel = () => {

package/src/reset-style-props.tsx

@@ -0,0 +1,31 @@
+import { useBoundProp } from '@elementor/editor-controls';
+import { BrushBigIcon } from '@elementor/icons';
+import { __ } from '@wordpress/i18n';
+
+import { useIsStyle } from './contexts/style-context';
+import { controlActionsMenu } from './controls-actions';
+
+const { registerAction } = controlActionsMenu;
+
+export function initResetStyleProps() {
+	registerAction( {
+		id: 'reset-style-value',
+		useProps: useResetStyleValueProps,
+	} );
+}
+
+// Temporary fix for the issue with ControlToggleButtonGroup.
+const EXCLUDED_BINDS = [ 'order', 'flex-grow', 'flex-shrink', 'flex-basis' ];
+
+export function useResetStyleValueProps() {
+	const isStyle = useIsStyle();
+	const { value, setValue, path, bind } = useBoundProp();
+
+	return {
+		visible:
+			isStyle && value !== null && value !== undefined && path.length <= 2 && ! EXCLUDED_BINDS.includes( bind ),
+		title: __( 'Clear', 'elementor' ),
+		icon: BrushBigIcon,
+		onClick: () => setValue( null ),
+	};
+}

package/src/styles-inheritance/components/action-icons.tsx

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import { Box } from '@elementor/ui';
+
+export const ActionIcons = () => (
+	<Box display="flex" gap={ 0.5 } alignItems="center">
+		{ /* Action Slot */ }
+	</Box>
+);

package/src/styles-inheritance/components/breakpoint-icon.tsx

@@ -0,0 +1,47 @@
+import * as React from 'react';
+import { type BreakpointId, useBreakpoints } from '@elementor/editor-responsive';
+import {
+	DesktopIcon,
+	LaptopIcon,
+	MobileLandscapeIcon,
+	MobilePortraitIcon,
+	TabletLandscapeIcon,
+	TabletPortraitIcon,
+	WidescreenIcon,
+} from '@elementor/icons';
+import { Tooltip } from '@elementor/ui';
+
+type Props = {
+	breakpoint?: BreakpointId | null;
+};
+
+const SIZE = 'tiny';
+const DEFAULT_BREAKPOINT = 'desktop';
+
+const breakpointIconMap: Record< string, React.ElementType > = {
+	widescreen: WidescreenIcon,
+	desktop: DesktopIcon,
+	laptop: LaptopIcon,
+	tablet_extra: TabletLandscapeIcon,
+	tablet: TabletPortraitIcon,
+	mobile_extra: MobileLandscapeIcon,
+	mobile: MobilePortraitIcon,
+};
+
+export const BreakpointIcon = ( { breakpoint }: Props ) => {
+	const breakpoints = useBreakpoints();
+	const currentBreakpoint = breakpoint || DEFAULT_BREAKPOINT;
+	const IconComponent = breakpointIconMap[ currentBreakpoint ];
+
+	if ( ! IconComponent ) {
+		return null;
+	}
+
+	const breakpointLabel = breakpoints.find( ( breakpointItem ) => breakpointItem.id === currentBreakpoint )?.label;
+
+	return (
+		<Tooltip title={ breakpointLabel } placement="top">
+			<IconComponent fontSize={ SIZE } sx={ { mt: '2px' } } />
+		</Tooltip>
+	);
+};

package/src/styles-inheritance/components/index.ts

@@ -0,0 +1,4 @@
+export { BreakpointIcon } from './breakpoint-icon';
+export { LabelChip } from './label-chip';
+export { ValueComponent } from './value-component';
+export { ActionIcons } from './action-icons';

package/src/styles-inheritance/components/label-chip.tsx

@@ -0,0 +1,43 @@
+import * as React from 'react';
+import { ELEMENTS_BASE_STYLES_PROVIDER_KEY } from '@elementor/editor-styles-repository';
+import { InfoCircleIcon } from '@elementor/icons';
+import { Chip, type Theme, Tooltip } from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+
+type Props = {
+	displayLabel: string;
+	provider?: string;
+};
+
+const SIZE = 'tiny';
+
+export const LabelChip = ( { displayLabel, provider }: Props ) => {
+	return (
+		<Chip
+			label={ displayLabel }
+			size={ SIZE }
+			color="global"
+			variant="standard"
+			state="enabled"
+			icon={
+				provider === ELEMENTS_BASE_STYLES_PROVIDER_KEY ? (
+					<Tooltip title={ __( 'Inherited from base styles', 'elementor' ) } placement="top">
+						<InfoCircleIcon fontSize={ SIZE } />
+					</Tooltip>
+				) : undefined
+			}
+			sx={ ( theme: Theme ) => ( {
+				lineHeight: 1,
+				flexWrap: 'nowrap',
+				alignItems: 'center',
+				borderRadius: `${ theme.shape.borderRadius * 0.75 }px`,
+				flexDirection: 'row-reverse',
+				'.MuiChip-label': {
+					overflow: 'hidden',
+					textOverflow: 'ellipsis',
+					whiteSpace: 'nowrap',
+				},
+			} ) }
+		/>
+	);
+};

package/src/styles-inheritance/components/value-component.tsx

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import { Typography } from '@elementor/ui';
+
+type Props = {
+	index: number;
+	value: React.ReactNode;
+};
+
+export const ValueComponent = ( { index, value }: Props ) => {
+	return (
+		<Typography
+			variant="caption"
+			color="text.tertiary"
+			sx={ {
+				mt: '1px',
+				textDecoration: index === 0 ? 'none' : 'line-through',
+				overflow: 'hidden',
+				textOverflow: 'ellipsis',
+				whiteSpace: 'nowrap',
+			} }
+		>
+			{ value }
+		</Typography>
+	);
+};

package/src/styles-inheritance/consts.ts

@@ -0,0 +1,17 @@
+import { isExperimentActive } from '@elementor/editor-v1-adapters';
+
+// the following prop types' style transformers would be ignored to provide alternative transformers for the styles inheritance popover
+export const excludePropTypeTransformers = new Set( [
+	'background-color-overlay',
+	'background-image-overlay',
+	'background-gradient-overlay',
+	'gradient-color-stop',
+	'color-stop',
+	'background-image-position-offset',
+	'background-image-size-scale',
+	'image-src',
+	'image',
+	'background-overlay',
+] );
+
+export const isUsingIndicatorPopover = () => isExperimentActive( 'e_indications_popover' );

package/src/styles-inheritance/create-styles-inheritance.ts

@@ -1,17 +1,21 @@
-import { isEmpty, isTransformable, type PropKey, type PropValue } from '@elementor/editor-props';
+import {
+	isEmpty,
+	isTransformable,
+	type PropKey,
+	type PropType,
+	type PropValue,
+	type UnionPropType,
+} from '@elementor/editor-props';
 import { type BreakpointNode } from '@elementor/editor-responsive';
 import { type StyleDefinition } from '@elementor/editor-styles';
 
 import { getProviderByStyleId } from '../contexts/style-context';
 import { createSnapshotsManager } from './create-snapshots-manager';
-import {
-	type BreakpointsStatesStyles,
-	type StyleInheritanceMetaProps,
-	type StylesInheritanceAPI,
-	type StylesInheritanceSnapshot,
-} from './types';
+import { type BreakpointsStatesStyles, type StyleInheritanceMetaProps, type StylesInheritanceAPI } from './types';
 import { getBreakpointKey, getStateKey } from './utils';
 
+type ValidPropType = Exclude< PropType, UnionPropType >;
+
 export function createStylesInheritance(
 	styleDefs: StyleDefinition[],
 	breakpointsRoot: BreakpointNode
@@ -23,16 +27,18 @@ export function createStylesInheritance(
 
 	return {
 		getSnapshot: createSnapshotsManager( getStyles, breakpointsRoot ),
-		getInheritanceChain: ( snapshot: StylesInheritanceSnapshot, path: string[] ) => {
+		getInheritanceChain: ( snapshot, path, topLevelPropType ) => {
 			const [ field, ...nextFields ] = path;
 
 			let inheritanceChain = snapshot[ field ] ?? [];
 
 			if ( nextFields.length > 0 ) {
+				const filterPropType = getFilterPropType( topLevelPropType, nextFields );
+
 				inheritanceChain = inheritanceChain
 					.map( ( { value: styleValue, ...rest } ) => ( {
 						...rest,
-						value: getValueByPath( styleValue, nextFields ),
+						value: getValueByPath( styleValue, nextFields, filterPropType ),
 					} ) )
 					.filter( ( { value: styleValue } ) => ! isEmpty( styleValue ) );
 			}
@@ -77,24 +83,56 @@ function buildStyleVariantsByMetaMapping( styleDefs: StyleDefinition[] ): Breakp
 	return breakpointStateSlots;
 }
 
-function getValueByPath( value: PropValue, path: PropKey[] ): PropValue {
+function getValueByPath( value: PropValue, path: PropKey[], filterPropType: ValidPropType | null ): PropValue {
 	if ( ! value || typeof value !== 'object' ) {
 		return null;
 	}
 
+	if ( shouldUseOriginalValue( filterPropType, value ) ) {
+		return value;
+	}
+
 	return path.reduce( ( currentScope: PropValue, key: PropKey ): PropValue | null => {
 		if ( ! currentScope ) {
 			return null;
 		}
 
 		if ( isTransformable( currentScope ) ) {
-			return currentScope.value?.[ key ];
+			return currentScope.value?.[ key ] ?? null;
 		}
 
 		if ( typeof currentScope === 'object' ) {
-			return currentScope[ key as keyof typeof currentScope ];
+			return currentScope[ key as keyof typeof currentScope ] ?? null;
 		}
 
 		return null;
 	}, value );
 }
+
+function shouldUseOriginalValue( filterPropType: ValidPropType | null, value: PropValue ): boolean {
+	return !! filterPropType && isTransformable( value ) && filterPropType.key !== value.$$type;
+}
+
+const getFilterPropType = ( propType: PropType, path: string[] ): ValidPropType | null => {
+	if ( ! propType || propType.kind !== 'union' ) {
+		return null;
+	}
+
+	return (
+		Object.values( propType.prop_types ).find( ( type: PropType ) => {
+			return !! path.reduce( ( currentScope: PropType | null, key: string ) => {
+				if ( currentScope?.kind !== 'object' ) {
+					return null;
+				}
+
+				const { shape } = currentScope;
+
+				if ( shape[ key ] ) {
+					return shape[ key ];
+				}
+
+				return null;
+			}, type );
+		} ) ?? null
+	);
+};

package/src/{hooks → styles-inheritance/hooks}/use-normalized-inheritance-chain-items.tsx

@@ -1,14 +1,17 @@
-import { type ReactNode, useEffect, useState } from 'react';
+import { isValidElement, type ReactNode, useEffect, useState } from 'react';
 import { type PropsResolver } from '@elementor/editor-canvas';
 import { type PropKey } from '@elementor/editor-props';
 import { type StyleDefinitionVariant } from '@elementor/editor-styles';
+import { ELEMENTS_BASE_STYLES_PROVIDER_KEY } from '@elementor/editor-styles-repository';
+import { __ } from '@wordpress/i18n';
 
-import { type SnapshotPropValue } from '../styles-inheritance/types';
+import { type SnapshotPropValue } from '../types';
 
 const MAXIMUM_ITEMS = 2;
 
 type NormalizedItem = {
 	id: string | number;
+	provider: string;
 	breakpoint?: StyleDefinitionVariant[ 'meta' ][ 'breakpoint' ];
 	displayLabel: string;
 	value: ReactNode | string;
@@ -25,11 +28,20 @@ export const useNormalizedInheritanceChainItems = (
 		( async () => {
 			const normalizedItems = await Promise.all(
 				inheritanceChain
-					.filter( ( item ) => item.style?.label )
+					.filter( ( { style } ) => style )
 					.map( ( item, index ) => normalizeInheritanceItem( item, index, bind, resolve ) )
 			);
 
-			const validItems = normalizedItems.filter( ( item ) => item.value !== '' ).slice( 0, MAXIMUM_ITEMS );
+			const validItems = normalizedItems
+				.map( ( item ) => ( {
+					...item,
+					displayLabel:
+						ELEMENTS_BASE_STYLES_PROVIDER_KEY !== item.provider
+							? item.displayLabel
+							: __( 'Base', 'elementor' ),
+				} ) )
+				.filter( ( item ) => ! item.value || item.displayLabel !== '' )
+				.slice( 0, MAXIMUM_ITEMS );
 
 			setItems( validItems );
 		} )();
@@ -38,19 +50,27 @@ export const useNormalizedInheritanceChainItems = (
 	return items;
 };
 
+const DEFAULT_BREAKPOINT = 'desktop';
+
 export const normalizeInheritanceItem = async (
 	item: SnapshotPropValue,
 	index: number,
 	bind: PropKey,
 	resolve: PropsResolver
 ): Promise< NormalizedItem > => {
-	const state = item.variant?.meta?.state || '';
-	const label = item.style?.label || '';
-	const displayLabel = state ? `${ label }:${ state }` : label;
+	const {
+		variant: {
+			meta: { state, breakpoint },
+		},
+		style: { label, id },
+	} = item;
+
+	const displayLabel = `${ label }${ state ? ':' + state : '' }`;
 
 	return {
-		id: item.style?.id ? item.style?.id + state : index,
-		breakpoint: item.variant?.meta?.breakpoint,
+		id: id ? id + ( state ?? '' ) : index,
+		provider: item.provider || '',
+		breakpoint: breakpoint ?? DEFAULT_BREAKPOINT,
 		displayLabel,
 		value: await getTransformedValue( item, bind, resolve ),
 	};
@@ -60,7 +80,7 @@ const getTransformedValue = async (
 	item: SnapshotPropValue,
 	bind: PropKey,
 	resolve: PropsResolver
-): Promise< string > => {
+): Promise< ReactNode | string > => {
 	try {
 		const result = await resolve( {
 			props: {
@@ -68,7 +88,17 @@ const getTransformedValue = async (
 			},
 		} );
 
-		return Object.values( result ).join( ' ' );
+		const value = result?.[ bind ] ?? result;
+
+		if ( isValidElement( value ) ) {
+			return value;
+		}
+
+		if ( typeof value === 'object' ) {
+			return JSON.stringify( value );
+		}
+
+		return String( value );
 	} catch {
 		return '';
 	}

package/src/styles-inheritance/init-styles-inheritance-transformers.ts

@@ -0,0 +1,38 @@
+import { createTransformer, styleTransformersRegistry } from '@elementor/editor-canvas';
+
+import { excludePropTypeTransformers } from './consts';
+import { stylesInheritanceTransformersRegistry } from './styles-inheritance-transformers-registry';
+import { backgroundColorOverlayTransformer } from './transformers/background-color-overlay-transformer';
+import { backgroundGradientOverlayTransformer } from './transformers/background-gradient-overlay-transformer';
+import { backgroundImageOverlayTransformer } from './transformers/background-image-overlay-transformer';
+import { backgroundOverlayTransformer } from './transformers/background-overlay-transformer';
+
+export function initStylesInheritanceTransformers() {
+	const originalStyleTransformers = styleTransformersRegistry.all();
+
+	Object.entries( originalStyleTransformers ).forEach( ( [ propType, transformer ] ) => {
+		if ( excludePropTypeTransformers.has( propType ) ) {
+			return;
+		}
+
+		stylesInheritanceTransformersRegistry.register( propType, transformer );
+	} );
+
+	stylesInheritanceTransformersRegistry.registerFallback(
+		createTransformer( ( value: unknown ) => {
+			return value;
+		} )
+	);
+
+	registerCustomTransformers();
+}
+
+function registerCustomTransformers() {
+	stylesInheritanceTransformersRegistry.register( 'background-color-overlay', backgroundColorOverlayTransformer );
+	stylesInheritanceTransformersRegistry.register(
+		'background-gradient-overlay',
+		backgroundGradientOverlayTransformer
+	);
+	stylesInheritanceTransformersRegistry.register( 'background-image-overlay', backgroundImageOverlayTransformer );
+	stylesInheritanceTransformersRegistry.register( 'background-overlay', backgroundOverlayTransformer );
+}

package/src/styles-inheritance/init.ts

@@ -0,0 +1,8 @@
+import { isUsingIndicatorPopover } from './consts';
+import { initStylesInheritanceTransformers } from './init-styles-inheritance-transformers';
+
+export const init = () => {
+	if ( isUsingIndicatorPopover() ) {
+		initStylesInheritanceTransformers();
+	}
+};

package/src/styles-inheritance/styles-inheritance-indicator.tsx

@@ -1,24 +1,23 @@
 import * as React from 'react';
-import { useState } from 'react';
 import { useBoundProp } from '@elementor/editor-controls';
 import { isEmpty } from '@elementor/editor-props';
 import { ELEMENTS_BASE_STYLES_PROVIDER_KEY, isElementsStylesProvider } from '@elementor/editor-styles-repository';
 import { isExperimentActive } from '@elementor/editor-v1-adapters';
-import { IconButton, Infotip } from '@elementor/ui';
+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';
 
 export const StylesInheritanceIndicator = () => {
-	const [ open, setOpen ] = useState( false );
-
-	const { value, path, propType } = useBoundProp();
+	const { path, propType } = useBoundProp();
 	const { id: currentStyleId, provider: currentStyleProvider, meta: currentStyleMeta } = useStyle();
 
-	const isUsingNestedProps = isExperimentActive( 'e_v_3_30' );
+	const isUsingNestedProps = isExperimentActive( EXPERIMENTAL_FEATURES.V_3_30 );
 
 	const finalPath = isUsingNestedProps ? path : path.slice( 0, 1 );
 
@@ -28,44 +27,48 @@ export const StylesInheritanceIndicator = () => {
 		return null;
 	}
 
-	const [ { style, variant, provider } ] = inheritanceChain;
+	const currentItem = inheritanceChain.find(
+		( {
+			style,
+			variant: {
+				meta: { breakpoint, state },
+			},
+		} ) =>
+			style.id === currentStyleId &&
+			breakpoint === currentStyleMeta.breakpoint &&
+			state === currentStyleMeta.state
+	);
 
-	if ( provider === ELEMENTS_BASE_STYLES_PROVIDER_KEY ) {
-		return null;
-	}
+	const hasValue = ! isEmpty( currentItem?.value );
 
-	const { breakpoint, state } = variant.meta;
+	const [ actualStyle ] = inheritanceChain;
 
-	const isFinalValue =
-		style.id === currentStyleId && breakpoint === currentStyleMeta.breakpoint && state === currentStyleMeta.state;
+	if ( actualStyle.provider === ELEMENTS_BASE_STYLES_PROVIDER_KEY ) {
+		return null;
+	}
 
-	const hasValue = ! isEmpty( value );
+	const isFinalValue = currentItem === actualStyle;
 
 	const label = getLabel( { isFinalValue, hasValue } );
 	const variantType = getVariant( { isFinalValue, hasValue, currentStyleProvider } );
 
-	const eIndicationsPopover = isExperimentActive( 'e_indications_popover' );
-
-	if ( ! eIndicationsPopover ) {
-		return <StyleIndicator variant={ variantType } aria-label={ label } />;
+	if ( ! isUsingIndicatorPopover() ) {
+		return (
+			<Tooltip title={ __( 'Style origin', 'elementor' ) } placement="top">
+				<StyleIndicator variant={ variantType } aria-label={ label } />
+			</Tooltip>
+		);
 	}
 
-	const toggleOpen = () => setOpen( ( prev ) => ! prev );
-
 	return (
-		<Infotip
-			placement="top"
-			content={
-				<StyleIndicatorInfotip inheritanceChain={ inheritanceChain } path={ finalPath } propType={ propType } />
-			}
-			open={ open }
-			onClose={ () => setOpen( false ) }
-			trigger="manual"
+		<StyleIndicatorInfotip
+			inheritanceChain={ inheritanceChain }
+			path={ finalPath }
+			propType={ propType }
+			label={ label }
 		>
-			<IconButton onClick={ toggleOpen } aria-label={ label }>
-				<StyleIndicator variant={ variantType } />
-			</IconButton>
-		</Infotip>
+			<StyleIndicator variant={ variantType } />
+		</StyleIndicatorInfotip>
 	);
 };