Update theme styles for the code block

[ndiego]

Description

The theme.json settings for the code block target .wp-block-code > code not .wp-block-code. Therefore, there is no way to override the theme.css styles using theme.json. This update resolves that.

How has this been tested?

1. Yes, install the new Twenty Twenty-Two theme and the latest version of Gutenberg.
2. Add a code block with some content. Preview, and you will see the code outlined in a thin grey border.
3. In theme.json, add a background color and change the border color on the code block.
4. Preview and you will see the theme.json styles applied to .wp-block-code > code, but the default theme.css styles remain applied to .wp-block-code.
5. Apply the proposed changed.
6. Preview again and now the theme.json styles now override the theme.css styles.

Screenshots

Types of changes

Bug fix

Checklist:

• My code is tested.
• My code follows the WordPress code style.
• My code follows the accessibility standards.
• I've tested my changes with keyboard and screen readers.
• My code has proper inline documentation.
• I've included developer documentation if appropriate.
• I've updated all React Native files affected by any refactorings/renamings in this PR (please manually search all *.native.js files for terms that need renaming or removal).

[bgardner]

I would love to see this approved and merged as it will allow me to remove CSS that is currently in my theme to unnecessarily override.

[ndiego]

@jasmussen sorry for the ping, but can I get your eyes on this one as well? It's another theme.json related issue.

[jasmussen]

This works fine for me, and seems like a good solution. I didn't test with theme.json overrides, so please do verify it works as intended, ideally with another quick test of the PR. But it looks good to me. Thank you!

[ndiego]

Just ran another test with custom styles in theme.json and TT2 and my own FSE theme. All works as expected. In classic themes, the code block styling is the same as in trunk. 🙌

[ndiego]

@jasmussen I believe this was automatically set for the Gutenberg 12.0 milestone. Now that Beta 1 is being pushed back further, do you think we can backport this to WP Beta? It's such a simple fix.

[jasmussen]

I think so long as it has the "backport to wp" label, it will be up to the release leads to decide on/make sure it lands in 5.9. Given it's a bugfix, I don't personally see it as problematic, but I'll defer to those making the release!

[carolinan]

@ndiego This PR changed the text color to be hard coded to color: $gray-900; which means that if the theme has a dark background, we are forced to override the text color of the block.
Is this text color needed? Maybe it can be removed?
(I feel like we have discussed this color already 🤔 )

[ndiego]

@carolinan that's a good question. That color was already there prior to this PR. The PR just corrected the specificity of the styles so they could be manipulated via theme.json. In many of the themes I am working on, we have customized the code block completely. Here's an example...

"core/code": {
	"border": {
		"color": "var(--wp--preset--color--black)",
		"radius": "0"
	},
	"color": {
		"background": "var(--wp--preset--color--black)",
		"text": "var(--wp--preset--color--white)"
	},
	"spacing": {
		"margin": {
			"bottom": "30px"
		},
		"padding": {
			"top": "25px",
			"right": "30px",
			"bottom": "25px",
			"left": "30px"
		}
	},
	"typography": {
		"fontFamily": "var(--wp--preset--font-family--monospace)",
		"fontSize": "var(--wp--preset--font-size--small)"
	}
},

Personally, I would like there to be no set font color on the code block, but that might be a larger questions about WP style defaults.

[jasmussen]

Followed up on the text color in #37816.