Image Block: MediaPlaceholder / MediaUpload component doesn't addapt to small sizes

[fabiankaegy]

Description

When an image block for example is used with a fixed height and width in a Pattern where it doesn't have an image selected yet, the image will render the MediaPlaceholder

But since an image can be really small the MediaPlaceholder should ideally adapt to the small size and display an alternate layout.

You can see the overflowing issue in the screencast I attached below

Step-by-step reproduction instructions

1. Insert this block pattern for example:

Code sample

<!-- wp:group {"align":"full","style":{"spacing":{"padding":{"top":"var:preset|spacing|60","bottom":"var:preset|spacing|60","left":"var:preset|spacing|60","right":"var:preset|spacing|60"}}},"backgroundColor":"contrast","textColor":"base","layout":{"type":"constrained","contentSize":""}} -->
<div class="wp-block-group alignfull has-base-color has-contrast-background-color has-text-color has-background" style="padding-top:var(--wp--preset--spacing--60);padding-right:var(--wp--preset--spacing--60);padding-bottom:var(--wp--preset--spacing--60);padding-left:var(--wp--preset--spacing--60)"><!-- wp:group {"layout":{"type":"constrained"}} -->
<div class="wp-block-group"><!-- wp:paragraph {"align":"center","style":{"typography":{"lineHeight":"1.2"}},"textColor":"base","fontSize":"x-large","fontFamily":"heading"} -->
<p class="has-text-align-center has-base-color has-text-color has-heading-font-family has-x-large-font-size" style="line-height:1.2"><em>“Études has saved us thousands of hours of work and has unlocked insights we never thought possible.”</em></p>
<!-- /wp:paragraph -->

<!-- wp:spacer {"height":"var:preset|spacing|10"} -->
<div style="height:var(--wp--preset--spacing--10)" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->

<!-- wp:group {"style":{"spacing":{"blockGap":"0"}},"layout":{"type":"flex","orientation":"vertical","justifyContent":"center","flexWrap":"nowrap"}} -->
<div class="wp-block-group"><!-- wp:image {"align":"center","width":"60px","aspectRatio":"1","scale":"cover","sizeSlug":"thumbnail","linkDestination":"none","style":{"border":{"radius":"100px"}}} -->
<figure class="wp-block-image aligncenter size-thumbnail is-resized has-custom-border"><img alt="" style="border-radius:100px;aspect-ratio:1;object-fit:cover;width:60px"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph {"align":"center","style":{"spacing":{"margin":{"top":"var:preset|spacing|10","bottom":"0"}}}} -->
<p class="has-text-align-center" style="margin-top:var(--wp--preset--spacing--10);margin-bottom:0">Annie Steiner</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"align":"center","style":{"typography":{"fontStyle":"normal","fontWeight":"300"}},"textColor":"contrast-3","fontSize":"small"} -->
<p class="has-text-align-center has-contrast-3-color has-text-color has-small-font-size" style="font-style:normal;font-weight:300">CEO, Greenprint</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div>
<!-- /wp:group --></div>
<!-- /wp:group -->

2. Try to fill in the image in the pattern via the Media placeholder

Screenshots, screen recording, code snippet

CleanShot.2023-09-27.at.14.39.53.mp4

Related issue: #64288.

Suggestion

Apply a minimal version of Placeholder that is shown when the block is narrow. Already in place are CSS classes is-medium and is-small, which can be used to change the appearance based on context.

Mockup:

Details:

• "Add image" is added to the block toolbar when it's in a placeholder state. This button serves as a dropdown, making it similar in behavior to how Cover, and Site Logo works.
• In the smallest <60px state, the white placeholder material isn't shown at all, even if it's shown on select in the larger states.

Issue updated Aug 7. Figma.

[richtabor]

I wonder if it's be more useful as a button to open the Media Library when it's under a certain height/width.

[annezazu]

Just ran into this today with 6.5.3 and I agree that this is rough. Adding this to the Polish board as it would be good to iterate here.

[jasmussen]

Based on conversation, feedback, and design iterations on a related issue (#64288), I went ahead and updated this issue with a fresh design and shuffled the labels around.

[jasmussen]

Actually based on work in #64320 (kudos @vipul0425), one thing we can do is add only a single text-item to the block toolbar in its placeholder state "Choose image", rather than have separate items, since the dropdown it would open is needed regardless for extensibility. CC: @WordPress/gutenberg-design for input.

[jasmussen]

Updated to reflect the work in progress in #64320.