diff --git a/packages/block-editor/src/components/block-list/block-contextual-toolbar.js b/packages/block-editor/src/components/block-list/block-contextual-toolbar.js index 9c6ccb22a7fbe..816073755615c 100644 --- a/packages/block-editor/src/components/block-list/block-contextual-toolbar.js +++ b/packages/block-editor/src/components/block-list/block-contextual-toolbar.js @@ -9,7 +9,7 @@ import { __ } from '@wordpress/i18n'; import NavigableToolbar from '../navigable-toolbar'; import { BlockToolbar } from '../'; -function BlockContextualToolbar( { focusOnMount, moverDirection, ...props } ) { +function BlockContextualToolbar( { focusOnMount, hasMovers, moverDirection, ...props } ) { return ( - + ); } diff --git a/packages/block-editor/src/components/block-list/block.js b/packages/block-editor/src/components/block-list/block.js index 216cae25aec4a..17d14b8f40824 100644 --- a/packages/block-editor/src/components/block-list/block.js +++ b/packages/block-editor/src/components/block-list/block.js @@ -101,6 +101,8 @@ function BlockListBlock( { setNavigationMode, isMultiSelecting, isLargeViewport, + hasSelectedUI = true, + hasMovers = true, } ) { // In addition to withSelect, we should favor using useSelect in this component going forward // to avoid leaking new props to the public API (editor.BlockListBlock filter) @@ -446,8 +448,9 @@ function BlockListBlock( { const wrapperClassName = classnames( 'wp-block block-editor-block-list__block', { + 'has-selected-ui': hasSelectedUI, 'has-warning': ! isValid || !! hasError || isUnregisteredBlock, - 'is-selected': shouldAppearSelected, + 'is-selected': shouldAppearSelected && hasSelectedUI, 'is-navigate-mode': isNavigationMode, 'is-multi-selected': isMultiSelected, 'is-hovered': shouldAppearHovered, @@ -509,6 +512,7 @@ function BlockListBlock( { data-type={ name } data-align={ wrapperProps ? wrapperProps[ 'data-align' ] : undefined } moverDirection={ moverDirection } + hasMovers={ hasMovers } /> ); diff --git a/packages/block-editor/src/components/block-list/index.js b/packages/block-editor/src/components/block-list/index.js index 8b03c0727e58e..a06b45f838cb7 100644 --- a/packages/block-editor/src/components/block-list/index.js +++ b/packages/block-editor/src/components/block-list/index.js @@ -38,6 +38,7 @@ function BlockList( { __experimentalMoverDirection: moverDirection = 'vertical', isDraggable, renderAppender, + __experimentalUIParts = {}, } ) { function selector( select ) { const { @@ -74,6 +75,12 @@ function BlockList( { const ref = useRef(); const onSelectionStart = useMultiSelection( { ref, rootClientId } ); + const uiParts = { + hasMovers: true, + hasSelectedUI: true, + ...__experimentalUIParts, + }; + return (
); diff --git a/packages/block-editor/src/components/block-toolbar/index.js b/packages/block-editor/src/components/block-toolbar/index.js index f468c91dabeb4..aabd47043910a 100644 --- a/packages/block-editor/src/components/block-toolbar/index.js +++ b/packages/block-editor/src/components/block-toolbar/index.js @@ -14,7 +14,7 @@ import BlockSwitcher from '../block-switcher'; import MultiBlocksSwitcher from '../block-switcher/multi-blocks-switcher'; import BlockMover from '../block-mover'; -export default function BlockToolbar( { moverDirection } ) { +export default function BlockToolbar( { moverDirection, hasMovers = true } ) { const { blockClientIds, isValid, mode } = useSelect( ( select ) => { const { getBlockMode, @@ -41,10 +41,10 @@ export default function BlockToolbar( { moverDirection } ) { if ( blockClientIds.length > 1 ) { return (
- + /> ) }
@@ -53,10 +53,10 @@ export default function BlockToolbar( { moverDirection } ) { return (
- + /> ) } { mode === 'visual' && isValid && ( <> diff --git a/packages/block-editor/src/components/inner-blocks/index.js b/packages/block-editor/src/components/inner-blocks/index.js index 994d409f8060f..b9594fe7428ba 100644 --- a/packages/block-editor/src/components/inner-blocks/index.js +++ b/packages/block-editor/src/components/inner-blocks/index.js @@ -106,10 +106,8 @@ class InnerBlocks extends Component { enableClickThrough, clientId, hasOverlay, - renderAppender, - __experimentalMoverDirection: moverDirection, __experimentalCaptureToolbars: captureToolbars, - + ...props } = this.props; const { templateInProcess } = this.state; @@ -123,8 +121,7 @@ class InnerBlocks extends Component { { ! templateInProcess && ( ) }
diff --git a/packages/block-library/src/group/edit.js b/packages/block-library/src/group/edit.js index 1e7445a20cc95..787cbbd016a15 100644 --- a/packages/block-library/src/group/edit.js +++ b/packages/block-library/src/group/edit.js @@ -48,6 +48,10 @@ function GroupEdit( {