Writing Flow: 'Down' key at bottom creates new paragraph #3973

mcsf · 2017-12-13T14:18:07Z

Description

Keyboard-only alternative to #3623 (see #3078).

When at the bottom of the editor's content, pressing the down arrow ↓ focuses a brand new paragraph (or whichever is the default block type).
The initial motivation was the fact that, whenever relying on the keyboard for quick editing and insertion of blocks, it becomes cumbersome to manually break out of most blocks and create a new one.
Blocks like Paragraph, Heading or List allow the user to split into a new empty block by pressing Enter at the edge of the block, but this isn't the case for other blocks.
However, pressing Enter at the edge of a Quote block just adds a line within the citation field of that Quote. And while Enter does work for e.g. Image, right now this isn't visually clear (see Try adding focus outline for blocks that don't have input fields #3951 for improvements).
We could try to generically pick up these Enter events and append an empty block, but maybe there is value in adding this ↓-based mechanism—regardless of Enter improvements.

How Has This Been Tested?

Add a Quote
Fill fields quote and citation
From the citation field, expect to press Enter to move on to a new paragraph (or indeed any block thanks to / autocompletion, which I use with a passion).
Notice how Enter adds a line break within citation, so press Backspace to undo
Press ↓, notice how the caret has moved into a new empty block.

Screenshots (jpeg or gifs if applicable):

Types of changes

Writing flow enhancement.

Checklist:

My code is tested.
My code follows the WordPress code style.
My code follows has proper inline documentation.

jasmussen · 2017-12-13T14:22:04Z

I love it! All of these little flow improvements really add up, and this is a nice one. I still think we need #3078 so you can also click at the end of a block list (after an image block for example), but this feels like it ties into that.

Looks like there's a visual regression in the blockquote citation. The font should be smaller and gray, which it is in master.

youknowriad

Some questions:

Do you think we should allow this behavior on "text" blocks only (all blocks with caret) or we should use "enter" in these cases?

If we were to do so, why it's not working on empty paragraphs?

youknowriad · 2017-12-13T14:26:36Z

editor/components/default-block-appender/index.js


 /**
 * Internal dependencies
 */
 import './style.scss';
 import BlockDropZone from '../block-drop-zone';
-import { insertBlock } from '../../actions';
+import { appendDefaultBlock } from '../../actions';
 import { getBlockCount } from '../../selectors';

 export class DefaultBlockAppender extends Component {


I guess this could be a functional component now :)

My thinking too, but jest wasn't happy and I left for the sake of opening the PR :)

mcsf · 2017-12-13T15:12:39Z

Do you think we should allow this behavior on "text" blocks only (all blocks with caret) or we should use "enter" in these cases?

Not sure what you mean. Do you mean should the ↓ append a default block only when the block before it is a textual block? On first thought it seems it should be the behavior for all blocks (and the implementation kind of achieves this by looking at tabbables).

If we were to do so, why it's not working on empty paragraphs?

Similarly to how #3623 had this issue with endless appending, the current implementation bails if the last tabbable is empty. One glaring issue with that is the following, which can be reproduced:

Add a Quote block.
Fill out quote but not citation.
Keeping pressing ↓, hoping to move into an empty appendage, but nothing happens.

Perhaps we can be smarter and look not just at the last tabbable (in this case, the footer inside Quote) but also its tabbable siblings within the block. If at least one of those is non empty, then allow the appending and switching into an empty default block.

mcsf · 2017-12-13T15:43:33Z

56e22cd addresses my previous comment:

Perhaps we can be smarter and look not just at the last tabbable (in this case, the <footer> inside Quote) but also its tabbable siblings within the block. If at least one of those is non empty, then allow the appending and switching into an empty default block.

youknowriad · 2017-12-13T15:48:52Z

Not sure what you mean. Do you mean should the ↓ append a default block only when the block before it is a textual block?

Well! actually the opposite (I wrote the opposite of what I was thinking :) ). It should append a default block only when the block before is not a textual block because in a textual block (think a unique text area for everything), clicking ↓ does not create an empty line.

