The Code Block displays preformatted code exactly as written. It preserves whitespace, indentation, and line breaks, making it ideal for showing code snippets, configuration examples, terminal commands, or markup.
Unlike the Preformatted block, the Code Block is intended specifically for programming or technical code samples. It prevents WordPress from interpreting markup and instead outputs the content literally.
This block is useful when documenting APIs, embedding sample HTML or CSS, or showing commands users need to run in a terminal.
Example
The code appears exactly as written, preserving indentation and formatting. The following example is of code used to register block styles in WordPress via JavaScript.
wp.domReady(() => {
wp.blocks.unregisterBlockStyle('core/quote', 'default');
wp.blocks.unregisterBlockStyle('core/quote', 'large');
} );In the example above, the Code Block includes a subtle background color and padding to improve readability. These styles may vary depending on the site’s design.
Accessibility
- Avoid relying solely on code formatting: Some users may not easily distinguish code visually. Supporting text should clarify the meaning and function of the code.
- Avoid very long unbroken lines: Long lines may cause horizontal scrolling, which can be difficult for some users to navigate.
- Use meaningful language references: If referencing the language in text (for example, HTML, CSS, JavaScript), clearly state it so readers know what they are viewing.
Notes
- Code is displayed exactly as written, including indentation and line breaks.
- WordPress does not automatically highlight syntax in the default Code Block.
- Special characters such as
<and>are displayed literally. - Code Blocks are ideal for short to medium snippets rather than full files.
Documentation
For a detailed overview and usage examples, visit the Code Block Documentation.
