Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

New Block: Try a modal/popover block #393

Draft
wants to merge 6 commits into
base: trunk
Choose a base branch
from
Draft

New Block: Try a modal/popover block #393

wants to merge 6 commits into from

Conversation

ryelle
Copy link
Contributor

@ryelle ryelle commented Apr 28, 2023

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:

modal-closed

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
modal-modal modal-popover modal-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
modal-editor-closed modal-editor-active

To test

@ryelle ryelle self-assigned this Jun 21, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant