From d62c9e52946464dad6cf1b4f7b145bcba906f752 Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Mon, 26 Apr 2021 12:45:15 +0100
Subject: [PATCH 01/11] Move block manager to the preferences modal

---
 packages/base-styles/_z-index.scss            |  2 +-
 .../category.js                               |  7 ++-
 .../checklist.js                              |  4 +-
 .../manager.js => block-manager/index.js}     | 10 ++--
 .../show-all.js                               |  6 +--
 .../style.scss                                | 26 ++++-----
 .../edit-post/src/components/layout/index.js  |  2 -
 .../components/manage-blocks-modal/index.js   | 54 -------------------
 .../src/components/preferences-modal/index.js | 12 +++++
 .../components/preferences-modal/style.scss   |  3 ++
 packages/edit-post/src/plugins/index.js       |  2 -
 .../plugins/manage-blocks-menu-item/index.js  | 31 -----------
 packages/edit-post/src/style.scss             |  2 +-
 13 files changed, 43 insertions(+), 118 deletions(-)
 rename packages/edit-post/src/components/{manage-blocks-modal => block-manager}/category.js (92%)
 rename packages/edit-post/src/components/{manage-blocks-modal => block-manager}/checklist.js (85%)
 rename packages/edit-post/src/components/{manage-blocks-modal/manager.js => block-manager/index.js} (89%)
 rename packages/edit-post/src/components/{manage-blocks-modal => block-manager}/show-all.js (75%)
 rename packages/edit-post/src/components/{manage-blocks-modal => block-manager}/style.scss (70%)
 delete mode 100644 packages/edit-post/src/components/manage-blocks-modal/index.js
 delete mode 100644 packages/edit-post/src/plugins/manage-blocks-menu-item/index.js

