diff --git a/blocks/components/editable/index.js b/blocks/components/editable/index.js index 165161fe0c7a8b..83672b055e21ac 100644 --- a/blocks/components/editable/index.js +++ b/blocks/components/editable/index.js @@ -89,7 +89,7 @@ export default class Editable extends wp.element.Component { } onInit() { - this.focus(); + this.updateFocus(); } onFocus() { @@ -235,7 +235,7 @@ export default class Editable extends wp.element.Component { return nodeListToReact( this.editor.getBody().childNodes || [], createElement ); } - focus() { + updateFocus() { const { focus } = this.props; if ( focus ) { this.editor.focus(); @@ -244,6 +244,8 @@ export default class Editable extends wp.element.Component { this.editor.selection.select( this.editor.getBody(), true ); this.editor.selection.collapse( false ); } + } else { + this.editor.getBody().blur(); } } @@ -252,8 +254,8 @@ export default class Editable extends wp.element.Component { } componentDidUpdate( prevProps ) { - if ( !! this.props.focus && ! prevProps.focus ) { - this.focus(); + if ( this.props.focus !== prevProps.focus ) { + this.updateFocus(); } // The savedContent var allows us to avoid updating the content right after an onChange call diff --git a/editor/modes/visual-editor/block.js b/editor/modes/visual-editor/block.js index 0c90fe510e4f1e..26e4acd87d1ed5 100644 --- a/editor/modes/visual-editor/block.js +++ b/editor/modes/visual-editor/block.js @@ -81,6 +81,9 @@ class VisualEditorBlock extends wp.element.Component { const { keyCode, target } = event; 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 } ); + } } } @@ -96,6 +99,7 @@ class VisualEditorBlock extends wp.element.Component { // Do nothing if the previous block is not mergeable if ( ! previousBlockSettings.merge ) { + onFocus( previousBlock.uid ); return; } @@ -129,7 +133,7 @@ class VisualEditorBlock extends wp.element.Component { ); } - componentDidUpdate() { + componentDidUpdate( prevProps ) { if ( this.previousOffset ) { window.scrollTo( window.scrollX, @@ -137,6 +141,11 @@ class VisualEditorBlock extends wp.element.Component { ); this.previousOffset = null; } + + // Focus node when focus state is programmatically transferred + if ( this.props.focus && ! prevProps.focus ) { + this.node.focus(); + } } render() {