Create an "Add Block" popover widget

[ScopeyNZ]

The designs have a popover widget that is used to select a block type when adding new blocks to an elemental area. This widget is shown when clicking the add button and also when using the control that appears between blocks (see designs).

Designs

User Story

As a user, I want a way to select a block from a selection of blocks which have been made available to me and add it within a page, so that I can build a page with different block types easily.

A/Cs

• React popover component created that can be opened at an arbitrary point on the page
• Popover lists the blocks that are available to be added to a page
• The correct icon is used for blocks that are available
• Block options can be tabbed through (ie. keyboard accessible)
• Only 8 blocks are shown, and a "Show all blocks" link is provided to show all blocks immediately

Related issues

(Closed) Previous issue: #293
Show this popover when pressing the buttons: #339
Make this popover do something: #340
Implement the search functionality: #341
Show an "Add Blocks" link/control when no blocks are in an area: #351

[clarkepaul]

Can we remove the AC "Only 8 blocks are shown, and a "Show all blocks" link is provided to show all blocks immediately"? As a first cut, it would be best to just show all blocks in alphabetic order. We will advise on a max-height for the popover and blocks can just scroll within that space. There will be a downside to this (double scroll with page beneath) but makes it an easy start to getting something usable with having to do a "show all" expand area. We will update the design accordingly.

Sorry I can't edit the original issue.

[ScopeyNZ]

So remove the A/C and replace it with "Blocks are shown in alphabetical order and a scroll bar is used when there are many blocks"? Also, I note that the designs say "most used" but we don't have a method to determine the "most used" blocks right now - and it's not really factored into the estimation for this task - Should we separate that out? I note you're talking about blocks in alphabetical order so should we change the title ("most used")?

[raissanorth]

@newleeland confirmed that we won't show a "Most used" heading for now, but it is something that may be added in the future. For now we won't show a heading.

[raissanorth]

Could you also include in the designs how the users will know that they can scroll to see additional elements, please.

This is the default view on a Mac:

And this is what it looks like when I scroll:

Note, I will remove the 'Most used' header and used an arbitrary value for the max-height for testing.

[clarkepaul]

Yeah, so I thought we would break this into smaller stories to make it more achievable (as said we never estimated for the most used ordering I think). For the first phase it'll just be a list in alphabetic order with the whole panel (excluding the search) being scrollable if it exceeds the height (@newleeland to provide).

Let's ensure that the max height cuts off overflowing items so it can be seen there are more to scroll to.

Out if scope (likely for future):

• Order by most used
• Ability for devs to categorise blocks in groups with category headers

[ScopeyNZ]

I'm pretty keen to get the work that Raissa has already done into master as this issue is blocking 4 other issues that we want to start on this week/next week. @clarkepaul are you okay with transferring the outstanding style touch-ups to a follow up issue?

[clarkepaul]

Sure yup, sounds good.