From a39cb7e742cfa60cd744e9a85f941cae5a765aea Mon Sep 17 00:00:00 2001
From: Kai Hao <kevin830726@gmail.com>
Date: Sat, 26 Jun 2021 12:46:02 +0800
Subject: [PATCH] Unregister default block in customizer to be able to empty
 widget areas (#32979)

---
 packages/block-editor/src/store/actions.js    | 12 +++++++
 .../src/components/block-appender/index.js    | 33 +++++++++++++++++++
 .../components/sidebar-block-editor/index.js  |  7 ++--
 3 files changed, 48 insertions(+), 4 deletions(-)
 create mode 100644 packages/customize-widgets/src/components/block-appender/index.js

diff --git a/packages/block-editor/src/store/actions.js b/packages/block-editor/src/store/actions.js
index ec1bb964de3c0a..3e79aab3045bf8 100644
--- a/packages/block-editor/src/store/actions.js
+++ b/packages/block-editor/src/store/actions.js
@@ -44,6 +44,18 @@ function* ensureDefaultBlock() {
 	// To avoid a focus loss when removing the last block, assure there is
 	// always a default block if the last of the blocks have been removed.
 	if ( count === 0 ) {
+		const { __unstableHasCustomAppender } = yield controls.select(
+			blockEditorStoreName,
+			'getSettings'
+		);
+
+		// If there's an custom appender, don't insert default block.
+		// We have to remember to manually move the focus elsewhere to
+		// prevent it from being lost though.
+		if ( __unstableHasCustomAppender ) {
+			return;
+		}
+
 		return yield insertDefaultBlock();
 	}
 }
diff --git a/packages/customize-widgets/src/components/block-appender/index.js b/packages/customize-widgets/src/components/block-appender/index.js
new file mode 100644
index 00000000000000..b8a068f4f697e9
--- /dev/null
+++ b/packages/customize-widgets/src/components/block-appender/index.js
@@ -0,0 +1,33 @@
+/**
+ * WordPress dependencies
+ */
+import { useRef, useEffect } from '@wordpress/element';
+import {
+	ButtonBlockAppender,
+	store as blockEditorStore,
+} from '@wordpress/block-editor';
+import { useSelect } from '@wordpress/data';
+
+export default function BlockAppender( props ) {
+	const ref = useRef();
+	const isBlocksListEmpty = useSelect(
+		( select ) => select( blockEditorStore ).getBlockCount() === 0
+	);
+
+	// Move the focus to the block appender to prevent focus from
+	// being lost when emptying the widget area.
+	useEffect( () => {
+		if ( isBlocksListEmpty && ref.current ) {
+			const { ownerDocument } = ref.current;
+
+			if (
+				! ownerDocument.activeElement ||
+				ownerDocument.activeElement === ownerDocument.body
+			) {
+				ref.current.focus();
+			}
+		}
+	}, [ isBlocksListEmpty ] );
+
+	return <ButtonBlockAppender { ...props } ref={ ref } />;
+}
diff --git a/packages/customize-widgets/src/components/sidebar-block-editor/index.js b/packages/customize-widgets/src/components/sidebar-block-editor/index.js
index 40592021000aff..3ba3fa0b1799a2 100644
--- a/packages/customize-widgets/src/components/sidebar-block-editor/index.js
+++ b/packages/customize-widgets/src/components/sidebar-block-editor/index.js
@@ -18,7 +18,6 @@ import {
 	WritingFlow,
 	BlockEditorKeyboardShortcuts,
 	__unstableBlockSettingsMenuFirstItem,
-	ButtonBlockAppender,
 } from '@wordpress/block-editor';
 import { uploadMedia } from '@wordpress/media-utils';
 
@@ -32,6 +31,7 @@ import SidebarEditorProvider from './sidebar-editor-provider';
 import { store as customizeWidgetsStore } from '../../store';
 import WelcomeGuide from '../welcome-guide';
 import KeyboardShortcuts from '../keyboard-shortcuts';
+import BlockAppender from '../block-appender';
 
 export default function SidebarBlockEditor( {
 	blockEditorSettings,
@@ -80,6 +80,7 @@ export default function SidebarBlockEditor( {
 			mediaUpload: mediaUploadBlockEditor,
 			hasFixedToolbar: isFixedToolbarActive,
 			keepCaretInsideBlock,
+			__unstableHasCustomAppender: true,
 		};
 	}, [
 		hasUploadPermissions,
@@ -117,9 +118,7 @@ export default function SidebarBlockEditor( {
 					<BlockSelectionClearer>
 						<WritingFlow>
 							<ObserveTyping>
-								<BlockList
-									renderAppender={ ButtonBlockAppender }
-								/>
+								<BlockList renderAppender={ BlockAppender } />
 							</ObserveTyping>
 						</WritingFlow>
 					</BlockSelectionClearer>