Twenty Twenty-One: float-clearing pseudo-elements are visible in Row and Grid blocks

[up1512001]

• The grid layout looks different on the front-end and back-end.

​https://github.com/Automattic/themes/issues/7943

[up1512001]

remove before and after from wp-block-group.

Trac ticket: https://core.trac.wordpress.org/ticket/61611

This is an issue with the TT1 theme I checked it's due to this code present in the style.css file at the 2154 line number.

.wp-block-group:before,
.wp-block-group:after {
        content: "";
        display: block;
        clear: both;
}

### before removing this code

### after removing this code

[sabernhardt]

The patch will need to edit twentytwentyone/assets/sass/05-blocks/group/_style.scss and build files from that.

• The pseudo-elements are part of an ​IE hack.
• The hack could be moved to 07-utilities/ie.scss instead of just deleting it.
• The front-end styles could keep display: flow-root in group/_style.scss for older versions of WordPress that do not set the flex or grid display.
• [55329] removed the entire section of float-clearing styles (including flow-root) from the editor but left the front end as it was.

[up1512001]

@sabernhardt updated PR as per your suggestion.

[poena]

Can you refresh the PR with the latest changes from trunk?

Also could the whole IE hack be moved? I don't think there are any reasons anymore to keep parts of it in the group block style?
I mean from

// Start IE clearfix

to

// End IE clearfix.

Until then, I have tested the change in the PR on top of 6.7 Alpha, where the inner div in the group block grid variation is removed.
Removing the .wp-block-group:after solves the problem (removing the :before does not seem to have any impact).

I do not see any side effects on other groups, but I did not test on any older WordPress versions.

[up1512001]

@poena I have updated the PR as per your suggestion.

[poena]

The commit removes the IE part, instead of moving it to ie.scss.

@up1512001 this appears to have some merge conflicts. I am going to re-run tests but if this continues I will need you to check the PR here.

@up1512001 this appears to have some merge conflicts. I am going to re-run tests but if this continues I will need you to check the PR here.

@karmatosed resolved merge conflicts.

[karmatosed]

Thank you @up1512001 I will now look at testing what we have and check that what @poena asked for has happened by moving things to ie.css.

[karmatosed]

Unless I am mistaken the latest patch doesn't do this recommendation by @sabernhardt and I am concerned of the implications there:

The front-end styles could keep display: flow-root in group/_style.scss for older versions of WordPress that do not set the flex or grid display.

[up1512001]

@karmatosed removing IE hack part was suggested by @poena.

[karmatosed]

@up1512001, further up https://core.trac.wordpress.org/ticket/61611#comment:2 @sabernhardt recommends some other changes to consider that haven't been considered and those are what I am referring to. Are you able to review those also? I am aware there was a lot of feedback to process perhaps and it might have been lost but I want to ensure it doesn't get missed.

[up1512001]

@karmatosed I will update the PR according to those suggestions.

[karmatosed]

I think the patch has been updated so checking this out now.

[karmatosed]

I can confirm in testing this works and now moving it to commit. Thank you everyone for working on this.

[karmatosed]

In 58853:

Twenty Twenty-One: Fixes float clearing elements being visible in Row and Grid blocks.

The grid layout looks different between front and back end due to the float clearing elements being visible in Row and Grid blocks. This moves the hack rather than deletes it.

Props up1512001, sabernhardt, poena.
Fixes #61611.