@elementor/editor-editing-panel 4.4.0-1087 → 4.4.0-1089

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elementor/editor-editing-panel",
-  "version": "4.4.0-1087",
+  "version": "4.4.0-1089",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -39,31 +39,31 @@
     "dev": "tsup --config=../../tsup.dev.ts"
   },
   "dependencies": {
-    "@elementor/editor": "4.4.0-1087",
-    "@elementor/editor-canvas": "4.4.0-1087",
-    "@elementor/editor-controls": "4.4.0-1087",
-    "@elementor/editor-documents": "4.4.0-1087",
-    "@elementor/editor-elements": "4.4.0-1087",
-    "@elementor/editor-interactions": "4.4.0-1087",
-    "@elementor/editor-notifications": "4.4.0-1087",
-    "@elementor/editor-panels": "4.4.0-1087",
-    "@elementor/editor-props": "4.4.0-1087",
-    "@elementor/editor-responsive": "4.4.0-1087",
-    "@elementor/editor-styles": "4.4.0-1087",
-    "@elementor/editor-styles-repository": "4.4.0-1087",
-    "@elementor/editor-ui": "4.4.0-1087",
-    "@elementor/editor-v1-adapters": "4.4.0-1087",
-    "@elementor/http-client": "4.4.0-1087",
+    "@elementor/editor": "4.4.0-1089",
+    "@elementor/editor-canvas": "4.4.0-1089",
+    "@elementor/editor-controls": "4.4.0-1089",
+    "@elementor/editor-documents": "4.4.0-1089",
+    "@elementor/editor-elements": "4.4.0-1089",
+    "@elementor/editor-interactions": "4.4.0-1089",
+    "@elementor/editor-notifications": "4.4.0-1089",
+    "@elementor/editor-panels": "4.4.0-1089",
+    "@elementor/editor-props": "4.4.0-1089",
+    "@elementor/editor-responsive": "4.4.0-1089",
+    "@elementor/editor-styles": "4.4.0-1089",
+    "@elementor/editor-styles-repository": "4.4.0-1089",
+    "@elementor/editor-ui": "4.4.0-1089",
+    "@elementor/editor-v1-adapters": "4.4.0-1089",
+    "@elementor/http-client": "4.4.0-1089",
     "@elementor/icons": "~1.75.1",
-    "@elementor/editor-variables": "4.4.0-1087",
-    "@elementor/locations": "4.4.0-1087",
-    "@elementor/menus": "4.4.0-1087",
-    "@elementor/query": "4.4.0-1087",
-    "@elementor/schema": "4.4.0-1087",
-    "@elementor/session": "4.4.0-1087",
+    "@elementor/editor-variables": "4.4.0-1089",
+    "@elementor/locations": "4.4.0-1089",
+    "@elementor/menus": "4.4.0-1089",
+    "@elementor/query": "4.4.0-1089",
+    "@elementor/schema": "4.4.0-1089",
+    "@elementor/session": "4.4.0-1089",
     "@elementor/ui": "1.37.5",
-    "@elementor/utils": "4.4.0-1087",
-    "@elementor/wp-media": "4.4.0-1087",
+    "@elementor/utils": "4.4.0-1089",
+    "@elementor/wp-media": "4.4.0-1089",
     "@wordpress/i18n": "^5.13.0"
   },
   "peerDependencies": {

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

@@ -1,13 +1,21 @@
 import * as React from 'react';
 import { useMemo } from 'react';
-import { PropKeyProvider, PropProvider, type SetValueMeta } from '@elementor/editor-controls';
+import { PropKeyProvider, PropProvider, type SetValueMeta, useBoundProp } from '@elementor/editor-controls';
 import { setDocumentModifiedStatus } from '@elementor/editor-documents';
 import { type ElementID, getElementLabel, getElementSettings, updateElementSettings } from '@elementor/editor-elements';
-import { type CreateOptions, type PropKey, type Props } from '@elementor/editor-props';
+import {
+	type CreateOptions,
+	type PropKey,
+	type Props,
+	responsiveFallbackChain,
+	responsivePropTypeUtil,
+} from '@elementor/editor-props';
+import { type BreakpointId, useActiveBreakpoint, useBreakpoints } from '@elementor/editor-responsive';
 import { undoable } from '@elementor/editor-v1-adapters';
 import { __ } from '@wordpress/i18n';
 
 import { useElement } from '../contexts/element-context';
+import { isResponsivePropType } from '../utils/is-responsive-prop-type';
 import {
 	extractDependencyEffect,
 	extractOrderedDependencies,
@@ -24,6 +32,7 @@ type SettingsFieldProps = {
 };
 
 const HISTORY_DEBOUNCE_WAIT = 800;
+const DESKTOP_BREAKPOINT: BreakpointId = 'desktop';
 
 export const SettingsField = ( { bind, children, propDisplayName }: SettingsFieldProps ) => {
 	const {
@@ -62,7 +71,36 @@ export const SettingsField = ( { bind, children, propDisplayName }: SettingsFiel
 
 	return (
 		<PropProvider propType={ propType } value={ value } setValue={ setValue } isDisabled={ isDisabled }>
-			<PropKeyProvider bind={ bind }>{ children }</PropKeyProvider>
+			<PropKeyProvider bind={ bind }>
+				{ isResponsivePropType( propsSchema[ bind ] ) ? (
+					<ResponsiveBinding>{ children }</ResponsiveBinding>
+				) : (
+					children
+				) }
+			</PropKeyProvider>
+		</PropProvider>
+	);
+};
+
+const ResponsiveBinding = ( { children }: { children: React.ReactNode } ) => {
+	const { value, setValue, propType, disabled } = useBoundProp( responsivePropTypeUtil );
+	const breakpoint = useActiveBreakpoint() ?? DESKTOP_BREAKPOINT;
+	const activeBreakpoints = ( useBreakpoints() ?? [] ).map( ( { id } ) => id );
+
+	const inherited = responsiveFallbackChain( breakpoint )
+		.filter( ( key ) => key !== breakpoint && activeBreakpoints.includes( key as BreakpointId ) )
+		.map( ( key ) => value?.[ key ] )
+		.find( ( entry ) => entry !== null && entry !== undefined );
+
+	return (
+		<PropProvider
+			propType={ propType }
+			value={ value }
+			setValue={ setValue }
+			placeholder={ { [ breakpoint ]: inherited } }
+			isDisabled={ () => disabled }
+		>
+			<PropKeyProvider bind={ breakpoint }>{ children }</PropKeyProvider>
 		</PropProvider>
 	);
 };

package/src/utils/is-responsive-prop-type.ts

@@ -0,0 +1,19 @@
+import { type PropType, type UnionPropType } from '@elementor/editor-props';
+
+export function isResponsivePropType( propType: PropType | undefined ): boolean {
+	if ( ! propType ) {
+		return false;
+	}
+
+	if ( 'key' in propType && propType.key === 'responsive' ) {
+		return true;
+	}
+
+	if ( propType.kind === 'union' ) {
+		return Object.values( ( propType as UnionPropType ).prop_types ).some( ( inner ) =>
+			isResponsivePropType( inner )
+		);
+	}
+
+	return false;
+}