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

Bundle ObserveTyping within the BlockList component #53875

Merged
merged 1 commit into from
Aug 24, 2023
Merged

Bundle ObserveTyping within the BlockList component #53875

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
10 changes: 2 additions & 8 deletions docs/how-to-guides/platform/custom-block-editor.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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>
```
Expand All @@ -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

Expand Down
4 changes: 4 additions & 0 deletions packages/block-editor/CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down
5 changes: 1 addition & 4 deletions packages/block-editor/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,6 @@ import {
BlockList,
BlockTools,
WritingFlow,
ObserveTyping,
} from '@wordpress/block-editor';
import { SlotFillProvider, Popover } from '@wordpress/components';
import { useState } from '@wordpress/element';
Expand All @@ -37,9 +36,7 @@ function MyEditorComponent() {
<SlotFillProvider>
<BlockTools>
<WritingFlow>
<ObserveTyping>
<BlockList />
</ObserveTyping>
<BlockList />
</WritingFlow>
</BlockTools>
<Popover.Slot />
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 @@ -39,6 +39,7 @@ import {
BlockEditContextProvider,
DEFAULT_BLOCK_EDIT_CONTEXT,
} from '../block-edit/context';
import { useTypingObserver } from '../observe-typing';

const elementContext = createContext();

Expand Down Expand Up @@ -105,6 +106,7 @@ function Root( { className, ...settings } ) {
useBlockSelectionClearer(),
useInBetweenInserter(),
setElement,
useTypingObserver(),
] ),
className: classnames( 'is-root-container', className, {
'is-outline-mode': isOutlineMode,
Expand Down
4 changes: 2 additions & 2 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,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

Expand All @@ -10,7 +10,7 @@ Wrap the component where blocks are to be rendered with `<ObserveTyping />`:
function VisualEditor() {
return (
<ObserveTyping>
<BlockList />
<MyInput />
</ObserveTyping>
);
}
Expand Down
7 changes: 1 addition & 6 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 @@ -10,7 +10,6 @@ import {
BlockSelectionClearer,
BlockInspector,
CopyHandler,
ObserveTyping,
WritingFlow,
BlockEditorKeyboardShortcuts,
__unstableBlockSettingsMenuFirstItem,
Expand Down Expand Up @@ -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>
Expand Down
3 changes: 2 additions & 1 deletion 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 @@ -217,7 +217,6 @@ export default function VisualEditor( { styles } ) {
ref,
useClipboardHandler(),
useTypewriter(),
useTypingObserver(),
Copy link
Contributor Author

Choose a reason for hiding this comment

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

In the post editor, this hook was wrapping both the block list and the post title, now that this behavior is bundled for the block list, I kept it here around the post title.

useBlockSelectionClearer(),
] );

Expand Down Expand Up @@ -305,6 +304,7 @@ export default function VisualEditor( { styles } ) {
? postContentLayout
: fallbackLayout;

const observeTypingRef = useTypingObserver();
const titleRef = useRef();
useEffect( () => {
if ( isWelcomeGuideVisible || ! isCleanNewPost() ) {
Expand Down Expand Up @@ -400,6 +400,7 @@ export default function VisualEditor( { styles } ) {
}
) }
contentEditable={ false }
ref={ observeTypingRef }
>
<PostTitle ref={ titleRef } />
</div>
Expand Down
7 changes: 1 addition & 6 deletions packages/edit-site/src/components/block-editor/site-editor-canvas.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,6 @@ import {
BlockList,
BlockTools,
__unstableUseClipboardHandler as useClipboardHandler,
__unstableUseTypingObserver as useTypingObserver,
BlockEditorKeyboardShortcuts,
store as blockEditorStore,
} from '@wordpress/block-editor';
Expand Down Expand Up @@ -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';

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 @@ -6,7 +6,6 @@ import {
BlockTools,
BlockSelectionClearer,
WritingFlow,
ObserveTyping,
__unstableEditorStyles as EditorStyles,
} from '@wordpress/block-editor';
import { useSelect } from '@wordpress/data';
Expand Down Expand Up @@ -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>
Expand Down
5 changes: 1 addition & 4 deletions storybook/stories/playground/index.story.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -53,9 +52,7 @@ function App() {
<div className="editor-styles-wrapper">
<BlockEditorKeyboardShortcuts.Register />
<WritingFlow>
<ObserveTyping>
<BlockList />
</ObserveTyping>
<BlockList />
</WritingFlow>
</div>
</BlockTools>
Expand Down
5 changes: 1 addition & 4 deletions test/integration/helpers/integration-test-editor.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -81,9 +80,7 @@ export function Editor( { testBlocks, settings = {} } ) {
<BlockTools>
<BlockEditorKeyboardShortcuts.Register />
<WritingFlow>
<ObserveTyping>
<BlockList />
</ObserveTyping>
<BlockList />
</WritingFlow>
</BlockTools>

Expand Down