Make WordPress Core

Opened 5 years ago

Closed 2 years ago

Last modified 19 months ago

#48731 closed defect (bug) (worksforme)

Twenty Twenty: Full width group side padding issues

Reported by: collet's profile collet Owned by:
Milestone: Priority: normal
Severity: normal Version: 5.3
Component: Bundled Theme Keywords:
Focuses: css Cc:

Description

1) Full Width Group with no background-color have no side padding, making the content touch the edges of the screen

Currently, if a Full Width Group has no background-color set, it doesn't have side padding. Therefore the content (heading, list, images...) can touch the edges of the screen depending on the screen size.
A group with no background-color should have the same padding-left and padding-right as a group with background-color so that nested blocks look the same.

https://i.imgur.com/jsvg9WN.png

The current fixes that add padding for the paragraph and columns blocks should be removed:
https://github.com/WordPress/WordPress/blob/master/wp-content/themes/twentytwenty/style.css#L3123-L3126

.alignfull:not(.has-background) > .wp-block-group__inner-container > p:not(.has-background-color) {
    padding-left: 2rem;
    padding-right: 2rem;
}

https://github.com/WordPress/WordPress/blob/master/wp-content/themes/twentytwenty/style.css#L2993-L2996

.alignfull:not(.has-background) .wp-block-columns {
    padding-left: 2rem;
    padding-right: 2rem;
}

2) Full Width Group with background color have a side padding of 6rem instead of 4rem

Currently, if a Full Width Group has a background-color set, its side paddings are set to 6rem for screen-sizes larger than 1220px.
It should rather be set to 4rem to match the other elements side padding (site header, site footer, wide blocks are protected from the screen edges by 4rem, full width Cover block has a 4rem side spacing...)

https://i.imgur.com/84hEbxU.png

Attachments (1)

48731.diff (490 bytes) - added by sumugh 5 years ago.
Side padding for Full Width Group changed from 6rem to 4rem for screen sizes larger than 1220px

Download all attachments as: .zip

Change History (7)

#1 @ianbelanger
5 years ago

  • Keywords needs-patch added

@sumugh
5 years ago

Side padding for Full Width Group changed from 6rem to 4rem for screen sizes larger than 1220px

#2 @sumugh
5 years ago

  • Keywords needs-testing has-unit-tests added; needs-patch removed

#3 @sumugh
5 years ago

  • Keywords needs-unit-tests added; has-unit-tests removed

#4 @deviatez
2 years ago

  • Keywords dev-feedback added; needs-testing removed
  • Resolution set to worksforme
  • Status changed from new to closed

Tested and can confirm that this is working as expected!
https://i.imgur.com/sox5B3E.png

Last edited 2 years ago by deviatez (previous) (diff)

#5 @desrosj
2 years ago

  • Keywords needs-unit-tests dev-feedback removed
  • Milestone Awaiting Review deleted

This ticket was mentioned in Slack in #core by abhanonstopnews. View the logs.


19 months ago

Note: See TracTickets for help on using tickets.