Row block in Gutenberg broken in 6.1

[mplayer]

Since updating to 6.1, the Gutenberg block "Row" will no longer show items horizontally, it will only stack vertically no matter the setting. The row block shows correctly in the backend editor, but not the front end. Worked perfectly in 6.0.3

[mplayer]

backend, row looks correct

[mplayer]

frontend, its not working, it stacks vertically instead of horizontally

[sabernhardt]

Hi and thanks for the report!

Which theme do you use? Its styles might override the editor settings.

If the problem is caused by the editor, this would belong in the ​Gutenberg repository.

[mplayer]

I'm using generate press. However, to see if it was the theme, I switched it over to the default twenty-twenty three and it does the same thing. A rollback from 6.1 to 6.0.3 corrects the problem.

[looswebstudio]

I confirm the same phenomenon.

Not only does the horizontal alignment of groups not work, but the Gallery Blocks are aligned vertically.

It seems to be caused by the absence of .is-layout-flex related CSS that should be spit out in the "global-styles-inline-css" style.

However, I still do not know the conditions under which this problem occurs and it seems that only some sites have this problem.

Translated with www.DeepL.com/Translator (free version)

[mahwp]

I have the exact same problem.

I'm using a child theme of the Twenty Twenty-Two v1.2 and v1.3.

Downgraded the WP to 6.0.3 to work around the issue.

[poena]

Hi

I have not been able to reproduce this using WordPress 6.1 without plugins active.
I tested several different themes both classic and FSE.

Macos Ventura 13.0, Chrome Version 107.0.5304.87, Firefox 106.0.5. Safari 16.1.

Can you share anything more about your WordPress environment or the combination of blocks?
Are the blocks nested, what kind of settings are enabled on the row?
Did you deactivate all plugins?

I am seeing the following styles on the front, using Twenty Twenty-three:

.wp-block-group.wp-container-8 {
    flex-wrap: nowrap;
}

body .is-layout-flex {
    flex-wrap: wrap; //this is not applied because it is replaced by nowrap above.
    align-items: center;
}
body .is-layout-flex {
    display: flex;
}
body .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
    max-width: var(--wp--style--global--content-size);
    margin-left: auto !important;
    margin-right: auto !important;
}

[poena]

I believe this issue is related https://core.trac.wordpress.org/ticket/56970

[mahwp]

Hello!

I updated to WordPress 6.1 again and disabled all plugins.

but the problem was not resolved.
-> jp_not_correct_view_mode.png

MacOS Monterey 12.6, Chrome 107.0.5304.87（Official Build） （arm64）

Although it's mixed in Japanese, I've attached some images of the Nest settings for this site.

Leave the site broken for a little while.

​https://wingmakersstudygroup.jp/

[mahwp]

Looking at ticket/56970, it seems that the cause is that the global style is not applied.

How to write the function.php of the child theme is bad...?

<?php
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles_sg' );
function theme_enqueue_styles_sg() {

wp_enqueue_style( 'child-style', get_stylesheet_uri(),

array( 'parenthandle' ),
wp_get_theme()->get('Version') this only works if you have Version in the style header

);

}

[poena]

Hi,
I did not understand what you are asking about functions.php.

Twenty Twenty-Three does not use the style.css file to add styling. The child theme does not benefit from enqueueing the parent stylesheet.

Are you creating a classic child theme for a theme that supports the site editor?
Did you add php page templates to the child theme? Because php files in site editor themes only load the css if the blocks are placed and rendered correctly before wp_head.

[mahwp]

@poena Hi!

Thank you for your response.

I removed the add_action of wp_enqueue_scripts from the function.php and also removed the style.css.

Are you creating a classic child theme for a theme that supports the site editor?

I fixed it because it was how to make a classic child theme.

Did you add php page templates to the child theme?

No, I have not added any PHP page templates to my child theme.

My child theme files is now simple, with only function.php and theme.json.

[wildworks]

I'm looking into this issue and I think one cause is that the global-styles-inline-css doesn't include layout styles such as .is-layout-flex.

Here is the code that outputs layout styles:
https://core.trac.wordpress.org/browser/trunk/src/wp-includes/global-styles-and-settings.php#L149

I expect that for some reason this style is not being generated correctly. If anyone can reproduce the problem, I would appreciate it if you could debug the code in this vicinity.

Also, since Transient is taken into account in this function, it may be a good idea to set WP_DEBUG and SCRIPT_DEBUG to true to bypass early returns due to caching.

[mahwp]

I did some debugging.

First, when either WP_DEBUG or SCRIPT_DEBUG was set to true in the WP6.1 environment, no problems occurred.

Second, when both WP_DEBUG and SCRIPT_DEBUG were set to true, no problems occurred.

In order for these problem to occur in my environment, I need to set both of this two defines to false.

Is it possible to debug global-styles-and-settings.php in this situation?

[wildworks]

Thanks for the test, @mahwp.

In order for these problem to occur in my environment, I need to set both of this two defines to false.

I have not yet been able to reproduce this, but if this is certain, it may mean that old cached CSS is being used that does not contain layout styles.

[mahwp]

@wildworks

Thank you for your reply.

I updated WP to 6.1.1 and disabled the cache related settings on my hosting server, but this did not solve the problem..

I will try again, if there is anything I can do.