Skip to content

Inserter: Display patterns in a two-column masonry grid with improved category filtering #28312

@joanrho

Description

@joanrho

What problem does this address?

The current single column layout of pattern thumbnails in the Patterns tab of the Sidebar Inserter makes it arduous to scroll through and view many patterns at once, especially if there are many patterns within a category. The category dropdown menu requires two clicks to change the category view which feels a bit clunky and slow when browsing patterns.

What is your proposed solution?

SidebarInserter-Patterns(proposed)

This proposed direction displays patterns in a two-column masonry grid (to accommodate the varying heights of the designs) with category filter links so users can immediately get a sense of the breadth of categories offered and jump between category views with a single click. Here, I’m pulling example categories from WordPress.com where there are far more (~14) than in the Core Editor (~5)—both may have an extra category named after the current active Theme if there are patterns registered by that Theme.

These category filter links can be iterated on further once we’re able to offer multi-select category filtering in the future when pattern loading performance is optimized.

Metadata

Metadata

Assignees

No one assigned

    Labels

    Needs Design FeedbackNeeds general design feedback.[Feature] InserterThe main way to insert blocks using the + button in the editing interface[Feature] PatternsA collection of blocks that can be synced (previously reusable blocks) or unsynced

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions