Code Vs Preformatted Vs Paragraph Gutenberg Blocks in WordPress

Gutenberg block editor allows to add content to your pages and posts in WordPress. There are variety of different types of blocks that you can use to create and style your content. However, some blocks are similar in nature that users get confused where exactly to use the relevant block. In this article, we will go over three of the most common block types available in the Gutenberg block editor – Code Vs Preformatted Vs Paragraph blocks. We will explain how they differ from one another, as well as suitable scenarios for using each.

Code Vs Preformatted Vs Paragraph Blocks

Code, preformatted and paragraph are all part of text blocks in Gutenberg editor. You can use these blocks to insert different types of text content depending on the situation.   

1. Code Block

As the name suggests, code block is used to directly display formatted code for instructional purposes. In other words, whenever you need to show code as a part of your content, the code block is used. Now, you might be thinking, will the code block run the entered code? And the answer is no, it will just display the formatted code for your readers to view. In essence, the code block is not a code editor, it will basically show the code the way it has been added. So, make sure to apply coding best practices such as formatting by using spaces, adding comments on the code, etc.

Another great thing about the code block is that it will display code from any programming language as it doesn’t run them. This makes it a great tool for displaying different types of scripts for your readers to read, learn, or even copy.

Just like with other Gutenberg blocks, the code block provides two options for customization, being the top toolbar located above the block, and the block sidebar located on the right hand side of the page, as shown in the image above.

From the top toolbar, you can perform the following changes to the block.

• Change block style or type: This setting will allow you to change the code block to preformatted, Custom HTML, change the columns, or create a group, whose style, color and spacing can be further customized.
• Drag: This one is self-explanatory, and you can hold this icon to move the block by dragging it to wherever you want on the page.
• Move Up & Down: This setting works similarly as the previous one with the only difference being instead of dragging the block, you can manually move the block up or down a block.
• Font Options: The top toolbar also provides options to apply bold and italic settings to the written code.
• Link: This setting lets you hyperlink any of the written code to a specific URL.
• More Settings: This setting will let you use the options like inline code, inline Image, keyboard input, strikethrough, subscript, superscript and text color.

The other customization panel provided in the code block is the sidebar, which will let you change the font size, as well as include an HTML anchor and additional CSS classes.

2. Preformatted Block

This block is very similar to the code block with some slight differences between the two. This block displays the text exactly the way it has been entered and is mainly used to display text content with line breaks and spaces, whilst providing the option to change typography, colors and more.

Let’s go over the top toolbar and sidebar settings of this block so that we can uncover some important differences between this block and the code block.

With the top toolbar, most of the options are the same as with the code block. You can also convert the preformatted block to code and other blocks as explained above. The major difference between the preformatted block and code block comes in the block sidebar options, and specifically the color options. The preformatted block allows you to make changes to the text color, add a background color and also change the link color, if there are any texts that have been hyperlinked. While the code block provides an option to change the text color from the more options tab on its top toolbar, the extra color customization options provided in the preformatted blocks makes it standout.

Note: There are lot of syntax highlighter plugins available to showcase your code by adding colors, line numbers and click to copy functions. Most of these plugin work with <pre> or preformatted tag which include the <code> tag. For example, the plugin will add syntax highlighting when you add code in the format <pre><code>your code</code></pre>. However, some plugins may also only use preformatted or code block. If you are a developer or coder want to showcase your coding skills then we recommend using one of these syntax highlighter plugins to make use of the default code and preformatted blocks in Gutenberg.

3. Paragraph Block

And lastly, we have the paragraph block which is the default block type for adding content and text via the block editor. It’s the block that you will use the most for sure as this block is the most basic and foundational block. The entered text will be formatted with HTML paragraph tags and pressing enter will create a new paragraph block.

Other key differences between the paragraph block and the other two comes in its unique customization options. With the top toolbar, unlike the other two blocks, the paragraph block can be transformed into Columns, Groups, Preformatted block, Heading, List, Quotes, Pullquote and Verse. Rest of the top toolbar options are the same between the three blocks. Furthermore, looking into the block’s sidebar options, it provides text and background color options like the Preformatted block, but also has a unique option called Text Settings. This setting allows you to show drop cap (large initial letter) on your paragraph, as shown in the example below.

In addition, you have options to add drop cap and change the line height. However, the difference here is that you can convert paragraph to preformatted but not to code block.

Differences – Code Vs Preformatted Vs Paragraph

Here is a summary of differences between these blocks.

Usage/Block	Paragraph	Code	Preformatted
Purpose	Paragraph block is used to create content and is the default block for adding text via the block editor.	Code block is used to display code as a part of the content.	Preformatted block is used to show a text exactly as you type it.
HTML Tag	<p>……</p>	<code>……</code>	<pre>……</pre>
Conversion	To preformatted and many other	To preformatted	To code
Text Color	Yes	Yes	Yes
Background	Yes	No by default, you can use Group to add background	Yes
Used in Syntax Highlighting	No	Yes	Yes
Font Used	Default body font	Custom monospace font	Custom monospace font
Line Break	No	Yes	Yes
Space	Yes	Yes	Yes
HTML Comments	No	Yes	Yes
Tab	No	Yes	Yes
Drop Cap	Yes	No	No
Line Height	Yes	No	No

Final Words

And there we have it. All three blocks serve their purpose in terms of adding specific types of content via the block editor. Styling of these blocks depend on the theme you use and most themes and plugins use pre/code combination for syntax highlighting. In addition, you can use Custom HTML block to insert show the result of the code.