3heads-gear3headschatchecklistglobehead-lockhead-plusimaclife-ringlogo-cornelllogo-melbournelogo-northhamptonlogo-portsmouthlogo-small logo-vancouverlogo-yokohamamail-line mail-wings pdf pie-chartplayplugprinter skype website
Print Friendly, PDF & Email

The Preformatted Block is used when you want to display text on a post or page exactly as you type it.

To add a preformatted block to a page you click on the + icon at the left of any empty block or at the top left of the editor then search for Preformatted, or locate it in the Widgets section, and click on the Preformatted icon.

Here’s what it looks like when added to the block editor.

PREFORMATTED BLOCK
  The text keeps spacing and line-breaks exactly
    as they are entered
       just like this

Typing /preformatted and hitting the enter key in an empty paragraph block is another quick way of creating a preformatted block.

More detailed instructions for adding blocks can be found here.

Usage

The Preformatted Block has a number of similarities with the Paragraph Block and Code Block, and can be seen as a hybrid of these two.

Primarily used to display text as one would in the Paragraph Block, the Preformatted Block however keeps any spacing or line breaks exactly as entered.

Text is displayed in the Preformatted Block in a monospace font, similar to the Code Block. This allows for easy text alignment, however, the Preformatted Block also includes styling with the ability to add hyperlinks which is not available in a Code Block.

Block Toolbar

The block toolbar is displayed by clicking on the block. Blocks have unique toolbar icons that are block specific.

The Preformatted Block has three styling options, which include bold, italic, and strikethrough. There is also a hyperlink button as found in the regular Paragraph Block.

Block Settings

Additional options for the preformatted block are located in the editor sidebar of the block editor. Click the ‘cog’ icon next to the Publish button if the sidebar is not visible.

There is only a single option in the sidebar settings, the advanced tab. Here you are able to add a CSS class to your block, with custom CSS to style the block.