{"id":45849,"date":"2019-08-20T06:59:31","date_gmt":"2019-08-20T11:59:31","guid":{"rendered":"https:\/\/www.inmotionhosting.com\/support\/?p=45849"},"modified":"2021-08-16T15:59:55","modified_gmt":"2021-08-16T19:59:55","slug":"code-editor-gutenberg-wordpress","status":"publish","type":"post","link":"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/gutenberg\/code-editor-gutenberg-wordpress\/","title":{"rendered":"Working with the Code Editor with Gutenberg WordPress"},"content":{"rendered":"<p>Most people prefer to use the visual tools when composing content within WordPress.  There is always an effort to get the WYSIWYG (\u201cWhat You See Is What You Get\u201d) feel for creating content.  <\/p>\n\n\n\n<p>However, experienced WordPress users often work in code in order to get the results that they want for their posts.  People work in code because sometimes it\u2019s easier to specify a non-breaking space in code than using the visual editor.  <\/p>\n\n\n\n<p>So, how exactly do you get to the code editor in WordPress 5.0 and beyond?  It\u2019s easier than you think!  There are actually two quick ways to be able to work in the code editor within the new WordPress Gutenberg editor.  <\/p>\n\n\n\n<p>The first is to use the block option to work in HTML.  The second option is to convert the entire post or page into code using the WordPress code editor.  This tutorial will walk you through using both options used for editing code within WordPress.<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><a href=\"#html-editor-custom-editor\">Using the HTML and Custom HTML Blocks<\/a><\/li><li><a href=\"#switch-code-editor\">Switching to the Full Page Code Editor<\/a><\/li><\/ul>\n\n\n\n\n\n<h2 class=\"wp-block-heading\" id=\"html-editor-custom-editor\">Using the HTML Editor and Custom HTML block in the WordPress Editor<\/h2>\n\n\n\n<p>The new block system used within the WordPress Editor (also called Gutenberg) is very flexible, but it can also be considered a work in progress.  There are still issues that are being corrected that would otherwise work in the old system.  <\/p>\n\n\n\n<p>However, it\u2019s quite easy to jump into the HTML editor using the options within a block. You will need to already be <a href=\"\/support\/edu\/wordpress\/logging-into-wordpress-dashboard\/\">logged into the WordPress Administrator<\/a> before you can  follow the directions below to work with HTML:<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Using the HTML Editor<\/h3>\n\n\n\n<p>The HTML can quickly be accessed using the Visual editor interface.  Click on an existing block, then click on the three-vertical dots in the top-right corner of the block.  <\/p>\n\n\n\n<p>This will bring up a pop-up menu.  Click on <strong>Edit as HTML<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"908\" height=\"493\" src=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2019\/08\/code-editor-select-edit-html-block1.png\" class=\"optimized-lcp-image\" alt=\"\" loading=\"eager\" fetchpriority=\"high\" sizes=\"(max-width: 768px) 100vw, 768px\" srcset=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2019\/08\/code-editor-select-edit-html-block1.png 908w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2019\/08\/code-editor-select-edit-html-block1-300x163.png 300w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2019\/08\/code-editor-select-edit-html-block1-768x417.png 768w\"><figcaption><em>Click on the three-dot menu for the block and select <strong>Edit as HTML<\/strong><\/em><\/figcaption><\/figure>\n\n\n\n<p>You will then see the block appear with the equivalent HTML code if there was previously content in it. You can then edit the block using HTML.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"806\" height=\"337\" src=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2019\/08\/code-editor-block-converted-edit-html.png\" alt=\"\" class=\"wp-image-45859\" srcset=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2019\/08\/code-editor-block-converted-edit-html.png 806w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2019\/08\/code-editor-block-converted-edit-html-300x125.png 300w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2019\/08\/code-editor-block-converted-edit-html-768x321.png 768w\" sizes=\"auto, (min-width: 1360px) 876px, (min-width: 960px) calc(61.58vw + 51px), calc(100vw - 80px)\" \/><figcaption><em>Converted to HTML \u2013 edit your content<\/em><\/figcaption><\/figure>\n\n\n\n<p>You should only use the HTML block if you are making simple changes.  If you find yourself getting errors with the applied code, then use the <strong>Custom HTML block<\/strong> instead.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Using the Custom HTML Block<\/h3>\n\n\n\n<p>The other block that you can use is suited for legacy HTML code that may cause errors when used with the previous HTML editing option provided above.  <\/p>\n\n\n\n<p>In the editor, click on the + sign to add a new block. When you add a block, there is an option to search. Click in the search field and type \u201ccustom.\u201d  You will see the <strong>Custom HTML block<\/strong> appear. Click on the block to use it.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"918\" height=\"576\" src=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2019\/08\/code-editor-custom-html-search.png\" alt=\"\" class=\"wp-image-45860\" srcset=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2019\/08\/code-editor-custom-html-search.png 918w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2019\/08\/code-editor-custom-html-search-300x188.png 300w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2019\/08\/code-editor-custom-html-search-768x482.png 768w\" sizes=\"auto, (min-width: 1360px) 876px, (min-width: 960px) calc(61.58vw + 51px), calc(100vw - 80px)\" \/><figcaption><em>Search for <strong>Custom HTML block<\/strong><\/em><\/figcaption><\/figure>\n\n\n\n<p>The <strong>Custom HTML block<\/strong> will appear in the editor.  Paste your HTML code into it.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"890\" height=\"508\" src=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2019\/08\/code-eitor-custom-html-appearance.png\" alt=\"\" class=\"wp-image-45861\" srcset=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2019\/08\/code-eitor-custom-html-appearance.png 890w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2019\/08\/code-eitor-custom-html-appearance-300x171.png 300w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2019\/08\/code-eitor-custom-html-appearance-768x438.png 768w\" sizes=\"auto, (min-width: 1360px) 876px, (min-width: 960px) calc(61.58vw + 51px), calc(100vw - 80px)\" \/><figcaption><em><strong>Custom HTML block<\/strong> added.  Paste your code in where it says \u201cWrite HTML\u2026\u201d<\/em><\/figcaption><\/figure>\n\n\n\n<p class=\"alert alert-info\">Do you need a managed solution for your WordPress site?  InMotion provides 24-hour monitoring and top-notch technical support for all of its <strong><a href=\"https:\/\/www.inmotionhosting.com\/wordpress-hosting\">WordPress Hosting<\/a><\/strong> solutions!<\/p>\n\n\n\n<div style=\"height:44px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"switch-code-editor\">Switching to the Code Editor<\/h2>\n\n\n\n<p>There is one last code editor option that you can select when working with the WordPress editor \u2013 the overall Code Editor for the page.   Using this editor is quick and simple to access.  When you are in the editor click in the top right corner on the three-dot icon.  This will display a pop-up menu.  Click on <strong>Code Editor<\/strong>.  <\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"552\" src=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2019\/08\/code-editor-full-page-1-1024x552.png\" alt=\"\" class=\"wp-image-45862\" srcset=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2019\/08\/code-editor-full-page-1-1024x552.png 1024w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2019\/08\/code-editor-full-page-1-300x162.png 300w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2019\/08\/code-editor-full-page-1-768x414.png 768w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2019\/08\/code-editor-full-page-1.png 1286w\" sizes=\"auto, (min-width: 1360px) 876px, (min-width: 960px) calc(61.58vw + 51px), calc(100vw - 80px)\" \/><figcaption><em>Switch to full page<strong> Code Editor<\/strong><\/em><\/figcaption><\/figure><\/div>\n\n\n\n<p>\nThis will convert the entire page to code.  You will see an option to exit from the code editor in the top right corner of your post or page.\n\n<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"494\" src=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2019\/08\/code-editor-full-page-1024x494.png\" alt=\"\" class=\"wp-image-45863\" srcset=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2019\/08\/code-editor-full-page-1024x494.png 1024w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2019\/08\/code-editor-full-page-300x145.png 300w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2019\/08\/code-editor-full-page-768x370.png 768w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2019\/08\/code-editor-full-page.png 1271w\" sizes=\"auto, (min-width: 1360px) 876px, (min-width: 960px) calc(61.58vw + 51px), calc(100vw - 80px)\" \/><figcaption><em> Page is converted to the <strong>Code Editor<\/strong>.  Exit option is in the top right corner. <\/em><\/figcaption><\/figure>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>Congratulations!  You now know how to access the code editor in WordPress!  <\/p>\n\n\n<p>Learn more about the new WordPress editor, Gutenberg, and the capabilities of the separate Gutenberg plugin with our helpful <a href=\"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/gutenberg\/\">Gutenberg tutorials<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Most people prefer to use the visual tools when composing content within WordPress. There is always an effort to get the WYSIWYG (&#8220;What You See Is What You Get&#8221;) feel for creating content. However, experienced WordPress users often work in code in order to get the results that they want for their posts. People work<a class=\"moretag\" href=\"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/gutenberg\/code-editor-gutenberg-wordpress\/\"> Read More ><\/a><\/p>\n","protected":false},"author":7,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[4427],"tags":[],"class_list":["post-45849","post","type-post","status-publish","format-standard","hentry","category-gutenberg"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.1.1 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Using the Code Editor in WordPress<\/title>\n<meta name=\"description\" content=\"Learn about the different ways to access the code editor in WordPress. Learn how to use code blocks in the Visual editor and access it for the entire page.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/gutenberg\/code-editor-gutenberg-wordpress\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Using the Code Editor in WordPress\" \/>\n<meta property=\"og:description\" content=\"Learn about the different ways to access the code editor in WordPress. Learn how to use code blocks in the Visual editor and access it for the entire page.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/gutenberg\/code-editor-gutenberg-wordpress\/\" \/>\n<meta property=\"og:site_name\" content=\"InMotion Hosting Support Center\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/inmotionhosting\/\" \/>\n<meta property=\"article:published_time\" content=\"2019-08-20T11:59:31+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-08-16T19:59:55+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2019\/08\/code-editor-select-edit-html-block1.png\" \/>\n<meta name=\"author\" content=\"InMotion Hosting Contributor\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@https:\/\/twitter.com\/InMotionHosting\" \/>\n<meta name=\"twitter:site\" content=\"@InMotionHosting\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"InMotion Hosting Contributor\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/gutenberg\/code-editor-gutenberg-wordpress\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/gutenberg\/code-editor-gutenberg-wordpress\/\"},\"author\":{\"name\":\"InMotion Hosting Contributor\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/person\/8d626175dd3b70ee90a172bdb09a460b\"},\"headline\":\"Working with the Code Editor with Gutenberg WordPress\",\"datePublished\":\"2019-08-20T11:59:31+00:00\",\"dateModified\":\"2021-08-16T19:59:55+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/gutenberg\/code-editor-gutenberg-wordpress\/\"},\"wordCount\":662,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/gutenberg\/code-editor-gutenberg-wordpress\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2019\/08\/code-editor-select-edit-html-block1.png\",\"articleSection\":[\"Gutenberg\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/gutenberg\/code-editor-gutenberg-wordpress\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/gutenberg\/code-editor-gutenberg-wordpress\/\",\"url\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/gutenberg\/code-editor-gutenberg-wordpress\/\",\"name\":\"Using the Code Editor in WordPress\",\"isPartOf\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/gutenberg\/code-editor-gutenberg-wordpress\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/gutenberg\/code-editor-gutenberg-wordpress\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2019\/08\/code-editor-select-edit-html-block1.png\",\"datePublished\":\"2019-08-20T11:59:31+00:00\",\"dateModified\":\"2021-08-16T19:59:55+00:00\",\"description\":\"Learn about the different ways to access the code editor in WordPress. Learn how to use code blocks in the Visual editor and access it for the entire page.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/gutenberg\/code-editor-gutenberg-wordpress\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/gutenberg\/code-editor-gutenberg-wordpress\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/gutenberg\/code-editor-gutenberg-wordpress\/#primaryimage\",\"url\":\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2019\/08\/code-editor-select-edit-html-block1.png\",\"contentUrl\":\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2019\/08\/code-editor-select-edit-html-block1.png\",\"width\":908,\"height\":493},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/gutenberg\/code-editor-gutenberg-wordpress\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.inmotionhosting.com\/support\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Working with the Code Editor with Gutenberg WordPress\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#website\",\"url\":\"https:\/\/www.inmotionhosting.com\/support\/\",\"name\":\"InMotion Hosting Support Center\",\"description\":\"Web Hosting Support &amp; Tutorials\",\"publisher\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.inmotionhosting.com\/support\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#organization\",\"name\":\"InMotion Hosting\",\"url\":\"https:\/\/www.inmotionhosting.com\/support\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2023\/02\/inmotion-hosting-logo-yoast.jpg\",\"contentUrl\":\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2023\/02\/inmotion-hosting-logo-yoast.jpg\",\"width\":696,\"height\":696,\"caption\":\"InMotion Hosting\"},\"image\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/inmotionhosting\/\",\"https:\/\/x.com\/InMotionHosting\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/person\/8d626175dd3b70ee90a172bdb09a460b\",\"name\":\"InMotion Hosting Contributor\",\"description\":\"InMotion Hosting contributors are highly knowledgeable individuals who create relevant content on new trends and troubleshooting techniques to help you achieve your online goals!\",\"sameAs\":[\"https:\/\/www.linkedin.com\/company\/inmotion-hosting\/\",\"https:\/\/x.com\/https:\/\/twitter.com\/InMotionHosting\"],\"url\":\"https:\/\/www.inmotionhosting.com\/support\/author\/arn\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Using the Code Editor in WordPress","description":"Learn about the different ways to access the code editor in WordPress. Learn how to use code blocks in the Visual editor and access it for the entire page.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/gutenberg\/code-editor-gutenberg-wordpress\/","og_locale":"en_US","og_type":"article","og_title":"Using the Code Editor in WordPress","og_description":"Learn about the different ways to access the code editor in WordPress. Learn how to use code blocks in the Visual editor and access it for the entire page.","og_url":"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/gutenberg\/code-editor-gutenberg-wordpress\/","og_site_name":"InMotion Hosting Support Center","article_publisher":"https:\/\/www.facebook.com\/inmotionhosting\/","article_published_time":"2019-08-20T11:59:31+00:00","article_modified_time":"2021-08-16T19:59:55+00:00","og_image":[{"url":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2019\/08\/code-editor-select-edit-html-block1.png","type":"","width":"","height":""}],"author":"InMotion Hosting Contributor","twitter_card":"summary_large_image","twitter_creator":"@https:\/\/twitter.com\/InMotionHosting","twitter_site":"@InMotionHosting","twitter_misc":{"Written by":"InMotion Hosting Contributor","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/gutenberg\/code-editor-gutenberg-wordpress\/#article","isPartOf":{"@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/gutenberg\/code-editor-gutenberg-wordpress\/"},"author":{"name":"InMotion Hosting Contributor","@id":"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/person\/8d626175dd3b70ee90a172bdb09a460b"},"headline":"Working with the Code Editor with Gutenberg WordPress","datePublished":"2019-08-20T11:59:31+00:00","dateModified":"2021-08-16T19:59:55+00:00","mainEntityOfPage":{"@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/gutenberg\/code-editor-gutenberg-wordpress\/"},"wordCount":662,"commentCount":0,"publisher":{"@id":"https:\/\/www.inmotionhosting.com\/support\/#organization"},"image":{"@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/gutenberg\/code-editor-gutenberg-wordpress\/#primaryimage"},"thumbnailUrl":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2019\/08\/code-editor-select-edit-html-block1.png","articleSection":["Gutenberg"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/gutenberg\/code-editor-gutenberg-wordpress\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/gutenberg\/code-editor-gutenberg-wordpress\/","url":"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/gutenberg\/code-editor-gutenberg-wordpress\/","name":"Using the Code Editor in WordPress","isPartOf":{"@id":"https:\/\/www.inmotionhosting.com\/support\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/gutenberg\/code-editor-gutenberg-wordpress\/#primaryimage"},"image":{"@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/gutenberg\/code-editor-gutenberg-wordpress\/#primaryimage"},"thumbnailUrl":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2019\/08\/code-editor-select-edit-html-block1.png","datePublished":"2019-08-20T11:59:31+00:00","dateModified":"2021-08-16T19:59:55+00:00","description":"Learn about the different ways to access the code editor in WordPress. Learn how to use code blocks in the Visual editor and access it for the entire page.","breadcrumb":{"@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/gutenberg\/code-editor-gutenberg-wordpress\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/gutenberg\/code-editor-gutenberg-wordpress\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/gutenberg\/code-editor-gutenberg-wordpress\/#primaryimage","url":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2019\/08\/code-editor-select-edit-html-block1.png","contentUrl":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2019\/08\/code-editor-select-edit-html-block1.png","width":908,"height":493},{"@type":"BreadcrumbList","@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/wordpress\/gutenberg\/code-editor-gutenberg-wordpress\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.inmotionhosting.com\/support\/"},{"@type":"ListItem","position":2,"name":"Working with the Code Editor with Gutenberg WordPress"}]},{"@type":"WebSite","@id":"https:\/\/www.inmotionhosting.com\/support\/#website","url":"https:\/\/www.inmotionhosting.com\/support\/","name":"InMotion Hosting Support Center","description":"Web Hosting Support &amp; Tutorials","publisher":{"@id":"https:\/\/www.inmotionhosting.com\/support\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.inmotionhosting.com\/support\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.inmotionhosting.com\/support\/#organization","name":"InMotion Hosting","url":"https:\/\/www.inmotionhosting.com\/support\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/logo\/image\/","url":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2023\/02\/inmotion-hosting-logo-yoast.jpg","contentUrl":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2023\/02\/inmotion-hosting-logo-yoast.jpg","width":696,"height":696,"caption":"InMotion Hosting"},"image":{"@id":"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/inmotionhosting\/","https:\/\/x.com\/InMotionHosting"]},{"@type":"Person","@id":"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/person\/8d626175dd3b70ee90a172bdb09a460b","name":"InMotion Hosting Contributor","description":"InMotion Hosting contributors are highly knowledgeable individuals who create relevant content on new trends and troubleshooting techniques to help you achieve your online goals!","sameAs":["https:\/\/www.linkedin.com\/company\/inmotion-hosting\/","https:\/\/x.com\/https:\/\/twitter.com\/InMotionHosting"],"url":"https:\/\/www.inmotionhosting.com\/support\/author\/arn\/"}]}},"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"primary_category":null,"_links":{"self":[{"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/posts\/45849","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/users\/7"}],"replies":[{"embeddable":true,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/comments?post=45849"}],"version-history":[{"count":14,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/posts\/45849\/revisions"}],"predecessor-version":[{"id":83282,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/posts\/45849\/revisions\/83282"}],"wp:attachment":[{"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/media?parent=45849"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/categories?post=45849"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/tags?post=45849"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}