From 4e28035fe51199e80237a5537de20beaa82afb46 Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Wed, 13 Apr 2022 13:21:12 +0100
Subject: [PATCH 01/18] Bootstrap the sections exploded view

---
 .../src/components/block-tools/style.scss     |  3 +-
 .../src/components/block-editor/index.js      | 62 +++++++++++++------
 .../src/components/block-editor/style.scss    | 13 ++++
 .../edit-site/src/components/editor/index.js  |  5 +-
 .../edit-site/src/components/header/index.js  | 30 +++++++--
 packages/edit-site/src/store/actions.js       |  4 +-
 6 files changed, 89 insertions(+), 28 deletions(-)

diff --git a/packages/block-editor/src/components/block-tools/style.scss b/packages/block-editor/src/components/block-tools/style.scss
index 32abd4aafb2c5..aa36a5e354d1a 100644
--- a/packages/block-editor/src/components/block-tools/style.scss
+++ b/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-editor__block-list-exploded-inserter {
 	.block-editor-inserter__toggle.components-button.has-icon {
 		// Basic look
 		background: $gray-900;
diff --git a/packages/edit-site/src/components/block-editor/index.js b/packages/edit-site/src/components/block-editor/index.js
index d90747db4ad10..d88f299faec27 100644
--- a/packages/edit-site/src/components/block-editor/index.js
+++ b/packages/edit-site/src/components/block-editor/index.js
@@ -21,6 +21,8 @@ import {
 	BlockEditorKeyboardShortcuts,
 	store as blockEditorStore,
 	__unstableBlockNameContext,
+	BlockPreview,
+	Inserter,
 } from '@wordpress/block-editor';
 import { useMergeRefs, useViewportMatch } from '@wordpress/compose';
 import { ReusableBlocksMenuItems } from '@wordpress/reusable-blocks';
@@ -48,7 +50,7 @@ const LAYOUT = {
 };
 
 export default function BlockEditor( { setIsInserterOpen } ) {
-	const { settings } = useSelect(
+	const { settings, editorMode } = useSelect(
 		( select ) => {
 			let storedSettings = select( editSiteStore ).getSettings(
 				setIsInserterOpen
@@ -74,6 +76,7 @@ export default function BlockEditor( { setIsInserterOpen } ) {
 
 			return {
 				settings: storedSettings,
+				editorMode: select( editSiteStore ).getEditorMode(),
 			};
 		},
 		[ setIsInserterOpen ]
@@ -172,23 +175,46 @@ export default function BlockEditor( { setIsInserterOpen } ) {
 			>
 				<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 }
-				>
-					<BlockList
-						className="edit-site-block-editor__block-list wp-site-blocks"
-						__experimentalLayout={ LAYOUT }
-						renderAppender={ isTemplatePart ? false : undefined }
-					/>
-				</ResizableEditor>
+				{ editorMode === 'visual' && (
+					<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 }
+					>
+						<BlockList
+							className="edit-site-block-editor__block-list wp-site-blocks"
+							__experimentalLayout={ LAYOUT }
+							renderAppender={
+								isTemplatePart ? false : undefined
+							}
+						/>
+					</ResizableEditor>
+				) }
+				{ editorMode === 'exploded' && (
+					<div className="edit-site-block-editor__block-list-exploded">
+						{ blocks.map( ( block ) => (
+							<div key={ block.clientId }>
+								<div
+									className="edit-site-block-editor__block-list-exploded-inserter"
+									key={ block.clientId }
+								>
+									<Inserter
+										clientId={ block.clientId }
+										__experimentalIsQuick
+										isPrimary
+									/>
+								</div>
+								<BlockPreview blocks={ [ block ] } />
+							</div>
+						) ) }
+					</div>
+				) }
 				<__unstableBlockSettingsMenuFirstItem>
 					{ ( { onClose } ) => (
 						<BlockInspectorButton onClick={ onClose } />
diff --git a/packages/edit-site/src/components/block-editor/style.scss b/packages/edit-site/src/components/block-editor/style.scss
index 9830f1e302eac..38d32aa46bc71 100644
--- a/packages/edit-site/src/components/block-editor/style.scss
+++ b/packages/edit-site/src/components/block-editor/style.scss
@@ -85,3 +85,16 @@
 		box-shadow: 0 0 0 1px $gray-800, 0 0 0 calc(var(--wp-admin-border-width-focus) + 1px) var(--wp-admin-theme-color);
 	}
 }
+
+.edit-site-block-editor__block-list-exploded {
+	display: flex;
+	flex-direction: column;
+	width: $content-width;
+	margin: auto;
+}
+
+.edit-site-block-editor__block-list-exploded-inserter > div {
+	display: flex;
+	margin: 20px auto;
+	width: fit-content;
+}
diff --git a/packages/edit-site/src/components/editor/index.js b/packages/edit-site/src/components/editor/index.js
index 5564cf454a4c7..7f032185a3ce9 100644
--- a/packages/edit-site/src/components/editor/index.js
+++ b/packages/edit-site/src/components/editor/index.js
@@ -241,7 +241,10 @@ function Editor( { onError } ) {
 												<>
 													<EditorNotices />
 													<BlockStyles.Slot scope="core/block-inspector" />
-													{ editorMode === 'visual' &&
+													{ ( editorMode ===
+														'visual' ||
+														editorMode ===
+															'exploded' ) &&
 														template && (
 															<BlockEditor
 																setIsInserterOpen={
diff --git a/packages/edit-site/src/components/header/index.js b/packages/edit-site/src/components/header/index.js
index 6257fa70a33be..e59d43bee5a47 100644
--- a/packages/edit-site/src/components/header/index.js
+++ b/packages/edit-site/src/components/header/index.js
@@ -10,7 +10,7 @@ import {
 import { useSelect, useDispatch } from '@wordpress/data';
 import { PinnedItems } from '@wordpress/interface';
 import { _x, __ } from '@wordpress/i18n';
-import { listView, plus } from '@wordpress/icons';
+import { listView, plus, stack } from '@wordpress/icons';
 import { Button, ToolbarItem } from '@wordpress/components';
 import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
 import { store as editorStore } from '@wordpress/editor';
@@ -46,7 +46,7 @@ export default function Header( {
 		isListViewOpen,
 		listViewShortcut,
 		isLoaded,
-		isVisualMode,
+		mode,
 	} = useSelect( ( select ) => {
 		const {
 			__experimentalGetPreviewDeviceType,
@@ -78,7 +78,7 @@ export default function Header( {
 			listViewShortcut: getShortcutRepresentation(
 				'core/edit-site/toggle-list-view'
 			),
-			isVisualMode: getEditorMode() === 'visual',
+			mode: getEditorMode(),
 		};
 	}, [] );
 
@@ -86,6 +86,7 @@ export default function Header( {
 		__experimentalSetPreviewDeviceType: setPreviewDeviceType,
 		setIsInserterOpened,
 		setIsListViewOpened,
+		switchEditorMode,
 	} = useDispatch( editSiteStore );
 
 	const isLargeViewport = useViewportMatch( 'medium' );
@@ -115,7 +116,7 @@ export default function Header( {
 						variant="primary"
 						isPressed={ isInserterOpen }
 						className="edit-site-header-toolbar__inserter-toggle"
-						disabled={ ! isVisualMode }
+						disabled={ mode !== 'visual' }
 						onMouseDown={ preventDefault }
 						onClick={ openInserter }
 						icon={ plus }
@@ -131,13 +132,13 @@ export default function Header( {
 						<>
 							<ToolbarItem
 								as={ ToolSelector }
-								disabled={ ! isVisualMode }
+								disabled={ mode !== 'visual' }
 							/>
 							<UndoButton />
 							<RedoButton />
 							<Button
 								className="edit-site-header-toolbar__list-view-toggle"
-								disabled={ ! isVisualMode }
+								disabled={ mode !== 'visual' }
 								icon={ listView }
 								isPressed={ isListViewOpen }
 								/* translators: button label text should, if possible, be under 16 characters. */
@@ -145,6 +146,23 @@ export default function Header( {
 								onClick={ toggleListView }
 								shortcut={ listViewShortcut }
 							/>
+							<Button
+								disabled={
+									mode !== 'visual' && mode !== 'exploded'
+								}
+								className="edit-site-header-toolbar__exploded-view-toggle"
+								icon={ stack }
+								isPressed={ mode === 'exploded' }
+								/* translators: button label text should, if possible, be under 16 characters. */
+								label={ __( 'Exploded View' ) }
+								onClick={ () =>
+									switchEditorMode(
+										mode === 'visual'
+											? 'exploded'
+											: 'visual'
+									)
+								}
+							/>
 						</>
 					) }
 				</div>
diff --git a/packages/edit-site/src/store/actions.js b/packages/edit-site/src/store/actions.js
index 1185865861c5f..5535f13dcd4b5 100644
--- a/packages/edit-site/src/store/actions.js
+++ b/packages/edit-site/src/store/actions.js
@@ -468,7 +468,7 @@ export const switchEditorMode = ( mode ) => ( { registry } ) => {
 
 	if ( mode === 'visual' ) {
 		speak( __( 'Visual editor selected' ), 'assertive' );
-	} else if ( mode === 'mosaic' ) {
-		speak( __( 'Mosaic view selected' ), 'assertive' );
+	} else if ( mode === 'exploded' ) {
+		speak( __( 'Exploded view selected' ), 'assertive' );
 	}
 };

From 5d105d66b08ec7d8e6e29ff076f25f34b273f481 Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Thu, 14 Apr 2022 10:15:14 +0100
Subject: [PATCH 02/18] Add logic to disable exploded mode if there's only one
 root block

---
 packages/edit-site/src/components/header/index.js | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/packages/edit-site/src/components/header/index.js b/packages/edit-site/src/components/header/index.js
index e59d43bee5a47..bbe178e76f0a9 100644
--- a/packages/edit-site/src/components/header/index.js
+++ b/packages/edit-site/src/components/header/index.js
@@ -6,6 +6,7 @@ import { useViewportMatch } from '@wordpress/compose';
 import {
 	ToolSelector,
 	__experimentalPreviewOptions as PreviewOptions,
+	store as blockEditorStore,
 } from '@wordpress/block-editor';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { PinnedItems } from '@wordpress/interface';
@@ -47,6 +48,7 @@ export default function Header( {
 		listViewShortcut,
 		isLoaded,
 		mode,
+		hasMoreThanOneBlock,
 	} = useSelect( ( select ) => {
 		const {
 			__experimentalGetPreviewDeviceType,
@@ -61,6 +63,7 @@ export default function Header( {
 			editorStore
 		);
 		const { getShortcutRepresentation } = select( keyboardShortcutsStore );
+		const { getBlockCount } = select( blockEditorStore );
 
 		const postType = getEditedPostType();
 		const postId = getEditedPostId();
@@ -79,6 +82,7 @@ export default function Header( {
 				'core/edit-site/toggle-list-view'
 			),
 			mode: getEditorMode(),
+			hasMoreThanOneBlock: getBlockCount() > 1,
 		};
 	}, [] );
 
@@ -106,6 +110,8 @@ export default function Header( {
 	);
 
 	const isFocusMode = templateType === 'wp_template_part';
+	const shouldEnableExplodedViewButton =
+		mode === 'exploded' || ( hasMoreThanOneBlock && mode === 'visual' );
 
 	return (
 		<div className="edit-site-header">
@@ -147,9 +153,7 @@ export default function Header( {
 								shortcut={ listViewShortcut }
 							/>
 							<Button
-								disabled={
-									mode !== 'visual' && mode !== 'exploded'
-								}
+								disabled={ ! shouldEnableExplodedViewButton }
 								className="edit-site-header-toolbar__exploded-view-toggle"
 								icon={ stack }
 								isPressed={ mode === 'exploded' }

From 2b55c24e66788d08db7d0f8878e3ea5db4b09bf7 Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Thu, 14 Apr 2022 10:39:33 +0100
Subject: [PATCH 03/18] Extract exploded view component and add block selection

---
 .../src/components/block-tools/style.scss     |  2 +-
 .../src/components/block-editor/index.js      | 23 +-------
 .../src/components/block-editor/style.scss    | 13 -----
 .../components/block-list-exploded/README.md  |  4 ++
 .../components/block-list-exploded/index.js   | 26 +++++++++
 .../components/block-list-exploded/item.js    | 58 +++++++++++++++++++
 .../components/block-list-exploded/style.scss | 12 ++++
 packages/edit-site/src/style.scss             |  1 +
 8 files changed, 104 insertions(+), 35 deletions(-)
 create mode 100644 packages/edit-site/src/components/block-list-exploded/README.md
 create mode 100644 packages/edit-site/src/components/block-list-exploded/index.js
 create mode 100644 packages/edit-site/src/components/block-list-exploded/item.js
 create mode 100644 packages/edit-site/src/components/block-list-exploded/style.scss

diff --git a/packages/block-editor/src/components/block-tools/style.scss b/packages/block-editor/src/components/block-tools/style.scss
index aa36a5e354d1a..55be1ec786f6d 100644
--- a/packages/block-editor/src/components/block-tools/style.scss
+++ b/packages/block-editor/src/components/block-tools/style.scss
@@ -53,7 +53,7 @@
 .block-editor-default-block-appender,
 .block-editor-block-list__insertion-point-inserter,
 .block-editor-block-list__block-popover-inserter,
-.edit-site-block-editor__block-list-exploded-inserter {
+.edit-site-block-list-exploded__inserter {
 	.block-editor-inserter__toggle.components-button.has-icon {
 		// Basic look
 		background: $gray-900;
diff --git a/packages/edit-site/src/components/block-editor/index.js b/packages/edit-site/src/components/block-editor/index.js
index d88f299faec27..fff64743b1c09 100644
--- a/packages/edit-site/src/components/block-editor/index.js
+++ b/packages/edit-site/src/components/block-editor/index.js
@@ -21,8 +21,6 @@ import {
 	BlockEditorKeyboardShortcuts,
 	store as blockEditorStore,
 	__unstableBlockNameContext,
-	BlockPreview,
-	Inserter,
 } from '@wordpress/block-editor';
 import { useMergeRefs, useViewportMatch } from '@wordpress/compose';
 import { ReusableBlocksMenuItems } from '@wordpress/reusable-blocks';
@@ -42,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',
@@ -196,25 +195,7 @@ export default function BlockEditor( { setIsInserterOpen } ) {
 						/>
 					</ResizableEditor>
 				) }
-				{ editorMode === 'exploded' && (
-					<div className="edit-site-block-editor__block-list-exploded">
-						{ blocks.map( ( block ) => (
-							<div key={ block.clientId }>
-								<div
-									className="edit-site-block-editor__block-list-exploded-inserter"
-									key={ block.clientId }
-								>
-									<Inserter
-										clientId={ block.clientId }
-										__experimentalIsQuick
-										isPrimary
-									/>
-								</div>
-								<BlockPreview blocks={ [ block ] } />
-							</div>
-						) ) }
-					</div>
-				) }
+				{ editorMode === 'exploded' && <BlockListExploded /> }
 				<__unstableBlockSettingsMenuFirstItem>
 					{ ( { onClose } ) => (
 						<BlockInspectorButton onClick={ onClose } />
diff --git a/packages/edit-site/src/components/block-editor/style.scss b/packages/edit-site/src/components/block-editor/style.scss
index 38d32aa46bc71..9830f1e302eac 100644
--- a/packages/edit-site/src/components/block-editor/style.scss
+++ b/packages/edit-site/src/components/block-editor/style.scss
@@ -85,16 +85,3 @@
 		box-shadow: 0 0 0 1px $gray-800, 0 0 0 calc(var(--wp-admin-border-width-focus) + 1px) var(--wp-admin-theme-color);
 	}
 }
-
-.edit-site-block-editor__block-list-exploded {
-	display: flex;
-	flex-direction: column;
-	width: $content-width;
-	margin: auto;
-}
-
-.edit-site-block-editor__block-list-exploded-inserter > div {
-	display: flex;
-	margin: 20px auto;
-	width: fit-content;
-}
diff --git a/packages/edit-site/src/components/block-list-exploded/README.md b/packages/edit-site/src/components/block-list-exploded/README.md
new file mode 100644
index 0000000000000..8ec4ddda30e90
--- /dev/null
+++ b/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.
\ No newline at end of file
diff --git a/packages/edit-site/src/components/block-list-exploded/index.js b/packages/edit-site/src/components/block-list-exploded/index.js
new file mode 100644
index 0000000000000..1a6714a8ad6f4
--- /dev/null
+++ b/packages/edit-site/src/components/block-list-exploded/index.js
@@ -0,0 +1,26 @@
+/**
+ * WordPress dependencies
+ */
+import { store as blockEditorStore } from '@wordpress/block-editor';
+import { useSelect } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import BlockListExplodedItem from './item';
+
+function BlockListExploded() {
+	const blockOrder = useSelect( ( select ) => {
+		return select( blockEditorStore ).getBlockOrder();
+	}, [] );
+
+	return (
+		<div className="edit-site-block-list-exploded">
+			{ blockOrder.map( ( clientId ) => (
+				<BlockListExplodedItem key={ clientId } clientId={ clientId } />
+			) ) }
+		</div>
+	);
+}
+
+export default BlockListExploded;
diff --git a/packages/edit-site/src/components/block-list-exploded/item.js b/packages/edit-site/src/components/block-list-exploded/item.js
new file mode 100644
index 0000000000000..3741d6d4f6c36
--- /dev/null
+++ b/packages/edit-site/src/components/block-list-exploded/item.js
@@ -0,0 +1,58 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	store as blockEditorStore,
+	BlockPreview,
+	Inserter,
+} 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';
+
+function BlockListExplodedItem( { clientId } ) {
+	const { block, blockTitle } = useSelect(
+		( select ) => {
+			const { getBlock } = select( blockEditorStore );
+			const { getBlockType } = select( blocksStore );
+			const _block = getBlock( clientId );
+			const blockType = getBlockType( _block.name );
+			return {
+				block: _block,
+				blockTitle: blockType?.title,
+			};
+		},
+		[ clientId ]
+	);
+	const { selectBlock } = useDispatch( blockEditorStore );
+
+	// translators: %s: Type of block (i.e. Text, Image etc)
+	const blockLabel = sprintf( __( 'Block: %s' ), blockTitle );
+
+	return (
+		<div>
+			<div
+				className="edit-site-block-list-exploded__inserter"
+				key={ block.clientId }
+			>
+				<Inserter
+					clientId={ block.clientId }
+					__experimentalIsQuick
+					isPrimary
+				/>
+			</div>
+			<div
+				role="button"
+				onClick={ () => selectBlock( clientId ) }
+				onKeyPress={ () => selectBlock( clientId ) }
+				aria-label={ blockLabel }
+				tabIndex={ 0 }
+			>
+				<BlockPreview blocks={ [ block ] } />
+			</div>
+		</div>
+	);
+}
+
+export default pure( BlockListExplodedItem );
diff --git a/packages/edit-site/src/components/block-list-exploded/style.scss b/packages/edit-site/src/components/block-list-exploded/style.scss
new file mode 100644
index 0000000000000..021f9830fd1cb
--- /dev/null
+++ b/packages/edit-site/src/components/block-list-exploded/style.scss
@@ -0,0 +1,12 @@
+.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: 20px auto;
+	width: fit-content;
+}
diff --git a/packages/edit-site/src/style.scss b/packages/edit-site/src/style.scss
index b61d06574c7aa..ac1daf0924901 100644
--- a/packages/edit-site/src/style.scss
+++ b/packages/edit-site/src/style.scss
@@ -1,6 +1,7 @@
 @import "../../interface/src/style.scss";
 
 @import "./components/block-editor/style.scss";
+@import "./components/block-list-exploded/style.scss";
 @import "./components/code-editor/style.scss";
 @import "./components/global-styles/style.scss";
 @import "./components/header/style.scss";

From c82fe8e00c73b5cf3fc3c53cf40c05ba9ae7dd32 Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Thu, 14 Apr 2022 11:22:09 +0100
Subject: [PATCH 04/18] Add exploded view toolbar

---
 .../src/components/block-editor/index.js      | 65 ++++++++++---------
 .../components/block-list-exploded/item.js    | 48 +++++++++-----
 .../components/block-list-exploded/style.scss | 48 +++++++++++++-
 .../block-list-exploded/top-toolbar.js        | 25 +++++++
 4 files changed, 138 insertions(+), 48 deletions(-)
 create mode 100644 packages/edit-site/src/components/block-list-exploded/top-toolbar.js

diff --git a/packages/edit-site/src/components/block-editor/index.js b/packages/edit-site/src/components/block-editor/index.js
index fff64743b1c09..8146b4b71ef88 100644
--- a/packages/edit-site/src/components/block-editor/index.js
+++ b/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>
 	);
diff --git a/packages/edit-site/src/components/block-list-exploded/item.js b/packages/edit-site/src/components/block-list-exploded/item.js
index 3741d6d4f6c36..186b7f75d97cf 100644
--- a/packages/edit-site/src/components/block-list-exploded/item.js
+++ b/packages/edit-site/src/components/block-list-exploded/item.js
@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
 /**
  * WordPress dependencies
  */
@@ -5,30 +10,33 @@ 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>
 	);
diff --git a/packages/edit-site/src/components/block-list-exploded/style.scss b/packages/edit-site/src/components/block-list-exploded/style.scss
index 021f9830fd1cb..0d3cf3d689f97 100644
--- a/packages/edit-site/src/components/block-list-exploded/style.scss
+++ b/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;
+		}
+	}
+}
diff --git a/packages/edit-site/src/components/block-list-exploded/top-toolbar.js b/packages/edit-site/src/components/block-list-exploded/top-toolbar.js
new file mode 100644
index 0000000000000..2cdddc419ca41
--- /dev/null
+++ b/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;

From a600fd3160e7affc2fc90f8bd7b807396dfcc90e Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Thu, 14 Apr 2022 11:33:45 +0100
Subject: [PATCH 05/18] Add double click to exit exploded mode

---
 .../src/components/block-list-exploded/item.js       | 12 +++++++++++-
 .../src/components/block-list-exploded/style.scss    |  5 ++++-
 2 files changed, 15 insertions(+), 2 deletions(-)

diff --git a/packages/edit-site/src/components/block-list-exploded/item.js b/packages/edit-site/src/components/block-list-exploded/item.js
index 186b7f75d97cf..2fda6f98379cb 100644
--- a/packages/edit-site/src/components/block-list-exploded/item.js
+++ b/packages/edit-site/src/components/block-list-exploded/item.js
@@ -20,6 +20,7 @@ import { sprintf, __ } from '@wordpress/i18n';
  * Internal dependencies
  */
 import BlockListExplodedTopToolbar from './top-toolbar';
+import { store as editSiteStore } from '../../store';
 
 function BlockListExplodedItem( { clientId } ) {
 	const { block, isSelected } = useSelect(
@@ -34,6 +35,9 @@ function BlockListExplodedItem( { 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 );
@@ -61,7 +65,13 @@ function BlockListExplodedItem( { clientId } ) {
 				) }
 				<div
 					role="button"
-					onClick={ () => selectBlock( clientId ) }
+					onClick={ ( event ) => {
+						if ( event.detail === 1 ) {
+							selectBlock( clientId );
+						} else if ( event.detail === 2 ) {
+							switchEditorMode( 'visual' );
+						}
+					} }
 					onKeyPress={ () => selectBlock( clientId ) }
 					aria-label={ blockLabel }
 					tabIndex={ 0 }
diff --git a/packages/edit-site/src/components/block-list-exploded/style.scss b/packages/edit-site/src/components/block-list-exploded/style.scss
index 0d3cf3d689f97..aff5ea4139ad8 100644
--- a/packages/edit-site/src/components/block-list-exploded/style.scss
+++ b/packages/edit-site/src/components/block-list-exploded/style.scss
@@ -15,13 +15,16 @@
 .edit-site-block-list-exploded__item-container {
 	position: relative;
 
-	&.is-selected::after {
+	::after {
 		content: "";
 		position: absolute;
 		top: 0;
 		left: 0;
 		right: 0;
 		bottom: 0;
+	}
+
+	&.is-selected::after {
 		border: 2px solid var(--wp-admin-theme-color);
 	}
 }

From 2147e471bbe3f9bae06d45d502650fab175c9026 Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Thu, 14 Apr 2022 11:34:51 +0100
Subject: [PATCH 06/18] Add onFocus handler

---
 packages/edit-site/src/components/block-list-exploded/item.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/edit-site/src/components/block-list-exploded/item.js b/packages/edit-site/src/components/block-list-exploded/item.js
index 2fda6f98379cb..f680449ceb942 100644
--- a/packages/edit-site/src/components/block-list-exploded/item.js
+++ b/packages/edit-site/src/components/block-list-exploded/item.js
@@ -73,6 +73,7 @@ function BlockListExplodedItem( { clientId } ) {
 						}
 					} }
 					onKeyPress={ () => selectBlock( clientId ) }
+					onFocus={ () => selectBlock( clientId ) }
 					aria-label={ blockLabel }
 					tabIndex={ 0 }
 				>

From e0b38c32567b27c15651136e1af6408c28da844d Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Thu, 14 Apr 2022 13:19:47 +0100
Subject: [PATCH 07/18] Space things properly for locked items

---
 .../edit-site/src/components/block-list-exploded/item.js  | 4 +++-
 .../src/components/block-list-exploded/style.scss         | 8 +++++++-
 .../src/components/block-list-exploded/top-toolbar.js     | 4 ++--
 3 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/packages/edit-site/src/components/block-list-exploded/item.js b/packages/edit-site/src/components/block-list-exploded/item.js
index f680449ceb942..09d5156fe805a 100644
--- a/packages/edit-site/src/components/block-list-exploded/item.js
+++ b/packages/edit-site/src/components/block-list-exploded/item.js
@@ -15,6 +15,7 @@ import {
 import { useSelect, useDispatch } from '@wordpress/data';
 import { pure } from '@wordpress/compose';
 import { sprintf, __ } from '@wordpress/i18n';
+import { useMemo } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -41,6 +42,7 @@ function BlockListExplodedItem( { clientId } ) {
 
 	// translators: %s: Type of block (i.e. Text, Image etc)
 	const blockLabel = sprintf( __( 'Block: %s' ), title );
+	const blocksToPreview = useMemo( () => [ block ], [ block ] );
 
 	return (
 		<div>
@@ -77,7 +79,7 @@ function BlockListExplodedItem( { clientId } ) {
 					aria-label={ blockLabel }
 					tabIndex={ 0 }
 				>
-					<BlockPreview blocks={ [ block ] } />
+					<BlockPreview blocks={ blocksToPreview } />
 				</div>
 			</div>
 		</div>
diff --git a/packages/edit-site/src/components/block-list-exploded/style.scss b/packages/edit-site/src/components/block-list-exploded/style.scss
index aff5ea4139ad8..aa8fd1afef967 100644
--- a/packages/edit-site/src/components/block-list-exploded/style.scss
+++ b/packages/edit-site/src/components/block-list-exploded/style.scss
@@ -37,7 +37,6 @@
 	color: $white;
 	display: flex;
 	align-items: center;
-	gap: $grid-unit-10;
 	padding-left: $grid-unit-20;
 
 	.block-editor-block-mover__move-button-container {
@@ -59,3 +58,10 @@
 		}
 	}
 }
+
+.edit-site-block-list-exploded__item-title {
+	display: flex;
+	align-items: center;
+	gap: $grid-unit-10;
+	padding-right: $grid-unit-20;
+}
diff --git a/packages/edit-site/src/components/block-list-exploded/top-toolbar.js b/packages/edit-site/src/components/block-list-exploded/top-toolbar.js
index 2cdddc419ca41..ab732f112eb9f 100644
--- a/packages/edit-site/src/components/block-list-exploded/top-toolbar.js
+++ b/packages/edit-site/src/components/block-list-exploded/top-toolbar.js
@@ -13,8 +13,8 @@ function BlockListExplodedTopToolbar( { clientId } ) {
 
 	return (
 		<div className="edit-site-block-list-exploded__item-top-toolbar">
-			<BlockIcon icon={ icon } showColors />
-			<span>
+			<span className="edit-site-block-list-exploded__item-title">
+				<BlockIcon icon={ icon } showColors />
 				<BlockTitle clientId={ clientId } />
 			</span>
 			<BlockMover clientIds={ [ clientId ] } hideDragHandle />

From 905a705319030c3c3223fe1c4f5ec5ec487752ce Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Thu, 14 Apr 2022 13:20:02 +0100
Subject: [PATCH 08/18] Close the list view when opening the exploded view

---
 packages/edit-site/src/components/header/index.js | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/packages/edit-site/src/components/header/index.js b/packages/edit-site/src/components/header/index.js
index bbe178e76f0a9..896e9f286e9e0 100644
--- a/packages/edit-site/src/components/header/index.js
+++ b/packages/edit-site/src/components/header/index.js
@@ -159,13 +159,14 @@ export default function Header( {
 								isPressed={ mode === 'exploded' }
 								/* translators: button label text should, if possible, be under 16 characters. */
 								label={ __( 'Exploded View' ) }
-								onClick={ () =>
+								onClick={ () => {
+									setIsListViewOpened( false );
 									switchEditorMode(
 										mode === 'visual'
 											? 'exploded'
 											: 'visual'
-									)
-								}
+									);
+								} }
 							/>
 						</>
 					) }

From ed0992482d1ab91b7f994f898923ce5a2e2daaec Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Thu, 14 Apr 2022 13:26:59 +0100
Subject: [PATCH 09/18] ADd block lock toolbar

---
 packages/block-editor/README.md               |  4 ++++
 packages/block-editor/src/components/index.js |  1 +
 .../components/block-list-exploded/style.scss | 24 +++++++------------
 .../block-list-exploded/top-toolbar.js        |  6 +++--
 4 files changed, 18 insertions(+), 17 deletions(-)

diff --git a/packages/block-editor/README.md b/packages/block-editor/README.md
index bb4dc1725bc3f..ecd6db1713a6a 100644
--- a/packages/block-editor/README.md
+++ b/packages/block-editor/README.md
@@ -173,6 +173,10 @@ _Related_
 
 Undocumented declaration.
 
+### BlockLockToolbar
+
+Undocumented declaration.
+
 ### BlockMover
 
 _Related_
diff --git a/packages/block-editor/src/components/index.js b/packages/block-editor/src/components/index.js
index 8e6395f5b5d70..034874145ae08 100644
--- a/packages/block-editor/src/components/index.js
+++ b/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,
diff --git a/packages/edit-site/src/components/block-list-exploded/style.scss b/packages/edit-site/src/components/block-list-exploded/style.scss
index aa8fd1afef967..1cc7206d521fc 100644
--- a/packages/edit-site/src/components/block-list-exploded/style.scss
+++ b/packages/edit-site/src/components/block-list-exploded/style.scss
@@ -37,8 +37,10 @@
 	color: $white;
 	display: flex;
 	align-items: center;
+	gap: $grid-unit-20;
 	padding-left: $grid-unit-20;
 
+	.block-editor-block-lock-toolbar,
 	.block-editor-block-mover__move-button-container {
 		background: transparent;
 		color: inherit;
@@ -47,21 +49,13 @@
 		.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;
-		}
 	}
-}
 
-.edit-site-block-list-exploded__item-title {
-	display: flex;
-	align-items: center;
-	gap: $grid-unit-10;
-	padding-right: $grid-unit-20;
+	// 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;
+	}
 }
diff --git a/packages/edit-site/src/components/block-list-exploded/top-toolbar.js b/packages/edit-site/src/components/block-list-exploded/top-toolbar.js
index ab732f112eb9f..cd2ffe42d22d9 100644
--- a/packages/edit-site/src/components/block-list-exploded/top-toolbar.js
+++ b/packages/edit-site/src/components/block-list-exploded/top-toolbar.js
@@ -4,6 +4,7 @@
 import {
 	BlockTitle,
 	BlockMover,
+	BlockLockToolbar,
 	BlockIcon,
 	useBlockDisplayInformation,
 } from '@wordpress/block-editor';
@@ -13,10 +14,11 @@ function BlockListExplodedTopToolbar( { clientId } ) {
 
 	return (
 		<div className="edit-site-block-list-exploded__item-top-toolbar">
-			<span className="edit-site-block-list-exploded__item-title">
-				<BlockIcon icon={ icon } showColors />
+			<BlockIcon icon={ icon } showColors />
+			<span>
 				<BlockTitle clientId={ clientId } />
 			</span>
+			<BlockLockToolbar clientId={ clientId } />
 			<BlockMover clientIds={ [ clientId ] } hideDragHandle />
 		</div>
 	);

From 0d996d3b2ecd09272f82ea624f21e83535476a79 Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Thu, 14 Apr 2022 13:30:28 +0100
Subject: [PATCH 10/18] Add hover style

---
 .../src/components/block-list-exploded/style.scss          | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/packages/edit-site/src/components/block-list-exploded/style.scss b/packages/edit-site/src/components/block-list-exploded/style.scss
index 1cc7206d521fc..e84e830a3c63d 100644
--- a/packages/edit-site/src/components/block-list-exploded/style.scss
+++ b/packages/edit-site/src/components/block-list-exploded/style.scss
@@ -15,13 +15,18 @@
 .edit-site-block-list-exploded__item-container {
 	position: relative;
 
-	::after {
+	&::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 {

From 61d74b546eba6af140fca6c1185de801980ba537 Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Thu, 14 Apr 2022 14:50:31 +0100
Subject: [PATCH 11/18] Aff focus on select

---
 .../src/components/block-list-exploded/item.js         | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/packages/edit-site/src/components/block-list-exploded/item.js b/packages/edit-site/src/components/block-list-exploded/item.js
index 09d5156fe805a..c684d3784bdad 100644
--- a/packages/edit-site/src/components/block-list-exploded/item.js
+++ b/packages/edit-site/src/components/block-list-exploded/item.js
@@ -15,7 +15,7 @@ import {
 import { useSelect, useDispatch } from '@wordpress/data';
 import { pure } from '@wordpress/compose';
 import { sprintf, __ } from '@wordpress/i18n';
-import { useMemo } from '@wordpress/element';
+import { useMemo, useRef, useEffect } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -24,6 +24,7 @@ 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 );
@@ -44,6 +45,12 @@ function BlockListExplodedItem( { clientId } ) {
 	const blockLabel = sprintf( __( 'Block: %s' ), title );
 	const blocksToPreview = useMemo( () => [ block ], [ block ] );
 
+	useEffect( () => {
+		if ( isSelected ) {
+			blockWrapper.current.focus();
+		}
+	}, [ isSelected ] );
+
 	return (
 		<div>
 			<div
@@ -66,6 +73,7 @@ function BlockListExplodedItem( { clientId } ) {
 					<BlockListExplodedTopToolbar clientId={ clientId } />
 				) }
 				<div
+					ref={ blockWrapper }
 					role="button"
 					onClick={ ( event ) => {
 						if ( event.detail === 1 ) {

From 4e9395fbc1f8dad314499a5969e493161ee294ed Mon Sep 17 00:00:00 2001
From: James Koster <james@jameskoster.co.uk>
Date: Thu, 14 Apr 2022 16:04:19 +0100
Subject: [PATCH 12/18] Toolbar styling

Positioning (-60px above Section)
Border radius
---
 .../edit-site/src/components/block-list-exploded/style.scss    | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/edit-site/src/components/block-list-exploded/style.scss b/packages/edit-site/src/components/block-list-exploded/style.scss
index e84e830a3c63d..eeb80fdc59458 100644
--- a/packages/edit-site/src/components/block-list-exploded/style.scss
+++ b/packages/edit-site/src/components/block-list-exploded/style.scss
@@ -36,7 +36,7 @@
 
 .edit-site-block-list-exploded__item-top-toolbar {
 	position: absolute;
-	top: -$block-toolbar-height - $grid-unit-20;
+	top: -$block-toolbar-height - $grid-unit-15;
 	height: $block-toolbar-height;
 	background: var(--wp-admin-theme-color);
 	color: $white;
@@ -44,6 +44,7 @@
 	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 {

From d902a59e1bce68cd7ffc9b6fc794c051b15ba8bf Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Thu, 14 Apr 2022 16:21:14 +0100
Subject: [PATCH 13/18] Make the inserter blue

---
 .../src/components/block-tools/style.scss            | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/packages/block-editor/src/components/block-tools/style.scss b/packages/block-editor/src/components/block-tools/style.scss
index 55be1ec786f6d..c4643421514b6 100644
--- a/packages/block-editor/src/components/block-tools/style.scss
+++ b/packages/block-editor/src/components/block-tools/style.scss
@@ -71,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;
+		}
 	}
 }
 

From 030a5c656467b83160e9e78cd91972bcfce002bf Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Fri, 15 Apr 2022 08:16:32 +0100
Subject: [PATCH 14/18] Add inserter at the end

---
 .../components/block-list-exploded/index.js   | 15 ++++-
 .../components/block-list-exploded/item.js    | 59 ++++++++-----------
 .../components/block-list-exploded/style.scss |  1 -
 3 files changed, 36 insertions(+), 39 deletions(-)

diff --git a/packages/edit-site/src/components/block-list-exploded/index.js b/packages/edit-site/src/components/block-list-exploded/index.js
index 1a6714a8ad6f4..444ef0e17cd1b 100644
--- a/packages/edit-site/src/components/block-list-exploded/index.js
+++ b/packages/edit-site/src/components/block-list-exploded/index.js
@@ -1,14 +1,21 @@
 /**
  * WordPress dependencies
  */
-import { store as blockEditorStore } from '@wordpress/block-editor';
+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();
@@ -17,8 +24,12 @@ function BlockListExploded() {
 	return (
 		<div className="edit-site-block-list-exploded">
 			{ blockOrder.map( ( clientId ) => (
-				<BlockListExplodedItem key={ clientId } clientId={ clientId } />
+				<div key={ clientId }>
+					<InserterBeforeBlock clientId={ clientId } />
+					<BlockListExplodedItem clientId={ clientId } />
+				</div>
 			) ) }
+			<InserterBeforeBlock />
 		</div>
 	);
 }
diff --git a/packages/edit-site/src/components/block-list-exploded/item.js b/packages/edit-site/src/components/block-list-exploded/item.js
index c684d3784bdad..1a0ec7357748e 100644
--- a/packages/edit-site/src/components/block-list-exploded/item.js
+++ b/packages/edit-site/src/components/block-list-exploded/item.js
@@ -9,7 +9,6 @@ import classnames from 'classnames';
 import {
 	store as blockEditorStore,
 	BlockPreview,
-	Inserter,
 	useBlockDisplayInformation,
 } from '@wordpress/block-editor';
 import { useSelect, useDispatch } from '@wordpress/data';
@@ -52,43 +51,31 @@ function BlockListExplodedItem( { clientId } ) {
 	}, [ isSelected ] );
 
 	return (
-		<div>
+		<div
+			className={ classnames(
+				'edit-site-block-list-exploded__item-container',
+				{ 'is-selected': isSelected }
+			) }
+		>
+			{ isSelected && (
+				<BlockListExplodedTopToolbar clientId={ clientId } />
+			) }
 			<div
-				className="edit-site-block-list-exploded__inserter"
-				key={ block.clientId }
+				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 }
 			>
-				<Inserter
-					clientId={ block.clientId }
-					__experimentalIsQuick
-					isPrimary
-				/>
-			</div>
-			<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>
+				<BlockPreview blocks={ blocksToPreview } />
 			</div>
 		</div>
 	);
diff --git a/packages/edit-site/src/components/block-list-exploded/style.scss b/packages/edit-site/src/components/block-list-exploded/style.scss
index eeb80fdc59458..207eb68d9b766 100644
--- a/packages/edit-site/src/components/block-list-exploded/style.scss
+++ b/packages/edit-site/src/components/block-list-exploded/style.scss
@@ -3,7 +3,6 @@
 	flex-direction: column;
 	width: $content-width;
 	margin: auto;
-	padding-bottom: 30px;
 }
 
 .edit-site-block-list-exploded__inserter > div {

From 9dd0a555c3e150deb61441156c8f3b5fb31a885c Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Fri, 15 Apr 2022 08:18:50 +0100
Subject: [PATCH 15/18] Show patterns in all inserters

---
 .../block-editor/src/components/inserter/quick-inserter.js    | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/packages/block-editor/src/components/inserter/quick-inserter.js b/packages/block-editor/src/components/inserter/quick-inserter.js
index e3973cba6ac1c..bef05b2ae924e 100644
--- a/packages/block-editor/src/components/inserter/quick-inserter.js
+++ b/packages/block-editor/src/components/inserter/quick-inserter.js
@@ -65,9 +65,7 @@ export default function QuickInserter( {
 				setInserterIsOpened: settings.__experimentalSetIsInserterOpened,
 				prioritizePatterns:
 					settings.__experimentalPreferPatternsOnRoot &&
-					! rootClientId &&
-					index > 0 &&
-					( index < blockCount || blockCount === 0 ),
+					! rootClientId,
 				insertionIndex: index === -1 ? blockCount : index,
 			};
 		},

From e05433fc78203f3da54b8b027e4296b6548911ff Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Fri, 15 Apr 2022 08:48:24 +0100
Subject: [PATCH 16/18] Clarify intent of event.detail using booleans

---
 .../edit-site/src/components/block-list-exploded/item.js    | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/packages/edit-site/src/components/block-list-exploded/item.js b/packages/edit-site/src/components/block-list-exploded/item.js
index 1a0ec7357748e..678597e03d5e2 100644
--- a/packages/edit-site/src/components/block-list-exploded/item.js
+++ b/packages/edit-site/src/components/block-list-exploded/item.js
@@ -64,9 +64,11 @@ function BlockListExplodedItem( { clientId } ) {
 				ref={ blockWrapper }
 				role="button"
 				onClick={ ( event ) => {
-					if ( event.detail === 1 ) {
+					const isFirstClick = event.detail === 1;
+					const isDoubleClick = event.detail === 2;
+					if ( isFirstClick ) {
 						selectBlock( clientId );
-					} else if ( event.detail === 2 ) {
+					} else if ( isDoubleClick ) {
 						switchEditorMode( 'visual' );
 					}
 				} }

From 109b5fc1921e40c3ba294594e677a5d2db37667f Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Fri, 15 Apr 2022 09:36:44 +0100
Subject: [PATCH 17/18] Fix the width of the exploded view

---
 .../edit-site/src/components/block-list-exploded/style.scss     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/edit-site/src/components/block-list-exploded/style.scss b/packages/edit-site/src/components/block-list-exploded/style.scss
index 207eb68d9b766..9f604c763b163 100644
--- a/packages/edit-site/src/components/block-list-exploded/style.scss
+++ b/packages/edit-site/src/components/block-list-exploded/style.scss
@@ -1,7 +1,7 @@
 .edit-site-block-list-exploded {
 	display: flex;
 	flex-direction: column;
-	width: $content-width;
+	width: min(#{$content-width}, calc(100% - #{$grid-unit-40}));
 	margin: auto;
 }
 

From 2a9f5125cc29af6194f70129519ea19610ef7870 Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Fri, 15 Apr 2022 09:43:49 +0100
Subject: [PATCH 18/18] Better scaling

---
 .../src/components/block-preview/README.md    | 13 +++-------
 .../src/components/block-preview/auto.js      | 11 +++++++--
 .../src/components/block-preview/index.js     | 19 ++++++---------
 .../src/components/block-preview/live.js      | 24 -------------------
 .../components/block-list-exploded/item.js    |  5 +++-
 5 files changed, 23 insertions(+), 49 deletions(-)
 delete mode 100644 packages/block-editor/src/components/block-preview/live.js

diff --git a/packages/block-editor/src/components/block-preview/README.md b/packages/block-editor/src/components/block-preview/README.md
index 6df2cb6773878..f04053b1e5df6 100644
--- a/packages/block-editor/src/components/block-preview/README.md
+++ b/packages/block-editor/src/components/block-preview/README.md
@@ -35,16 +35,9 @@ Width of the preview container in pixels. Controls at what size the blocks will
 
 Padding for the preview container body.
 
-### `__experimentalLive`
+### `__experimentalScale`
 
 -   **Type** `Boolean`
--   **Default:** `false`
+-   **Default:** `true`
 
-Enables displaying previews without an iframe container.
-
-### `__experimentalOnClick`
-
--   **Type** `Function`
--   **Default:** `undefined`
-
-Use this callback in combination with `__experimentalLive`. The callback is attached to the preview container element.
+Enables displaying previews without an iframe container.
\ No newline at end of file
diff --git a/packages/block-editor/src/components/block-preview/auto.js b/packages/block-editor/src/components/block-preview/auto.js
index d2eca43010a7c..c004bb9f8d4c9 100644
--- a/packages/block-editor/src/components/block-preview/auto.js
+++ b/packages/block-editor/src/components/block-preview/auto.js
@@ -23,6 +23,7 @@ function AutoBlockPreview( {
 	viewportWidth,
 	__experimentalPadding,
 	__experimentalMinHeight,
+	__experimentalScale = true,
 } ) {
 	const [
 		containerResizeListener,
@@ -58,7 +59,10 @@ function AutoBlockPreview( {
 	// Initialize on render instead of module top level, to avoid circular dependency issues.
 	MemoizedBlockList = MemoizedBlockList || pure( BlockList );
 
-	const scale = containerWidth / viewportWidth;
+	const scale =
+		__experimentalScale === true
+			? containerWidth / viewportWidth
+			: __experimentalScale;
 
 	return (
 		<div className="block-editor-block-preview__container">
@@ -97,7 +101,10 @@ function AutoBlockPreview( {
 					tabIndex={ -1 }
 					style={ {
 						position: 'absolute',
-						width: viewportWidth,
+						width:
+							__experimentalScale === true
+								? viewportWidth
+								: 'calc( 100% / ' + __experimentalScale + ' )',
 						height: contentHeight,
 						pointerEvents: 'none',
 						// This is a catch-all max-height for patterns.
diff --git a/packages/block-editor/src/components/block-preview/index.js b/packages/block-editor/src/components/block-preview/index.js
index d27f6235a658c..37b4fd4ef280b 100644
--- a/packages/block-editor/src/components/block-preview/index.js
+++ b/packages/block-editor/src/components/block-preview/index.js
@@ -18,7 +18,6 @@ import { memo, useMemo } from '@wordpress/element';
  * Internal dependencies
  */
 import BlockEditorProvider from '../provider';
-import LiveBlockPreview from './live';
 import AutoHeightBlockPreview from './auto';
 import { store as blockEditorStore } from '../../store';
 import { BlockListItems } from '../block-list';
@@ -27,8 +26,7 @@ export function BlockPreview( {
 	blocks,
 	__experimentalPadding = 0,
 	viewportWidth = 1200,
-	__experimentalLive = false,
-	__experimentalOnClick,
+	__experimentalScale = true,
 	__experimentalMinHeight,
 } ) {
 	const originalSettings = useSelect(
@@ -46,15 +44,12 @@ export function BlockPreview( {
 	}
 	return (
 		<BlockEditorProvider value={ renderedBlocks } settings={ settings }>
-			{ __experimentalLive ? (
-				<LiveBlockPreview onClick={ __experimentalOnClick } />
-			) : (
-				<AutoHeightBlockPreview
-					viewportWidth={ viewportWidth }
-					__experimentalPadding={ __experimentalPadding }
-					__experimentalMinHeight={ __experimentalMinHeight }
-				/>
-			) }
+			<AutoHeightBlockPreview
+				viewportWidth={ viewportWidth }
+				__experimentalPadding={ __experimentalPadding }
+				__experimentalMinHeight={ __experimentalMinHeight }
+				__experimentalScale={ __experimentalScale }
+			/>
 		</BlockEditorProvider>
 	);
 }
diff --git a/packages/block-editor/src/components/block-preview/live.js b/packages/block-editor/src/components/block-preview/live.js
deleted file mode 100644
index 792740bb2c02b..0000000000000
--- a/packages/block-editor/src/components/block-preview/live.js
+++ /dev/null
@@ -1,24 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { Disabled } from '@wordpress/components';
-
-/**
- * Internal dependencies
- */
-import BlockList from '../block-list';
-
-export default function LiveBlockPreview( { onClick } ) {
-	return (
-		<div
-			tabIndex={ 0 }
-			role="button"
-			onClick={ onClick }
-			onKeyPress={ onClick }
-		>
-			<Disabled>
-				<BlockList />
-			</Disabled>
-		</div>
-	);
-}
diff --git a/packages/edit-site/src/components/block-list-exploded/item.js b/packages/edit-site/src/components/block-list-exploded/item.js
index 678597e03d5e2..d7278da38171d 100644
--- a/packages/edit-site/src/components/block-list-exploded/item.js
+++ b/packages/edit-site/src/components/block-list-exploded/item.js
@@ -77,7 +77,10 @@ function BlockListExplodedItem( { clientId } ) {
 				aria-label={ blockLabel }
 				tabIndex={ 0 }
 			>
-				<BlockPreview blocks={ blocksToPreview } />
+				<BlockPreview
+					blocks={ blocksToPreview }
+					__experimentalScale={ 0.8 }
+				/>
 			</div>
 		</div>
 	);