diff --git a/packages/base-styles/_z-index.scss b/packages/base-styles/_z-index.scss
index 80794990713ff3..8b7e535cb8e624 100644
--- a/packages/base-styles/_z-index.scss
+++ b/packages/base-styles/_z-index.scss
@@ -163,7 +163,7 @@ $z-layers: (
 	".components-resizable-box__corner-handle": 2,
 
 	// Make sure block manager sticky category titles appear above the options
-	".edit-post-manage-blocks-modal__category-title": 1,
+	".edit-post-block-manager__category-title": 1,
 
 	// Needs to be higher than any other element as this is an overlay to catch all events
 	".components-tooltip .event-catcher": 100002,
diff --git a/packages/edit-post/src/components/manage-blocks-modal/category.js b/packages/edit-post/src/components/block-manager/category.js
similarity index 92%
rename from packages/edit-post/src/components/manage-blocks-modal/category.js
rename to packages/edit-post/src/components/block-manager/category.js
index 3583f47b9e7211..217a42e610f16c 100644
--- a/packages/edit-post/src/components/manage-blocks-modal/category.js
+++ b/packages/edit-post/src/components/block-manager/category.js
@@ -46,8 +46,7 @@ function BlockManagerCategory( {
 		...hiddenBlockTypes
 	);
 
-	const titleId =
-		'edit-post-manage-blocks-modal__category-title-' + instanceId;
+	const titleId = 'edit-post-block-manager__category-title-' + instanceId;
 
 	const isAllChecked = checkedBlockNames.length === filteredBlockTypes.length;
 
@@ -64,12 +63,12 @@ function BlockManagerCategory( {
 		<div
 			role="group"
 			aria-labelledby={ titleId }
-			className="edit-post-manage-blocks-modal__category"
+			className="edit-post-block-manager__category"
 		>
 			<CheckboxControl
 				checked={ isAllChecked }
 				onChange={ toggleAllVisible }
-				className="edit-post-manage-blocks-modal__category-title"
+				className="edit-post-block-manager__category-title"
 				aria-checked={ ariaChecked }
 				label={ <span id={ titleId }>{ title }</span> }
 			/>
diff --git a/packages/edit-post/src/components/manage-blocks-modal/checklist.js b/packages/edit-post/src/components/block-manager/checklist.js
similarity index 85%
rename from packages/edit-post/src/components/manage-blocks-modal/checklist.js
rename to packages/edit-post/src/components/block-manager/checklist.js
index ab561b071fbb4c..bdbc304e2d1bff 100644
--- a/packages/edit-post/src/components/manage-blocks-modal/checklist.js
+++ b/packages/edit-post/src/components/block-manager/checklist.js
@@ -11,11 +11,11 @@ import { CheckboxControl } from '@wordpress/components';
 
 function BlockTypesChecklist( { blockTypes, value, onItemChange } ) {
 	return (
-		<ul className="edit-post-manage-blocks-modal__checklist">
+		<ul className="edit-post-block-manager__checklist">
 			{ blockTypes.map( ( blockType ) => (
 				<li
 					key={ blockType.name }
-					className="edit-post-manage-blocks-modal__checklist-item"
+					className="edit-post-block-manager__checklist-item"
 				>
 					<CheckboxControl
 						label={
diff --git a/packages/edit-post/src/components/manage-blocks-modal/manager.js b/packages/edit-post/src/components/block-manager/index.js
similarity index 89%
rename from packages/edit-post/src/components/manage-blocks-modal/manager.js
rename to packages/edit-post/src/components/block-manager/index.js
index efa256f4975c0c..58c349b3fb628f 100644
--- a/packages/edit-post/src/components/manage-blocks-modal/manager.js
+++ b/packages/edit-post/src/components/block-manager/index.js
@@ -39,16 +39,16 @@ function BlockManager( {
 	);
 
 	return (
-		<div className="edit-post-manage-blocks-modal__content">
+		<div className="edit-post-block-manager__content">
 			<TextControl
 				type="search"
 				label={ __( 'Search for a block' ) }
 				value={ search }
 				onChange={ ( nextSearch ) => setSearch( nextSearch ) }
-				className="edit-post-manage-blocks-modal__search"
+				className="edit-post-block-manager__search"
 			/>
 			{ !! numberOfHiddenBlocks && (
-				<div className="edit-post-manage-blocks-modal__disabled-blocks-count">
+				<div className="edit-post-block-manager__disabled-blocks-count">
 					{ sprintf(
 						/* translators: %d: number of blocks. */
 						_n(
@@ -64,10 +64,10 @@ function BlockManager( {
 				tabIndex="0"
 				role="region"
 				aria-label={ __( 'Available block types' ) }
-				className="edit-post-manage-blocks-modal__results"
+				className="edit-post-block-manager__results"
 			>
 				{ blockTypes.length === 0 && (
-					<p className="edit-post-manage-blocks-modal__no-results">
+					<p className="edit-post-block-manager__no-results">
 						{ __( 'No blocks found.' ) }
 					</p>
 				) }
diff --git a/packages/edit-post/src/components/manage-blocks-modal/show-all.js b/packages/edit-post/src/components/block-manager/show-all.js
similarity index 75%
rename from packages/edit-post/src/components/manage-blocks-modal/show-all.js
rename to packages/edit-post/src/components/block-manager/show-all.js
index d024dfecca208f..e3b6ef4b0e72a1 100644
--- a/packages/edit-post/src/components/manage-blocks-modal/show-all.js
+++ b/packages/edit-post/src/components/block-manager/show-all.js
@@ -7,13 +7,13 @@ import { __ } from '@wordpress/i18n';
 
 export default function BlockManagerShowAll( { checked, onChange } ) {
 	const instanceId = useInstanceId( BlockManagerShowAll );
-	const id = 'edit-post-manage-blocks-modal__show-all-' + instanceId;
+	const id = 'edit-post-block-manager__show-all-' + instanceId;
 
 	return (
-		<div className="edit-post-manage-blocks-modal__show-all">
+		<div className="edit-post-block-manager__show-all">
 			<label
 				htmlFor={ id }
-				className="edit-post-manage-blocks-modal__show-all-label"
+				className="edit-post-block-manager__show-all-label"
 			>
 				{
 					/* translators: Checkbox toggle label */
diff --git a/packages/edit-post/src/components/manage-blocks-modal/style.scss b/packages/edit-post/src/components/block-manager/style.scss
similarity index 70%
rename from packages/edit-post/src/components/manage-blocks-modal/style.scss
rename to packages/edit-post/src/components/block-manager/style.scss
index d9927955a4a3b7..2abe720fb815f6 100644
--- a/packages/edit-post/src/components/manage-blocks-modal/style.scss
+++ b/packages/edit-post/src/components/block-manager/style.scss
@@ -1,10 +1,10 @@
-.edit-post-manage-blocks-modal__no-results {
+.edit-post-block-manager__no-results {
 	font-style: italic;
 	padding: 24px 0;
 	text-align: center;
 }
 
-.edit-post-manage-blocks-modal__search {
+.edit-post-block-manager__search {
 	margin: $grid-unit-20 0;
 
 	.components-base-control__field {
@@ -21,7 +21,7 @@
 	}
 }
 
-.edit-post-manage-blocks-modal__disabled-blocks-count {
+.edit-post-block-manager__disabled-blocks-count {
 	border: 1px solid $gray-300;
 	border-width: 1px 0;
 	margin-left: -$grid-unit-40;
@@ -33,16 +33,16 @@
 	background-color: $gray-100;
 }
 
-.edit-post-manage-blocks-modal__category {
+.edit-post-block-manager__category {
 	margin: 0 0 2rem 0;
 }
 
-.edit-post-manage-blocks-modal__category-title {
+.edit-post-block-manager__category-title {
 	position: sticky;
 	top: 0;
 	padding: $grid-unit-20 0;
 	background-color: $white;
-	z-index: z-index(".edit-post-manage-blocks-modal__category-title");
+	z-index: z-index(".edit-post-block-manager__category-title");
 
 	.components-base-control__field {
 		margin-bottom: 0;
@@ -54,20 +54,20 @@
 	}
 }
 
-.edit-post-manage-blocks-modal__show-all {
+.edit-post-block-manager__show-all {
 	margin-right: $grid-unit-10;
 }
 
-.edit-post-manage-blocks-modal__checklist {
+.edit-post-block-manager__checklist {
 	margin-top: 0;
 }
 
-.edit-post-manage-blocks-modal__category-title,
-.edit-post-manage-blocks-modal__checklist-item {
+.edit-post-block-manager__category-title,
+.edit-post-block-manager__checklist-item {
 	border-bottom: 1px solid $gray-300;
 }
 
-.edit-post-manage-blocks-modal__checklist-item {
+.edit-post-block-manager__checklist-item {
 	margin-bottom: 0;
 	padding-left: $grid-unit-20;
 
@@ -95,11 +95,11 @@
 	}
 }
 
-.edit-post-manage-blocks-modal__results {
+.edit-post-block-manager__results {
 	border-top: $border-width solid $gray-300;
 }
 
 // Remove the top border from results when adjacent to the disabled block count
-.edit-post-manage-blocks-modal__disabled-blocks-count + .edit-post-manage-blocks-modal__results {
+.edit-post-block-manager__disabled-blocks-count + .edit-post-block-manager__results {
 	border-top-width: 0;
 }
diff --git a/packages/edit-post/src/components/layout/index.js b/packages/edit-post/src/components/layout/index.js
index aaf26266249a28..e931a08402bbc1 100644
--- a/packages/edit-post/src/components/layout/index.js
+++ b/packages/edit-post/src/components/layout/index.js
@@ -36,7 +36,6 @@ import TextEditor from '../text-editor';
 import VisualEditor from '../visual-editor';
 import EditPostKeyboardShortcuts from '../keyboard-shortcuts';
 import KeyboardShortcutHelpModal from '../keyboard-shortcut-help-modal';
-import ManageBlocksModal from '../manage-blocks-modal';
 import PreferencesModal from '../preferences-modal';
 import BrowserURL from '../browser-url';
 import Header from '../header';
@@ -273,7 +272,6 @@ function Layout( { styles } ) {
 					next: nextShortcut,
 				} }
 			/>
-			<ManageBlocksModal />
 			<PreferencesModal />
 			<KeyboardShortcutHelpModal />
 			<WelcomeGuide />
diff --git a/packages/edit-post/src/components/manage-blocks-modal/index.js b/packages/edit-post/src/components/manage-blocks-modal/index.js
deleted file mode 100644
index 9bba595ed0be6d..00000000000000
--- a/packages/edit-post/src/components/manage-blocks-modal/index.js
+++ /dev/null
@@ -1,54 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { Modal } from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
-import { withSelect, withDispatch } from '@wordpress/data';
-import { compose } from '@wordpress/compose';
-
-/**
- * Internal dependencies
- */
-import BlockManager from './manager';
-import { store as editPostStore } from '../../store';
-
-/**
- * Unique identifier for Manage Blocks modal.
- *
- * @type {string}
- */
-const MODAL_NAME = 'edit-post/manage-blocks';
-
-export function ManageBlocksModal( { isActive, closeModal } ) {
-	if ( ! isActive ) {
-		return null;
-	}
-
-	return (
-		<Modal
-			className="edit-post-manage-blocks-modal"
-			title={ __( 'Block Manager' ) }
-			closeLabel={ __( 'Close' ) }
-			onRequestClose={ closeModal }
-		>
-			<BlockManager />
-		</Modal>
-	);
-}
-
-export default compose( [
-	withSelect( ( select ) => {
-		const { isModalActive } = select( editPostStore );
-
-		return {
-			isActive: isModalActive( MODAL_NAME ),
-		};
-	} ),
-	withDispatch( ( dispatch ) => {
-		const { closeModal } = dispatch( editPostStore );
-
-		return {
-			closeModal,
-		};
-	} ),
-] )( ManageBlocksModal );
diff --git a/packages/edit-post/src/components/preferences-modal/index.js b/packages/edit-post/src/components/preferences-modal/index.js
index b5ae06d9a001ff..f2bc84cb53da3b 100644
--- a/packages/edit-post/src/components/preferences-modal/index.js
+++ b/packages/edit-post/src/components/preferences-modal/index.js
@@ -39,6 +39,7 @@ import {
 } from './options';
 import MetaBoxesSection from './meta-boxes-section';
 import { store as editPostStore } from '../../store';
+import BlockManager from '../block-manager';
 
 const MODAL_NAME = 'edit-post/preferences';
 const PREFERENCES_MENU = 'preferences-menu';
@@ -143,6 +144,17 @@ export default function PreferencesModal() {
 					</Section>
 				),
 			},
+			{
+				name: 'block-manager',
+				tabLabel: __( 'Block Manager' ),
+				content: (
+					<Section
+						title={ __( 'Show/Hide blocks from the inserter.' ) }
+					>
+						<BlockManager />
+					</Section>
+				),
+			},
 			{
 				name: 'blocks',
 				tabLabel: __( 'Blocks' ),
diff --git a/packages/edit-post/src/components/preferences-modal/style.scss b/packages/edit-post/src/components/preferences-modal/style.scss
index 2bd28bbf90edc7..b8925efe1b158a 100644
--- a/packages/edit-post/src/components/preferences-modal/style.scss
+++ b/packages/edit-post/src/components/preferences-modal/style.scss
@@ -65,6 +65,9 @@
 		display: flex;
 		flex-direction: row;
 		.components-tab-panel__tabs {
+			position: sticky;
+			top: 90px;
+			align-self: start;
 			width: 160px;
 			.components-tab-panel__tabs-item {
 				border-radius: $radius-block-ui;
diff --git a/packages/edit-post/src/plugins/index.js b/packages/edit-post/src/plugins/index.js
index 2c9acb703d41d9..94a5d4c98396cf 100644
--- a/packages/edit-post/src/plugins/index.js
+++ b/packages/edit-post/src/plugins/index.js
@@ -11,7 +11,6 @@ import { addQueryArgs } from '@wordpress/url';
  * Internal dependencies
  */
 import CopyContentMenuItem from './copy-content-menu-item';
-import ManageBlocksMenuItem from './manage-blocks-menu-item';
 import KeyboardShortcutsHelpMenuItem from './keyboard-shortcuts-help-menu-item';
 import ToolsMoreMenuGroup from '../components/header/tools-more-menu-group';
 import WelcomeGuideMenuItem from './welcome-guide-menu-item';
@@ -23,7 +22,6 @@ registerPlugin( 'edit-post', {
 				<ToolsMoreMenuGroup>
 					{ ( { onClose } ) => (
 						<>
-							<ManageBlocksMenuItem onSelect={ onClose } />
 							<MenuItem
 								role="menuitem"
 								href={ addQueryArgs( 'edit.php', {
diff --git a/packages/edit-post/src/plugins/manage-blocks-menu-item/index.js b/packages/edit-post/src/plugins/manage-blocks-menu-item/index.js
deleted file mode 100644
index 64340588509274..00000000000000
--- a/packages/edit-post/src/plugins/manage-blocks-menu-item/index.js
+++ /dev/null
@@ -1,31 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { MenuItem } from '@wordpress/components';
-import { withDispatch } from '@wordpress/data';
-import { __ } from '@wordpress/i18n';
-
-/**
- * Internal dependencies
- */
-import { store as editPostStore } from '../../store';
-
-export function ManageBlocksMenuItem( { openModal } ) {
-	return (
-		<MenuItem
-			onClick={ () => {
-				openModal( 'edit-post/manage-blocks' );
-			} }
-		>
-			{ __( 'Block Manager' ) }
-		</MenuItem>
-	);
-}
-
-export default withDispatch( ( dispatch ) => {
-	const { openModal } = dispatch( editPostStore );
-
-	return {
-		openModal,
-	};
-} )( ManageBlocksMenuItem );
diff --git a/packages/edit-post/src/style.scss b/packages/edit-post/src/style.scss
index 3c91aacbd31fdf..1456898a5ee25a 100644
--- a/packages/edit-post/src/style.scss
+++ b/packages/edit-post/src/style.scss
@@ -6,7 +6,7 @@
 @import "./components/header/template-title/style.scss";
 @import "./components/keyboard-shortcut-help-modal/style.scss";
 @import "./components/layout/style.scss";
-@import "./components/manage-blocks-modal/style.scss";
+@import "./components/block-manager/style.scss";
 @import "./components/meta-boxes/meta-boxes-area/style.scss";
 @import "./components/preferences-modal/style.scss";
 @import "./components/secondary-sidebar/style.scss";

From ebfde513f8e64e08cfb127d828c2a2b99892e0be Mon Sep 17 00:00:00 2001
From: Mitchell Austin <mr.fye@oneandthesame.net>
Date: Sat, 8 May 2021 17:53:49 -0700
Subject: [PATCH 02/11] Move block manager to within blocks section of
 preferences modal

---
 .../src/components/preferences-modal/index.js | 56 ++++++++++---------
 1 file changed, 29 insertions(+), 27 deletions(-)

diff --git a/packages/edit-post/src/components/preferences-modal/index.js b/packages/edit-post/src/components/preferences-modal/index.js
index f2bc84cb53da3b..9a27ef0044319e 100644
--- a/packages/edit-post/src/components/preferences-modal/index.js
+++ b/packages/edit-post/src/components/preferences-modal/index.js
@@ -144,39 +144,41 @@ export default function PreferencesModal() {
 					</Section>
 				),
 			},
-			{
-				name: 'block-manager',
-				tabLabel: __( 'Block Manager' ),
-				content: (
-					<Section
-						title={ __( 'Show/Hide blocks from the inserter.' ) }
-					>
-						<BlockManager />
-					</Section>
-				),
-			},
 			{
 				name: 'blocks',
 				tabLabel: __( 'Blocks' ),
 				content: (
-					<Section
-						title={ __( 'Choose how you interact with blocks' ) }
-					>
-						<EnableFeature
-							featureName="mostUsedBlocks"
-							help={ __(
-								'Places the most frequent blocks in the block library.'
+					<>
+						<Section
+							title={ __(
+								'Choose how you interact with blocks'
 							) }
-							label={ __( 'Show most used blocks' ) }
-						/>
-						<EnableFeature
-							featureName="keepCaretInsideBlock"
-							help={ __(
-								'Aids screen readers by stopping text caret from leaving blocks.'
+						>
+							<EnableFeature
+								featureName="mostUsedBlocks"
+								help={ __(
+									'Places the most frequent blocks in the block library.'
+								) }
+								label={ __( 'Show most used blocks' ) }
+							/>
+							<EnableFeature
+								featureName="keepCaretInsideBlock"
+								help={ __(
+									'Aids screen readers by stopping text caret from leaving blocks.'
+								) }
+								label={ __(
+									'Contain text cursor inside block'
+								) }
+							/>
+						</Section>
+						<Section
+							title={ __(
+								'Show/Hide blocks from the inserter.'
 							) }
-							label={ __( 'Contain text cursor inside block' ) }
-						/>
-					</Section>
+						>
+							<BlockManager />
+						</Section>
+					</>
 				),
 			},
 			{

From ea6d57c3feffdca2f24b0fbdbf0bd84a2a639294 Mon Sep 17 00:00:00 2001
From: Mitchell Austin <mr.fye@oneandthesame.net>
Date: Thu, 13 May 2021 09:44:06 -0700
Subject: [PATCH 03/11] Unpunctuate block manager section title

---
 packages/edit-post/src/components/preferences-modal/index.js | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/packages/edit-post/src/components/preferences-modal/index.js b/packages/edit-post/src/components/preferences-modal/index.js
index 9a27ef0044319e..b20bb981d368db 100644
--- a/packages/edit-post/src/components/preferences-modal/index.js
+++ b/packages/edit-post/src/components/preferences-modal/index.js
@@ -172,9 +172,7 @@ export default function PreferencesModal() {
 							/>
 						</Section>
 						<Section
-							title={ __(
-								'Show/Hide blocks from the inserter.'
-							) }
+							title={ __( 'Show/Hide blocks from the inserter' ) }
 						>
 							<BlockManager />
 						</Section>

From 3d5f0c55e4bfd57b901be8c0c969b813ab28f2e5 Mon Sep 17 00:00:00 2001
From: Mitchell Austin <mr.fye@oneandthesame.net>
Date: Thu, 13 May 2021 12:42:27 -0700
Subject: [PATCH 04/11] Update styling of preferences modal

---
 .../components/preferences-modal/style.scss   | 38 ++++++++++++++-----
 1 file changed, 29 insertions(+), 9 deletions(-)

diff --git a/packages/edit-post/src/components/preferences-modal/style.scss b/packages/edit-post/src/components/preferences-modal/style.scss
index b8925efe1b158a..97b639823695b5 100644
--- a/packages/edit-post/src/components/preferences-modal/style.scss
+++ b/packages/edit-post/src/components/preferences-modal/style.scss
@@ -1,3 +1,5 @@
+$vertical-tabs-width: 160px;
+
 .edit-post-preferences-modal {
 	// To keep modal dimensions consistent as subsections are navigated, width
 	// and height are used instead of max-(width/height).
@@ -15,10 +17,26 @@
 		height: 50%;
 	}
 
+	// Clears spacing to flush fit the navigation component to the modal edges.
+	@media (max-width: #{ ($break-medium - 1) }) {
+		.components-modal__content {
+			padding: 0;
+
+			&::before {
+				content: none;
+			}
+		}
+	}
+
 	.components-navigation {
 		background-color: $white;
-		margin: -#{$grid-unit-10};
-		padding: $grid-unit-10;
+		padding: 0;
+
+		> * {
+			// Matches spacing cleared from the modal content element.
+			padding: $grid-unit-30 $grid-unit-40;
+		}
+
 		.components-navigation__menu {
 			margin: 0;
 			color: $gray-900;
@@ -30,6 +48,9 @@
 					color: inherit;
 					padding: 3px $grid-unit-20;
 					height: $grid-unit-60;
+					// Aligns button text instead of button box.
+					margin: 0 #{-$grid-unit-20};
+					width: calc(#{$grid-unit-40} + 100%);
 					&:focus {
 						background: $gray-100;
 						font-weight: 500;
@@ -62,13 +83,12 @@
 	}
 
 	.edit-post-preferences__tabs {
-		display: flex;
-		flex-direction: row;
 		.components-tab-panel__tabs {
-			position: sticky;
-			top: 90px;
-			align-self: start;
-			width: 160px;
+			position: absolute;
+			top: $header-height + $grid-unit-30;
+			// Aligns button text instead of button box.
+			left: $grid-unit-20;
+			width: $vertical-tabs-width;
 			.components-tab-panel__tabs-item {
 				border-radius: $radius-block-ui;
 				font-weight: 400;
@@ -83,8 +103,8 @@
 			}
 		}
 		.components-tab-panel__tab-content {
-			width: 500px;
 			padding-left: $grid-unit-30;
+			margin-left: $vertical-tabs-width;
 		}
 	}
 

From 929fa520f542d20b539928933098a0dadf98d05b Mon Sep 17 00:00:00 2001
From: Mitchell Austin <mr.fye@oneandthesame.net>
Date: Thu, 13 May 2021 12:47:20 -0700
Subject: [PATCH 05/11] Update design of block manager

---
 packages/base-styles/_z-index.scss            |  2 ++
 .../src/components/block-manager/index.js     | 14 +++++-----
 .../src/components/block-manager/style.scss   | 26 ++++++++++++-------
 3 files changed, 26 insertions(+), 16 deletions(-)

diff --git a/packages/base-styles/_z-index.scss b/packages/base-styles/_z-index.scss
index 8b7e535cb8e624..54f9af059ec354 100644
--- a/packages/base-styles/_z-index.scss
+++ b/packages/base-styles/_z-index.scss
@@ -164,6 +164,8 @@ $z-layers: (
 
 	// Make sure block manager sticky category titles appear above the options
 	".edit-post-block-manager__category-title": 1,
+	// And block manager sticky disabled block count is higher still
+	".edit-post-block-manager__disabled-blocks-count": 2,
 
 	// Needs to be higher than any other element as this is an overlay to catch all events
 	".components-tooltip .event-catcher": 100002,
diff --git a/packages/edit-post/src/components/block-manager/index.js b/packages/edit-post/src/components/block-manager/index.js
index 58c349b3fb628f..2ba51cffeff0c6 100644
--- a/packages/edit-post/src/components/block-manager/index.js
+++ b/packages/edit-post/src/components/block-manager/index.js
@@ -40,13 +40,6 @@ function BlockManager( {
 
 	return (
 		<div className="edit-post-block-manager__content">
-			<TextControl
-				type="search"
-				label={ __( 'Search for a block' ) }
-				value={ search }
-				onChange={ ( nextSearch ) => setSearch( nextSearch ) }
-				className="edit-post-block-manager__search"
-			/>
 			{ !! numberOfHiddenBlocks && (
 				<div className="edit-post-block-manager__disabled-blocks-count">
 					{ sprintf(
@@ -60,6 +53,13 @@ function BlockManager( {
 					) }
 				</div>
 			) }
+			<TextControl
+				type="search"
+				label={ __( 'Search for a block' ) }
+				value={ search }
+				onChange={ ( nextSearch ) => setSearch( nextSearch ) }
+				className="edit-post-block-manager__search"
+			/>
 			<div
 				tabIndex="0"
 				role="region"
diff --git a/packages/edit-post/src/components/block-manager/style.scss b/packages/edit-post/src/components/block-manager/style.scss
index 2abe720fb815f6..53926233a625ac 100644
--- a/packages/edit-post/src/components/block-manager/style.scss
+++ b/packages/edit-post/src/components/block-manager/style.scss
@@ -1,6 +1,6 @@
 .edit-post-block-manager__no-results {
 	font-style: italic;
-	padding: 24px 0;
+	padding: $grid-unit-30 0;
 	text-align: center;
 }
 
@@ -24,13 +24,21 @@
 .edit-post-block-manager__disabled-blocks-count {
 	border: 1px solid $gray-300;
 	border-width: 1px 0;
-	margin-left: -$grid-unit-40;
-	margin-right: -$grid-unit-40;
-	padding-top: 0.6rem;
-	padding-bottom: 0.6rem;
-	padding-left: $grid-unit-40;
-	padding-right: $grid-unit-40;
-	background-color: $gray-100;
+	// Cover up horizontal areas off the sides of the box rectangle
+	box-shadow: -$grid-unit-40 0 0 0 $white, $grid-unit-40 0 0 0 $white;
+	padding: $grid-unit-10;
+	background-color: $white;
+	text-align: center;
+	font-style: italic;
+	position: sticky;
+	// When sticking, tuck the top border beneath the modal header border
+	top: -1px;
+	z-index: z-index(".edit-post-block-manager__disabled-blocks-count");
+
+	// Stick the category titles to the bottom
+	~ .edit-post-block-manager__results .edit-post-block-manager__category-title {
+		top: 35px;
+	}
 }
 
 .edit-post-block-manager__category {
@@ -86,7 +94,7 @@
 		align-items: center;
 		justify-content: space-between;
 		flex-grow: 1;
-		padding: 0.6rem 0 0.6rem 10px;
+		padding: $grid-unit-10 0;
 	}
 
 	.block-editor-block-icon {

From 9646996c3aad0b24d9da857fe87dfa2cf1d71ea9 Mon Sep 17 00:00:00 2001
From: Mitchell Austin <mr.fye@oneandthesame.net>
Date: Thu, 13 May 2021 13:15:33 -0700
Subject: [PATCH 06/11] Reword some block manager copy

---
 packages/edit-post/src/components/block-manager/index.js     | 4 ++--
 packages/edit-post/src/components/preferences-modal/index.js | 4 +++-
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/packages/edit-post/src/components/block-manager/index.js b/packages/edit-post/src/components/block-manager/index.js
index 2ba51cffeff0c6..9daddf3eae7808 100644
--- a/packages/edit-post/src/components/block-manager/index.js
+++ b/packages/edit-post/src/components/block-manager/index.js
@@ -45,8 +45,8 @@ function BlockManager( {
 					{ sprintf(
 						/* translators: %d: number of blocks. */
 						_n(
-							'%d block is disabled.',
-							'%d blocks are disabled.',
+							'%d block is hidden.',
+							'%d blocks are hidden.',
 							numberOfHiddenBlocks
 						),
 						numberOfHiddenBlocks
diff --git a/packages/edit-post/src/components/preferences-modal/index.js b/packages/edit-post/src/components/preferences-modal/index.js
index b20bb981d368db..70483069d8ab03 100644
--- a/packages/edit-post/src/components/preferences-modal/index.js
+++ b/packages/edit-post/src/components/preferences-modal/index.js
@@ -172,7 +172,9 @@ export default function PreferencesModal() {
 							/>
 						</Section>
 						<Section
-							title={ __( 'Show/Hide blocks from the inserter' ) }
+							title={ __(
+								'Manage visibility of blocks in the inserter'
+							) }
 						>
 							<BlockManager />
 						</Section>

From 40f01732ba0060c5cd67a6ae27d4204437ee073b Mon Sep 17 00:00:00 2001
From: Mitchell Austin <mr.fye@oneandthesame.net>
Date: Mon, 14 Jun 2021 08:49:28 -0700
Subject: [PATCH 07/11] Add style to get sticky working at < medium breakpoint

---
 packages/edit-post/src/components/preferences-modal/style.scss | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/edit-post/src/components/preferences-modal/style.scss b/packages/edit-post/src/components/preferences-modal/style.scss
index 97b639823695b5..e01e6407b9dd13 100644
--- a/packages/edit-post/src/components/preferences-modal/style.scss
+++ b/packages/edit-post/src/components/preferences-modal/style.scss
@@ -31,6 +31,8 @@ $vertical-tabs-width: 160px;
 	.components-navigation {
 		background-color: $white;
 		padding: 0;
+		max-height: 100%;
+		overflow-y: auto;
 
 		> * {
 			// Matches spacing cleared from the modal content element.

From 9b8d98eaf0239139c6b00ed07a43f61f6621e530 Mon Sep 17 00:00:00 2001
From: Mitchell Austin <mr.fye@oneandthesame.net>
Date: Tue, 15 Jun 2021 14:17:21 -0700
Subject: [PATCH 08/11] Unset height for huge breakpoint in PreferencesModal

---
 packages/edit-post/src/components/preferences-modal/style.scss | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/packages/edit-post/src/components/preferences-modal/style.scss b/packages/edit-post/src/components/preferences-modal/style.scss
index e01e6407b9dd13..71ac420cd2aba3 100644
--- a/packages/edit-post/src/components/preferences-modal/style.scss
+++ b/packages/edit-post/src/components/preferences-modal/style.scss
@@ -13,9 +13,6 @@ $vertical-tabs-width: 160px;
 	@include break-large() {
 		height: 70%;
 	}
-	@include break-huge() {
-		height: 50%;
-	}
 
 	// Clears spacing to flush fit the navigation component to the modal edges.
 	@media (max-width: #{ ($break-medium - 1) }) {

From 90b9dd7765e9b672dec24819b357007c59a1e736 Mon Sep 17 00:00:00 2001
From: Mitchell Austin <mr.fye@oneandthesame.net>
Date: Tue, 15 Jun 2021 15:21:37 -0700
Subject: [PATCH 09/11] Fix rounding gap above sticky category titles

---
 .../src/components/block-manager/style.scss     | 17 ++++++-----------
 1 file changed, 6 insertions(+), 11 deletions(-)

diff --git a/packages/edit-post/src/components/block-manager/style.scss b/packages/edit-post/src/components/block-manager/style.scss
index 53926233a625ac..e375b5091df2b8 100644
--- a/packages/edit-post/src/components/block-manager/style.scss
+++ b/packages/edit-post/src/components/block-manager/style.scss
@@ -42,7 +42,7 @@
 }
 
 .edit-post-block-manager__category {
-	margin: 0 0 2rem 0;
+	margin: 0 0 $grid-unit-30 0;
 }
 
 .edit-post-block-manager__category-title {
@@ -52,12 +52,7 @@
 	background-color: $white;
 	z-index: z-index(".edit-post-block-manager__category-title");
 
-	.components-base-control__field {
-		margin-bottom: 0;
-	}
-
 	.components-checkbox-control__label {
-		font-size: 0.9rem;
 		font-weight: 600;
 	}
 }
@@ -73,17 +68,17 @@
 .edit-post-block-manager__category-title,
 .edit-post-block-manager__checklist-item {
 	border-bottom: 1px solid $gray-300;
-}
-
-.edit-post-block-manager__checklist-item {
-	margin-bottom: 0;
-	padding-left: $grid-unit-20;
 
 	.components-base-control__field {
 		align-items: center;
 		display: flex;
 		margin: 0;
 	}
+}
+
+.edit-post-block-manager__checklist-item {
+	margin-bottom: 0;
+	padding-left: $grid-unit-20;
 
 	.components-modal__content &.components-checkbox-control__input-container {
 		margin: 0 $grid-unit-10;

From fe648439bfc8d287c0739f7695daff837235ca14 Mon Sep 17 00:00:00 2001
From: Mitchell Austin <mr.fye@oneandthesame.net>
Date: Wed, 16 Jun 2021 09:22:24 -0700
Subject: [PATCH 10/11] Update snapshot

---
 .../preferences-modal/test/__snapshots__/index.js.snap       | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/packages/edit-post/src/components/preferences-modal/test/__snapshots__/index.js.snap b/packages/edit-post/src/components/preferences-modal/test/__snapshots__/index.js.snap
index 56080c3516d2b0..ccf0feb5585742 100644
--- a/packages/edit-post/src/components/preferences-modal/test/__snapshots__/index.js.snap
+++ b/packages/edit-post/src/components/preferences-modal/test/__snapshots__/index.js.snap
@@ -144,6 +144,11 @@ exports[`PreferencesModal should match snapshot when the modal is active small v
             label="Contain text cursor inside block"
           />
         </Section>
+        <Section
+          title="Manage visibility of blocks in the inserter"
+        >
+          <WithSelect(BlockManager) />
+        </Section>
       </NavigationItem>
     </NavigationMenu>
     <NavigationMenu

From 291b24cf302acebe7960fb93e4bd59b5c03a3d35 Mon Sep 17 00:00:00 2001
From: Mitchell Austin <mr.fye@oneandthesame.net>
Date: Wed, 16 Jun 2021 11:48:50 -0700
Subject: [PATCH 11/11] Fix e2e test

---
 .../e2e-tests/specs/editor/plugins/allowed-blocks.test.js | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/packages/e2e-tests/specs/editor/plugins/allowed-blocks.test.js b/packages/e2e-tests/specs/editor/plugins/allowed-blocks.test.js
index ba98a92319d074..804e062fa725b8 100644
--- a/packages/e2e-tests/specs/editor/plugins/allowed-blocks.test.js
+++ b/packages/e2e-tests/specs/editor/plugins/allowed-blocks.test.js
@@ -40,10 +40,14 @@ describe( 'Allowed Blocks Filter', () => {
 	} );
 
 	it( 'should remove not allowed blocks from the block manager', async () => {
-		await clickOnMoreMenuItem( 'Block Manager' );
+		await clickOnMoreMenuItem( 'Preferences' );
+		const [ blocksTab ] = await page.$x(
+			`//button[contains(text(), "Blocks")]`
+		);
+		await blocksTab.click();
 
 		const BLOCK_LABEL_SELECTOR =
-			'.edit-post-manage-blocks-modal__checklist-item .components-checkbox-control__label';
+			'.edit-post-block-manager__checklist-item .components-checkbox-control__label';
 		await page.waitForSelector( BLOCK_LABEL_SELECTOR );
 		const blocks = await page.evaluate( ( selector ) => {
 			return Array.from( document.querySelectorAll( selector ) )