Writing flow: allow select all from empty selection (#33446)

WordPress · Jul 15, 2021 · 984d8c8 · 984d8c8
1 parent e108be7
commit 984d8c8
Show file tree

Hide file tree

Showing 6 changed files with 74 additions and 31 deletions.
diff --git a/packages/block-editor/src/components/writing-flow/index.js b/packages/block-editor/src/components/writing-flow/index.js
@@ -1,9 +1,15 @@
+/**
+ * External dependencies
+ */
+import classNames from 'classnames';
+
 /**
  * WordPress dependencies
  */
 import { useSelect } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
 import { useMergeRefs } from '@wordpress/compose';
+import { forwardRef } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -14,14 +20,7 @@ import useArrowNav from './use-arrow-nav';
 import useSelectAll from './use-select-all';
 import { store as blockEditorStore } from '../../store';
 
-/**
- * Handles selection and navigation across blocks. This component should be
- * wrapped around BlockList.
- *
- * @param {Object}    props          Component properties.
- * @param {WPElement} props.children Children to be rendered.
- */
-export default function WritingFlow( { children } ) {
+function WritingFlow( { children, ...props }, forwardedRef ) {
 	const [ before, ref, after ] = useTabNav();
 	const hasMultiSelection = useSelect(
 		( select ) => select( blockEditorStore ).hasMultiSelection(),
@@ -31,14 +30,19 @@ export default function WritingFlow( { children } ) {
 		<>
 			{ before }
 			<div
+				{ ...props }
 				ref={ useMergeRefs( [
+					forwardedRef,
 					ref,
 					useMultiSelection(),
 					useSelectAll(),
 					useArrowNav(),
 				] ) }
-				className="block-editor-writing-flow"
-				tabIndex={ hasMultiSelection ? '0' : undefined }
+				className={ classNames(
+					props.className,
+					'block-editor-writing-flow'
+				) }
+				tabIndex={ -1 }
 				aria-label={
 					hasMultiSelection
 						? __( 'Multiple selected blocks' )
@@ -51,3 +55,12 @@ export default function WritingFlow( { children } ) {
 		</>
 	);
 }
+
+/**
+ * Handles selection and navigation across blocks. This component should be
+ * wrapped around BlockList.
+ *
+ * @param {Object}    props          Component properties.
+ * @param {WPElement} props.children Children to be rendered.
+ */
+export default forwardRef( WritingFlow );
diff --git a/packages/block-editor/src/components/writing-flow/use-select-all.js b/packages/block-editor/src/components/writing-flow/use-select-all.js
@@ -27,16 +27,12 @@ export default function useSelectAll() {
 
 	return useRefEffect( ( node ) => {
 		function onKeyDown( event ) {
-			const selectedClientIds = getSelectedBlockClientIds();
-
-			if ( ! selectedClientIds.length ) {
-				return;
-			}
-
 			if ( ! isMatch( 'core/block-editor/select-all', event ) ) {
 				return;
 			}
 
+			const selectedClientIds = getSelectedBlockClientIds();
+
 			if (
 				selectedClientIds.length === 1 &&
 				! isEntirelySelected( event.target )

diff --git a/packages/block-editor/src/components/writing-flow/use-tab-nav.js b/packages/block-editor/src/components/writing-flow/use-tab-nav.js
@@ -84,6 +84,7 @@ export default function useTabNav() {
 		function onKeyDown( event ) {
 			if ( event.keyCode === ESCAPE && ! hasMultiSelection() ) {
 				event.stopPropagation();
+				event.preventDefault();
 				setNavigationMode( true );
 				return;
 			}
@@ -102,6 +103,7 @@ export default function useTabNav() {
 			const direction = isShift ? 'findPrevious' : 'findNext';
 
 			if ( ! hasMultiSelection() && ! getSelectedBlockClientId() ) {
+				setNavigationMode( true );
 				return;
 			}
 

diff --git a/packages/e2e-tests/specs/editor/various/__snapshots__/multi-block-selection.test.js.snap b/packages/e2e-tests/specs/editor/various/__snapshots__/multi-block-selection.test.js.snap
@@ -186,6 +186,18 @@ exports[`Multi-block selection should return original focus after failed multi s
 <!-- /wp:paragraph -->"
 `;
 
+exports[`Multi-block selection should select all from empty selection 1`] = `
+"<!-- wp:paragraph -->
+<p>1</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:paragraph -->
+<p>2</p>
+<!-- /wp:paragraph -->"
+`;
+
+exports[`Multi-block selection should select all from empty selection 2`] = `""`;
+
 exports[`Multi-block selection should set attributes for multiple paragraphs 1`] = `
 "<!-- wp:paragraph {\\"align\\":\\"center\\"} -->
 <p class=\\"has-text-align-center\\">1</p>

diff --git a/packages/e2e-tests/specs/editor/various/multi-block-selection.test.js b/packages/e2e-tests/specs/editor/various/multi-block-selection.test.js
@@ -632,4 +632,27 @@ describe( 'Multi-block selection', () => {
 			'[data-type="core/paragraph"].is-multi-selected'
 		);
 	} );
+
+	it( 'should select all from empty selection', async () => {
+		await clickBlockAppender();
+
+		await page.keyboard.type( '1' );
+		await page.keyboard.press( 'Enter' );
+		await page.keyboard.type( '2' );
+
+		// Confirm setup.
+		expect( await getEditedPostContent() ).toMatchSnapshot();
+
+		// Clear the selected block.
+		const paragraph = await page.$( '[data-type="core/paragraph"]' );
+		const box = await paragraph.boundingBox();
+		await page.mouse.click( box.x - 1, box.y );
+
+		await pressKeyWithModifier( 'primary', 'a' );
+
+		await page.keyboard.press( 'Backspace' );
+
+		// Expect both paragraphs to be deleted.
+		expect( await getEditedPostContent() ).toMatchSnapshot();
+	} );
 } );
diff --git a/packages/edit-post/src/components/visual-editor/index.js b/packages/edit-post/src/components/visual-editor/index.js
@@ -57,13 +57,14 @@ function MaybeIframe( {
 		return (
 			<>
 				<EditorStyles styles={ styles } />
-				<div
+				<WritingFlow
 					ref={ contentRef }
 					className="editor-styles-wrapper"
 					style={ { flex: '1', ...style } }
+					tabIndex={ -1 }
 				>
 					{ children }
-				</div>
+				</WritingFlow>
 			</>
 		);
 	}
@@ -75,7 +76,7 @@ function MaybeIframe( {
 			contentRef={ contentRef }
 			style={ { width: '100%', height: '100%', display: 'block' } }
 		>
-			{ children }
+			<WritingFlow>{ children }</WritingFlow>
 		</Iframe>
 	);
 }
@@ -234,18 +235,14 @@ export default function VisualEditor( { styles } ) {
 									layout={ defaultLayout }
 								/>
 							) }
-							<WritingFlow>
-								{ ! isTemplateMode && (
-									<div className="edit-post-visual-editor__post-title-wrapper">
-										<PostTitle />
-									</div>
-								) }
-								<RecursionProvider>
-									<BlockList
-										__experimentalLayout={ layout }
-									/>
-								</RecursionProvider>
-							</WritingFlow>
+							{ ! isTemplateMode && (
+								<div className="edit-post-visual-editor__post-title-wrapper">
+									<PostTitle />
+								</div>
+							) }
+							<RecursionProvider>
+								<BlockList __experimentalLayout={ layout } />
+							</RecursionProvider>
 						</MaybeIframe>
 					</motion.div>
 				</motion.div>