Gutenberg: Up/Down arrows - move blocks independent of relation to placement inside/outside a container

Created on 3 Aug 2020  Â·  7Comments  Â·  Source: WordPress/gutenberg

Is your feature request related to a problem? Please describe.
The problem right now is that it is difficult to drag a block in and out of a container type (Group, Columns etc) of block.
Especially in relation to activating the Top Toolbar.
https://github.com/WordPress/gutenberg/issues/21407#issuecomment-667944282

The up/down block move arrows only relates to the current level of the block that is selected. If one has selected the child block inside any container type of Block (Group, Columns, etc) the up/down arrows relate to the space inside the parent block.

Describe the solution you'd like
Let's make it possible to click the up/down arrows and move a block independent of the level it is at.

A wireframe example.
-- Group Block (parent)
--- Paragraph block 1 (child)
--- Paragraph block 2 (child)

Screen Shot 2020-08-03 at 12 23 29

Selecting Paragraph group block 2 and clicking the down arrow moves it out of the Group Block.

Using a snackbar notification?
Moving a block in/out of a container type block could show a snackbar notification letting the user know that they are now moving a block out of the current level it is at.

Reusable Blocks
Reusable blocks is a self contained block. One should not be able to move a block into it by clicking the up/down arrow in a block outside of it. Adding additional blocks to a reusable block can be done by clicking edit in the reusable block and then moving outside blocks into it.

Describe alternatives you've considered
Using the drag & drop to move blocks in and out of Group Block etc.

Needs Design Feedback [Feature] Blocks [Type] Enhancement

Most helpful comment

To me this seems a great idea. The only thing that pauses me is that maybe there are consequences — like for multi-column stuff – that I might not be foreseeing. For this reason I think that prototyping this would be necessary, just to make sure that something that seems a good logical idea doesn't have unintended consequences.

Two notes:

  1. This should be symmetrical: if going "up" takes the block out, going "down" should get the block back in.
  2. Adjacent containers (like a 3 columns block) should be chained together: so going "up" from column 3 when at the top, would go to the bottom of column 2, and same for column 2 to 1, and at the top of column 1 going "up" would snap out.

I don't think this should have a snackbar notification however. I think the behaviour is self-evident just looking at the screen.

All 7 comments

To me this seems a great idea. The only thing that pauses me is that maybe there are consequences — like for multi-column stuff – that I might not be foreseeing. For this reason I think that prototyping this would be necessary, just to make sure that something that seems a good logical idea doesn't have unintended consequences.

Two notes:

  1. This should be symmetrical: if going "up" takes the block out, going "down" should get the block back in.
  2. Adjacent containers (like a 3 columns block) should be chained together: so going "up" from column 3 when at the top, would go to the bottom of column 2, and same for column 2 to 1, and at the top of column 1 going "up" would snap out.

I don't think this should have a snackbar notification however. I think the behaviour is self-evident just looking at the screen.

I am bringing attention to this issue again as I noticed @afercia 's comment in the Accessibility slack channel:
"I mean: I was expecting the Move up and Move down buttons to move also across areas."

Actually the method I mention above could also be added to moving widgets between widget areas using the move up and down arrows.

@talldan @mapk @draganescu @adamziel

This can become a general feature in the post editor and in the widget screen.

We should also take care to announce via tooltip and aria labels that the block will leave its current nesting after the action is completed.

Here is an animated gif to show a visual of moving a paragraph block from inside the Group block and out of it.
As can be seen by noticing the breadcrumbs on the bottom.

Move-Block

I think it could be worth trying this. Some thoughts:

  • Not all blocks move up and down, some move left and right. Similar to what Andrei mentions, I think we should consider a different icon and text on the mover button to indicate that it's a different action.
  • It might be quite tiring moving a block through more deeply nested areas like the navigation block when a user just wants to move before or after the nav block.

The first actionable item would be the issue I linked to just above. https://github.com/WordPress/gutenberg/issues/26020
In regards to be able to move widgets between widget areas using the up and down arrow icons.


The move arrow icons are used in many different situations. This also means that this would very likely not be a general feature but we should initially try it out with the blocks that need it the most. (After the above widget screen). What comes to mind is that we have for instance the Cover, Group and Columns blocks where moving blocks in and out of the container would create a helpful flexibility. As today it is tricky moving blocks in and out of these container blocks.

#26020 was closed as a duplicate. I think the widgets screen could be considered a use case of the proposed feature, but the implementation would likely be block editor wide functionality rather than specific to a single editor, so only this one issue is required.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

franz-josef-kaiser picture franz-josef-kaiser  Â·  3Comments

wpalchemist picture wpalchemist  Â·  3Comments

jasmussen picture jasmussen  Â·  3Comments

aaronjorbin picture aaronjorbin  Â·  3Comments

mhenrylucero picture mhenrylucero  Â·  3Comments