Bundle observe typing within the BlockList component (#53875)

WordPress · Aug 24, 2023 · 1546b82 · 1546b82
1 parent 255ac93
commit 1546b82
Show file tree

Hide file tree

Showing 11 changed files with 18 additions and 39 deletions.
diff --git a/docs/how-to-guides/platform/custom-block-editor.md b/docs/how-to-guides/platform/custom-block-editor.md
@@ -339,9 +339,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>
@@ -436,10 +434,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>
 ```
@@ -448,7 +443,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
@@ -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
@@ -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>
 			</SlotFillProvider>

diff --git a/packages/block-editor/src/components/block-list/index.js b/packages/block-editor/src/components/block-list/index.js
@@ -38,6 +38,7 @@ import {
 	BlockEditContextProvider,
 	DEFAULT_BLOCK_EDIT_CONTEXT,
 } from '../block-edit/context';
+import { useTypingObserver } from '../observe-typing';
 
 const elementContext = createContext();
 
@@ -104,6 +105,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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -9,7 +9,6 @@ import {
 	BlockTools,
 	BlockInspector,
 	WritingFlow,
-	ObserveTyping,
 } from '@wordpress/block-editor';
 import { 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
@@ -15,7 +15,6 @@ import {
 	BlockTools,
 	BlockInspector,
 	WritingFlow,
-	ObserveTyping,
 } from '@wordpress/block-editor';
 import { 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>
 				</BlockEditorProvider>