Skip to content

Avoid block unselection by focus leave #836

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

Merged
aduth merged 3 commits into from
May 18, 2017
Merged

Avoid block unselection by focus leave #836

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
e09640e
Clear selected block by clicking canvas or escape key
aduth May 18, 2017
535b475
Clear selected block by click adjacent block controls
aduth May 18, 2017
f520429
Handle deselect by escape at block component
aduth May 18, 2017
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
Prev Previous commit
Handle deselect by escape at block component
  • Loading branch information
@aduth
aduth committed May 18, 2017
commit f5204297f44b85960f39fd4058da29ced17257b7
13 changes: 10 additions & 3 deletions editor/modes/visual-editor/block.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ class VisualEditorBlock extends wp.element.Component {
this.setAttributes = this.setAttributes.bind( this );
this.maybeHover = this.maybeHover.bind( this );
this.maybeStartTyping = this.maybeStartTyping.bind( this );
this.removeOnBackspace = this.removeOnBackspace.bind( this );
this.removeOrDeselect = this.removeOrDeselect.bind( this );
this.mergeBlocks = this.mergeBlocks.bind( this );
this.selectAndStopPropagation = this.selectAndStopPropagation.bind( this );
this.previousOffset = null;
Expand Down Expand Up @@ -88,14 +88,21 @@ class VisualEditorBlock extends wp.element.Component {
}
}

removeOnBackspace( event ) {
removeOrDeselect( event ) {
const { keyCode, target } = event;

// Remove block on backspace
if ( 8 /* Backspace */ === keyCode && target === this.node ) {
this.props.onRemove( this.props.uid );
if ( this.props.previousBlock ) {
this.props.onFocus( this.props.previousBlock.uid, { offset: -1 } );
}
}

// Deselect on escape
if ( 27 /* Escape */ === event.keyCode ) {
this.props.onDeselect();
}
}

mergeBlocks( forward = false ) {
Expand Down Expand Up @@ -180,7 +187,7 @@ class VisualEditorBlock extends wp.element.Component {
ref={ this.bindBlockNode }
onClick={ this.selectAndStopPropagation }
onFocus={ onSelect }
onKeyDown={ this.removeOnBackspace }
onKeyDown={ this.removeOrDeselect }
onMouseEnter={ onHover }
onMouseMove={ this.maybeHover }
onMouseLeave={ onMouseLeave }
Expand Down
20 changes: 4 additions & 16 deletions editor/modes/visual-editor/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@
* External dependencies
*/
import { connect } from 'react-redux';
import { cond } from 'lodash';

/**
* WordPress dependencies
Expand All @@ -18,26 +17,15 @@ import VisualEditorBlock from './block';
import PostTitle from '../../post-title';
import { getBlockUids } from '../../selectors';

/**
* Returns true if the key pressed is the escape key, or false otherwise.
*
* @param {KeyboardEvent} event Key event to test
* @return {Boolean} Whether event is escape key press
*/
function isEscapeKey( event ) {
return 27 /* Escape */ === event.keyCode;
}

function VisualEditor( { blocks, clearSelectedBlock } ) {
// Disable reason: Focus transfers between blocks are handled by focusable
// block elements. Capture unhandled event bubbling as unselect intent.
// Disable reason: Focus transfer between blocks and key events are handled
// by focused block element. Consider unhandled click bubbling as unselect.

/* eslint-disable jsx-a11y/no-static-element-interactions */
/* eslint-disable jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */
return (
<div
role="region"
aria-label={ __( 'Visual Editor' ) }
onKeyPress={ cond( [ [ isEscapeKey, clearSelectedBlock ] ] ) }
onClick={ clearSelectedBlock }
className="editor-visual-editor">
<PostTitle />
Expand All @@ -47,7 +35,7 @@ function VisualEditor( { blocks, clearSelectedBlock } ) {
<Inserter position="top right" />
</div>
);
/* eslint-enable jsx-a11y/no-static-element-interactions */
/* eslint-enable jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */
}

export default connect(
Expand Down