Add button on toolbar to toggle show/hide block inspector (#39090)

* Add button on toolbar to toggle show/hide block inspector

* Move changelog

* Copy drawerright icon from @wordpress/icons

packages/js/product-editor/changelog/add-show-hide-block-inspector

@@ -0,0 +1,4 @@
+Significance: minor
+Type: add
+
+Add button on product description toolbar to show and hide block inspector

packages/js/product-editor/src/components/iframe-editor/context.ts

@@ -8,9 +8,11 @@ type EditorContextType = {
 	hasUndo: boolean;
 	isDocumentOverviewOpened: boolean;
 	isInserterOpened: boolean;
+	isSidebarOpened: boolean;
 	redo: () => void;
 	setIsDocumentOverviewOpened: ( value: boolean ) => void;
 	setIsInserterOpened: ( value: boolean ) => void;
+	setIsSidebarOpened: ( value: boolean ) => void;
 	undo: () => void;
 };
 
@@ -19,8 +21,10 @@ export const EditorContext = createContext< EditorContextType >( {
 	hasUndo: false,
 	isDocumentOverviewOpened: false,
 	isInserterOpened: false,
+	isSidebarOpened: true,
 	redo: () => {},
 	setIsDocumentOverviewOpened: () => {},
 	setIsInserterOpened: () => {},
+	setIsSidebarOpened: () => {},
 	undo: () => {},
 } );

packages/js/product-editor/src/components/iframe-editor/header-toolbar/drawer-right.tsx

@@ -0,0 +1,24 @@
+/**
+ * External dependencies
+ */
+import { createElement } from '@wordpress/element';
+
+// Copied from @wordpress/icons@wp-6.2. We can delete this after we update to this version.
+const drawerRight = (
+	<svg
+		width="24"
+		height="24"
+		xmlns="http://www.w3.org/2000/svg"
+		viewBox="0 0 24 24"
+		aria-hidden="true"
+		focusable="false"
+	>
+		<path
+			fillRule="evenodd"
+			clipRule="evenodd"
+			d="M18 4H6c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm-4 14.5H6c-.3 0-.5-.2-.5-.5V6c0-.3.2-.5.5-.5h8v13zm4.5-.5c0 .3-.2.5-.5.5h-2.5v-13H18c.3 0 .5.2.5.5v12z"
+		/>
+	</svg>
+);
+
+export default drawerRight;

packages/js/product-editor/src/components/iframe-editor/header-toolbar/header-toolbar.scss

@@ -4,6 +4,7 @@
     border-bottom: 1px solid $gray-400;
     display: flex;
     align-items: center;
+	justify-content: space-between;
 
     .woocommerce-iframe-editor__header-toolbar-inserter-toggle.components-button.has-icon {
         height: 32px;
@@ -28,5 +29,8 @@
 
     &-left {
         padding-left: $gap-small;
-    }    
+    }
+	&-right {
+        padding-right: $gap-small;
+    }
 }

packages/js/product-editor/src/components/iframe-editor/header-toolbar/header-toolbar.tsx

@@ -32,6 +32,7 @@ import { EditorContext } from '../context';
 import EditorHistoryRedo from './editor-history-redo';
 import EditorHistoryUndo from './editor-history-undo';
 import { DocumentOverview } from './document-overview';
+import { ShowBlockInspectorPanel } from './show-block-inspector-panel';
 
 export function HeaderToolbar() {
 	const { isInserterOpened, setIsInserterOpened } =
@@ -119,6 +120,9 @@ export function HeaderToolbar() {
 					</>
 				) }
 			</div>
+			<div className="woocommerce-iframe-editor__header-toolbar-right">
+				<ToolbarItem as={ ShowBlockInspectorPanel } />
+			</div>
 		</NavigableToolbar>
 	);
 }

packages/js/product-editor/src/components/iframe-editor/header-toolbar/show-block-inspector-panel.tsx

@@ -0,0 +1,38 @@
+/**
+ * External dependencies
+ */
+import { Button } from '@wordpress/components';
+import { createElement, forwardRef, useContext } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import { Ref } from 'react';
+
+/**
+ * Internal dependencies
+ */
+import { EditorContext } from '../context';
+import drawerRight from './drawer-right';
+
+export const ShowBlockInspectorPanel = forwardRef(
+	function ForwardedRefSidebarOpened(
+		props: { [ key: string ]: unknown },
+		ref: Ref< HTMLButtonElement >
+	) {
+		const { isSidebarOpened, setIsSidebarOpened } =
+			useContext( EditorContext );
+
+		function handleClick() {
+			setIsSidebarOpened( ! isSidebarOpened );
+		}
+
+		return (
+			<Button
+				{ ...props }
+				ref={ ref }
+				icon={ drawerRight }
+				isPressed={ isSidebarOpened }
+				label={ __( 'Show/hide block inspector', 'woocommerce' ) }
+				onClick={ handleClick }
+			/>
+		);
+	}
+);

packages/js/product-editor/src/components/iframe-editor/iframe-editor.tsx

@@ -54,6 +54,7 @@ export function IframeEditor( {
 	} );
 	const [ isInserterOpened, setIsInserterOpened ] = useState( false );
 	const [ isListViewOpened, setIsListViewOpened ] = useState( false );
+	const [ isSidebarOpened, setIsSidebarOpened ] = useState( true );
 	// eslint-disable-next-line @typescript-eslint/ban-ts-comment
 	// @ts-ignore This action exists in the block editor store.
 	const { clearSelectedBlock, updateSettings } =
@@ -86,6 +87,8 @@ export function IframeEditor( {
 					setIsInserterOpened,
 					setIsDocumentOverviewOpened: setIsListViewOpened,
 					undo,
+					isSidebarOpened,
+					setIsSidebarOpened,
 				} }
 			>
 				<BlockEditorProvider
@@ -146,9 +149,11 @@ export function IframeEditor( {
 								<Popover.Slot />
 							</ResizableEditor>
 						</BlockTools>
-						<div className="woocommerce-iframe-editor__sidebar">
+						{ isSidebarOpened && (
-							<BlockInspector />
+							<div className="woocommerce-iframe-editor__sidebar">
-						</div>
+								<BlockInspector />
+							</div>
+						) }
 					</div>
 				</BlockEditorProvider>
 			</EditorContext.Provider>