Try a different inbetweenserter approach #6818
Conversation
|
Bugs aside, this feels like a big improvement. Almost every time I compose content with Gutenberg I accidentally create extra blocks when I click the inbetweenserter, and in my brief testing this really mitigates that! Nice work. Excited to see it polished up. |
|
Yay! I see positive feedback and lots of hearts and approval. I'm going to do a polish pass on this, and see if we can fix the bugs. |
jasmussen
force-pushed
the
try/alternate-inbetweenserter
branch
from
db12f2d
to
71e568b
Compare
This is an attempt to redesign the inbetweenserter to be less frustrating. Currently in master it's too easy to invoke it whe n you don't mean to. This branch changes that approach. You can still hover between two lines to reveal a line indicator. But you can't click this line. Instead, a new plus button sits at the center of this line, and you have to click that to insert between. Please give this a spin. Depending on feedback, it needs visual love, and other tweaks. Right now it's definitely a try branch, and needs your thoughts.
jasmussen
force-pushed
the
try/alternate-inbetweenserter
branch
from
71e568b
to
806e9ec
Compare
|
Rebased and squashed. Thanks to a contribution by Riad, it now looks like this:
We should test that https://github.com/WordPress/gutenberg/pull/6818/files#diff-e0abfc1a3e466fbf4144905e29cf2ef5R22 doesn't cause any regressions. But otherwise, should we get this in early as Tammie suggests, and then look at separate iterations if need be? |
| icon="insert" | ||
| className="editor-block-list__insertion-point-button" | ||
| onClick={ this.onClick } | ||
| aria-label={ __( 'Insert block' ) } |
There was a problem hiding this comment.
aria-label doesn't work on the IconButton component, so this button is not labeled at all and announced just as "button". IconButton needs a label prop. That would also produce a tooltip, which is necessary to make the visually expose the name of the control.
Most importantly, the inserter doesn't show up on focus, when tabbing with the keyboard.
|
Using a
Haven't looked in depth to check why the inserter doesn't appear when focused with the keyboard, but that should be fixed 🙂 |
|
Thanks, both Riad and Andrea! 🤘 |
|
Let's try this! |
This is an attempt to redesign the inbetweenserter to be less frustrating. Currently in master it's too easy to invoke it whe
n you don't mean to.
This branch changes that approach. You can still hover between two lines to reveal a line indicator. But you can't click this line. Instead, a new plus button sits at the center of this line, and you have to click that to insert between.
Please give this a spin. Depending on feedback, it needs visual love, and other tweaks. Right now it's definitely a try branch, and needs your thoughts. For example, when you click to insert a provisional placeholder block, you're still hovering in an area where the inserter line will appear, but it should immediately fade out instead. We might also want to look at some of that sizing magic that @aduth used for the old inbetweenserter.