1. Home
  2. WordPress
  3. WordPress Admin Editor
  4. Gutenberg Editor
  5. Gutenberg Editor: How to Open Your Post’s Code Editor

Gutenberg Editor: How to Open Your Post’s Code Editor

WP Enthusiast

WP Professional

WP Professional Plus

PairSIM WordPress

In the Gutenberg Editor, you can switch your post from the visual view to the code view. This allows you to edit the post’s code directly.

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.

How to Open Your Post's Code Editor

To access the code editor in Gutenberg, follow these steps:

  1. Open the post editor
  2. To the right in the top navigation bar, click the three dotsthree dots image
  3. In the drop-down, click Code Editorcode editor image

This will switch the editor to the code view.code editor preview

In order to switch back to the visual view, go to the top of the page and click the Exit code editor button. 

How to Edit A Single Block as HTML

WordPress gives you the ability to edit a single block as HTML, instead of the entire post. This makes it easier to add in small code changes. To do so, follow these steps:

  1. Open the post editor
  2. Click on the block you would like to edit in HTML
  3. In the block's tool bar, click the button with three dotsthree dots image
  4. In the drop-down, click the Edit as HTML buttonedit as html image

This will convert the block into HTML. If compatible, you can swap back to the visual editor by repeating steps 2 - 3, then clicking the Edit Visually button.

Updated on September 4, 2020

Was this article helpful?

Related Articles