Replace block navigation dropdown (#164)

* Replace block navigation dropdown

Use a local version as the core one is deprecated and moving to a sidebar only

* Add style of TOC

src/components/block-editor-toolbar/block-navigation/index.js

@@ -0,0 +1,51 @@
+/**
+ * WordPress dependencies
+ */
+import { Button, Dropdown } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { useSelect } from '@wordpress/data';
+import { listView } from '@wordpress/icons';
+import { store as blockEditorStore, ListView } from '@wordpress/block-editor';
+import { forwardRef } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import './style.scss';
+
+function BlockNavigationDropdown( { isDisabled, ...props }, ref ) {
+	const hasBlocks = useSelect( ( select ) => !! select( blockEditorStore ).getBlockCount(), [] );
+	const isEnabled = hasBlocks && ! isDisabled;
+
+	return (
+		<Dropdown
+			contentClassName="block-editor-block-navigation__popover"
+			position="bottom right"
+			renderToggle={ ( { isOpen, onToggle } ) => (
+				<Button
+					{ ...props }
+					ref={ ref }
+					icon={ listView }
+					aria-expanded={ isOpen }
+					aria-haspopup="true"
+					onClick={ isEnabled ? onToggle : undefined }
+					/* translators: button label text should, if possible, be under 16 characters. */
+					label={ __( 'List view' ) }
+					className="block-editor-block-navigation"
+					aria-disabled={ ! isEnabled }
+				/>
+			) }
+			renderContent={ () => (
+				<div className="block-editor-block-navigation__container">
+					<p className="block-editor-block-navigation__label">
+						{ __( 'List view' ) }
+					</p>
+
+					<ListView />
+				</div>
+			) }
+		/>
+	);
+}
+
+export default forwardRef( BlockNavigationDropdown );

src/components/block-editor-toolbar/block-navigation/style.scss

@@ -0,0 +1,78 @@
+@import '@wordpress/base-styles/_colors';
+@import '@wordpress/base-styles/_variables';
+@import '@wordpress/base-styles/_mixins';
+@import '@wordpress/base-styles/_breakpoints';
+@import '@wordpress/base-styles/_animations';
+@import '@wordpress/base-styles/_z-index';
+
+.table-of-contents__popover.components-popover .components-popover__content {
+	min-width: 380px;
+}
+
+.components-popover.table-of-contents__popover {
+	z-index: z-index(".components-popover.table-of-contents__popover");
+}
+
+.table-of-contents__popover {
+	.components-popover__content {
+		padding: $grid-unit-20;
+
+		@include break-small {
+			max-height: calc(100vh - 120px);
+			overflow-y: auto;
+		}
+	}
+
+	hr {
+		margin: 10px -16px 0;
+	}
+}
+
+.table-of-contents__wrapper:focus::before {
+	content: "";
+	display: block;
+	position: absolute;
+	top: 0;
+	right: 0;
+	bottom: 0;
+	left: 0;
+	box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+	pointer-events: none;
+}
+
+.table-of-contents__counts {
+	display: flex;
+	flex-wrap: wrap;
+	margin: 0;
+	margin-top: -$grid-unit-10;
+}
+
+.table-of-contents__count {
+	flex-basis: 33%;
+	display: flex;
+	flex-direction: column;
+	font-size: $default-font-size;
+	color: $gray-900;
+	padding-right: $grid-unit-10;
+	margin-bottom: 0;
+	margin-top: $grid-unit-10;
+
+	&:nth-child(4n) {
+		padding-right: 0;
+	}
+}
+
+.table-of-contents__number,
+.table-of-contents__popover .word-count {
+	font-size: 21px;
+	font-weight: 400;
+	line-height: 30px;
+	color: $gray-900;
+}
+
+.table-of-contents__title {
+	display: block;
+	margin-top: 20px;
+	font-size: 15px;
+	font-weight: 600;
+}

src/components/block-editor-toolbar/header-toolbar/index.js

@@ -5,12 +5,7 @@ import { useViewportMatch } from '@wordpress/compose';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { __, _x } from '@wordpress/i18n';
 import { ToolbarItem, Button, Popover } from '@wordpress/components';
-import {
-	NavigableToolbar,
-	BlockNavigationDropdown,
-	__experimentalLibrary as Library,
-	ToolSelector,
-} from '@wordpress/block-editor';
+import { NavigableToolbar, __experimentalLibrary as Library, ToolSelector } from '@wordpress/block-editor';
 import { TableOfContents } from '@wordpress/editor';
 import { plus, listView } from '@wordpress/icons';
 import { useRef, useCallback } from '@wordpress/element';
@@ -21,6 +16,7 @@ import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
  */
 import EditorHistoryRedo from './redo';
 import EditorHistoryUndo from './undo';
+import BlockNavigationDropdown from '../block-navigation';
 
 const preventDefault = ( event ) => {
 	event.preventDefault();