New Block: Try a modal/popover block

[ryelle]

On many of the redesigned sites, we've been circling around a filter bar design, which uses a modal-ish popover-ish component. For example on Themes, the list of filters is hidden behind the "filters" button. When it's clicked, the filters appear. There is no core block to do this, so we need to create one.

I started this block as a modal, using micromodal (which is also used by the Navigation block). I realized though, that a popover is a slightly different interaction, and ended up creating two variations on the Modal, Popover and Collapsed, ending with 3 new blocks.

• Modal: The container that floats in the middle of the screen. Clicking outside the container or hitting escape will close it.
• Popover: The container stays attached to the toggle button but overlaps the content, like a dropdown menu. Clicking outside the container or hitting escape will close it.
• Collapsed (inline): The container is hidden by default, but when expanded, pushes the content below down to not overlap. Only closed by clicking the toggle, to prevent content jumps.

It's meant to be more of a proof-of-concept. (More details and inspiration will be here before I un-draft this)

Screenshots

When closed, the block just renders the button:

When the button is toggled on, the content appears. The styling needs help, of course, but a lot of that can be done in the editor, so that we can style differently for the different sites - themes can be dark while plugins is light, for example.

(I've added in form elements just to show how it would work, those would need to be custom blocks per-theme to support the different filtering methods)

Modal	Popover	Inline

Editor— the block doesn't use a modal pattern in the editor, but the content does show/hide on selection.

Default, other blocks selected	Modal block selected

To test

• Try it in the editor
• Or try using this page template: https://gist.github.com/ryelle/e4294389e82724782649c23eca4c4c78