If you think closely, the preformatted block combines code and paragraph block. The sole purpose of the block is to display text. It ensures your content remains both clear and structured.
The Preformatted block is the solution for maintaining a precise text layout with spacing and special formatting. It is a life-saver for people struggling to maintain an exact text layout.
Today, we will share our guidelines on how to use the Preformatted block in WordPress and will try to unfold every feature this block offers below. But, before that, we will first learn what it is.
What is the Preformatted Block?
The Preformatted block is a core WordPress content block designed to preserve spaces and line breaks exactly as input. It is an ideal solution to showcase code snippets, pre-designed layouts, or anything requiring fixed formatting.
The Preformatted text benefits you in several ways. Let’s check out some of the benefits below.
- Precise Formatting: Ensures text appears exactly as written, preserving line breaks and spacing.
- Versatility: Suitable for non-code text requiring structured layouts, such as poetry or ASCII art.
- Enhanced Readability: Displays fixed-width fonts, making text distinguishable, especially when showcasing code or technical instructions.
- Custom Styling: Allows additional styling options with inline HTML and CSS, offering flexibility for unique designs.
Create Beautiful Tables
With Block Editor
Preformatted Block Toolbar Features
The Preformatted block does not have any specific options in the editor. It has all the basic options like every other core block in Gutenberg.
It has the following basic options.
- Transform: You can transform this block into a paragraph, code, columns, etc.
- Drag: Allows you to drag and drop the dedicated block into any place.
- Moving Handles: Let you move your block up and down.
- Bold: Allows you to bold the content of your block.
- Italic: Allows you to italicize the content of your block.
- Hyperlink: This option lets you add links for selected content within the block.
- More rich text controls: Includes more text formatting options such as Footnow, Highlight, Inline code, Inline Image, etc.
- More options: Offers more options related to the section of the block, such as duplicate, copy, group, etc.
Now, let’s check out how you can use the preformatted block.
How to Use the Preformatted Block?
Using the preformatted block is super easy as anyone can easily use the block, and nobody requires any coding skills to use the block. Make sure to follow us through!
Step 1: Insert the Preformatted Block
Navigate to your posts or page where you want to use the preformatted block.
When you are in the editor, click the Add Block (“+“) icon (1), type “Preformatted” in the search box (2), and click “Preformatted” (3).
Step 2: Insert Your Code or Preformatted Text
When the code block is in the editor, insert your preformatted text or code.
Step 3: Modify Customization Options
The customization options of the Preformatted block feature color, typography, dimensions, and border options for code block customization.
I will describe the customization features below. You can customize your block the way you like.
To access the Code Block customization, navigate to Settings (1)> Block (2) > Styles (3)
You can modify the color, typography, dimensions, and border.
- Color: This function lets you change the color of your text and background.
- Typography: The typography lets you select fonts & font size, appearance, line height, letter spacing, letter casing, and letter decoration.
- Dimensions: Dimensions allow you to adjust padding and margin for your text block.
- Border: The Border option lets you add border and border radius for your text block.
So that’s how you use the Preformatted Block in WordPress.
Final Thoughts!
The preformatted block is a handy tool for anyone needing precise text layouts to display content. It is ideal for adding a snippet of code, a stylized quote, or text art.
Experiment with it in your next project to see how it can enhance how you present information. Let me know your thoughts in the comment section below. You can also share this post on social media and tell your other friends about it.
Read More!
- 7 Best WordPress Price List Table Plugins
- How to Use the Heading Block in WordPress (2 Easy Steps) Tableberg
- How to Use The Paragraph Block in WordPress (2 Easy Steps)
- How to Use the Verse Block in WordPress (4 Easy Steps)
- How to Use the List Block in WordPress
- How to Use the Quote Block in WordPress in 3 Easy Steps
- How to Use the Code Block in WordPress in 3 Simple Steps
