Add prop to disable block selection clearer in BlockList

WordPress · Sep 27, 2022 · bc76f22 · bc76f22
1 parent 8aa2aa2
commit bc76f22
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 6 deletions.
diff --git a/packages/block-editor/src/components/block-list/index.js b/packages/block-editor/src/components/block-list/index.js
@@ -46,7 +46,7 @@ const elementContext = createContext();
 export const IntersectionObserver = createContext();
 const pendingBlockVisibilityUpdatesPerRegistry = new WeakMap();
 
-function Root( { className, ...settings } ) {
+function Root( { className, disableBlockSelectionClearer, ...settings } ) {
 	const [ element, setElement ] = useState();
 	const isLargeViewport = useViewportMatch( 'medium' );
 	const { isOutlineMode, isFocusMode, editorMode } = useSelect(
@@ -103,7 +103,9 @@ function Root( { className, ...settings } ) {
 	const innerBlocksProps = useInnerBlocksProps(
 		{
 			ref: useMergeRefs( [
-				useBlockSelectionClearer(),
+				useBlockSelectionClearer( {
+					disabled: disableBlockSelectionClearer,
+				} ),
 				useInBetweenInserter(),
 				setElement,
 			] ),

diff --git a/packages/block-editor/src/components/block-selection-clearer/index.js b/packages/block-editor/src/components/block-selection-clearer/index.js
@@ -14,15 +14,20 @@ import { store as blockEditorStore } from '../../store';
  * selection. Selection will only be cleared if the element is clicked directly,
  * not if a child element is clicked.
  *
+ * @param {boolean} isDisabled Disable the block selection clearer.
  * @return {import('react').RefCallback} Ref callback.
  */
-export function useBlockSelectionClearer() {
+export function useBlockSelectionClearer( isDisabled ) {
 	const { hasSelectedBlock, hasMultiSelection } =
 		useSelect( blockEditorStore );
 	const { clearSelectedBlock } = useDispatch( blockEditorStore );
 
 	return useRefEffect(
 		( node ) => {
+			if ( isDisabled ) {
+				return;
+			}
+
 			function onMouseDown( event ) {
 				if ( ! hasSelectedBlock() && ! hasMultiSelection() ) {
 					return;
@@ -36,13 +41,13 @@ export function useBlockSelectionClearer() {
 				clearSelectedBlock();
 			}
 
-			node.addEventListener( 'mousedown', onMouseDown );
+			node.addEventListener( 'click', onMouseDown );
 
 			return () => {
-				node.removeEventListener( 'mousedown', onMouseDown );
+				node.removeEventListener( 'click', onMouseDown );
 			};
 		},
-		[ hasSelectedBlock, hasMultiSelection, clearSelectedBlock ]
+		[ hasSelectedBlock, hasMultiSelection, clearSelectedBlock, isDisabled ]
 	);
 }