Block browser library iterations

[karmatosed]

This issue is a series of iterations for the block browsing library. These are aimed at solving a number of issues:

• An extra menu item / scroll area using ' ... ' is added, a convention used a lot on mobile and allows us to look to have extending to this menu, for example maybe allowing favourites.
• Clear, large hit areas for blocks. This not only visually helps but also allows for easier accessibility by having wider areas to select.

Props to @iamthomasbishop for the inspiration on block buttons and more, through his mobile work.

Along with this, we have a clearer, lighter header by removing the tab backgrounds.

[stefanos82]

To be honest, I wanted to bring this up today after I briefly tested Elementor and liked their "big buttons" approach.

When I first heard about Gutenberg, I thought it would look something like this by default.

@karmatosed I really like this approach.

Cheers 👍

[davewhitley]

Here's what it looked like before

[davewhitley]

I like it! The search field might be more obvious with an icon, or maybe it gets focus by default after clicking on the add button?

The ... should probably be an icon. Right now, it's hard to see. I think it this case, I'd prefer a vertical ... icon as seen in many Android apps.

[jasmussen]

Part of this was addressed in #5743, notably lighter tabs and bordered blocks for a more distinct hit area.

Next steps I'd like to address, as part of this ticket and ensurng discussion:

• making the gradient at the bottom much improved — it's actually already there but it's a shadow, so it sort of disappears into the bottom shadow as well.
• add a search icon — great thoughts everyone
• search focus style improvements are being explored separately in Try: Make input styles consistent #5605

I would suggest we close this ticket as fixed once those fixes are in. Notably because this one is very complicated to build, and not urgently necessary:

An extra menu item / scroll area using ' ... ' is added, a convention used a lot on mobile and allows us to look to have extending to this menu, for example maybe allowing favourites.

Even if in a closed ticket, we can revisit this pattern if and when it becomes necessary to add more items to the tabbar.

What do you think?

[karmatosed]

I think close but maybe open an issue to have that menu implemented and put for future release. Does that sound good?

[jasmussen]

I think close but maybe open an issue to have that menu implemented and put for future release. Does that sound good?

I think that could work as a way to store the mockups, perhaps tagged Customization. Right now, as I noted, it doesn't feel like there's a pressing need for additional tabs in that menu, but if/when that need comes, it can be revisited.

[karmatosed]

Closing as opening new issue to include in Customization focus for the menu.