Block Manager: Make it a private component in the block editor package (

#67255) * Block Manager: Make it a private component in the block editor package * Move style import statement Co-authored-by: t-hamano <[email protected]> Co-authored-by: ramonjd <[email protected]> Co-authored-by: youknowriad <[email protected]>
WordPress · Nov 26, 2024 · 9b0e2d9 · 9b0e2d9 · github-actions · Nov 26, 2024
1 parent 08d8b86
commit 9b0e2d9
Show file tree

Hide file tree

Showing 9 changed files with 37 additions and 29 deletions.
diff --git a/packages/base-styles/_z-index.scss b/packages/base-styles/_z-index.scss
@@ -165,9 +165,9 @@ $z-layers: (
 	".components-resizable-box__corner-handle": 2,
 
 	// Make sure block manager sticky category titles appear above the options
-	".editor-block-manager__category-title": 1,
+	".block-editor-block-manager__category-title": 1,
 	// And block manager sticky disabled block count is higher still
-	".editor-block-manager__disabled-blocks-count": 2,
+	".block-editor-block-manager__disabled-blocks-count": 2,
 
 	// Needs to appear below other color circular picker related UI elements.
 	".components-circular-option-picker__option-wrapper::before": -1,

diff --git a/.../src/components/block-manager/category.js → .../src/components/block-manager/category.js b/.../src/components/block-manager/category.js → .../src/components/block-manager/category.js
@@ -71,7 +71,7 @@ function BlockManagerCategory( {
 			)
 		);
 
-	const titleId = 'editor-block-manager__category-title-' + instanceId;
+	const titleId = 'block-editor-block-manager__category-title-' + instanceId;
 
 	const isAllChecked = checkedBlockNames.length === blockTypes.length;
 	const isIndeterminate = ! isAllChecked && checkedBlockNames.length > 0;
@@ -80,13 +80,13 @@ function BlockManagerCategory( {
 		<div
 			role="group"
 			aria-labelledby={ titleId }
-			className="editor-block-manager__category"
+			className="block-editor-block-manager__category"
 		>
 			<CheckboxControl
 				__nextHasNoMarginBottom
 				checked={ isAllChecked }
 				onChange={ toggleAllVisible }
-				className="editor-block-manager__category-title"
+				className="block-editor-block-manager__category-title"
 				indeterminate={ isIndeterminate }
 				label={ <span id={ titleId }>{ title }</span> }
 			/>

diff --git a/...src/components/block-manager/checklist.js → ...src/components/block-manager/checklist.js b/...src/components/block-manager/checklist.js → ...src/components/block-manager/checklist.js
@@ -1,16 +1,20 @@
 /**
  * WordPress dependencies
  */
-import { BlockIcon } from '@wordpress/block-editor';
 import { CheckboxControl } from '@wordpress/components';
 
+/**
+ * Internal dependencies
+ */
+import BlockIcon from '../block-icon';
+
 function BlockTypesChecklist( { blockTypes, value, onItemChange } ) {
 	return (
-		<ul className="editor-block-manager__checklist">
+		<ul className="block-editor-block-manager__checklist">
 			{ blockTypes.map( ( blockType ) => (
 				<li
 					key={ blockType.name }
-					className="editor-block-manager__checklist-item"
+					className="block-editor-block-manager__checklist-item"
 				>
 					<CheckboxControl
 						__nextHasNoMarginBottom

diff --git a/...tor/src/components/block-manager/index.js → ...tor/src/components/block-manager/index.js b/...tor/src/components/block-manager/index.js → ...tor/src/components/block-manager/index.js
@@ -61,9 +61,9 @@ export default function BlockManager( {
 	}, [ filteredBlockTypes?.length, search, debouncedSpeak ] );
 
 	return (
-		<div className="editor-block-manager__content">
+		<div className="block-editor-block-manager__content">
 			{ !! numberOfHiddenBlocks && (
-				<div className="editor-block-manager__disabled-blocks-count">
+				<div className="block-editor-block-manager__disabled-blocks-count">
 					{ sprintf(
 						/* translators: %d: number of blocks. */
 						_n(
@@ -88,16 +88,16 @@ export default function BlockManager( {
 				placeholder={ __( 'Search for a block' ) }
 				value={ search }
 				onChange={ ( nextSearch ) => setSearch( nextSearch ) }
-				className="editor-block-manager__search"
+				className="block-editor-block-manager__search"
 			/>
 			<div
 				tabIndex="0"
 				role="region"
 				aria-label={ __( 'Available block types' ) }
-				className="editor-block-manager__results"
+				className="block-editor-block-manager__results"
 			>
 				{ filteredBlockTypes.length === 0 && (
-					<p className="editor-block-manager__no-results">
+					<p className="block-editor-block-manager__no-results">
 						{ __( 'No blocks found.' ) }
 					</p>
 				) }

diff --git a/...r/src/components/block-manager/style.scss → ...r/src/components/block-manager/style.scss b/...r/src/components/block-manager/style.scss → ...r/src/components/block-manager/style.scss
@@ -1,14 +1,14 @@
-.editor-block-manager__no-results {
+.block-editor-block-manager__no-results {
 	font-style: italic;
 	padding: $grid-unit-30 0;
 	text-align: center;
 }
 
-.editor-block-manager__search {
+.block-editor-block-manager__search {
 	margin: $grid-unit-20 0;
 }
 
-.editor-block-manager__disabled-blocks-count {
+.block-editor-block-manager__disabled-blocks-count {
 	border: $border-width solid $gray-300;
 	border-width: $border-width 0;
 	// Cover up horizontal areas off the sides of the box rectangle
@@ -19,43 +19,43 @@
 	position: sticky;
 	// When sticking, tuck the top border beneath the modal header border
 	top: ($grid-unit-05 + 1) * -1;
-	z-index: z-index(".editor-block-manager__disabled-blocks-count");
+	z-index: z-index(".block-editor-block-manager__disabled-blocks-count");
 
 	// Stick the category titles to the bottom
-	~ .editor-block-manager__results .editor-block-manager__category-title {
+	~ .block-editor-block-manager__results .block-editor-block-manager__category-title {
 		top: $grid-unit-40 - 1;
 	}
 	.is-link {
 		margin-left: 12px;
 	}
 }
 
-.editor-block-manager__category {
+.block-editor-block-manager__category {
 	margin: 0 0 $grid-unit-30 0;
 }
 
-.editor-block-manager__category-title {
+.block-editor-block-manager__category-title {
 	position: sticky;
 	top: - $grid-unit-05; // Offsets the top padding on the modal content container
 	padding: $grid-unit-20 0;
 	background-color: $white;
-	z-index: z-index(".editor-block-manager__category-title");
+	z-index: z-index(".block-editor-block-manager__category-title");
 
 	.components-checkbox-control__label {
 		font-weight: 600;
 	}
 }
 
-.editor-block-manager__checklist {
+.block-editor-block-manager__checklist {
 	margin-top: 0;
 }
 
-.editor-block-manager__category-title,
-.editor-block-manager__checklist-item {
+.block-editor-block-manager__category-title,
+.block-editor-block-manager__checklist-item {
 	border-bottom: 1px solid $gray-300;
 }
 
-.editor-block-manager__checklist-item {
+.block-editor-block-manager__checklist-item {
 	display: flex;
 	justify-content: space-between;
 	align-items: center;
@@ -72,11 +72,11 @@
 	}
 }
 
-.editor-block-manager__results {
+.block-editor-block-manager__results {
 	border-top: $border-width solid $gray-300;
 }
 
 // Remove the top border from results when adjacent to the disabled block count
-.editor-block-manager__disabled-blocks-count + .editor-block-manager__results {
+.block-editor-block-manager__disabled-blocks-count + .block-editor-block-manager__results {
 	border-top-width: 0;
 }
diff --git a/packages/block-editor/src/private-apis.js b/packages/block-editor/src/private-apis.js
@@ -18,6 +18,7 @@ import { useHasBlockToolbar } from './components/block-toolbar/use-has-block-too
 import { cleanEmptyObject } from './hooks/utils';
 import BlockQuickNavigation from './components/block-quick-navigation';
 import { LayoutStyle } from './components/block-list/layout';
+import BlockManager from './components/block-manager';
 import { BlockRemovalWarningModal } from './components/block-removal-warning-modal';
 import {
 	setBackgroundStyleDefaults,
@@ -71,6 +72,7 @@ lock( privateApis, {
 	cleanEmptyObject,
 	BlockQuickNavigation,
 	LayoutStyle,
+	BlockManager,
 	BlockRemovalWarningModal,
 	useLayoutClasses,
 	useLayoutStyles,

diff --git a/packages/block-editor/src/style.scss b/packages/block-editor/src/style.scss
@@ -10,6 +10,7 @@
 @import "./components/block-card/style.scss";
 @import "./components/block-compare/style.scss";
 @import "./components/block-draggable/style.scss";
+@import "./components/block-manager/style.scss";
 @import "./components/block-mover/style.scss";
 @import "./components/block-navigation/style.scss";
 @import "./components/block-patterns-list/style.scss";

diff --git a/packages/editor/src/components/preferences-modal/block-visibility.js b/packages/editor/src/components/preferences-modal/block-visibility.js
@@ -5,13 +5,15 @@ import { useSelect, useDispatch } from '@wordpress/data';
 import { store as preferencesStore } from '@wordpress/preferences';
 import { hasBlockSupport, store as blocksStore } from '@wordpress/blocks';
 import { useMemo } from '@wordpress/element';
+import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
  */
 import { store as editorStore } from '../../store';
 import { unlock } from '../../lock-unlock';
-import BlockManager from '../block-manager';
+
+const { BlockManager } = unlock( blockEditorPrivateApis );
 
 export default function BlockVisibility() {
 	const { showBlockTypes, hideBlockTypes } = unlock(

diff --git a/packages/editor/src/style.scss b/packages/editor/src/style.scss
@@ -1,7 +1,6 @@
 @import "../../interface/src/style.scss";
 
 @import "./components/autocompleters/style.scss";
-@import "./components/block-manager/style.scss";
 @import "./components/collab-sidebar/style.scss";
 @import "./components/collapsible-block-toolbar/style.scss";
 @import "./components/create-template-part-modal/style.scss";