From dc2cf125d33b851ae4e44dfe9180feaf4d942d69 Mon Sep 17 00:00:00 2001 From: Aki Hamano Date: Wed, 20 Nov 2024 23:25:07 +0900 Subject: [PATCH 1/2] Block Manager: Make it a private component in the block editor package --- packages/base-styles/_z-index.scss | 4 +-- .../src/components/block-manager/category.js | 6 ++-- .../src/components/block-manager/checklist.js | 10 +++++-- .../src/components/block-manager/index.js | 10 +++---- .../src/components/block-manager/style.scss | 28 +++++++++---------- packages/block-editor/src/content.scss | 1 + packages/block-editor/src/private-apis.js | 2 ++ .../preferences-modal/block-visibility.js | 4 ++- packages/editor/src/style.scss | 1 - 9 files changed, 37 insertions(+), 29 deletions(-) rename packages/{editor => block-editor}/src/components/block-manager/category.js (91%) rename packages/{editor => block-editor}/src/components/block-manager/checklist.js (75%) rename packages/{editor => block-editor}/src/components/block-manager/index.js (92%) rename packages/{editor => block-editor}/src/components/block-manager/style.scss (65%) diff --git a/packages/base-styles/_z-index.scss b/packages/base-styles/_z-index.scss index e4d6ce4ce1b1c9..167af583ed9ddb 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 341584fee03b96..79d5896b4502e4 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( {
{ title } } /> diff --git a/packages/editor/src/components/block-manager/checklist.js b/packages/block-editor/src/components/block-manager/checklist.js similarity index 75% rename from packages/editor/src/components/block-manager/checklist.js rename to packages/block-editor/src/components/block-manager/checklist.js index 2839e2c9e14c14..d5456a14355efb 100644 --- a/packages/editor/src/components/block-manager/checklist.js +++ b/packages/block-editor/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 ( -
    +
      { blockTypes.map( ( blockType ) => (
    • +
      { !! numberOfHiddenBlocks && ( -
      +
      { 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" />
      { filteredBlockTypes.length === 0 && ( -

      +

      { __( '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 411ee9faf34f75..d72c682dcbb5d5 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/content.scss b/packages/block-editor/src/content.scss index 1ef4e118fb1bbe..41ebdb54cc14e2 100644 --- a/packages/block-editor/src/content.scss +++ b/packages/block-editor/src/content.scss @@ -1,6 +1,7 @@ @import "./components/block-icon/content.scss"; @import "./components/block-list/content.scss"; @import "./components/block-list-appender/content.scss"; +@import "./components/block-manager/style.scss"; @import "./components/block-content-overlay/content.scss"; @import "./components/block-draggable/content.scss"; @import "./components/block-preview/content.scss"; diff --git a/packages/block-editor/src/private-apis.js b/packages/block-editor/src/private-apis.js index 5067317e3f2465..0faee244e387c2 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/editor/src/components/preferences-modal/block-visibility.js b/packages/editor/src/components/preferences-modal/block-visibility.js index 49d6888c5dbfe2..8726b114d97480 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 b62ccd2c8ac71d..88d722867d009b 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"; From 793d742487898b43a8a48876b6cf2fbd3d40c852 Mon Sep 17 00:00:00 2001 From: Aki Hamano Date: Mon, 25 Nov 2024 18:21:47 +0900 Subject: [PATCH 2/2] Move style import statement --- packages/block-editor/src/content.scss | 1 - packages/block-editor/src/style.scss | 1 + 2 files changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-editor/src/content.scss b/packages/block-editor/src/content.scss index 41ebdb54cc14e2..1ef4e118fb1bbe 100644 --- a/packages/block-editor/src/content.scss +++ b/packages/block-editor/src/content.scss @@ -1,7 +1,6 @@ @import "./components/block-icon/content.scss"; @import "./components/block-list/content.scss"; @import "./components/block-list-appender/content.scss"; -@import "./components/block-manager/style.scss"; @import "./components/block-content-overlay/content.scss"; @import "./components/block-draggable/content.scss"; @import "./components/block-preview/content.scss"; diff --git a/packages/block-editor/src/style.scss b/packages/block-editor/src/style.scss index 512169351fe1fb..213498c797aee4 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";