Twenty Twenty: inconsistent top and bottom margins for .alignwide and .alignfull on Chrome vs Safari (cross browser issue)

[kthmd]

I've noticed on the latest WordPress and twentytwenty theme that there is an inconsistency in top and bottom margins, notably Chrome ignores lines style.css:5296 and style.css:5942 - so Chrome does not have the margins, but Safari does. This seems to be quite a large layout issue cross browser.

For example, use default twentytwenty theme, go to sample page and edit, create a cover block, set to fullwidth, and notice the top and bottom margin difference in Chrome (v80) and Safari (v13)

style.css:5296

	.entry-content .alignwide:not(.wp-block-group.has-background),
	.entry-content .alignfull:not(.wp-block-group.has-background) {
		margin-bottom: 6rem;
		margin-top: 6rem;
	}

style.css:5942

	.entry-content > .alignwide:not(.wp-block-group.has-background),
	.entry-content > .alignfull:not(.wp-block-group.has-background) {
		margin-bottom: 8rem;
		margin-top: 8rem;
	}

[kthmd]

Chrome

[kthmd]

Safari

[utz119]

I can confirm kthmd that style.css:5296 and style.css:5942 are not firing on Chrome. Firefox also has the same issue.
It seems the problem is when @media (min-width: 1000px) or @media (min-width: 700px).

[utz119]

Firefox

[nikhilbhansi]

The cover block was looking good in between the post but not on the top because of the 8rem padding of div.post-inner element and an additional margin of the cover block.
Solved the issue by giving margin-top: 0; when it will be on the top of the post, also taken care of bottom margin.

[ianbelanger]

Thanks for your patch @nikhilbhansi, however I would prefer that we avoid using !important if possible. Could yo see if there is a solution that does not need the !important flag.

[nikhilbhansi]

@ianbelanger avoided !important by adding specificity.
Cover Blocks which are in the middle of posts does not have any negative effects.

[ianbelanger]

Thanks @nikhilbhansi for the updated patch. I am reviewing now and if all goes well I will commit it.

[ianbelanger]

Updates patch with RTL styles

[ianbelanger]

In 47820:

Bundled Themes: Twenty Twenty inconsistent top and bottom margins for .alignwide and .alignfull on Chrome vs Safari.

Fixes the inconsistent margins for alignwide and alignfull classes used on Cover Block when it is the first block on a page.

Props kthmd, utz119, nikhilbhansi.
Fixes #49435.

[ianbelanger]

Reopening for backport.

[whyisjake]

In 47823:

Bundled Themes: Twenty Twenty inconsistent top and bottom margins for .alignwide and .alignfull on Chrome vs Safari.

Fixes the inconsistent margins for alignwide and alignfull classes used on Cover Block when it is the first block on a page.

Brings the changes from [47820] to the 5.4 branch.

Props kthmd, utz119, nikhilbhansi.
Fixes #49435.

[sabernhardt]

It seems the RTL stylesheet was missed in [47820] (and [47823]).

[whyisjake]

In 47846:

Bundled Themes: Add missing RTL styles for to fix inconsistent margins on .alignwide and .alignfull items.

Fixes the inconsistent margins for alignwide and alignfull classes used on Cover Block when it is the first block on a page.

Props kthmd, utz119, nikhilbhansi, and sabernhardt.
Fixes #49435.

[whyisjake]

In 47847:

Bundled Themes: Add missing RTL styles for to fix inconsistent margins on .alignwide and .alignfull items.

Fixes the inconsistent margins for alignwide and alignfull classes used on Cover Block when it is the first block on a page.

This commit brings the changes from [47846] to the 5.4 branch.

Props kthmd, utz119, nikhilbhansi, and sabernhardt.
Fixes #49435.