Absorb block manager within blocks preferences

packages/base-styles/_z-index.scss

@@ -163,7 +163,9 @@ $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,
+	// 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,

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 ) )

packages/edit-post/src/components/manage-blocks-modal/category.js → 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> }
 			/>

packages/edit-post/src/components/manage-blocks-modal/checklist.js → 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={

packages/edit-post/src/components/manage-blocks-modal/manager.js → packages/edit-post/src/components/block-manager/index.js

@@ -39,35 +39,35 @@ function BlockManager( {
 	);
 
 	return (
-		<div className="edit-post-manage-blocks-modal__content">
-			<TextControl
-				type="search"
-				label={ __( 'Search for a block' ) }
-				value={ search }
-				onChange={ ( nextSearch ) => setSearch( nextSearch ) }
-				className="edit-post-manage-blocks-modal__search"
-			/>
+		<div className="edit-post-block-manager__content">
 			{ !! 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(
-							'%d block is disabled.',
-							'%d blocks are disabled.',
+							'%d block is hidden.',
+							'%d blocks are hidden.',
 							numberOfHiddenBlocks
 						),
 						numberOfHiddenBlocks
 					) }
 				</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"
 				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>
 				) }

packages/edit-post/src/components/manage-blocks-modal/show-all.js → 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 */

packages/edit-post/src/components/manage-blocks-modal/style.scss → 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;
+	padding: $grid-unit-30 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,61 +21,64 @@
 	}
 }
 
-.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;
-	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-manage-blocks-modal__category {
-	margin: 0 0 2rem 0;
+.edit-post-block-manager__category {
+	margin: 0 0 $grid-unit-30 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");
-
-	.components-base-control__field {
-		margin-bottom: 0;
-	}
+	z-index: z-index(".edit-post-block-manager__category-title");
 
 	.components-checkbox-control__label {
-		font-size: 0.9rem;
 		font-weight: 600;
 	}
 }
 
-.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 {
-	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;
@@ -86,7 +89,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 {
@@ -95,11 +98,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;
 }

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 />

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';
@@ -147,24 +148,37 @@ export default function PreferencesModal() {
 				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={ __(
+								'Manage visibility of blocks in the inserter'
 							) }
-							label={ __( 'Contain text cursor inside block' ) }
-						/>
-					</Section>
+						>
+							<BlockManager />
+						</Section>
+					</>
 				),
 			},
 			{