Customize Code Block

The Code block in WordPress is a powerful tool that allows you to share formatted code with your readers in a clear and organized manner.

Whether you are a developer looking to showcase your coding skills or a blogger who wants to share code snippets with your audience, the Code block is an easy-to-use feature that can help you achieve your goal.

With the Code block, you can add a variety of languages, such as HTML, CSS, JavaScript, PHP, and more, to your WordPress posts or pages.

Customize the Code Block (CODE)

Look for the code below inside the theme.json file inside the Frost theme. The block supports the following style settings: color, spacing, and typography. Customize each one as desired.

{
	"styles": {
		"blocks": {
			"core/code": {
				"color": {
					"background": "var(--wp--preset--color--contrast)",
					"text": "var(--wp--preset--color--base)"
				},
				"spacing": {
					"padding": {
						"bottom": "25px",
						"left": "30px",
						"right": "30px",
						"top": "25px"
					}
				},
				"typography": {
					"fontFamily": "var(--wp--preset--font-family--monospace)",
					"fontSize": "var(--wp--preset--font-size--small)"
				}
			}
		}
	}
}

Customize the Code Block (NO-CODE)

Go to Appearance > Editor > Styles > Blocks > Code, and you will see a panel like the one below. Change the values for Typography, Colors, Border, and Layout as desired.

Customize Code Block in Frost WordPress Theme

Note there is also an option for additional block CSS, which allows you to add your own CSS to customize the appearance of the Code block.