WordPress Block Editor – Preformatted Block

This tutorial is part of our series on How To Use The WordPress Block Editor (Gutenberg).

• To learn more about using the WordPress block editor interface, go here: The WordPress Block Editor – Content Area
• To learn more about using blocks, see this tutorial: How To Use WordPress Block Editor Blocks

***

Preformatted Block – Description

The Preformatted block lets you add text to a post or page that displays exactly as you type it.

A Preformatted block is similar to a Paragraph block and a Code block.

Like a Paragraph block, the Preformatted block is primarily designed to display text. Unlike the Paragraph block, however, the Preformatted block keeps any spacing, tabs, or line breaks exactly as they are entered.

Also, like the code block, the Preformatted block displays text 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.

Preformatted Blocks:

• Preserve text spacing, tabs, and line breaks.
• Display using your Theme’s styles.
• Typically use a monospace font to make it stand out from other text on your post/page.
• Are similar to Code blocks, but don’t use the HTML <code> element.

How To Use The Preformatted Block

In this section, we’ll cover:

• How to add a Preformatted block to your content.
• How to edit and configure your Preformatted block and block settings.
• How to remove the Preformatted block from your content.

For more details on using blocks (e.g. how to move blocks around your content), see this tutorial: How To Use Blocks.

Adding A Preformatted Block

To add a Preformatted block to your content:

• Either:
  • Click on the ‘Add Block’ tool in the Editing Toolbar section and select the Preformatted block (in Most Used or Text section),
  • Add the Preformatted block in the Content Area.
• Type or paste in your content.
• Use the tools in the Preformatted Block Editor or Block Settings section to edit and format your Preformatted text.

Let’s go through the above steps.

First, create a new post or page or open an existing post or page and either:

Click on the Add Block tool and select a Preformatted block…

Or, select a Preformatted block using the Inserter tool in the Content Area.

Either of the above methods will add a Preformatted block to your content.

After adding a Preformatted block, you can add preformatted text by typing or pasting in your content.

After adding preformatted text to your content:

• Edit and format your text,
• Edit and configure your block’s settings,
• Save, publish, or update your post or page.

How To Edit A Preformatted Block

To edit a Preformatted block, do the following:

• Click inside the Preformatted block to select it.
• Use the Block Editor tools to:
  • Format the text (bold, italics, strikethrough).
  • Add a hyperlink.
• Use the Block Settings to change the style of your preformatted text using CSS (Cascading Style Sheets).

Remember to update and publish your post or page to save your settings.

How To Remove A Preformatted Block

To delete or remove a Preformatted block from your content:

• Click inside the Preformatted block to select it.
• Select the ‘More Options’ tool in the Block Editor.
• Click on ‘Remove block’.
• This will remove the Preformatted block from your content.

Additionally…

• You can reposition your block using the ‘Move Up’ and ‘Move Down’ arrows or the Drag and Drop handle tool (if you need help with this step, see our tutorial on How To Use Blocks).
• You can also convert a Preformatted block into a Reusable block.

Preformatted Block Tools, Options & Settings

The Preformatted block includes tools, options, and settings for:

• Preformatted Block Editor
• Preformatted Block Settings

Preformatted Block Editor

The Preformatted Block Editor includes tools that let you perform the following operations:

• Change Block Type (See ‘Preformatted Block – Additional Info’ section below.)
• Drag & Drop Tool
• Move Up and Down Tool
• Bold – Add bold formatting to text.
• Italic – Add italicized formatting to text.
• Link/Unlink Tool
  • Paste a link URL, or
  • Type to search and link to existing content.
  • Hit ‘Enter’ or click the ‘Apply’ button to create a link.
  • Select the option to open the link in a new tab.
• More Rich Text Controls – See How To Use Blocks to learn more about using rich text control settings.
• More Options – See How To Use Blocks to learn how to use this section.

Preformatted Block Settings

Preformatted block settings include:

• Block description area
• Advanced Settings
  • HTML Anchor – Create a unique web address to send users directly to this block using a unique jump link URL. To learn more about using HTML Anchors, see our tutorial on How To Use Blocks.
  • Additional CSS Class(es) – This field lets you add multiple CSS classes to your block separated with spaces. This allows you to write custom CSS and style the block as you see fit. Note: This requires having knowledge of CSS (Cascading Style Sheets).

Preformatted Block – Additional Info

The Preformatted block can be converted into the following block types:

• Paragraph block
• Columns block
• Group block
• Code block
• Reusable block

Notes:

• Converting a Preformatted block into a Paragraph block removes any styling applied to text by your theme (i.e. your text displays like all other regular text in your content).
• Line breaks are preserved in the Paragraph block as ‘hard returns’ (i.e. SHIFT + ENTER).

Additionally:

Installing plugins or themes on your site may also add new functionality, options, or settings to a Preformatted block.

Congratulations! Now you know how to use the WordPress content editor’s Preformatted block.

To learn how to use other blocks, go here: WordPress Block Editor – How To Use Blocks

***

Updated: July 5th, 2024