Make WordPress Core

Opened 2 months ago

Closed 2 months ago

#60469 closed defect (bug) (fixed)

Twenty Twenty: .privacy-policy CSS class affecting page body

Reported by: mnydigital's profile mnydigital Owned by: audrasjb's profile audrasjb
Milestone: 6.5 Priority: normal
Severity: normal Version: 5.9
Component: Bundled Theme Keywords: has-patch commit
Focuses: css Cc:

Description (last modified by sabernhardt)

Twenty Twenty has a CSS class for styling the privacy policy footer link:

.privacy-policy {
    margin: 1.2rem 0 0;

This has the unintended consequence of applying the same margin to the body of the privacy policy page.

I suggest changing the CSS to p.privacy-policy or something along those lines.

Attachments (2)

60469.p.diff (3.1 KB) - added by sabernhardt 2 months ago.
scoped to the paragraph element with .privacy-policy class, using :where() to avoid increasing specificity
60469.footer.diff (3.2 KB) - added by sabernhardt 2 months ago.
scoped to the .footer-credits container, with higher specificity

Download all attachments as: .zip

Change History (11)

#1 @mnydigital
2 months ago

That should say p.privacy-policy, not a.privacy-policy.

Can't see how to edit the original description.

#2 @sabernhardt
2 months ago

  • Component changed from Themes to Bundled Theme
  • Description modified (diff)
  • Keywords needs-patch added
  • Milestone changed from Awaiting Review to 6.5
  • Priority changed from normal to high
  • Summary changed from Twenty Twenty privacy-policy CSS class affecting page body to Twenty Twenty: .privacy-policy CSS class affecting page body
  • Version set to 5.9

The problem is bigger than just the margins. It also affects the text color within the page content and some of the links.

Twenty Twenty-One scopes the .privacy-policy styles to the footer, and I think I would rather do the same for Twenty Twenty instead of using the p element. However, I'll make a patch each way to consider both options.

The link and its styles were added in [52023]. I apparently also missed updating the header-footer 'secondary' selectors in twentytwenty_get_elements_array().

Last edited 2 months ago by sabernhardt (previous) (diff)

2 months ago

scoped to the paragraph element with .privacy-policy class, using :where() to avoid increasing specificity

2 months ago

scoped to the .footer-credits container, with higher specificity

#3 @sabernhardt
2 months ago

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

#4 @huzaifaalmesbah
2 months ago

Test Report


Patch tested: 60469.footer.diff


  • WordPress: 6.5-alpha-56966-src
  • PHP: 8.2.15
  • Server: nginx/1.25.3
  • Database: mysqli (Server: 5.7.44 / Client: mysqlnd 8.2.15)
  • Browser: Chrome
  • OS: macOS
  • Theme: Twenty Twenty 2.5
  • MU Plugins: None activated
  • Plugins:
    • Test Reports 1.0.1


Before Apply Patch After Apply Patch ✅

#5 @shailu25
2 months ago

Test Report:

Tested Patch:

Testing Environment:

OS: Windows
Web Server: Nginx
PHP: 8.1.23
WordPress: 6.4.3
Browser: Chrome
Theme: Twenty Twenty
Active Plugins: None

Actual Results:

  • Issue Resolved with this patch.✅


Before Patch:
After Patch:

#6 @poena
2 months ago

  • Keywords commit added; needs-testing removed

In addition to the testing above I have confirmed that the color is correct when the customizer option for the footer background color is used.

#7 @poena
2 months ago

  • Priority changed from high to normal

#8 @audrasjb
2 months ago

  • Owner set to audrasjb
  • Status changed from new to accepted

Indeed, I think 60469.footer.diff is a better approach than using the p element.
Let's ship this change.

#9 @audrasjb
2 months ago

  • Resolution set to fixed
  • Status changed from accepted to closed

In 57589:

Twenty Twenty: Scope .privacy-policy styles to the footer only.

This changeset fixes an issue where the .privacy-policy styles were applied to other locations than the footer only, like the privacy-policy page itself.

Props mnydigital, sabernhardt, huzaifaalmesbah, shailu25, poena.
Fixes #60469.

Note: See TracTickets for help on using tickets.