@elementor/editor-components 4.4.0-1137 → 4.4.0-1138

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@elementor/editor-components",
   "description": "Elementor editor components",
-  "version": "4.4.0-1137",
+  "version": "4.4.0-1138",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -40,31 +40,31 @@
     "dev": "tsup --config=../../tsup.dev.ts"
   },
   "dependencies": {
-    "@elementor/editor": "4.4.0-1137",
-    "@elementor/editor-canvas": "4.4.0-1137",
-    "@elementor/editor-controls": "4.4.0-1137",
-    "@elementor/editor-documents": "4.4.0-1137",
-    "@elementor/editor-editing-panel": "4.4.0-1137",
-    "@elementor/editor-elements": "4.4.0-1137",
-    "@elementor/editor-elements-panel": "4.4.0-1137",
-    "@elementor/editor-mcp": "4.4.0-1137",
-    "@elementor/editor-templates": "4.4.0-1137",
-    "@elementor/editor-panels": "4.4.0-1137",
-    "@elementor/editor-props": "4.4.0-1137",
-    "@elementor/editor-ui": "4.4.0-1137",
-    "@elementor/editor-v1-adapters": "4.4.0-1137",
-    "@elementor/http-client": "4.4.0-1137",
+    "@elementor/editor": "4.4.0-1138",
+    "@elementor/editor-canvas": "4.4.0-1138",
+    "@elementor/editor-controls": "4.4.0-1138",
+    "@elementor/editor-documents": "4.4.0-1138",
+    "@elementor/editor-editing-panel": "4.4.0-1138",
+    "@elementor/editor-elements": "4.4.0-1138",
+    "@elementor/editor-elements-panel": "4.4.0-1138",
+    "@elementor/editor-mcp": "4.4.0-1138",
+    "@elementor/editor-templates": "4.4.0-1138",
+    "@elementor/editor-panels": "4.4.0-1138",
+    "@elementor/editor-props": "4.4.0-1138",
+    "@elementor/editor-ui": "4.4.0-1138",
+    "@elementor/editor-v1-adapters": "4.4.0-1138",
+    "@elementor/http-client": "4.4.0-1138",
     "@elementor/icons": "~1.78.1",
-    "@elementor/events": "4.4.0-1137",
-    "@elementor/query": "4.4.0-1137",
-    "@elementor/schema": "4.4.0-1137",
-    "@elementor/store": "4.4.0-1137",
+    "@elementor/events": "4.4.0-1138",
+    "@elementor/query": "4.4.0-1138",
+    "@elementor/schema": "4.4.0-1138",
+    "@elementor/store": "4.4.0-1138",
     "@elementor/ui": "1.41.3",
-    "@elementor/utils": "4.4.0-1137",
+    "@elementor/utils": "4.4.0-1138",
     "@wordpress/i18n": "^5.13.0",
-    "@elementor/editor-notifications": "4.4.0-1137",
-    "@elementor/editor-current-user": "4.4.0-1137",
-    "@elementor/editor-embedded-documents-manager": "4.4.0-1137"
+    "@elementor/editor-notifications": "4.4.0-1138",
+    "@elementor/editor-current-user": "4.4.0-1138",
+    "@elementor/editor-embedded-documents-manager": "4.4.0-1138"
   },
   "peerDependencies": {
     "react": "^18.3.1",

package/src/components/instance-editing-panel/override-prop-control.tsx

@@ -19,7 +19,13 @@ import {
 	useElement,
 } from '@elementor/editor-editing-panel';
 import { type Control } from '@elementor/editor-elements';
-import { type AnyTransformable, type CreateOptions, type PropType, type PropValue } from '@elementor/editor-props';
+import {
+	type AnyTransformable,
+	type CreateOptions,
+	isEmpty,
+	type PropType,
+	type PropValue,
+} from '@elementor/editor-props';
 import { Box } from '@elementor/ui';
 
 import { useControlsByWidgetType } from '../../hooks/use-controls-by-widget-type';
@@ -136,6 +142,14 @@ function OverrideControl( { overridableProp }: InternalProps ) {
 		overridableProp.label
 	);
 
+	// When there's a real inherited (base) value, let the control's bound placeholder show it,
+	// instead of the control definition's own placeholder (instance panel only).
+	// `controlProps` is the control definition's own props object (shared with the normal editing
+	// panel via the widgets cache), so it must never be mutated here — build a derived object instead.
+	const effectiveControlProps = hasInheritedValue( resolvedBaseValue )
+		? omitPlaceholder( controlProps )
+		: controlProps;
+
 	const propTypeSchema = createTopLevelObjectType( {
 		schema: { [ overridableProp.overrideKey ]: propType },
 	} );
@@ -213,7 +227,7 @@ function OverrideControl( { overridableProp }: InternalProps ) {
 							<Box mb={ 1.5 }>
 								<ControlTypeContainer layout={ layout }>
 									{ layout !== 'custom' && <ControlLabel>{ overridableProp.label }</ControlLabel> }
-									<OriginalControl control={ control } controlProps={ controlProps } />
+									<OriginalControl control={ control } controlProps={ effectiveControlProps } />
 								</ControlTypeContainer>
 							</Box>
 						</ControlReplacementsProvider>
@@ -241,6 +255,18 @@ function resolveOverrideValues(
 	return { propValue, baseValue };
 }
 
+// An empty inherited value (e.g. an empty string, or an object whose fields are all empty) isn't
+// worth showing as a placeholder, so the control's own placeholder is kept instead.
+function hasInheritedValue( baseValue: AnyTransformable | null ): boolean {
+	return !! baseValue && ! isEmpty( baseValue );
+}
+
+function omitPlaceholder( controlProps: Record< string, unknown > ): Record< string, unknown > {
+	const { placeholder: _placeholder, ...rest } = controlProps;
+
+	return rest;
+}
+
 // Temp solution: when removing an override on a dynamic value, fall back to propType.default
 // instead of null, since we don't have placeholder support for dynamics yet.
 function getTempNewValueForDynamicProp( propType: PropType, propValue: PropValue, newPropValue: PropValue ) {

package/src/components/instance-editing-panel/override-props-group-constants.ts

@@ -0,0 +1 @@
+export const OVERRIDE_PROPS_GROUP_CONTENT_CLASS = 'e-override-props-group__content';

package/src/components/instance-editing-panel/override-props-group.tsx

@@ -6,6 +6,7 @@ import { Box, Collapse, ListItemButton, ListItemText, Stack } from '@elementor/u
 
 import { type OverridablePropsGroup } from '../../types';
 import { OverridePropControl } from './override-prop-control';
+import { OVERRIDE_PROPS_GROUP_CONTENT_CLASS } from './override-props-group-constants';
 
 type Props = {
 	group: OverridablePropsGroup;
@@ -25,7 +26,10 @@ export function OverridePropsGroup( { group }: Props ) {
 	const title = group.label;
 
 	return (
-		<Box aria-label={ `${ title } section` }>
+		<Box
+			aria-label={ `${ title } section` }
+			sx={ { [ `&:has(.${ OVERRIDE_PROPS_GROUP_CONTENT_CLASS }:empty)` ]: { display: 'none' } } }
+		>
 			<ListItemButton
 				id={ labelId }
 				aria-controls={ contentId }
@@ -44,7 +48,7 @@ export function OverridePropsGroup( { group }: Props ) {
 				<CollapseIcon open={ isOpen } color="secondary" fontSize="tiny" />
 			</ListItemButton>
 			<Collapse id={ contentId } aria-labelledby={ labelId } in={ isOpen } timeout="auto">
-				<Stack direction="column" gap={ 1 } p={ 2 }>
+				<Stack className={ OVERRIDE_PROPS_GROUP_CONTENT_CLASS } direction="column" gap={ 1 } p={ 2 }>
 					{ group.props.map( ( overrideKey ) => (
 						<OverridePropControl key={ overrideKey } overrideKey={ overrideKey } />
 					) ) }