From 3ad98ec8b4e18814a486063c06fb3eed5d10527a Mon Sep 17 00:00:00 2001
From: Joshua T Flowers <joshuatf@gmail.com>
Date: Thu, 15 Jun 2023 16:29:12 -0700
Subject: [PATCH] Add tool selector option to iframe editor (#38686)

* Add tool selector option to iframe editor

* Fix lint errors
---
 .../js/product-editor/changelog/add-38487     |  4 ++++
 .../header-toolbar/header-toolbar.tsx         | 24 +++++++++++++++----
 2 files changed, 23 insertions(+), 5 deletions(-)
 create mode 100644 packages/js/product-editor/changelog/add-38487

diff --git a/packages/js/product-editor/changelog/add-38487 b/packages/js/product-editor/changelog/add-38487
new file mode 100644
index 00000000000..76f8520f47a
--- /dev/null
+++ b/packages/js/product-editor/changelog/add-38487
@@ -0,0 +1,4 @@
+Significance: minor
+Type: add
+
+Add tool selector option to iframe editor
diff --git a/packages/js/product-editor/src/components/iframe-editor/header-toolbar/header-toolbar.tsx b/packages/js/product-editor/src/components/iframe-editor/header-toolbar/header-toolbar.tsx
index e194ffb124a..195d625b1f8 100644
--- a/packages/js/product-editor/src/components/iframe-editor/header-toolbar/header-toolbar.tsx
+++ b/packages/js/product-editor/src/components/iframe-editor/header-toolbar/header-toolbar.tsx
@@ -4,10 +4,6 @@
 import { useSelect } from '@wordpress/data';
 import { useViewportMatch } from '@wordpress/compose';
 import { __ } from '@wordpress/i18n';
-import {
-	NavigableToolbar,
-	store as blockEditorStore,
-} from '@wordpress/block-editor';
 import { plus } from '@wordpress/icons';
 import {
 	createElement,
@@ -17,6 +13,13 @@ import {
 	useContext,
 } from '@wordpress/element';
 import { MouseEvent } from 'react';
+import {
+	NavigableToolbar,
+	store as blockEditorStore,
+	// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+	// @ts-ignore ToolSelector exists in WordPress components.
+	ToolSelector,
+} from '@wordpress/block-editor';
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-ignore ToolbarItem exists in WordPress components.
 // eslint-disable-next-line @woocommerce/dependency-group
@@ -33,8 +36,9 @@ export function HeaderToolbar() {
 	const { isInserterOpened, setIsInserterOpened } =
 		useContext( EditorContext );
 	const isWideViewport = useViewportMatch( 'wide' );
+	const isLargeViewport = useViewportMatch( 'medium' );
 	const inserterButton = useRef< HTMLButtonElement | null >( null );
-	const { isInserterEnabled } = useSelect( ( select ) => {
+	const { isInserterEnabled, isTextModeEnabled } = useSelect( ( select ) => {
 		const {
 			// eslint-disable-next-line @typescript-eslint/ban-ts-comment
 			// @ts-ignore These selectors are available in the block data store.
@@ -45,9 +49,13 @@ export function HeaderToolbar() {
 			// eslint-disable-next-line @typescript-eslint/ban-ts-comment
 			// @ts-ignore These selectors are available in the block data store.
 			getBlockSelectionEnd,
+			// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+			// @ts-ignore These selectors are available in the block data store.
+			__unstableGetEditorMode: getEditorMode,
 		} = select( blockEditorStore );
 
 		return {
+			isTextModeEnabled: getEditorMode() === 'text',
 			isInserterEnabled: hasInserterItems(
 				getBlockRootClientId( getBlockSelectionEnd() )
 			),
@@ -98,6 +106,12 @@ export function HeaderToolbar() {
 				/>
 				{ isWideViewport && (
 					<>
+						{ isLargeViewport && (
+							<ToolbarItem
+								as={ ToolSelector }
+								disabled={ isTextModeEnabled }
+							/>
+						) }
 						<ToolbarItem as={ EditorHistoryUndo } />
 						<ToolbarItem as={ EditorHistoryRedo } />
 					</>