Gutenberg: Placeholders to look more like placeholders

[richtabor]

Is your feature request related to a problem? Please describe.

With the direction of G2 styling, placeholders look a bit too much like the rest of the UI, with little distinction with it. I suggest modifying the placeholder component a bit to make it more apparent that its drag-and-drop capable (if the prop exists), and stands out as a placeholder more.

Some callouts:

1. Currently we don't draw any attention to the drag-and-drop nature of the placeholder. It doesn't look, or say, the part. I added a dashed border to draw attention to that, as well as added language for it.
2. I noticed that "Browse" is used a good bit for referencing the uploading of assets online.
3. I simplified the instructions + multiple call to actions by combining them and using the descriptive text as CTAs.
4. I moved the Media Library action as the primary here, though we could move it to Browse/Upload if data suggests that's the primary action.

Current placeholder in full context:

Current placeholder:

Suggested:

Thoughts? :)

[NewJenk]

This looks great @richtabor .

P.S. Looking back I think the placeholders (and a few other bits of the Gutenberg UI) have regressed as they were better with a grey background and center aligned.

[MichaelArestad]

Perhaps there's a compromise that could be made here that's closer to the current design using higher contrast colors and almost identical patterns.

Forgive my in-browser mock:

[richtabor]

I agree the compromise is a big step in the right direction. How about a background color as well? 🙏