@elementor/editor-controls 3.35.0-364 → 3.35.0-366

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": "3.35.0-364",
+  "version": "3.35.0-366",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -40,22 +40,22 @@
     "dev": "tsup --config=../../tsup.dev.ts"
   },
   "dependencies": {
-    "@elementor/editor-current-user": "3.35.0-364",
-    "@elementor/editor-elements": "3.35.0-364",
-    "@elementor/editor-props": "3.35.0-364",
-    "@elementor/editor-responsive": "3.35.0-364",
-    "@elementor/editor-ui": "3.35.0-364",
-    "@elementor/editor-v1-adapters": "3.35.0-364",
-    "@elementor/env": "3.35.0-364",
-    "@elementor/http-client": "3.35.0-364",
+    "@elementor/editor-current-user": "3.35.0-366",
+    "@elementor/editor-elements": "3.35.0-366",
+    "@elementor/editor-props": "3.35.0-366",
+    "@elementor/editor-responsive": "3.35.0-366",
+    "@elementor/editor-ui": "3.35.0-366",
+    "@elementor/editor-v1-adapters": "3.35.0-366",
+    "@elementor/env": "3.35.0-366",
+    "@elementor/http-client": "3.35.0-366",
     "@elementor/icons": "^1.62.0",
-    "@elementor/locations": "3.35.0-364",
-    "@elementor/mixpanel": "3.35.0-364",
-    "@elementor/query": "3.35.0-364",
-    "@elementor/session": "3.35.0-364",
+    "@elementor/locations": "3.35.0-366",
+    "@elementor/mixpanel": "3.35.0-366",
+    "@elementor/query": "3.35.0-366",
+    "@elementor/session": "3.35.0-366",
     "@elementor/ui": "1.36.17",
-    "@elementor/utils": "3.35.0-364",
-    "@elementor/wp-media": "3.35.0-364",
+    "@elementor/utils": "3.35.0-366",
+    "@elementor/wp-media": "3.35.0-366",
     "@wordpress/i18n": "^5.13.0",
     "@monaco-editor/react": "^4.7.0",
     "dayjs": "^1.11.18",

package/src/controls/gap-control.tsx

@@ -1,41 +1,76 @@
 import * as React from 'react';
-import { type RefObject, useRef } from 'react';
+import { type RefObject, useLayoutEffect, useRef, useState } from 'react';
 import { layoutDirectionPropTypeUtil, type PropKey, sizePropTypeUtil } from '@elementor/editor-props';
+import { useActiveBreakpoint } from '@elementor/editor-responsive';
 import { DetachIcon, LinkIcon } from '@elementor/icons';
-import { Grid, Stack, ToggleButton, Tooltip } from '@elementor/ui';
+import { Grid, Stack, Tooltip } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
 import { PropKeyProvider, PropProvider, useBoundProp } from '../bound-prop-context';
 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';
 
 export const GapControl = ( { label }: { label: string } ) => {
+	const stackRef = useRef< HTMLDivElement >( null );
+
+	const { disabled: sizeDisabled } = useBoundProp( sizePropTypeUtil );
+
 	const {
 		value: directionValue,
 		setValue: setDirectionValue,
 		propType,
+		placeholder: directionPlaceholder,
 		disabled: directionDisabled,
 	} = useBoundProp( layoutDirectionPropTypeUtil );
 
-	const stackRef = useRef< HTMLDivElement >( null );
+	const { value: masterValue, setValue: setMasterValue, placeholder: masterPlaceholder } = useBoundProp();
+
+	const inferIsLinked = () => {
+		if ( layoutDirectionPropTypeUtil.isValid( masterValue ) ) {
+			return false;
+		}
+
+		if ( ! masterValue && layoutDirectionPropTypeUtil.isValid( masterPlaceholder ) ) {
+			return false;
+		}
+
+		return true;
+	};
 
-	const { value: sizeValue, setValue: setSizeValue, disabled: sizeDisabled } = useBoundProp( sizePropTypeUtil );
+	const [ isLinked, setIsLinked ] = useState( () => inferIsLinked() );
 
-	const isLinked = ! directionValue && ! sizeValue ? true : !! sizeValue;
+	const activeBreakpoint = useActiveBreakpoint();
+	useLayoutEffect( () => {
+		setIsLinked( inferIsLinked() );
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [ activeBreakpoint ] );
 
 	const onLinkToggle = () => {
-		if ( ! isLinked ) {
-			setSizeValue( directionValue?.column?.value ?? null );
+		setIsLinked( ( prev ) => ! prev );
+
+		if ( ! layoutDirectionPropTypeUtil.isValid( masterValue ) ) {
+			const currentValue = masterValue ? masterValue : null;
+
+			if ( ! currentValue ) {
+				setMasterValue( null );
+				return;
+			}
+
+			setMasterValue(
+				layoutDirectionPropTypeUtil.create( {
+					row: currentValue,
+					column: currentValue,
+				} )
+			);
+
 			return;
 		}
 
-		const value = sizeValue ? sizePropTypeUtil.create( sizeValue ) : null;
+		const currentValue = directionValue?.column ?? directionValue?.row ?? null;
 
-		setDirectionValue( {
-			row: value,
-			column: value,
-		} );
+		setMasterValue( currentValue );
 	};
 
 	const tooltipLabel = label.toLowerCase();
@@ -48,12 +83,21 @@ export const GapControl = ( { label }: { label: string } ) => {
 
 	const disabled = sizeDisabled || directionDisabled;
 
+	const propProviderProps = {
+		propType,
+		value: directionValue,
+		setValue: setDirectionValue,
+		placeholder: directionPlaceholder,
+	};
+
+	const hasPlaceholders = ! masterValue && ( directionPlaceholder || masterPlaceholder );
+
 	return (
-		<PropProvider propType={ propType } value={ directionValue } setValue={ setDirectionValue }>
+		<PropProvider { ...propProviderProps }>
 			<Stack direction="row" gap={ 2 } flexWrap="nowrap">
 				<ControlLabel>{ label }</ControlLabel>
 				<Tooltip title={ isLinked ? unlinkedLabel : linkedLabel } placement="top">
-					<ToggleButton
+					<StyledToggleButton
 						aria-label={ isLinked ? unlinkedLabel : linkedLabel }
 						size={ 'tiny' }
 						value={ 'check' }
@@ -61,9 +105,10 @@ export const GapControl = ( { label }: { label: string } ) => {
 						sx={ { marginLeft: 'auto' } }
 						onChange={ onLinkToggle }
 						disabled={ disabled }
+						isPlaceholder={ hasPlaceholders }
 					>
 						<LinkedIcon fontSize={ 'tiny' } />
-					</ToggleButton>
+					</StyledToggleButton>
 				</Tooltip>
 			</Stack>
 			<Stack direction="row" gap={ 2 } flexWrap="nowrap" ref={ stackRef }>

package/src/controls/linked-dimensions-control.tsx

@@ -23,7 +23,7 @@ type Props = {
 export const LinkedDimensionsControl = ( { label, isSiteRtl = false, extendedOptions, min }: Props ) => {
 	const gridRowRefs: RefObject< HTMLDivElement >[] = [ useRef( null ), useRef( null ) ];
 
-	const { disabled: sizeDisabled, placeholder: sizePlaceholder } = useBoundProp( sizePropTypeUtil );
+	const { disabled: sizeDisabled } = useBoundProp( sizePropTypeUtil );
 
 	const {
 		value: dimensionsValue,
@@ -35,14 +35,12 @@ export const LinkedDimensionsControl = ( { label, isSiteRtl = false, extendedOpt
 
 	const { value: masterValue, placeholder: masterPlaceholder, setValue: setMasterValue } = useBoundProp();
 
-	const hasPlaceholders = !! ( sizePlaceholder || dimensionsPlaceholder );
-
 	const inferIsLinked = () => {
 		if ( dimensionsPropTypeUtil.isValid( masterValue ) ) {
 			return false;
 		}
 
-		if ( dimensionsPropTypeUtil.isValid( masterPlaceholder ) ) {
+		if ( ! masterValue && dimensionsPropTypeUtil.isValid( masterPlaceholder ) ) {
 			return false;
 		}
 
@@ -114,6 +112,8 @@ export const LinkedDimensionsControl = ( { label, isSiteRtl = false, extendedOpt
 		isDisabled: () => dimensionsDisabled,
 	};
 
+	const hasPlaceholders = ! masterValue && ( dimensionsPlaceholder || masterPlaceholder );
+
 	return (
 		<PropProvider { ...propProviderProps }>
 			<Stack direction="row" gap={ 2 } flexWrap="nowrap">