From d95c03c0cf358af5c53762a3a4cf8a787d963199 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Fri, 28 Apr 2017 16:33:01 +0100 Subject: [PATCH 1/3] Blocks: Reselect the current block if we click again on it --- editor/modes/visual-editor/block.js | 8 +++----- editor/state.js | 8 ++++++-- editor/test/state.js | 19 +++++++++++++++++-- 3 files changed, 26 insertions(+), 9 deletions(-) diff --git a/editor/modes/visual-editor/block.js b/editor/modes/visual-editor/block.js index 31789867c6b1b..84fe1c5f1d251 100644 --- a/editor/modes/visual-editor/block.js +++ b/editor/modes/visual-editor/block.js @@ -137,15 +137,13 @@ class VisualEditorBlock extends wp.element.Component { wrapperProps = settings.getEditWrapperProps( block.attributes ); } - // Disable reason: Each block can receive focus but must be able to contain - // block children. Tab keyboard navigation enabled by tabIndex assignment. + // Disable reason: Each block can be selected by clicking on it - /* eslint-disable jsx-a11y/no-static-element-interactions */ + /* eslint-disable jsx-a11y/no-static-element-interactions, jsx-a11y/onclick-has-role */ return (
{ expect( state ).to.eql( { uid: 'kumquat', typing: false, focus: {} } ); } ); - it( 'should not update the state if already selected', () => { - const original = deepFreeze( { uid: 'kumquat', typing: true, focus: {} } ); + it( 'should not update the state if already selected and not typing', () => { + const original = deepFreeze( { uid: 'kumquat', typing: false, focus: {} } ); const state = selectedBlock( original, { type: 'TOGGLE_BLOCK_SELECTED', uid: 'kumquat', @@ -269,6 +269,21 @@ describe( 'state', () => { expect( state ).to.equal( original ); } ); + it( 'should update the state if already selected and typing', () => { + const original = deepFreeze( { uid: 'kumquat', typing: true, focus: { editable: 'content' } } ); + const state = selectedBlock( original, { + type: 'TOGGLE_BLOCK_SELECTED', + uid: 'kumquat', + selected: true + } ); + + expect( state ).to.eql( { + uid: 'kumquat', + typing: false, + focus: { editable: 'content' } + } ); + } ); + it( 'should unselect the block if currently selected', () => { const original = deepFreeze( { uid: 'kumquat', typing: true, focus: {} } ); const state = selectedBlock( original, { From 473563af5185c741c68e962b36994db66f8970a3 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Mon, 1 May 2017 11:08:31 +0100 Subject: [PATCH 2/3] Editable: Avoid unnecessary updateContent calls --- blocks/components/editable/index.js | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/blocks/components/editable/index.js b/blocks/components/editable/index.js index 58a336a1f2d9e..52022c05ae6f6 100644 --- a/blocks/components/editable/index.js +++ b/blocks/components/editable/index.js @@ -108,8 +108,9 @@ export default class Editable extends wp.element.Component { return; } + this.savedContent = this.getContent(); this.editor.save(); - this.props.onChange( this.getContent() ); + this.props.onChange( this.savedContent ); } isStartOfEditor() { @@ -216,7 +217,8 @@ export default class Editable extends wp.element.Component { updateContent() { const bookmark = this.editor.selection.getBookmark( 2, true ); - this.setContent( this.props.value ); + this.savedContent = this.props.value; + this.setContent( this.savedContent ); this.editor.selection.moveToBookmark( bookmark ); // Saving the editor on updates avoid unecessary onChanges calls // These calls can make the focus jump @@ -266,10 +268,13 @@ export default class Editable extends wp.element.Component { this.focus(); } + // The savedContent var allows us to avoid updating the content right after an onChange call if ( this.props.tagName === prevProps.tagName && this.props.value !== prevProps.value && - ! isEqual( this.props.value, prevProps.value ) + this.props.value !== this.savedContent && + ! isEqual( this.props.value, prevProps.value ) && + ! isEqual( this.props.value, this.savedContent ) ) { this.updateContent(); } From b8f7505d01f06605687de1693ad1016b5945de37 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Mon, 1 May 2017 15:44:40 +0100 Subject: [PATCH 3/3] Blocks: Fix tab navigation --- blocks/library/quote/index.js | 5 +++-- editor/modes/visual-editor/block.js | 2 ++ 2 files changed, 5 insertions(+), 2 deletions(-) diff --git a/blocks/library/quote/index.js b/blocks/library/quote/index.js index f6bedc0b8506a..8c90696cd11ba 100644 --- a/blocks/library/quote/index.js +++ b/blocks/library/quote/index.js @@ -42,6 +42,7 @@ registerBlock( 'core/quote', { edit( { attributes, setAttributes, focus, setFocus } ) { const { value, citation, style = 1 } = attributes; + const focusedEditable = focus ? focus.editable || 'value' : null; return (
@@ -52,7 +53,7 @@ registerBlock( 'core/quote', { value: nextValue } ) } - focus={ focus && focus.editable === 'value' ? focus : null } + focus={ focusedEditable === 'value' ? focus : null } onFocus={ () => setFocus( { editable: 'value' } ) } /> { ( citation || !! focus ) && ( @@ -64,7 +65,7 @@ registerBlock( 'core/quote', { citation: nextCitation } ) } - focus={ focus && focus.editable === 'citation' ? focus : null } + focus={ focusedEditable === 'citation' ? focus : null } onFocus={ () => setFocus( { editable: 'citation' } ) } /> diff --git a/editor/modes/visual-editor/block.js b/editor/modes/visual-editor/block.js index 84fe1c5f1d251..2ea2e26f2ded9 100644 --- a/editor/modes/visual-editor/block.js +++ b/editor/modes/visual-editor/block.js @@ -144,6 +144,7 @@ class VisualEditorBlock extends wp.element.Component {
{ ( ( isSelected && ! isTyping ) || isHovered ) && }