Preformatted block

Go back to the list of Blocks

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. 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.

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.

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.

Get more details about changing typography settings.

Advanced

The Advanced tab lets you add HTML anchor and CSS class(es) to your block.

HTML anchor allows you to make a unique web address for a particular Preformatted Block. Then, you’ll be able to link directly to a Preformatted Block of your page.

The Additional CSS class(es) lets you add CSS class(es) to your block, allowing you to write custom CSS and style the block as you see fit.