Make WordPress Core

Opened 16 months ago

Last modified 16 months ago

#57007 new defect (bug)

Row block in Gutenberg broken in 6.1

Reported by: mplayer's profile mplayer Owned by:
Milestone: Awaiting Review Priority: normal
Severity: normal Version: 6.1
Component: Editor Keywords:
Focuses: Cc:

Description

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

Attachments (8)

back-end-row.jpeg (33.5 KB) - added by mplayer 16 months ago.
backend, row looks correct
front-end.jpeg (3.3 KB) - added by mplayer 16 months ago.
frontend, its not working, it stacks vertically instead of horizontally
jp_correct_editor_mode.png (51.8 KB) - added by mahwp 16 months ago.
jp_not_correct_view_mode.png (70.0 KB) - added by mahwp 16 months ago.
jp_ss_nest.png (660.2 KB) - added by mahwp 16 months ago.
jp_ss_option1.png (920.5 KB) - added by mahwp 16 months ago.
jp_ss_option2.png (1.8 MB) - added by mahwp 16 months ago.
jp_ss_option3.png (967.3 KB) - added by mahwp 16 months ago.

Change History (23)

@mplayer
16 months ago

backend, row looks correct

@mplayer
16 months ago

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

#1 @sabernhardt
16 months ago

  • Component changed from General to Editor

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.

#2 @mplayer
16 months ago

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.

#3 @looswebstudio
16 months ago

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)

#4 @mahwp
16 months ago

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.

Last edited 16 months ago by mahwp (previous) (diff)

#5 @poena
16 months ago

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;
}

@mahwp
16 months ago

@mahwp
16 months ago

@mahwp
16 months ago

@mahwp
16 months ago

#7 @mahwp
16 months ago

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/

#8 @mahwp
16 months ago

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

);

}

#9 @poena
16 months ago

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.

#10 @mahwp
16 months ago

@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.

#11 @wildworks
16 months ago

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.

#12 @mahwp
16 months ago

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?

#13 @wildworks
16 months ago

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.

This ticket was mentioned in Slack in #core-editor by wildworks. View the logs.


16 months ago

#15 @mahwp
16 months ago

@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.

Note: See TracTickets for help on using tickets.