Gutenberg: Fade out all outlines as you are typing
Take the UI prototype for a spin: https://automattic.github.io/gutenberg/ — put the cursor in a paragraph, make some linebreaks, write some text, soak it up.
It's not intended to be super functional, but rather to give a feel for how the block and inline level controls can work, and how that feels while typing. Depending on how far we want to take it, here are some thoughts on how the feel of it all could be improved.
Type selector + up/down rearrangement controls
Should we be showing these controls when you hover over a block? Right now only the faint outlines show up. Might be nice for some quick rearranging to not have to click first.
Show outlines in block you are typing in
Right now the faint outlines show only when you hover over a block with a mouse. Should we be showing these outlines as you are typing inside a block as well? (And only on that block?)
... OR: fade out all outlines as you are typing?
Related to hover outlines, instead of showing outlines on the block you are typing in, we could consider fading out all outlines as you are typing, even outlines on block that your mouse is currently over. The cursor itself fades out anyway, maybe the outlines should too?
When rearranging blocks, the block moved should stay is-selected.
Moving around blocks right now is neat, but a little disorienting. Perhaps we should even add a subtle animation showing the block moving to its new place, squishing out the old block.
jasmussen
All 5 comments
Show outlines in block you are typing in
I think so. Right now if you press enter from a block and start a new one, the previous block retains the light gray border and the new one has none. We should start with only highlighting in gray the block being edited.
mtias
on 8 Feb 2017
I think we would end up with three states:
- Hover state.
- Selected state.
- Editing state.
mtias
on 8 Feb 2017
Should we be showing these controls when you hover over a block? Right now only the faint outlines show up. Might be nice for some quick rearranging to not have to click first.
When trying it out I felt like I expected to see the controls appear without having to click. It made me pause.
Perhaps we should even add a subtle animation showing the block moving to its new place, squishing out the old block.
+1 to trying it out, at least. I felt the same way when moving blocks.
ianstewart
on 8 Feb 2017
As an update, When rearranging blocks, the block moved should stay is-selected has been fixed.
Showing controls on hover is in progress: https://github.com/WordPress/gutenberg/pull/59
The remaining task, fade out all outlines as you are typing, we should do that. We should also consider it in the context of https://github.com/WordPress/gutenberg/issues/61
jasmussen
on 14 Feb 2017
This is done in both prototypes.
jasmussen
on 16 Mar 2017
Related issues
spocke
·
3Comments
wpalchemist
·
3Comments
youknowriad
·
3Comments
davidsword
·
3Comments
mhenrylucero
·
3Comments
Most helpful comment
When trying it out I felt like I expected to see the controls appear without having to click. It made me pause.
+1 to trying it out, at least. I felt the same way when moving blocks.