How to use the Code Editor in the Gutenberg Editor
Last updated on

Note that the Gutenberg editor has been integrated directly into the WordPress Administrator dashboard as of WordPress version 5.0. It is now the default WordPress 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.

Looking for an alternative to the Gutenberg Editor? Try our WordPress Page Builder that uses a different approach to WordPress Blocks to help build your website with ease! Otherwise, here are the steps needed to continue this tutorial using WordPress with the current WordPress Editor:

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.

 

SIGNUP FOR

BOLDGRID CENTRAL  

   200+ Design Templates + 1 Kick-ass SuperTheme
   6 WordPress Plugins + 2 Essential Services

Everything you need to build and manage WordPress websites in one Central place.

8 thoughts on “How to use the Code Editor in the Gutenberg Editor

  1. Thanks for this – I’m having trouble. I used Amazon affiliate shortcodes in each of my posts, and now I’m trying to change the tracking IDs on a post-by-post basis. When I change it to code editor, it strips out the tracking ID. But when I just click in one block and “edit html” on the other three dots, then the tracking ID is in there, twice.

    To further complicate, this works on one of my sites, but on the other site the tracking IDs won’t show up on a block-by-block basis, either.

    Any idea how to switch the entire article to the html, not the code, so that I can quickly find/replace the old tracking IDs and add the new one?

    • Hi Amanda-

      The WordPress “Gutenberg” editor can be pretty frustrating about stripping out HTML information. You can enable HTML for the entire post with the top-right “vertical ellipsis” menu, and switching to the code editor there. However, a better approach would probably be to use a plugin like Amazon Auto Links to handle the heavy-lifting for you, so that you don’t have to worry about your codes getting messed up while you’re writing your posts.

      • Thanks so much for your time responding to this. Kind of frustrating – but I’ll think on how I want to move forward. Happy Holidays to you!

  2. WordPress keeps removing those edits I do in code view. For instance, I’m trying to add the poster attribute in the HTML of the Cover block. When I make that change, as soon as I click something outside of the editor, it’s removed – just disappears. The cover block doesn’t offer the “edit in HTML” like other blocks. How do I keep WordPress from stripping out my changes in code view?

    • Hi Doug-

      There’s a couple things to consider when using a video in the Cover Block. By design, videos in the cover block are autoplayed since they’re meant to be backgrounds for other content. The cover block also doesn’t provide video controls for the same reason. So the poster attribute wouldn’t really have any effect since the video isn’t paused and waiting to be played. You might want to consider using a regular Video embed block if you’d like your video to have controls and display the poster image.

      That said, the right way to add a poster image to a video in WordPress is to edit the video in your media library, click on Edit more details, and add a Featured Image to your video. This will act as the poster for this video when it appears paused before starting.

      • Hi Jesse,
        Thanks for replying. The main reason for the poster in this instance is so the black background doesn’t show for a second or two before the video starts to play. I normally like to use an image of the first frame to display till the video starts playing which is a smoother transition and a better user experience in my opinion. I get generally people use the poster attribute for a splash image or quasi-thumbnail to display instead of the video but I believe there’s a strong case to have this as an option for both the video block and cover block.

        Is there a function or filter that allows me to edit in code view without WordPressremoving my edits?

        • Hi Doug-
          That’s a really good point I hadn’t considered. It does look like it should be possible using a function similar to this one mentioned on the Gutenberg forums. Gutenberg always filters the HTML content based on rules the block’s author has set out, in this block’s case, the WordPress Core Editor team. It might be worth creating a new forum post over on the Gutenberg Forums to add your feedback, I think that’s a really good idea for user experience with these types of videos.

          • Thanks again, Jesse –
            I had considered just inserting the attribute via JS but this is for a Genesis child theme that will be for public release and part of the Genesis single click site setup function. I wanted to include a video background for the hero section, so really the only option would be to build a custom plugin that would be onboarded during setup that includes this feature. This is going be part of a string of free Genesis child themes that I’ll be releasing in the next few weeks and was really wanting a minimalistic approach to make setting up a Genesis child theme a lot less daunting task than it normally is. So having something that’s built into the core WordPress Cover block would be the optimal solution and make things a bit less clunky. I have decided to forgo video backgrounds for now and just an image. Thank you for y our time and your input.

Leave a Reply

Your email address will not be published. Required fields are marked *