Bootstrap the sections exploded view

packages/block-editor/README.md

@@ -173,6 +173,10 @@ _Related_
 
 Undocumented declaration.
 
+### BlockLockToolbar
+
+Undocumented declaration.
+
 ### BlockMover
 
 _Related_

packages/block-editor/src/components/block-tools/style.scss

@@ -52,7 +52,8 @@
 .block-editor-block-list__empty-block-inserter,
 .block-editor-default-block-appender,
 .block-editor-block-list__insertion-point-inserter,
-.block-editor-block-list__block-popover-inserter {
+.block-editor-block-list__block-popover-inserter,
+.edit-site-block-list-exploded__inserter {
 	.block-editor-inserter__toggle.components-button.has-icon {
 		// Basic look
 		background: $gray-900;
@@ -70,11 +71,13 @@
 		}
 	}
 }
-
-.block-editor-block-list__insertion-point-inserter .block-editor-inserter__toggle.components-button.has-icon {
-	background: var(--wp-admin-theme-color);
-	&:hover {
-		background: $gray-900;
+.edit-site-block-list-exploded__inserter,
+.block-editor-block-list__insertion-point-inserter {
+	.block-editor-inserter__toggle.components-button.has-icon {
+		background: var(--wp-admin-theme-color);
+		&:hover {
+			background: $gray-900;
+		}
 	}
 }
 

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

@@ -108,6 +108,7 @@ export { default as BlockInspector } from './block-inspector';
 export { default as BlockList } from './block-list';
 export { useBlockProps } from './block-list/use-block-props';
 export { LayoutStyle as __experimentalLayoutStyle } from './block-list/layout';
+export { default as BlockLockToolbar } from './block-lock/toolbar';
 export { default as BlockMover } from './block-mover';
 export {
 	default as BlockPreview,

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

@@ -40,6 +40,7 @@ import BlockInspectorButton from './block-inspector-button';
 import EditTemplatePartMenuButton from '../edit-template-part-menu-button';
 import BackButton from './back-button';
 import ResizableEditor from './resizable-editor';
+import BlockListExploded from '../block-list-exploded';
 
 const LAYOUT = {
 	type: 'default',
@@ -48,7 +49,7 @@ const LAYOUT = {
 };
 
 export default function BlockEditor( { setIsInserterOpen } ) {
-	const { settings } = useSelect(
+	const { settings, editorMode } = useSelect(
 		( select ) => {
 			let storedSettings = select( editSiteStore ).getSettings(
 				setIsInserterOpen
@@ -74,6 +75,7 @@ export default function BlockEditor( { setIsInserterOpen } ) {
 
 			return {
 				settings: storedSettings,
+				editorMode: select( editSiteStore ).getEditorMode(),
 			};
 		},
 		[ setIsInserterOpen ]
@@ -158,52 +160,58 @@ 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 />
-				<ResizableEditor
-					// Reinitialize the editor and reset the states when the template changes.
-					key={ templateId }
-					enableResizing={
-						isTemplatePart &&
-						// Disable resizing in mobile viewport.
-						! isMobileViewport
-					}
-					settings={ settings }
-					contentRef={ mergedRefs }
+			{ 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();
+						}
+					} }
 				>
-					<BlockList
-						className="edit-site-block-editor__block-list wp-site-blocks"
-						__experimentalLayout={ LAYOUT }
-						renderAppender={ isTemplatePart ? false : undefined }
-					/>
-				</ResizableEditor>
-				<__unstableBlockSettingsMenuFirstItem>
-					{ ( { onClose } ) => (
-						<BlockInspectorButton onClick={ onClose } />
-					) }
-				</__unstableBlockSettingsMenuFirstItem>
-				<__unstableBlockToolbarLastItem>
-					<__unstableBlockNameContext.Consumer>
-						{ ( blockName ) =>
-							blockName === 'core/navigation' && (
-								<MaybeNavMenuSidebarToggle />
-							)
+					<BlockEditorKeyboardShortcuts.Register />
+					<BackButton />
+					<ResizableEditor
+						// Reinitialize the editor and reset the states when the template changes.
+						key={ templateId }
+						enableResizing={
+							isTemplatePart &&
+							// Disable resizing in mobile viewport.
+							! isMobileViewport
 						}
-					</__unstableBlockNameContext.Consumer>
-				</__unstableBlockToolbarLastItem>
-			</BlockTools>
+						settings={ settings }
+						contentRef={ mergedRefs }
+					>
+						<BlockList
+							className="edit-site-block-editor__block-list wp-site-blocks"
+							__experimentalLayout={ LAYOUT }
+							renderAppender={
+								isTemplatePart ? false : undefined
+							}
+						/>
+					</ResizableEditor>
+					<__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/README.md

@@ -0,0 +1,4 @@
+## BlockListExploded Component
+
+This is an experimental component being built to implement the exploded view in the site editor.
+The potential goal for this component is to be a component that can be used by any block editor, so it's important to keep its dependencies minimal. (block-editor dependencies). Eventually, it should be moved to the `@wordpress/block-editor` package.

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

@@ -0,0 +1,37 @@
+/**
+ * WordPress dependencies
+ */
+import { store as blockEditorStore, Inserter } from '@wordpress/block-editor';
+import { useSelect } from '@wordpress/data';
+import { pure } from '@wordpress/compose';
+
+/**
+ * Internal dependencies
+ */
+import BlockListExplodedItem from './item';
+
+const InserterBeforeBlock = pure( ( { clientId } ) => (
+	<div className="edit-site-block-list-exploded__inserter" key={ clientId }>
+		<Inserter clientId={ clientId } __experimentalIsQuick isPrimary />
+	</div>
+) );
+
+function BlockListExploded() {
+	const blockOrder = useSelect( ( select ) => {
+		return select( blockEditorStore ).getBlockOrder();
+	}, [] );
+
+	return (
+		<div className="edit-site-block-list-exploded">
+			{ blockOrder.map( ( clientId ) => (
+				<div key={ clientId }>
+					<InserterBeforeBlock clientId={ clientId } />
+					<BlockListExplodedItem clientId={ clientId } />
+				</div>
+			) ) }
+			<InserterBeforeBlock />
+		</div>
+	);
+}
+
+export default BlockListExploded;

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

@@ -0,0 +1,84 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * WordPress dependencies
+ */
+import {
+	store as blockEditorStore,
+	BlockPreview,
+	useBlockDisplayInformation,
+} from '@wordpress/block-editor';
+import { useSelect, useDispatch } from '@wordpress/data';
+import { pure } from '@wordpress/compose';
+import { sprintf, __ } from '@wordpress/i18n';
+import { useMemo, useRef, useEffect } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import BlockListExplodedTopToolbar from './top-toolbar';
+import { store as editSiteStore } from '../../store';
+
+function BlockListExplodedItem( { clientId } ) {
+	const blockWrapper = useRef();
+	const { block, isSelected } = useSelect(
+		( select ) => {
+			const { getBlock, isBlockSelected } = select( blockEditorStore );
+			return {
+				block: getBlock( clientId ),
+				isSelected: isBlockSelected( clientId ),
+			};
+		},
+		[ clientId ]
+	);
+	const { title } = useBlockDisplayInformation( clientId );
+	const { selectBlock } = useDispatch( blockEditorStore );
+	// If the exploded list becomes part of block-editor
+	// This mode also need to move into the block-editor store.
+	const { switchEditorMode } = useDispatch( editSiteStore );
+
+	// translators: %s: Type of block (i.e. Text, Image etc)
+	const blockLabel = sprintf( __( 'Block: %s' ), title );
+	const blocksToPreview = useMemo( () => [ block ], [ block ] );
+
+	useEffect( () => {
+		if ( isSelected ) {
+			blockWrapper.current.focus();
+		}
+	}, [ isSelected ] );
+
+	return (
+		<div
+			className={ classnames(
+				'edit-site-block-list-exploded__item-container',
+				{ 'is-selected': isSelected }
+			) }
+		>
+			{ isSelected && (
+				<BlockListExplodedTopToolbar clientId={ clientId } />
+			) }
+			<div
+				ref={ blockWrapper }
+				role="button"
+				onClick={ ( event ) => {
+					if ( event.detail === 1 ) {
+						selectBlock( clientId );
+					} else if ( event.detail === 2 ) {
+						switchEditorMode( 'visual' );
+					}
+				} }
+				onKeyPress={ () => selectBlock( clientId ) }
+				onFocus={ () => selectBlock( clientId ) }
+				aria-label={ blockLabel }
+				tabIndex={ 0 }
+			>
+				<BlockPreview blocks={ blocksToPreview } />
+			</div>
+		</div>
+	);
+}
+
+export default pure( BlockListExplodedItem );

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

@@ -0,0 +1,66 @@
+.edit-site-block-list-exploded {
+	display: flex;
+	flex-direction: column;
+	width: $content-width;
+	margin: auto;
+}
+
+.edit-site-block-list-exploded__inserter > div {
+	display: flex;
+	margin: 30px auto;
+	width: fit-content;
+}
+
+.edit-site-block-list-exploded__item-container {
+	position: relative;
+
+	&::after {
+		content: "";
+		position: absolute;
+		top: 0;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		pointer-events: none;
+	}
+
+	&:hover::after {
+		border: 1px solid var(--wp-admin-theme-color);
+	}
+
+	&.is-selected::after {
+		border: 2px solid var(--wp-admin-theme-color);
+	}
+}
+
+.edit-site-block-list-exploded__item-top-toolbar {
+	position: absolute;
+	top: -$block-toolbar-height - $grid-unit-15;
+	height: $block-toolbar-height;
+	background: var(--wp-admin-theme-color);
+	color: $white;
+	display: flex;
+	align-items: center;
+	gap: $grid-unit-20;
+	padding-left: $grid-unit-20;
+	border-radius: $radius-block-ui;
+
+	.block-editor-block-lock-toolbar,
+	.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,27 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	BlockTitle,
+	BlockMover,
+	BlockLockToolbar,
+	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>
+			<BlockLockToolbar clientId={ clientId } />
+			<BlockMover clientIds={ [ clientId ] } hideDragHandle />
+		</div>
+	);
+}
+
+export default BlockListExplodedTopToolbar;