But I can be on board with the current behavior, just wanted to bring this up :)

youknowriad · 2017-12-13T15:50:29Z

editor/components/writing-flow/index.js

+		}
+
+		// Find block-level ancestor of said last tabbable
+		const blockEl = lastTabbable.closest( '.editor-block-list__block-edit' );


Should we use a const for the classname as it's being used in several places.

@youknowriad, what do you think of 31f9e0a35eb7a46b7749e12baf35779dfefa72b9? As an alternative to spinning up a constants file, etc.

youknowriad

Left some optional comments but this is nice

youknowriad · 2017-12-13T16:36:45Z

editor/components/block-list/block.js

@@ -532,6 +532,8 @@ const mapDispatchToProps = ( dispatch, ownProps ) => ( {
 	},
 } );

+BlockListBlock.className = 'editor-block-list__block-edit';


mcsf · 2017-12-13T16:48:01Z

Looks like there's a visual regression in the blockquote citation. The font should be smaller and gray, which it is in master.

I see the regression, but I'm also seeing it in master. Can anyone confirm?

aduth · 2017-12-13T19:43:32Z

editor/effects.js

@@ -388,4 +390,8 @@ export default {
 		dispatch( saveReusableBlock( reusableBlock.id ) );
 		dispatch( replaceBlocks( [ oldBlock.uid ], [ newBlock ] ) );
 	},
