Unregister default block in customizer to be able to empty widget are…

…as (#32979)

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();
 	}
 }

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 } />;
+}

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>