Block Navigation List: do not show appender and avoid closing the mod…

…al on block select (#34337) * Block Navigation List: do not show appender and avoid closing the modal on block select * Block Navigation List: do not change modal size when dragging items
WordPress · Aug 27, 2021 · b4e74b7 · b4e74b7
1 parent 23bd592
commit b4e74b7
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 16 deletions.
diff --git a/packages/block-editor/src/components/list-view/index.js b/packages/block-editor/src/components/list-view/index.js
@@ -11,6 +11,7 @@ import {
 	useMemo,
 	useRef,
 	useReducer,
+	forwardRef,
 } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 
@@ -48,15 +49,19 @@ const expanded = ( state, action ) => {
  * @param {boolean}  props.showOnlyCurrentHierarchy                 Flag to limit the list to the current hierarchy of blocks.
  * @param {boolean}  props.__experimentalFeatures                   Flag to enable experimental features.
  * @param {boolean}  props.__experimentalPersistentListViewFeatures Flag to enable features for the Persistent List View experiment.
+ * @param {Object}   ref                                            Forwarded ref
  */
-export default function ListView( {
-	blocks,
-	showOnlyCurrentHierarchy,
-	onSelect = noop,
-	__experimentalFeatures,
-	__experimentalPersistentListViewFeatures,
-	...props
-} ) {
+function ListView(
+	{
+		blocks,
+		showOnlyCurrentHierarchy,
+		onSelect = noop,
+		__experimentalFeatures,
+		__experimentalPersistentListViewFeatures,
+		...props
+	},
+	ref
+) {
 	const { clientIdsTree, selectedClientIds } = useListViewClientIds(
 		blocks,
 		showOnlyCurrentHierarchy,
@@ -74,7 +79,7 @@ export default function ListView( {
 
 	const { ref: dropZoneRef, target: blockDropTarget } = useListViewDropZone();
 	const elementRef = useRef();
-	const treeGridRef = useMergeRefs( [ elementRef, dropZoneRef ] );
+	const treeGridRef = useMergeRefs( [ elementRef, dropZoneRef, ref ] );
 
 	const isMounted = useRef( false );
 	useEffect( () => {
@@ -144,3 +149,4 @@ export default function ListView( {
 		</>
 	);
 }
+export default forwardRef( ListView );
diff --git a/packages/block-library/src/navigation/block-navigation-list.js b/packages/block-library/src/navigation/block-navigation-list.js
@@ -6,6 +6,7 @@ import {
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
 import { useSelect } from '@wordpress/data';
+import { useRef, useEffect, useState } from '@wordpress/element';
 
 export default function BlockNavigationList( {
 	clientId,
@@ -17,13 +18,21 @@ export default function BlockNavigationList( {
 		[ clientId ]
 	);
 
+	const listViewRef = useRef();
+	const [ minHeight, setMinHeight ] = useState( 300 );
+	useEffect( () => {
+		setMinHeight( listViewRef?.current?.clientHeight ?? 300 );
+	}, [] );
+
 	return (
-		<ListView
-			blocks={ blocks }
-			showAppender
-			showBlockMovers
-			showNestedBlocks
-			__experimentalFeatures={ __experimentalFeatures }
-		/>
+		<div style={ { minHeight } }>
+			<ListView
+				ref={ listViewRef }
+				blocks={ blocks }
+				showBlockMovers
+				showNestedBlocks
+				__experimentalFeatures={ __experimentalFeatures }
+			/>
+		</div>
 	);
 }
diff --git a/packages/block-library/src/navigation/use-block-navigator.js b/packages/block-library/src/navigation/use-block-navigator.js
@@ -30,6 +30,7 @@ export default function useBlockNavigator( clientId, __experimentalFeatures ) {
 			onRequestClose={ () => {
 				setIsNavigationListOpen( false );
 			} }
+			shouldCloseOnClickOutside={ false }
 		>
 			<BlockNavigationList
 				clientId={ clientId }