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

Writing flow: simplify & fix tabbing out of block #19312

Merged
merged 2 commits into from
Dec 23, 2019
Merged

Writing flow: simplify & fix tabbing out of block #19312

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
27048f0
Writing flow: simplify & fix tabbing out of block
ellatrix Dec 23, 2019
d089bda
Fix Storybook
ellatrix Dec 23, 2019
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
36 changes: 25 additions & 11 deletions packages/block-editor/src/components/writing-flow/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import { overEvery, find, findLast, reverse, first, last } from 'lodash';
/**
* WordPress dependencies
*/
import { Component, createRef } from '@wordpress/element';
import { Component, createRef, forwardRef } from '@wordpress/element';
import {
computeCaretRect,
focus,
Expand Down Expand Up @@ -77,13 +77,23 @@ export function isNavigationCandidate( element, keyCode, hasModifier ) {
* Renders focus capturing areas to redirect focus to the selected block if not
* in Navigation mode.
*/
function FocusCapture( { selectedClientId, isReverse, containerRef } ) {
const FocusCapture = forwardRef( ( {
Copy link
Contributor

Choose a reason for hiding this comment

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

Things are becoming a little bit hard to follow for me. it would be good to clarify exactly what this component is for, its props...

Copy link
Member Author

Choose a reason for hiding this comment

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

Sorry, I should be documenting better! I'll write something for it.

Copy link
Member Author

Choose a reason for hiding this comment

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

Added some in #19314.

selectedClientId,
isReverse,
containerRef,
noCapture,
}, ref ) => {
const isNavigationMode = useSelect( ( select ) =>
select( 'core/block-editor' ).isNavigationMode()
);
const { setNavigationMode } = useDispatch( 'core/block-editor' );

function onFocus() {
if ( noCapture.current ) {
delete noCapture.current;
return;
}

if ( ! selectedClientId ) {
setNavigationMode( true );

Expand Down Expand Up @@ -112,14 +122,15 @@ function FocusCapture( { selectedClientId, isReverse, containerRef } ) {

return (
<div
ref={ ref }
tabIndex={ ! isNavigationMode ? '0' : undefined }
onFocus={ onFocus }
// Needs to be positioned within the viewport, so focus to this
// element does not scroll the page.
style={ { position: 'fixed' } }
/>
);
}
} );

class WritingFlow extends Component {
constructor() {
Expand All @@ -139,6 +150,9 @@ class WritingFlow extends Component {
this.verticalRect = null;

this.container = createRef();
this.focusCaptureBeforeRef = createRef();
this.focusCaptureAfterRef = createRef();
this.noCapture = {};
}

onMouseDown() {
Expand Down Expand Up @@ -335,20 +349,16 @@ class WritingFlow extends Component {

if ( isShift ) {
if ( target === wrapper ) {
const focusableParent = this.container.current.closest( '[tabindex]' );
const beforeEditorElement = focus.tabbable.findPrevious( focusableParent );
beforeEditorElement.focus();
event.preventDefault();
this.noCapture.current = true;
this.focusCaptureBeforeRef.current.focus();
return;
}
} else {
const tabbables = focus.tabbable.find( wrapper );

if ( target === last( tabbables ) ) {
const focusableParent = this.container.current.closest( '[tabindex]' );
const afterEditorElement = focus.tabbable.findNext( focusableParent );
afterEditorElement.focus();
event.preventDefault();
this.noCapture.current = true;
this.focusCaptureAfterRef.current.focus();
return;
}
}
Expand Down Expand Up @@ -472,8 +482,10 @@ class WritingFlow extends Component {
return (
<div className="block-editor-writing-flow">
<FocusCapture
ref={ this.focusCaptureBeforeRef }
selectedClientId={ selectedClientId }
containerRef={ this.container }
noCapture={ this.noCapture }
/>
<div
ref={ this.container }
Expand All @@ -483,8 +495,10 @@ class WritingFlow extends Component {
{ children }
</div>
<FocusCapture
ref={ this.focusCaptureAfterRef }
selectedClientId={ selectedClientId }
containerRef={ this.container }
noCapture={ this.noCapture }
isReverse
/>
<div
Expand Down