If you wish to add text to a post or page that is displayed exactly as you type it, the Preformatted block is for you.
Add a Preformatted block
You can create one by clicking the Block Inserter icon.
You can also type /preformatted and hit the enter key in an empty paragraph block to quickly create one.
Detailed instructions on adding blocks
The Preformatted block shares a lot of similarities with the Paragraph block and the Code block. Think of it as a hybrid of the two.
Like Paragraph block, the Preformatted block is intended primarily to display text. Unlike the Paragraph block, though, the Preformatted block keeps any spacing or line breaks exactly as they are entered.
Similar to the Code block, the Preformatted block is displayed in a monospace font, making it easy to keep text perfectly aligned. However, the Preformatted block also includes styling and the ability to add hyperlinks (described below) that a Code block doesn’t have.
Block toolbar
Every block comes with unique toolbar icons and block specific user controls that allow you to manipulate the block right in the editor.
The Preformatted Block shows the standard eight buttons:
- Change block type or style
- Drag
- Moving handles
- Bold
- Italic
- Hyperlink
- More rich text controls
- More options
Change block type or style
You can transform the Preformatted block into Paragraph block, Columns block, Code block, or Group. The Group would give you the ability to change the background color around the Preformatted block.
Editor view of Preformatted Block as a group with Color settings controls
Moving handles
The up and down arrow icons can be used to shift a block up and down in your document.
Detailed instructions on moving a block within the editor can be found here.
Bold
You can select the text of the block and use the Bold option or Ctrl+B / Cmd+B on your keyboard to bold it, which is usually heavier than the surrounding text.
Italic
You can select the text of the block and use the Italic option or Ctrl+I / Cmd+I on your keyboard to italicize it, which usually appears slanted to the right.
Hyperlink
You can select the text of the block and use the Hyperlink option.
Read about more link editing options.
More rich text options
The drop-down menu to the left of the More options menu contains a range of additional rich text editing options such as highlighting, inline code, strikethrough, and more.
Read about more rich text editing options.
More options
The Options menu represented by three vertical dots on the far right of the toolbar gives you more features such as the ability to duplicate or remove the block.
Read about these and other settings.
Block settings
Every block has specific options in the editor sidebar in addition to the options found in the block toolbar. If you do not see the sidebar, click the ‘cog’ icon next to the Publish button.
Color
You can customize the text color, and background color, for the Heading block. The color options available will vary based on the theme.
Color settings in the Heading block
You can pick a color from the suggestions, or add a custom color using the color picker, or by adding a color code.
See this guide for more information about changing colors.
Typography
Typography settings allow you to adjust the Font size, Appearance, Letter case, Line height, and Letter spacing.
To access all the typography options click on the 3 dot button in the right corner of the Typography tab.
Typography settings in the Heading block
Get more details about changing typography settings.
Dimensions
This block provides various options to adjust its dimensions, such as width and height, allowing you to customize the text layout to ensure visual consistency.
For details refer to this support article: Dimension settings overview
Border
The border settings add border color, width, and radius.
For details refer to this support article: Border settings overview
Advanced
The Preformatted block provides the following Advanced settings options: HTML Anchor, Additional CSS Class(es), Additional CSS, and Styles.
