From 1a145701fdccfcf4c0e715ad43f9173921c219d0 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Fri, 15 Apr 2022 12:42:25 +0100 Subject: [PATCH 01/15] Fix inbetween position on resize (+49 squashed commits) Squashed commits: [eda13cb5b6] Fix selection issue [ea40940cb5] Remove block breadcrumb [e03e27d7de] Fix overlay clickthrough [0e9d2abc78] Update scale ratio to .45 and overlay opacity to .3 [795f757d3e] Make the overlay full width in zoom out view [1c2420ae44] Prevent drag and drop within the disabled containers [22c8786b9c] Fix footer toolbar not appearing [8baea42c30] Fix style previews [be88a13ce6] Prioritize patterns in the main inserter [02b87d79f9] Remove device preview on zoom out mode [d109b2587b] Zoom out further [abdf186a2e] Remove margin bottom [d50342a03a] hide nested levels from list view [1e2aedac74] Fix some e2e tests [d07be07e4c] Remove duplicated prop [9d8d168205] Improve inbetween inserter behavior [b65a3b49c3] Small cleanup [62f5d8564d] Unify block overlay with navigation mode [caf5a7741c] Fix color of the block selection button [c9ddb934ba] Remove iframe background copy hack [c1bcac828e] Comment tweaks [9df3b24f1f] Rename exploded mode to zoom-out mode [c2a5d89308] Small fix [df2b5054f5] prevent selecting sub blocks [d8f93f3fb7] Improve position of the zoom-out view [c239d383a4] Improve block overlay [93c7587a62] Scale the block list a bit more [f03c057ca3] Zoomed-out view instead of exploded view [d83a3f9235] Delay initial rendering of the inserters [27f5d8c3cb] Hide tooltips from block selection button [711e52e3a7] Handle themes with transparent backgrounds [13778fa4aa] Keep inserters visible on scroll [8220fed3c1] Update position on scroll [2ac7d281f4] Fix inbetween inserters with new Popover component [2d9bd97143] Remove CSS margin and scale to leave them to the animation [1dca4a9cfb] hide inserters on scroll [cc54d33ca4] hide block appender in exploded/navigation modes [607a731960] Improve inserter position [2cc2ba485c] Fix clicking movers [b80b932da2] Select parent block when switching to exploded mode [998793c935] Add inbetween inserters [7bf60af210] Update the color of the selection button in exploded mode [8e8083c051] Use the right gray color [30125eb01b] Fix mover styles [fb0fab2943] Fix animation [9e02ae3d08] Add the block selection button [5965567421] Prevent selecting child blocks in exploded mode [1498c7bf08] Add styles cleanup [505be0a0f3] Add a built-in exploded mode instead of a separate view --- .../data/data-core-block-editor.md | 2 +- packages/base-styles/_z-index.scss | 2 +- packages/block-editor/README.md | 1 - .../components/block-content-overlay/index.js | 8 +- .../block-content-overlay/style.scss | 27 ++++- .../components/block-list-appender/index.js | 45 +++++---- .../src/components/block-list/index.js | 8 +- .../src/components/block-list/style.scss | 27 ++--- .../block-list/use-block-props/index.js | 11 ++- .../use-focus-first-element.js | 4 +- .../use-block-props/use-is-hovered.js | 4 +- .../block-list/use-in-between-inserter.js | 24 +++-- .../src/components/block-popover/inbetween.js | 99 +++++++++++++++---- .../src/components/block-popover/style.scss | 16 ++- .../block-tools/block-selection-button.js | 51 +++++++--- .../src/components/block-tools/index.js | 51 +++++++--- .../components/block-tools/insertion-point.js | 9 +- .../block-tools/selected-block-popover.js | 15 +-- .../src/components/block-tools/style.scss | 5 + .../block-tools/zoom-out-mode-inserters.js | 57 +++++++++++ .../src/components/iframe/index.js | 19 +++- .../src/components/inner-blocks/index.js | 5 +- .../src/components/inserter/index.js | 10 +- .../src/components/inserter/library.js | 17 +++- .../src/components/inserter/menu.js | 2 + .../src/components/inserter/tabs.js | 12 ++- .../src/components/list-view/branch.js | 8 +- .../src/components/list-view/index.js | 12 ++- .../src/components/tool-selector/index.js | 20 ++-- .../components/use-block-drop-zone/index.js | 18 +++- .../components/use-moving-animation/index.js | 33 ++----- packages/block-editor/src/store/actions.js | 35 ++++++- packages/block-editor/src/store/reducer.js | 18 ++-- packages/block-editor/src/store/selectors.js | 55 ++++++++++- packages/block-library/src/block/edit.js | 13 +-- .../src/navigation/edit/index.js | 3 - .../src/template-part/edit/index.js | 11 +-- packages/dom/src/dom/get-scroll-container.js | 5 + .../block-editor/resizable-editor.js | 13 ++- .../edit-site/src/components/editor/index.js | 17 +++- .../edit-site/src/components/header/index.js | 30 +++++- 41 files changed, 569 insertions(+), 253 deletions(-) create mode 100644 packages/block-editor/src/components/block-tools/zoom-out-mode-inserters.js diff --git a/docs/reference-guides/data/data-core-block-editor.md b/docs/reference-guides/data/data-core-block-editor.md index 4c16e90441c4a..c0a180f72adf4 100644 --- a/docs/reference-guides/data/data-core-block-editor.md +++ b/docs/reference-guides/data/data-core-block-editor.md @@ -1492,7 +1492,7 @@ Action that enables or disables the navigation mode. _Parameters_ -- _isNavigationMode_ `string`: Enable/Disable navigation mode. +- _isNavigationMode_ `boolean`: Enable/Disable navigation mode. ### setTemplateValidity diff --git a/packages/base-styles/_z-index.scss b/packages/base-styles/_z-index.scss index f5b6331e6fa58..b2bbe99be4f2d 100644 --- a/packages/base-styles/_z-index.scss +++ b/packages/base-styles/_z-index.scss @@ -82,7 +82,7 @@ $z-layers: ( ".block-editor-block-contextual-toolbar": 61, // Ensures content overlay appears higher than resize containers used for image/video/etc. - ".block-editor-block-content-overlay__overlay": 10, + ".block-editor-block-list__block.has-block-overlay": 10, // Query block setup state. ".block-editor-block-pattern-setup .pattern-slide": 100, diff --git a/packages/block-editor/README.md b/packages/block-editor/README.md index 305c32f9d5d7d..c2b8ebc4efd71 100644 --- a/packages/block-editor/README.md +++ b/packages/block-editor/README.md @@ -717,7 +717,6 @@ _Parameters_ - _props_ `Object`: Optional. Props to pass to the element. Must contain the ref if one is defined. - _options_ `Object`: Options for internal use only. - _options.\_\_unstableIsHtml_ `boolean`: -- _options.\_\_unstableIsDisabled_ `boolean`: Whether the block should be disabled. _Returns_ diff --git a/packages/block-editor/src/components/block-content-overlay/index.js b/packages/block-editor/src/components/block-content-overlay/index.js index 034c7ddd7f254..98929b64e4565 100644 --- a/packages/block-editor/src/components/block-content-overlay/index.js +++ b/packages/block-editor/src/components/block-content-overlay/index.js @@ -11,14 +11,10 @@ import { store as blockEditorStore } from '../../store'; export default function useBlockOverlayActive( clientId ) { return useSelect( ( select ) => { - const { isBlockSelected, hasSelectedInnerBlock, canEditBlock } = + const { __unstableHasActiveBlockOverlayActive } = select( blockEditorStore ); - return ( - ! canEditBlock( clientId ) || - ( ! isBlockSelected( clientId ) && - ! hasSelectedInnerBlock( clientId, true ) ) - ); + return __unstableHasActiveBlockOverlayActive( clientId ); }, [ clientId ] ); diff --git a/packages/block-editor/src/components/block-content-overlay/style.scss b/packages/block-editor/src/components/block-content-overlay/style.scss index cba4b603d0bcf..8b7e80276f990 100644 --- a/packages/block-editor/src/components/block-content-overlay/style.scss +++ b/packages/block-editor/src/components/block-content-overlay/style.scss @@ -1,4 +1,6 @@ -.block-editor-block-content-overlay { +.block-editor-block-list__block.has-block-overlay { + cursor: default; + &::before { content: ""; position: absolute; @@ -9,11 +11,30 @@ background: transparent; border: none; border-radius: $radius-block-ui; - z-index: z-index(".block-editor-block-content-overlay__overlay"); + z-index: z-index(".block-editor-block-list__block.has-block-overlay"); + } + + &::after { + content: none !important; } &:hover:not(.is-dragging-blocks)::before { - background: rgba(var(--wp-admin-theme-color--rgb), 0.1); + background: rgba(var(--wp-admin-theme-color--rgb), 0.3); + box-shadow: 0 0 0 $border-width var(--wp-admin-theme-color) inset; + } + + &.is-selected:not(.is-dragging-blocks)::before { box-shadow: 0 0 0 $border-width var(--wp-admin-theme-color) inset; } + + .block-editor-block-list__block { + pointer-events: none; + } + + .block-editor-iframe__body.is-zoomed-out &::before { + // Unfortunately because of the vw unit, this is not always going to be exact + // When the scrollbar is visible, the frame exceeds the canvas by a few pixes. + width: calc(100vw); + left: calc(( 100% - 100vw ) / 2); + } } diff --git a/packages/block-editor/src/components/block-list-appender/index.js b/packages/block-editor/src/components/block-list-appender/index.js index e671d59401d03..a5983f1fdea23 100644 --- a/packages/block-editor/src/components/block-list-appender/index.js +++ b/packages/block-editor/src/components/block-list-appender/index.js @@ -6,7 +6,7 @@ import classnames from 'classnames'; /** * WordPress dependencies */ -import { withSelect } from '@wordpress/data'; +import { useSelect } from '@wordpress/data'; import { getDefaultBlockName } from '@wordpress/blocks'; /** @@ -18,14 +18,35 @@ import { store as blockEditorStore } from '../../store'; function BlockListAppender( { rootClientId, - canInsertDefaultBlock, - isLocked, renderAppender: CustomAppender, className, - selectedBlockClientId, tagName: TagName = 'div', } ) { - if ( isLocked || CustomAppender === false ) { + const { hideInserter, canInsertDefaultBlock, selectedBlockClientId } = + useSelect( + ( select ) => { + const { + canInsertBlockType, + getTemplateLock, + getSelectedBlockClientId, + __unstableGetEditorMode, + } = select( blockEditorStore ); + + return { + hideInserter: + !! getTemplateLock( rootClientId ) || + __unstableGetEditorMode() !== 'edit', + canInsertDefaultBlock: canInsertBlockType( + getDefaultBlockName(), + rootClientId + ), + selectedBlockClientId: getSelectedBlockClientId(), + }; + }, + [ rootClientId ] + ); + + if ( hideInserter || CustomAppender === false ) { return null; } @@ -92,16 +113,4 @@ function BlockListAppender( { ); } -export default withSelect( ( select, { rootClientId } ) => { - const { canInsertBlockType, getTemplateLock, getSelectedBlockClientId } = - select( blockEditorStore ); - - return { - isLocked: !! getTemplateLock( rootClientId ), - canInsertDefaultBlock: canInsertBlockType( - getDefaultBlockName(), - rootClientId - ), - selectedBlockClientId: getSelectedBlockClientId(), - }; -} )( BlockListAppender ); +export default BlockListAppender; diff --git a/packages/block-editor/src/components/block-list/index.js b/packages/block-editor/src/components/block-list/index.js index d853f2529e5ae..8157709b40b76 100644 --- a/packages/block-editor/src/components/block-list/index.js +++ b/packages/block-editor/src/components/block-list/index.js @@ -34,15 +34,15 @@ export const IntersectionObserver = createContext(); function Root( { className, ...settings } ) { const [ element, setElement ] = useState(); const isLargeViewport = useViewportMatch( 'medium' ); - const { isOutlineMode, isFocusMode, isNavigationMode } = useSelect( + const { isOutlineMode, isFocusMode, editorMode } = useSelect( ( select ) => { - const { getSettings, isNavigationMode: _isNavigationMode } = + const { getSettings, __unstableGetEditorMode } = select( blockEditorStore ); const { outlineMode, focusMode } = getSettings(); return { isOutlineMode: outlineMode, isFocusMode: focusMode, - isNavigationMode: _isNavigationMode(), + editorMode: __unstableGetEditorMode(), }; }, [] @@ -74,7 +74,7 @@ function Root( { className, ...settings } ) { className: classnames( 'is-root-container', className, { 'is-outline-mode': isOutlineMode, 'is-focus-mode': isFocusMode && isLargeViewport, - 'is-navigate-mode': isNavigationMode, + 'is-navigate-mode': editorMode === 'navigation', } ), }, settings diff --git a/packages/block-editor/src/components/block-list/style.scss b/packages/block-editor/src/components/block-list/style.scss index e60bacb8a1193..dad4dd092a72f 100644 --- a/packages/block-editor/src/components/block-list/style.scss +++ b/packages/block-editor/src/components/block-list/style.scss @@ -13,15 +13,8 @@ .block-editor-block-list__layout { position: relative; - // Select tool/navigation mode shows the default cursor until an additional click edits. - &.is-navigate-mode { - cursor: default; - } - // The primary indicator of selection in text is the native selection marker. // When selecting multiple blocks, we provide an additional selection indicator. - &.is-navigate-mode .block-editor-block-list__block.is-selected, - &.is-navigate-mode .block-editor-block-list__block.is-hovered, .block-editor-block-list__block.is-multi-selected:not(.is-partially-selected), .block-editor-block-list__block.is-highlighted, .block-editor-block-list__block.is-highlighted ~ .is-multi-selected { @@ -58,10 +51,6 @@ } } - &.is-navigate-mode .block-editor-block-list__block.is-hovered:not(.is-selected)::after { - box-shadow: 0 0 0 $border-width var(--wp-admin-theme-color); - } - .block-editor-block-list__block.is-highlighted::after { box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color); outline: $border-width solid transparent; @@ -449,3 +438,19 @@ margin-bottom: auto; } } + +/** Zoom Out mode styles **/ +.block-editor-iframe__body { + background: $white; + transition: all 0.3s; +} + +.block-editor-iframe__body.is-zoomed-out { + transform-origin: top center; + transform: scale(0.45); + margin-bottom: -70%; +} + +.block-editor-iframe__body.is-zoomed-out > .block-list-appender { + display: none; +} diff --git a/packages/block-editor/src/components/block-list/use-block-props/index.js b/packages/block-editor/src/components/block-list/use-block-props/index.js index 7733c197286db..a5c3c8ff5aef4 100644 --- a/packages/block-editor/src/components/block-list/use-block-props/index.js +++ b/packages/block-editor/src/components/block-list/use-block-props/index.js @@ -34,6 +34,7 @@ import { useNavModeExit } from './use-nav-mode-exit'; import { useBlockRefProvider } from './use-block-refs'; import { useIntersectionObserver } from './use-intersection-observer'; import { store as blockEditorStore } from '../../../store'; +import useBlockOverlayActive from '../../block-content-overlay'; /** * If the block count exceeds the threshold, we disable the reordering animation @@ -58,10 +59,7 @@ const BLOCK_ANIMATION_THRESHOLD = 200; * * @return {Object} Props to pass to the element to mark as a block. */ -export function useBlockProps( - props = {}, - { __unstableIsHtml, __unstableIsDisabled = false } = {} -) { +export function useBlockProps( props = {}, { __unstableIsHtml } = {} ) { const { clientId, className, @@ -114,6 +112,8 @@ export function useBlockProps( [ clientId ] ); + const hasOverlay = useBlockOverlayActive( clientId ); + // translators: %s: Type of block (i.e. Text, Image etc) const blockLabel = sprintf( __( 'Block: %s' ), blockTitle ); const htmlSuffix = mode === 'html' && ! __unstableIsHtml ? '-visual' : ''; @@ -132,7 +132,7 @@ export function useBlockProps( enableAnimation, triggerAnimationOnChange: index, } ), - useDisabled( { isDisabled: ! __unstableIsDisabled } ), + useDisabled( { isDisabled: ! hasOverlay } ), ] ); const blockEditContext = useBlockEditContext(); @@ -158,6 +158,7 @@ export function useBlockProps( // The wp-block className is important for editor styles. classnames( 'block-editor-block-list__block', { 'wp-block': ! isAligned, + 'has-block-overlay': hasOverlay, } ), className, props.className, diff --git a/packages/block-editor/src/components/block-list/use-block-props/use-focus-first-element.js b/packages/block-editor/src/components/block-list/use-block-props/use-focus-first-element.js index 03983726083f1..21515d74b2ecd 100644 --- a/packages/block-editor/src/components/block-list/use-block-props/use-focus-first-element.js +++ b/packages/block-editor/src/components/block-list/use-block-props/use-focus-first-element.js @@ -31,7 +31,7 @@ function useInitialPosition( clientId ) { ( select ) => { const { getSelectedBlocksInitialCaretPosition, - isNavigationMode, + __unstableGetEditorMode, isBlockSelected, } = select( blockEditorStore ); @@ -39,7 +39,7 @@ function useInitialPosition( clientId ) { return; } - if ( isNavigationMode() ) { + if ( __unstableGetEditorMode() !== 'edit' ) { return; } diff --git a/packages/block-editor/src/components/block-list/use-block-props/use-is-hovered.js b/packages/block-editor/src/components/block-list/use-block-props/use-is-hovered.js index 26fc68c21ce2f..653ef3049b124 100644 --- a/packages/block-editor/src/components/block-list/use-block-props/use-is-hovered.js +++ b/packages/block-editor/src/components/block-list/use-block-props/use-is-hovered.js @@ -26,8 +26,8 @@ function listener( event ) { */ export function useIsHovered() { const isEnabled = useSelect( ( select ) => { - const { isNavigationMode, getSettings } = select( blockEditorStore ); - return isNavigationMode() || getSettings().outlineMode; + const { getSettings } = select( blockEditorStore ); + return getSettings().outlineMode; }, [] ); return useRefEffect( diff --git a/packages/block-editor/src/components/block-list/use-in-between-inserter.js b/packages/block-editor/src/components/block-list/use-in-between-inserter.js index 47c90eb5cd575..dac535e74c37f 100644 --- a/packages/block-editor/src/components/block-list/use-in-between-inserter.js +++ b/packages/block-editor/src/components/block-list/use-in-between-inserter.js @@ -14,8 +14,10 @@ import { InsertionPointOpenRef } from '../block-tools/insertion-point'; export function useInBetweenInserter() { const openRef = useContext( InsertionPointOpenRef ); - const hasReducedUI = useSelect( - ( select ) => select( blockEditorStore ).getSettings().hasReducedUI, + const isInBetweenInserterDisabled = useSelect( + ( select ) => + select( blockEditorStore ).getSettings().hasReducedUI || + select( blockEditorStore ).__unstableGetEditorMode() === 'zoom-out', [] ); const { @@ -26,13 +28,14 @@ export function useInBetweenInserter() { isMultiSelecting, getSelectedBlockClientIds, getTemplateLock, + __unstableIsWithinBlockOverlay, } = useSelect( blockEditorStore ); const { showInsertionPoint, hideInsertionPoint } = useDispatch( blockEditorStore ); return useRefEffect( ( node ) => { - if ( hasReducedUI ) { + if ( isInBetweenInserterDisabled ) { return; } @@ -108,16 +111,11 @@ export function useInBetweenInserter() { // Don't show the insertion point if a parent block has an "overlay" // See https://github.com/WordPress/gutenberg/pull/34012#pullrequestreview-727762337 - const parentOverlay = element.parentElement?.closest( - '.block-editor-block-content-overlay' - ); - if ( parentOverlay ) { - return; - } - const clientId = element.id.slice( 'block-'.length ); - - if ( ! clientId ) { + if ( + ! clientId || + __unstableIsWithinBlockOverlay( clientId ) + ) { return; } @@ -126,7 +124,6 @@ export function useInBetweenInserter() { if ( getSelectedBlockClientIds().includes( clientId ) ) { return; } - const elementRect = element.getBoundingClientRect(); if ( @@ -175,6 +172,7 @@ export function useInBetweenInserter() { showInsertionPoint, hideInsertionPoint, getSelectedBlockClientIds, + isInBetweenInserterDisabled, ] ); } diff --git a/packages/block-editor/src/components/block-popover/inbetween.js b/packages/block-editor/src/components/block-popover/inbetween.js index f68a7532f58b8..50a62156b11d6 100644 --- a/packages/block-editor/src/components/block-popover/inbetween.js +++ b/packages/block-editor/src/components/block-popover/inbetween.js @@ -7,7 +7,13 @@ import classnames from 'classnames'; * WordPress dependencies */ import { useSelect } from '@wordpress/data'; -import { useCallback, useMemo, createContext } from '@wordpress/element'; +import { + useCallback, + useMemo, + createContext, + useReducer, + useLayoutEffect, +} from '@wordpress/element'; import { Popover } from '@wordpress/components'; import { isRTL } from '@wordpress/i18n'; @@ -28,6 +34,12 @@ function BlockPopoverInbetween( { __unstableContentRef, ...props } ) { + // This is a temporary hack to get the inbetween inserter to recompute properly. + const [ positionRecompute, forceRecompute ] = useReducer( + ( s ) => s + 1, + 0 + ); + const { orientation, rootClientId, isVisible } = useSelect( ( select ) => { const { @@ -47,7 +59,7 @@ function BlockPopoverInbetween( { isBlockVisible( nextClientId ), }; }, - [ previousClientId ] + [ previousClientId, nextClientId ] ); const previousElement = useBlockElement( previousClientId ); const nextElement = useBlockElement( nextClientId ); @@ -66,9 +78,7 @@ function BlockPopoverInbetween( { if ( isVertical ) { return { - width: previousElement - ? previousElement.offsetWidth - : nextElement.offsetWidth, + width: previousRect ? previousRect.width : nextRect.width, height: nextRect && previousRect ? nextRect.top - previousRect.bottom @@ -85,11 +95,15 @@ function BlockPopoverInbetween( { return { width, - height: previousElement - ? previousElement.offsetHeight - : nextElement.offsetHeight, + height: previousRect ? previousRect.height : nextRect.height, }; - }, [ previousElement, nextElement, isVertical ] ); + }, [ + previousElement, + nextElement, + isVertical, + positionRecompute, + isVisible, + ] ); const getAnchorRect = useCallback( () => { if ( ( ! previousElement && ! nextElement ) || ! isVisible ) { @@ -110,8 +124,8 @@ function BlockPopoverInbetween( { return { top: previousRect ? previousRect.bottom : nextRect.top, left: previousRect ? previousRect.right : nextRect.right, - right: previousRect ? previousRect.left : nextRect.left, - bottom: nextRect ? nextRect.top : previousRect.bottom, + right: previousRect ? previousRect.right : nextRect.right, + bottom: previousRect ? previousRect.bottom : nextRect.top, height: 0, width: 0, ownerDocument, @@ -121,8 +135,8 @@ function BlockPopoverInbetween( { return { top: previousRect ? previousRect.bottom : nextRect.top, left: previousRect ? previousRect.left : nextRect.left, - right: previousRect ? previousRect.right : nextRect.right, - bottom: nextRect ? nextRect.top : previousRect.bottom, + right: previousRect ? previousRect.left : nextRect.left, + bottom: previousRect ? previousRect.bottom : nextRect.top, height: 0, width: 0, ownerDocument, @@ -133,8 +147,8 @@ function BlockPopoverInbetween( { return { top: previousRect ? previousRect.top : nextRect.top, left: previousRect ? previousRect.left : nextRect.right, - right: nextRect ? nextRect.right : previousRect.left, - bottom: previousRect ? previousRect.bottom : nextRect.bottom, + right: previousRect ? previousRect.left : nextRect.right, + bottom: previousRect ? previousRect.top : nextRect.top, height: 0, width: 0, ownerDocument, @@ -144,16 +158,57 @@ function BlockPopoverInbetween( { return { top: previousRect ? previousRect.top : nextRect.top, left: previousRect ? previousRect.right : nextRect.left, - right: nextRect ? nextRect.left : previousRect.right, - bottom: previousRect ? previousRect.bottom : nextRect.bottom, + right: previousRect ? previousRect.right : nextRect.left, + bottom: previousRect ? previousRect.left : nextRect.right, height: 0, width: 0, ownerDocument, }; - }, [ previousElement, nextElement ] ); + }, [ previousElement, nextElement, positionRecompute, isVisible ] ); const popoverScrollRef = usePopoverScroll( __unstableContentRef ); + // This is only needed for a smoth transition when moving blocks. + useLayoutEffect( () => { + if ( ! previousElement ) { + return; + } + const observer = new window.MutationObserver( forceRecompute ); + observer.observe( previousElement, { attributes: true } ); + + return () => { + observer.disconnect(); + }; + }, [ previousElement ] ); + + useLayoutEffect( () => { + if ( ! nextElement ) { + return; + } + const observer = new window.MutationObserver( forceRecompute ); + observer.observe( nextElement, { attributes: true } ); + + return () => { + observer.disconnect(); + }; + }, [ nextElement ] ); + + useLayoutEffect( () => { + if ( ! previousElement ) { + return; + } + previousElement.ownerDocument.defaultView.addEventListener( + 'resize', + forceRecompute + ); + return () => { + previousElement.ownerDocument.defaultView.removeEventListener( + 'resize', + forceRecompute + ); + }; + }, [ previousElement ] ); + // If there's either a previous or a next element, show the inbetween popover. // Note that drag and drop uses the inbetween popover to show the drop indicator // before the first block and after the last block. @@ -188,8 +243,14 @@ function BlockPopoverInbetween( { ) } resize={ false } flip={ false } + placement="bottom-start" > -
{ children }
+
+ { children } +
); /* eslint-enable jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */ diff --git a/packages/block-editor/src/components/block-popover/style.scss b/packages/block-editor/src/components/block-popover/style.scss index dc983dbbf4f89..fab86ebe20730 100644 --- a/packages/block-editor/src/components/block-popover/style.scss +++ b/packages/block-editor/src/components/block-popover/style.scss @@ -6,6 +6,9 @@ // like the popover is impacted by the block gap margin. margin: 0 !important; + // Allow clicking through the toolbar holder. + pointer-events: none; + .components-popover__content { margin: 0 !important; min-width: auto; @@ -15,14 +18,12 @@ outline: none; box-shadow: none; overflow-y: visible; - - // Allow clicking through the toolbar holder. - pointer-events: none; } // Enable pointer events for the toolbar's content. &:not(.block-editor-block-popover__inbetween) .components-popover__content { - * { + // check if rebase ok + div > * { pointer-events: all; } } @@ -49,3 +50,10 @@ } } } + +.block-editor-block-popover__inbetween-container { + pointer-events: none !important; + > div > * { + pointer-events: all; + } +} diff --git a/packages/block-editor/src/components/block-tools/block-selection-button.js b/packages/block-editor/src/components/block-tools/block-selection-button.js index 9dfb7ce9772ab..195ab92985b84 100644 --- a/packages/block-editor/src/components/block-tools/block-selection-button.js +++ b/packages/block-editor/src/components/block-tools/block-selection-button.js @@ -39,6 +39,7 @@ import { store as blockEditorStore } from '../../store'; import BlockDraggable from '../block-draggable'; import useBlockDisplayInformation from '../use-block-display-information'; import { __unstableUseBlockElement as useBlockElement } from '../block-list/use-block-props/use-block-refs'; +import BlockMover from '../block-mover'; /** * Block selection button component, displaying the label of the block. If the block @@ -59,6 +60,7 @@ function BlockSelectionButton( { clientId, rootClientId } ) { getBlockIndex, hasBlockMovingClientId, getBlockListSettings, + __unstableGetEditorMode, } = select( blockEditorStore ); const index = getBlockIndex( clientId ); const { name, attributes } = getBlock( clientId ); @@ -69,11 +71,19 @@ function BlockSelectionButton( { clientId, rootClientId } ) { attributes, blockMovingMode, orientation: getBlockListSettings( rootClientId )?.orientation, + editorMode: __unstableGetEditorMode(), }; }, [ clientId, rootClientId ] ); - const { index, name, attributes, blockMovingMode, orientation } = selected; + const { + index, + name, + attributes, + blockMovingMode, + orientation, + editorMode, + } = selected; const { setNavigationMode, removeBlock } = useDispatch( blockEditorStore ); const ref = useRef(); @@ -236,25 +246,34 @@ function BlockSelectionButton( { clientId, rootClientId } ) { - - { ( draggableProps ) => ( -