1. Home
  2. WordPress
  3. WordPress Admin Editor
  4. Gutenberg Editor
  5. Gutenberg Editor: Adding a Code Block in WordPress Posts

Gutenberg Editor: Adding a Code Block in WordPress Posts

WP Enthusiast

WP Professional

WP Professional Plus

PairSIM WordPress

Distinguishing the difference between regular text and code can be very helpful in technical articles. You can also change WordPress fonts and headings to help clarify sections. If you are looking to access the code editor in Gutenberg, see our article: Gutenberg Editor: How to Access the Code Editor.

Make sure you are using the Gutenberg editor. If you upgraded to WordPress 5, then your post and page editor will default to use the Gutenberg editor. If you are still using WordPress 4 (or earlier) or have the Classic Editor installed, then your editor will not work with this tutorial.

Adding Code Block in WordPress Gutenberg

  1. Open a post or page editor
  2. Click the plus button to add a blockplus button image
  3. Select the code blockcode image
  4. Enter the text you want to be formatted as code into the code blockwrite code image

All text within the code block will be formatted however your theme formats code. Click the Preview button to see a preview of how this will look when published.code block image

Updated on April 16, 2020

Was this article helpful?

Related Articles