Add exploded view toolbar

packages/edit-site/src/components/block-editor/index.js

@@ -160,21 +160,23 @@ export default function BlockEditor( { setIsInserterOpen } ) {
 			<SidebarInspectorFill>
 				<BlockInspector />
 			</SidebarInspectorFill>
-			<BlockTools
-				className={ classnames( 'edit-site-visual-editor', {
-					'is-focus-mode': isTemplatePart,
-				} ) }
-				__unstableContentRef={ contentRef }
-				onClick={ ( event ) => {
-					// Clear selected block when clicking on the gray background.
-					if ( event.target === event.currentTarget ) {
-						clearSelectedBlock();
-					}
-				} }
-			>
-				<BlockEditorKeyboardShortcuts.Register />
-				<BackButton />
-				{ editorMode === 'visual' && (
+			{ editorMode === 'exploded' && <BlockListExploded /> }
+
+			{ editorMode === 'visual' && (
+				<BlockTools
+					className={ classnames( 'edit-site-visual-editor', {
+						'is-focus-mode': isTemplatePart,
+					} ) }
+					__unstableContentRef={ contentRef }
+					onClick={ ( event ) => {
+						// Clear selected block when clicking on the gray background.
+						if ( event.target === event.currentTarget ) {
+							clearSelectedBlock();
+						}
+					} }
+				>
+					<BlockEditorKeyboardShortcuts.Register />
+					<BackButton />
 					<ResizableEditor
 						// Reinitialize the editor and reset the states when the template changes.
 						key={ templateId }
@@ -194,23 +196,22 @@ export default function BlockEditor( { setIsInserterOpen } ) {
 							}
 						/>
 					</ResizableEditor>
-				) }
-				{ editorMode === 'exploded' && <BlockListExploded /> }
-				<__unstableBlockSettingsMenuFirstItem>
-					{ ( { onClose } ) => (
-						<BlockInspectorButton onClick={ onClose } />
-					) }
-				</__unstableBlockSettingsMenuFirstItem>
-				<__unstableBlockToolbarLastItem>
-					<__unstableBlockNameContext.Consumer>
-						{ ( blockName ) =>
-							blockName === 'core/navigation' && (
-								<MaybeNavMenuSidebarToggle />
-							)
-						}
-					</__unstableBlockNameContext.Consumer>
-				</__unstableBlockToolbarLastItem>
-			</BlockTools>
+					<__unstableBlockSettingsMenuFirstItem>
+						{ ( { onClose } ) => (
+							<BlockInspectorButton onClick={ onClose } />
+						) }
+					</__unstableBlockSettingsMenuFirstItem>
+					<__unstableBlockToolbarLastItem>
+						<__unstableBlockNameContext.Consumer>
+							{ ( blockName ) =>
+								blockName === 'core/navigation' && (
+									<MaybeNavMenuSidebarToggle />
+								)
+							}
+						</__unstableBlockNameContext.Consumer>
+					</__unstableBlockToolbarLastItem>
+				</BlockTools>
+			) }
 			<ReusableBlocksMenuItems />
 		</BlockEditorProvider>
 	);

packages/edit-site/src/components/block-list-exploded/item.js

@@ -1,34 +1,42 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
 /**
  * WordPress dependencies
  */
 import {
 	store as blockEditorStore,
 	BlockPreview,
 	Inserter,
+	useBlockDisplayInformation,
 } from '@wordpress/block-editor';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { pure } from '@wordpress/compose';
 import { sprintf, __ } from '@wordpress/i18n';
