How to use the Code Editor in the Gutenberg Editor

The Gutenberg editor gives you a visual interface that makes it easy for you to compose a page or post. However, many people still edit their content using the code editor. Fortunately, the code editor is still present within the Gutenberg editor. You can edit the entire post or page as code, or you can edit individual blocks as code. We will show you how to use the code editor in the Gutenberg editor using a sample post.

Using the Code Editor to edit an individual block

  1. Select post or pageIn order to access the code for an individual block you will need to be logged into the WordPress Administrator Dashboard. Open the page or post that you wish to edit using the Gutenberg editor.
  2. Click on the block that you wish to edit with the code editor.
  3. To the the right of the block you will see 3 vertical dots. Click on the dots.
  4. A pop-up menu will appear. Click on the option labeled Edit as HTML.
  5. You will then see the block displayed in code. Make your changes or additions to the block.
  6. Once you are finished, you will need to click on the Update or Publish options in the top right corner of the editor in order to save your changes. Note that if you wish to see the block in the visual editor after the changes, simply click on the 3 vertical dots again and then click on option labeled Edit Visually.

Using the Code Editor to edit the entire post or page

  1. Select post or pageIn order to access the code editor for the page or post you will need to be logged into the WordPress Administrator Dashboard. Open the page or post that you wish to edit using the Gutenberg editor.
  2. select 3 dotsIn the top right hand corner next to the icon that looks like a gear you will see 3 vertical dots. Click on the dots.
  3. Here you will see the options for Visual Editor or Code Editor. By default, the Visual Editor is selected. Click on the Code Editor to place the editor in that mode.
  4. Make your changes to the page or post.
  5. Click on the Update or Publish button in the top right hand corner in order to save your changes.

This concludes our tutorial on how to use the Code editor in the Gutenberg editor. If you wish to learn more about using the Gutenberg editor, please see our article on publishing content with the Gutenberg editor.

Leave a Reply