@elementor/editor-editing-panel 1.14.0 → 1.16.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elementor/editor-editing-panel",
-  "version": "1.14.0",
+  "version": "1.16.0",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -39,23 +39,23 @@
     "dev": "tsup --config=../../tsup.dev.ts"
   },
   "dependencies": {
-    "@elementor/editor": "0.18.0",
-    "@elementor/editor-controls": "0.13.0",
-    "@elementor/editor-elements": "0.5.4",
-    "@elementor/editor-panels": "0.12.0",
-    "@elementor/editor-props": "0.9.2",
-    "@elementor/editor-responsive": "0.13.0",
-    "@elementor/editor-styles": "0.5.7",
-    "@elementor/editor-styles-repository": "0.7.2",
+    "@elementor/editor": "0.18.1",
+    "@elementor/editor-controls": "0.14.0",
+    "@elementor/editor-elements": "0.6.0",
+    "@elementor/editor-panels": "0.12.1",
+    "@elementor/editor-props": "0.9.3",
+    "@elementor/editor-responsive": "0.13.1",
+    "@elementor/editor-styles": "0.6.0",
+    "@elementor/editor-styles-repository": "0.7.3",
     "@elementor/editor-ui": "0.4.0",
-    "@elementor/editor-v1-adapters": "0.10.0",
+    "@elementor/editor-v1-adapters": "0.10.1",
     "@elementor/icons": "1.31.0",
     "@elementor/locations": "0.7.6",
     "@elementor/menus": "0.1.3",
     "@elementor/schema": "0.1.2",
     "@elementor/session": "0.1.0",
     "@elementor/ui": "1.26.0",
-    "@elementor/utils": "0.3.1",
+    "@elementor/utils": "0.4.0",
     "@wordpress/i18n": "^5.13.0"
   },
   "peerDependencies": {

package/src/components/css-classes/css-class-menu.tsx

@@ -40,7 +40,7 @@ export function CssClassMenu( { styleId, provider, popupState, handleRename, anc
 			{ /* It has to be an array since MUI menu doesn't accept a Fragment as a child, and wrapping the items with an HTML element disrupts keyboard navigation */ }
 			{ getMenuItemsByProvider( { provider, styleId, handleRename, closeMenu: popupState.close } ) }
 			<ListSubheader sx={ { typography: 'caption', color: 'text.secondary', pb: 0.5, pt: 1 } }>
-				{ __( 'Pseudo selector', 'elementor' ) }
+				{ __( 'Pseudo classes', 'elementor' ) }
 			</ListSubheader>
 			{ STATES.map( ( state ) => {
 				return <StateMenuItem key={ state } state={ state } styleId={ styleId } />;

package/src/components/css-classes/css-class-selector.tsx

@@ -60,7 +60,7 @@ export function CssClassSelector() {
 		<Stack gap={ 1 } p={ 2 }>
 			<Stack direction="row" gap={ 1 } alignItems="center" justifyContent="space-between">
 				<Typography component="label" variant="caption" htmlFor={ ID }>
-					{ __( 'CSS Classes', 'elementor' ) }
+					{ __( 'CSS classes', 'elementor' ) }
 				</Typography>
 				<Stack direction="row" gap={ 1 }>
 					<ClassSelectorActionsSlot />

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

@@ -130,7 +130,7 @@ const FlexCustomField = () => (
 					<ControlLabel>{ __( 'Basis', 'elementor' ) }</ControlLabel>
 				</Grid>
 				<Grid item xs={ 6 } sx={ { display: 'flex', justifyContent: 'end' } }>
-					<SizeControl />
+					<SizeControl extendedValues={ [ 'auto' ] } />
 				</Grid>
 			</Grid>
 		</StylesField>

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

@@ -38,7 +38,7 @@ const DimensionField = ( { side, label }: { side: Side; label: string } ) => {
 			</Grid>
 			<Grid item xs={ 12 }>
 				<StylesField bind={ side }>
-					<SizeControl startIcon={ sideIcons[ side ] } />
+					<SizeControl startIcon={ sideIcons[ side ] } extendedValues={ [ 'auto' ] } />
 				</StylesField>
 			</Grid>
 		</Grid>

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

@@ -10,7 +10,7 @@ export const ZIndexField = () => {
 		<StylesField bind="z-index">
 			<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap">
 				<Grid item xs={ 6 }>
-					<ControlLabel>{ __( 'Z-Index', 'elementor' ) }</ControlLabel>
+					<ControlLabel>{ __( 'Z-index', 'elementor' ) }</ControlLabel>
 				</Grid>
 				<Grid item xs={ 6 }>
 					<NumberControl />

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { ControlLabel, SizeControl } from '@elementor/editor-controls';
+import { ControlLabel, type ExtendedValue, SizeControl } from '@elementor/editor-controls';
 import { Grid, Stack } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
@@ -13,26 +13,34 @@ export const SizeSection = () => {
 		<SectionContent>
 			<Grid container gap={ 2 } flexWrap="nowrap">
 				<Grid item xs={ 6 }>
-					<SizeField bind="width" label={ __( 'Width', 'elementor' ) } />
+					<SizeField bind="width" label={ __( 'Width', 'elementor' ) } extendedValues={ [ 'auto' ] } />
 				</Grid>
 				<Grid item xs={ 6 }>
-					<SizeField bind="height" label={ __( 'Height', 'elementor' ) } />
+					<SizeField bind="height" label={ __( 'Height', 'elementor' ) } extendedValues={ [ 'auto' ] } />
 				</Grid>
 			</Grid>
 			<Grid container gap={ 2 } flexWrap="nowrap">
 				<Grid item xs={ 6 }>
-					<SizeField bind="min-width" label={ __( 'Min. width', 'elementor' ) } />
+					<SizeField
+						bind="min-width"
+						label={ __( 'Min width', 'elementor' ) }
+						extendedValues={ [ 'auto' ] }
+					/>
 				</Grid>
 				<Grid item xs={ 6 }>
-					<SizeField bind="min-height" label={ __( 'Min. height', 'elementor' ) } />
+					<SizeField
+						bind="min-height"
+						label={ __( 'Min height', 'elementor' ) }
+						extendedValues={ [ 'auto' ] }
+					/>
 				</Grid>
 			</Grid>
 			<Grid container gap={ 2 } flexWrap="nowrap">
 				<Grid item xs={ 6 }>
-					<SizeField bind="max-width" label={ __( 'Max. width', 'elementor' ) } />
+					<SizeField bind="max-width" label={ __( 'Max width', 'elementor' ) } />
 				</Grid>
 				<Grid item xs={ 6 }>
-					<SizeField bind="max-height" label={ __( 'Max. height', 'elementor' ) } />
+					<SizeField bind="max-height" label={ __( 'Max height', 'elementor' ) } />
 				</Grid>
 			</Grid>
 			<PanelDivider />
@@ -46,9 +54,10 @@ export const SizeSection = () => {
 type ControlProps = {
 	bind: StylesFieldProps[ 'bind' ];
 	label: string;
+	extendedValues?: ExtendedValue[];
 };
 
-const SizeField = ( { label, bind }: ControlProps ) => {
+const SizeField = ( { label, bind, extendedValues }: ControlProps ) => {
 	return (
 		<StylesField bind={ bind }>
 			<Grid container gap={ 1 } alignItems="center">
@@ -56,7 +65,7 @@ const SizeField = ( { label, bind }: ControlProps ) => {
 					<ControlLabel>{ label }</ControlLabel>
 				</Grid>
 				<Grid item xs={ 12 }>
-					<SizeControl />
+					<SizeControl extendedValues={ extendedValues } />
 				</Grid>
 			</Grid>
 		</StylesField>

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

@@ -14,7 +14,7 @@ export const SpacingSection = () => {
 			</StylesField>
 			<PanelDivider />
 			<StylesField bind={ 'margin' }>
-				<LinkedDimensionsControl label={ __( 'Margin', 'elementor' ) } />
+				<LinkedDimensionsControl label={ __( 'Margin', 'elementor' ) } extendedValues={ [ 'auto' ] } />
 			</StylesField>
 		</SectionContent>
 	);

package/src/components/style-sections/typography-section/font-weight-field.tsx

@@ -7,13 +7,13 @@ import { StylesField } from '../../../controls-registry/styles-field';
 
 const fontWeightOptions = [
 	{ value: '100', label: __( '100 - Thin', 'elementor' ) },
-	{ value: '200', label: __( '200 - Extra Light', 'elementor' ) },
+	{ value: '200', label: __( '200 - Extra light', 'elementor' ) },
 	{ value: '300', label: __( '300 - Light', 'elementor' ) },
 	{ value: '400', label: __( '400 - Normal', 'elementor' ) },
 	{ value: '500', label: __( '500 - Medium', 'elementor' ) },
-	{ value: '600', label: __( '600 - Semi Bold', 'elementor' ) },
+	{ value: '600', label: __( '600 - Semi bold', 'elementor' ) },
 	{ value: '700', label: __( '700 - Bold', 'elementor' ) },
-	{ value: '800', label: __( '800 - Extra Bold', 'elementor' ) },
+	{ value: '800', label: __( '800 - Extra bold', 'elementor' ) },
 	{ value: '900', label: __( '900 - Black', 'elementor' ) },
 ];
 

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

@@ -8,6 +8,7 @@ import {
 	bindTrigger,
 	Box,
 	Divider,
+	Grid,
 	IconButton,
 	Paper,
 	Popover,
@@ -83,7 +84,7 @@ export const DynamicSelectionControl = () => {
 				<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>
+						<Typography variant="subtitle2">{ __( 'Dynamic tags', 'elementor' ) }</Typography>
 						<IconButton size={ SIZE } sx={ { ml: 'auto' } } onClick={ selectionPopoverState.close }>
 							<XIcon fontSize={ SIZE } />
 						</IconButton>
@@ -177,8 +178,16 @@ const Control = ( { control }: { control: Control[ 'value' ] } ) => {
 
 	return (
 		<DynamicControl bind={ control.bind }>
-			{ control.label ? <ControlLabel>{ control.label }</ControlLabel> : null }
-			<BaseControl type={ control.type as ControlType } props={ control.props } />
+			<Grid container gap={ 1 }>
+				{ control.label ? (
+					<Grid item xs={ 12 }>
+						<ControlLabel>{ control.label }</ControlLabel>
+					</Grid>
+				) : null }
+				<Grid item xs={ 12 }>
+					<BaseControl type={ control.type as ControlType } props={ control.props } />
+				</Grid>
+			</Grid>
 		</DynamicControl>
 	);
 };

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

@@ -70,7 +70,7 @@ export const DynamicSelection = ( { onSelect }: DynamicSelectionProps ) => {
 					size={ SIZE }
 					value={ searchValue }
 					onChange={ handleSearch }
-					placeholder={ __( 'Search dynamic tag', 'elementor' ) }
+					placeholder={ __( 'Search dynamic tags…', 'elementor' ) }
 					InputProps={ {
 						startAdornment: (
 							<InputAdornment position="start">

package/src/dynamics/hooks/use-prop-dynamic-action.tsx

@@ -15,7 +15,7 @@ export const usePropDynamicAction = (): PopoverActionProps => {
 	return {
 		visible,
 		icon: DatabaseIcon,
-		title: __( 'Dynamic Tags', 'elementor' ),
+		title: __( 'Dynamic tags', 'elementor' ),
 		popoverContent: ( { closePopover } ) => <DynamicSelection onSelect={ closePopover } />,
 	};
 };

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

@@ -0,0 +1,179 @@
+import { type BreakpointId, type BreakpointNode } from '@elementor/editor-responsive';
+import { type StyleDefinitionState } from '@elementor/editor-styles';
+
+import {
+	type BreakpointsInheritancePath,
+	type BreakpointsStatesSnapshotsMapping,
+	type BreakpointStatesSlotsMapping,
+	type SnapshotPropValue,
+	type StyleInheritanceMetaProps,
+	type StylesInheritanceSnapshot,
+	type StylesInheritanceSnapshotGetter,
+	type StylesInheritanceSnapshotsSlot,
+	type StyleVariantWithId,
+} from './types';
+import { DEFAULT_STATE, getBreakpointKey, getStateKey } from './utils';
+
+export function createSnapshotsManager(
+	getStylesByMeta: ( meta: StyleInheritanceMetaProps ) => StyleVariantWithId[],
+	breakpointsRoot: BreakpointNode
+): StylesInheritanceSnapshotGetter {
+	const breakpointsInheritancePaths = makeBreakpointsInheritancePaths( breakpointsRoot );
+	const allBreakpointStatesSnapshots: BreakpointsStatesSnapshotsMapping = {};
+
+	const buildMissingSnapshotsForBreakpoint = (
+		currentBreakpointId: BreakpointId | null,
+		parentBreakpoint: BreakpointStatesSlotsMapping | undefined,
+		state: StyleDefinitionState
+	) => {
+		const currentBreakpointKey = getBreakpointKey( currentBreakpointId );
+		const stateKey = getStateKey( state );
+
+		if ( ! allBreakpointStatesSnapshots[ currentBreakpointKey ] ) {
+			allBreakpointStatesSnapshots[ currentBreakpointKey ] = {
+				[ DEFAULT_STATE ]: buildStateSnapshotSlot(
+					getStylesByMeta( { breakpoint: currentBreakpointId, state: null } ),
+					parentBreakpoint,
+					{},
+					null
+				),
+			};
+		}
+
+		if ( state && ! allBreakpointStatesSnapshots[ currentBreakpointKey ][ stateKey ] ) {
+			allBreakpointStatesSnapshots[ currentBreakpointKey ][ stateKey ] = buildStateSnapshotSlot(
+				getStylesByMeta( { breakpoint: currentBreakpointId, state } ),
+				parentBreakpoint,
+				allBreakpointStatesSnapshots[ currentBreakpointKey ],
+				state
+			);
+		}
+	};
+
+	return ( meta: StyleInheritanceMetaProps ) => {
+		const { breakpoint, state } = meta;
+
+		const stateKey = getStateKey( state );
+		const breakpointKey = getBreakpointKey( breakpoint );
+
+		if ( allBreakpointStatesSnapshots[ breakpointKey ]?.[ stateKey ] ) {
+			// snapshot was already made for this breakpoint+state
+			return allBreakpointStatesSnapshots[ breakpointKey ][ stateKey ].snapshot;
+		}
+
+		const breakpointsChain = [ ...breakpointsInheritancePaths[ breakpointKey ], breakpoint ];
+
+		breakpointsChain.forEach( ( breakpointId, index ) => {
+			const parentBreakpointId = index > 0 ? breakpointsChain[ index - 1 ] : null;
+
+			buildMissingSnapshotsForBreakpoint(
+				breakpointId,
+				parentBreakpointId ? allBreakpointStatesSnapshots[ parentBreakpointId ] : undefined,
+				state
+			);
+		} );
+
+		return allBreakpointStatesSnapshots[ breakpointKey ]?.[ stateKey ]?.snapshot;
+	};
+}
+
+/**
+ * builds a mapping of each breakpoint to its inheritance chain, e.g. -
+ * 	desktop: [],
+ * 	tablet: [ 'desktop' ],
+ * 	mobile: [ 'desktop', 'tablet' ]
+ * @param root
+ */
+function makeBreakpointsInheritancePaths( root: BreakpointNode ): BreakpointsInheritancePath {
+	const breakpoints: Partial< BreakpointsInheritancePath > = {};
+
+	const traverse = ( node: BreakpointNode, parent?: BreakpointId[] ) => {
+		const { id, children } = node;
+
+		breakpoints[ id ] = parent ? [ ...parent ] : [];
+
+		children?.forEach( ( child ) => {
+			traverse( child, [ ...( breakpoints[ id ] ?? [] ), id ] );
+		} );
+	};
+
+	traverse( root );
+
+	return breakpoints as BreakpointsInheritancePath;
+}
+
+// creates a snapshot slot for a specific breakpoint and state
+function buildStateSnapshotSlot(
+	styles: StyleVariantWithId[],
+	parentBreakpoint: BreakpointStatesSlotsMapping | undefined,
+	currentBreakpoint: BreakpointStatesSlotsMapping,
+	state: StyleDefinitionState
+): StylesInheritanceSnapshotsSlot {
+	const initialSlot = buildInitialSnapshotFromStyles( styles );
+
+	if ( ! state ) {
+		return {
+			snapshot: mergeSnapshots( [ initialSlot.snapshot, parentBreakpoint?.[ DEFAULT_STATE ]?.snapshot ] ),
+			stateSpecificSnapshot: undefined,
+		};
+	}
+
+	return {
+		snapshot: mergeSnapshots( [
+			initialSlot.snapshot,
+			parentBreakpoint?.[ state ]?.stateSpecificSnapshot,
+			currentBreakpoint[ DEFAULT_STATE ]?.snapshot,
+		] ),
+		stateSpecificSnapshot: mergeSnapshots( [
+			initialSlot.stateSpecificSnapshot,
+			parentBreakpoint?.[ state ]?.stateSpecificSnapshot,
+		] ),
+	};
+}
+
+// creates an initial snapshot based on the passed style variants only
+function buildInitialSnapshotFromStyles( styles: StyleVariantWithId[] ): StylesInheritanceSnapshotsSlot {
+	const snapshot: StylesInheritanceSnapshot = {};
+
+	styles.forEach( ( styleVariantWithId ) => {
+		const {
+			styleVariant: { props },
+		} = styleVariantWithId;
+
+		Object.entries( props ).forEach( ( [ key, value ] ) => {
+			if ( ! snapshot[ key ] ) {
+				snapshot[ key ] = [];
+			}
+
+			const snapshotPropValue: SnapshotPropValue = {
+				...styleVariantWithId,
+				value,
+			};
+
+			snapshot[ key ].push( snapshotPropValue );
+		} );
+	} );
+
+	return {
+		snapshot,
+		stateSpecificSnapshot: snapshot,
+	};
+}
+
+// merge previous snapshot into the current one - first value of each prop is the strongest
+function mergeSnapshots( snapshots: ( StylesInheritanceSnapshot | undefined )[] ) {
+	const snapshot: StylesInheritanceSnapshot = {};
+
+	snapshots.filter( Boolean ).forEach( ( currentSnapshot ) =>
+		Object.entries( currentSnapshot as StylesInheritanceSnapshot ).forEach( ( [ key, values ] ) => {
+			if ( ! snapshot[ key ] ) {
+				snapshot[ key ] = [];
+			}
+
+			// concatenate the previous snapshot's prop values to the current ones
+			snapshot[ key ] = snapshot[ key ].concat( values );
+		} )
+	);
+
+	return snapshot;
+}

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

@@ -0,0 +1,50 @@
+import { type BreakpointNode } from '@elementor/editor-responsive';
+import { type StyleDefinition } from '@elementor/editor-styles';
+
+import { createSnapshotsManager } from './create-snapshots-manager';
+import { type BreakpointsStatesStyles, type StyleInheritanceMetaProps, type StylesInheritanceSnapshot } from './types';
+import { getBreakpointKey, getStateKey } from './utils';
+
+export function createStylesInheritance(
+	styleDefs: StyleDefinition[],
+	breakpointsRoot: BreakpointNode
+): ( meta: StyleInheritanceMetaProps ) => StylesInheritanceSnapshot | undefined {
+	const styleVariantsByMeta = buildStyleVariantsByMetaMapping( styleDefs );
+
+	const getStyles = ( { breakpoint, state }: StyleInheritanceMetaProps ) =>
+		styleVariantsByMeta?.[ getBreakpointKey( breakpoint ) ]?.[ getStateKey( state ) ] ?? [];
+
+	return createSnapshotsManager( getStyles, breakpointsRoot );
+}
+
+function buildStyleVariantsByMetaMapping( styleDefs: StyleDefinition[] ): BreakpointsStatesStyles {
+	const breakpointStateSlots: BreakpointsStatesStyles = {};
+
+	styleDefs.forEach( ( styleDef ) => {
+		// iterate over each style definition's variants and place them in the corresponding breakpoint's base or state styles
+		styleDef.variants.forEach( ( styleVariant ) => {
+			const { meta } = styleVariant;
+			const { state, breakpoint } = meta;
+
+			const breakpointKey = getBreakpointKey( breakpoint );
+			const stateKey = getStateKey( state );
+
+			if ( ! breakpointStateSlots[ breakpointKey ] ) {
+				breakpointStateSlots[ breakpointKey ] = {};
+			}
+
+			const breakpointNode = breakpointStateSlots[ breakpointKey ];
+
+			if ( ! breakpointNode[ stateKey ] ) {
+				breakpointNode[ stateKey ] = [];
+			}
+
+			breakpointNode[ stateKey ].push( {
+				styleId: styleDef.id,
+				styleVariant,
+			} );
+		} );
+	} );
+
+	return breakpointStateSlots;
+}

package/src/styles-inheritance/types.ts

@@ -0,0 +1,42 @@
+import { type PropValue } from '@elementor/editor-props';
+import { type BreakpointId } from '@elementor/editor-responsive';
+import { type StyleDefinitionState, type StyleDefinitionVariant } from '@elementor/editor-styles';
+
+export type StyleDefinitionStateWithNormal = NonNullable< StyleDefinitionState > | 'normal';
+
+type StatesMapping< T > = Partial< Record< StyleDefinitionStateWithNormal, T > >;
+
+export type StyleVariantWithId = {
+	styleId: string;
+	styleVariant: StyleDefinitionVariant;
+};
+
+export type SnapshotPropValue = StyleVariantWithId & {
+	value: PropValue;
+};
+
+export type StylesInheritanceSnapshot = Record< string, SnapshotPropValue[] >;
+
+export type StylesInheritanceSnapshotsSlot = {
+	snapshot?: StylesInheritanceSnapshot;
+	stateSpecificSnapshot?: StylesInheritanceSnapshot; // with only prop values of the current state, used for inheritance  - e.g. mobile-hover inherits first from tablet-hover specific snapshot
+};
+
+export type BreakpointStatesSlotsMapping = StatesMapping< StylesInheritanceSnapshotsSlot >;
+
+export type BreakpointsStatesSnapshotsMapping = Partial< Record< BreakpointId, BreakpointStatesSlotsMapping > >;
+
+type BreakpointStatesStyles = StatesMapping< StyleVariantWithId[] >;
+
+export type BreakpointsStatesStyles = Partial< Record< BreakpointId, Partial< BreakpointStatesStyles > > >;
+
+export type BreakpointsInheritancePath = Record< BreakpointId, BreakpointId[] >;
+
+export type StyleInheritanceMetaProps = {
+	breakpoint: BreakpointId | null;
+	state: StyleDefinitionState;
+};
+
+export type StylesInheritanceSnapshotGetter = (
+	meta: StyleInheritanceMetaProps
+) => StylesInheritanceSnapshot | undefined;

package/src/styles-inheritance/utils.ts

@@ -0,0 +1,10 @@
+import { type BreakpointId } from '@elementor/editor-responsive';
+import { type StyleDefinitionState } from '@elementor/editor-styles';
+
+export const DEFAULT_STATE = 'normal';
+
+const DEFAULT_BREAKPOINT = 'desktop';
+
+export const getStateKey = ( state: StyleDefinitionState ) => state ?? DEFAULT_STATE;
+
+export const getBreakpointKey = ( breakpoint: BreakpointId | null ): BreakpointId => breakpoint ?? DEFAULT_BREAKPOINT;