Patterns: Improve preview and modals to better capture full page patterns

[annezazu]

What problem does this address?

This came up as a pain point from @elmastudio when working on offering patterns that work for things like landing pages:

I think it doesn’t look too attractive for what the pattern actually has to offer, especially as the Explorer view cuts off a portion of the top of the pattern (see the missing border radius of the cover image).

Here's an example:

In this case, this is the entire landing page: https://themes.ainoblocks.io/mugistore/

What is your proposed solution?

Evolve the current pattern inserter and modal experience to better incorporate full page patterns. Perhaps for patterns that expand beyond the initial preview, there's a clear indication to expand to view more.

cc @WordPress/gutenberg-design for some design thinking and creativity here.
cc @WordPress/block-themers for more thoughts here!

[jasmussen]

Good issue. For one, it seems like the specific cut-off issue is the first important detail to address. I think we have to add a max-height lest a rogue pattern can make the modal explode, so we probably can't prevent the bottom to be cropped. But it looks like the preview example is centered vertically, where it should be top-aligned.

[jameskoster]

An augmented pattern modal with view options would help a bit here.

I wonder if it's time to think about how we present items in the Inserter more holistically (see discussion in #42480 (comment) for more context). The delineation of patterns vs blocks vs reusables at a separate layer (tabs) is starting to feel like a bit of a hinderance in the UX – the buckets feel too broad for that separation to be useful. Now that we have the slide-out panel, we might lean into that and explore something like:

[StevenDufresne]

I'm not sure If this is the right place, nor do I think I have my thoughts in order yet so if this comment goes unanswered here, that's fine..... but as we dig deeper into block theming for the wordpress.org redesign, it's hard to determine whether we should be using a block template or full-page patterns in most cases. When editing a post/page, templates are relatively downplayed in the sidebar (and have no preview), and people already familiar with WordPress are probably less likely to seek a pattern (and more likely to look for a template) for displaying a full page. So as an author, how can I get my user down the right path with an empty canvas? Idk.

[jameskoster]

Imo we could demystify templates quite a bit by making them visible when editing a post or page (#27847).

[paaljoachim]

I really like James idea. Which feels like a natural progression of the slide out tabs.
A slideout panel can be helpful for a better separation of various Patterns as well as Reusable blocks.

[github-actions]

Hi,
This issue has gone 180 days without any activity. This means it is time for a check-in to make sure it is still relevant. If you are still experiencing this issue with the latest versions, you can help the project by responding to confirm the problem and by providing any updated reproduction steps.
Thanks for helping out.

[creativecoder]

This came up while working with a theme builder this week who relies a lot on saved custom patterns. It can be difficult to differentiate among similar patterns when the default preview is small.

Also, scrolling through a long list of patterns can be difficult (though this can be mitigated by using categories).

[rcrdortiz]

Hello 👋
The pattern list also seems difficult to navigate with multiple custom patterns.

[jameskoster]

@rcrdortiz you may be interested in this issue (and this PR) where we're beginning to explore improvements to pattern preview grids.