Opened 3 years ago
Closed 3 years ago
#53428 closed defect (bug) (fixed)
Twenty Nineteen: Polish new blocks added in 5.8
Reported by: | AlePerez92 | Owned by: | ryelle |
---|---|---|---|
Milestone: | 5.8 | Priority: | normal |
Severity: | normal | Version: | 5.8 |
Component: | Bundled Theme | Keywords: | has-patch has-screenshots commit |
Focuses: | Cc: |
Description
This is a continuation of #53389 for Twenty Nineteen issues only.
Attachments (9)
Change History (22)
This ticket was mentioned in PR #1379 on WordPress/wordpress-develop by AlejandroPerezMartin.
3 years ago
#1
Hello!
This PR aims to fix margins for several blocks in Twenty Nineteen theme:
## No margin around full-width blocks
### Steps to reproduce
- Activate _Twenty Nineteen_ theme
- Create a new page.
- Add a cover block.
- Change the block alignment to 'Full-width'.
- You'll now notice there are no margins around.
## No margin bottom on left and right aligned blocks
### Steps to reproduce
- Activate _Twenty Nineteen_ theme
- Create a new page.
- Add a cover block.
- Change the block alignment to 'Left align' or 'Right align'.
- Add any other block below (e.g. heading as in the screenshot above).
- 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
- Activate _Twenty Nineteen_ theme
- Create a new page.
- Add a query loop block.
- Change alignment to full-width.
- Insert blocks inside the loop block and set its alignment to full-width as well.
- This last block will be cropped and be placed out of the viewport.
Trac ticket: https://core.trac.wordpress.org/ticket/53428
#2
@
3 years ago
- Keywords needs-testing added
- Milestone changed from Awaiting Review to 5.8
Thanks for the PR @AlePerez92, I'll look to get this reviewed quickly ahead of Beta 3 next week!
This ticket was mentioned in Slack in #core by jeffpaul. View the logs.
3 years ago
#4
@
3 years ago
@AlePerez92 I can see that the problem with margins still happens when:
- Adding a new page
- Adding Cover block and aligning it to the left
- Adding Cover block below and setting it to full-width
It's overlapping the built-in title then and also the next block below.
#6
@
3 years ago
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
#7
@
3 years ago
The PR for the related Query block issue: https://github.com/WordPress/gutenberg/pull/32892
3 years ago
#8
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?
#9
@
3 years ago
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
AlejandroPerezMartin commented on PR #1379:
3 years ago
#10
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">
3 years ago
#11
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">
Title within loop is out of viewport