Implement "Add block" UI for Nav block Link UI (#57756)

* Export QuickInserter from block editor package

* Add prop for hiding search input on QuickInserter

* Set up new “Add block” UI using QuickInserter

* Remove auto-inserted blocks if no URL is created

* Hack: fix Popover onClose not firing

* remove useless button

* Hack: fix Popover onClose not firing

* remove useless button

* Add some design for the add block button

* update back button

* Add aria-haspopover

* Add dialog role and aria label and description

* Label the Link Control

* Manage focus when transitioning to Add block state

* Return focus to “Add block” button when going back

* Remove auto-inserted link block when selecting a new block

* Make QuickInserter a private API

* Add mousetrap to popover

* Remove aria-label from Back button

* always direct insert

* move the back button over a bit

* use the onReplace function instead of replaceBlock

* remove comment

* hide the bottom controls when creating a page

* code quality

* changed test to use the new feature

---------

Co-authored-by: scruffian <ben@scruffian.com>
Co-authored-by: Jerry Jones <jones.jeremydavid@gmail.com>
Co-authored-by: MaggieCabrera <maggie.cabrera@automattic.com>

packages/block-editor/src/components/inserter/quick-inserter.js

@@ -32,6 +32,7 @@ export default function QuickInserter( {
 	isAppender,
 	prioritizePatterns,
 	selectBlockOnInsert,
+	hasSearch = true,
 } ) {
 	const [ filterValue, setFilterValue ] = useState( '' );
 	const [ destinationRootClientId, onInsertBlocks ] = useInsertionPoint( {
@@ -70,8 +71,9 @@ export default function QuickInserter( {
 	const showPatterns =
 		patterns.length && ( !! filterValue || prioritizePatterns );
 	const showSearch =
-		( showPatterns && patterns.length > SEARCH_THRESHOLD ) ||
-		blockTypes.length > SEARCH_THRESHOLD;
+		hasSearch &&
+		( ( showPatterns && patterns.length > SEARCH_THRESHOLD ) ||
+			blockTypes.length > SEARCH_THRESHOLD );
 
 	useEffect( () => {
 		if ( setInserterIsOpened ) {

packages/block-editor/src/components/link-control/index.js

@@ -472,7 +472,7 @@ function LinkControl( {
 				</HStack>
 			) }
 
-			{ renderControlBottom && renderControlBottom() }
+			{ ! isCreatingPage && renderControlBottom && renderControlBottom() }
 		</div>
 	);
 }

packages/block-editor/src/private-apis.js

@@ -7,6 +7,7 @@ import { lock } from './lock-unlock';
 import { getRichTextValues } from './components/rich-text/get-rich-text-values';
 import ResizableBoxPopover from './components/resizable-box-popover';
 import { ComposedPrivateInserter as PrivateInserter } from './components/inserter';
+import { default as PrivateQuickInserter } from './components/inserter/quick-inserter';
 import { PrivateListView } from './components/list-view';
 import BlockInfo from './components/block-info-slot-fill';
 import { useCanBlockToolbarBeFocused } from './utils/use-can-block-toolbar-be-focused';
@@ -37,6 +38,7 @@ lock( privateApis, {
 	getDuotoneFilter,
 	getRichTextValues,
 	PrivateInserter,
+	PrivateQuickInserter,
 	PrivateListView,
 	ResizableBoxPopover,
 	BlockInfo,

packages/block-library/src/navigation-link/edit.js

@@ -563,7 +563,14 @@ export default function NavigationLinkEdit( {
 						<LinkUI
 							clientId={ clientId }
 							link={ attributes }
-							onClose={ () => setIsLinkOpen( false ) }
+							onClose={ () => {
+								// If there is no link then remove the auto-inserted block.
+								// This avoids empty blocks which can provided a poor UX.
+								if ( ! url ) {
+									// Need to handle refocusing the Nav block or the inserter?
+									onReplace( [] );
+								}
+							} }
 							anchor={ popoverAnchor }
 							onRemove={ removeLink }
 							onChange={ ( updatedValue ) => {