Add widgets customize inspector

packages/block-editor/src/components/block-inspector/style.scss

@@ -1,4 +1,15 @@
 .block-editor-block-inspector {
+	p {
+		margin-top: 0;
+	}
+
+	h2,
+	h3 {
+		font-size: $default-font-size;
+		color: $gray-900;
+		margin-bottom: 1.5em;
+	}
+
 	.components-base-control {
 		margin-bottom: #{ $grid-unit-30 };
 

packages/customize-widgets/package.json

@@ -20,11 +20,17 @@
 	"react-native": "src/index",
 	"dependencies": {
 		"@babel/runtime": "^7.11.2",
+		"@wordpress/a11y": "file:../a11y",
 		"@wordpress/block-editor": "file:../block-editor",
 		"@wordpress/block-library": "file:../block-library",
 		"@wordpress/blocks": "file:../blocks",
 		"@wordpress/components": "file:../components",
+		"@wordpress/compose": "file:../compose",
+		"@wordpress/data": "file:../data",
 		"@wordpress/element": "file:../element",
+		"@wordpress/i18n": "file:../i18n",
+		"@wordpress/icons": "file:../icons",
+		"classnames": "^2.2.6",
 		"lodash": "^4.17.19"
 	},
 	"publishConfig": {

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

@@ -0,0 +1,15 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { MenuItem } from '@wordpress/components';
+
+function BlockInspectorButton( { isInspectorOpened = false, ...props } ) {
+	const label = isInspectorOpened
+		? __( 'Hide more settings' )
+		: __( 'Show more settings' );
+
+	return <MenuItem { ...props }>{ label }</MenuItem>;
+}
+
+export default BlockInspectorButton;

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

@@ -0,0 +1,123 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * WordPress dependencies
+ */
+import { useEffect, useRef } from '@wordpress/element';
+import { useSelect } from '@wordpress/data';
+import {
+	BlockInspector,
+	store as blockEditorStore,
+} from '@wordpress/block-editor';
+import { __ } from '@wordpress/i18n';
+import { useInstanceId } from '@wordpress/compose';
+
+export { default as BlockInspectorButton } from './block-inspector-button';
+
+function InspectorSectionMeta( { closeInspector, inspectorTitleId } ) {
+	return (
+		<div className="customize-section-description-container section-meta">
+			<div className="customize-section-title">
+				{ /* Disable reason: We want to use the exiting style of the back button. */ }
+				<button // eslint-disable-line react/forbid-elements
+					type="button"
+					className="customize-section-back"
+					tabIndex="0"
+					onClick={ closeInspector }
+				>
+					<span className="screen-reader-text">Back</span>
+				</button>
+				<h3 id={ inspectorTitleId }>
+					<span className="customize-action">
+						{ __( 'Customizing ▸ Widgets' ) }
+					</span>
+					{ __( 'Block Settings' ) }
+				</h3>
+			</div>
+		</div>
+	);
+}
+
+export default function Inspector( {
+	isOpened,
+	isAnimating,
+	setInspectorOpenState,
+} ) {
+	const selectedBlockClientId = useSelect( ( select ) =>
+		select( blockEditorStore ).getSelectedBlockClientId()
+	);
+	const selectedBlockRef = useRef();
+
+	useEffect( () => {
+		selectedBlockRef.current = document.querySelector(
+			`[data-block="${ selectedBlockClientId }"]`
+		);
+	}, [ selectedBlockClientId ] );
+
+	const inspectorTitleId = useInstanceId(
+		Inspector,
+		'customize-widgets-block-settings'
+	);
+
+	useEffect( () => {
+		const openedSidebarSection = document.querySelector(
+			'.control-section-sidebar.open'
+		);
+
+		if ( isOpened ) {
+			openedSidebarSection.classList.add( 'is-inspector-open' );
+		} else {
+			openedSidebarSection.classList.remove( 'is-inspector-open' );
+		}
+
+		// In case the "transitionend" event for some reasons doesn't fire.
+		// (Like when it's set to "display: none", or when the transition property is removed.)
+		// See https://github.com/w3c/csswg-drafts/issues/3043
+		const timer = setTimeout( () => {
+			setInspectorOpenState( 'TRANSITION_END' );
+		}, 180 );
+
+		return () => {
+			openedSidebarSection.classList.remove( 'is-inspector-open' );
+			clearTimeout( timer );
+		};
+	}, [ isOpened, setInspectorOpenState ] );
+
+	return (
+		<div
+			role="region"
+			aria-labelledby={ inspectorTitleId }
+			className={ classnames(
+				'customize-pane-child',
+				'accordion-section-content',
+				'accordion-section',
+				'customize-widgets-layout__inspector',
+				{
+					open: isOpened,
+					// Needed to keep the inspector visible while closing.
+					busy: isAnimating,
+				}
+			) }
+			onTransitionEnd={ () => {
+				setInspectorOpenState( 'TRANSITION_END' );
+			} }
+		>
+			<InspectorSectionMeta
+				closeInspector={ () => {
+					setInspectorOpenState( 'CLOSE' );
+
+					// Wait a tick so that the block editor can transition back from being hidden.
+					window.requestAnimationFrame( () => {
+						selectedBlockRef.current?.focus();
+					} );
+				} }
+				inspectorTitleId={ inspectorTitleId }
+			/>
+
+			<BlockInspector />
+		</div>
+	);
+}

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

@@ -0,0 +1,25 @@
+// To override the style in block-editor/block-inspector.
+.block-editor-block-inspector h3 {
+	margin-bottom: 0;
+}
+
+#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;
+	}
+}
+
+#customize-theme-controls .customize-pane-child.accordion-section-content.control-section-sidebar.open {
+	transition: 0.18s transform cubic-bezier(0.645, 0.045, 0.355, 1); /* easeInOutCubic */
+
+	&.is-inspector-open {
+		transform: translateX(-100%);
+	}
+}

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

