Global styles: Append preset classes to any block custom selectors to help ensure correct specificity

[glendaviesnz]

What?

Removes the ! important that is being applied to user applied style presets. This was added here in order to fix an issue with theme style settings overriding user selected settings.

Why?

The application of the ! important across all the predefined classes has been a breaking change across a range of themes (#38252, #34575, #37590) as it overrides the valid use of some of these presets, and in some cases in a way which can't be worked around at the theme level, particularly with responsive typography.

While it is important to ensure that the styles applied by the user in the editor take priority over global styles, and theme styles, I think it is worth reconsidering the use of ! important to achieve this for the following reasons:

• As mentioned already it is a breaking change for many Classic themes, many of which may no longer be maintained so can't be updated to account for this change, or can't be fixed due to lack of support for responsive typography in theme.json at this point
• While it works in many cases to achieve the desired aim, it is not a guarantee that the user selected styles will be applied, eg. if a theme adds a higher specificity selector with ! important applied it will still override the user selection
• The initial case for which it was introduced no longer needs the ! important in order to work due to the removal of a wrapper around the Post Title block. While it will still be an issue with any blocks applying these styles with a selector of specificity higher than (0,1,0) this can potentially be solve by appending the preset classes to these custom selectors

While this change may make it easier for theme styles to override, either accidentally or intentionally, user applied styles, clear documentation for theme authors on how to prevent this with the use of lower specificity selectors may be a better long term solution than trying to enforce it with ! important.

How?

• Removes the automatic appending of !important from the preset classes
• For any blocks with custom selectors that may have a higher specificity than the preset classes append each of the presets to these custom selectors

N.B. The disadvantage of this approach is that it currently increases the preset class CSS from approx 7.5kb to 50kb

Testing Instructions

• Add a table and set the background and text color in global styles
• Add a post with two tables, and select user defined colors on one, and make sure both display as expected in frontend
• Via theme.json target the post title for color styles by adding:

"core/post-title": {
    "color": {
        "text": "green",
        "background": "yellow"
    }
}

• Go to the editor, add three post title blocks:

  • Select text & background preset colors (not custom) for the first.
  • Select text & background custom colors (not preset) for the second.
  • Leave the third untouched.

• Publish the post and go to the front end.

• Add some theme.json element settings:

// under the styles.elements section
			"h2": {
				"color": {
					"text": "purple",
					"background": "pink"
				},
				"typography": {
					"fontSize": "var(--wp--preset--font-size--extra-large)"
				}
			}

//under the styles.blocks section
			"core/columns": {
				"elements": {
					"h2": {
						"color": {
							"text": "red",
							"background": "black"
						},
						"typography": {
							"fontSize": "var(--wp--preset--font-size--small)"
						}
					}
				}
			}

• Add an H2 heading block out of a column and within a column block and make sure the above colors apply as expected.
• Add additional H2 heading in and out of column block and select predefined text/background colors and font size and check that they appear as expected

The expected behavior would be that the user choices are respected, both in the editor and front-end.

[glendaviesnz]

Closing in favour of #40335