Remove visualizer

WordPress · Jun 16, 2023 · b9e7b37 · b9e7b37
1 parent c995d72
commit b9e7b37
Show file tree

Hide file tree

Showing 4 changed files with 0 additions and 127 deletions.
diff --git a/packages/base-styles/_z-index.scss b/packages/base-styles/_z-index.scss
@@ -41,10 +41,6 @@ $z-layers: (
 	".wp-block-cover__video-background": 0, // Video background inside cover block.
 	".wp-block-template-part__placeholder-preview-filter-input": 1,
 
-	// Sticky position visualizer:
-	// Note that the sticky position block support has a default z-index value of 10.
-	".block-editor__sticky-position-visualizer-popover": 10, // Ensure visualizer sits beneath the block toolbar.
-
 	// Fixed position appender:
 	".block-editor-block-list__block .block-list-appender": 2,
 

diff --git a/packages/block-editor/src/components/block-popover/index.js b/packages/block-editor/src/components/block-popover/index.js
@@ -75,28 +75,6 @@ function BlockPopover(
 		};
 	}, [ selectedElement ] );
 
-	// When cover target is enabled, the popover dimensions need to be recomputed
-	// when the window is resized. This is to ensure that the calculated dimensions
-	// of the popover are correct when the block editor is resized.
-	useLayoutEffect( () => {
-		if ( ! __unstableCoverTarget || ! selectedElement ) {
-			return;
-		}
-
-		const defaultView = selectedElement?.ownerDocument.defaultView;
-		defaultView.addEventListener(
-			'resize',
-			forceRecomputePopoverDimensions
-		);
-
-		return () => {
-			defaultView.removeEventListener(
-				'resize',
-				forceRecomputePopoverDimensions
-			);
-		};
-	}, [ __unstableCoverTarget, selectedElement ] );
-
 	const style = useMemo( () => {
 		if (
 			// popoverDimensionsRecomputeCounter is by definition always equal or greater

diff --git a/packages/block-editor/src/hooks/position.js b/packages/block-editor/src/hooks/position.js
@@ -16,21 +16,16 @@ import { createHigherOrderComponent, useInstanceId } from '@wordpress/compose';
 import { useSelect } from '@wordpress/data';
 import {
 	useContext,
-	useEffect,
 	useMemo,
-	useRef,
-	useState,
 	createPortal,
 	Platform,
 } from '@wordpress/element';
 import { addFilter } from '@wordpress/hooks';
-import isShallowEqual from '@wordpress/is-shallow-equal';
 
 /**
  * Internal dependencies
  */
 import BlockList from '../components/block-list';
-import BlockPopover from '../components/block-popover';
 import useSetting from '../components/use-setting';
 import InspectorControls from '../components/inspector-controls';
 import useBlockDisplayInformation from '../components/use-block-display-information';
@@ -209,56 +204,6 @@ export function useIsPositionDisabled( { name: blockName } = {} ) {
 	return ! hasPositionSupport( blockName ) || isDisabled;
 }
 
-export function PositionVisualizer( { clientId, attributes, forceShow } ) {
-	const positionType = attributes?.style?.position?.type;
-
-	const [ isActive, setIsActive ] = useState( false );
-	const valueRef = useRef( positionType );
-	const timeoutRef = useRef();
-
-	const clearTimer = () => {
-		if ( timeoutRef.current ) {
-			window.clearTimeout( timeoutRef.current );
-		}
-	};
-
-	useEffect( () => {
-		if (
-			! isShallowEqual( positionType, valueRef.current ) &&
-			! forceShow
-		) {
-			setIsActive( true );
-			valueRef.current = positionType;
-
-			timeoutRef.current = setTimeout( () => {
-				setIsActive( false );
-			}, 400 );
-		}
-
-		return () => {
-			setIsActive( false );
-			clearTimer();
-		};
-	}, [ positionType, forceShow ] );
-
-	if ( ! isActive && ! forceShow ) {
-		return null;
-	}
-
-	return (
-		<BlockPopover
-			className="block-editor__sticky-position-visualizer-popover"
-			clientId={ clientId }
-			__unstableCoverTarget
-			__unstableRefreshSize={ positionType }
-			__unstablePopoverSlot="block-toolbar"
-			shift={ false }
-		>
-			<div className="block-editor__sticky-position-visualizer" />
-		</BlockPopover>
-	);
-}
-
 /*
  * Position controls rendered in an inspector control panel.
  *
@@ -270,16 +215,13 @@ export function PositionPanel( props ) {
 	const {
 		attributes: { style = {} },
 		clientId,
-		isSelected,
 		name: blockName,
 		setAttributes,
 	} = props;
 
 	const allowFixed = hasFixedPositionSupport( blockName );
 	const allowSticky = hasStickyPositionSupport( blockName );
 	const value = style?.position?.type;
-	const [ isPositionVisualizerActive, setIsPositionVisualizerActive ] =
-		useState();
 
 	const { firstParentClientId } = useSelect(
 		( select ) => {
@@ -290,14 +232,6 @@ export function PositionPanel( props ) {
 		[ clientId ]
 	);
 
-	const onMouseOverPosition = () => {
-		setIsPositionVisualizerActive( true );
-	};
-
-	const onMouseLeavePosition = () => {
-		setIsPositionVisualizerActive( false );
-	};
-
 	const blockInformation = useBlockDisplayInformation( firstParentClientId );
 	const stickyHelpText =
 		allowSticky && value === STICKY_OPTION.value && blockInformation
@@ -355,15 +289,6 @@ export function PositionPanel( props ) {
 		web:
 			options.length > 1 ? (
 				<InspectorControls group="position">
-					{ firstParentClientId && value === STICKY_OPTION.value ? (
-						<PositionVisualizer
-							forceShow={
-								isSelected && isPositionVisualizerActive
-							}
-							{ ...props }
-							clientId={ firstParentClientId }
-						/>
-					) : null }
 					<BaseControl
 						className="block-editor-hooks__position-selection"
 						__nextHasNoMarginBottom
@@ -386,8 +311,6 @@ export function PositionPanel( props ) {
 							onChange={ ( { selectedItem } ) => {
 								onChangeType( selectedItem.value );
 							} }
-							onMouseOver={ onMouseOverPosition }
-							onMouseOut={ onMouseLeavePosition }
 							size={ '__unstable-large' }
 						/>
 					</BaseControl>

diff --git a/packages/block-editor/src/hooks/position.scss b/packages/block-editor/src/hooks/position.scss
@@ -16,27 +16,3 @@
 		text-align: left;
 	}
 }
-
-// Prevent position visualizer popover from preventing inner block selection.
-.components-popover.block-editor-block-popover.block-editor__sticky-position-visualizer-popover {
-	z-index: z-index(".block-editor__sticky-position-visualizer-popover");
-	// Additional specificity is required to overcome default block popover
-	// pointer events only for the intended wrappers. This ensures that the
-	// visualizer popover never interferes with inner block selection.
-	.components-popover__content > div,
-	.block-editor__sticky-position-visualizer {
-		pointer-events: none;
-	}
-}
-
-.block-editor__sticky-position-visualizer {
-	position: absolute;
-	top: 0;
-	bottom: 0;
-	left: 0;
-	right: 0;
-	opacity: 0.5;
-	background-color: var(--wp-admin-theme-color);
-	box-sizing: border-box;
-	overflow: hidden;
-}