Preformatted Block

The Preformatted Block lets you add text with spacing, tabs, and styling …

WordPress Gutenberg Blocks – Preformatted

WordPress Gutenberg - Preformatted Block

This tutorial is part of our WordPress Gutenberg: The Ultimate Guide For Non-Technical WordPress Users series.

***

Preformatted Block Description

The Preformatted Block lets you add text with spacing, tabs, and styling.

Add Preformatted texts to WordPress using the Preformatted Block

(Add Preformatted text to WordPress using the Preformatted Block)

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

To add a Preformatted Block:

  • Either:
    • Click on the ‘Add Block’ tool in the Editing Toolbar section and select a ‘Preformatted’ block (in Most Used or Formatting section), or
    • Add the ‘Preformatted’ block in the Content Area.
  • Type of 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 …

'Add Block' Tool - Add Preformatted Block

(‘Add Block’ Tool – Add Preformatted Block)

Or, select a Preformatted Block in the Content Area

Add a Preformatted Block from the Content Area

(Add a Preformatted Block from the Content Area)

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

Preformatted text added

(Preformatted text added)

After adding preformatted text:

  • Edit and configure block settings,
  • Save, publish, or update your post or page.

How To Edit A Preformatted Block

To edit a Preformatted Block:

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

Edit a Preformatted Block

(Edit a Preformatted Block)

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:

  • Click inside the Preformatted Block to select it.
  • Select the ‘More Options’ tool in the Block Editor.
  • Click on ‘Remove Block’.
  • The block will be removed from your post or page.

Remove a Preformatted Block

(Remove a Preformatted Block)

Additionally …

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

Preformatted Block Tools, Options & Settings

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

  • Preformatted Block Editor
  • Preformatted Block Settings

Preformatted Block Editor

Preformatted Block Editor

(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.)
  • Format Preformatted Text
    • Bold
    • Italics
    • Strikethrough
  • Add Hyperlinks
    • Paste link URL
    • Type to search and link to existing content
    • Hit ‘Enter’ or click ‘Apply’ button to create link
    • Option to open link in new tab
  • More Options

Preformatted Block Editor

(Preformatted Block Editor)

Preformatted Block Settings

Preformatted Block Settings

(Preformatted Block Settings)

Preformatted Block settings include:

  • Block description area
  • Advanced Settings
    • Additional CSS Class

Preformatted Block – Additional Info

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

Change Block Type - Preformatted Block

(Change Block Type – Preformatted Block)

Info

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

Change Preformatted Block into other block types

(Change a Preformatted Block into other block types)

Additionally:

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

***

Congratulations! Now you know how to use the WordPress Gutenberg content editor Preformatted Block.

WordPress Gutenberg - Making WordPress Easier For Non-Techies

***

"I am beyond impressed with what you have put together. I can tell that you put a ton of hard work into building what you have. You have the absolute best content on WordPress I have ever seen!" - Robert T. Jillie

Author: Martin Aranovitch

Martin Aranovitch is the owner of WPCompendium.org and the author of The WordPress User Manual. WPCompendium.org provides hundreds of FREE tutorials that show you how to use WordPress to grow your business online with no coding skills required! Get our FREE "101+ WordPress Tips, Tricks & Hacks For Non-Techies" e-course with loads of useful WordPress tips!

Originally published as Preformatted Block.