Rearrange the interface to improve the writing/editing process

[jaclyntan]

After using GB for two of my latest projects, I feel like the overall user experience and interface can be vastly improved on through just a few simple tweaks and rearranging the toolbars and buttons.

To start with, this is how GB looks now, hovering over a block:

Sorry for the red....but I really, realllly think the block settings button should be visible at all times, and not just on hover. If it's hidden it's almost like it doesn't exist or isn't important, so people would naturally ignore it.

However, it's not just this button- it's the overall process of writing using Gutenberg. There is so much more clicking and hovering compared to the old editor, - and it's tiring. Especially when you are editing multiple pages and constantly inserting/adding content.

I have mocked up my proposed change below:

1. I have moved the settings button to the right of the block, and also added a much needed delete block button next to it. If you have used Behance and have used their project editor, they have a similar feature and it makes editing so much more seamless. I am aware that GB has a design pattern and I have seen a previous issue where people agreed the settings button should be with the other icons in the toolbar. However, I disagree with this design pattern - it clutters the actual block editor buttons and confuses the functionality of this toolbar.
2. I have moved the rearrange blocks button group(the arrows) to the right of the block. Whilst I think it would be great if these could also have drag and drop functionality for the entire block, the reasoning behind this was so the cursor is MUCH closer to the Update button at the top of the page. This would make updating and rearranging the blocks 10000x quicker and easier. This would be noticeable for people using large screens like me.

An overall screenshot mockup is below:

Let me know what you think.

[chrisvanpatten]

Regarding your first point, there's an open PR that would move the block settings menu to the toolbar! Check it out at #9282.

I'd love to hear more about the second point. Could you elaborate a bit more on that one?

Right now I believe part of the intention behind having them placed on the left is to keep them close to the toolbar, so you can move between the toolbar controls and movers more easily.

[jaclyntan]

Thanks, I'll see if I can add to any discussion in that issue.

Regarding the second point, when you have multiple blocks that need to be rearranged (because content changes, all the time), I think having the arrows on the right would be an immense time saver simply because then you don't have to move your cursor diagonally across the screen every time you want to press that Update button. It'd be pretty noticeable on large screens I think, because even on my 21.5" iMac it was super annoying having to move the cursor across the page to update the content.

I also feel like you should be able to press and hold those up/down arrows to drag and drop the blocks, rather than click on them to rearrange the order. Not sure how easy this would be to do now but that is how I thought the arrows functioned initially before realising they had to be clicked instead.

Also please add a delete button! It would make me so happy and I don't think I'd even complain about all the hovering as much if updating content was more streamlined.

[chrisvanpatten]

Also please add a delete button! It would make me so happy and I don't think I'd even complain about all the hovering as much if updating content was more streamlined.

To this point, there actually used to be a delete button, but it was moved to the block menu. I don't remember the ticket number off-hand (I'll try to dig it up) but it was a deliberate change in response to feedback; I think people were finding it too easy to accidentally hit the delete button.

[youknowriad]

I'm going to close this issue now as the interface has changed drastically and will change with #18667
If there's specific things left, please consider specific issues.