diff --git a/packages/base-styles/_z-index.scss b/packages/base-styles/_z-index.scss index e4d6ce4ce1b1c..167af583ed9dd 100644 --- 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/packages/editor/src/components/block-manager/category.js b/packages/block-editor/src/components/block-manager/category.js similarity index 91% rename from packages/editor/src/components/block-manager/category.js rename to packages/block-editor/src/components/block-manager/category.js index 341584fee03b9..79d5896b4502e 100644 --- a/packages/editor/src/components/block-manager/category.js +++ b/packages/block-editor/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( {
+
{ __( 'No blocks found.' ) }
) } diff --git a/packages/editor/src/components/block-manager/style.scss b/packages/block-editor/src/components/block-manager/style.scss similarity index 65% rename from packages/editor/src/components/block-manager/style.scss rename to packages/block-editor/src/components/block-manager/style.scss index 411ee9faf34f7..d72c682dcbb5d 100644 --- a/packages/editor/src/components/block-manager/style.scss +++ b/packages/block-editor/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,10 +19,10 @@ 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 { @@ -30,32 +30,32 @@ } } -.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 index 5067317e3f246..0faee244e387c 100644 --- 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 index 512169351fe1f..213498c797aee 100644 --- 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 index 49d6888c5dbfe..8726b114d9748 100644 --- 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 index b62ccd2c8ac71..88d722867d009 100644 --- 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";