Gutenberg: UI: Moving block should scroll window with the block

Created on 2 Mar 2017  路  4Comments  路  Source: WordPress/gutenberg

Tall blocks, such as long paragraphs, can cause disorientation when moving blocks.

Imagine a document:
(Small Para A)
(Large Long Para)
(Small Para B)

when moving Small Para A down and then back up the screen jumps around and it can be hard to follow what is happening. You can see this in

It would be interesting for a designer to evaluate if a small and fast animation might help orient the user as to what is happening.

Framework [Type] Task

Most helpful comment

I think that could definitely help clarify this interaction. I've made a quick mock up (taking some inspiration from the google material/motion guidelines) of how this might look.

This could be tweaked timing wise depending on the feel / speed of other interactions but as a rough idea:

switch-blocks-animation

All 4 comments

I think that could definitely help clarify this interaction. I've made a quick mock up (taking some inspiration from the google material/motion guidelines) of how this might look.

This could be tweaked timing wise depending on the feel / speed of other interactions but as a rough idea:

switch-blocks-animation

Animations would definitely help in one way, but might interfere in another. What if you want to move a block a few blocks down? I'd just like to be able to click through this without delay. Same for keyboard shortcuts. Press and hold means moving it down continuously until the keys are released. For these reasons it is also important that the scroll position is kept for the moving block.

Moving blocks a single space away is definitely helpful, and @iseulde has a great point about moving blocks further away. I wonder if users A) swap nearby blocks (moving within 1-3 blocks of current location) or B) make big content adjustments (moving 4+ blocks from it's original location) more often.

Updated this ticket a bit. It should work as it does in this prototype: https://wordpress.github.io/gutenberg/tinymce-per-block/

Was this page helpful?
0 / 5 - 0 ratings

Related issues

melchoyce picture melchoyce  路  169Comments

jasmussen picture jasmussen  路  173Comments

SchneiderSam picture SchneiderSam  路  88Comments

DeveloperWil picture DeveloperWil  路  102Comments

maddisondesigns picture maddisondesigns  路  79Comments