Home » WordPress Tutorials » Basics » How to Display Code with WordPress Gutenberg Code Block

How to Display Code with WordPress Gutenberg Code Block

If you wish to share code snippets on your WordPress pages and blog posts, the Gutenberg Block Editor got you covered.

With a special code block, you can showcase any kind of snippets and properly format them, so your site visitors fully understand every code symbol you share.


Why Should You Use Gutenberg Code Blocks

Before Gutenberg was introduced, there was the WordPress Classic editor. To display code snippets with the Classic editor was challenging, as the formatting options were quite limiting.

However, as Gutenberg became the default WordPress editor, the proper display of code snippets is now simple and effective. This is possible with the introduction of the so-called code blocks that can contain any kind of snippets and display them separately from another type of content in a way that the proper alignment and structure are fully maintained.


How to Display Code with WordPress Gutenberg Code Block

The first thing you should do is to enter the WordPress admin panel.

Then, make sure Gutenberg is selected as your default editor. If you are not sure how to do so, we suggest you read how to do so in this article:

How to Use WordPress Gutenberg Block Editor

also, have a look at how to align the width of a Gutenberg block.

and also How to Add Images in WordPress with Gutenberg 

Once you enter your WordPress admin panel, you should open the page or a blog post in which you want to include a code block. Regardless of whether you wish to work on a page or a post, keep in mind that the process is the same for both.

For this demonstration, we will insert a code block in a sample blog post. To do so, we created a new sample post by clicking on Posts->Add New:

WordPress Gutenberg Editor Add New Post


Once you click on Add New, WordPress should activate Gutenberg:

WordPress Gutenberg Editor Interface


Once the block editor is active, you can now insert a code block. To do so, click on the black + button:

WordPress Gutenberg Editor Add Block


Clicking this button will open a menu with various blocks you can immediately insert into your page or blog post:

WordPress Gutenberg Editor Blocks List


Once the menu with suggested blocks is opened, from the list select Code:

WordPress Gutenberg Editor Code Block


Selecting the Code icon will prompt WordPress to insert a code block in your content structure:

WordPress Gutenberg Editor Add Code Snippet to Block


Now that the code block is inserted inside your content area, you can add your code snippet inside the block.

To add your code to the block, click inside the Write code… area and start typing down your snippet. You can also copy and paste your code the same way – click inside the Write code… area and paste the snippet right away.

Either way you choose, the result should look like this:

WordPress Gutenberg Editor Code Block Example Snippet


Now you’ve managed to add a code snippet with a Gutenberg code block. This block will be completely separate from other types of content in the same area, so you should not worry about messing up the structure of the snippet when inserting various blocks such as paragraphs, media, and widgets.



Displaying code snippets with the Gutenberg block editor is quite simple and effective.

Should you launch an educational website featuring code examples, you are sharing any kind of documentation, or for any other reason you should display code snippets, the WordPress block editor makes the process simple and quick, without requiring time and effort.


Was this article useful?

Click on a star to rate it!

Average rating 5 / 5. Vote count: 1

No votes so far! Be the first to rate this post.

Newest Articles:

How to Add a Site Logo Block in WordPress with Gutenberg

Adding a site logo in WordPress with Gutenberg is straightforward and requires only a few mouse clicks and just several minutes of your time. In the following paragraphs, you will read how to add a site logo to your WordPress website via the Gutenberg editor step by...

How to Add Images to WordPress with Gutenberg

Adding images with Gutenberg is quite simple. The block editor is very user-friendly and allows you to add images in several ways. In the following paragraphs, you will read about 4 methods you can instantly use to upload the media files you want.   How to Add...

How to Disable Gutenberg in WordPress

If Gutenberg is not suitable for your needs and wish to switch back to the Classic Editor, continue reading, as in this article we will show you 3 simple methods of how to disable the block editor. In the following sections, you will read how to disable Gutenberg by:...

5 Best Gutenberg Plugins for WordPress

One of the fastest and most convenient ways of enhancing the functionalities of Gutenberg is by using various WordPress plugins. Although Gutenberg is very versatile and feature-rich by itself, the open-source nature of WordPress has inspired developers all around the...

How to Add a Contact Form with WordPress Gutenberg Editor

If you are using Gutenberg to craft your WordPress website, then you should know that the process is very easy, especially by using the block editor. In the following paragraphs, you will read how to add one to your pages.   How to Add a Contact Form with...

Ready to Create Your Website?