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.

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 0 / 5. Vote count: 0

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

Newest Articles:

10 Best WordPress Themes for Gutenberg

If you craft your WordPress website by using Gutenberg, then it is likely that you have thought about working with a block editor-compatible theme. If that is the case, then you should know that there are numerous WordPress themes that are meant to be a perfect fit...

How to Copy a Page with WordPress Gutenberg Editor

Looking for ways to copy your WordPress web pages? The Gutenberg block editor got you covered. In this article, you will read about 3 different methods you can instantly apply when crafting your WordPress website.   How to Copy a Page with WordPress Gutenberg...

How to Add Tabs to Your WordPress Site with Gutenberg

Tabs are quite useful in numerous situations and can be a fresh addition to your WordPress websites. Massively used to showcase content categories, news, and various other types of posts in a very structured manner, tabs contribute to making your site content more...

How to Create Tables in WordPress Using Gutenberg Editor

Creating a table in WordPress with the Gutenberg Block Editor is a straightforward task. Should you need to add one or several tables to your pages, the following paragraphs explain how to do so.   How to Create Tables in WordPress using Gutenberg Editor  ...

5 Best WordPress Slider Plugins for Gutenberg

When crafting your WordPress website, it is not only important to publish informative and well-structured content, but it is also crucial to make your web pages as aesthetically appealing as possible. An effective way of making your site more beautiful is by inserting...

Ready to Create Your Website?