From 3cd445f60f73cb2d918bbdacc376fc5ff1054c3e Mon Sep 17 00:00:00 2001
From: Dave Smith <getdavemail@gmail.com>
Date: Thu, 17 Nov 2022 13:04:56 +0000
Subject: [PATCH 1/3] Add very simple back button to block inspector

---
 .../src/components/block-card/index.js        | 27 +++++++++++++++++--
 .../src/components/block-inspector/index.js   | 23 ++++++++++++++--
 2 files changed, 46 insertions(+), 4 deletions(-)

diff --git a/packages/block-editor/src/components/block-card/index.js b/packages/block-editor/src/components/block-card/index.js
index 21832629b9557f..7c4fbb269a1a32 100644
--- a/packages/block-editor/src/components/block-card/index.js
+++ b/packages/block-editor/src/components/block-card/index.js
@@ -2,13 +2,22 @@
  * WordPress dependencies
  */
 import deprecated from '@wordpress/deprecated';
-
+import { Button } from '@wordpress/components';
+import { chevronLeft, chevronRight } from '@wordpress/icons';
+import { __, isRTL } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
 import BlockIcon from '../block-icon';
 
-function BlockCard( { title, icon, description, blockType } ) {
+function BlockCard( {
+	title,
+	icon,
+	description,
+	blockType,
+	parentBlockClientId,
+	handleBackButton,
+} ) {
 	if ( blockType ) {
 		deprecated( '`blockType` property in `BlockCard component`', {
 			since: '5.7',
@@ -16,8 +25,22 @@ function BlockCard( { title, icon, description, blockType } ) {
 		} );
 		( { title, icon, description } = blockType );
 	}
+
 	return (
 		<div className="block-editor-block-card">
+			{ parentBlockClientId && (
+				<Button
+					onClick={ handleBackButton }
+					label={ __( 'Navigate to the previous view' ) }
+					style={
+						// TODO: This style override is also used in ToolsPanelHeader.
+						// It should be supported out-of-the-box by Button.
+						{ minWidth: 24, padding: 0 }
+					}
+					icon={ isRTL() ? chevronRight : chevronLeft }
+					isSmall
+				/>
+			) }
 			<BlockIcon icon={ icon } showColors />
 			<div className="block-editor-block-card__content">
 				<h2 className="block-editor-block-card__title">{ title }</h2>
diff --git a/packages/block-editor/src/components/block-inspector/index.js b/packages/block-editor/src/components/block-inspector/index.js
index f48819ec4a02b6..c8ed85f2fd51bc 100644
--- a/packages/block-editor/src/components/block-inspector/index.js
+++ b/packages/block-editor/src/components/block-inspector/index.js
@@ -136,6 +136,7 @@ const BlockInspector = ( { showNoBlockSelectedMessage = true } ) => {
 		selectedBlockClientId,
 		blockType,
 		topLevelLockedBlock,
+		parentBlockClientId,
 	} = useSelect( ( select ) => {
 		const {
 			getSelectedBlockClientId,
@@ -143,6 +144,7 @@ const BlockInspector = ( { showNoBlockSelectedMessage = true } ) => {
 			getBlockName,
 			__unstableGetContentLockingParent,
 			getTemplateLock,
+			getBlockParents,
 		} = select( blockEditorStore );
 
 		const _selectedBlockClientId = getSelectedBlockClientId();
@@ -161,6 +163,10 @@ const BlockInspector = ( { showNoBlockSelectedMessage = true } ) => {
 				( getTemplateLock( _selectedBlockClientId ) === 'contentOnly'
 					? _selectedBlockClientId
 					: undefined ),
+			parentBlockClientId: getBlockParents(
+				_selectedBlockClientId,
+				true
+			)[ 0 ],
 		};
 	}, [] );
 
@@ -230,11 +236,16 @@ const BlockInspector = ( { showNoBlockSelectedMessage = true } ) => {
 		<BlockInspectorSingleBlock
 			clientId={ selectedBlockClientId }
 			blockName={ blockType.name }
+			parentBlockClientId={ parentBlockClientId }
 		/>
 	);
 };
 
-const BlockInspectorSingleBlock = ( { clientId, blockName } ) => {
+const BlockInspectorSingleBlock = ( {
+	clientId,
+	blockName,
+	parentBlockClientId,
+} ) => {
 	const showTabs = window?.__experimentalEnableBlockInspectorTabs;
 
 	const hasBlockStyles = useSelect(
@@ -247,9 +258,17 @@ const BlockInspectorSingleBlock = ( { clientId, blockName } ) => {
 	);
 	const blockInformation = useBlockDisplayInformation( clientId );
 
+	const { selectBlock } = useDispatch( blockEditorStore );
+
 	return (
 		<div className="block-editor-block-inspector">
-			<BlockCard { ...blockInformation } />
+			<BlockCard
+				{ ...blockInformation }
+				parentBlockClientId={ parentBlockClientId }
+				handleBackButton={ () => {
+					selectBlock( parentBlockClientId );
+				} }
+			/>
 			<BlockVariationTransforms blockClientId={ clientId } />
 			{ showTabs && (
 				<InspectorControlsTabs

From d612428667181334ff11111268e6125dfc181b7d Mon Sep 17 00:00:00 2001
From: Dave Smith <getdavemail@gmail.com>
Date: Thu, 17 Nov 2022 13:06:38 +0000
Subject: [PATCH 2/3] Enable for experiment only

---
 packages/block-editor/src/components/block-card/index.js | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/packages/block-editor/src/components/block-card/index.js b/packages/block-editor/src/components/block-card/index.js
index 7c4fbb269a1a32..c46aa782fc413f 100644
--- a/packages/block-editor/src/components/block-card/index.js
+++ b/packages/block-editor/src/components/block-card/index.js
@@ -26,9 +26,12 @@ function BlockCard( {
 		( { title, icon, description } = blockType );
 	}
 
+	const isOffCanvasNavigationEditorEnabled =
+		window?.__experimentalEnableOffCanvasNavigationEditor === true;
+
 	return (
 		<div className="block-editor-block-card">
-			{ parentBlockClientId && (
+			{ isOffCanvasNavigationEditorEnabled && parentBlockClientId && (
 				<Button
 					onClick={ handleBackButton }
 					label={ __( 'Navigate to the previous view' ) }

From dc213edb326bd5ceec58ca82cde5cf7c73741e63 Mon Sep 17 00:00:00 2001
From: Dave Smith <getdavemail@gmail.com>
Date: Thu, 17 Nov 2022 13:07:15 +0000
Subject: [PATCH 3/3] Change button description label

---
 packages/block-editor/src/components/block-card/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/block-editor/src/components/block-card/index.js b/packages/block-editor/src/components/block-card/index.js
index c46aa782fc413f..6362b1b4ca2c7c 100644
--- a/packages/block-editor/src/components/block-card/index.js
+++ b/packages/block-editor/src/components/block-card/index.js
@@ -34,7 +34,7 @@ function BlockCard( {
 			{ isOffCanvasNavigationEditorEnabled && parentBlockClientId && (
 				<Button
 					onClick={ handleBackButton }
-					label={ __( 'Navigate to the previous view' ) }
+					label={ __( 'Navigate to parent block' ) }
 					style={
 						// TODO: This style override is also used in ToolsPanelHeader.
 						// It should be supported out-of-the-box by Button.