@elementor/editor-editing-panel 1.37.0 → 1.38.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elementor/editor-editing-panel",
-  "version": "1.37.0",
+  "version": "1.38.1",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -40,15 +40,15 @@
   },
   "dependencies": {
     "@elementor/editor": "0.19.3",
-    "@elementor/editor-canvas": "0.21.3",
-    "@elementor/editor-controls": "0.30.1",
-    "@elementor/editor-current-user": "0.3.2",
-    "@elementor/editor-elements": "0.8.3",
+    "@elementor/editor-canvas": "0.22.0",
+    "@elementor/editor-controls": "0.31.0",
+    "@elementor/editor-current-user": "0.4.0",
+    "@elementor/editor-elements": "0.8.4",
     "@elementor/editor-panels": "0.15.3",
-    "@elementor/editor-props": "0.12.0",
+    "@elementor/editor-props": "0.12.1",
     "@elementor/editor-responsive": "0.13.5",
-    "@elementor/editor-styles": "0.6.7",
-    "@elementor/editor-styles-repository": "0.8.8",
+    "@elementor/editor-styles": "0.6.8",
+    "@elementor/editor-styles-repository": "0.9.0",
     "@elementor/editor-ui": "0.8.2",
     "@elementor/editor-v1-adapters": "0.12.0",
     "@elementor/icons": "1.40.1",

package/src/components/style-sections/layout-section/display-field.tsx

@@ -4,7 +4,7 @@ import { isExperimentActive } from '@elementor/editor-v1-adapters';
 import { Stack } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
-import { useStylesInheritanceField } from '../../../contexts/styles-inheritance-context';
+import { useStylesInheritanceChain } from '../../../contexts/styles-inheritance-context';
 import { StylesField } from '../../../controls-registry/styles-field';
 import { ControlLabel } from '../../control-label';
 
@@ -64,4 +64,4 @@ export const DisplayField = () => {
 };
 
 // TODO - placing this logic deliberately here, and will be removed once applied automatically to all style fields as part of ED-18491
-export const useDisplayPlaceholderValue = () => useStylesInheritanceField( 'display' )[ 0 ]?.value ?? undefined;
+export const useDisplayPlaceholderValue = () => useStylesInheritanceChain( [ 'display' ] )[ 0 ]?.value ?? undefined;

package/src/components/style-sections/typography-section/column-count-field.tsx

@@ -0,0 +1,22 @@
+import * as React from 'react';
+import { NumberControl } from '@elementor/editor-controls';
+import { Grid } from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+
+import { StylesField } from '../../../controls-registry/styles-field';
+import { ControlLabel } from '../../control-label';
+
+export const ColumnCountField = () => {
+	return (
+		<StylesField bind="column-count">
+			<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap">
+				<Grid item xs={ 6 }>
+					<ControlLabel>{ __( 'Columns', 'elementor' ) }</ControlLabel>
+				</Grid>
+				<Grid item xs={ 6 }>
+					<NumberControl shouldForceInt min={ 0 } step={ 1 } />
+				</Grid>
+			</Grid>
+		</StylesField>
+	);
+};

package/src/components/style-sections/typography-section/column-gap-field.tsx

@@ -0,0 +1,22 @@
+import * as React from 'react';
+import { SizeControl } from '@elementor/editor-controls';
+import { Grid } from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+
+import { StylesField } from '../../../controls-registry/styles-field';
+import { ControlLabel } from '../../control-label';
+
+export const ColumnGapField = () => {
+	return (
+		<StylesField bind="column-gap">
+			<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap">
+				<Grid item xs={ 6 }>
+					<ControlLabel>{ __( 'Column gap', 'elementor' ) }</ControlLabel>
+				</Grid>
+				<Grid item xs={ 6 }>
+					<SizeControl />
+				</Grid>
+			</Grid>
+		</StylesField>
+	);
+};

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

@@ -1,8 +1,13 @@
 import * as React from 'react';
+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 { ColumnCountField } from './column-count-field';
+import { ColumnGapField } from './column-gap-field';
 import { FontFamilyField } from './font-family-field';
 import { FontSizeField } from './font-size-field';
 import { FontStyleField } from './font-style-field';
@@ -18,6 +23,9 @@ import { TransformField } from './transform-field';
 import { WordSpacingField } from './word-spacing-field';
 
 export const TypographySection = () => {
+	const [ columnCount ] = useStylesField< NumberPropValue >( 'column-count' );
+	const isVersion330Active = isExperimentActive( 'e_v_3_30' );
+	const hasMultiColumns = columnCount?.value && columnCount?.value > 1;
 	return (
 		<SectionContent>
 			<FontFamilyField />
@@ -31,6 +39,12 @@ export const TypographySection = () => {
 					<LineHeightField />
 					<LetterSpacingField />
 					<WordSpacingField />
+					{ isVersion330Active && (
+						<>
+							<ColumnCountField />
+							{ hasMultiColumns && <ColumnGapField /> }
+						</>
+					) }
 					<PanelDivider />
 					<TextDecorationField />
 					<TransformField />

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

@@ -7,51 +7,56 @@ import { stylesRepository } from '@elementor/editor-styles-repository';
 
 import { useStylesRerender } from '../hooks/use-styles-rerender';
 import { createStylesInheritance } from '../styles-inheritance/create-styles-inheritance';
-import { type SnapshotPropValue, type StylesInheritanceSnapshotGetter } from '../styles-inheritance/types';
+import {
+	type SnapshotPropValue,
+	type StylesInheritanceAPI,
+	type StylesInheritanceSnapshot,
+} 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 );
+const Context = createContext< StylesInheritanceAPI | null >( null );
 
 export function StyleInheritanceProvider( { children }: PropsWithChildren ) {
 	const styleDefs = useAppliedStyles();
 
 	const breakpointsTree = getBreakpointsTree();
 
-	const getSnapshot = createStylesInheritance( styleDefs, breakpointsTree );
+	const { getSnapshot, getInheritanceChain } = createStylesInheritance( styleDefs, breakpointsTree );
 
-	return <Context.Provider value={ { getSnapshot } }>{ children }</Context.Provider>;
+	return <Context.Provider value={ { getSnapshot, getInheritanceChain } }>{ children }</Context.Provider>;
 }
 
-export function useStylesInheritanceFields< T extends readonly string[] >(
-	fields: T
-): { [ K in T[ number ] ]: SnapshotPropValue[] } | null {
+export function useStylesInheritanceSnapshot(): StylesInheritanceSnapshot | null {
 	const context = useContext( Context );
 	const { meta } = useStyle();
 
 	if ( ! context ) {
-		throw new Error( 'useStylesInheritanceFields must be used within a StyleInheritanceProvider' );
+		throw new Error( 'useStylesInheritanceSnapshot 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[] }
-	);
+	return context.getSnapshot( meta ) ?? null;
 }
 
-export function useStylesInheritanceField( field: string ): SnapshotPropValue[] {
-	return useStylesInheritanceFields( [ field ] )?.[ field ] ?? [];
+export function useStylesInheritanceChain( path: string[] ): SnapshotPropValue[] {
+	const context = useContext( Context );
+
+	if ( ! context ) {
+		throw new Error( 'useStylesInheritanceChain must be used within a StyleInheritanceProvider' );
+	}
+
+	const snapshot = useStylesInheritanceSnapshot();
+
+	if ( ! snapshot ) {
+		return [];
+	}
+
+	return context.getInheritanceChain( snapshot, path );
 }
 
 const useAppliedStyles = () => {

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

@@ -1,12 +1,19 @@
-import { useEffect, useState } from 'react';
+import { 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 { type NormalizedItem } from '../styles-inheritance/styles-inheritance-infotip';
 import { type SnapshotPropValue } from '../styles-inheritance/types';
 
 const MAXIMUM_ITEMS = 2;
 
+type NormalizedItem = {
+	id: string | number;
+	breakpoint?: StyleDefinitionVariant[ 'meta' ][ 'breakpoint' ];
+	displayLabel: string;
+	value: ReactNode | string;
+};
+
 export const useNormalizedInheritanceChainItems = (
 	inheritanceChain: SnapshotPropValue[],
 	bind: PropKey,
@@ -49,7 +56,7 @@ export const normalizeInheritanceItem = async (
 	};
 };
 
-export const getTransformedValue = async (
+const getTransformedValue = async (
 	item: SnapshotPropValue,
 	bind: PropKey,
 	resolve: PropsResolver

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

@@ -1,21 +1,45 @@
+import { isEmpty, isTransformable, type PropKey, type PropValue } 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 StylesInheritanceSnapshot } from './types';
+import {
+	type BreakpointsStatesStyles,
+	type StyleInheritanceMetaProps,
+	type StylesInheritanceAPI,
+	type StylesInheritanceSnapshot,
+} from './types';
 import { getBreakpointKey, getStateKey } from './utils';
 
 export function createStylesInheritance(
 	styleDefs: StyleDefinition[],
 	breakpointsRoot: BreakpointNode
-): ( meta: StyleInheritanceMetaProps ) => StylesInheritanceSnapshot | undefined {
+): StylesInheritanceAPI {
 	const styleVariantsByMeta = buildStyleVariantsByMetaMapping( styleDefs );
 
 	const getStyles = ( { breakpoint, state }: StyleInheritanceMetaProps ) =>
 		styleVariantsByMeta?.[ getBreakpointKey( breakpoint ) ]?.[ getStateKey( state ) ] ?? [];
 
-	return createSnapshotsManager( getStyles, breakpointsRoot );
+	return {
+		getSnapshot: createSnapshotsManager( getStyles, breakpointsRoot ),
+		getInheritanceChain: ( snapshot: StylesInheritanceSnapshot, path: string[] ) => {
+			const [ field, ...nextFields ] = path;
+
+			let inheritanceChain = snapshot[ field ] ?? [];
+
+			if ( nextFields.length > 0 ) {
+				inheritanceChain = inheritanceChain
+					.map( ( { value: styleValue, ...rest } ) => ( {
+						...rest,
+						value: getValueByPath( styleValue, nextFields ),
+					} ) )
+					.filter( ( { value: styleValue } ) => ! isEmpty( styleValue ) );
+			}
+
+			return inheritanceChain;
+		},
+	};
 }
 
 function buildStyleVariantsByMetaMapping( styleDefs: StyleDefinition[] ): BreakpointsStatesStyles {
@@ -52,3 +76,25 @@ function buildStyleVariantsByMetaMapping( styleDefs: StyleDefinition[] ): Breakp
 
 	return breakpointStateSlots;
 }
+
+function getValueByPath( value: PropValue, path: PropKey[] ): PropValue {
+	if ( ! value || typeof value !== 'object' ) {
+		return null;
+	}
+
+	return path.reduce( ( currentScope: PropValue, key: PropKey ): PropValue | null => {
+		if ( ! currentScope ) {
+			return null;
+		}
+
+		if ( isTransformable( currentScope ) ) {
+			return currentScope.value?.[ key ];
+		}
+
+		if ( typeof currentScope === 'object' ) {
+			return currentScope[ key as keyof typeof currentScope ];
+		}
+
+		return null;
+	}, value );
+}

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

@@ -1,6 +1,7 @@
 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';
@@ -8,18 +9,20 @@ import { __ } from '@wordpress/i18n';
 
 import { StyleIndicator } from '../components/style-indicator';
 import { useStyle } from '../contexts/style-context';
-import { useStylesInheritanceField } from '../contexts/styles-inheritance-context';
+import { useStylesInheritanceChain } from '../contexts/styles-inheritance-context';
 import { StyleIndicatorInfotip } from './styles-inheritance-infotip';
 
 export const StylesInheritanceIndicator = () => {
 	const [ open, setOpen ] = useState( false );
 
-	const { value, path } = useBoundProp();
+	const { value, path, propType } = useBoundProp();
 	const { id: currentStyleId, provider: currentStyleProvider, meta: currentStyleMeta } = useStyle();
 
-	// in the styles inheritance snapshot the keys are only those of the top level style schema attributes
-	const [ bind ] = path;
-	const inheritanceChain = useStylesInheritanceField( bind );
+	const isUsingNestedProps = isExperimentActive( 'e_v_3_30' );
+
+	const finalPath = isUsingNestedProps ? path : path.slice( 0, 1 );
+
+	const inheritanceChain = useStylesInheritanceChain( finalPath );
 
 	if ( ! inheritanceChain.length ) {
 		return null;
@@ -33,12 +36,12 @@ export const StylesInheritanceIndicator = () => {
 
 	const { breakpoint, state } = variant.meta;
 
-	const isFinalValue: boolean =
+	const isFinalValue =
 		style.id === currentStyleId && breakpoint === currentStyleMeta.breakpoint && state === currentStyleMeta.state;
 
-	const hasValue: boolean = value !== null && value !== undefined;
+	const hasValue = ! isEmpty( value );
 
-	const label: string = getLabel( { isFinalValue, hasValue } );
+	const label = getLabel( { isFinalValue, hasValue } );
 	const variantType = getVariant( { isFinalValue, hasValue, currentStyleProvider } );
 
 	const eIndicationsPopover = isExperimentActive( 'e_indications_popover' );
@@ -52,7 +55,9 @@ export const StylesInheritanceIndicator = () => {
 	return (
 		<Infotip
 			placement="top"
-			content={ <StyleIndicatorInfotip inheritanceChain={ inheritanceChain } bind={ bind } /> }
+			content={
+				<StyleIndicatorInfotip inheritanceChain={ inheritanceChain } path={ finalPath } propType={ propType } />
+			}
 			open={ open }
 			onClose={ () => setOpen( false ) }
 			trigger="manual"

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

@@ -1,8 +1,7 @@
 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 { type PropKey, type PropType } from '@elementor/editor-props';
 import { Card, CardContent, List, ListItem, ListItemText } from '@elementor/ui';
 
 import { useNormalizedInheritanceChainItems } from '../hooks/use-normalized-inheritance-chain-items';
@@ -10,27 +9,21 @@ import { type SnapshotPropValue } from './types';
 
 type StyleIndicatorInfotipProps = {
 	inheritanceChain: SnapshotPropValue[];
-	bind: PropKey;
+	propType: PropType;
+	path: PropKey[];
 };
 
-export type NormalizedItem = {
-	id: string | number;
-	breakpoint?: StyleDefinitionVariant[ 'meta' ][ 'breakpoint' ];
-	displayLabel: string;
-	value: string;
-};
+export const StyleIndicatorInfotip = ( { inheritanceChain, propType, path }: StyleIndicatorInfotipProps ) => {
+	const key = path.join( '.' );
 
-export const StyleIndicatorInfotip = ( { inheritanceChain, bind }: StyleIndicatorInfotipProps ) => {
 	const resolve = useMemo< PropsResolver >( () => {
-		const stylesSchema = getStylesSchema();
-
 		return createPropsResolver( {
 			transformers: styleTransformersRegistry,
-			schema: { [ bind ]: stylesSchema[ bind ] },
+			schema: { [ key ]: propType },
 		} );
-	}, [ bind ] );
+	}, [ key, propType ] );
 
-	const items = useNormalizedInheritanceChainItems( inheritanceChain, bind, resolve );
+	const items = useNormalizedInheritanceChainItems( inheritanceChain, key, resolve );
 
 	return (
 		<Card elevation={ 0 } sx={ { maxWidth: 320 } }>

package/src/styles-inheritance/types.ts

@@ -41,3 +41,8 @@ export type StyleInheritanceMetaProps = {
 export type StylesInheritanceSnapshotGetter = (
 	meta: StyleInheritanceMetaProps
 ) => StylesInheritanceSnapshot | undefined;
+
+export type StylesInheritanceAPI = {
+	getSnapshot: ( meta: StyleInheritanceMetaProps ) => StylesInheritanceSnapshot | undefined;
+	getInheritanceChain: ( snapshotField: StylesInheritanceSnapshot, path: string[] ) => SnapshotPropValue[];
+};