Twenty Twenty-One: Group block styles are breaking the row variation

[poena]

Blocks inside groups with the row variation are displaying vertically instead of horizontally in the editor.
The problem is with the group block display: style in the theme,
which overrides the flex styles from core and Gutenberg.

We can test to see if it is possible to remove the problematic style completely, or add a new style to set display:flex when the .is-layout-flex class is used on the group block.

[poena]

To clarify, the is-layout-flex change is in Gutenberg version 13.7.

After testing in 5.3 to 6.0, I believe the solution would be to move this clearfix from the group block file to the IE specific stylesheet:

	// Start IE clearfix.
	// This hack is only necessary because we want to support IE11.
	// If we don't want to support IE11, then "display: flow-root" would suffice.
	display: block;
	clear: both;

	display: flow-root; // stylelint-disable-line declaration-block-no-duplicate-properties

	&:before,
	&:after {
		content: "";
		display: block;
		clear: both;
	}
	// End IE clearfix.

WordPress no longer supports IE11, but keeping the style will mean less breaking changes for IE users.

I saw a minor difference on the front where empty group blocks does not take up as much vertical space when
display: flow-root; is removed.

[poena]

I have re-tested this using WordPress 6.1.1 and theme version 1.7, without Gutenberg active.

In the block editor, the theme's editor style for the group block overrides the styles from WordPress, and the inner blocks inside the row are vertical:

.editor-styles-wrapper .wp-block-group {
    display: block; // This is a theme provided style.
    clear: both;
    display: flow-root;
}

.editor-styles-wrapper .is-layout-flex {
    flex-wrap: wrap;
    align-items: center;
}

.editor-styles-wrapper .is-layout-flex {
    display: flex;  //This is being overwritten 
}

On the front, the inner blocks inside the row display correctly.

Since the issue was created I have had a change of mind regarding moving the editor style to the IE11 stylesheet. I suggest that the CSS should be removed and not moved, since WordPress no longer supports IE11. Keeping it would not improve the editing experience in the block editor for IE11 users.

[poena]

Broken row block in the block editor

[poena]

Patch with built CSS files.

[poena]

The patch removes the problematic CSS from twentytwentyone/assets/sass/05-blocks/group/_editor.scss.
The patch includes the built CSS files.

To re-build the CSS files if needed, use:

npm install
npm run build

Testing instructions:

Create a new page or post in the block editor.
Add a group block with the row variation.
Add two paragraphs inside the row.
Confirm that the paragraphs display horizontally in both the editor and front.

[robinwpdeveloper]

Hi @poena
it would be great if you can provide a before after screenshots.
I am struggling to reproduce (also not clear about the row variation).

After you screenshots I can share a Test Report here to confirm the fix.
I tried but I don't think I found the issue:
​https://www.awesomescreenshot.com/video/13268528?key=0beff569784b68ef2f9fb9d6c4a445ac

[poena]

I can reproduce this with 6.1.1 and 6.2-alpha-54642-src without Gutenberg active.

[poena]

6.1.1: The row and stack look identical in the editor

[robinwpdeveloper]

Test Report

This report validates that the indicated patch addresses the issue.

Patch tested: https://core.trac.wordpress.org/attachment/ticket/56226/56226.diff

Environment

• OS: macOS 11.2.3 (20D91)
• Web Server: Nginx
• PHP: 7.4.30
• WordPress: 6.2-alpha-54642-src
• Browser: Chrome 109.0.5414.119
• Theme: Twenty Twenty-One
• Active Plugins:
  • No plugins activated

Actual Results

• ✅ Issue resolved with patch.

Additional Notes

• Previously I tried with Twenty Twenty-Three. My Bad.

✅ Issue reproduced successfully in Twenty Twenty-One.
✅ Issue fixed with the patch without running npm commands.

Supplemental Artifacts

Before: ​https://d.pr/i/FxFtJm
After: ​https://d.pr/i/hQArJg

[abirhasandipu]

Test Report

This report validates that the indicated patch addresses the issue.

Patch tested: REPLACE_WITH_PATCH_URL

Environment

• OS: macOS 12.6
• Web Server: Nginx
• PHP: 7.4.33
• WordPress: 6.2-alpha-54642-src
• Browser: Google Chrome Version 109.0.5414.119
• Theme: Twenty Twenty-One
• Active Plugins: *No plugins activated

Actual Results

• ✅ Issue resolved with patch.

Additional Notes

• ✅ Issue reproduced. Issue not found in Twenty twenty Three but it exists in Twenty Twenty One.
• ✅ Issue fixed after applying the patch.

Supplemental Artifacts

Before (Twenty Twenty One): ​https://d.pr/i/Orz52a
After (Twenty Twenty One): ​https://d.pr/i/g4Alo9
Twenty Twenty Three: ​https://d.pr/i/R3v5rk

[poena]

Thank you for the test reports.

[peterwilsoncc]

56226.2.diff​ is 56226.diff​ refreshed against trunk:

• resolves conflicts in built files
• fixes a stylelint nag in the edited scss file (ignores all the other nags).

As with the above testing reports, manual testing shows the issue is resolved by the patch.

[peterwilsoncc]

In 55329:

Bundled themes: Fix row variation nested in group block.

Remove the display property from the custom group block styles to prevent the flex layout in the row variation from been removed.

Props abirhasandipu, poena, robinwpdeveloper.
Fixes #56226.

[peterwilsoncc]

In 55330:

Bundled themes: Recommit generated files following [55329].

See #56226.