WordPress Block Editor – Code Block

This tutorial is part of our series on How To Use The WordPress Block Editor (Gutenberg).

• To learn more about using the WordPress block editor interface, go here: The WordPress Block Editor – Content Area
• To learn more about using blocks, see this tutorial: How To Use WordPress Block Editor Blocks
• For additional information, see this tutorial: How To Add Code To WordPress Posts & Pages

***

Code Block – Description

Use the Code block to add formatted code and code snippets to your content that respect your spacing and tabs. add and display HTML, CSS, JavaScript, PHP, or just about any type of technical code on your site.

• The default Code block contains no additional options or settings, as all formatting can be included within the code itself.
• The WordPress Code block supports most code formats (e.g. HTML, CSS, JavaScript, PHP, etc.).
• The style of your code depends on your theme. Typically, code is displayed in a monospace font.

How To Use The Code Block

In this section, we’ll cover:

• How to add a Code block to your content.
• How to edit and configure your Code block and block settings.
• How to remove the Code block from your content.

For more details on using blocks (e.g. how to move blocks around your content), see this tutorial: How To Use Blocks.

Adding A Code Block

To add a Code Block to your content:

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

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…

Or, select a Code block using the Inserter tool in the Content Area.

After adding a Code block, type, or paste in your code.

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

How To Edit A Code Block

To edit your Code block:

• Click inside the Code block to select it.
• Type or paste your formatted code into the Code block.
• Add an HTML anchor or style class to the Code block using CSS (in Advanced settings field).

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 from your content:

• 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.

Additionally…

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

Code Block Tools, Options & Settings

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

• Code Block Editor
• Code Block Settings

Code Block Editor

The Code block editor lets you perform the following operations:

• Change block type or style (See ‘Code Block – Additional Info’ section below.)
• Drag block
• Move block up and down
• Bold – Add bold formatting.
• Italics – Add italics.
• Link/Unlink – Add or remove a hyperlink.
• More rich text controls – See How To Use Blocks to learn more about using rich text control settings.
• More Options – See How To Use Blocks to learn how to use this section.

Code Block Settings

Code block settings include:

• Block description area
• Typography
  • Font Size
    • Default
    • Small
    • Normal
    • Medium
    • Large
    • Huge
    • Custom
  • Custom – Enter font size in points or use the up and down arrows to select a value for this field.
  • Reset – Resets font in block to default.
• Advanced Settings
  • HTML Anchor – Create a unique web address to send users directly to this block using a unique jump link URL. To learn more about using HTML Anchors, see our tutorial on How To Use Blocks.
  • Additional CSS Class(es) – This field lets you add multiple CSS classes to your block separated with spaces. This allows you to write custom CSS and style the block as you see fit. Note: This requires having knowledge of CSS (Cascading Style Sheets).

Code Block – Additional Info

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

• Columns block
• Group block
• Custom HTML block
• Preformatted block
• Reusable block

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

Congratulations! Now you know how to use the WordPress content editor’s Code block.

For tutorials on how to use other blocks, go here: WordPress Block Editor – How To Use Blocks

***

Updated: July 5th, 2024