From 4d9af43e91d50853b4da0627863e008ae0b74a5d Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Wed, 20 Apr 2022 13:46:43 +0100 Subject: [PATCH] Add reusable BlockPopover and BlockPopoverInbetween components (#40441) --- packages/base-styles/_z-index.scss | 5 +- .../src/components/block-popover/README.md | 41 ++++ .../src/components/block-popover/inbetween.js | 180 ++++++++++++++++++ .../src/components/block-popover/index.js | 73 +++++++ .../src/components/block-popover/style.scss | 24 +++ .../use-popover-scroll.js | 4 +- .../src/components/block-tools/back-compat.js | 2 +- .../block-tools/block-selection-button.js | 4 +- .../src/components/block-tools/index.js | 10 +- .../components/block-tools/insertion-point.js | 171 ++--------------- ...k-popover.js => selected-block-popover.js} | 135 +++---------- .../src/components/block-tools/style.scss | 71 ++----- .../default-block-appender/style.scss | 3 +- packages/block-editor/src/style.scss | 1 + .../src/click-block-appender.js | 1 + .../editor/various/inserting-blocks.test.js | 67 +------ .../various/toolbar-roving-tabindex.test.js | 4 +- 17 files changed, 390 insertions(+), 406 deletions(-) create mode 100644 packages/block-editor/src/components/block-popover/README.md create mode 100644 packages/block-editor/src/components/block-popover/inbetween.js create mode 100644 packages/block-editor/src/components/block-popover/index.js create mode 100644 packages/block-editor/src/components/block-popover/style.scss rename packages/block-editor/src/components/{block-tools => block-popover}/use-popover-scroll.js (92%) rename packages/block-editor/src/components/block-tools/{block-popover.js => selected-block-popover.js} (62%) diff --git a/packages/base-styles/_z-index.scss b/packages/base-styles/_z-index.scss index 734000a8711ddc..e425d111e49f16 100644 --- a/packages/base-styles/_z-index.scss +++ b/packages/base-styles/_z-index.scss @@ -123,10 +123,7 @@ $z-layers: ( ".edit-site-navigation-panel__preview": 32, // Above the block list and the header. - ".block-editor-block-list__block-popover": 31, - - // Under the block popover (block toolbar). - ".block-editor-block-list__insertion-point-popover": 28, + ".block-editor-block-popover": 31, // Show snackbars above everything (similar to popovers) ".components-snackbar-list": 100000, diff --git a/packages/block-editor/src/components/block-popover/README.md b/packages/block-editor/src/components/block-popover/README.md new file mode 100644 index 00000000000000..379eb561a0262a --- /dev/null +++ b/packages/block-editor/src/components/block-popover/README.md @@ -0,0 +1,41 @@ +# BlockPopover and BlockPopoverInbetween + +These two components allow rendering editor UI by the block (in a popover) but outside the canvas. This is important to avoid messing with the style and layout of the block list. + +For example, it's used to render the contextual block toolbar and the in-between block inserter. + +## BlockPopover + +### Props + +#### clientId + +The client ID of the block representing the top position of the popover. + +- Type: `String` +- Required: Yes + +#### bottomClientId + +The client ID of the block representing the bottom position of the popover. + +- Type: `String` +- Required: No + +## BlockPopoverInbetween + +### Props + +#### previousClientId + +The client ID of the block before the popover. + +- Type: `String` +- Required: Yes + +#### nextClientId + +The client ID of the block after the popover. + +- Type: `String` +- Required: Yes diff --git a/packages/block-editor/src/components/block-popover/inbetween.js b/packages/block-editor/src/components/block-popover/inbetween.js new file mode 100644 index 00000000000000..72453ac181981b --- /dev/null +++ b/packages/block-editor/src/components/block-popover/inbetween.js @@ -0,0 +1,180 @@ +/** + * External dependencies + */ +import classnames from 'classnames'; + +/** + * WordPress dependencies + */ +import { useSelect } from '@wordpress/data'; +import { useCallback, useMemo, createContext } from '@wordpress/element'; +import { Popover } from '@wordpress/components'; +import { isRTL } from '@wordpress/i18n'; + +/** + * Internal dependencies + */ +import { store as blockEditorStore } from '../../store'; +import { __unstableUseBlockElement as useBlockElement } from '../block-list/use-block-props/use-block-refs'; +import usePopoverScroll from './use-popover-scroll'; + +export const InsertionPointOpenRef = createContext(); + +function BlockPopoverInbetween( { + previousClientId, + nextClientId, + children, + __unstablePopoverSlot, + __unstableContentRef, + ...props +} ) { + const { orientation, rootClientId } = useSelect( + ( select ) => { + const { getBlockListSettings, getBlockRootClientId } = select( + blockEditorStore + ); + + const _rootClientId = getBlockRootClientId( previousClientId ); + return { + orientation: + getBlockListSettings( _rootClientId )?.orientation || + 'vertical', + rootClientId: _rootClientId, + }; + }, + [ previousClientId ] + ); + const previousElement = useBlockElement( previousClientId ); + const nextElement = useBlockElement( nextClientId ); + const isVertical = orientation === 'vertical'; + const style = useMemo( () => { + if ( ! previousElement && ! nextElement ) { + return {}; + } + + const previousRect = previousElement + ? previousElement.getBoundingClientRect() + : null; + const nextRect = nextElement + ? nextElement.getBoundingClientRect() + : null; + + if ( isVertical ) { + return { + width: previousElement + ? previousElement.offsetWidth + : nextElement.offsetWidth, + height: + nextRect && previousRect + ? nextRect.top - previousRect.bottom + : 0, + }; + } + + let width = 0; + if ( previousRect && nextRect ) { + width = isRTL() + ? previousRect.left - nextRect.right + : nextRect.left - previousRect.right; + } + + return { + width, + height: previousElement + ? previousElement.offsetHeight + : nextElement.offsetHeight, + }; + }, [ previousElement, nextElement, isVertical ] ); + + const getAnchorRect = useCallback( () => { + if ( ! previousElement && ! nextElement ) { + return {}; + } + + const { ownerDocument } = previousElement || nextElement; + + const previousRect = previousElement + ? previousElement.getBoundingClientRect() + : null; + const nextRect = nextElement + ? nextElement.getBoundingClientRect() + : null; + + if ( isVertical ) { + if ( isRTL() ) { + 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, + ownerDocument, + }; + } + + 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, + ownerDocument, + }; + } + + if ( isRTL() ) { + 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, + ownerDocument, + }; + } + + 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, + ownerDocument, + }; + }, [ previousElement, nextElement ] ); + + const popoverScrollRef = usePopoverScroll( __unstableContentRef ); + + if ( ! previousElement || ! nextElement ) { + return null; + } + + /* eslint-disable jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */ + // While ideally it would be enough to capture the + // bubbling focus event from the Inserter, due to the + // characteristics of click focusing of `button`s in + // Firefox and Safari, it is not reliable. + // + // See: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#Clicking_and_focus + return ( + +
{ children }
+ + ); + /* eslint-enable jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */ +} + +export default BlockPopoverInbetween; diff --git a/packages/block-editor/src/components/block-popover/index.js b/packages/block-editor/src/components/block-popover/index.js new file mode 100644 index 00000000000000..2bff678f977b67 --- /dev/null +++ b/packages/block-editor/src/components/block-popover/index.js @@ -0,0 +1,73 @@ +/** + * External dependencies + */ +import classnames from 'classnames'; + +/** + * WordPress dependencies + */ +import { Popover } from '@wordpress/components'; +import { getScrollContainer } from '@wordpress/dom'; + +/** + * Internal dependencies + */ +import { __unstableUseBlockElement as useBlockElement } from '../block-list/use-block-props/use-block-refs'; +import usePopoverScroll from './use-popover-scroll'; + +export default function BlockPopover( { + clientId, + bottomClientId, + children, + __unstablePopoverSlot, + __unstableContentRef, + ...props +} ) { + const selectedElement = useBlockElement( clientId ); + const lastSelectedElement = useBlockElement( bottomClientId ?? clientId ); + const popoverScrollRef = usePopoverScroll( __unstableContentRef ); + + if ( ! selectedElement || ( bottomClientId && ! lastSelectedElement ) ) { + return null; + } + + const anchorRef = { + top: selectedElement, + bottom: lastSelectedElement, + }; + + const { ownerDocument } = selectedElement; + const stickyBoundaryElement = + ownerDocument.defaultView.frameElement || + getScrollContainer( selectedElement ) || + ownerDocument.body; + + return ( + + { children } + + ); +} diff --git a/packages/block-editor/src/components/block-popover/style.scss b/packages/block-editor/src/components/block-popover/style.scss new file mode 100644 index 00000000000000..86d11ed94007f0 --- /dev/null +++ b/packages/block-editor/src/components/block-popover/style.scss @@ -0,0 +1,24 @@ + +.components-popover.block-editor-block-popover { + z-index: z-index(".block-editor-block-popover"); + position: absolute; + + .components-popover__content { + margin: 0 !important; + min-width: auto; + width: max-content; + background: none; + border: none; + box-shadow: none; + overflow-y: visible; + + // Allow clicking through the toolbar holder. + pointer-events: none; + + // Position the block toolbar. + > * { + pointer-events: all; + } + } +} + diff --git a/packages/block-editor/src/components/block-tools/use-popover-scroll.js b/packages/block-editor/src/components/block-popover/use-popover-scroll.js similarity index 92% rename from packages/block-editor/src/components/block-tools/use-popover-scroll.js rename to packages/block-editor/src/components/block-popover/use-popover-scroll.js index 59c395efac3ca7..8aeb768e302f62 100644 --- a/packages/block-editor/src/components/block-tools/use-popover-scroll.js +++ b/packages/block-editor/src/components/block-popover/use-popover-scroll.js @@ -10,7 +10,7 @@ import { useRefEffect } from '@wordpress/compose'; * * @param {Object} scrollableRef */ -export function usePopoverScroll( scrollableRef ) { +function usePopoverScroll( scrollableRef ) { return useRefEffect( ( node ) => { if ( ! scrollableRef ) { @@ -32,3 +32,5 @@ export function usePopoverScroll( scrollableRef ) { [ scrollableRef ] ); } + +export default usePopoverScroll; diff --git a/packages/block-editor/src/components/block-tools/back-compat.js b/packages/block-editor/src/components/block-tools/back-compat.js index 0b7cf7cf702f0f..eb8ba03cbf0468 100644 --- a/packages/block-editor/src/components/block-tools/back-compat.js +++ b/packages/block-editor/src/components/block-tools/back-compat.js @@ -9,7 +9,7 @@ import deprecated from '@wordpress/deprecated'; * Internal dependencies */ import InsertionPoint, { InsertionPointOpenRef } from './insertion-point'; -import BlockPopover from './block-popover'; +import BlockPopover from './selected-block-popover'; export default function BlockToolsBackCompat( { children } ) { const openRef = useContext( InsertionPointOpenRef ); 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 73805544c7f7af..07ba78151e9de2 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 @@ -38,6 +38,7 @@ import BlockIcon from '../block-icon'; 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'; /** * Block selection button component, displaying the label of the block. If the block @@ -49,7 +50,7 @@ import useBlockDisplayInformation from '../use-block-display-information'; * * @return {WPComponent} The component to be rendered. */ -function BlockSelectionButton( { clientId, rootClientId, blockElement } ) { +function BlockSelectionButton( { clientId, rootClientId } ) { const blockInformation = useBlockDisplayInformation( clientId ); const selected = useSelect( ( select ) => { @@ -90,6 +91,7 @@ function BlockSelectionButton( { clientId, rootClientId, blockElement } ) { speak( label ); }, [ label ] ); + const blockElement = useBlockElement( clientId ); const { hasBlockMovingClientId, diff --git a/packages/block-editor/src/components/block-tools/index.js b/packages/block-editor/src/components/block-tools/index.js index d581a43dae4a8f..8ef20c29b5283b 100644 --- a/packages/block-editor/src/components/block-tools/index.js +++ b/packages/block-editor/src/components/block-tools/index.js @@ -15,10 +15,10 @@ import { __unstableUseShortcutEventMatch as useShortcutEventMatch } from '@wordp * Internal dependencies */ import InsertionPoint from './insertion-point'; -import BlockPopover from './block-popover'; +import SelectedBlockPopover from './selected-block-popover'; import { store as blockEditorStore } from '../../store'; import BlockContextualToolbar from './block-contextual-toolbar'; -import { usePopoverScroll } from './use-popover-scroll'; +import usePopoverScroll from '../block-popover/use-popover-scroll'; /** * Renders block tools (the block toolbar, select/navigation mode toolbar, the @@ -112,8 +112,10 @@ export default function BlockTools( { ) } { /* Even if the toolbar is fixed, the block popover is still - needed for navigation mode. */ } - + needed for navigation and exploded mode. */ } + { /* Used for the inline rich text toolbar. */ } { - if ( ! previousElement && ! nextElement ) { - return {}; - } - - const previousRect = previousElement - ? previousElement.getBoundingClientRect() - : null; - const nextRect = nextElement - ? nextElement.getBoundingClientRect() - : null; - - if ( isVertical ) { - return { - width: previousElement - ? previousElement.offsetWidth - : nextElement.offsetWidth, - height: - nextRect && previousRect - ? nextRect.top - previousRect.bottom - : 0, - }; - } - - let width = 0; - if ( previousRect && nextRect ) { - width = isRTL() - ? previousRect.left - nextRect.right - : nextRect.left - previousRect.right; - } - - return { - width, - height: previousElement - ? previousElement.offsetHeight - : nextElement.offsetHeight, - }; - }, [ previousElement, nextElement ] ); - - const getAnchorRect = useCallback( () => { - if ( ! previousElement && ! nextElement ) { - return {}; - } - - const { ownerDocument } = previousElement || nextElement; - - const previousRect = previousElement - ? previousElement.getBoundingClientRect() - : null; - const nextRect = nextElement - ? nextElement.getBoundingClientRect() - : null; - - if ( isVertical ) { - if ( isRTL() ) { - 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, - ownerDocument, - }; - } - - 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, - ownerDocument, - }; - } - - if ( isRTL() ) { - 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, - ownerDocument, - }; - } - 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, - ownerDocument, - }; - }, [ previousElement, nextElement ] ); - - const popoverScrollRef = usePopoverScroll( __unstableContentRef ); const disableMotion = useReducedMotion(); - const className = classnames( - 'block-editor-block-list__insertion-point', - 'is-' + orientation - ); - function onClick( event ) { if ( event.target === ref.current && nextClientId ) { selectBlock( nextClientId, -1 ); @@ -203,11 +96,6 @@ function InsertionPointPopover( { } } - // Only show the in-between inserter between blocks, so when there's a - // previous and a next element. - const showInsertionPointInserter = - previousElement && nextElement && isInserterShown; - // Define animation variants for the line element. const horizontalLine = { start: { @@ -261,7 +149,7 @@ function InsertionPointPopover( { ...( ! isVertical ? horizontalLine.rest : verticalLine.rest ), opacity: 1, borderRadius: '2px', - transition: { delay: showInsertionPointInserter ? 0.4 : 0 }, + transition: { delay: isInserterShown ? 0.4 : 0 }, }, hover: { ...( ! isVertical ? horizontalLine.hover : verticalLine.hover ), @@ -281,27 +169,17 @@ function InsertionPointPopover( { }, }; - /* eslint-disable jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */ - // While ideally it would be enough to capture the - // bubbling focus event from the Inserter, due to the - // characteristics of click focusing of `button`s in - // Firefox and Safari, it is not reliable. - // - // See: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#Clicking_and_focus + const className = classnames( + 'block-editor-block-list__insertion-point', + 'is-' + orientation + ); + return ( - - { showInsertionPointInserter && ( + { isInserterShown && ( ) } - + ); - /* eslint-enable jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */ } -export default function InsertionPoint( { - children, - __unstablePopoverSlot, - __unstableContentRef, -} ) { +export default function InsertionPoint( { children, ...props } ) { const isVisible = useSelect( ( select ) => { return select( blockEditorStore ).isBlockInsertionPointVisible(); }, [] ); return ( - { isVisible && ( - - ) } + { isVisible && } { children } ); diff --git a/packages/block-editor/src/components/block-tools/block-popover.js b/packages/block-editor/src/components/block-tools/selected-block-popover.js similarity index 62% rename from packages/block-editor/src/components/block-tools/block-popover.js rename to packages/block-editor/src/components/block-tools/selected-block-popover.js index e6da62defa055e..a96142a38bee71 100644 --- a/packages/block-editor/src/components/block-tools/block-popover.js +++ b/packages/block-editor/src/components/block-tools/selected-block-popover.js @@ -9,11 +9,9 @@ import classnames from 'classnames'; */ import { useState, useRef, useEffect } from '@wordpress/element'; import { isUnmodifiedDefaultBlock } from '@wordpress/blocks'; -import { Popover } from '@wordpress/components'; import { useDispatch, useSelect } from '@wordpress/data'; import { useShortcut } from '@wordpress/keyboard-shortcuts'; import { useViewportMatch } from '@wordpress/compose'; -import { getScrollContainer } from '@wordpress/dom'; /** * Internal dependencies @@ -22,8 +20,7 @@ import BlockSelectionButton from './block-selection-button'; import BlockContextualToolbar from './block-contextual-toolbar'; import Inserter from '../inserter'; import { store as blockEditorStore } from '../../store'; -import { __unstableUseBlockElement as useBlockElement } from '../block-list/use-block-props/use-block-refs'; -import { usePopoverScroll } from './use-popover-scroll'; +import BlockPopover from '../block-popover'; function selector( select ) { const { @@ -40,16 +37,16 @@ function selector( select ) { isMultiSelecting: isMultiSelecting(), isTyping: isTyping(), isCaretWithinFormattedText: isCaretWithinFormattedText(), - hasMultiSelection: hasMultiSelection(), hasFixedToolbar: getSettings().hasFixedToolbar, - lastClientId: getLastMultiSelectedBlockClientId(), + lastClientId: hasMultiSelection() + ? getLastMultiSelectedBlockClientId() + : null, }; } -function BlockPopover( { +function SelectedBlockPopover( { clientId, rootClientId, - isValid, isEmptyDefaultBlock, capturingClientId, __unstablePopoverSlot, @@ -60,7 +57,6 @@ function BlockPopover( { isMultiSelecting, isTyping, isCaretWithinFormattedText, - hasMultiSelection, hasFixedToolbar, lastClientId, } = useSelect( selector, [] ); @@ -83,21 +79,19 @@ function BlockPopover( { [ clientId ] ); const isLargeViewport = useViewportMatch( 'medium' ); - const [ isToolbarForced, setIsToolbarForced ] = useState( false ); + const isToolbarForced = useRef( false ); const [ isInserterShown, setIsInserterShown ] = useState( false ); const { stopTyping } = useDispatch( blockEditorStore ); - // Controls when the side inserter on empty lines should - // be shown, including writing and selection modes. const showEmptyBlockSideInserter = - ! isTyping && ! isNavigationMode && isEmptyDefaultBlock && isValid; + ! isTyping && ! isNavigationMode && isEmptyDefaultBlock; const shouldShowBreadcrumb = isNavigationMode; const shouldShowContextualToolbar = ! isNavigationMode && ! hasFixedToolbar && isLargeViewport && - ! showEmptyBlockSideInserter && ! isMultiSelecting && + ! showEmptyBlockSideInserter && ( ! isTyping || isCaretWithinFormattedText ); const canFocusHiddenToolbar = ! isNavigationMode && @@ -108,7 +102,7 @@ function BlockPopover( { useShortcut( 'core/block-editor/focus-toolbar', () => { - setIsToolbarForced( true ); + isToolbarForced.current = true; stopTyping( true ); }, { @@ -117,55 +111,17 @@ function BlockPopover( { ); useEffect( () => { - if ( ! shouldShowContextualToolbar ) { - setIsToolbarForced( false ); - } - }, [ shouldShowContextualToolbar ] ); + isToolbarForced.current = false; + } ); // Stores the active toolbar item index so the block toolbar can return focus // to it when re-mounting. const initialToolbarItemIndexRef = useRef(); - const selectedElement = useBlockElement( clientId ); - const lastSelectedElement = useBlockElement( lastClientId ); - const capturingElement = useBlockElement( capturingClientId ); - - const popoverScrollRef = usePopoverScroll( __unstableContentRef ); - - if ( - ! shouldShowBreadcrumb && - ! shouldShowContextualToolbar && - ! isToolbarForced && - ! showEmptyBlockSideInserter - ) { + if ( ! shouldShowBreadcrumb && ! shouldShowContextualToolbar ) { return null; } - let node = selectedElement; - - if ( ! node ) { - return null; - } - - if ( capturingClientId ) { - node = capturingElement; - } - - let anchorRef = node; - - if ( hasMultiSelection ) { - // Wait to render the popover until the bottom reference is available - // as well. - if ( ! lastSelectedElement ) { - return null; - } - - anchorRef = { - top: node, - bottom: lastSelectedElement, - }; - } - function onFocus() { setIsInserterShown( true ); } @@ -174,48 +130,17 @@ function BlockPopover( { setIsInserterShown( false ); } - // Position above the anchor, pop out towards the right, and position in the - // left corner. For the side inserter, pop out towards the left, and - // position in the right corner. - // To do: refactor `Popover` to make this prop clearer. - const popoverPosition = showEmptyBlockSideInserter - ? 'top left right' - : 'top right left'; - const { ownerDocument } = node; - const stickyBoundaryElement = showEmptyBlockSideInserter - ? undefined - : // The sticky boundary element should be the boundary at which the - // the block toolbar becomes sticky when the block scolls out of view. - // In case of an iframe, this should be the iframe boundary, otherwise - // the scroll container. - ownerDocument.defaultView.frameElement || - getScrollContainer( node ) || - ownerDocument.body; - return ( - - { ( shouldShowContextualToolbar || isToolbarForced ) && ( + { shouldShowContextualToolbar && (
) } - { ( shouldShowContextualToolbar || isToolbarForced ) && ( + { shouldShowContextualToolbar && ( ) } - { showEmptyBlockSideInserter && ( -
- -
- ) } - + ); } @@ -294,7 +208,7 @@ function wrapperSelector( select ) { return; } - const { name, attributes = {}, isValid } = getBlock( clientId ) || {}; + const { name, attributes = {} } = getBlock( clientId ) || {}; const blockParentsClientIds = getBlockParents( clientId ); // Get Block List Settings for all ancestors of the current Block clientId. @@ -314,7 +228,6 @@ function wrapperSelector( select ) { clientId, rootClientId: getBlockRootClientId( clientId ), name, - isValid, isEmptyDefaultBlock: name && isUnmodifiedDefaultBlock( { name, attributes } ), capturingClientId, @@ -335,7 +248,6 @@ export default function WrappedBlockPopover( { clientId, rootClientId, name, - isValid, isEmptyDefaultBlock, capturingClientId, } = selected; @@ -345,10 +257,9 @@ export default function WrappedBlockPopover( { } return ( - new Promise( window.requestIdleCallback ) ); } diff --git a/packages/e2e-tests/specs/editor/various/inserting-blocks.test.js b/packages/e2e-tests/specs/editor/various/inserting-blocks.test.js index c295fbd77f01a3..5207771ad548bd 100644 --- a/packages/e2e-tests/specs/editor/various/inserting-blocks.test.js +++ b/packages/e2e-tests/specs/editor/various/inserting-blocks.test.js @@ -10,7 +10,6 @@ import { pressKeyTimes, searchForBlock, setBrowserViewport, - showBlockToolbar, pressKeyWithModifier, } from '@wordpress/e2e-test-utils'; @@ -170,68 +169,6 @@ describe( 'Inserting blocks', () => { ).not.toBeNull(); } ); - // Check for regression of https://github.com/WordPress/gutenberg/issues/9583 - it( 'should not allow transfer of focus outside of the block-insertion menu once open', async () => { - // Enter the default block and click the inserter toggle button to the left of it. - await page.keyboard.press( 'Enter' ); - await showBlockToolbar(); - await page.click( - '.block-editor-block-list__empty-block-inserter .block-editor-inserter__toggle' - ); - - // Expect the inserter search input to be the active element. - let activeElementClassList = await page.evaluate( - () => document.activeElement.classList - ); - expect( Object.values( activeElementClassList ) ).toContain( - 'components-search-control__input' - ); - - // Try using the up arrow key (vertical navigation triggers the issue described in #9583). - await page.keyboard.press( 'ArrowUp' ); - - // Expect the inserter search input to still be the active element. - activeElementClassList = await page.evaluate( - () => document.activeElement.classList - ); - expect( Object.values( activeElementClassList ) ).toContain( - 'components-search-control__input' - ); - - // Tab to the block list. - await page.keyboard.press( 'Tab' ); - - // Expect the block list to be the active element. - activeElementClassList = await page.evaluate( - () => document.activeElement.classList - ); - expect( Object.values( activeElementClassList ) ).toContain( - 'block-editor-block-types-list__item' - ); - - // Try using the up arrow key. - await page.keyboard.press( 'ArrowUp' ); - - // Expect the block list to still be the active element. - activeElementClassList = await page.evaluate( - () => document.activeElement.classList - ); - expect( Object.values( activeElementClassList ) ).toContain( - 'block-editor-block-types-list__item' - ); - - // Press escape to close the block inserter. - await page.keyboard.press( 'Escape' ); - - // Expect focus to have transferred back to the inserter toggle button. - activeElementClassList = await page.evaluate( - () => document.activeElement.classList - ); - expect( Object.values( activeElementClassList ) ).toContain( - 'block-editor-inserter__toggle' - ); - } ); - // Check for regression of https://github.com/WordPress/gutenberg/issues/23263 it( 'inserts blocks at root level when using the root appender while selection is in an inner block', async () => { await insertBlock( 'Buttons' ); @@ -310,12 +247,11 @@ describe( 'Inserting blocks', () => { await insertBlock( 'Paragraph' ); await page.keyboard.type( 'First paragraph' ); await insertBlock( 'Image' ); - await showBlockToolbar(); const paragraphBlock = await page.$( 'p[aria-label="Paragraph block"]' ); paragraphBlock.click(); - await showBlockToolbar(); + await page.evaluate( () => new Promise( window.requestIdleCallback ) ); // Open the global inserter and search for the Heading block. await searchForBlock( 'Heading' ); @@ -323,7 +259,6 @@ describe( 'Inserting blocks', () => { const headingButton = ( await page.$x( `//button//span[contains(text(), 'Heading')]` ) )[ 0 ]; - // Hover over the block should show the blue line indicator. await headingButton.hover(); diff --git a/packages/e2e-tests/specs/editor/various/toolbar-roving-tabindex.test.js b/packages/e2e-tests/specs/editor/various/toolbar-roving-tabindex.test.js index ddc36ff4a4770b..1a1fe9a2e01571 100644 --- a/packages/e2e-tests/specs/editor/various/toolbar-roving-tabindex.test.js +++ b/packages/e2e-tests/specs/editor/various/toolbar-roving-tabindex.test.js @@ -42,9 +42,7 @@ async function testBlockToolbarKeyboardNavigation( async function wrapCurrentBlockWithGroup( currentBlockTitle ) { await page.click( `[aria-label="${ currentBlockTitle }"]` ); - await page.evaluate( () => { - document.querySelector( '.editor-block-list-item-group' ).click(); - } ); + await page.click( '.editor-block-list-item-group' ); } async function testGroupKeyboardNavigation(