Styles: Allow global styles padding to apply to blocks with background

[aaronrobertshaw]

Related:

• Styles: try wrapping with :root to fix reset styles #61638

What?

This is a follow-up to #61638 to allow global styles set padding for blocks with backgrounds to apply.

Why?

Currently, the Paragraph and List blocks apply default padding when those blocks have a background color set. This is done by selectors that have a higher specificity for these blocks than the global styles. The result is the global styles set padding is overridden.

Theme authors using theme.json or users attempting to tweak spacing via global styles shouldn't have to resort to hacks setting custom css for these blocks to achieve their desired result e.g.

	"core/paragraph": {
		"css": ".has-background {padding: 20px 30px;}"
	},

Important

This change, if accepted, could mean global styles rules might unintentionally override individual paragraph blocks that have a background color set. More context can be found in #61638 (comment). As noted there, this PR would likely deliver the expected behaviour and can be considered a "fix".

I'd imagine if someone has set the list or paragraph blocks to have a particular value in global styles they might actually want it to override that default .has-background padding

How?

• Modifies the p.has-background and ul.has-background, ol.has-background selectors so they have 0-1-0 specificity to match global styles after Styles: try wrapping with :root to fix reset styles #61638 lands.
• As global styles are loaded after the block library styles, global styles would now apply correctly

Testing Instructions

1. Add Paragraph and List blocks to the page
2. Apply a background color to each of the blocks
3. Confirm the default .has-background padding for each is applied
4. In Global Styles, set padding styles for the Paragraph and List block types
5. Confirm the global styles padding values are now applied to the blocks

[github-actions]

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: ellatrix <ellatrix@git.wordpress.org>
Co-authored-by: aaronrobertshaw <aaronrobertshaw@git.wordpress.org>
Co-authored-by: carolinan <poena@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

[carolinan]

There is a 3 year old issue about removing the automatic padding that is added when the background color is added, but it is not so simple. #30725