Try: Writing Flow: Clickable text canvas to focus closest tabbable

[aduth]

Note: Work-in progress. While the basic behaviors work fairly well, it's not expected to be flawless and at this point serves more for demonstration.

This pull request seeks to experiment with an idea for more easily navigating into tabbable fields by clicking on the canvas surrounding the list of blocks. This is inspired by behaviors from typical Word processors like Google Docs, where clicking anywhere on the edge of the document will place the caret at the most relevant piece of text.

The effect is a bit hard to describe without trying it for yourself, but I've attempted to demonstrate in the GIF below:

Note that...

• To start writing, I click anywhere below the title. The behavior is such that if the last block is not a paragraph block, one will be added (including when there are no blocks).
• Again I add another paragraph after the image block by clicking arbitrary below it on the page.
• After adding some text to the paragraph block, I start clicking below the text.
  • Despite not clicking on the paragraph block itself, the caret moves to the corresponding X position of the text within.
  • As I start clicking up the side gutters of the canvas, the block at the corresponding Y position becomes selected

Remaining tasks:

• Probably don't need the hover effect for the default block appender, since the user no longer needs to click explicitly within it
• Restore behavior where arrow down within paragraph block creates a new paragraph block below
• X coordinate aligning of caret doesn't work for textareas (i.e. post title). I think this should be possible to support.
• Lots of implementation details: click behaviors too aggressive, inline code comments, corrected function names (early implementation was specific to blocks, not tabbables)

[jasmussen]

I really, really like the thinking around this.

I'm aware that this is a work in progress, so you're probably already aware of this — it's now hard to deselect a block once selected, because it keeps selecting the same block.

[aduth]

Superseded by #5541