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( {