@elementor/editor-editing-panel 1.31.0 → 1.33.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elementor/editor-editing-panel",
-  "version": "1.31.0",
+  "version": "1.33.0",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -40,15 +40,15 @@
   },
   "dependencies": {
     "@elementor/editor": "0.19.1",
-    "@elementor/editor-canvas": "0.19.1",
-    "@elementor/editor-controls": "0.28.0",
-    "@elementor/editor-current-user": "0.3.0",
-    "@elementor/editor-elements": "0.8.1",
+    "@elementor/editor-canvas": "0.20.1",
+    "@elementor/editor-controls": "0.28.2",
+    "@elementor/editor-current-user": "0.3.2",
+    "@elementor/editor-elements": "0.8.2",
     "@elementor/editor-panels": "0.15.1",
     "@elementor/editor-props": "0.12.0",
     "@elementor/editor-responsive": "0.13.4",
     "@elementor/editor-styles": "0.6.6",
-    "@elementor/editor-styles-repository": "0.8.5",
+    "@elementor/editor-styles-repository": "0.8.6",
     "@elementor/editor-ui": "0.8.1",
     "@elementor/editor-v1-adapters": "0.11.0",
     "@elementor/icons": "1.40.1",

package/src/components/settings-tab.tsx

@@ -2,11 +2,12 @@ import * as React from 'react';
 import { ControlFormLabel } from '@elementor/editor-controls';
 import { type Control } from '@elementor/editor-elements';
 import { SessionStorageProvider } from '@elementor/session';
+import { Divider } from '@elementor/ui';
 
 import { useElement } from '../contexts/element-context';
 import { Control as BaseControl } from '../controls-registry/control';
 import { ControlTypeContainer } from '../controls-registry/control-type-container';
-import { type ControlType, getControlByType } from '../controls-registry/controls-registry';
+import { type ControlType, getControl, getDefaultLayout } from '../controls-registry/controls-registry';
 import { SettingsField } from '../controls-registry/settings-field';
 import { Section } from './section';
 import { SectionsList } from './sections-list';
@@ -45,13 +46,16 @@ export const SettingsTab = () => {
 };
 
 const Control = ( { control }: { control: Control[ 'value' ] } ) => {
-	if ( ! getControlByType( control.type as ControlType ) ) {
+	if ( ! getControl( control.type as ControlType ) ) {
 		return null;
 	}
 
+	const layout = control.meta?.layout || getDefaultLayout( control.type as ControlType );
+
 	return (
 		<SettingsField bind={ control.bind }>
-			<ControlTypeContainer controlType={ control.type as ControlType }>
+			{ control.meta?.topDivider && <Divider /> }
+			<ControlTypeContainer layout={ layout }>
 				{ control.label ? <ControlFormLabel>{ control.label }</ControlFormLabel> : null }
 				<BaseControl type={ control.type as ControlType } props={ control.props } />
 			</ControlTypeContainer>

package/src/controls-registry/control-type-container.tsx

@@ -1,14 +1,8 @@
 import * as React from 'react';
+import { type ControlLayout } from '@elementor/editor-elements';
 import { Box, type BoxProps, styled } from '@elementor/ui';
 
-import { type ControlLayout, type ControlType, getLayoutByType } from './controls-registry';
-
-export const ControlTypeContainer = ( {
-	controlType,
-	children,
-}: React.PropsWithChildren< { controlType: ControlType } > ) => {
-	const layout = getLayoutByType( controlType );
-
+export const ControlTypeContainer = ( { children, layout }: React.PropsWithChildren< { layout?: ControlLayout } > ) => {
 	return <StyledContainer layout={ layout }>{ children }</StyledContainer>;
 };
 

package/src/controls-registry/control.tsx

@@ -3,7 +3,7 @@ import type { ComponentProps } from 'react';
 
 import { useElement } from '../contexts/element-context';
 import { ControlTypeNotFoundError } from '../errors';
-import { type ControlType, type ControlTypes, getControlByType } from './controls-registry';
+import { type ControlType, type ControlTypes, getControl } from './controls-registry';
 
 type IsRequired< T, K extends keyof T > = object extends Pick< T, K > ? false : true;
 
@@ -24,7 +24,7 @@ type ControlProps< T extends ControlType > = AnyPropertyRequired< ComponentProps
 	  };
 
 export const Control = < T extends ControlType >( { props, type }: ControlProps< T > ) => {
-	const ControlByType = getControlByType( type );
+	const ControlByType = getControl( type );
 	const { element } = useElement();
 
 	if ( ! ControlByType ) {

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

@@ -9,8 +9,7 @@ import {
 	TextControl,
 	UrlControl,
 } from '@elementor/editor-controls';
-
-export type ControlLayout = 'full' | 'two-columns';
+import { type ControlLayout } from '@elementor/editor-elements';
 
 type ControlRegistry = Record< string, { component: ControlComponent; layout: ControlLayout } >;
 
@@ -31,6 +30,6 @@ export type ControlTypes = {
 	[ key in ControlType ]: ( typeof controlTypes )[ key ][ 'component' ];
 };
 
-export const getControlByType = ( type: ControlType ) => controlTypes[ type ]?.component;
+export const getControl = ( type: ControlType ) => controlTypes[ type ]?.component;
 
-export const getLayoutByType = ( type: ControlType ) => controlTypes[ type ].layout;
+export const getDefaultLayout = ( type: ControlType ) => controlTypes[ type ].layout;

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

@@ -24,7 +24,7 @@ import { __ } from '@wordpress/i18n';
 
 import { PopoverContent } from '../../components/popover-content';
 import { Control as BaseControl } from '../../controls-registry/control';
-import { type ControlType, getControlByType } from '../../controls-registry/controls-registry';
+import { type ControlType, getControl } from '../../controls-registry/controls-registry';
 import { usePersistDynamicValue } from '../../hooks/use-persist-dynamic-value';
 import { DynamicControl } from '../dynamic-control';
 import { useDynamicTag } from '../hooks/use-dynamic-tag';
@@ -167,7 +167,7 @@ const DynamicSettings = ( { controls }: { controls: DynamicTag[ 'atomic_controls
 };
 
 const Control = ( { control }: { control: Control[ 'value' ] } ) => {
-	if ( ! getControlByType( control.type as ControlType ) ) {
+	if ( ! getControl( control.type as ControlType ) ) {
 		return null;
 	}
 

package/src/hooks/use-normalized-inheritance-chain-items.tsx

@@ -0,0 +1,68 @@
+import { useEffect, useState } from 'react';
+import { type PropsResolver } from '@elementor/editor-canvas';
+import { type PropKey } from '@elementor/editor-props';
+
+import { type NormalizedItem } from '../styles-inheritance/styles-inheritance-infotip';
+import { type SnapshotPropValue } from '../styles-inheritance/types';
+
+const MAXIMUM_ITEMS = 2;
+
+export const useNormalizedInheritanceChainItems = (
+	inheritanceChain: SnapshotPropValue[],
+	bind: PropKey,
+	resolve: PropsResolver
+) => {
+	const [ items, setItems ] = useState< NormalizedItem[] >( [] );
+
+	useEffect( () => {
+		( async () => {
+			const normalizedItems = await Promise.all(
+				inheritanceChain
+					.filter( ( item ) => item.style?.label )
+					.map( ( item, index ) => normalizeInheritanceItem( item, index, bind, resolve ) )
+			);
+
+			const validItems = normalizedItems.filter( ( item ) => item.value !== '' ).slice( 0, MAXIMUM_ITEMS );
+
+			setItems( validItems );
+		} )();
+	}, [ inheritanceChain, bind, resolve ] );
+
+	return items;
+};
+
+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;
+
+	return {
+		id: item.style?.id ? item.style?.id + state : index,
+		breakpoint: item.variant?.meta?.breakpoint,
+		displayLabel,
+		value: await getTransformedValue( item, bind, resolve ),
+	};
+};
+
+export const getTransformedValue = async (
+	item: SnapshotPropValue,
+	bind: PropKey,
+	resolve: PropsResolver
+): Promise< string > => {
+	try {
+		const result = await resolve( {
+			props: {
+				[ bind ]: item.value,
+			},
+		} );
+
+		return Object.values( result ).join( ' ' );
+	} catch {
+		return '';
+	}
+};

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

@@ -1,13 +1,19 @@
 import * as React from 'react';
+import { useState } from 'react';
 import { useBoundProp } from '@elementor/editor-controls';
 import { ELEMENTS_BASE_STYLES_PROVIDER_KEY, isElementsStylesProvider } from '@elementor/editor-styles-repository';
+import { IconButton, Infotip } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
 import { StyleIndicator } from '../components/style-indicator';
 import { useStyle } from '../contexts/style-context';
 import { useStylesInheritanceField } from '../contexts/styles-inheritance-context';
+import { getExperimentsConfig } from '../sync/get-experiments-config';
+import { StyleIndicatorInfotip } from './styles-inheritance-infotip';
 
 export const StylesInheritanceIndicator = () => {
+	const [ open, setOpen ] = useState( false );
+
 	const { value, path } = useBoundProp();
 	const { id: currentStyleId, provider: currentStyleProvider, meta: currentStyleMeta } = useStyle();
 
@@ -27,27 +33,67 @@ export const StylesInheritanceIndicator = () => {
 
 	const { breakpoint, state } = variant.meta;
 
-	if (
-		style.id === currentStyleId &&
-		breakpoint === currentStyleMeta.breakpoint &&
-		state === currentStyleMeta.state
-	) {
-		return (
-			<StyleIndicator
-				aria-label={ __( 'This is the final value', 'elementor' ) }
-				variant={ isElementsStylesProvider( currentStyleProvider?.getKey() ) ? 'local' : 'global' }
-			/>
-		);
+	const isFinalValue: boolean =
+		style.id === currentStyleId && breakpoint === currentStyleMeta.breakpoint && state === currentStyleMeta.state;
+
+	const hasValue: boolean = value !== null && value !== undefined;
+
+	const label: string = getLabel( { isFinalValue, hasValue } );
+	const variantType = getVariant( { isFinalValue, hasValue, currentStyleProvider } );
+
+	const { e_indications_popover: eIndicationsPopover } = getExperimentsConfig();
+
+	if ( ! eIndicationsPopover ) {
+		return <StyleIndicator variant={ variantType } aria-label={ label } />;
+	}
+
+	const toggleOpen = () => setOpen( ( prev ) => ! prev );
+
+	return (
+		<Infotip
+			placement="top"
+			content={ <StyleIndicatorInfotip inheritanceChain={ inheritanceChain } bind={ bind } /> }
+			open={ open }
+			onClose={ () => setOpen( false ) }
+			trigger="manual"
+		>
+			<IconButton onClick={ toggleOpen } aria-label={ label }>
+				<StyleIndicator variant={ variantType } />
+			</IconButton>
+		</Infotip>
+	);
+};
+
+const getLabel = ( { isFinalValue, hasValue }: { isFinalValue: boolean; hasValue: boolean } ) => {
+	if ( isFinalValue ) {
+		return __( 'This is the final value', 'elementor' );
+	}
+
+	if ( hasValue ) {
+		return __( 'This value is overridden by another style', 'elementor' );
+	}
+
+	return __( 'This has value from another style', 'elementor' );
+};
+
+const getVariant = ( {
+	isFinalValue,
+	hasValue,
+	currentStyleProvider,
+}: {
+	isFinalValue: boolean;
+	hasValue: boolean;
+	currentStyleProvider: object | null;
+} ): 'local' | 'global' | 'overridden' | undefined => {
+	if ( isFinalValue ) {
+		return isElementsStylesProvider( ( currentStyleProvider as { getKey: () => string } )?.getKey?.() )
+			? 'local'
+			: 'global';
 	}
 
-	if ( value !== null && value !== undefined ) {
-		return (
-			<StyleIndicator
-				aria-label={ __( 'This value is overridden by another style', 'elementor' ) }
-				variant="overridden"
-			/>
-		);
+	if ( hasValue ) {
+		return 'overridden';
 	}
 
-	return <StyleIndicator aria-label={ __( 'This has value from another style', 'elementor' ) } />;
+	return undefined;
 };

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

@@ -0,0 +1,50 @@
+import * as React from 'react';
+import { useMemo } from 'react';
+import { createPropsResolver, type PropsResolver, styleTransformersRegistry } from '@elementor/editor-canvas';
+import { type PropKey } from '@elementor/editor-props';
+import { getStylesSchema, type StyleDefinitionVariant } from '@elementor/editor-styles';
+import { Card, CardContent, List, ListItem, ListItemText } from '@elementor/ui';
+
+import { useNormalizedInheritanceChainItems } from '../hooks/use-normalized-inheritance-chain-items';
+import { type SnapshotPropValue } from './types';
+
+type StyleIndicatorInfotipProps = {
+	inheritanceChain: SnapshotPropValue[];
+	bind: PropKey;
+};
+
+export type NormalizedItem = {
+	id: string | number;
+	breakpoint?: StyleDefinitionVariant[ 'meta' ][ 'breakpoint' ];
+	displayLabel: string;
+	value: string;
+};
+
+export const StyleIndicatorInfotip = ( { inheritanceChain, bind }: StyleIndicatorInfotipProps ) => {
+	const resolve = useMemo< PropsResolver >( () => {
+		const stylesSchema = getStylesSchema();
+
+		return createPropsResolver( {
+			transformers: styleTransformersRegistry,
+			schema: { [ bind ]: stylesSchema[ bind ] },
+		} );
+	}, [ bind ] );
+
+	const items = useNormalizedInheritanceChainItems( inheritanceChain, bind, resolve );
+
+	return (
+		<Card elevation={ 0 } sx={ { maxWidth: 320 } }>
+			<CardContent sx={ { p: 1.5, pb: 2.5 } }>
+				<List>
+					{ items.map( ( item ) => (
+						<ListItem key={ item.id }>
+							<ListItemText
+								primary={ `${ item.breakpoint } | ${ item.displayLabel }. ${ item.value }` }
+							/>
+						</ListItem>
+					) ) }
+				</List>
+			</CardContent>
+		</Card>
+	);
+};

package/src/sync/get-experiments-config.ts

@@ -0,0 +1,7 @@
+import { type ExtendedWindow } from './types';
+
+export const getExperimentsConfig = () => {
+	const extendedWindow = window as unknown as ExtendedWindow;
+
+	return extendedWindow.elementorCommon?.config?.experimentalFeatures ?? {};
+};

package/src/sync/types.ts

@@ -31,6 +31,13 @@ export type ExtendedWindow = Window & {
 			};
 		};
 	};
+	elementorCommon?: {
+		config?: {
+			experimentalFeatures?: {
+				e_indications_popover?: boolean;
+			};
+		};
+	};
 	elementorFrontend?: {
 		config?: {
 			is_rtl?: boolean;