Skip to content

Align pattern / template part modal dimensions, and add view options #39308

@jameskoster

Description

@jameskoster

There are a couple of places where Patterns and/or Template Parts appear in modals, specifically the Pattern Explorer and the Template Part replacement flow.

Edit: Now also when creating pages, and working with empty Query blocks.

Pattern Explorer

Screenshot 2022-03-09 at 10 41 22

Template Part replacement

Screenshot 2022-03-09 at 10 41 01

As we apply this UX across different flows throughout the editor, there are a couple of issues we might consider addressing sooner rather than later.

Sizing

Patterns and Template Parts can often be large, so it's probably worthwhile mimicking the sizing from the Pattern Explorer in other instances. We may even want to revisit the full screen modal component concept in order to make the maximum use of space: #28574.

Consistent sizing will help make the overall UX feel more familiar and robust.

View options

Patterns come in all shapes and sizes so a strict layout for displaying them doesn't always work so well, even with a larger modal. As an example, the three column layout in the Pattern Explorer works well for the "Pages" pattern category, but less well for "Footers".

Pages Footers
Screenshot 2022-03-09 at 10 50 18 Screenshot 2022-03-09 at 10 50 35

One option would be to employ a zoom scale so that folks can adjust the display based on the types of patterns they're browsing. Similar to apps like Apple Photos:

zoom.mp4

Todo:

Metadata

Metadata

Assignees

No one assigned

    Labels

    Needs Design FeedbackNeeds general design feedback.[Feature] PatternsA collection of blocks that can be synced (previously reusable blocks) or unsynced[Type] EnhancementA suggestion for improvement.

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions