Wp-calypso: Media & Text Block formatting issue when stack on mobile is enabled.

[catkiinson]

Steps to reproduce

Cannot reproduce on my own test site.

What I expected

The media and text block to display the text and image side by side, as it appears in the editor.

What happened instead

Text overlaps the image. This stops happening once "stack on mobile" is disabled.

Screenshot / Video

Editor View:

Live Site View:

Live Site View once "stack on mobile" has been disabled:

Context / Source

This issue was brought up in two different chats #15825678-hc and #14741103-hc.
The screenshots are from the site in question in #15825678-hc.

15825678-hc Simple site, Professional Business theme.

14741103-hc Simple site, Modern Business theme.

[msilbers]

A user has this issue in #16040763-hc using the Professional Business theme. The site is Atomic and it's happening in a Page (their homepage).

They are unhappy with the workaround to disable Stack on Mobile, as they want it to do that on mobile.

[kcswong]

16040054-hc

Same issue, but in the example from this chat it looks like text on the site is appearing behind the images on the right, not in front of them. Theme is Sophisticated Business, but I also tested the other * Business themes with same results. They were given CSS to fix in an earlier chat:

@media screen and (min-width:900px){
    .has-media-on-the-right .wp-block-media-text__content {
        grid-column-start: 1 !important;
        grid-column-end: auto !important;
    }
}
@media screen and (min-width:900px){
    .has-media-on-the-right .wp-block-media-text__media {
        grid-column-start: auto !important;
        grid-column-end: auto !important;
    }
}

However, it didn't help on mobile view.

[jordesign]

Another report in 16041825-hc (this time in Professional Business).

CSS fix has been supplied and confirmed it does not fix things on mobile - it remains quite broken.

[jordesign]

In my testing, it appears that this only effects the TwentyNineteen 'Child' themes (Elegant Business, Modern Business, Sophisticated Business etc).

[catkiinson]

@jordesign #16040600-hc shows the same bug occurring on the Storefront theme, and turning off "stack on mobile" resolved it.

[reginabally]

Another report in #12322052-hc using Professional Business theme.

I've shared the CSS code the user in #2430007-zen and let them know they can also turn off the "Stack on mobile" option.

[mmtr]

This issue has been caused by https://github.com/WordPress/gutenberg/pull/10812 (released in Gutenberg 6.7.0) which removed the grid template areas of the Media & Text block used by the now retired Business themes (#).

I think this should be either fixed by bringing back the grid areas to Gutenberg (cc @jorgefilipecosta) or making an update to the themes (cc @iamtakashi).

[iamtakashi]

The business themes have been retired, but the removal of the grid template areas is breaking badly the themes, so I'm working on an emergency fix in the themes.

[iamtakashi]

The fix for the following business themes has been deployed.

• Calm Business
• Elegant Business
• Friendly Business
• Modern Business
• Professional Business
• Sophisticated Business.

https://github.com/Automattic/themes/issues/1521

[jorgefilipecosta]

Hi all, thank you for reporting, debugging and fixing the issues in the themes affected. Unfortunately, core can not rely on grid template areas because they are not compatible with IE11. It seems the best path forward is the one that was applied fixing the themes.
But I wonder why there was a need to apply grid area styles on the theme? Was there any limitation on the styles for the block core provides? cc: @iamtakashi

[mmtr]

Thanks @iamtakashi!

[iamtakashi]

@jorgefilipecosta No worries! The change in the block makes sense. The business themes change the order of the text and the media so that the media always comes first in small screens even when the media is on the right in large screens. And the themes used to specify grid-area to achieve that. But we can do the same thing with grid-row, so it was easy to fix :)

The business themes override the default block styles too much with CSS, and they became impossible to keep up with changes in blocks. Don't get me wrong, I love seeing blocks keep getting better, but that was the very reason that we needed to retire them.