Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Block editor: deprecate ObserveTyping and integrate it in the block editor #31280

Closed
wants to merge 2 commits into from
Closed

Block editor: deprecate ObserveTyping and integrate it in the block editor #31280

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
f7f2986
Block editor: deprecate ObserveTyping and integrate it in the block e…
ellatrix Apr 28, 2021
06506c3
Deprecate
ellatrix Apr 28, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 3 additions & 10 deletions docs/how-to-guides/platform/custom-block-editor/tutorial.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -337,9 +337,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>
Expand Down Expand Up @@ -435,12 +433,8 @@ Jumping back to our own custom `<BlockEditor>` component, it is also worth notin

<div className="editor-styles-wrapper">
<BlockEditorKeyboardShortcuts /> /* 1. */
<WritingFlow>
/* 2. */
<ObserveTyping>
/* 3. */
<BlockList className="getdavesbe-block-editor__block-list" />
</ObserveTyping>
<WritingFlow> /* 2. */
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Next step :P?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Maybe! I've been thinking about this one and there's several things I'd like to change here. The focus capture element should ideally render outside the iframe as well.

<BlockList className="getdavesbe-block-editor__block-list" />
</WritingFlow>
</div>
```
Expand All @@ -449,7 +443,6 @@ These provide other important elements of functionality for our 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. This is used in various places, most commonly to show/hide the Block toolbar in response to typing.

## Reviewing the Sidebar

Expand Down
9 changes: 2 additions & 7 deletions packages/block-editor/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,6 @@ import {
BlockEditorProvider,
BlockList,
WritingFlow,
ObserveTyping,
} from '@wordpress/block-editor';
import { SlotFillProvider, Popover } from '@wordpress/components';
import { useState } from '@wordpress/element';
Expand All @@ -36,9 +35,7 @@ function MyEditorComponent() {
<SlotFillProvider>
<Popover.Slot name="block-toolbar" />
<WritingFlow>
<ObserveTyping>
<BlockList />
</ObserveTyping>
<BlockList />
</WritingFlow>
<Popover.Slot />
</SlotFillProvider>
Expand Down Expand Up @@ -467,9 +464,7 @@ Undocumented declaration.

<a name="ObserveTyping" href="#ObserveTyping">#</a> **ObserveTyping**

_Related_

- <https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/observe-typing/README.md>
> **Deprecated**

<a name="PanelColorSettings" href="#PanelColorSettings">#</a> **PanelColorSettings**

Expand Down
2 changes: 2 additions & 0 deletions packages/block-editor/src/components/block-list/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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' );
Expand Down Expand Up @@ -48,6 +49,7 @@ function Root( { className, children } ) {
ref={ useMergeRefs( [
useBlockDropZone(),
useInBetweenInserter(),
useTypingObserver(),
] ) }
className={ classnames(
'block-editor-block-list__layout is-root-container',
Expand Down
7 changes: 6 additions & 1 deletion packages/block-editor/src/components/iframe/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand Down Expand Up @@ -178,7 +183,7 @@ function Iframe( { contentRef, children, head, headHTML, ...props }, ref ) {
return (
<iframe
{ ...props }
ref={ useMergeRefs( [ ref, setRef ] ) }
ref={ useMergeRefs( [ ref, setRef, useMouseMoveTypingReset() ] ) }
tabIndex="0"
title={ __( 'Editor canvas' ) }
name="editor-canvas"
Expand Down
6 changes: 1 addition & 5 deletions packages/block-editor/src/components/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -118,11 +118,7 @@ export { default as __experimentalSearchForm } from './inserter/search-form';
export { default as BlockEditorKeyboardShortcuts } from './keyboard-shortcuts';
export { MultiSelectScrollIntoView } from './selection-scroll-into-view';
export { default as NavigableToolbar } from './navigable-toolbar';
export {
default as ObserveTyping,
useTypingObserver as __unstableUseTypingObserver,
useMouseMoveTypingReset as __unstableUseMouseMoveTypingReset,
} from './observe-typing';
export { default as ObserveTyping } from './observe-typing';
export { default as PreserveScrollInReorder } from './preserve-scroll-in-reorder';
export { default as SkipToSelectedBlock } from './skip-to-selected-block';
export {
Expand Down
2 changes: 2 additions & 0 deletions packages/block-editor/src/components/observe-typing/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
# Observe Typing

**Deprecated*

`<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.

