UX improvements for "Add Blocks" widget with many block types

[ScopeyNZ]

Follow up from #338.

#338 has implemented the content of a popover that will be used to add blocks to a page. Currently all blocks will show in the popover. This will be an issue given project may have many block types.

We should at least implement a max-height for this widget and allow scrolling (or similar) when there are many blocks.

Designs: https://projects.invisionapp.com/dsm/silver-stripe/silver-stripe/asset/components/5b90499d4d45900010a7be60

[clarkepaul]

@ScopeyNZ yup @newleeland is on it.

[robbieaverill]

I guess we also need to show a limited number of blocks to start with (9 maybe, if it's three columns?). Then the search feature can show more.

We probably need a way for devs to give priority to specific block types for their projects, e.g. where a "carousel block" is more used than a "content block" so they'd want to make sure it shows up by default rather than having to search for it each time.

We could do that with a numeric config flag which could be increased in YAML to give a higher priority, but I'm not sure how that would work with GraphQL queries which expect DB values, and it would also mean having to filter a list of blocks in PHP rather than in the ORM query which might have a small performance hit. We could also just return the list of block types in PHP with no ORM queries at all, then problem solved.

[ScopeyNZ]

The long term goal sounds like it will allow CMS authors to categorise blocks. The short term "MVP" is to show a number in two columns (12 I think?) and have it scrollable. I think @newleeland is still finalising.

[clarkepaul]

Added designs to top comment for further breakdown of ACs

[raissanorth]

Maximum-height was added as part of #406.

Before I close this ticket I would like to add an automated way to test this, i.e. making it easy to add at least a dozen different block types.
I believe @chillu, you are working on a way to add elements to pages for testing purposes. Will this work include different types of blocks, you reckon?

[chillu]

I'm only building a block generator which uses existing block types: silverstripe/silverstripe-frameworktest#49. You're correct that you should check this with a number of blocks. You could either adapt https://github.com/silverstripe/silverstripe-frameworktest/blob/master/code/tasks/FTPageTypeCreatorTask.php, or just do it manually. But don't let this card be blocked by my (somewhat unrelated) block generator work

[raissanorth]

Alrighty, thanks for the update @chillu. Will proceed manually... for now! ;)

[raissanorth]

Hi @newleeland,
do you approve of how the last few elements are cut of in the below screenshot to indicate that the user can scroll for more?

The design looks slightly different, but I used the measurements provided.... 🤔

[raissanorth]

IE:

Edge:

Firefox:

[raissanorth]

@newleeland

Made some minor adjustment in #413 - had to be more precise in regards to the elements - and now the title of the last elements are shown in the popover. Are you happy with that?

[raissanorth]

Showed @newleeland in person and got approval! 😀

Requested that the search bar stays fixed to the top of the popover when one scrolls through the available block types. Logged as a separate issue in #414

[raissanorth]

Closed via #406 and #413.