[Widgets editor] Global inserter open by default

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

@@ -21,6 +21,7 @@ function InserterLibrary( {
 	showMostUsedBlocks = false,
 	__experimentalSelectBlockOnInsert: selectBlockOnInsert,
 	onSelect = noop,
+	autoFocus,
 } ) {
 	const destinationRootClientId = useSelect(
 		( select ) => {
@@ -35,6 +36,8 @@ function InserterLibrary( {
 
 	return (
 		<InserterMenu
+			// eslint-disable-next-line jsx-a11y/no-autofocus
+			autoFocus={ autoFocus }
 			onSelect={ onSelect }
 			rootClientId={ destinationRootClientId }
 			clientId={ clientId }

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

@@ -29,6 +29,7 @@ function InserterMenu( {
 	onSelect,
 	showInserterHelpPanel,
 	showMostUsedBlocks,
+	autoFocus,
 } ) {
 	const [ activeTab, setActiveTab ] = useState( 'blocks' );
 	const [ filterValue, setFilterValue ] = useState( '' );
@@ -147,6 +148,7 @@ function InserterMenu( {
 						} }
 						value={ filterValue }
 						placeholder={ searchFormPlaceholder() }
+						autoFocus={ autoFocus }
 					/>
 					{ ( showPatterns || hasReusableBlocks ) && (
 						<InserterTabs

packages/block-editor/src/components/inserter/search-form.js

@@ -12,7 +12,13 @@ import { VisuallyHidden, Button } from '@wordpress/components';
 import { Icon, search, closeSmall } from '@wordpress/icons';
 import { useRef } from '@wordpress/element';
 
-function InserterSearchForm( { className, onChange, value, placeholder } ) {
+function InserterSearchForm( {
+	className,
+	onChange,
+	value,
+	placeholder,
+	autoFocus = true,
+} ) {
 	const instanceId = useInstanceId( InserterSearchForm );
 	const searchInput = useRef();
 
@@ -39,7 +45,7 @@ function InserterSearchForm( { className, onChange, value, placeholder } ) {
 				id={ `block-editor-inserter__search-${ instanceId }` }
 				type="search"
 				placeholder={ placeholder }
-				autoFocus
+				autoFocus={ autoFocus }
 				onChange={ ( event ) => onChange( event.target.value ) }
 				autoComplete="off"
 				value={ value || '' }

packages/edit-widgets/src/components/header/index.js

@@ -1,16 +1,12 @@
 /**
  * WordPress dependencies
  */
-import { __ } from '@wordpress/i18n';
-import { NavigableMenu } from '@wordpress/components';
-import {
-	BlockNavigationDropdown,
-	BlockToolbar,
-	Inserter,
-} from '@wordpress/block-editor';
+import { __, _x } from '@wordpress/i18n';
+import { Button, NavigableMenu } from '@wordpress/components';
+import { BlockNavigationDropdown, BlockToolbar } from '@wordpress/block-editor';
 import { PinnedItems } from '@wordpress/interface';
 import { useViewportMatch } from '@wordpress/compose';
-import { useSelect } from '@wordpress/data';
+import { plus } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -19,26 +15,32 @@ import SaveButton from '../save-button';
 import UndoButton from './undo-redo/undo';
 import RedoButton from './undo-redo/redo';
 
-const inserterToggleProps = { isPrimary: true };
-
-function Header( { isCustomizer } ) {
+function Header( {
+	isCustomizer,
+	isInserterOpen,
+	onInserterToggle,
+	rootClientId,
+} ) {
 	const isLargeViewport = useViewportMatch( 'medium' );
-	const rootClientId = useSelect( ( select ) => {
-		const { getBlockRootClientId, getBlockSelectionEnd } = select(
-			'core/block-editor'
-		);
-		return getBlockRootClientId( getBlockSelectionEnd() );
-	}, [] );
 
 	return (
 		<>
 			<div className="edit-widgets-header">
 				<NavigableMenu>
-					<Inserter
-						position="bottom right"
-						showInserterHelpPanel
-						toggleProps={ inserterToggleProps }
-						rootClientId={ rootClientId }
+					<Button
+						icon={ plus }
+						label={ _x(
+							'Add block',
+							'Generic label for block inserter button'
+						) }
+						tooltipPosition="bottom"
+						onClick={ onInserterToggle }
+						className="block-editor-inserter__toggle"
+						aria-haspopup={ 'true' }
+						aria-expanded={ isInserterOpen }
+						disabled={ ! rootClientId }
+						isPressed={ isInserterOpen }
+						isPrimary
 					/>
 					<UndoButton />
 					<RedoButton />

packages/edit-widgets/src/components/layout/index.js

@@ -1,9 +1,17 @@
 /**
  * WordPress dependencies
  */
-import { Popover } from '@wordpress/components';
-import { useSelect } from '@wordpress/data';
+import { Button, Popover } from '@wordpress/components';
+import { useSelect, useDispatch } from '@wordpress/data';
 import { InterfaceSkeleton, ComplementaryArea } from '@wordpress/interface';
+import { close } from '@wordpress/icons';
+import { useState, useEffect } from '@wordpress/element';
+import { __experimentalLibrary as Library } from '@wordpress/block-editor';
+import { useViewportMatch } from '@wordpress/compose';
+/**
+ * Internal dependencies
+ */
+import { buildWidgetAreasPostId, KIND, POST_TYPE } from '../../store/utils';
 
 /**
  * Internal dependencies
@@ -14,18 +22,101 @@ import Sidebar from '../sidebar';
 import WidgetAreasBlockEditorContent from '../widget-areas-block-editor-content';
 
 function Layout( { blockEditorSettings } ) {
+	const isMobileViewport = useViewportMatch( 'medium', '<' );
 	const hasSidebarEnabled = useSelect(
 		( select ) =>
 			!! select( 'core/interface' ).getActiveComplementaryArea(
 				'core/edit-widgets'
 			)
 	);
+	const { disableComplementaryArea } = useDispatch( 'core/interface' );
+	const disableSidebar = () => {
+		disableComplementaryArea( 'core/edit-widgets' );
+	};
+
+	const rootClientId = useSelect( ( select ) => {
+		const { getBlockRootClientId, getBlockSelectionEnd } = select(
+			'core/block-editor'
+		);
+		const selectedRootId = getBlockRootClientId( getBlockSelectionEnd() );
+		if ( selectedRootId ) {
+			return selectedRootId;
+		}
+
+		// Default to the first widget area
+		const { getEntityRecord } = select( 'core' );
+		const widgetAreasPost = getEntityRecord(
+			KIND,
+			POST_TYPE,
+			buildWidgetAreasPostId()
+		);
+		if ( widgetAreasPost ) {
+			return widgetAreasPost?.blocks[ 0 ]?.clientId;
+		}
+	}, [] );
+
+	const [ isInserterOpened, setIsInserterOpened ] = useState( true );
+	// Make sure that either inserter or sidebar are visible, but not both at the same time:
+	useEffect( () => {
+		if ( isInserterOpened ) {
+			disableSidebar();
+		}
+	}, [ isInserterOpened ] );
+	useEffect( () => {
+		if ( hasSidebarEnabled ) {
+			setIsInserterOpened( false );
+		}
+	}, [ hasSidebarEnabled ] );
 	return (
 		<WidgetAreasBlockEditorProvider
 			blockEditorSettings={ blockEditorSettings }
 		>
 			<InterfaceSkeleton
-				header={ <Header /> }
+				header={
+					<Header
+						isInserterOpen={ isInserterOpened }
+						onInserterToggle={ () => {
+							if ( ! isInserterOpened && hasSidebarEnabled ) {
+								disableSidebar();
+							}
+							setIsInserterOpened( ! isInserterOpened );
+						} }
+						rootClientId={ rootClientId }
+					/>
+				}
+				leftSidebar={
+					isInserterOpened && (
+						<div
+							className="edit-widgets-layout__inserter-panel-popover-wrapper"
+							onClose={ () => setIsInserterOpened( false ) }
+						>
+							<div className="edit-widgets-layout__inserter-panel">
+								<div className="edit-widgets-layout__inserter-panel-header">
+									<Button
+										icon={ close }
+										onClick={ () =>
+											setIsInserterOpened( false )
+										}
+									/>
+								</div>
+								<div className="edit-widgets-layout__inserter-panel-content">
+									<Library
+										// eslint-disable-next-line jsx-a11y/no-autofocus
+										autoFocus={ false }
+										rootClientId={ rootClientId }
+										showMostUsedBlocks={ false }
+										showInserterHelpPanel
+										onSelect={ () => {
+											if ( isMobileViewport ) {
+												setIsInserterOpened( false );
+											}
+										} }
+									/>
+								</div>
+							</div>
+						</div>
+					)
+				}
 				sidebar={
 					hasSidebarEnabled && (
 						<ComplementaryArea.Slot scope="core/edit-widgets" />

packages/edit-widgets/src/style.scss

@@ -63,5 +63,15 @@ body.gutenberg_page_gutenberg-widgets {
 	display: none;
 }
 
+.edit-widgets-layout__inserter-panel-header {
+	padding-top: $grid-unit-10;
+	padding-right: $grid-unit-10;
+	display: flex;
+	justify-content: flex-end;
+
+	@include break-medium() {
+		display: none;
+	}
+}
 
 @include wordpress-admin-schemes();