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 (