@@ -1,46 +1,115 @@
 /**
  * WordPress dependencies
  */
+import { useReducer, createPortal } from '@wordpress/element';
 import {
 	BlockEditorProvider,
 	BlockList,
 	BlockSelectionClearer,
 	ObserveTyping,
 	WritingFlow,
+	BlockEditorKeyboardShortcuts,
+	__experimentalBlockSettingsMenuFirstItem,
 } from '@wordpress/block-editor';
 import {
 	DropZoneProvider,
-	FocusReturnProvider,
 	SlotFillProvider,
+	Popover,
 } from '@wordpress/components';
 
 /**
  * Internal dependencies
  */
+import Inspector, { BlockInspectorButton } from '../inspector';
 import useSidebarBlockEditor from './use-sidebar-block-editor';
 
+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 } ) {
 	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'
+	);
 
 	return (
-		<SlotFillProvider>
-			<DropZoneProvider>
-				<FocusReturnProvider>
-					<BlockEditorProvider
-						value={ blocks }
-						onInput={ onInput }
-						onChange={ onChange }
-					>
-						<BlockSelectionClearer>
-							<WritingFlow>
-								<ObserveTyping>
-									<BlockList />
-								</ObserveTyping>
-							</WritingFlow>
-						</BlockSelectionClearer>
-					</BlockEditorProvider>
-				</FocusReturnProvider>
-			</DropZoneProvider>
-		</SlotFillProvider>
+		<>
+			<BlockEditorKeyboardShortcuts.Register />
+			<SlotFillProvider>
+				<DropZoneProvider>
+					<div hidden={ isInspectorOpened && ! isInspectorAnimating }>
+						<BlockEditorProvider
+							value={ blocks }
+							onInput={ onInput }
+							onChange={ onChange }
+							useSubRegistry={ false }
+						>
+							<BlockEditorKeyboardShortcuts />
+
+							<BlockSelectionClearer>
+								<WritingFlow>
+									<ObserveTyping>
+										<BlockList />
+									</ObserveTyping>
+								</WritingFlow>
+							</BlockSelectionClearer>
+						</BlockEditorProvider>
+
+						<Popover.Slot name="block-toolbar" />
+					</div>
+
+					{ createPortal(
+						<Inspector
+							isOpened={ isInspectorOpened }
+							isAnimating={ isInspectorAnimating }
+							setInspectorOpenState={ setInspectorOpenState }
+						/>,
+						parentContainer
+					) }
+
+					<__experimentalBlockSettingsMenuFirstItem>
+						{ ( { onClose } ) => (
+							<BlockInspectorButton
+								onClick={ () => {
+									// Open the inspector,
+									setInspectorOpenState( 'OPEN' );
+									// Then close the dropdown menu.
+									onClose();
+								} }
+							/>
+						) }
+					</__experimentalBlockSettingsMenuFirstItem>
+
+					{
+						// We have to portal this to the parent of both the editor and the inspector,
+						// so that the popovers will appear above both of them.
+						createPortal( <Popover.Slot />, parentContainer )
+					}
+				</DropZoneProvider>
+			</SlotFillProvider>
+		</>
 	);
 }