@elementor/editor-editing-panel 4.1.0-712 → 4.1.0-714

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elementor/editor-editing-panel",
-  "version": "4.1.0-712",
+  "version": "4.1.0-714",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -39,28 +39,28 @@
     "dev": "tsup --config=../../tsup.dev.ts"
   },
   "dependencies": {
-    "@elementor/editor": "4.1.0-712",
-    "@elementor/editor-canvas": "4.1.0-712",
-    "@elementor/editor-controls": "4.1.0-712",
-    "@elementor/editor-documents": "4.1.0-712",
-    "@elementor/editor-elements": "4.1.0-712",
-    "@elementor/editor-interactions": "4.1.0-712",
-    "@elementor/editor-panels": "4.1.0-712",
-    "@elementor/editor-props": "4.1.0-712",
-    "@elementor/editor-responsive": "4.1.0-712",
-    "@elementor/editor-styles": "4.1.0-712",
-    "@elementor/editor-styles-repository": "4.1.0-712",
-    "@elementor/editor-ui": "4.1.0-712",
-    "@elementor/editor-v1-adapters": "4.1.0-712",
+    "@elementor/editor": "4.1.0-714",
+    "@elementor/editor-canvas": "4.1.0-714",
+    "@elementor/editor-controls": "4.1.0-714",
+    "@elementor/editor-documents": "4.1.0-714",
+    "@elementor/editor-elements": "4.1.0-714",
+    "@elementor/editor-interactions": "4.1.0-714",
+    "@elementor/editor-panels": "4.1.0-714",
+    "@elementor/editor-props": "4.1.0-714",
+    "@elementor/editor-responsive": "4.1.0-714",
+    "@elementor/editor-styles": "4.1.0-714",
+    "@elementor/editor-styles-repository": "4.1.0-714",
+    "@elementor/editor-ui": "4.1.0-714",
+    "@elementor/editor-v1-adapters": "4.1.0-714",
     "@elementor/icons": "^1.68.0",
-    "@elementor/editor-variables": "4.1.0-712",
-    "@elementor/locations": "4.1.0-712",
-    "@elementor/menus": "4.1.0-712",
-    "@elementor/schema": "4.1.0-712",
-    "@elementor/session": "4.1.0-712",
+    "@elementor/editor-variables": "4.1.0-714",
+    "@elementor/locations": "4.1.0-714",
+    "@elementor/menus": "4.1.0-714",
+    "@elementor/schema": "4.1.0-714",
+    "@elementor/session": "4.1.0-714",
     "@elementor/ui": "1.36.17",
-    "@elementor/utils": "4.1.0-712",
-    "@elementor/wp-media": "4.1.0-712",
+    "@elementor/utils": "4.1.0-714",
+    "@elementor/wp-media": "4.1.0-714",
     "@wordpress/i18n": "^5.13.0"
   },
   "peerDependencies": {

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { ControlAdornmentsProvider, PropKeyProvider, PropProvider } from '@elementor/editor-controls';
-import { type PropKey, type PropValue } from '@elementor/editor-props';
+import { dimensionsPropTypeUtil, type PropKey, type PropValue, sizePropTypeUtil } from '@elementor/editor-props';
 import { getStylesSchema } from '@elementor/editor-styles';
 
 import { useStylesInheritanceChain } from '../contexts/styles-inheritance-context';
@@ -9,6 +9,83 @@ import { useStylesField } from '../hooks/use-styles-field';
 import { ConditionalField } from './conditional-field';
 import { createTopLevelObjectType } from './create-top-level-object-type';
 
+const DIMENSION_SIDES = [ 'block-start', 'block-end', 'inline-start', 'inline-end' ] as const;
+
+/**
+ * When a breakpoint inherits from a parent that only set *some* dimension sides, the remaining
+ * sides should still show the next ancestor's value as a placeholder — not go blank.
+ *
+ * Example: Desktop = 10px (uniform). Tablet = inline-start 5px only. Mobile = no local value.
+ * Without merging, mobile's Right / Bottom / Top placeholders would be empty because the closest
+ * inherited value (tablet's partial dims) has no value for those sides.
+ * With merging, we walk further up the chain and fill the gaps: inline-start gets 5px from tablet,
+ * the other three sides get 10px from desktop's uniform size.
+ *
+ * Non-dimensions values (color, font-size, …) are returned as-is — no merging needed there.
+ * @param chain
+ * @param startIndex
+ */
+function buildResolvedPlaceholder( chain: { value: PropValue }[], startIndex: number ): PropValue | undefined {
+	const firstEntry = chain[ startIndex ];
+	if ( ! firstEntry ) {
+		return undefined;
+	}
+
+	const firstValue = firstEntry.value;
+
+	if ( ! dimensionsPropTypeUtil.isValid( firstValue ) ) {
+		return firstValue;
+	}
+
+	const firstDims = dimensionsPropTypeUtil.extract( firstValue );
+
+	if ( DIMENSION_SIDES.every( ( side ) => firstDims?.[ side ] !== null && firstDims?.[ side ] !== undefined ) ) {
+		return firstValue;
+	}
+
+	const merged: Partial< Record< ( typeof DIMENSION_SIDES )[ number ], PropValue > > = {};
+	DIMENSION_SIDES.forEach( ( side ) => {
+		if ( firstDims?.[ side ] !== null && firstDims?.[ side ] !== undefined ) {
+			merged[ side ] = firstDims[ side ];
+		}
+	} );
+
+	for ( let i = startIndex + 1; i < chain.length; i++ ) {
+		const val = chain[ i ].value;
+
+		if ( sizePropTypeUtil.isValid( val ) ) {
+			DIMENSION_SIDES.forEach( ( side ) => {
+				if ( merged[ side ] === null || merged[ side ] === undefined ) {
+					merged[ side ] = val;
+				}
+			} );
+			break;
+		} else if ( dimensionsPropTypeUtil.isValid( val ) ) {
+			const dims = dimensionsPropTypeUtil.extract( val );
+			DIMENSION_SIDES.forEach( ( side ) => {
+				if (
+					( merged[ side ] === null || merged[ side ] === undefined ) &&
+					dims?.[ side ] !== null &&
+					dims?.[ side ] !== undefined
+				) {
+					merged[ side ] = dims[ side ];
+				}
+			} );
+		}
+
+		if ( DIMENSION_SIDES.every( ( side ) => merged[ side ] !== null && merged[ side ] !== undefined ) ) {
+			break;
+		}
+	}
+
+	return dimensionsPropTypeUtil.create( {
+		'block-start': merged[ 'block-start' ] ?? null,
+		'block-end': merged[ 'block-end' ] ?? null,
+		'inline-start': merged[ 'inline-start' ] ?? null,
+		'inline-end': merged[ 'inline-end' ] ?? null,
+	} );
+}
+
 export type StylesFieldProps = {
 	bind: PropKey;
 	placeholder?: PropValue;
@@ -25,10 +102,18 @@ export const StylesField = ( { bind, propDisplayName, children }: StylesFieldPro
 
 	const propType = createTopLevelObjectType( { schema: stylesSchema } );
 
-	const [ actualValue ] = stylesInheritanceChain;
+	// Placeholders represent the inherited value the user would see if they cleared their local
+	// override. The chain is ordered most-specific-first, so when the current breakpoint has its
+	// own value, chain[0] IS that value — showing it as a placeholder would be meaningless.
+	// We skip to chain[1] so controls display what's truly inherited from parent breakpoints.
+	//
+	// buildResolvedPlaceholder also handles the case where the inherited value itself is a partial
+	// dimensions (e.g. tablet only overrides inline-start): it merges subsequent chain entries to
+	// fill the missing sides, so "Right / Bottom" inputs don't lose their inherited placeholder.
+	const placeholderStartIndex = value ? 1 : 0;
 
 	const placeholderValues = {
-		[ bind ]: actualValue?.value,
+		[ bind ]: buildResolvedPlaceholder( stylesInheritanceChain, placeholderStartIndex ),
 	};
 
 	const setValue = ( newValue: Record< string, PropValue > ) => {