Add visualizers back

WordPress · Feb 15, 2023 · cd20917 · cd20917
1 parent befe1e8
commit cd20917
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 26 deletions.
diff --git a/packages/block-editor/src/components/global-styles/dimensions-panel.js b/packages/block-editor/src/components/global-styles/dimensions-panel.js
@@ -178,6 +178,7 @@ export default function DimensionsPanel( {
 	settings,
 	panelId,
 	defaultControls = DEFAULT_CONTROLS,
+	onVisualize = () => {},
 } ) {
 	const decodeValue = ( rawValue ) =>
 		getValueFromVariable( { settings }, '', rawValue );
@@ -247,6 +248,7 @@ export default function DimensionsPanel( {
 		!! value?.spacing?.padding &&
 		Object.keys( value?.spacing?.padding ).length;
 	const resetPaddingValue = () => setPaddingValues( undefined );
+	const onMouseOverPadding = () => onVisualize( 'padding' );
 
 	// Margin
 	const showMarginControl = useHasMargin( settings );
@@ -272,6 +274,7 @@ export default function DimensionsPanel( {
 		!! value?.spacing?.margin &&
 		Object.keys( value?.spacing?.margin ).length;
 	const resetMarginValue = () => setMarginValues( undefined );
+	const onMouseOverMargin = () => onVisualize( 'margin' );
 
 	// Block Gap
 	const showGapControl = useHasGap( settings );
@@ -370,6 +373,7 @@ export default function DimensionsPanel( {
 			},
 		} );
 	};
+	const onMouseLeaveControls = () => onVisualize( false );
 
 	return (
 		<Wrapper resetAll={ resetAll }>
@@ -450,6 +454,8 @@ export default function DimensionsPanel( {
 							units={ units }
 							allowReset={ false }
 							splitOnAxis={ isAxialPadding }
+							onMouseOver={ onMouseOverPadding }
+							onMouseOut={ onMouseLeaveControls }
 						/>
 					) }
 					{ showSpacingPresetsControl && (
@@ -461,6 +467,8 @@ export default function DimensionsPanel( {
 							units={ units }
 							allowReset={ false }
 							splitOnAxis={ isAxialPadding }
+							onMouseOver={ onMouseOverPadding }
+							onMouseOut={ onMouseLeaveControls }
 						/>
 					) }
 				</ToolsPanelItem>
@@ -485,6 +493,8 @@ export default function DimensionsPanel( {
 							units={ units }
 							allowReset={ false }
 							splitOnAxis={ isAxialMargin }
+							onMouseOver={ onMouseOverMargin }
+							onMouseOut={ onMouseLeaveControls }
 						/>
 					) }
 					{ showSpacingPresetsControl && (
@@ -496,6 +506,8 @@ export default function DimensionsPanel( {
 							units={ units }
 							allowReset={ false }
 							splitOnAxis={ isAxialMargin }
+							onMouseOver={ onMouseOverMargin }
+							onMouseOut={ onMouseLeaveControls }
 						/>
 					) }
 				</ToolsPanelItem>

diff --git a/packages/block-editor/src/hooks/dimensions.js b/packages/block-editor/src/hooks/dimensions.js
@@ -1,8 +1,8 @@
 /**
  * WordPress dependencies
  */
-/*import { useState } from '@wordpress/element';
-import { useDispatch } from '@wordpress/data';*/
+import { useState, useEffect } from '@wordpress/element';
+import { useDispatch } from '@wordpress/data';
 import { getBlockSupport } from '@wordpress/blocks';
 import deprecated from '@wordpress/deprecated';
 
@@ -14,35 +14,33 @@ import {
 	DimensionsPanel as StylesDimensionsPanel,
 	useHasDimensionsPanel,
 } from '../components/global-styles';
-/*import { MarginVisualizer } from './margin';
+import { MarginVisualizer } from './margin';
 import { PaddingVisualizer } from './padding';
 import { store as blockEditorStore } from '../store';
 import { unlock } from '../lock-unlock';
-*/
+
 import { cleanEmptyObject, useBlockSettings } from './utils';
 
 export const DIMENSIONS_SUPPORT_KEY = 'dimensions';
 export const SPACING_SUPPORT_KEY = 'spacing';
 export const ALL_SIDES = [ 'top', 'right', 'bottom', 'left' ];
 export const AXIAL_SIDES = [ 'vertical', 'horizontal' ];
 
-/*function useVisualizerMouseOver() {
-	const [ isMouseOver, setIsMouseOver ] = useState( false );
+function useVisualizer() {
+	const [ property, setProperty ] = useState( false );
 	const { hideBlockInterface, showBlockInterface } = unlock(
 		useDispatch( blockEditorStore )
 	);
-	const onMouseOver = ( e ) => {
-		e.stopPropagation();
-		hideBlockInterface();
-		setIsMouseOver( true );
-	};
-	const onMouseOut = ( e ) => {
-		e.stopPropagation();
-		showBlockInterface();
-		setIsMouseOver( false );
-	};
-	return { isMouseOver, onMouseOver, onMouseOut };
-}*/
+	useEffect( () => {
+		if ( ! property ) {
+			showBlockInterface();
+		} else {
+			hideBlockInterface();
+		}
+	}, [ property, showBlockInterface, hideBlockInterface ] );
+
+	return [ property, setProperty ];
+}
 
 function DimensionsInspectorControl( { children } ) {
 	return (
@@ -61,8 +59,7 @@ export function DimensionsPanel( props ) {
 	const settings = useBlockSettings( name, __unstableParentLayout );
 	const isEnabled = useHasDimensionsPanel( settings );
 	const value = attributes.style;
-	//const paddingMouseOver = useVisualizerMouseOver();
-	//const marginMouseOver = useVisualizerMouseOver();
+	const [ visualizedProperty, setVisualizedProperty ] = useVisualizer();
 	const onChange = ( newStyle ) => {
 		setAttributes( {
 			style: cleanEmptyObject( newStyle ),
@@ -96,21 +93,20 @@ export function DimensionsPanel( props ) {
 				value={ value }
 				onChange={ onChange }
 				defaultControls={ defaultControls }
+				onVisualize={ setVisualizedProperty }
 			/>
-			{ /*
-			{ ! isPaddingDisabled && (
+			{ !! settings?.spacing?.padding && (
 				<PaddingVisualizer
-					forceShow={ paddingMouseOver.isMouseOver }
+					forceShow={ visualizedProperty === 'padding' }
 					{ ...props }
 				/>
 			) }
-			{ ! isMarginDisabled && (
+			{ !! settings?.spacing?.margin && (
 				<MarginVisualizer
-					forceShow={ marginMouseOver.isMouseOver }
+					forceShow={ visualizedProperty === 'margin' }
 					{ ...props }
 				/>
 			) }
-			/*/ }
 		</>
 	);
 }