Edit Widgets: use list view sidebar instead of dropdown

WordPress · Oct 19, 2021 · b453e31 · b453e31
1 parent 853cf8f
commit b453e31
Show file tree

Hide file tree

Showing 16 changed files with 286 additions and 163 deletions.
diff --git a/packages/block-editor/README.md b/packages/block-editor/README.md
@@ -165,10 +165,6 @@ Undocumented declaration.
 
 Undocumented declaration.
 
-### BlockNavigationDropdown
-
-Undocumented declaration.
-
 ### BlockPreview
 
 BlockPreview renders a preview of a block or array of blocks.

diff --git a/packages/block-editor/src/components/block-navigation/dropdown.js b/packages/block-editor/src/components/block-navigation/dropdown.js
diff --git a/packages/block-editor/src/components/block-navigation/style.scss b/packages/block-editor/src/components/block-navigation/style.scss
diff --git a/packages/block-editor/src/components/index.js b/packages/block-editor/src/components/index.js
@@ -23,7 +23,6 @@ export {
 export { default as BlockColorsStyleSelector } from './color-style-selector';
 export { default as BlockEdit, useBlockEditContext } from './block-edit';
 export { default as BlockIcon } from './block-icon';
-export { default as BlockNavigationDropdown } from './block-navigation/dropdown';
 export { default as __experimentalBlockVariationPicker } from './block-variation-picker';
 export { default as __experimentalBlockPatternSetup } from './block-pattern-setup';
 export { default as __experimentalBlockVariationTransforms } from './block-variation-transforms';

diff --git a/packages/block-editor/src/style.scss b/packages/block-editor/src/style.scss
@@ -13,7 +13,6 @@
 @import "./components/block-draggable/style.scss";
 @import "./components/block-mobile-toolbar/style.scss";
 @import "./components/block-mover/style.scss";
-@import "./components/block-navigation/style.scss";
 @import "./components/block-parent-selector/style.scss";
 @import "./components/block-patterns-list/style.scss";
 @import "./components/block-preview/style.scss";

diff --git a/packages/edit-widgets/src/components/header/index.js b/packages/edit-widgets/src/components/header/index.js
@@ -5,13 +5,12 @@ import { useSelect, useDispatch } from '@wordpress/data';
 import { __, _x } from '@wordpress/i18n';
 import { Button, ToolbarItem, VisuallyHidden } from '@wordpress/components';
 import {
-	BlockNavigationDropdown,
 	NavigableToolbar,
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
 import { PinnedItems } from '@wordpress/interface';
-import { plus } from '@wordpress/icons';
-import { useRef } from '@wordpress/element';
+import { listView, plus } from '@wordpress/icons';
+import { useCallback, useRef } from '@wordpress/element';
 import { useViewportMatch } from '@wordpress/compose';
 
 /**
@@ -35,16 +34,23 @@ function Header() {
 			),
 		[ widgetAreaClientId ]
 	);
-	const isInserterOpened = useSelect(
-		( select ) => select( editWidgetsStore ).isInserterOpened(),
-		[]
-	);
-	const { setIsWidgetAreaOpen, setIsInserterOpened } = useDispatch(
-		editWidgetsStore
-	);
+	const { isInserterOpen, isListViewOpen } = useSelect( ( select ) => {
+		const { isInserterOpened, isListViewOpened } = select(
+			editWidgetsStore
+		);
+		return {
+			isInserterOpen: isInserterOpened(),
+			isListViewOpen: isListViewOpened(),
+		};
+	}, [] );
+	const {
+		setIsWidgetAreaOpen,
+		setIsInserterOpened,
+		setIsListViewOpened,
+	} = useDispatch( editWidgetsStore );
 	const { selectBlock } = useDispatch( blockEditorStore );
 	const handleClick = () => {
-		if ( isInserterOpened ) {
+		if ( isInserterOpen ) {
 			// Focusing the inserter button closes the inserter popover
 			inserterButton.current.focus();
 		} else {
@@ -63,6 +69,11 @@ function Header() {
 		}
 	};
 
+	const toggleListView = useCallback(
+		() => setIsListViewOpened( ! isListViewOpen ),
+		[ setIsListViewOpened, isListViewOpen ]
+	);
+
 	return (
 		<>
 			<div className="edit-widgets-header">
@@ -89,7 +100,7 @@ function Header() {
 							as={ Button }
 							className="edit-widgets-header-toolbar__inserter-toggle"
 							variant="primary"
-							isPressed={ isInserterOpened }
+							isPressed={ isInserterOpen }
 							onMouseDown={ ( event ) => {
 								event.preventDefault();
 							} }
@@ -106,7 +117,15 @@ function Header() {
 							<>
 								<UndoButton />
 								<RedoButton />
-								<ToolbarItem as={ BlockNavigationDropdown } />
+								<ToolbarItem
+									as={ Button }
+									className="edit-widgets-header-toolbar__list-view-toggle"
+									icon={ listView }
+									isPressed={ isListViewOpen }
+									/* translators: button label text should, if possible, be under 16 characters. */
+									label={ __( 'List View' ) }
+									onClick={ toggleListView }
+								/>
 							</>
 						) }
 					</NavigableToolbar>

diff --git a/packages/edit-widgets/src/components/layout/interface.js b/packages/edit-widgets/src/components/layout/interface.js
@@ -1,16 +1,8 @@
 /**
  * WordPress dependencies
  */
