Nav offcanvas editor: add simple back button to inspector controls (#…

…45852) * Add very simple back button to block inspector * Enable for experiment only * Change button description label
WordPress · Nov 18, 2022 · 9e6e8c9 · 9e6e8c9
1 parent aa0a9cf
commit 9e6e8c9
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 4 deletions.
diff --git a/packages/block-editor/src/components/block-card/index.js b/packages/block-editor/src/components/block-card/index.js
@@ -2,22 +2,48 @@
  * 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',
 			alternative: '`title, icon and description` properties',
 		} );
 		( { title, icon, description } = blockType );
 	}
+
+	const isOffCanvasNavigationEditorEnabled =
+		window?.__experimentalEnableOffCanvasNavigationEditor === true;
+
 	return (
 		<div className="block-editor-block-card">
+			{ isOffCanvasNavigationEditorEnabled && parentBlockClientId && (
+				<Button
+					onClick={ handleBackButton }
+					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.
+						{ 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
@@ -136,13 +136,15 @@ const BlockInspector = ( { showNoBlockSelectedMessage = true } ) => {
 		selectedBlockClientId,
 		blockType,
 		topLevelLockedBlock,
+		parentBlockClientId,
 	} = useSelect( ( select ) => {
 		const {
 			getSelectedBlockClientId,
 			getSelectedBlockCount,
 			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