Blocks

Blocks »Preformatted Block

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.

The Pre Block shows text in monospace font with specific spacing.

You can also type /preformatted and hit the enter key in an empty paragraph block to quickly create one.

Detailed instructions on adding a block can be found here.

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.

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

↑ Table of Contents ↑

Block Toolbar

In order to reveal the block toolbar, you can click on the block and the toolbar will display. 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 toolbar has basic text formatting options.

The toolbar includes three styling options: bold, italic, and strikethrough, plus a hyperlink button just like a regular paragraph block.

↑ Table of Contents ↑

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.

The block settings can be found in the sidebar.

The preformatted block only has a single option in the sidebar settings, the advanced tab.

Advanced

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

The advanced section lets you add a CSS class to your block.
The advanced section lets you add a CSS class to your block.

Not quite what you're looking for?

Get Help