{"id":11968,"date":"2017-12-22T05:06:44","date_gmt":"2017-12-22T10:06:44","guid":{"rendered":"https:\/\/www.boldgrid.com\/support\/?p=11968"},"modified":"2021-08-12T11:20:05","modified_gmt":"2021-08-12T15:20:05","slug":"how-to-use-the-code-editor-in-the-gutenberg-editor","status":"publish","type":"post","link":"https:\/\/www.boldgrid.com\/support\/wordpress-tutorials\/how-to-use-the-code-editor-in-the-gutenberg-editor\/","title":{"rendered":"How to use the Code Editor in the Gutenberg Editor"},"content":{"rendered":"\n

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 WordPress 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.<\/p>\n

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

Using the WordPress Code Editor to edit an individual block<\/h2>\n
\n
Open the page or post and click on the block that you wish to edit with the code editor. A toolbar will appear above the block.<\/li>\n
On the far right you will see 3 vertical dots. Click on the dots<\/strong>. A pop-up menu will appear. Click on the option labeled Edit as HTML<\/strong>. $\"Edit$ <\/a><\/li>\n
You will then see the block displayed in code. Make your changes or additions to the block.
\n $\"HTML$ <\/a><\/li>\n
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<\/strong>. $\"Edit$ <\/a><\/li>\n
Once you are finished, you will need to click on the Update<\/strong> or Publish<\/strong> options in the top right corner of the editor in order to save your changes.<\/li>\n<\/ol>\n
Using the Code Editor to edit the entire post or page<\/h2>\n
\n
Open the page or post that you wish to edit.<\/li>\n
In the top right hand corner next to the icon that looks like a gear you will see 3 vertical dots. Click on the dots<\/b>.<\/li>\n
Here you will see the options for Visual Editor<\/strong> or Code Editor<\/strong>. By default, the Visual Editor<\/strong> is selected. Click on the Code Editor<\/strong> to place the editor in that mode.
\n $\"Enable$ <\/a><\/li>\n
Make your changes to the page or post. If you’d like to return to the visual editor, click the Exit code editor<\/strong> link in the upper right of the screen.
\n $\"Exit$ <\/a><\/li>\n
Click on the Update<\/b> or Publish<\/b> button in the top right hand corner in order to save your changes.<\/li>\n<\/ol>\n
Troubleshooting<\/h2>\n
Why does my code gets removed from the WordPress Code Editor?<\/h3>\n
Sometimes code will get removed when switching between visual and code views. This happens when the editor doesn’t know what to do with the code – it can’t interpret it. If this happens, it might be easier to use a Custom HTML block.<\/p>\n
$\"WordPress$ <\/a><\/p>\n
How to Edit Other WordPress Code<\/h2>\n
How do I edit Widget HTML?<\/h3>\n
As of the WordPress 5.8 release, widgets now display as blocks. Navigate to Appearance > Widgets in the dashboard. Hover over the widget you’d like to edit and then click the 3 dots that appear on the right side of the toolbar. If it is possible to edit the HTML of that widget, you will see the Edit as HTML<\/strong> link. Please note that not all widgets will have this option.<\/p>\n
$\"Edit$ <\/a><\/p>\n
Where else can I add Custom Code in WordPress?<\/h3>\n
If you’re adding CSS code to use on more than one page, consider using the Customizer. Any code added to the Custom \/ Additional CSS panel is available to use across the entire site.<\/p>\n
There are some types of code will not function if added to a page or post, like tracking codes. These generally need to be in the header or footer. There are tracking code plugins<\/a> available to get the code in the correct location.<\/p>\n
How do I edit HTML in WordPress theme code?<\/h3>\n
It is not possible to edit a theme’s code from the WordPress editor. You can make changes to a theme from the dashboard by going to Appearance > Theme Editor, but we do not recommend it. If you want to make code changes to a WordPress theme you should use a Child Theme<\/a>. Otherwise theme updates could override or break your changes.<\/p>\n
This concludes our tutorial on how to use the WordPress Code editor \/ Gutenberg editor. If you wish to learn more about using the WordPress Gutenberg editor, please see our article on publishing content with the Gutenberg editor<\/a>.<\/p>\n<\/body><\/html>\n","protected":false},"excerpt":{"rendered":"
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 WordPress 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 […]<\/p>\n","protected":false},"author":6,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"bgseo_title":"How to use the Code Editor in the Gutenberg Editor","bgseo_description":"Learn how to use the Code Editor in the Gutenberg Editor. ","bgseo_robots_index":"index","bgseo_robots_follow":"follow","footnotes":""},"categories":[151],"tags":[691],"class_list":["post-11968","post","type-post","status-publish","format-standard","hentry","category-wordpress-tutorials","tag-gutenberg"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/posts\/11968","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/comments?post=11968"}],"version-history":[{"count":10,"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/posts\/11968\/revisions"}],"predecessor-version":[{"id":121415,"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/posts\/11968\/revisions\/121415"}],"wp:attachment":[{"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/media?parent=11968"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/categories?post=11968"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/tags?post=11968"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

Using the WordPress Code Editor to edit an individual block<\/h2>\n\nOpen the page or post and click on the block that you wish to edit with the code editor. A toolbar will appear above the block.<\/li>\n

Using the Code Editor to edit the entire post or page<\/h2>\n\nOpen the page or post that you wish to edit.<\/li>\nIn the top right hand corner next to the icon that looks like a gear you will see 3 vertical dots. Click on the dots<\/b>.<\/li>\n

Troubleshooting<\/h2>\n