Media & text block: Placeholder buttons has the wrong size

[carolinan]

Description

When you place a media & text block, before selecting a media, there is a placeholder with three buttons.
With Gutenberg active, there is an unexpected change in the styling of the buttons, which are wider than in other placeholders.

Step-by-step reproduction instructions

Activate Gutenberg.
Add a media & text block.

Screenshots, screen recording, code snippet

With Gutenberg active:

Expected:

Image block placeholder for comparison:

Cover block for comparison:

Environment info

No response

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

[philjo107]

Hey I'm new at this, which files am I supposed to make changes to?

[t-hamano]

I believe this is related to #59275 and is the intended change. If the placeholder itself is narrow, the buttons will be stacked vertically.

So if you change the Media & Text block to wide or full width and the placeholder size increases, the buttons will line up horizontally.

On the other hand, if you change to the mobile viewport in other blocks, the buttons should be stacked vertically.

[hbhalodia]

Hi @carolinan, I am not sure if this is related to exactly media and text, because we have used the common media placeholder for all this to render as a placeholder. I do had checked the code and found that the button size depends on the width of the container on which these buttons are being show. Here is the reference,

gutenberg/packages/components/src/placeholder/index.tsx

Lines 64 to 67 in 7674a57

	modifierClassNames = {
	'is-large': width >= 480,
	'is-medium': width >= 160 && width < 480,
	'is-small': width < 160,

Based on this, since the media and text block tends to use the once side media and another side text, the placeholder container width falls in medium and small range, we can see that it is made to add it 100% of width,

gutenberg/packages/components/src/placeholder/style.scss

Lines 109 to 125 in 7674a57

	.components-placeholder {
	// Medium and small sizes.
	&.is-medium,
	&.is-small {
	.components-placeholder__instructions {
	display: none;
	}
	.components-placeholder__fieldset,
	.components-placeholder__fieldset form {
	flex-direction: column;
	}
	.components-placeholder__fieldset > *,
	.components-button {
	width: 100%;
	justify-content: center;

In this case, let us say that, if the image/cover block is being used inside the columns, then these buttons in the placeholders would be of 100% width you can check the difference in the below screenshots,

If inside columns	If outside columns

So I am not sure, if the issue should be valid for this case.

Thank You.

[hbhalodia]

I believe this is related to #59275 and is the intended change. If the placeholder itself is narrow, the buttons will be stacked vertically.

So if you change the Media & Text block to wide or full width and the placeholder size increases, the buttons will line up horizontally.

On the other hand, if you change to the mobile viewport in other blocks, the buttons should be stacked vertically.

Sorry @t-hamano, I guess I was adding the reply for this issue with the pointers you mentioned and did not check that you already replied for it. I need to just hit the comment button 😄.

[carolinan]

I think it looks bad, but let's close this then.