Description

The cite element in the Pulquote block has styles applied to it with CSS specificity 0-1-1, so the styles cannot be overridden via theme.json

We should change the default styles to 0-1-0, but keep in mind the following:

• Address the issue both on the front-end and in the editor
• Test with different themes to ensure no visual changes occur

Step-by-step reproduction instructions

Activate the Emptytheme and update the theme.json using the following definition:

{
	"$schema": "../../schemas/json/theme.json",
	"version": 3,
	"settings": {
		"appearanceTools": true,
		"layout": {
			"contentSize": "840px",
			"wideSize": "1100px"
		}
	},
	"styles": {
		"blocks": {
			"core/pullquote": {
				"elements": {
					"cite": {
						"color": {
							"text": "#ff0000"
						},
						"typography": {
							"fontSize": "30px",
							"textTransform": "lowercase",
							"fontStyle": "italic"
						}
					}
				}
			}
		}
	}
}

• Insert a Pullquote block.
• Confirm that the cite style is not changed.

Screenshots, screen recording, code snippet

The default block style has 0-1-1 CSS specificity:

The CSS generated by theme.json has 0-1-0 CSS specificity:

Environment info

No response

Please confirm that you have searched existing issues in the repo.

• Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

• Yes

Please confirm which theme type you used for testing.

• Block
• Classic
• Hybrid (e.g. classic with theme.json)
• Not sure