+	APPEND_DEFAULT_BLOCK( action, store ) {
+		const { dispatch } = store;
+		dispatch( insertBlock( createBlock( getDefaultBlockName() ) ) );


Minor: Effects can simply return an action object to dispatch, if they're synchronous.

Ah, good tip, easy to forget.

aduth · 2017-12-13T19:44:12Z

editor/components/writing-flow/index.js

+
+		return blockDescendants.some( isElementNonEmpty );
+
+		function isElementNonEmpty( el ) {


Minor: Based on its name, I'd be inclined to expect typeof isElementNonEmpty( el ) === 'boolean'

Hoisting mechanics are non-obvious 😬 Would it be sensible to move this to the top of the function, or out of it?

aduth · 2017-12-13T19:45:47Z

editor/components/writing-flow/index.js

+			.slice( blockIndex + 1 )
+			.filter( ( el ) => blockEl.contains( el ) );
+
+		return blockDescendants.some( isElementNonEmpty );


Minor: Seems an optimization could check both blockEl.contains and isElementNonEmpty in the same Array#some, instead of the separate Array#filter.

Fixes the following issue introduced by the parent commits: 1. Add a Quote block. 2. Fill out quote but not citation. 3. Keeping pressing ↓, hoping to move into an empty appendage, but nothing happens. Also correctly account for block-level-only tabbables, e.g. Image.

mcsf · 2017-12-14T12:55:02Z

All good tips, @aduth. Amended.

mtias · 2018-01-10T17:02:10Z

This is cool, nice work.

Originally used for down-to-new-paragraph in #3973, removed as of #5271

* Writing Flow: Select block by own focus handler * Block List: Mark default appender events as block-handled * Writing Flow: ... * Block: Move tabIndex to wrapper component See: #2934 See: https://codepen.io/aduth/pen/MQxRME Something needs to capture the focus event, which is skipped by button press on the block's toolbar, but bubbles up wrongly to the parent's edit wrapper (which has tabIndex) and causes parent block to select itself. * Writing Flow: Update block focusable target * Block: Remove unused block classname constant Originally used for down-to-new-paragraph in #3973, removed as of #5271 * Block List: Capture focus event on block wrapper Corresponding to move of tabIndex from inner edit element to wrapper, we also need to capture focus from wrapper. This way, when focus is applied via WritingFlow, the block appropriately becomes selected. This may also make "onSelect" of movers unnecessary. * Block List: Remove pointer handling of onSelect Can now rely on focus behavior captured from wrapper node to reflect selection onto blocks, even those without their own focusable elements * Block List: Avoid select on focus if in multi-selection Multi-selection causes focus event to be triggered on the block, but at that point `isSelected` is false, so it will trigger `onSelect` and a subsequent `focusTabbables`, thus breaking the intended multi-selection flow. * Block Mover: Remove explicit select on block move Focus will bubble to block wrapper (or in case of Firefox/Safari, where button click itself does not trigger focus, focus on the wrapper itself) to incur self-select. * Block List: Singular select block on clicking multi-selected This reverts commit 90a5dab.

mcsf added the [Feature] Writing Flow Block selection, navigation, splitting, merging, deletion... label Dec 13, 2017

mcsf requested review from youknowriad and jasmussen December 13, 2017 14:18

youknowriad reviewed Dec 13, 2017

View reviewed changes

youknowriad approved these changes Dec 13, 2017

View reviewed changes

Writing Flow: 'Down' key at bottom creates new paragraph

198ad60

youknowriad reviewed Dec 13, 2017

View reviewed changes

mcsf force-pushed the update/writing-flow-down-for-paragraph branch from 31f9e0a to 59da174 Compare December 13, 2017 16:47

aduth reviewed Dec 13, 2017

View reviewed changes

mcsf added 3 commits December 14, 2017 12:49

Refactor by adding appendDefaultBlock action

9d31cfb

BlockListBlock: Expose className constant

9894675

mcsf force-pushed the update/writing-flow-down-for-paragraph branch from 59da174 to 9894675 Compare December 14, 2017 12:53

mcsf merged commit 29b757d into master Dec 14, 2017

mcsf deleted the update/writing-flow-down-for-paragraph branch December 14, 2017 13:00

aduth mentioned this pull request Feb 26, 2018

Writing Flow: Remove onBottomReached handling #5271

Merged

aduth added a commit that referenced this pull request Mar 2, 2018

Block: Remove unused block classname constant

f80c123

Originally used for down-to-new-paragraph in #3973, removed as of #5271

aduth added a commit that referenced this pull request Mar 6, 2018

Block: Remove unused block classname constant

95a4d31

Originally used for down-to-new-paragraph in #3973, removed as of #5271

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Writing Flow: 'Down' key at bottom creates new paragraph #3973

Writing Flow: 'Down' key at bottom creates new paragraph #3973

mcsf commented Dec 13, 2017 •

edited

Loading

jasmussen commented Dec 13, 2017

youknowriad left a comment

youknowriad Dec 13, 2017

mcsf Dec 13, 2017 •

edited

Loading

mcsf commented Dec 13, 2017

mcsf commented Dec 13, 2017

youknowriad commented Dec 13, 2017

youknowriad Dec 13, 2017

mcsf Dec 13, 2017

youknowriad Dec 13, 2017

youknowriad left a comment

youknowriad Dec 13, 2017

mcsf commented Dec 13, 2017

aduth Dec 13, 2017

mcsf Dec 14, 2017

aduth Dec 13, 2017

aduth Dec 13, 2017

aduth Dec 13, 2017

mcsf commented Dec 14, 2017

mtias commented Jan 10, 2018


		return blockDescendants.some( isElementNonEmpty );

		function isElementNonEmpty( el ) {

Writing Flow: 'Down' key at bottom creates new paragraph #3973

Writing Flow: 'Down' key at bottom creates new paragraph #3973

Conversation

mcsf commented Dec 13, 2017 • edited Loading

Description

How Has This Been Tested?

Screenshots (jpeg or gifs if applicable):

Types of changes

Checklist:

jasmussen commented Dec 13, 2017

youknowriad left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

mcsf Dec 13, 2017 • edited Loading

Choose a reason for hiding this comment

mcsf commented Dec 13, 2017

mcsf commented Dec 13, 2017

youknowriad commented Dec 13, 2017

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

youknowriad left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

mcsf commented Dec 13, 2017

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

mcsf commented Dec 14, 2017

mtias commented Jan 10, 2018

mcsf commented Dec 13, 2017 •

edited

Loading

mcsf Dec 13, 2017 •

edited

Loading