Media & Text Block: Allow Stacking on Mobile

[ZebulanStanphill]

The issue

The recently-merged-into-master Media & Text block is currently not responsive, and so it doesn't work that well on thin viewports. I think the block should be made responsive so that it adapts on phone-width screens.

[jorgefilipecosta]

Hi @ZebulanStanphill, thank you for your tests to the block and for creating this issue.

During the discussion, we had on the PR #9416 we decided that no fixed widths in pixels would be used and that the content would always be side by side.
So we had some improvements here, and what happens is that we compute the % used by the media area, and that % is used in both mobile and desktop.

This is exactly what we are doing now:

[ZebulanStanphill]

@jorgefilipecosta I know, but I think that it would be nice if there was an option to make the text go below the media, since having both side-by-side on a phone is rarely desirable in practice (e.g. CTAs or feature lists next to images).

[mtias]

Updated the title.

[timnicholson]

FWIW I agree 100% that the text should collapse under the image on smaller screen-widths like a smartphone. This is essentially standard practice these days on websites.

Please do keep in mind that the Media & Text block isn't always (usually?) going to have just a single word in it ("Video" in your example). A lot of websites are going to use it to show a large image of a product, a theme, an album, etc., etc. with a long description or bullet lists of features in the text. That really looks terrible on a smartphone.

Collapsing columns on mobile is so commonplace now I would actually tag this as a bug not an enhancement request.

This collapsing should apply to the Column blocks too (and anything else that is added that uses columns).

I totally get why you would want to avoid hard-coding some number of pixels with @media selectors, but let's face it... that's how it's done everywhere. The default theme in WordPress core (Twenty Nineteen) uses 768px. I'm active in that git repository too so if a final decision is made that GB itself isn't going to handle mobile, then the core theme should (and documentation put out there for all theme developers to address this in all their themes).

[ZebulanStanphill]

@timnicholson Just in case you aren't aware, the Columns block actually got responsive breakpoints in 4.1.

[robjaykes]

@timnicholson Just in case you aren't aware, the Columns block actually got responsive breakpoints in 4.1.

But media cannot be inserted into Column blocks.

I can't understand why some people are justifying text not falling below media on mobile. Media and text sitting side by side each other on a phone screen compared to being responsive is where we were at a decade ago.

[ZebulanStanphill]

@robjaykes

But media cannot be inserted into Column blocks.

Yes it can. The Columns block lets you insert any block in one of its columns.

Also, #10969 has implemented stacking on mobile for the Media & Text block, hence why this issue has been closed.