Add functionality on inner blocks to not include parts of the UI.

WordPress · Dec 23, 2019 · e5c31e8 · e5c31e8
1 parent a94c854
commit e5c31e8
Show file tree

Hide file tree

Showing 6 changed files with 27 additions and 13 deletions.
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
@@ -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 (
 		<NavigableToolbar
 			focusOnMount={ focusOnMount }
@@ -18,7 +18,7 @@ function BlockContextualToolbar( { focusOnMount, moverDirection, ...props } ) {
 			aria-label={ __( 'Block tools' ) }
 			{ ...props }
 		>
-			<BlockToolbar moverDirection={ moverDirection } />
+			<BlockToolbar moverDirection={ moverDirection } hasMovers={ hasMovers } />
 		</NavigableToolbar>
 	);
 }

diff --git 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
@@ -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 (
 		<div
 			ref={ ref }
@@ -105,6 +112,8 @@ function BlockList( {
 							// otherwise there might be a small delay to trigger the animation.
 							animateOnChange={ index }
 							enableAnimation={ enableAnimation }
+							hasSelectedUI={ uiParts.hasSelectedUI }
+							hasMovers={ uiParts.hasMovers }
 						/>
 					</BlockAsyncModeProvider>
 				);

diff --git 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 (
 			<div className="block-editor-block-toolbar">
-				<BlockMover
+				{ hasMovers && ( <BlockMover
 					clientIds={ blockClientIds }
 					__experimentalOrientation={ moverDirection }
-				/>
+				/> ) }
 				<MultiBlocksSwitcher />
 				<BlockSettingsMenu clientIds={ blockClientIds } />
 			</div>
@@ -53,10 +53,10 @@ export default function BlockToolbar( { moverDirection } ) {
 
 	return (
 		<div className="block-editor-block-toolbar">
-			<BlockMover
+			{ hasMovers && ( <BlockMover
 				clientIds={ blockClientIds }
 				__experimentalOrientation={ moverDirection }
-			/>
+			/> ) }
 			{ mode === 'visual' && isValid && (
 				<>
 					<BlockSwitcher clientIds={ blockClientIds } />

diff --git 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 && (
 					<BlockList
 						rootClientId={ clientId }
-						renderAppender={ renderAppender }
-						__experimentalMoverDirection={ moverDirection }
+						{ ...props }
 					/>
 				) }
 			</div>

diff --git a/packages/block-library/src/group/edit.js b/packages/block-library/src/group/edit.js
@@ -48,6 +48,10 @@ function GroupEdit( {
 				<div className="wp-block-group__inner-container">
 					<InnerBlocks
 						renderAppender={ ! hasInnerBlocks && InnerBlocks.ButtonBlockAppender }
+						__experimentalUIParts={ {
+							hasSelectedUI: false,
+							hasMovers: false,
+						} }
 					/>
 				</div>
 			</div>