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

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

WP Enthusiast

WP Professional

WP Professional Plus

PairSIM WordPress

Podcast Websites

In the Gutenberg Block 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 Block 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.

Switching Between the Visual and Code Editor with Shortcuts

Want a super quick way to switch between the visual and code editor? If so, you can use these WordPress shortcuts.

Mac Command + Option + Shift + m
Windows Ctrl + Shift + Alt + m

Opening Your Post's Code Editor Manually

If you prefer not to use WordPress shortcuts, you can open the code editor manually in the block editor by following these 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. 

Editing 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 November 4, 2021

Was this article helpful?

Related Articles

Need Support?
Can't find the answer you're looking for?
Contact Support