Block library: Patterns API integration with Media & Text block

[gziolo]

Description

Builds on top of #18283.

Part 3.a of #16283.

This PR explores a possible way to integrate Patterns API with the existing Media & Text block as proposed in in #16283 (comment)

As part of the implementation process, I reorganized the folder structure of the Media & Text block to group together all files related to the edit component.

How has this been tested?

See the recorder screencast.

1. Open a new post.
2. Insert Media & Text block.
3. Pick one of the patterns and make sure it gets applied.

Screenshots

Types of changes

Checklist:

• My code is tested.
• My code follows the WordPress code style.
• My code follows the accessibility standards.
• My code has proper inline documentation.
• I've included developer documentation if appropriate.

[gziolo]

What I struggle with at the moment is that there is no formal way to detect whether the inserted block is in the mode where the user should pick the pattern. When you insert Media & Text it presents you some patterns to pick from, but when you pick one of them, save and reload, the pattern picker will show up again.

[gziolo]

What I struggle with at the moment is that there is no formal way to detect whether the inserted block is in the mode where the user should pick the pattern. When you insert Media & Text it presents you some patterns to pick from, but when you pick one of them, save and reload, the pattern picker will show up again.

I was able to reproduce the behavior of the Columns block as suggested by @aduth on Slack, the related code is here:
https://github.com/WordPress/gutenberg/blob/59da6ed/packages/block-library/src/columns/edit.js#L211-L265

@mapk, @karmatosed or @jasmussen - I recorded a screencast to present how it might work based on the proposal shared in #16283 (comment)

Should we proceed with that idea? We would need to provide final icons.

[jasmussen]

I'm exceptionally late to this one, but I'm not sure it's any kind of a good pattern to use placeholders for everything as more or less outlined in #16283 (comment). It is appropriate for many things, like the columns block, perhaps even the table block, because it's somewhat difficult to configure those. But to me it fundamentally feels wrong to make the Media & Text block have a setup state at all. This gets even weirder because the block itself includes an Image block that is also in a setup state. So suddenly it simply adds wizardy steps to add a Media & Text block. Looking at https://user-images.githubusercontent.com/1202812/60599876-30666300-9d7d-11e9-9cf2-ec5cc3d02e9b.png it's even unclear what the difference is between the 4 states, without really looking for a while.

[mapk]

Initially I thought this pattern would be wonderful based on the mockups, but now that I'm interacting with it, @jasmussen's comment articulates it well.

The fact that I'm going through a two-placeholder step to get the content on the screen feels wrong. Using this pattern for Columns or Table block feel pretty natural because the user can adjust the amount of columns or rows. But in this case that can't be done.

This PR was a great exploration, @gziolo, and I appreciate the work! @gziolo, what do you think? Should we discontinue this?

[gziolo]

This PR was a great exploration, @gziolo, and I appreciate the work! @gziolo, what do you think? Should we discontinue this?

It was the purpose of this PR to explore how it would feel from the user's perspective 👍

I totally get your point and share the same sentiment that it looks nice but it doesn't make it much easier to set up the block. In fact, as discussed, you could achieve the same by finding one button in the toolbar to achieve similar result.

I'll move some parts of this PR to #18283. I think the proposed refactor to the Media & Text block can be applied to Columns block as well. I'm really happy how it shapes up and gives us a chance to find an approach where registering patterns for a block type will automatically adjust UI of the block without the need to code anything else by the block developer.

[youknowriad]

I think patterns could be shown in different places including placeholders, and maybe this is one of those blocks where the patterns should be shown elsewhere (switcher?)

[jasmussen]

Based on the block library/patterns discussion I've been exploring some additional mockups that I think get very close to better solving that issue. I hope to share as soon as I possibly can.

That's also a suggestion that my personal spidey sense suggests a placeholder/setup state isn't a great place to surface patterns. We've seen with the Image block and its setup state that when you show it in extremely narrow contexts, there just isn't space to show that much. I hope to look at and polish master...jameslnewell:element-queries as soon as I can, which actually allows an Image placeholder to scale to those contexts.

But this is to suggest that in order to have the space to properly see a "pattern", you likely need a popover or dialog.