The WordPress Block Editor - Code Block

WordPress Block Editor – Code Block

WordPress Block Editor - Code Block

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

***

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.

Sample content with code added.
Use the code block to display code in your content.

Info

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

Add Block tool - Add code block.
Add a Code block using the Add Block tool.

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

Adding a Code block using the Inserter tool.
Add a Code block using the Inserter tool.

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

Code block - Add code.
Type or paste your code into the Code block.

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.
Code block - More Options: Remove block
Delete the code block from your content.

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

Code Block Editor
Code block editor menu.

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
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:

Code block - transform into other block types.
Change the Code block into other block types.

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

Content with a Code block added.
Display code in your content using a 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

***

Print Friendly, PDF & Email

Updated: April 8th, 2023

Terms Of Use | Privacy Policy

Scroll to Top