Make WordPress Core

Opened 2 years ago

Closed 21 months ago

Last modified 21 months ago

#56226 closed defect (bug) (fixed)

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

Reported by: poena's profile poena Owned by: peterwilsoncc's profile peterwilsoncc
Milestone: 6.2 Priority: normal
Severity: normal Version: 6.0
Component: Bundled Theme Keywords: has-patch commit
Focuses: Cc:

Description (last modified by 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.

Attachments (7)

row-block-issue-tt1.png (723.9 KB) - added by poena 2 years ago.
Broken row block in the block editor
56226.diff (64.3 KB) - added by poena 2 years ago.
Patch with built CSS files.
chrome-before-row-&-stack-are-identical.png (62.5 KB) - added by poena 22 months ago.
6.1.1: The row and stack look identical in the editor
before-safari-mac.png (89.9 KB) - added by poena 22 months ago.
before-firefox-mac.png (70.1 KB) - added by poena 22 months ago.
before-chrome-mac.png (72.6 KB) - added by poena 22 months ago.
56226.2.diff (64.4 KB) - added by peterwilsoncc 21 months ago.

Download all attachments as: .zip

Change History (22)

#1 @poena
2 years ago

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.

#2 @poena
2 years ago

  • Milestone changed from Awaiting Review to 6.2

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
2 years ago

Broken row block in the block editor

#3 @poena
2 years ago

  • Version set to 6.0

@poena
2 years ago

Patch with built CSS files.

#4 @poena
2 years ago

  • Keywords has-patch added

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.

#5 @robinwpdeveloper
2 years ago

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

Last edited 2 years ago by robinwpdeveloper (previous) (diff)

#6 @poena
22 months ago

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

@poena
22 months ago

6.1.1: The row and stack look identical in the editor

#7 @poena
22 months ago

  • Description modified (diff)

#8 @poena
22 months ago

  • Keywords needs-testing added

#9 @robinwpdeveloper
22 months ago

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

#10 @abirhasandipu
22 months ago

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

#11 @poena
22 months ago

  • Keywords commit added; needs-testing removed

#12 @poena
22 months ago

Thank you for the test reports.

#13 @peterwilsoncc
21 months ago

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.

#14 @peterwilsoncc
21 months ago

  • Owner set to peterwilsoncc
  • Resolution set to fixed
  • Status changed from new to closed

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.

#15 @peterwilsoncc
21 months ago

In 55330:

Bundled themes: Recommit generated files following [55329].

See #56226.

Note: See TracTickets for help on using tickets.