Refactor inspector to use core's controls

packages/customize-widgets/src/components/block-inspector-button/index.js

@@ -0,0 +1,38 @@
+/**
+ * WordPress dependencies
+ */
+import { useMemo } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import { MenuItem } from '@wordpress/components';
+import { useSelect } from '@wordpress/data';
+import { store as blockEditorStore } from '@wordpress/block-editor';
+
+function BlockInspectorButton( { inspector, closeMenu, ...props } ) {
+	const selectedBlockClientId = useSelect(
+		( select ) => select( blockEditorStore ).getSelectedBlockClientId(),
+		[]
+	);
+
+	const selectedBlock = useMemo(
+		() => document.getElementById( `block-${ selectedBlockClientId }` ),
+		[ selectedBlockClientId ]
+	);
+
+	return (
+		<MenuItem
+			onClick={ () => {
+				// Open the inspector.
+				inspector.open( {
+					returnFocusWhenClose: selectedBlock,
+				} );
+				// Then close the dropdown menu.
+				closeMenu();
+			} }
+			{ ...props }
+		>
+			{ __( 'Show more settings' ) }
+		</MenuItem>
+	);
+}
+
+export default BlockInspectorButton;

packages/customize-widgets/src/components/block-inspector-button/style.scss

@@ -0,0 +1,21 @@
+#customize-theme-controls .customize-pane-child.accordion-section-content.customize-widgets-layout__inspector {
+	background: $white;
+	box-sizing: border-box;
+
+	* {
+		box-sizing: inherit;
+	}
+
+	.block-editor-block-inspector {
+		margin: -$grid-unit-15;
+
+		// To override the style in block-editor/block-inspector.
+		h3 {
+			margin-bottom: 0;
+		}
+	}
+}
+
+#customize-theme-controls .customize-pane-child.control-section-sidebar.is-sub-section-open {
+	transform: translateX(-100%);
+}

packages/customize-widgets/src/components/sidebar-block-editor/index.js

@@ -1,11 +1,12 @@
 /**
  * WordPress dependencies
  */
-import { useReducer, createPortal, useMemo } from '@wordpress/element';
+import { createPortal, useMemo } from '@wordpress/element';
 import {
 	BlockEditorProvider,
 	BlockList,
 	BlockSelectionClearer,
+	BlockInspector,
 	ObserveTyping,
 	WritingFlow,
 	BlockEditorKeyboardShortcuts,
@@ -20,39 +21,13 @@ import {
 /**
  * Internal dependencies
  */
-import Inspector, { BlockInspectorButton } from '../inspector';
+import BlockInspectorButton from '../block-inspector-button';
 import Header from '../header';
 import useSidebarBlockEditor from './use-sidebar-block-editor';
 import useInserter from '../inserter/use-inserter';
 
-const inspectorOpenStateReducer = ( state, action ) => {
-	switch ( action ) {
-		case 'OPEN':
-			return {
-				open: true,
-				busy: true,
-			};
-		case 'TRANSITION_END':
-			return {
-				...state,
-				busy: false,
-			};
-		case 'CLOSE':
-			return {
-				open: false,
-				busy: true,
-			};
-		default:
-			throw new Error( 'Unexpected action' );
-	}
-};
-
-export default function SidebarBlockEditor( { sidebar, inserter } ) {
+export default function SidebarBlockEditor( { sidebar, inserter, inspector } ) {
 	const [ blocks, onInput, onChange ] = useSidebarBlockEditor( sidebar );
-	const [
-		{ open: isInspectorOpened, busy: isInspectorAnimating },
-		setInspectorOpenState,
-	] = useReducer( inspectorOpenStateReducer, { open: false, busy: false } );
 	const parentContainer = document.getElementById(
 		'customize-theme-controls'
 	);
@@ -69,52 +44,46 @@ export default function SidebarBlockEditor( { sidebar, inserter } ) {
 			<BlockEditorKeyboardShortcuts.Register />
 			<SlotFillProvider>
 				<DropZoneProvider>
-					<div hidden={ isInspectorOpened && ! isInspectorAnimating }>
-						<BlockEditorProvider
-							value={ blocks }
-							onInput={ onInput }
-							onChange={ onChange }
-							settings={ settings }
-							useSubRegistry={ false }
-						>
-							<BlockEditorKeyboardShortcuts />
+					<BlockEditorProvider
+						value={ blocks }
+						onInput={ onInput }
+						onChange={ onChange }
+						settings={ settings }
+						useSubRegistry={ false }
+					>
+						<BlockEditorKeyboardShortcuts />
 
-							<Header
-								inserter={ inserter }
-								isInserterOpened={ isInserterOpened }
-								setIsInserterOpened={ setIsInserterOpened }
-							/>
+						<Header
+							inserter={ inserter }
+							isInserterOpened={ isInserterOpened }
+							setIsInserterOpened={ setIsInserterOpened }
+						/>
 
-							<BlockSelectionClearer>
-								<WritingFlow>
-									<ObserveTyping>
-										<BlockList />
-									</ObserveTyping>
-								</WritingFlow>
-							</BlockSelectionClearer>
-						</BlockEditorProvider>
+						<BlockSelectionClearer>
+							<WritingFlow>
+								<ObserveTyping>
+									<BlockList />
+								</ObserveTyping>
+							</WritingFlow>
+						</BlockSelectionClearer>
+					</BlockEditorProvider>
 
-						<Popover.Slot name="block-toolbar" />
-					</div>
+					<Popover.Slot name="block-toolbar" />
 
 					{ createPortal(
-						<Inspector
-							isOpened={ isInspectorOpened }
-							isAnimating={ isInspectorAnimating }
-							setInspectorOpenState={ setInspectorOpenState }
-						/>,
-						parentContainer
+						// This is a temporary hack to prevent button component inside <BlockInspector>
+						// from submitting form when type="button" is not specified.
+						<form onSubmit={ ( event ) => event.preventDefault() }>
+							<BlockInspector />
+						</form>,
+						inspector.contentContainer[ 0 ]
 					) }
 
 					<__experimentalBlockSettingsMenuFirstItem>
 						{ ( { onClose } ) => (
 							<BlockInspectorButton
-								onClick={ () => {
-									// Open the inspector,
-									setInspectorOpenState( 'OPEN' );
-									// Then close the dropdown menu.
-									onClose();
-								} }
+								inspector={ inspector }
+								closeMenu={ onClose }
 							/>
 						) }
 					</__experimentalBlockSettingsMenuFirstItem>