From 720d8831698eed7f6b4b3e0cbd72caeda1e210bc Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Tue, 22 Aug 2023 14:59:45 +0100
Subject: [PATCH] Bundle observe typing within the BlockList component

---
 docs/how-to-guides/platform/custom-block-editor.md     | 10 ++--------
 packages/block-editor/CHANGELOG.md                     |  4 ++++
 packages/block-editor/README.md                        |  5 +----
 .../block-editor/src/components/block-list/index.js    |  2 ++
 .../src/components/observe-typing/README.md            |  4 ++--
 .../src/components/sidebar-block-editor/index.js       |  7 +------
 .../edit-post/src/components/visual-editor/index.js    |  3 ++-
 .../src/components/block-editor/site-editor-canvas.js  |  7 +------
 .../widget-areas-block-editor-content/index.js         |  5 +----
 storybook/stories/playground/index.story.js            |  5 +----
 test/integration/helpers/integration-test-editor.js    |  5 +----
 11 files changed, 18 insertions(+), 39 deletions(-)

diff --git a/docs/how-to-guides/platform/custom-block-editor.md b/docs/how-to-guides/platform/custom-block-editor.md
index bb119977e6986a..dd676c100cd7aa 100644
--- a/docs/how-to-guides/platform/custom-block-editor.md
+++ b/docs/how-to-guides/platform/custom-block-editor.md
@@ -342,9 +342,7 @@ return (
 			<div className="editor-styles-wrapper">
 				<BlockEditorKeyboardShortcuts />
 				<WritingFlow>
-					<ObserveTyping>
-						<BlockList className="getdavesbe-block-editor__block-list" />
-					</ObserveTyping>
+					<BlockList className="getdavesbe-block-editor__block-list" />
 				</WritingFlow>
 			</div>
 		</BlockEditorProvider>
@@ -439,10 +437,7 @@ Jumping back to your custom `<BlockEditor>` component, it is also worth noting t
 	<BlockEditorKeyboardShortcuts /> /* 1. */
 	<WritingFlow>
 		/* 2. */
-		<ObserveTyping>
-			/* 3. */
-			<BlockList className="getdavesbe-block-editor__block-list" />
-		</ObserveTyping>
+		<BlockList className="getdavesbe-block-editor__block-list" />
 	</WritingFlow>
 </div>
 ```
@@ -451,7 +446,6 @@ These provide other important elements of functionality for the editor instance.
 
 1. [`<BlockEditorKeyboardShortcuts />`](https://github.com/WordPress/gutenberg/blob/e38dbe958c04d8089695eb686d4f5caff2707505/packages/block-editor/src/components/keyboard-shortcuts/index.js) – Enables and usage of keyboard shortcuts within the editor
 2. [`<WritingFlow>`](https://github.com/WordPress/gutenberg/blob/e38dbe958c04d8089695eb686d4f5caff2707505/packages/block-editor/src/components/writing-flow/index.js) – Handles selection, focus management, and navigation across blocks
-3. [`<ObserveTyping>`](https://github.com/WordPress/gutenberg/tree/e38dbe958c04d8089695eb686d4f5caff2707505/packages/block-editor/src/components/observe-typing)- Used to manage the editor's internal `isTyping` flag
 
 ## Reviewing the sidebar
 
diff --git a/packages/block-editor/CHANGELOG.md b/packages/block-editor/CHANGELOG.md
index 4c7a5b32a9206a..c74c20d6f21aed 100644
--- a/packages/block-editor/CHANGELOG.md
+++ b/packages/block-editor/CHANGELOG.md
@@ -2,6 +2,10 @@
 
 ## Unreleased
 
+### Enhancements
+
+- Embed the `ObserveTyping` behavior within the `BlockList` component making to simplify instanciations of third-party block editors.
+
 ## 12.8.0 (2023-08-16)
 
 ## 12.7.0 (2023-08-10)
diff --git a/packages/block-editor/README.md b/packages/block-editor/README.md
index 067bcfe0979f34..56d50c618ef104 100644
--- a/packages/block-editor/README.md
+++ b/packages/block-editor/README.md
@@ -20,7 +20,6 @@ import {
 	BlockList,
 	BlockTools,
 	WritingFlow,
-	ObserveTyping,
 } from '@wordpress/block-editor';
 import { SlotFillProvider, Popover } from '@wordpress/components';
 import { useState } from '@wordpress/element';
@@ -37,9 +36,7 @@ function MyEditorComponent() {
 			<SlotFillProvider>
 				<BlockTools>
 					<WritingFlow>
-						<ObserveTyping>
-							<BlockList />
-						</ObserveTyping>
+						<BlockList />
 					</WritingFlow>
 				</BlockTools>
 				<Popover.Slot />
diff --git a/packages/block-editor/src/components/block-list/index.js b/packages/block-editor/src/components/block-list/index.js
index 04b767d9568b78..2f81a4bbf614dc 100644
--- a/packages/block-editor/src/components/block-list/index.js
+++ b/packages/block-editor/src/components/block-list/index.js
@@ -39,6 +39,7 @@ import {
 	BlockEditContextProvider,
 	DEFAULT_BLOCK_EDIT_CONTEXT,
 } from '../block-edit/context';
+import { useTypingObserver } from '../observe-typing';
 
 const elementContext = createContext();
 
@@ -105,6 +106,7 @@ function Root( { className, ...settings } ) {
 				useBlockSelectionClearer(),
 				useInBetweenInserter(),
 				setElement,
+				useTypingObserver(),
 			] ),
 			className: classnames( 'is-root-container', className, {
 				'is-outline-mode': isOutlineMode,
diff --git a/packages/block-editor/src/components/observe-typing/README.md b/packages/block-editor/src/components/observe-typing/README.md
index c589c6903416d7..e44c612a144155 100644
--- a/packages/block-editor/src/components/observe-typing/README.md
+++ b/packages/block-editor/src/components/observe-typing/README.md
@@ -1,6 +1,6 @@
 # Observe Typing
 
-`<ObserveTyping />` is a component used in managing the editor's internal typing flag. When used to wrap content — typically the top-level block list — it observes keyboard and mouse events to set and unset the typing flag. The typing flag is used in considering whether the block border and controls should be visible. While typing, these elements are hidden for a distraction-free experience.
+`<ObserveTyping />` is a component used in managing the editor's internal typing flag. When used to wrap content, it observes keyboard and mouse events to set and unset the typing flag. The typing flag is used in considering whether the block border and controls should be visible. While typing, these elements are hidden for a distraction-free experience.
 
 ## Usage
 
@@ -10,7 +10,7 @@ Wrap the component where blocks are to be rendered with `<ObserveTyping />`:
 function VisualEditor() {
 	return (
 		<ObserveTyping>
-			<BlockList />
+			<MyInput />
 		</ObserveTyping>
 	);
 }
diff --git a/packages/customize-widgets/src/components/sidebar-block-editor/index.js b/packages/customize-widgets/src/components/sidebar-block-editor/index.js
index 6a5a734bef9db1..4e651bc2bb8dfb 100644
--- a/packages/customize-widgets/src/components/sidebar-block-editor/index.js
+++ b/packages/customize-widgets/src/components/sidebar-block-editor/index.js
@@ -10,7 +10,6 @@ import {
 	BlockSelectionClearer,
 	BlockInspector,
 	CopyHandler,
-	ObserveTyping,
 	WritingFlow,
 	BlockEditorKeyboardShortcuts,
 	__unstableBlockSettingsMenuFirstItem,
@@ -118,11 +117,7 @@ export default function SidebarBlockEditor( {
 						<EditorStyles styles={ settings.defaultEditorStyles } />
 						<BlockSelectionClearer>
 							<WritingFlow className="editor-styles-wrapper">
-								<ObserveTyping>
-									<BlockList
-										renderAppender={ BlockAppender }
-									/>
-								</ObserveTyping>
+								<BlockList renderAppender={ BlockAppender } />
 							</WritingFlow>
 						</BlockSelectionClearer>
 					</BlockTools>
diff --git a/packages/edit-post/src/components/visual-editor/index.js b/packages/edit-post/src/components/visual-editor/index.js
index f888630afeca19..88fc233e0f74d4 100644
--- a/packages/edit-post/src/components/visual-editor/index.js
+++ b/packages/edit-post/src/components/visual-editor/index.js
@@ -217,7 +217,6 @@ export default function VisualEditor( { styles } ) {
 		ref,
 		useClipboardHandler(),
 		useTypewriter(),
-		useTypingObserver(),
 		useBlockSelectionClearer(),
 	] );
 
@@ -305,6 +304,7 @@ export default function VisualEditor( { styles } ) {
 		? postContentLayout
 		: fallbackLayout;
 
+	const observeTypingRef = useTypingObserver();
 	const titleRef = useRef();
 	useEffect( () => {
 		if ( isWelcomeGuideVisible || ! isCleanNewPost() ) {
@@ -400,6 +400,7 @@ export default function VisualEditor( { styles } ) {
 									}
 								) }
 								contentEditable={ false }
+								ref={ observeTypingRef }
 							>
 								<PostTitle ref={ titleRef } />
 							</div>
diff --git a/packages/edit-site/src/components/block-editor/site-editor-canvas.js b/packages/edit-site/src/components/block-editor/site-editor-canvas.js
index 692b7fd5eadc10..aa4c2e7c5e13d6 100644
--- a/packages/edit-site/src/components/block-editor/site-editor-canvas.js
+++ b/packages/edit-site/src/components/block-editor/site-editor-canvas.js
@@ -11,7 +11,6 @@ import {
 	BlockList,
 	BlockTools,
 	__unstableUseClipboardHandler as useClipboardHandler,
-	__unstableUseTypingObserver as useTypingObserver,
 	BlockEditorKeyboardShortcuts,
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
@@ -78,11 +77,7 @@ export default function SiteEditorCanvas() {
 		! isMobileViewport;
 
 	const contentRef = useRef();
-	const mergedRefs = useMergeRefs( [
-		contentRef,
-		useClipboardHandler(),
-		useTypingObserver(),
-	] );
+	const mergedRefs = useMergeRefs( [ contentRef, useClipboardHandler() ] );
 
 	const isTemplateTypeNavigation = templateType === 'wp_navigation';
 
diff --git a/packages/edit-widgets/src/components/widget-areas-block-editor-content/index.js b/packages/edit-widgets/src/components/widget-areas-block-editor-content/index.js
index 386d4730e4dab4..f12774e36cf232 100644
--- a/packages/edit-widgets/src/components/widget-areas-block-editor-content/index.js
+++ b/packages/edit-widgets/src/components/widget-areas-block-editor-content/index.js
@@ -6,7 +6,6 @@ import {
 	BlockTools,
 	BlockSelectionClearer,
 	WritingFlow,
-	ObserveTyping,
 	__unstableEditorStyles as EditorStyles,
 } from '@wordpress/block-editor';
 import { useSelect } from '@wordpress/data';
@@ -43,9 +42,7 @@ export default function WidgetAreasBlockEditorContent( {
 				<EditorStyles styles={ styles } />
 				<BlockSelectionClearer>
 					<WritingFlow>
-						<ObserveTyping>
-							<BlockList className="edit-widgets-main-block-list" />
-						</ObserveTyping>
+						<BlockList className="edit-widgets-main-block-list" />
 					</WritingFlow>
 				</BlockSelectionClearer>
 			</BlockTools>
diff --git a/storybook/stories/playground/index.story.js b/storybook/stories/playground/index.story.js
index 92ccd78ae58b74..ace00b6859895a 100644
--- a/storybook/stories/playground/index.story.js
+++ b/storybook/stories/playground/index.story.js
@@ -9,7 +9,6 @@ import {
 	BlockTools,
 	BlockInspector,
 	WritingFlow,
-	ObserveTyping,
 } from '@wordpress/block-editor';
 import { Popover, SlotFillProvider } from '@wordpress/components';
 import { registerCoreBlocks } from '@wordpress/block-library';
@@ -53,9 +52,7 @@ function App() {
 								<div className="editor-styles-wrapper">
 									<BlockEditorKeyboardShortcuts.Register />
 									<WritingFlow>
-										<ObserveTyping>
-											<BlockList />
-										</ObserveTyping>
+										<BlockList />
 									</WritingFlow>
 								</div>
 							</BlockTools>
diff --git a/test/integration/helpers/integration-test-editor.js b/test/integration/helpers/integration-test-editor.js
index 6b954a895a51ac..51e8fb316859c7 100644
--- a/test/integration/helpers/integration-test-editor.js
+++ b/test/integration/helpers/integration-test-editor.js
@@ -15,7 +15,6 @@ import {
 	BlockTools,
 	BlockInspector,
 	WritingFlow,
-	ObserveTyping,
 } from '@wordpress/block-editor';
 import { Popover, SlotFillProvider } from '@wordpress/components';
 import { registerCoreBlocks } from '@wordpress/block-library';
@@ -81,9 +80,7 @@ export function Editor( { testBlocks, settings = {} } ) {
 					<BlockTools>
 						<BlockEditorKeyboardShortcuts.Register />
 						<WritingFlow>
-							<ObserveTyping>
-								<BlockList />
-							</ObserveTyping>
+							<BlockList />
 						</WritingFlow>
 					</BlockTools>