Display block pattern options in a modal rather than placeholder state

[jameskoster]

When #29602 is merged certain block placeholders will display contextually relevant block patterns to help users get started more quickly. This is especially useful for complex blocks like the Query. Here's how it works:

query.mp4

The design has not tested as well as we would have liked. Mostly because the placeholder state doesn't present enough contrast from the canvas and the blocks around it. It's not always clear that a user has to actively select a pattern.

Encapsulating the pattern selection flow in a modal has been suggested as a solution to this problem. In this issue I'm sharing a design that demonstrates how that could work:

pattern-carousel.mp4

This modal would be triggered on mouseup when interacting with a block in the inserter. This would hopefully capture the drag and drop behaviours.

All of the components from before are still present, just arranged into a slightly different layout, and wrapped in a modal.

On mobile the modal should take over the majority of the screen:

In the case of the Query block, I've also removed the "inherit from query" toggle because I'm optimistic that we can set a smart default there based on context:

• If I'm inserting the query in a template, it should inherit from the query
• If I'm inserting the query in content, it should not.

The option would still be present in the Inspector. This change enables the pattern selection UI to be consistent regardless of which block is being inserted.

[ntsekouras]

In the case of the Query block, I've also removed the "inherit from query" toggle because I'm optimistic that we can set a smart default there based on context:

Agreed and it will be removed from the initial carousel PR.

[karmatosed]

What I like about showing the patterns in a fuller modal is exactly that, the better space for display. It makes me think even if our entire library should be larger (or be able to be larger), mostly because that step from the library to the pattern browsing modal is still a cognitive break for someone. It could be smoother if everything was just a little less shy of taking up space in the interface. As someone is focused, I wonder if there is more exploration to be done with taking up more space when they are focused?

[Addison-Stavlo]

This looks like it will be a good flow, a few Qs:

• How should the "X" in the top of the modal behave? Should it act as another way to trigger 'start blank', or what should be the end result if that is clicked?
• Should clicking outside the modal work to close the modal as well? Or should we probably lock users into selecting some option on the modal whether thats the "X" or any of the insert options?
• I notice there is a different icon for the list/grid view between the first 2 videos and the mobile images. Is this intended?

Any other recent design thoughts for this not included in the images above?

[jameskoster]

I think the "X" is analogous to a cancel button. Clicking it basically exists the insertion flow altogether.

Or should we probably lock users into selecting some option on the modal whether thats the "X" or any of the insert options?

Locking probably makes sense, otherwise we have to answer the question of what happens when one clicks outside... do we insert the first pattern? Start blank? Cancel the process altogether? None of those jump out to me as predictable experiences.

I notice there is a different icon for the list/grid view between the first 2 videos and the mobile images. Is this intended?

It's intended. On larger screens we can arrange the patterns in to a grid whereas on mobile we don't have the space to do so and they will appear in a list instead. This is a nice-to-have though... not 100% necessary imo.

Any other recent design thoughts

Nothing directly related. But it may be worth noting that this pattern may be used for other flows like changing the template applied to a page (#31591 (comment)), or swapping one template part for another (#31747).

[richtabor]

It could be smoother if everything was just a little less shy of taking up space in the interface. As someone is focused, I wonder if there is more exploration to be done with taking up more space when they are focused?

I agree. It seems having one pattern display at a time is not a great use of the space - but if that were user-defined (perhaps a - ----- + scale, like in the Photos Mac app), then the user could decide how big they want the patterns to display at. I think that'd be an interesting approach if the whole pattern library were viewable as a modal.

Honestly, I'm not sure if there's much added value using the modal here instead of an inline placeholder state. The advantage of a placeholder state is that the block appears in the right context. It's forefront, but relevant - instead of just forefront (as a modal is).

[jameskoster]

A zoom scale could certainly be a future enhancement of the carousel/grid view.

During testing, the primary issue we saw with the placeholder state was that it made the flow too seamless. It wasn't obvious enough that you still needed to perform a subsequent action in order to fully insert the block. Clearly there are ways to address that, but they all essentially involve adding more seams to the experience.

The modal may prove to be too extreme a move in the other direction, but it still seems worth testing.

[shaunandrews]

I find the sudden jump from the sidebar to a large modal to be very jarring and confusing. Instead, maybe it would feel more natural to use the sidebar (where you're used to browsing patterns) to display the suggested patterns:

Suggest.Block.Patterns.in.Sidebar.mp4

The video shows a way to expand the sidebar, but I could just as easily imagine it opening a modal.

--

Similarly, when adding a block with patterns via the Quick Inserter (a.k.a. Slash, or / Inserter) patterns could display directly in the popover. There could also be a way to expand the quick inserter into a modal:

Quick.Inserter.to.Modal.mp4

[jameskoster]

I find the sudden jump from the sidebar to a large modal to be very jarring and confusing.

Belatedly connecting some dots... in #31746 I shared an animation (largely inspired by your work) demonstrating how the transition from inserter -> modal could be less jarring:

118638395-b4d5f980-b7ce-11eb-8569-791707ecce00.mp4

[annezazu]

Wanted to pass along some feedback that came in with the FSE Outreach Program's twelfth call for testing as this work evolves, since it's clear that the current experience renders the patterns too small to see clearly:

Choosing a header modul is very small, and shows very small headers. The modul should resize based on available screen.

Here's the current view:

I can see above that viewing the patterns individually is being explored and imagine this will get tricky when dealing with loads of patterns but wanted to connect the dots either way :)

[jameskoster]

A larger modal makes a lot of sense but is only one part of the equation. Since patterns can be composed of anything – from a single button up to a full page layout, it seems inevitable that we'll need to offer a way for the user to adjust the view somehow. I like @richtabor's suggestion of a zoom scale a lot. It may even be worth adding that to the pattern explorer separately and reusing it across these other pattern modals.

[annezazu]

I bet @ndiego might have some insights too based on his work with this plugin: https://wordpress.org/plugins/block-pattern-explorer/ +1 on a way to adjust the view.

[jameskoster]

I think this one is complete.