#56226 closed defect (bug) (fixed)
Twenty Twenty-One: Group block styles are breaking the row variation
Reported by: | poena | Owned by: | peterwilsoncc |
---|---|---|---|
Milestone: | 6.2 | Priority: | normal |
Severity: | normal | Version: | 6.0 |
Component: | Bundled Theme | Keywords: | has-patch commit |
Focuses: | Cc: |
Description (last modified by )
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)
Change History (22)
#2
@
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.
#4
@
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
@
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
#6
@
22 months ago
I can reproduce this with 6.1.1 and 6.2-alpha-54642-src without Gutenberg active.
#9
@
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
@
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
#13
@
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.
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:
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.