Improve Image Blocks Placeholders

[beafialho]

What problem does this address?

Chatting with @mtias @henriqueiamarino and @pablohoneyhoney about the effort of populating the Pattern Directory, it makes sense to also pursue more common layouts, displaying them as wireframes, in addition to more opinionated combinations of image and copy. Because of that, the way the images blocks get displayed is important.

This is the current Image block placeholder:

What is your proposed solution?

For Images (and perhaps Cover and Gallery Blocks), it would be nice to improve the placeholder directly in Gutenberg, perhaps add things like aspect ratio, nicer placeholder drop-zone, etc so we could display it in the directory, instead of adding sample images, as shown below.

It can be relevant to align these placeholders with the ones created for other blocks such as Featured Images.

[Mamaduka]

Related #23124.

[mtias]

There are also some functional things we should support on placeholder — like setting width / height, aspect ratio, border radius, and any other properties that would make sense before having a src set.

[colorful-tones]

There may be some confusion here, because this issue begins by mentioning "the Pattern Directory", but also clarifies: "For Images (and perhaps Cover and Gallery Blocks), it would be nice to improve the placeholder directly in Gutenberg,".

There is a need for improving the overall Placeholder component, and certainly #23124 would be an ideal area to start as a phase I enhancement, but also propagating with a randomly selected photo from Openverse would help support pattern creation (see #42006), as well as the everyday builder Gutenberg editor experience of inserting an Image block (and Gallery, Featured Image block as well).

[beafialho]

There is no confusion, the effort of populating the Pattern Directory was mentioned for context on the need of this idea.

It does seem that this issue is similar to the ones you mentioned, which supports the interest in working on it 👍

[jasmussen]

I've taken a stab at this one in #43143, that branch currently looks like this:

Missing from that PR are some of the features from #42847, which allows inheriting border and radius. Width/height should already be inherited, but those need to be surfaced in the setup state in order for that to work. Would love to pair on making these things happen in one or two PRs.

[mtias]

Nice, thanks for the tweaks. Now we need to get the "constrain image to dimensions / aspect ratio" issue sorted and we'd be in a great place :)