Add prop to disable block selection clearer in BlockList

packages/block-editor/README.md

@@ -616,6 +616,7 @@ _Properties_
 -   _codeEditingEnabled_ `boolean`: Whether or not the user can switch to the code editor
 -   _generateAnchors_ `boolean`: Enable/Disable auto anchor generation for Heading blocks
 -   _\_\_experimentalCanUserUseUnfilteredHTML_ `boolean`: Whether the user should be able to use unfiltered HTML or the HTML should be filtered e.g., to remove elements considered insecure like iframes.
+-   _\_\_experimentalClearBlockSelection_ `boolean`: Whether the block editor should clear selection on mousedown when a block is not clicked.
 -   _\_\_experimentalBlockDirectory_ `boolean`: Whether the user has enabled the Block Directory
 -   _\_\_experimentalBlockPatterns_ `Array`: Array of objects representing the block patterns
 -   _\_\_experimentalBlockPatternCategories_ `Array`: Array of objects representing the block pattern categories

packages/block-editor/src/components/block-selection-clearer/index.js

@@ -17,12 +17,17 @@ import { store as blockEditorStore } from '../../store';
  * @return {import('react').RefCallback} Ref callback.
  */
 export function useBlockSelectionClearer() {
-	const { hasSelectedBlock, hasMultiSelection } =
+	const { getSettings, hasSelectedBlock, hasMultiSelection } =
 		useSelect( blockEditorStore );
 	const { clearSelectedBlock } = useDispatch( blockEditorStore );
+	const { __experimentalClearBlockSelection: isEnabled } = getSettings();
 
 	return useRefEffect(
 		( node ) => {
+			if ( ! isEnabled ) {
+				return;
+			}
+
 			function onMouseDown( event ) {
 				if ( ! hasSelectedBlock() && ! hasMultiSelection() ) {
 					return;
@@ -42,7 +47,7 @@ export function useBlockSelectionClearer() {
 				node.removeEventListener( 'mousedown', onMouseDown );
 			};
 		},
-		[ hasSelectedBlock, hasMultiSelection, clearSelectedBlock ]
+		[ hasSelectedBlock, hasMultiSelection, clearSelectedBlock, isEnabled ]
 	);
 }
 

packages/block-editor/src/components/block-selection-clearer/test/index.js

@@ -0,0 +1,118 @@
+/**
+ * External dependencies
+ */
+import { fireEvent, render } from '@testing-library/react';
+
+/**
+ * WordPress dependencies
+ */
+import { useDispatch, useSelect } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import BlockSelectionClearer from '../';
+
+const defaultUseSelectValues = {
+	hasSelectedBlock: jest.fn().mockReturnValue( false ),
+	hasMultiSelection: jest.fn().mockReturnValue( false ),
+	getSettings: jest.fn().mockReturnValue( {
+		__experimentalClearBlockSelection: true,
+	} ),
+};
+
+jest.mock( '@wordpress/data/src/components/use-dispatch', () => ( {
+	useDispatch: jest.fn(),
+} ) );
+
+jest.mock( '@wordpress/data/src/components/use-select', () => {
+	// This allows us to tweak the returned value on each test.
+	const mock = jest.fn();
+	return mock;
+} );
+
+describe( 'BlockSelectionClearer component', () => {
+	it( 'should clear the selected block when a selected block exists', () => {
+		const mockClearSelectedBlock = jest.fn();
+		useSelect.mockImplementation( () => ( {
+			...defaultUseSelectValues,
+			hasSelectedBlock: jest.fn().mockReturnValue( true ),
+		} ) );
+		useDispatch.mockImplementation( () => ( {
+			clearSelectedBlock: mockClearSelectedBlock,
+		} ) );
+
+		const { queryByRole } = render(
+			<BlockSelectionClearer>
+				<button>Not a block</button>
+			</BlockSelectionClearer>
+		);
+		const button = queryByRole( 'button' );
+		fireEvent.mouseDown( button.parentElement );
+
+		expect( mockClearSelectedBlock ).toBeCalled();
+	} );
+
+	it( 'should clear the selected block when multiple blocks are selected', () => {
+		const mockClearSelectedBlock = jest.fn();
+		useSelect.mockImplementation( () => ( {
+			...defaultUseSelectValues,
+			hasMultiSelection: jest.fn().mockReturnValue( true ),
+		} ) );
+		useDispatch.mockImplementation( () => ( {
+			clearSelectedBlock: mockClearSelectedBlock,
+		} ) );
+
+		const { queryByRole } = render(
+			<BlockSelectionClearer>
+				<button>Not a block</button>
+			</BlockSelectionClearer>
+		);
+		const button = queryByRole( 'button' );
+		fireEvent.mouseDown( button.parentElement );
+
+		expect( mockClearSelectedBlock ).toBeCalled();
+	} );
+
+	it( 'should not clear the block selection when no blocks are selected', () => {
+		const mockClearSelectedBlock = jest.fn();
+		useSelect.mockImplementation( () => defaultUseSelectValues );
+		useDispatch.mockImplementation( () => ( {
+			clearSelectedBlock: mockClearSelectedBlock,
+		} ) );
+
+		const { queryByRole } = render(
+			<BlockSelectionClearer>
+				<button>Not a block</button>
+			</BlockSelectionClearer>
+		);
+		const button = queryByRole( 'button' );
+		fireEvent.mouseDown( button.parentElement );
+
+		expect( mockClearSelectedBlock ).not.toBeCalled();
+	} );
+
+	it( 'should not clear the block selection when the feature is disabled', () => {
+		const mockClearSelectedBlock = jest.fn();
+		useSelect.mockImplementation( () => ( {
+			...defaultUseSelectValues,
+			hasSelectedBlock: jest.fn().mockReturnValue( true ),
+			getSettings: jest.fn().mockReturnValue( {
+				__experimentalClearBlockSelection: false,
+			} ),
+		} ) );
+		useDispatch.mockImplementation( () => ( {
+			clearSelectedBlock: mockClearSelectedBlock,
+		} ) );
+
+		const { queryByRole } = render(
+			<BlockSelectionClearer>
+				<button>Not a block</button>
+			</BlockSelectionClearer>
+		);
+		const button = queryByRole( 'button' );
+		fireEvent.mouseDown( button.parentElement );
+
+		expect( mockClearSelectedBlock ).not.toBeCalled();
+	} );
+} );

packages/block-editor/src/store/defaults.js

@@ -27,6 +27,7 @@ export const PREFERENCES_DEFAULTS = {
  * @property {boolean}       codeEditingEnabled                     Whether or not the user can switch to the code editor
  * @property {boolean}       generateAnchors                        Enable/Disable auto anchor generation for Heading blocks
  * @property {boolean}       __experimentalCanUserUseUnfilteredHTML Whether the user should be able to use unfiltered HTML or the HTML should be filtered e.g., to remove elements considered insecure like iframes.
+ * @property {boolean}       __experimentalClearBlockSelection      Whether the block editor should clear selection on mousedown when a block is not clicked.
  * @property {boolean}       __experimentalBlockDirectory           Whether the user has enabled the Block Directory
  * @property {Array}         __experimentalBlockPatterns            Array of objects representing the block patterns
  * @property {Array}         __experimentalBlockPatternCategories   Array of objects representing the block pattern categories
@@ -156,6 +157,7 @@ export const SETTINGS_DEFAULTS = {
 	canLockBlocks: true,
 
 	__experimentalCanUserUseUnfilteredHTML: false,
+	__experimentalClearBlockSelection: true,
 	__experimentalBlockDirectory: false,
 	__mobileEnablePageTemplates: false,
 	__experimentalBlockPatterns: [],