diff --git a/docs/how-to-guides/platform/custom-block-editor/tutorial.md b/docs/how-to-guides/platform/custom-block-editor/tutorial.md
index a76bc2d11d8d8a..2e903d64409628 100644
--- a/docs/how-to-guides/platform/custom-block-editor/tutorial.md
+++ b/docs/how-to-guides/platform/custom-block-editor/tutorial.md
@@ -337,9 +337,7 @@ return (
-
-
-
+
@@ -435,12 +433,8 @@ Jumping back to our own custom `` component, it is also worth notin
/* 1. */
-
- /* 2. */
-
- /* 3. */
-
-
+ /* 2. */
+
```
@@ -449,7 +443,6 @@ These provide other important elements of functionality for our editor instance.
1. [``](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. [``](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. [``](https://github.com/WordPress/gutenberg/tree/e38dbe958c04d8089695eb686d4f5caff2707505/packages/block-editor/src/components/observe-typing)- used to manage the editor's internal `isTyping` flag. This is used in various places, most commonly to show/hide the Block toolbar in response to typing.
## Reviewing the Sidebar
diff --git a/packages/block-editor/README.md b/packages/block-editor/README.md
index c4527462306082..451aba82cbbbf1 100644
--- a/packages/block-editor/README.md
+++ b/packages/block-editor/README.md
@@ -19,7 +19,6 @@ import {
BlockEditorProvider,
BlockList,
WritingFlow,
- ObserveTyping,
} from '@wordpress/block-editor';
import { SlotFillProvider, Popover } from '@wordpress/components';
import { useState } from '@wordpress/element';
@@ -36,9 +35,7 @@ function MyEditorComponent() {
-
-
-
+
@@ -467,9 +464,7 @@ Undocumented declaration.
# **ObserveTyping**
-_Related_
-
--
+> **Deprecated**
# **PanelColorSettings**
diff --git a/packages/block-editor/src/components/block-list/index.js b/packages/block-editor/src/components/block-list/index.js
index da96e5c469d6f9..b5b8435982bf2b 100644
--- a/packages/block-editor/src/components/block-list/index.js
+++ b/packages/block-editor/src/components/block-list/index.js
@@ -21,6 +21,7 @@ import BlockPopover from './block-popover';
import { store as blockEditorStore } from '../../store';
import { usePreParsePatterns } from '../../utils/pre-parse-patterns';
import { LayoutProvider, defaultLayout } from './layout';
+import { useTypingObserver } from '../observe-typing';
function Root( { className, children } ) {
const isLargeViewport = useViewportMatch( 'medium' );
@@ -48,6 +49,7 @@ function Root( { className, children } ) {
ref={ useMergeRefs( [
useBlockDropZone(),
useInBetweenInserter(),
+ useTypingObserver(),
] ) }
className={ classnames(
'block-editor-block-list__layout is-root-container',
diff --git a/packages/block-editor/src/components/iframe/index.js b/packages/block-editor/src/components/iframe/index.js
index 2485c353470334..fab5d3ba23211c 100644
--- a/packages/block-editor/src/components/iframe/index.js
+++ b/packages/block-editor/src/components/iframe/index.js
@@ -11,6 +11,11 @@ import { __ } from '@wordpress/i18n';
import { useMergeRefs } from '@wordpress/compose';
import { __experimentalStyleProvider as StyleProvider } from '@wordpress/components';
+/**
+ * Internal dependencies
+ */
+import { useMouseMoveTypingReset } from '../observe-typing';
+
const BODY_CLASS_NAME = 'editor-styles-wrapper';
const BLOCK_PREFIX = 'wp-block';
@@ -178,7 +183,7 @@ function Iframe( { contentRef, children, head, headHTML, ...props }, ref ) {
return (
` 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.
## Usage
diff --git a/packages/block-editor/src/components/observe-typing/index.js b/packages/block-editor/src/components/observe-typing/index.js
index 1cbaa9ab88e363..073a07b9311b17 100644
--- a/packages/block-editor/src/components/observe-typing/index.js
+++ b/packages/block-editor/src/components/observe-typing/index.js
@@ -14,6 +14,7 @@ import {
ESCAPE,
TAB,
} from '@wordpress/keycodes';
+import deprecated from '@wordpress/deprecated';
/**
* Internal dependencies
@@ -248,10 +249,13 @@ export function useTypingObserver() {
}
function ObserveTyping( { children } ) {
+ deprecated( 'wp.blockEditor.ObserveTyping', {
+ hint: 'This behaviour is now built-in.',
+ } );
return { children }
;
}
/**
- * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/observe-typing/README.md
+ * @deprecated
*/
export default 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 91534777b2542f..4065b9b225eced 100644
--- a/packages/customize-widgets/src/components/sidebar-block-editor/index.js
+++ b/packages/customize-widgets/src/components/sidebar-block-editor/index.js
@@ -13,7 +13,6 @@ import {
BlockList,
BlockSelectionClearer,
BlockInspector,
- ObserveTyping,
WritingFlow,
BlockEditorKeyboardShortcuts,
__experimentalBlockSettingsMenuFirstItem,
@@ -84,9 +83,7 @@ export default function SidebarBlockEditor( {
-
-
-
+
diff --git a/packages/edit-navigation/src/components/editor/index.js b/packages/edit-navigation/src/components/editor/index.js
index 2596e368532b30..87dd2f13311e17 100644
--- a/packages/edit-navigation/src/components/editor/index.js
+++ b/packages/edit-navigation/src/components/editor/index.js
@@ -1,7 +1,7 @@
/**
* WordPress dependencies
*/
-import { BlockList, ObserveTyping, WritingFlow } from '@wordpress/block-editor';
+import { BlockList, WritingFlow } from '@wordpress/block-editor';
import { Spinner } from '@wordpress/components';
export default function Editor( { isPending } ) {
@@ -12,9 +12,7 @@ export default function Editor( { isPending } ) {
) : (
-
-
-
+
) }
diff --git a/packages/edit-post/src/components/visual-editor/index.js b/packages/edit-post/src/components/visual-editor/index.js
index 5a50f3b601fa57..38fec811b06b81 100644
--- a/packages/edit-post/src/components/visual-editor/index.js
+++ b/packages/edit-post/src/components/visual-editor/index.js
@@ -18,7 +18,6 @@ import {
__unstableUseBlockSelectionClearer as useBlockSelectionClearer,
__unstableUseTypewriter as useTypewriter,
__unstableUseClipboardHandler as useClipboardHandler,
- __unstableUseTypingObserver as useTypingObserver,
__experimentalBlockSettingsMenuFirstItem,
__experimentalUseResizeCanvas as useResizeCanvas,
__unstableUseCanvasClickRedirect as useCanvasClickRedirect,
@@ -95,7 +94,6 @@ export default function VisualEditor( { styles } ) {
useClipboardHandler(),
useCanvasClickRedirect(),
useTypewriter(),
- useTypingObserver(),
useBlockSelectionClearer(),
] );
diff --git a/packages/edit-site/src/components/block-editor/index.js b/packages/edit-site/src/components/block-editor/index.js
index 10887d31275903..ce72f5c7e257f5 100644
--- a/packages/edit-site/src/components/block-editor/index.js
+++ b/packages/edit-site/src/components/block-editor/index.js
@@ -13,8 +13,6 @@ import {
BlockList,
__experimentalUseResizeCanvas as useResizeCanvas,
__unstableUseBlockSelectionClearer as useBlockSelectionClearer,
- __unstableUseTypingObserver as useTypingObserver,
- __unstableUseMouseMoveTypingReset as useMouseMoveTypingReset,
__unstableEditorStyles as EditorStyles,
__unstableIframe as Iframe,
} from '@wordpress/block-editor';
@@ -53,12 +51,10 @@ export default function BlockEditor( { setIsInserterOpen } ) {
);
const { setPage } = useDispatch( editSiteStore );
const resizedCanvasStyles = useResizeCanvas( deviceType, true );
- const ref = useMouseMoveTypingReset();
const contentRef = useRef();
const mergedRefs = useMergeRefs( [
contentRef,
useBlockSelectionClearer(),
- useTypingObserver(),
] );
// Allow scrolling "through" popovers over the canvas. This is only called
@@ -98,7 +94,6 @@ export default function BlockEditor( { setIsInserterOpen } ) {
style={ resizedCanvasStyles }
headHTML={ window.__editorStyles.html }
head={ }
- ref={ ref }
contentRef={ mergedRefs }
>
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 5b878f3b7d93ef..d196491f602c72 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
@@ -7,7 +7,6 @@ import {
BlockEditorKeyboardShortcuts,
BlockSelectionClearer,
WritingFlow,
- ObserveTyping,
__unstableEditorStyles as EditorStyles,
} from '@wordpress/block-editor';
@@ -29,9 +28,7 @@ export default function WidgetAreasBlockEditorContent( {
-
-
-
+
diff --git a/storybook/stories/playground/index.js b/storybook/stories/playground/index.js
index d5e0a67623ab2e..a8757a9201703a 100644
--- a/storybook/stories/playground/index.js
+++ b/storybook/stories/playground/index.js
@@ -8,7 +8,6 @@ import {
BlockList,
BlockInspector,
WritingFlow,
- ObserveTyping,
} from '@wordpress/block-editor';
import { Popover, SlotFillProvider } from '@wordpress/components';
import { registerCoreBlocks } from '@wordpress/block-library';
@@ -42,9 +41,7 @@ function App() {
-
-
-
+