Image block: only show "add image" in block toolbar on small screen sizes

[annezazu]

With #64320 merged to improve adding and managing images in smaller placeholders, I'm finding that on a larger screen size the options now feel duplicated between Add image and upload:

Since the problem was around smaller screen sizes, I think this addition to the block toolbar should only be available based on when a user is interacting with the image placeholder on a small screen size. cc @t-hamano who worked on this!

[t-hamano]

Thanks for the report.

I don't have a strong opinion on whether the "Add image" button should be visible on large screen sizes or not, but I think it's important to be consistent across all blocks.

Here's what blocks with similar placeholders look like:

Image Block has "Add image" toolbar button:

Cover Block has "Add media" toolbar button:

Media & Text Block does not have a toolbar button:

Video Block does not have a toolbar button:

Audio Block does not have a toolbar button:

I also think this issue is related to #64288. The design proposed there has toolbar buttons even on larger screens.

cc @WordPress/gutenberg-design

[jasmussen]

There's definitely an aspect to #64288 that needs addressing first. I'd think #66563 as also related, because the toolbar option is related not just to consistency between block toolbar and inspector options, but it exists and was added there so that when the Image block is used in very narrow contexts, it's still possible to access these options. Keep in mind also that this toolbar option persists across states, i.e. for a Cover block, you might still have "Add image" even when the block is no longer in its empty placeholder state; it might simply have a background color. To that end, I'd think our efforts should focus on the content of the placeholders each.

In that light, it's useful to think of the purpose of the placeholder, especially when used in wider contexts where there's room. It is to Provide a basic onboarding flow for each block, useful shortcuts to compelling end results. E.g. an empty Group can show shortcuts to various group block configuraitons, a Columns block can show shortcuts to common setups, an OpenStreetMap block can show you an input field for an API key.

As an onboarding opportunity, every block deserves careful attention and deliberate design, to look intuitive and coherent, balanced in surfacing the most common options. This is a design task for every single block, e.g. maybe the Query Loop shows a posts-per-page option right there? Or shortcuts to changing those properties globally?

So I'd rather focus this issue on the contents of the Image block placeholder. What are the most important options to surface there, and how should it look? Coming to mind for me as one improvement: removing the "Insert from URL" button entirely, since it's already part of the Add image block toolbar dropdown, and arguably not as important for an onboarding flow as uploading, drag&dropping, or opening the media library.