From faf22d83bb2da737a9f93ddb229d5e88661e0d49 Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Fri, 7 Aug 2020 00:06:32 +0100
Subject: [PATCH] Make the inserter behave as a popover

---
 .../components/header/header-toolbar/index.js | 15 +++++-
 .../edit-post/src/components/layout/index.js  | 49 +++++++++--------
 .../src/components/layout/popover-wrapper.js  | 53 +++++++++++++++++++
 3 files changed, 95 insertions(+), 22 deletions(-)
 create mode 100644 packages/edit-post/src/components/layout/popover-wrapper.js

diff --git a/packages/edit-post/src/components/header/header-toolbar/index.js b/packages/edit-post/src/components/header/header-toolbar/index.js
index 6c178f193ba162..b77fdc567814fd 100644
--- a/packages/edit-post/src/components/header/header-toolbar/index.js
+++ b/packages/edit-post/src/components/header/header-toolbar/index.js
@@ -20,8 +20,10 @@ import {
 	__experimentalToolbarItem as ToolbarItem,
 } from '@wordpress/components';
 import { plus } from '@wordpress/icons';
+import { useRef } from '@wordpress/element';
 
 function HeaderToolbar() {
+	const inserterButton = useRef();
 	const { setIsInserterOpened } = useDispatch( 'core/edit-post' );
 	const {
 		hasFixedToolbar,
@@ -72,11 +74,22 @@ function HeaderToolbar() {
 			aria-label={ toolbarAriaLabel }
 		>
 			<ToolbarItem
+				ref={ inserterButton }
 				as={ Button }
 				className="edit-post-header-toolbar__inserter-toggle"
 				isPrimary
 				isPressed={ isInserterOpened }
-				onClick={ () => setIsInserterOpened( ! isInserterOpened ) }
+				onMouseDown={ ( event ) => {
+					event.preventDefault();
+				} }
+				onClick={ () => {
+					if ( isInserterOpened ) {
+						// Focusing the inserter button closes the inserter popover
+						inserterButton.current.focus();
+					} else {
+						setIsInserterOpened( true );
+					}
+				} }
 				disabled={ ! isInserterEnabled }
 				icon={ plus }
 				label={ _x(
diff --git a/packages/edit-post/src/components/layout/index.js b/packages/edit-post/src/components/layout/index.js
index 11182f3e4a93d2..fafddf2a3c241b 100644
--- a/packages/edit-post/src/components/layout/index.js
+++ b/packages/edit-post/src/components/layout/index.js
@@ -50,6 +50,7 @@ import SettingsSidebar from '../sidebar/settings-sidebar';
 import MetaBoxes from '../meta-boxes';
 import WelcomeGuide from '../welcome-guide';
 import ActionsPanel from './actions-panel';
+import PopoverWrapper from './popover-wrapper';
 
 const interfaceLabels = {
 	leftSidebar: __( 'Block library' ),
@@ -178,29 +179,35 @@ function Layout() {
 					leftSidebar={
 						mode === 'visual' &&
 						isInserterOpened && (
-							<div className="edit-post-layout__inserter-panel">
-								<div className="edit-post-layout__inserter-panel-header">
-									<Button
-										icon={ close }
-										onClick={ () =>
-											setIsInserterOpened( false )
-										}
-									/>
-								</div>
-								<div className="edit-post-layout__inserter-panel-content">
-									<Library
-										showMostUsedBlocks={
-											showMostUsedBlocks
-										}
-										showInserterHelpPanel
-										onSelect={ () => {
-											if ( isMobileViewport ) {
-												setIsInserterOpened( false );
+							<PopoverWrapper
+								onClose={ () => setIsInserterOpened( false ) }
+							>
+								<div className="edit-post-layout__inserter-panel">
+									<div className="edit-post-layout__inserter-panel-header">
+										<Button
+											icon={ close }
+											onClick={ () =>
+												setIsInserterOpened( false )
+											}
+										/>
+									</div>
+									<div className="edit-post-layout__inserter-panel-content">
+										<Library
+											showMostUsedBlocks={
+												showMostUsedBlocks
 											}
-										} }
-									/>
+											showInserterHelpPanel
+											onSelect={ () => {
+												if ( isMobileViewport ) {
+													setIsInserterOpened(
+														false
+													);
+												}
+											} }
+										/>
+									</div>
 								</div>
-							</div>
+							</PopoverWrapper>
 						)
 					}
 					sidebar={
diff --git a/packages/edit-post/src/components/layout/popover-wrapper.js b/packages/edit-post/src/components/layout/popover-wrapper.js
new file mode 100644
index 00000000000000..c5bfe17dc1e816
--- /dev/null
+++ b/packages/edit-post/src/components/layout/popover-wrapper.js
@@ -0,0 +1,53 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	withConstrainedTabbing,
+	withFocusReturn,
+	withFocusOutside,
+} from '@wordpress/components';
+import { Component } from '@wordpress/element';
+import { ESCAPE } from '@wordpress/keycodes';
+
+function stopPropagation( event ) {
+	event.stopPropagation();
+}
+
+const DetectOutside = withFocusOutside(
+	class extends Component {
+		handleFocusOutside( event ) {
+			this.props.onFocusOutside( event );
+		}
+
+		render() {
+			return this.props.children;
+		}
+	}
+);
+
+const FocusManaged = withConstrainedTabbing(
+	withFocusReturn( ( { children } ) => children )
+);
+
+export default function PopoverWrapper( { onClose, children } ) {
+	// Event handlers
+	const maybeClose = ( event ) => {
+		// Close on escape
+		if ( event.keyCode === ESCAPE && onClose ) {
+			event.stopPropagation();
+			onClose();
+		}
+	};
+
+	// Disable reason: this stops certain events from propagating outside of the component.
+	//   - onMouseDown is disabled as this can cause interactions with other DOM elements
+	/* eslint-disable jsx-a11y/no-static-element-interactions */
+	return (
+		<div onKeyDown={ maybeClose } onMouseDown={ stopPropagation }>
+			<DetectOutside onFocusOutside={ onClose }>
+				<FocusManaged>{ children }</FocusManaged>
+			</DetectOutside>
+		</div>
+	);
+	/* eslint-enable jsx-a11y/no-static-element-interactions */
+}