adds a selectBlockInCanvas to allow control on block selection from l…

…ist view
WordPress · Nov 4, 2022 · 1fae12f · 1fae12f
1 parent ddff416
commit 1fae12f
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 8 deletions.
diff --git a/packages/block-editor/src/components/off-canvas-editor/block.js b/packages/block-editor/src/components/off-canvas-editor/block.js
@@ -3,6 +3,9 @@
  */
 import classnames from 'classnames';
 
+/**
+ * WordPress dependencies
+ */
 /**
  * WordPress dependencies
  */
@@ -23,6 +26,9 @@ import {
 import { useDispatch, useSelect } from '@wordpress/data';
 import { sprintf, __ } from '@wordpress/i18n';
 
+/**
+ * Internal dependencies
+ */
 /**
  * Internal dependencies
  */
@@ -54,6 +60,7 @@ function ListViewBlock( {
 	isExpanded,
 	selectedClientIds,
 	preventAnnouncement,
+	selectBlockInCanvas,
 } ) {
 	const cellRef = useRef( null );
 	const [ isHovered, setIsHovered ] = useState( false );
@@ -245,7 +252,13 @@ function ListViewBlock( {
 					<div className="block-editor-list-view-block__contents-container">
 						<ListViewBlockContents
 							block={ block }
-							onClick={ selectEditorBlock }
+							onClick={
+								selectBlockInCanvas
+									? selectEditorBlock
+									: ( event ) => {
+											event.preventDefault();
+									  }
+							}
 							onToggleExpanded={ toggleExpanded }
 							isSelected={ isSelected }
 							position={ position }

diff --git a/packages/block-editor/src/components/off-canvas-editor/branch.js b/packages/block-editor/src/components/off-canvas-editor/branch.js
@@ -10,6 +10,9 @@ import { AsyncModeProvider, useSelect } from '@wordpress/data';
 /**
  * Internal dependencies
  */
+/**
+ * Internal dependencies
+ */
 import ListViewBlock from './block';
 import { useListViewContext } from './context';
 import { isClientIdSelected } from './utils';
@@ -92,6 +95,7 @@ function ListViewBranch( props ) {
 		isExpanded,
 		parentId,
 		shouldShowInnerBlocks = true,
+		selectBlockInCanvas,
 	} = props;
 
 	const isContentLocked = useSelect(
@@ -174,6 +178,7 @@ function ListViewBranch( props ) {
 								isExpanded={ shouldExpand }
 								listPosition={ nextPosition }
 								selectedClientIds={ selectedClientIds }
+								selectBlockInCanvas={ selectBlockInCanvas }
 							/>
 						) }
 						{ ! showBlock && (
@@ -194,6 +199,7 @@ function ListViewBranch( props ) {
 								isBranchSelected={ isSelectedBranch }
 								selectedClientIds={ selectedClientIds }
 								isExpanded={ isExpanded }
+								selectBlockInCanvas={ selectBlockInCanvas }
 							/>
 						) }
 					</AsyncModeProvider>

diff --git a/packages/block-editor/src/components/off-canvas-editor/index.js b/packages/block-editor/src/components/off-canvas-editor/index.js
@@ -50,15 +50,22 @@ export const BLOCK_LIST_ITEM_HEIGHT = 36;
 /**
  * Show a hierarchical list of blocks.
  *
- * @param {Object}  props                 Components props.
- * @param {string}  props.id              An HTML element id for the root element of ListView.
- * @param {Array}   props.blocks          Custom subset of block client IDs to be used instead of the default hierarchy.
- * @param {boolean} props.showBlockMovers Flag to enable block movers
- * @param {boolean} props.isExpanded      Flag to determine whether nested levels are expanded by default.
- * @param {Object}  ref                   Forwarded ref
+ * @param {Object}  props                     Components props.
+ * @param {string}  props.id                  An HTML element id for the root element of ListView.
+ * @param {Array}   props.blocks              Custom subset of block client IDs to be used instead of the default hierarchy.
+ * @param {boolean} props.showBlockMovers     Flag to enable block movers
+ * @param {boolean} props.isExpanded          Flag to determine whether nested levels are expanded by default.
+ * @param {boolean} props.selectBlockInCanvas Flag to determine whether the list view should be a block selection mechanism,.
+ * @param {Object}  ref                       Forwarded ref
  */
 function __ExperimentalOffCanvasEditor(
-	{ id, blocks, showBlockMovers = false, isExpanded = false },
+	{
+		id,
+		blocks,
+		showBlockMovers = false,
+		isExpanded = false,
+		selectBlockInCanvas = true,
+	},
 	ref
 ) {
 	const { clientIdsTree, draggedClientIds, selectedClientIds } =
@@ -199,6 +206,7 @@ function __ExperimentalOffCanvasEditor(
 						selectedClientIds={ selectedClientIds }
 						isExpanded={ isExpanded }
 						shouldShowInnerBlocks={ shouldShowInnerBlocks }
+						selectBlockInCanvas={ selectBlockInCanvas }
 					/>
 				</ListViewContext.Provider>
 			</TreeGrid>