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

[mnydigital]

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.

[mnydigital]

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

Can't see how to edit the original description.

[sabernhardt]

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().

[sabernhardt]

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

[sabernhardt]

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

[huzaifaalmesbah]

Test Report

Description

Patch tested: 60469.footer.diff​

Environment

• 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 121.0.0.0
• OS: macOS
• Theme: Twenty Twenty 2.5
• MU Plugins: None activated
• Plugins:
  • Test Reports 1.0.1

Screenshots

Before Apply Patch	After Apply Patch ✅

[shailu25]

Test Report:

Tested Patch: https://core.trac.wordpress.org/attachment/ticket/60469/60469.footer.diff

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.✅

Screenshots:

Before Patch: ​https://prnt.sc/NWvouQH61yMt
After Patch: ​https://prnt.sc/dFSNtKTJQdwM

[poena]

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.

[audrasjb]

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

[audrasjb]

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.