`.is-layout-flex` broken

[jeffpaul]

Description

As originally reported in Core Trac#56970:

I notice after I updated to 6.1 none of my buttons that were set to justify center were centered. I inspected the CSS and noticed that the .is-layout-flex class is not applying display: flex to the block. I added in my custom CSS

.is-layout-flex {
	display: flex;
}

and that fixed the issue.

Step-by-step reproduction instructions

In reviewing during the 6.1.1 bug scrub on 10 November 2022, there were no clear reproduction steps nor ideas on the cause of the issue. As @hellofromtonya noted: "The tweak in Customizer is a workaround rather than a fix. The root cause may be in the global styles when working with classic themes. But not sure. Needs more investigation and likely more details." and as @sabernhardt noted: "I think the class styles belong in the block-library stylesheet, but I don't know why global styles do not always include these styles."

Screenshots, screen recording, code snippet

Environment info

• WordPress 6.1

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

[Humanify-nl]

Same as utility classes for “is-horizontal”. In 6.0, they just didn’t work on rows.

I suppose this is coupled to the fact that group and row are variations of the same block. It is creating complexity that shouldn’t be there, and now in 6.1 there is again a new utility class. But the underlying problem is not solved.

For a major structural layout block, a setting that is used in every site I ever built with WP FSE, it is demotivating to again have unreliable layout blocks, making updating from 6.0 to 6.1 annoying.

I reported this in #43665. One guy confirmed it, but then nobody else noticed this, nothing happened with it, and here we are in 6.1 with the same problem.

[t-hamano]

This is another ticket reported on the core track: https://core.trac.wordpress.org/ticket/57007

[ndiego]

The root cause may be in the global styles when working with classic themes. But not sure. Needs more investigation and likely more details.

@t-hamano has done some more investigation on this. See the latest comments here. It looks like this might be related to caching, perhaps related to the caching issues we tackled right before the release of 6.1. @Mamaduka @ockham any thoughts?

[Humanify-nl]

I looked through that thread, and indeed have the new separate asset loading.

I doubt however that this would interfere with the output of utility classes. It is also no classic theme.

[Mamaduka]

Was anyone able to reproduce this issue?

The themes can opt-out the base layout styles. I wonder if this is the case with the reports.

Cc @andrewserong

[chairmanbrando]

@Mamaduka That wasn't added until v6.1, and the original Trac thread came about because upgrading to v6.1 caused the issue. In my case, I didn't get .is-layout-flex because I'd removed wp_enqueue_global_styles() from wp_enqueue_scripts. My theme wasn't using theme.json, and up until v6.1 these "global" styles were seemingly generated from it -- or a bunch of unnecessary default colors and the like. After v6.1 was installed, important layout styles like .is-layout-flex suddenly landed in there as well. The naming schemes seem potentially problematic: Why are layout-related things in "global", and why would stuff generated from theme.json be called "global"?

[andrewserong]

Thanks for the ping. I haven't been able to reproduce the issue outside of dequeuing the global styles stylesheet.

The PR that introduced the change to where layout styles are output was #40875. Prior to that PR, all layout styles were output at render time for each individual block, which resulted in duplicate and redundant styles (this issue: #41434), particularly for posts with a large number of blocks. The base theme.json file and global styles were the most natural place to include base layout styles, as they are applied globally to all blocks that opt in to the layout support. In this way it shares a similar logic to having global styles output global font sizes, colors or spacing presets.

For themes that opt out (either via dequeueing or an explicit opt-out), they'll be responsible for providing their own layout styles. When using core blocks that depend on layout styles, my recommendation would be to not dequeue or opt-out, but rather either use the provided CSS as-is, or add a theme.json file that specifies just those values that are desired to be included in the output. For example, if default colors aren't required, they can be removed or filtered out from the theme.json file, rather than dequeuing the whole stylesheet.

[damian-c]

I am able to reproduce this issue using the core Twenty Twenty Two theme in 6.1.1.

[DAreRodz]

Hi, this question reported in the support forums seems to be also related.

The user has mentioned using the theme Hestia. Looking at the theme's code, I can't find where it could be "opting out" from base layout styles (neither 'disable-layout-styles' nor wp_dequeue_style).

Is there any other way to dequeue those styles?

---

EDIT: I couldn't reproduce the problem with that theme, and also, .is-layout-flex was not needed in the first place because display: flex was being applied by other classes (figure.wp-block-gallery.has-nested-images). The style for these classes was actually the one missing the first time ―it "magically" appeared later― so it could probably be related to some caching issue. 🤷

[ockham]

Another instance of this issue reported here.

[andrewserong]

Thanks for the additional reports folks (and please do continue to drop comments here when folks report the issue). So far I haven't been able to replicate this problem outside of manually dequeueing global styles, so at least at face value, it does sound like it could be a potential caching problem of some kind if the problem is appearing on themes that aren't doing that dequeuing.

I'll just ping @spacedmonkey and @oandregal for visibility in case this issue rings any bells with the recent changes to global styles caching? I personally don't have the best grasp of how the object caching and transients behave, but happy to help investigate as needed.

[ockham]

Another: https://wordpress.org/support/topic/images-showing-vertically-instead-of-in-a-column-of-3-in-pages