Backport WordPress 5.5 RC2 commits

packages/block-editor/README.md

@@ -561,16 +561,6 @@ _Related_
 
 Undocumented declaration.
 
-<a name="useSimulatedMediaQuery" href="#useSimulatedMediaQuery">#</a> **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.
-
 <a name="Warning" href="#Warning">#</a> **Warning**
 
 Undocumented declaration.

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 ) {

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 {

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;
 	}

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';

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 && (
 				<Button
 					className="block-editor-inserter__quick-inserter-expand"
-					onClick={ () => setInsererIsOpened( true ) }
+					onClick={ onBrowseAll }
 					aria-label={ __(
 						'Browse all. This will open the main inserter panel in the editor toolbar.'
 					) }

packages/edit-widgets/src/components/customizer-edit-widgets-initializer/index.js

@@ -3,7 +3,7 @@
  */
 import { navigateRegions } from '@wordpress/components';
 import {
-	useSimulatedMediaQuery,
+	__experimentalUseSimulatedMediaQuery as useSimulatedMediaQuery,
 	BlockInspector,
 } from '@wordpress/block-editor';
 import { __ } from '@wordpress/i18n';

packages/rich-text/src/component/index.js

@@ -178,6 +178,12 @@ function RichText( {
 } ) {
 	const [ activeFormats = [], setActiveFormats ] = useState();
 
+	// For backward compatibility, fall back to tagName if it's a string.
+	// tagName can now be a component for light blocks.
+	if ( ! multilineRootTag && typeof TagName === 'string' ) {
+		multilineRootTag = TagName;
+	}
+
 	function getDoc() {
 		return ref.current.ownerDocument;
 	}