## Usage
Expand Down
6 changes: 5 additions & 1 deletion packages/block-editor/src/components/observe-typing/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ import {
ESCAPE,
TAB,
} from '@wordpress/keycodes';
import deprecated from '@wordpress/deprecated';

/**
* Internal dependencies
Expand Down Expand Up @@ -248,10 +249,13 @@ export function useTypingObserver() {
}

function ObserveTyping( { children } ) {
deprecated( 'wp.blockEditor.ObserveTyping', {
hint: 'This behaviour is now built-in.',
} );
return <div ref={ useTypingObserver() }>{ children }</div>;
}

/**
* @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/observe-typing/README.md
* @deprecated
*/
export default ObserveTyping;
5 changes: 1 addition & 4 deletions packages/customize-widgets/src/components/sidebar-block-editor/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,6 @@ import {
BlockList,
BlockSelectionClearer,
BlockInspector,
ObserveTyping,
WritingFlow,
BlockEditorKeyboardShortcuts,
__experimentalBlockSettingsMenuFirstItem,
Expand Down Expand Up @@ -84,9 +83,7 @@ export default function SidebarBlockEditor( {

<BlockSelectionClearer>
<WritingFlow>
<ObserveTyping>
<BlockList />
</ObserveTyping>
<BlockList />
</WritingFlow>
</BlockSelectionClearer>

Expand Down
6 changes: 2 additions & 4 deletions packages/edit-navigation/src/components/editor/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 } ) {
Expand All @@ -12,9 +12,7 @@ export default function Editor( { isPending } ) {
) : (
<div className="editor-styles-wrapper">
<WritingFlow>
<ObserveTyping>
<BlockList />
</ObserveTyping>
<BlockList />
</WritingFlow>
</div>
) }
Expand Down
2 changes: 0 additions & 2 deletions packages/edit-post/src/components/visual-editor/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,6 @@ import {
__unstableUseBlockSelectionClearer as useBlockSelectionClearer,
__unstableUseTypewriter as useTypewriter,
__unstableUseClipboardHandler as useClipboardHandler,
__unstableUseTypingObserver as useTypingObserver,
__experimentalBlockSettingsMenuFirstItem,
__experimentalUseResizeCanvas as useResizeCanvas,
__unstableUseCanvasClickRedirect as useCanvasClickRedirect,
Expand Down Expand Up @@ -95,7 +94,6 @@ export default function VisualEditor( { styles } ) {
useClipboardHandler(),
useCanvasClickRedirect(),
useTypewriter(),
useTypingObserver(),
useBlockSelectionClearer(),
] );

Expand Down
5 changes: 0 additions & 5 deletions packages/edit-site/src/components/block-editor/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -98,7 +94,6 @@ export default function BlockEditor( { setIsInserterOpen } ) {
style={ resizedCanvasStyles }
headHTML={ window.__editorStyles.html }
head={ <EditorStyles styles={ settings.styles } /> }
ref={ ref }
contentRef={ mergedRefs }
>
<WritingFlow>
Expand Down
5 changes: 1 addition & 4 deletions packages/edit-widgets/src/components/widget-areas-block-editor-content/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,6 @@ import {
BlockEditorKeyboardShortcuts,
BlockSelectionClearer,
WritingFlow,
ObserveTyping,
__unstableEditorStyles as EditorStyles,
} from '@wordpress/block-editor';

Expand All @@ -29,9 +28,7 @@ export default function WidgetAreasBlockEditorContent( {
<Popover.Slot name="block-toolbar" />
<BlockSelectionClearer>
<WritingFlow>
<ObserveTyping>
<BlockList className="edit-widgets-main-block-list" />
</ObserveTyping>
<BlockList className="edit-widgets-main-block-list" />
</WritingFlow>
</BlockSelectionClearer>
</div>
Expand Down
5 changes: 1 addition & 4 deletions storybook/stories/playground/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -42,9 +41,7 @@ function App() {
<BlockEditorKeyboardShortcuts.Register />
<BlockEditorKeyboardShortcuts />
<WritingFlow>
<ObserveTyping>
<BlockList />
</ObserveTyping>
<BlockList />
</WritingFlow>
</div>
<Popover.Slot />
Expand Down