@elementor/editor-controls 4.1.0-776 → 4.1.0-778

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@elementor/editor-controls",
   "description": "This package contains the controls model and utils for the Elementor editor",
-  "version": "4.1.0-776",
+  "version": "4.1.0-778",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -40,22 +40,22 @@
     "dev": "tsup --config=../../tsup.dev.ts"
   },
   "dependencies": {
-    "@elementor/editor-current-user": "4.1.0-776",
-    "@elementor/editor-elements": "4.1.0-776",
-    "@elementor/editor-props": "4.1.0-776",
-    "@elementor/editor-responsive": "4.1.0-776",
-    "@elementor/editor-ui": "4.1.0-776",
-    "@elementor/editor-v1-adapters": "4.1.0-776",
-    "@elementor/env": "4.1.0-776",
-    "@elementor/events": "4.1.0-776",
-    "@elementor/http-client": "4.1.0-776",
+    "@elementor/editor-current-user": "4.1.0-778",
+    "@elementor/editor-elements": "4.1.0-778",
+    "@elementor/editor-props": "4.1.0-778",
+    "@elementor/editor-responsive": "4.1.0-778",
+    "@elementor/editor-ui": "4.1.0-778",
+    "@elementor/editor-v1-adapters": "4.1.0-778",
+    "@elementor/env": "4.1.0-778",
+    "@elementor/events": "4.1.0-778",
+    "@elementor/http-client": "4.1.0-778",
     "@elementor/icons": "^1.68.0",
-    "@elementor/locations": "4.1.0-776",
-    "@elementor/query": "4.1.0-776",
-    "@elementor/session": "4.1.0-776",
+    "@elementor/locations": "4.1.0-778",
+    "@elementor/query": "4.1.0-778",
+    "@elementor/session": "4.1.0-778",
     "@elementor/ui": "1.37.5",
-    "@elementor/utils": "4.1.0-776",
-    "@elementor/wp-media": "4.1.0-776",
+    "@elementor/utils": "4.1.0-778",
+    "@elementor/wp-media": "4.1.0-778",
     "@monaco-editor/react": "^4.7.0",
     "@tiptap/extension-bold": "^3.11.1",
     "@tiptap/extension-document": "^3.11.1",

package/src/controls/gap-control.tsx

@@ -1,6 +1,13 @@
 import * as React from 'react';
 import { type RefObject, useLayoutEffect, useRef, useState } from 'react';
-import { layoutDirectionPropTypeUtil, type PropKey, sizePropTypeUtil } from '@elementor/editor-props';
+import {
+	layoutDirectionPropTypeUtil,
+	type LayoutDirectionPropValue,
+	type PropKey,
+	type PropValue,
+	sizePropTypeUtil,
+	type SizePropValue,
+} from '@elementor/editor-props';
 import { useActiveBreakpoint } from '@elementor/editor-responsive';
 import { DetachIcon, LinkIcon } from '@elementor/icons';
 import { Grid, Stack, Tooltip } from '@elementor/ui';
@@ -10,7 +17,7 @@ import { PropKeyProvider, PropProvider, useBoundProp } from '../bound-prop-conte
 import { ControlFormLabel } from '../components/control-form-label';
 import { ControlLabel } from '../components/control-label';
 import { StyledToggleButton } from '../components/control-toggle-button-group';
-import { SizeControl } from './size-control';
+import { UnstableSizeControl } from './size-control/unstable-size-control';
 
 export const GapControl = ( { label }: { label: string } ) => {
 	const stackRef = useRef< HTMLDivElement >( null );
@@ -41,11 +48,13 @@ export const GapControl = ( { label }: { label: string } ) => {
 
 	const [ isLinked, setIsLinked ] = useState( () => inferIsLinked() );
 
+	const isCurrentlyDirection = layoutDirectionPropTypeUtil.isValid( masterValue ?? masterPlaceholder );
+
 	const activeBreakpoint = useActiveBreakpoint();
 	useLayoutEffect( () => {
 		setIsLinked( inferIsLinked() );
 		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [ activeBreakpoint ] );
+	}, [ activeBreakpoint, isCurrentlyDirection ] );
 
 	const onLinkToggle = () => {
 		setIsLinked( ( prev ) => ! prev );
@@ -86,12 +95,27 @@ export const GapControl = ( { label }: { label: string } ) => {
 	const propProviderProps = {
 		propType,
 		value: directionValue,
-		setValue: setDirectionValue,
+		setValue: ( directions: PropValue ) => {
+			const entries = Object.entries( directions as LayoutDirectionPropValue );
+			const filtered = entries.filter( ( [ , value ] ) => Boolean( value ) );
+
+			setDirectionValue( filtered.length === 0 ? null : Object.fromEntries( filtered ) );
+		},
 		placeholder: directionPlaceholder,
 	};
 
 	const hasPlaceholders = ! masterValue && ( directionPlaceholder || masterPlaceholder );
 
+	const getEffectivePlaceholder = ( bind: string ) => {
+		if ( isLinked ) {
+			const linkedPlaceholder = directionPlaceholder?.column ?? directionPlaceholder?.row;
+
+			return sizePropTypeUtil.extract( linkedPlaceholder );
+		}
+
+		return sizePropTypeUtil.extract( directionPlaceholder?.[ bind as keyof LayoutDirectionPropValue[ 'value' ] ] );
+	};
+
 	return (
 		<PropProvider { ...propProviderProps }>
 			<Stack direction="row" gap={ 2 } flexWrap="nowrap">
@@ -122,6 +146,7 @@ export const GapControl = ( { label }: { label: string } ) => {
 							ariaLabel={ __( 'Column gap', 'elementor' ) }
 							isLinked={ isLinked }
 							anchorRef={ stackRef }
+							placeholder={ getEffectivePlaceholder( 'column' ) ?? undefined }
 						/>
 					</Grid>
 				</Grid>
@@ -135,6 +160,7 @@ export const GapControl = ( { label }: { label: string } ) => {
 							ariaLabel={ __( 'Row gap', 'elementor' ) }
 							isLinked={ isLinked }
 							anchorRef={ stackRef }
+							placeholder={ getEffectivePlaceholder( 'row' ) ?? undefined }
 						/>
 					</Grid>
 				</Grid>
@@ -148,19 +174,21 @@ const Control = ( {
 	ariaLabel,
 	isLinked,
 	anchorRef,
+	placeholder,
 }: {
 	bind: PropKey;
 	ariaLabel?: string;
 	isLinked: boolean;
+	placeholder?: SizePropValue[ 'value' ];
 	anchorRef: RefObject< HTMLDivElement >;
 } ) => {
 	if ( isLinked ) {
-		return <SizeControl anchorRef={ anchorRef } ariaLabel={ ariaLabel } />;
+		return <UnstableSizeControl anchorRef={ anchorRef } placeholder={ placeholder } ariaLabel={ ariaLabel } />;
 	}
 
 	return (
 		<PropKeyProvider bind={ bind }>
-			<SizeControl anchorRef={ anchorRef } ariaLabel={ ariaLabel } />
+			<UnstableSizeControl anchorRef={ anchorRef } placeholder={ placeholder } ariaLabel={ ariaLabel } />
 		</PropKeyProvider>
 	);
 };