-import { store as blocksStore } from '@wordpress/blocks';
+
+/**
+ * Internal dependencies
+ */
+import BlockListExplodedTopToolbar from './top-toolbar';
 
 function BlockListExplodedItem( { clientId } ) {
-	const { block, blockTitle } = useSelect(
+	const { block, isSelected } = useSelect(
 		( select ) => {
-			const { getBlock } = select( blockEditorStore );
-			const { getBlockType } = select( blocksStore );
-			const _block = getBlock( clientId );
-			const blockType = getBlockType( _block.name );
+			const { getBlock, isBlockSelected } = select( blockEditorStore );
 			return {
-				block: _block,
-				blockTitle: blockType?.title,
+				block: getBlock( clientId ),
+				isSelected: isBlockSelected( clientId ),
 			};
 		},
 		[ clientId ]
 	);
+	const { title } = useBlockDisplayInformation( clientId );
 	const { selectBlock } = useDispatch( blockEditorStore );
 
 	// translators: %s: Type of block (i.e. Text, Image etc)
-	const blockLabel = sprintf( __( 'Block: %s' ), blockTitle );
+	const blockLabel = sprintf( __( 'Block: %s' ), title );
 
 	return (
 		<div>
@@ -43,13 +51,23 @@ function BlockListExplodedItem( { clientId } ) {
 				/>
 			</div>
 			<div
-				role="button"
-				onClick={ () => selectBlock( clientId ) }
-				onKeyPress={ () => selectBlock( clientId ) }
-				aria-label={ blockLabel }
-				tabIndex={ 0 }
+				className={ classnames(
+					'edit-site-block-list-exploded__item-container',
+					{ 'is-selected': isSelected }
+				) }
 			>
-				<BlockPreview blocks={ [ block ] } />
+				{ isSelected && (
+					<BlockListExplodedTopToolbar clientId={ clientId } />
+				) }
+				<div
+					role="button"
+					onClick={ () => selectBlock( clientId ) }
+					onKeyPress={ () => selectBlock( clientId ) }
+					aria-label={ blockLabel }
+					tabIndex={ 0 }
+				>
+					<BlockPreview blocks={ [ block ] } />
+				</div>
 			</div>
 		</div>
 	);

packages/edit-site/src/components/block-list-exploded/style.scss

@@ -3,10 +3,56 @@
 	flex-direction: column;
 	width: $content-width;
 	margin: auto;
+	padding-bottom: 30px;
 }
 
 .edit-site-block-list-exploded__inserter > div {
 	display: flex;
-	margin: 20px auto;
+	margin: 30px auto;
 	width: fit-content;
 }
+
+.edit-site-block-list-exploded__item-container {
+	position: relative;
+
+	&.is-selected::after {
+		content: "";
+		position: absolute;
+		top: 0;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		border: 2px solid var(--wp-admin-theme-color);
+	}
+}
+
+.edit-site-block-list-exploded__item-top-toolbar {
+	position: absolute;
+	top: -$block-toolbar-height - $grid-unit-20;
+	height: $block-toolbar-height;
+	background: var(--wp-admin-theme-color);
+	color: $white;
+	display: flex;
+	align-items: center;
+	gap: $grid-unit-10;
+	padding-left: $grid-unit-20;
+
+	.block-editor-block-mover__move-button-container {
+		background: transparent;
+		color: inherit;
+		border: none;
+
+		.components-button {
+			color: $white;
+		}
+
+
+		// TODO: Absorb these in the BlockMover component (outside of mobile).
+		.block-editor-block-mover-button.is-down-button svg {
+			bottom: 5px;
+		}
+		.block-editor-block-mover-button.is-up-button svg {
+			top: 5px;
+		}
+	}
+}

packages/edit-site/src/components/block-list-exploded/top-toolbar.js

@@ -0,0 +1,25 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	BlockTitle,
+	BlockMover,
+	BlockIcon,
+	useBlockDisplayInformation,
+} from '@wordpress/block-editor';
+
+function BlockListExplodedTopToolbar( { clientId } ) {
+	const { icon } = useBlockDisplayInformation( clientId );
+
+	return (
+		<div className="edit-site-block-list-exploded__item-top-toolbar">
+			<BlockIcon icon={ icon } showColors />
+			<span>
+				<BlockTitle clientId={ clientId } />
+			</span>
+			<BlockMover clientIds={ [ clientId ] } hideDragHandle />
+		</div>
+	);
+}
+
+export default BlockListExplodedTopToolbar;