diff --git a/packages/block-editor/README.md b/packages/block-editor/README.md index bc3f7f0465455..82278316e823a 100644 --- a/packages/block-editor/README.md +++ b/packages/block-editor/README.md @@ -561,16 +561,6 @@ _Related_ Undocumented declaration. -# **useSimulatedMediaQuery** - -Function that manipulates media queries from stylesheets to simulate a given -viewport width. - -_Parameters_ - -- _marker_ `string`: CSS selector string defining start and end of manipulable styles. -- _width_ `?number`: Viewport width to simulate. If provided null, the stylesheets will not be modified. - # **Warning** Undocumented declaration. diff --git a/packages/block-editor/src/components/block-list/block-selection-button.js b/packages/block-editor/src/components/block-list/block-selection-button.js index eab60be82f70c..0462b3dbf28f8 100644 --- a/packages/block-editor/src/components/block-list/block-selection-button.js +++ b/packages/block-editor/src/components/block-list/block-selection-button.js @@ -14,12 +14,22 @@ import { getBlockType, __experimentalGetAccessibleBlockLabel as getAccessibleBlockLabel, } from '@wordpress/blocks'; +import { speak } from '@wordpress/a11y'; /** * Internal dependencies */ import BlockTitle from '../block-title'; +/** + * Returns true if the user is using windows. + * + * @return {boolean} Whether the user is using Windows. + */ +function isWindows() { + return window.navigator.platform.indexOf( 'Win' ) > -1; +} + /** * Block selection button component, displaying the label of the block. If the block * descends from a root block, a button is displayed enabling the user to select @@ -63,6 +73,13 @@ function BlockSelectionButton( { clientId, rootClientId, ...props } ) { // Focus the breadcrumb in navigation mode. useEffect( () => { ref.current.focus(); + + // NVDA on windows suffers from a bug where focus changes are not announced properly + // See WordPress/gutenberg#24121 and nvaccess/nvda#5825 for more details + // To solve it we announce the focus change manually. + if ( isWindows() ) { + speak( label ); + } }, [] ); function onKeyDown( event ) { diff --git a/packages/block-editor/src/components/block-list/style.scss b/packages/block-editor/src/components/block-list/style.scss index c9cd35e092d81..39c9b93f701a2 100644 --- a/packages/block-editor/src/components/block-list/style.scss +++ b/packages/block-editor/src/components/block-list/style.scss @@ -572,14 +572,6 @@ .components-button.has-icon.block-editor-block-mover-button.block-editor-block-mover-button { min-width: $button-size; width: $button-size; - - [draggable="true"] & { - cursor: grab; - - &:active { - cursor: grabbing; - } - } } &.is-horizontal .components-button.has-icon.block-editor-block-mover-button.block-editor-block-mover-button { diff --git a/packages/block-editor/src/components/block-toolbar/style.scss b/packages/block-editor/src/components/block-toolbar/style.scss index 63763752f08cd..ba0048508be2b 100644 --- a/packages/block-editor/src/components/block-toolbar/style.scss +++ b/packages/block-editor/src/components/block-toolbar/style.scss @@ -94,11 +94,6 @@ .block-editor-block-toolbar__block-switcher-wrapper { display: flex; - // Drag and drop is only enabled in contextual toolbars. - &:not([draggable="false"]) * { - cursor: grab; - } - .block-editor-block-switcher { display: block; } diff --git a/packages/block-editor/src/components/index.js b/packages/block-editor/src/components/index.js index 10bd953ecc1d8..cd603cd91589d 100644 --- a/packages/block-editor/src/components/index.js +++ b/packages/block-editor/src/components/index.js @@ -97,5 +97,5 @@ export { default as WritingFlow } from './writing-flow'; */ export { default as BlockEditorProvider } from './provider'; -export { default as useSimulatedMediaQuery } from './use-simulated-media-query'; +export { default as __experimentalUseSimulatedMediaQuery } from './use-simulated-media-query'; export { default as __experimentalUseEditorFeature } from './use-editor-feature'; diff --git a/packages/block-editor/src/components/inserter/quick-inserter.js b/packages/block-editor/src/components/inserter/quick-inserter.js index 6131ffe69cec9..e667a3e183ec2 100644 --- a/packages/block-editor/src/components/inserter/quick-inserter.js +++ b/packages/block-editor/src/components/inserter/quick-inserter.js @@ -13,7 +13,7 @@ import { Button, withSpokenMessages, } from '@wordpress/components'; -import { useSelect } from '@wordpress/data'; +import { useSelect, useDispatch } from '@wordpress/data'; import { LEFT, RIGHT, UP, DOWN, BACKSPACE, ENTER } from '@wordpress/keycodes'; /** @@ -160,12 +160,20 @@ function QuickInserter( { [] ); + const previousBlockClientId = useSelect( + ( select ) => + select( 'core/block-editor' ).getPreviousBlockClientId( clientId ), + [ clientId ] + ); + useEffect( () => { if ( setInsererIsOpened ) { setInsererIsOpened( false ); } }, [ setInsererIsOpened ] ); + const { selectBlock } = useDispatch( 'core/block-editor' ); + // Announce search results on change useEffect( () => { if ( ! filterValue ) { @@ -180,6 +188,15 @@ function QuickInserter( { debouncedSpeak( resultsFoundMessage ); }, [ filterValue, debouncedSpeak ] ); + // When clicking Browse All select the appropriate block so as + // the insertion point can work as expected + const onBrowseAll = () => { + // We have to select the previous block because the menu inserter + // inserts the new block after the selected one. + selectBlock( previousBlockClientId ); + setInsererIsOpened( true ); + }; + // Disable reason (no-autofocus): The inserter menu is a modal display, not one which // is always visible, and one which already incurs this behavior of autoFocus via // Popover's focusOnMount. @@ -212,7 +229,7 @@ function QuickInserter( { { setInsererIsOpened && (