-import { Button } from '@wordpress/components';
-import {
-	__experimentalUseDialog as useDialog,
-	useViewportMatch,
-} from '@wordpress/compose';
-import { close } from '@wordpress/icons';
-import {
-	__experimentalLibrary as Library,
-	BlockBreadcrumb,
-} from '@wordpress/block-editor';
+import { useViewportMatch } from '@wordpress/compose';
+import { BlockBreadcrumb } from '@wordpress/block-editor';
 import { useEffect } from '@wordpress/element';
 import { useDispatch, useSelect } from '@wordpress/data';
 import {
@@ -26,8 +18,8 @@ import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
  */
 import Header from '../header';
 import WidgetAreasBlockEditorContent from '../widget-areas-block-editor-content';
-import useWidgetLibraryInsertionPoint from '../../hooks/use-widget-library-insertion-point';
 import { store as editWidgetsStore } from '../../store';
+import SecondarySidebar from '../secondary-sidebar';
 
 const interfaceLabels = {
 	/* translators: accessibility text for the widgets screen top bar landmark region. */
@@ -43,15 +35,16 @@ const interfaceLabels = {
 function Interface( { blockEditorSettings } ) {
 	const isMobileViewport = useViewportMatch( 'medium', '<' );
 	const isHugeViewport = useViewportMatch( 'huge', '>=' );
-	const { setIsInserterOpened, closeGeneralSidebar } = useDispatch(
-		editWidgetsStore
-	);
-	const { rootClientId, insertionIndex } = useWidgetLibraryInsertionPoint();
-
+	const {
+		setIsInserterOpened,
+		setIsListViewOpened,
+		closeGeneralSidebar,
+	} = useDispatch( editWidgetsStore );
 	const {
 		hasBlockBreadCrumbsEnabled,
 		hasSidebarEnabled,
 		isInserterOpened,
+		isListViewOpened,
 		previousShortcut,
 		nextShortcut,
 	} = useSelect(
@@ -60,6 +53,7 @@ function Interface( { blockEditorSettings } ) {
 				interfaceStore
 			).getActiveComplementaryArea( editWidgetsStore.name ),
 			isInserterOpened: !! select( editWidgetsStore ).isInserterOpened(),
+			isListViewOpened: !! select( editWidgetsStore ).isListViewOpened(),
 			hasBlockBreadCrumbsEnabled: select(
 				interfaceStore
 			).isFeatureActive( 'core/edit-widgets', 'showBlockBreadcrumbs' ),
@@ -79,47 +73,21 @@ function Interface( { blockEditorSettings } ) {
 	useEffect( () => {
 		if ( hasSidebarEnabled && ! isHugeViewport ) {
 			setIsInserterOpened( false );
+			setIsListViewOpened( false );
 		}
 	}, [ hasSidebarEnabled, isHugeViewport ] );
 
 	useEffect( () => {
-		if ( isInserterOpened && ! isHugeViewport ) {
+		if ( ( isInserterOpened || isListViewOpened ) && ! isHugeViewport ) {
 			closeGeneralSidebar();
 		}
-	}, [ isInserterOpened, isHugeViewport ] );
-
-	const [ inserterDialogRef, inserterDialogProps ] = useDialog( {
-		onClose: () => setIsInserterOpened( false ),
-	} );
+	}, [ isInserterOpened, isListViewOpened, isHugeViewport ] );
 
 	return (
 		<InterfaceSkeleton
 			labels={ interfaceLabels }
 			header={ <Header /> }
-			secondarySidebar={
-				isInserterOpened && (
-					<div
-						ref={ inserterDialogRef }
-						{ ...inserterDialogProps }
-						className="edit-widgets-layout__inserter-panel"
-					>
-						<div className="edit-widgets-layout__inserter-panel-header">
-							<Button
-								icon={ close }
-								onClick={ () => setIsInserterOpened( false ) }
-							/>
-						</div>
-						<div className="edit-widgets-layout__inserter-panel-content">
-							<Library
-								showInserterHelpPanel
-								shouldFocusBlock={ isMobileViewport }
-								rootClientId={ rootClientId }
-								__experimentalInsertionIndex={ insertionIndex }
-							/>
-						</div>
-					</div>
-				)
-			}
+			secondarySidebar={ <SecondarySidebar /> }
 			sidebar={
 				hasSidebarEnabled && (
 					<ComplementaryArea.Slot scope="core/edit-widgets" />

diff --git a/packages/edit-widgets/src/components/secondary-sidebar/index.js b/packages/edit-widgets/src/components/secondary-sidebar/index.js
@@ -0,0 +1,34 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+/**
+ * Internal dependencies
+ */
+import { store as editWidgetsStore } from '../../store';
+
+/**
+ * Internal dependencies
+ */
+import InserterSidebar from './inserter-sidebar';
+import ListViewSidebar from './list-view-sidebar';
+
+export default function SecondarySidebar() {
+	const { isInserterOpen, isListViewOpen } = useSelect( ( select ) => {
+		const { isInserterOpened, isListViewOpened } = select(
+			editWidgetsStore
+		);
+		return {
+			isInserterOpen: isInserterOpened(),
+			isListViewOpen: isListViewOpened(),
+		};
+	}, [] );
+
+	if ( isInserterOpen ) {
+		return <InserterSidebar />;
+	}
+	if ( isListViewOpen ) {
+		return <ListViewSidebar />;
+	}
+	return null;
+}