Twenty Nineteen: Polish new blocks added in 5.8

[AlePerez92]

This is a continuation of #53389 for Twenty Nineteen issues only.

[AlePerez92]

Title within loop is out of viewport

[AlePerez92]

No separation with the blocks below a left/right aligned block

[AlePerez92]

No margins around full-width blocks

Hello!

This PR aims to fix margins for several blocks in Twenty Nineteen theme:

## No margin around full-width blocks

### Steps to reproduce

1. Activate _Twenty Nineteen_ theme
2. Create a new page.
3. Add a cover block.
4. Change the block alignment to 'Full-width'.
5. You'll now notice there are no margins around.

## No margin bottom on left and right aligned blocks

### Steps to reproduce

1. Activate _Twenty Nineteen_ theme
2. Create a new page.
3. Add a cover block.
4. Change the block alignment to 'Left align' or 'Right align'.
5. Add any other block below (e.g. heading as in the screenshot above).
6. You'll now notice there are no margins below thus no separation from the block below.

## Full-width blocks within a query loop block

### Steps to reproduce

1. Activate _Twenty Nineteen_ theme
2. Create a new page.
3. Add a query loop block.
4. Change alignment to full-width.
5. Insert blocks inside the loop block and set its alignment to full-width as well.
6. This last block will be cropped and be placed out of the viewport.

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

[JeffPaul]

Thanks for the PR @AlePerez92, I'll look to get this reviewed quickly ahead of Beta 3 next week!

[Boniu91]

Cover block left-aligned problem

[Boniu91]

@AlePerez92 I can see that the problem with margins still happens when:

1. Adding a new page
2. Adding Cover block and aligning it to the left
3. Adding Cover block below and setting it to full-width

It's overlapping the built-in title then and also the next block below.

[AlePerez92]

Hi @Boniu91, thanks for testing this!

Unfortunately I can't reproduce that error, here is a screenshot of what I see.

Can you let me know which version of WP and browser are you using? Thanks!

[onemaggie]

This PR looks good to me. The issue with nested full width blocks inside the query block extending to the right is an editor/block issue and I'm going to submit a PR for that separately, otherwise this looks good to me in terms of the theme

[onemaggie]

The PR for the related Query block issue: ​https://github.com/WordPress/gutenberg/pull/32892

Thanks for the PR, @AlejandroPerezMartin ! I see there's a lot of whitespace changes, could you remove those from the PR? Cleanup like that usually happens in separate patches, unless you're touching those lines.

I think the addition of the .wp-block-post-template styles is enough to fix the issue, what do you think?

[hellofromTonya]

Testing query block before and after applying PR 1379. Works as expected

[hellofromTonya]

Cover block margin testing before (in Firefox) and after (in Chrome) applying PR 1379

[hellofromTonya]

Before applying patch: cover block computed layout (with left and right alignment)

[hellofromTonya]

After applying patch: cover block computed layout (with left and right alignment)

[hellofromTonya]

Testing Results

Env:

• OS: macOS Big Sur
• Browsers: Firefox 89.0.1 (for before) and Chrome 91.0.4472.106 (for after)
• WordPress: latest trunk version

Query Loop Block

Before applying patch:

• was able to reproduce the problem (see the left side marked "Before" in 53428-query-loop-testing.png​ ✅

After applying patch:

• resolves the issue (see the right side marked "After" in 53428-query-loop-testing.png​ ✅

Cover block: top and bottom margin

Page structure:

• Cover block set to "left" alignment
• Cover block set to "right" alignment
• Cover block set to "full width"

Before applying the patch:

• wasn't able to reproduce the problem
• Blocks did not overlap
• No space separation between blocks
• Computed layout shows 28 px top and bottom margin for the first block (left aligned) 53428-before-computed-layout.png​

After applying the patch:

• Blocks not overlapping
• No space separation between blocks
• Same computed layout as before applying the patch 53428-cover-after-computed-layout.png​

Thanks for the PR, @AlejandroPerezMartin ! I see there's a lot of whitespace changes, could you remove those from the PR? Cleanup like that usually happens in separate patches, unless you're touching those lines.

I think the addition of the .wp-block-post-template styles is enough to fix the issue, what do you think?

Hello @ryelle! I undo the whitespace changes, my editor was configured to remove the trailing whitespaces, sorry about that.

Regarding the other changes, there's some overflow and the horizontal scrollbar appears on the editor, there's a wrapper element that has a negative margin of 8px, so having those values at 20px was causing this:

<img width="1160" alt="Screenshot 2021-06-22 at 23 24 23" src="​https://user-images.githubusercontent.com/5501685/123001725-52fe4600-d3b1-11eb-942a-daaa5075dfcc.png">

Thanks!

there's some overflow and the horizontal scrollbar appears on the editor

Ah yeah, I see that now. The 16px change makes sense then 👍🏻

I pushed up a commit to remove the margins from nested blocks, otherwise I was seeing the titles cut off still:

<img width="481" alt="Screen Shot 2021-06-22 at 5 41 09 PM" src="​https://user-images.githubusercontent.com/541093/123005066-82965980-d383-11eb-870b-7ac75bc14677.png">

[ryelle]

The PR looks good to commit now.

[ryelle]

In 51209:

Twenty Nineteen: Update margins on full- and wide-aligned blocks in the editor.

Previously, full width blocks would cause a horizontal scrollbar, and nesting full width blocks would cause the content to be pulled off the screen. Now wide and full width blocks can be nested without any visual issues.

Props aleperez92, Boniu91, onemaggie, hellofromTonya.
Fixes #53428.