-
Notifications
You must be signed in to change notification settings - Fork 2k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Media & Text Block formatting issue when stack on mobile is enabled. #36876
Comments
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:
However, it didn't help on mobile view. |
In my testing, it appears that this only effects the TwentyNineteen 'Child' themes (Elegant Business, Modern Business, Sophisticated Business etc). |
@jordesign #16040600-hc shows the same bug occurring on the Storefront theme, and turning off "stack on mobile" resolved it. |
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. |
This issue has been caused by WordPress/gutenberg#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). |
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. |
The fix for the following business themes has been deployed.
|
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. |
Thanks @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 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. |
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.
The text was updated successfully, but these errors were encountered: