The preformatted block is mostly used to display the entered text in a post or page unstyled as you type.

Adding block

To add an preformatted block, click on the Block Inserter icon and select the “Preformatted” block.

add-preformatted-block
Inserting preformatted block

Alternatively, you can start typing /preformatted in a new paragraph block, then press enter.

Block usage

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.

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 that a code block doesn’t have.

Unlike the paragraph block, the preformatted block is originally intended to display any content unstyled as this block keeps any spacing or line breaks exactly as they are typed.

Transforming block

Optionally, you can transform the preformatted block into a paragraph block.

transform-preformatted-block
Transform the preformatted block into a paragraph block

Block interface

Each block comes with unique toolbar icons and specific user controls that allow you to manipulate the block right in the editor.

To reveal the block toolbar, you can click on the block and the toolbar will display.

view-preformatted-block
Preformatted block with basic text formatting options

The preformatted block offers basic formatting options in its toolbar:

  • Bold
  • Italics
  • Hyperlink
  • Strikethrough

Clicking on the ⚙ cog icon next to the publish button will toggle the visibility of this panel.

sidebar-settings-preformatted-block
The preformatted block settings in the sidebar

While most blocks have specific options in the editor sidebar in addition to the options found in the block toolbar, the preformatted block does not have extra options to alter.

Advanced

The advanced tab lets you add a CSS class to your block, allowing you to write custom CSS and apply styles to the block as you see fit.

advanced-custom-css-field
The advanced section lets you add a CSS class to your block

Last updated: 1 month ago

We use cookies to personalize your experience. By continuing to visit this website you agree to our use of cookies ― Learn more

Accept