From 877f788bc7656a0b1a7246da933e874e13c8ce10 Mon Sep 17 00:00:00 2001 From: Andrew Serong <14988353+andrewserong@users.noreply.github.com> Date: Fri, 24 Mar 2023 12:26:41 +1100 Subject: [PATCH 01/10] Sticky Position: Try re-enabling non-root sticky position, and add a visualizer to define sticky area --- packages/block-editor/src/hooks/position.js | 125 ++++++++++++++++-- packages/block-editor/src/hooks/position.scss | 19 +++ 2 files changed, 133 insertions(+), 11 deletions(-) diff --git a/packages/block-editor/src/hooks/position.js b/packages/block-editor/src/hooks/position.js index 81f29fd6a41447..d9a7a8ea36110d 100644 --- a/packages/block-editor/src/hooks/position.js +++ b/packages/block-editor/src/hooks/position.js @@ -13,21 +13,26 @@ import { privateApis as componentsPrivateApis, } from '@wordpress/components'; import { createHigherOrderComponent, useInstanceId } from '@wordpress/compose'; -import { useSelect } from '@wordpress/data'; +import { useDispatch, 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'; import { cleanEmptyObject } from './utils'; import { unlock } from '../lock-unlock'; import { store as blockEditorStore } from '../store'; @@ -203,6 +208,71 @@ export function useIsPositionDisabled( { name: blockName } = {} ) { return ! hasPositionSupport( blockName ) || isDisabled; } +function useVisualizer() { + const [ property, setProperty ] = useState( false ); + const { hideBlockInterface, showBlockInterface } = unlock( + useDispatch( blockEditorStore ) + ); + useEffect( () => { + if ( ! property ) { + showBlockInterface(); + } else { + hideBlockInterface(); + } + }, [ property, showBlockInterface, hideBlockInterface ] ); + + return [ property, setProperty ]; +} + +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 ( + +
+ + ); +} + /* * Position controls rendered in an inspector control panel. * @@ -222,32 +292,39 @@ export function PositionPanel( props ) { const allowSticky = hasStickyPositionSupport( blockName ); const value = style?.position?.type; - const { hasParents } = useSelect( + const { firstParentClientId } = useSelect( ( select ) => { const { getBlockParents } = select( blockEditorStore ); const parents = getBlockParents( clientId ); - return { - hasParents: parents.length, - }; + return { firstParentClientId: parents[ parents.length - 1 ] }; }, [ clientId ] ); + const blockInformation = useBlockDisplayInformation( firstParentClientId ); + const stickyHelpText = + allowSticky && value === 'sticky' && blockInformation + ? sprintf( + /* translators: %s: the name of the parent block. */ + __( + 'The block will stick to the scrollable area of the parent %s block.' + ), + blockInformation.title + ) + : null; + const options = useMemo( () => { const availableOptions = [ DEFAULT_OPTION ]; // Only display sticky option if the block has no parents (is at the root of the document), // or if the block already has a sticky position value set. - if ( - ( allowSticky && ! hasParents ) || - value === STICKY_OPTION.value - ) { + if ( allowSticky || value === STICKY_OPTION.value ) { availableOptions.push( STICKY_OPTION ); } if ( allowFixed || value === FIXED_OPTION.value ) { availableOptions.push( FIXED_OPTION ); } return availableOptions; - }, [ allowFixed, allowSticky, hasParents, value ] ); + }, [ allowFixed, allowSticky, value ] ); const onChangeType = ( next ) => { // For now, use a hard-coded `0px` value for the position. @@ -272,6 +349,17 @@ export function PositionPanel( props ) { } ); }; + const [ isPositionVisualizerActive, setIsPositionVisualizerActive ] = + useVisualizer(); + + const onMouseOverPosition = () => { + setIsPositionVisualizerActive( true ); + }; + + const onMouseLeaveControls = () => { + setIsPositionVisualizerActive( false ); + }; + const selectedOption = value ? options.find( ( option ) => option.value === value ) || DEFAULT_OPTION : DEFAULT_OPTION; @@ -281,6 +369,13 @@ export function PositionPanel( props ) { web: options.length > 1 ? ( + { firstParentClientId && value === 'sticky' ? ( + + ) : null } { onChangeType( selectedItem.value ); } } + onFocus={ onMouseOverPosition } + onBlur={ onMouseLeaveControls } + onMouseOver={ onMouseOverPosition } size={ '__unstable-large' } /> + { stickyHelpText && ( +

+ { stickyHelpText } +

+ ) } ) : null, native: null, diff --git a/packages/block-editor/src/hooks/position.scss b/packages/block-editor/src/hooks/position.scss index b3bd6b1b9ef041..fe6be4a14fb77b 100644 --- a/packages/block-editor/src/hooks/position.scss +++ b/packages/block-editor/src/hooks/position.scss @@ -16,3 +16,22 @@ text-align: left; } } + +.block-editor__sticky-position-visualizer { + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + opacity: 0.5; + border-color: var(--wp-admin-theme-color); + border-style: solid; + box-sizing: border-box; + overflow: hidden; +} + +.block-editor-hooks__position-helptext { + color: $gray-700; + font-size: $helptext-font-size; + margin-bottom: $grid-unit-20; +} From 80be3a60ae866183a9c2c93457a791e4fa148414 Mon Sep 17 00:00:00 2001 From: Andrew Serong <14988353+andrewserong@users.noreply.github.com> Date: Fri, 24 Mar 2023 12:38:28 +1100 Subject: [PATCH 02/10] Fix whitespace --- packages/block-editor/src/hooks/position.js | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/block-editor/src/hooks/position.js b/packages/block-editor/src/hooks/position.js index d9a7a8ea36110d..d2202703c50c47 100644 --- a/packages/block-editor/src/hooks/position.js +++ b/packages/block-editor/src/hooks/position.js @@ -25,6 +25,7 @@ import { } from '@wordpress/element'; import { addFilter } from '@wordpress/hooks'; import isShallowEqual from '@wordpress/is-shallow-equal'; + /** * Internal dependencies */ From 95a5504ee1451a0d5f64668541acb96ce9e29076 Mon Sep 17 00:00:00 2001 From: Andrew Serong <14988353+andrewserong@users.noreply.github.com> Date: Fri, 21 Apr 2023 16:29:21 +1000 Subject: [PATCH 03/10] Ensure the position visualizer does not interfere with the ability to select inner blocks --- packages/base-styles/_z-index.scss | 4 ++++ packages/block-editor/src/hooks/position.js | 1 + packages/block-editor/src/hooks/position.scss | 12 ++++++++++++ 3 files changed, 17 insertions(+) diff --git a/packages/base-styles/_z-index.scss b/packages/base-styles/_z-index.scss index 96040ec29d07b8..f420e449d472a1 100644 --- a/packages/base-styles/_z-index.scss +++ b/packages/base-styles/_z-index.scss @@ -41,6 +41,10 @@ $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/hooks/position.js b/packages/block-editor/src/hooks/position.js index d2202703c50c47..82accd95b89674 100644 --- a/packages/block-editor/src/hooks/position.js +++ b/packages/block-editor/src/hooks/position.js @@ -263,6 +263,7 @@ export function PositionVisualizer( { clientId, attributes, forceShow } ) { return ( div, + .block-editor__sticky-position-visualizer { + pointer-events: none; + } +} + .block-editor__sticky-position-visualizer { position: absolute; top: 0; From d78322cbf38610f7b8e3a1855df8e84369fa3df8 Mon Sep 17 00:00:00 2001 From: Andrew Serong <14988353+andrewserong@users.noreply.github.com> Date: Mon, 24 Apr 2023 15:48:46 +1000 Subject: [PATCH 04/10] Ensure resizing the block editor will update the block popover dimensions --- .../src/components/block-popover/index.js | 22 +++++++++++++++++++ 1 file changed, 22 insertions(+) diff --git a/packages/block-editor/src/components/block-popover/index.js b/packages/block-editor/src/components/block-popover/index.js index 5382949684abd9..229b625dc3c948 100644 --- a/packages/block-editor/src/components/block-popover/index.js +++ b/packages/block-editor/src/components/block-popover/index.js @@ -75,6 +75,28 @@ 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 From 9e5d9bc810c701a6f8875d4db632e3df388c5f15 Mon Sep 17 00:00:00 2001 From: Andrew Serong <14988353+andrewserong@users.noreply.github.com> Date: Wed, 26 Apr 2023 15:57:59 +1000 Subject: [PATCH 05/10] Try simplifying the display logic so it always shows the visualizer if the block is selected --- packages/block-editor/src/hooks/position.js | 35 ++------------------- 1 file changed, 3 insertions(+), 32 deletions(-) diff --git a/packages/block-editor/src/hooks/position.js b/packages/block-editor/src/hooks/position.js index 82accd95b89674..63743cc2c215b4 100644 --- a/packages/block-editor/src/hooks/position.js +++ b/packages/block-editor/src/hooks/position.js @@ -13,7 +13,7 @@ import { privateApis as componentsPrivateApis, } from '@wordpress/components'; import { createHigherOrderComponent, useInstanceId } from '@wordpress/compose'; -import { useDispatch, useSelect } from '@wordpress/data'; +import { useSelect } from '@wordpress/data'; import { useContext, useEffect, @@ -209,22 +209,6 @@ export function useIsPositionDisabled( { name: blockName } = {} ) { return ! hasPositionSupport( blockName ) || isDisabled; } -function useVisualizer() { - const [ property, setProperty ] = useState( false ); - const { hideBlockInterface, showBlockInterface } = unlock( - useDispatch( blockEditorStore ) - ); - useEffect( () => { - if ( ! property ) { - showBlockInterface(); - } else { - hideBlockInterface(); - } - }, [ property, showBlockInterface, hideBlockInterface ] ); - - return [ property, setProperty ]; -} - export function PositionVisualizer( { clientId, attributes, forceShow } ) { const positionType = attributes?.style?.position?.type; @@ -286,6 +270,7 @@ export function PositionPanel( props ) { const { attributes: { style = {} }, clientId, + isSelected, name: blockName, setAttributes, } = props; @@ -351,17 +336,6 @@ export function PositionPanel( props ) { } ); }; - const [ isPositionVisualizerActive, setIsPositionVisualizerActive ] = - useVisualizer(); - - const onMouseOverPosition = () => { - setIsPositionVisualizerActive( true ); - }; - - const onMouseLeaveControls = () => { - setIsPositionVisualizerActive( false ); - }; - const selectedOption = value ? options.find( ( option ) => option.value === value ) || DEFAULT_OPTION : DEFAULT_OPTION; @@ -373,7 +347,7 @@ export function PositionPanel( props ) { { firstParentClientId && value === 'sticky' ? ( @@ -396,9 +370,6 @@ export function PositionPanel( props ) { onChange={ ( { selectedItem } ) => { onChangeType( selectedItem.value ); } } - onFocus={ onMouseOverPosition } - onBlur={ onMouseLeaveControls } - onMouseOver={ onMouseOverPosition } size={ '__unstable-large' } /> From 5ad63a240fa8809efb825772c073640890733217 Mon Sep 17 00:00:00 2001 From: Andrew Serong <14988353+andrewserong@users.noreply.github.com> Date: Thu, 27 Apr 2023 12:02:16 +1000 Subject: [PATCH 06/10] Small code quality tweaks --- packages/block-editor/src/hooks/position.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/block-editor/src/hooks/position.js b/packages/block-editor/src/hooks/position.js index 63743cc2c215b4..f640cd9cfb1de7 100644 --- a/packages/block-editor/src/hooks/position.js +++ b/packages/block-editor/src/hooks/position.js @@ -290,7 +290,7 @@ export function PositionPanel( props ) { const blockInformation = useBlockDisplayInformation( firstParentClientId ); const stickyHelpText = - allowSticky && value === 'sticky' && blockInformation + allowSticky && value === STICKY_OPTION.value && blockInformation ? sprintf( /* translators: %s: the name of the parent block. */ __( @@ -302,8 +302,8 @@ export function PositionPanel( props ) { const options = useMemo( () => { const availableOptions = [ DEFAULT_OPTION ]; - // Only display sticky option if the block has no parents (is at the root of the document), - // or if the block already has a sticky position value set. + // Display options if they are allowed, or if a block already has a valid value set. + // This allows for a block to be switched off from a position type that is not allowed. if ( allowSticky || value === STICKY_OPTION.value ) { availableOptions.push( STICKY_OPTION ); } @@ -345,7 +345,7 @@ export function PositionPanel( props ) { web: options.length > 1 ? ( - { firstParentClientId && value === 'sticky' ? ( + { firstParentClientId && value === STICKY_OPTION.value ? ( Date: Fri, 5 May 2023 16:41:08 +1000 Subject: [PATCH 07/10] Try dotted outline, subtle display on focus and hover label --- packages/block-editor/src/hooks/position.js | 40 ++++++++++++++++--- packages/block-editor/src/hooks/position.scss | 7 +++- 2 files changed, 40 insertions(+), 7 deletions(-) diff --git a/packages/block-editor/src/hooks/position.js b/packages/block-editor/src/hooks/position.js index f640cd9cfb1de7..2a0c9fa0d640aa 100644 --- a/packages/block-editor/src/hooks/position.js +++ b/packages/block-editor/src/hooks/position.js @@ -15,6 +15,7 @@ import { import { createHigherOrderComponent, useInstanceId } from '@wordpress/compose'; import { useSelect } from '@wordpress/data'; import { + createInterpolateElement, useContext, useEffect, useMemo, @@ -278,6 +279,8 @@ export function PositionPanel( props ) { const allowFixed = hasFixedPositionSupport( blockName ); const allowSticky = hasStickyPositionSupport( blockName ); const value = style?.position?.type; + const [ isPositionVisualizerActive, setIsPositionVisualizerActive ] = + useState(); const { firstParentClientId } = useSelect( ( select ) => { @@ -288,15 +291,36 @@ 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 - ? sprintf( - /* translators: %s: the name of the parent block. */ - __( - 'The block will stick to the scrollable area of the parent %s block.' + ? createInterpolateElement( + sprintf( + /* translators: %s: the name of the parent block. */ + __( + 'The block will stick to the scrollable area of the parent %s block.' + ), + blockInformation.title ), - blockInformation.title + { + span: ( + + ), + } ) : null; @@ -347,7 +371,9 @@ export function PositionPanel( props ) { { firstParentClientId && value === STICKY_OPTION.value ? ( @@ -370,6 +396,8 @@ export function PositionPanel( props ) { onChange={ ( { selectedItem } ) => { onChangeType( selectedItem.value ); } } + onFocus={ onMouseOverPosition } + onBlur={ onMouseLeavePosition } size={ '__unstable-large' } /> diff --git a/packages/block-editor/src/hooks/position.scss b/packages/block-editor/src/hooks/position.scss index d1161623fd7e2e..f20c0d55ba046e 100644 --- a/packages/block-editor/src/hooks/position.scss +++ b/packages/block-editor/src/hooks/position.scss @@ -37,7 +37,7 @@ right: 0; opacity: 0.5; border-color: var(--wp-admin-theme-color); - border-style: solid; + border-style: dotted; box-sizing: border-box; overflow: hidden; } @@ -47,3 +47,8 @@ font-size: $helptext-font-size; margin-bottom: $grid-unit-20; } + +.block-editor-hooks__position-helptext__block-title { + text-decoration: underline; + text-decoration-style: dotted; +} From 9311103561bbf034bf2a5f6026b12a841aa0df2f Mon Sep 17 00:00:00 2001 From: Andrew Serong <14988353+andrewserong@users.noreply.github.com> Date: Fri, 26 May 2023 10:57:34 +1000 Subject: [PATCH 08/10] Fix help text and spacing --- packages/block-editor/src/hooks/position.js | 35 ++++++------------- packages/block-editor/src/hooks/position.scss | 11 ------ 2 files changed, 10 insertions(+), 36 deletions(-) diff --git a/packages/block-editor/src/hooks/position.js b/packages/block-editor/src/hooks/position.js index 2a0c9fa0d640aa..3cd3e87363c661 100644 --- a/packages/block-editor/src/hooks/position.js +++ b/packages/block-editor/src/hooks/position.js @@ -15,7 +15,6 @@ import { import { createHigherOrderComponent, useInstanceId } from '@wordpress/compose'; import { useSelect } from '@wordpress/data'; import { - createInterpolateElement, useContext, useEffect, useMemo, @@ -302,25 +301,12 @@ export function PositionPanel( props ) { const blockInformation = useBlockDisplayInformation( firstParentClientId ); const stickyHelpText = allowSticky && value === STICKY_OPTION.value && blockInformation - ? createInterpolateElement( - sprintf( - /* translators: %s: the name of the parent block. */ - __( - 'The block will stick to the scrollable area of the parent %s block.' - ), - blockInformation.title + ? sprintf( + /* translators: %s: the name of the parent block. */ + __( + 'The block will stick to the scrollable area of the parent %s block.' ), - { - span: ( - - ), - } + blockInformation.title ) : null; @@ -378,7 +364,11 @@ export function PositionPanel( props ) { clientId={ firstParentClientId } /> ) : null } - + - { stickyHelpText && ( -

- { stickyHelpText } -

- ) } ) : null, native: null, diff --git a/packages/block-editor/src/hooks/position.scss b/packages/block-editor/src/hooks/position.scss index f20c0d55ba046e..70cf9d6b49c5f6 100644 --- a/packages/block-editor/src/hooks/position.scss +++ b/packages/block-editor/src/hooks/position.scss @@ -41,14 +41,3 @@ box-sizing: border-box; overflow: hidden; } - -.block-editor-hooks__position-helptext { - color: $gray-700; - font-size: $helptext-font-size; - margin-bottom: $grid-unit-20; -} - -.block-editor-hooks__position-helptext__block-title { - text-decoration: underline; - text-decoration-style: dotted; -} From c995d72037fa8ba8c9de36061e25d6ab7c467188 Mon Sep 17 00:00:00 2001 From: Andrew Serong <14988353+andrewserong@users.noreply.github.com> Date: Fri, 26 May 2023 11:13:27 +1000 Subject: [PATCH 09/10] Update visualizer to only display on hover --- packages/block-editor/src/hooks/position.js | 4 ++-- packages/block-editor/src/hooks/position.scss | 3 +-- 2 files changed, 3 insertions(+), 4 deletions(-) diff --git a/packages/block-editor/src/hooks/position.js b/packages/block-editor/src/hooks/position.js index 3cd3e87363c661..ee83f66097b829 100644 --- a/packages/block-editor/src/hooks/position.js +++ b/packages/block-editor/src/hooks/position.js @@ -386,8 +386,8 @@ export function PositionPanel( props ) { onChange={ ( { selectedItem } ) => { onChangeType( selectedItem.value ); } } - onFocus={ onMouseOverPosition } - onBlur={ onMouseLeavePosition } + onMouseOver={ onMouseOverPosition } + onMouseOut={ onMouseLeavePosition } size={ '__unstable-large' } /> diff --git a/packages/block-editor/src/hooks/position.scss b/packages/block-editor/src/hooks/position.scss index 70cf9d6b49c5f6..2991cfd5de8951 100644 --- a/packages/block-editor/src/hooks/position.scss +++ b/packages/block-editor/src/hooks/position.scss @@ -36,8 +36,7 @@ left: 0; right: 0; opacity: 0.5; - border-color: var(--wp-admin-theme-color); - border-style: dotted; + background-color: var(--wp-admin-theme-color); box-sizing: border-box; overflow: hidden; } From b9e7b3723c9ca6effe7e7e05b90f2d727060cdae Mon Sep 17 00:00:00 2001 From: Andrew Serong <14988353+andrewserong@users.noreply.github.com> Date: Fri, 16 Jun 2023 11:16:42 +1000 Subject: [PATCH 10/10] Remove visualizer --- packages/base-styles/_z-index.scss | 4 - .../src/components/block-popover/index.js | 22 ------ packages/block-editor/src/hooks/position.js | 77 ------------------- packages/block-editor/src/hooks/position.scss | 24 ------ 4 files changed, 127 deletions(-) diff --git a/packages/base-styles/_z-index.scss b/packages/base-styles/_z-index.scss index f420e449d472a1..96040ec29d07b8 100644 --- 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 index 229b625dc3c948..5382949684abd9 100644 --- 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 index ee83f66097b829..32e8dc8530d370 100644 --- 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 ( - -
- - ); -} - /* * Position controls rendered in an inspector control panel. * @@ -270,7 +215,6 @@ export function PositionPanel( props ) { const { attributes: { style = {} }, clientId, - isSelected, name: blockName, setAttributes, } = props; @@ -278,8 +222,6 @@ export function PositionPanel( 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 ? ( - { firstParentClientId && value === STICKY_OPTION.value ? ( - - ) : null } { onChangeType( selectedItem.value ); } } - onMouseOver={ onMouseOverPosition } - onMouseOut={ onMouseLeavePosition } size={ '__unstable-large' } /> diff --git a/packages/block-editor/src/hooks/position.scss b/packages/block-editor/src/hooks/position.scss index 2991cfd5de8951..b3bd6b1b9ef041 100644 --- 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; -}