Code Block

Use the Code Block to display code and code snippets on your site that respect your spacing and tabs …

WordPress Gutenberg Blocks – Code

WordPress Gutenberg - Code Block

This tutorial is part of our WordPress Gutenberg: The Ultimate Guide For Non-Technical WordPress Users series.


Code Block Description

Use the Code Block to display code and code snippets on your site that respect your spacing and tabs.

Add Codes to WordPress using the Code Block

(Add Codes to WordPress using the Code Block)


  • The Code Block contains no options or settings, as all formatting can be included in the code itself.
  • The WordPress Code Block supports most code formats (e.g. HTML, CSS, JavaScript, PHP, etc.).

How To Use The Code Block

To add a Code Block:

  • Either:
    • Click on the ‘Add Block’ tool in the Editing Toolbar section and select a ‘Code’ block (in Most Used or Common Blocks section), or
    • Add the ‘Code’ block in the Content Area.
  • Add, paste in, or upload your content.
  • Use the tools in the Code Block Editor or Block Settings section to resize, edit, format, or customize your Code.

Let’s go through the above steps:

First, create a new post or page or open an existing post or page and either:

Click on the ‘Add Block’ tool and select a ‘Code’ block …

'Add Block' Tool - Add Code Block

(‘Add Block’ Tool – Add Code Block)

Or, select a Code Block in the Content Area

Add a Code Block from the Content Area

(Add a Code Block from the Content Area)

After adding a Code Block, you can type or paste in your code…

Add code to your content using the Code Block

(Add code to your content using the Code Block)

After adding codes, save, publish, or update your post or page.

How To Edit A Code Block

You can’t edit a Code Block. All you can do with a Code Block is:

  • Click inside the Code Block to select it.
  • Type or paste your code into the Code Block.
  • Add a style class to the Code Block using CSS.

Remember to update and publish your post or page to save your settings.

How To Remove A Code Block

To delete or remove a code block:

  • Click inside the Code Block to select it.
  • Select the ‘More Options’ tool in the Block Editor.
  • Click on ‘Remove Block’.
  • The block will be removed from your post or page.

Remove a Code Block

(Remove a Code Block)

Additionally …

  • You can reposition your block using the ‘Move Up’ and ‘Move Down’ arrows or the Drag and Drop handle tool (see our ‘How To Use Blocks‘ tutorial if you need help with this step).
  • You can also convert Code Blocks into Reusable Blocks.

Code Block Tools, Options & Settings

The Code Block includes tools, options, and settings for:

  • Code Block Editor
  • Code Block Settings

Code Block Editor

Code Block Editor

(Code Block Editor)

The Code Block Editor includes tools that let you perform the following operations:

  • Change Block Type (See ‘Code Block – Additional Info’ section below.)
  • More Options

Code Block Settings

Code Block Settings

(Code Block Settings)

Code Block settings include:

  • Block description area
  • Advanced Settings
    • Additional CSS Class

Code Block – Additional Info

The Code Block can be converted into the following block types:

Change Block Type - Code Block

(Change Block Type – Code Block)


Installing plugins or themes on on your site may add new functionality, options, or settings to Code Blocks.


Congratulations! Now you know how to use the WordPress Gutenberg content editor Code Block.

WordPress Gutenberg - Making WordPress Easier For Non-Techies


"I am beyond impressed with what you have put together. I can tell that you put a ton of hard work into building what you have. You have the absolute best content on WordPress I have ever seen!" - Robert T. Jillie

Originally published as Code Block.