New Breakpoints are not responsive

A kind soul made an animation for me that shows how awful these breakpoints even look with the default 2023 theme:

https://streamable.com/xb0x8d

Hi there! I can see the issue that you are dealing with.

Do you have a public link to your site using the version 6.0 of WordPress so that we could compare its HTML and CSS output?

Do you have any plugins active that might change the CSS of your site?

Are you applying any additional CSS to either the image block, the paragraph block or the parent of those blocks?

Hello Michal,

I don’t have a public site with WP 6.0, but have it running locally and could save the web page including all subfiles in a ZIP and put that up for download, if that would be helpful.

I do have a 3rd party theme installed, Blocksy, and I already talked to their developers and they said that they cannot do anything about it. They believe it’s a Gutenberg issue and asked me to raise the issue here. They have created the animation I posted above and I believe it shows that the problem also exists when using the default Twenty-Twentythree theme.

As far as additional CSS is concerned, I only apply styles to some classes, not to blocks or elements. And I have checked that this additional CSS is identical between the live site (WP 6.1) and my local WP 6.0 site.

I don’t have a public site with WP 6.0, but have it running locally and could save the web page including all subfiles in a ZIP and put that up for download, if that would be helpful.

Yes, that would be most helpful!

As far as additional CSS is concerned, I only apply styles to some classes, not to blocks or elements. And I have checked that this additional CSS is identical between the live site (WP 6.1) and my local WP 6.0 site.

I see. Depending on what CSS classes you apply your styles to, this might also be problematic because both the final markup and the classes could change between the WordPress versions.

Ok, the zip file is here:

https://www.mediafire.com/file/jzz0ogm630fvws5/Seite.zip/file

Thank you very much for looking at it. My custom CSS rules will be in the page under <style id=”wp-custom-css”>, so you can judge yourself if there’s anything fishy in there. I’m certainly not the world’s greatest CSS expert ??

Hey!

I took a deeper look at your site and unfortunately it seems to be an issue with the Blocksy theme I believe. Looking at your old site from the zip that you’ve sent me, I can see that there exist some media query which are not present in the “new” site. That media query is using a breakpoint of 690px. There is no such breakpoint in Gutenberg but doing a quick text search, I can see that it does exist in several places in the Blocksy theme, for example in static/sass/frontend/1-helpers/functions.scss.

I would suggest to reach out to the Blocksy developers with the information that I gave here so that they could figure out why this @media rule is not present on the “new” site.

I’ve also recorded this quick video to show what I found.

Hello,

the Blocksy theme developers provided me with a custom CSS snippet, which fixes the problem on my site. But they also said that they still believe it’s a Gutenberg problem, because all the major themes have this problem including, apparently, Twenty-Twentythree.

Here’s an animation showing some of that:

https://d.pr/v/lyac3z

Thank you for reporting this back! It does indeed look like a bug in Gutenberg. I’m curious what block structure results in this problem because I was not able to reproduce this error with a fresh post or page and the twentytwentytwo theme.

Would you be able to take a screenshot of your block editor with the List View open and selecting the Image block that’s causing the problem? By List View, I’m referring to this: https://d.pr/i/BCxAc1

In the meantime, I will open an issue in the Gutenberg repository so that we can track this issue and resolve it.

There you go:

https://snipboard.io/mjSY5Q.jpg

Many thanks in advance for your help!

Thank you @ulim !

Hi @ulim! I’ve noticed that your site no longer suffers from the problem you mentioned. Can I ask if you have changed anything in your markup or styles? I notice that you are still running WP 6.1.1!

The Blocksy guys gave me some custom CSS to fix the problem:

@media (max-width: 690px) {
	.entry-content .alignleft, 
	.entry-content .alignright {
		float: none;
		max-width: 100%;
		margin: 0 auto 1.5em auto;
	}
}

Hi @ulim!

I see, I talked with a Blocksy developer and the issue that you were facing was not caused by Gutenberg itself after all. The theme had some extra CSS that was including the breakpoints and that extra CSS is what stopped working after the update!

Hope this resolves it for good ??

Hi @czapla ,

I’m sorry to have kept you busy, when it’s been a theme issue all along. But also thank you very much for getting to the bottom of it!

For me it’s slightly difficult to get a grasp on it, both sides made a pretty logical case. I know some CSS, but this goes way over my head ??

No worries at all ??. I’m happy we figured it all out!