Title: Preformatted block
Author: kriskorn
Published: March 7, 2019
Last modified: May 25, 2026

---

# Preformatted block

## In this article

 * [Add a Preformatted block](https://wordpress.org/documentation/article/preformatted-block/?output_format=md#add-a-preformatted-block)
 * [Block toolbar](https://wordpress.org/documentation/article/preformatted-block/?output_format=md#block-toolbar)
    - [Change block type or style](https://wordpress.org/documentation/article/preformatted-block/?output_format=md#change-block-type-or-style)
    - [Moving handles](https://wordpress.org/documentation/article/preformatted-block/?output_format=md#moving-handles)
    - [Bold](https://wordpress.org/documentation/article/preformatted-block/?output_format=md#bold)
    - [Italic](https://wordpress.org/documentation/article/preformatted-block/?output_format=md#italic)
    - [Hyperlink](https://wordpress.org/documentation/article/preformatted-block/?output_format=md#hyperlink)
    - [More rich text options](https://wordpress.org/documentation/article/preformatted-block/?output_format=md#more-rich-text-options)
    - [More options](https://wordpress.org/documentation/article/preformatted-block/?output_format=md#more-options)
 * [Block settings](https://wordpress.org/documentation/article/preformatted-block/?output_format=md#block-settings)
    - [Color](https://wordpress.org/documentation/article/preformatted-block/?output_format=md#color)
    - [Typography](https://wordpress.org/documentation/article/preformatted-block/?output_format=md#typography)
    - [Dimensions](https://wordpress.org/documentation/article/preformatted-block/?output_format=md#dimensions)
    - [Border](https://wordpress.org/documentation/article/preformatted-block/?output_format=md#border)
    - [Advanced](https://wordpress.org/documentation/article/preformatted-block/?output_format=md#advanced)
 * [Changelog](https://wordpress.org/documentation/article/preformatted-block/?output_format=md#changelog)

[ Back to top](https://wordpress.org/documentation/article/preformatted-block/?output_format=md#wp--skip-link--target)

[Go back to the list of **Blocks**](https://wordpress.org/documentation/article/blocks/)

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.

## 󠀁[Add a Preformatted block](https://wordpress.org/documentation/article/preformatted-block/?output_format=md#add-a-preformatted-block)󠁿

You can create one by clicking the **Block Inserter** icon.

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

![](https://wordpress.org/documentation/files/2020/10/Screenshot.png)

[Detailed instructions on adding blocks](https://wordpress.org/documentation/article/adding-a-new-block/)

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

## 󠀁[Block toolbar](https://wordpress.org/documentation/article/preformatted-block/?output_format=md#block-toolbar)󠁿

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** shows the standard eight buttons:

 * Change block type or style
 * Drag
 * Moving handles
 * Bold
 * Italic
 * Hyperlink
 * More rich text controls
 * More options

![](https://wordpress.org/documentation/files/2022/02/Preformatted-block-toolbar-
5.9-1024x355.png)

### 󠀁[Change block type or style](https://wordpress.org/documentation/article/preformatted-block/?output_format=md#change-block-type-or-style)󠁿

![](https://wordpress.org/documentation/files/2022/02/Preformatted-block-change-
block-type-5.9.png)

You can transform the Preformatted block into Paragraph block, Columns block, Code
block, or Group. The Group would give you the ability to change the background color
around the Preformatted block.

![](https://wordpress.org/documentation/files/2020/10/Untitled-3.png)

Editor view of **Preformatted Block** as a group with **Color settings** controls

### 󠀁[Moving handles](https://wordpress.org/documentation/article/preformatted-block/?output_format=md#moving-handles)󠁿

![](https://wordpress.org/documentation/files/2022/02/Preformatted-block-move-handles-
5.9.png)

The up and down arrow icons can be used to shift a block up and down in your document.

Detailed instructions on moving a block within the editor can be found [here](https://wordpress.org/documentation/article/moving-blocks/).

### 󠀁[Bold](https://wordpress.org/documentation/article/preformatted-block/?output_format=md#bold)󠁿

![](https://wordpress.org/documentation/files/2022/02/Preformatted-block-bold-option-
5.9.png)

You can select the text of the block and use the **Bold** option or **Ctrl+B** /**
Cmd+B** on your keyboard to bold it, which is usually heavier than the surrounding
text.

### 󠀁[Italic](https://wordpress.org/documentation/article/preformatted-block/?output_format=md#italic)󠁿

![](https://wordpress.org/documentation/files/2022/02/Preformatted-block-italic-
5.9.png)

You can select the text of the block and use the **Italic** option or **Ctrl+I **/**
Cmd+I **on your keyboard to italicize it, which usually appears slanted to the right.

### 󠀁[Hyperlink](https://wordpress.org/documentation/article/preformatted-block/?output_format=md#hyperlink)󠁿

You can select the text of the block and use the **Hyperlink** option.

[Read about more link editing options.](https://wordpress.org/documentation/article/link-editing/)

### 󠀁[More rich text options](https://wordpress.org/documentation/article/preformatted-block/?output_format=md#more-rich-text-options)󠁿

The drop-down menu to the left of the [More options menu](https://wordpress.org/documentation/article/more-options/)
contains a range of additional rich text editing options such as highlighting, inline
code, strikethrough, and more.

[Read about more rich text editing options.](https://wordpress.org/documentation/article/more-text-editing-overview/)

### 󠀁[More options](https://wordpress.org/documentation/article/preformatted-block/?output_format=md#more-options)󠁿

The Options menu represented by three vertical dots on the far right of the toolbar
gives you more features such as the ability to duplicate or remove the block.

[Read about these and other settings.](https://wordpress.org/documentation/article/more-options/)

## 󠀁[Block settings](https://wordpress.org/documentation/article/preformatted-block/?output_format=md#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.
](https://wordpress.org/documentation/
files/2020/09/Screenshot-13.png)

### 󠀁[Color](https://wordpress.org/documentation/article/preformatted-block/?output_format=md#color)󠁿

You can customize the text color, and background color, for the Heading block._ 
The color options available will vary based on the theme._

![Color settings in the Heading block](https://wordpress.org/documentation/files/
2022/06/Screen-Shot-2022-06-22-at-11.06.19-AM-1024x592.png)

Color settings in the Heading block

You can pick a color from the suggestions, or add a custom color using the color
picker, or by adding a color code.

[See this guide for more information about changing colors.](https://wordpress.org/documentation/article/colors-settings-overview/)

### 󠀁[Typography](https://wordpress.org/documentation/article/preformatted-block/?output_format=md#typography)󠁿

Typography settings allow you to adjust the Font size, Appearance, Letter case, 
Line height, and Letter spacing. 

To access all the typography options click on the 3 dot button in the right corner
of the Typography tab.

![Typography settings in the Heading block](https://wordpress.org/documentation/
files/2022/06/Screen-Shot-2022-06-22-at-11.25.05-AM.png)

Typography settings in the Heading block

[Get more details about changing typography settings.](https://wordpress.org/documentation/article/typography-settings-overview/)

### 󠀁[Dimensions](https://wordpress.org/documentation/article/preformatted-block/?output_format=md#dimensions)󠁿

This block provides various options to adjust its dimensions, such as width and 
height, allowing you to customize the text layout to ensure visual consistency.

For details refer to this support article: [Dimension settings overview](https://wordpress.org/documentation/article/dimension-controls-overview/)

### 󠀁[Border](https://wordpress.org/documentation/article/preformatted-block/?output_format=md#border)󠁿

The border settings add border color, width, and radius.

For details refer to this support article: [Border settings overview](https://wordpress.org/documentation/article/border-settings-overview/)

### 󠀁[Advanced](https://wordpress.org/documentation/article/preformatted-block/?output_format=md#advanced)󠁿

The Preformatted block provides the following Advanced settings options: HTML Anchor,
Additional CSS Class(es), and Styles.

[Learn more about advanced settings](https://wordpress.org/documentation/article/advanced-settings-overview/)

## 󠀁[Changelog](https://wordpress.org/documentation/article/preformatted-block/?output_format=md#changelog)󠁿

 * Updated 2026-05-25 (props to @kjoyner @awetz583)
    - Updated “Advanced” section to refer to new overview page
 * Updated 2026-02-10 (props to @femkreations @ndiego @awetz583)
    - Unbolded and sentence cased block name
    - Added heading above how to add the block
    - Added dimensions heading and link
    - Added border heading and link
 * Updated 2023-08-09
    - Replaced the link section with short summary linking to new dedicated page.
 * Updated 2023-06-08
    - Replaced “More rich text options” section with short summary linking to new
      dedicated page for rich text editing options.
 * Updated 2022-02-04
    - Screenshots and video as per WordPress 5.9
 * Updated 2020-10-25
    - Screenshots and video as per WordPress 5.5
    - Added feature changes in Block Toolbar
    - Added feature changes in Block Settings
    - Added “Go back to the list of Blocks” to the top of the page
 * Created 2019-03-07

## Was this article helpful? How could it be improved? 󠀁[Cancel reply](https://wordpress.org/documentation/article/preformatted-block/?output_format=md#respond)󠁿

[Log in to submit feedback](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fwordpress.org%2Fdocumentation%2Farticle%2Fpreformatted-block%2F&locale=en_US).
If you need support with something that wasn't covered by this article, please post
your question in the [support forums](https://wordpress.org/support/forums/).

First published

March 7, 2019

Last updated

May 25, 2026