{"id":6051,"date":"2018-11-13T13:16:40","date_gmt":"2018-11-13T18:16:40","guid":{"rendered":"https:\/\/www.pair.com\/support\/kb\/?post_type=ht_kb&p=6051"},"modified":"2021-11-04T11:21:22","modified_gmt":"2021-11-04T15:21:22","slug":"gutenberg-editor-how-to-access-the-code-editor","status":"publish","type":"ht_kb","link":"https:\/\/www.pair.com\/support\/kb\/gutenberg-editor-how-to-access-the-code-editor\/","title":{"rendered":"Block Editor: How to Open Your Post’s Code Editor"},"content":{"rendered":"

WP Enthusiast<\/p><\/a>

WP Professional<\/p><\/a>

WP Professional Plus<\/p><\/a>

PairSIM WordPress<\/p><\/a>

Podcast Websites<\/p><\/a><\/span><\/p>\n

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\u2019s code directly.<\/span><\/p>\n \t\t

\r\n \t\t\t \t\t\t \t\t\t\t

\r\n \t\t\t\t\tMake sure you are using the <\/span>Gutenberg Block editor<\/span><\/a>. If you upgraded to <\/span>WordPress 5<\/span><\/a>, 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 <\/span>Classic Editor<\/span><\/a> installed, then your editor will not work with this tutorial.<\/span> \t\t\t\t<\/p>\r\n \t\t\t \t\t\t\r\n \t\t<\/div>\r\n \t\t\n

Switching Between the Visual and Code Editor with Shortcuts<\/h3>\n

Want a super quick way to switch between the visual and code editor? If so, you can use these WordPress shortcuts.<\/p>\n\n\n\n\n
Mac<\/span><\/td>\nCommand<\/kbd> + Option<\/kbd> + Shift<\/kbd> + m<\/kbd><\/span><\/td>\n<\/tr>\n
Windows<\/span><\/td>\nCtrl<\/kbd> + Shift<\/kbd> + Alt<\/kbd> + m<\/kbd><\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

Opening Your Post's Code Editor Manually<\/h3>\n

If you prefer not to use WordPress shortcuts, you can open the code editor manually in the block editor by following these these steps:<\/span><\/p>\n

    \n
  1. Open the post editor<\/span><\/li>\n
  2. To the right in the top navigation bar, click the three dots\"three<\/a><\/span><\/li>\n
  3. In the drop-down, click <\/span>Code Editor\"code<\/a><\/b><\/li>\n<\/ol>\n

    This will switch the editor to the code view.\"code<\/a> <\/span><\/p>\n

    In order to switch back to the visual view, go to the top of the page and click the\u00a0Exit code editor<\/strong> button.\u00a0<\/span><\/p>\n

    Editing A Single Block as HTML<\/h3>\n

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

      \n
    1. Open the post editor<\/li>\n
    2. Click on the block you would like to edit in HTML<\/li>\n
    3. In the block's tool bar, click the button with three dots\"three<\/a><\/li>\n
    4. In the drop-down, click the\u00a0Edit as HTML<\/strong> button\"edit<\/a><\/li>\n<\/ol>\n

      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\u00a0Edit Visually\u00a0<\/strong>button.<\/p>\n","protected":false},"excerpt":{"rendered":"

      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\u2019s code directly. Switching Between the Visual and Code Editor with Shortcuts Want a super quick way to switch between the visual and code editor? If…<\/p>\n","protected":false},"author":11,"comment_status":"closed","ping_status":"closed","template":"","format":"standard","meta":[],"ht-kb-category":[197],"ht-kb-tag":[198,205],"yoast_head":"\nBlock Editor: How to Open Your Post's Code Editor - Knowledge Base - Pair Networks<\/title>\n<meta name=\"description\" content=\"In the Gutenberg Editor, you can switch your post from the visual view to the code view. This allows you to edit the post\u2019s code directly.\" \/>\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.pair.com\/support\/kb\/gutenberg-editor-how-to-access-the-code-editor\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Block Editor: How to Open Your Post's Code Editor - Knowledge Base - Pair Networks\" \/>\n<meta property=\"og:description\" content=\"In the Gutenberg Editor, you can switch your post from the visual view to the code view. This allows you to edit the post\u2019s code directly.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.pair.com\/support\/kb\/gutenberg-editor-how-to-access-the-code-editor\/\" \/>\n<meta property=\"og:site_name\" content=\"Knowledge Base - Pair Networks\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/pairnetworks\/\" \/>\n<meta property=\"article:modified_time\" content=\"2021-11-04T15:21:22+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.pair.com\/support\/kb\/wp-content\/uploads\/2020\/09\/2-1.png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:site\" content=\"@pairNetworks\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.pair.com\/support\/kb\/gutenberg-editor-how-to-access-the-code-editor\/\",\"url\":\"https:\/\/www.pair.com\/support\/kb\/gutenberg-editor-how-to-access-the-code-editor\/\",\"name\":\"Block Editor: How to Open Your Post's Code Editor - Knowledge Base - Pair Networks\",\"isPartOf\":{\"@id\":\"https:\/\/www.pair.com\/support\/kb\/#website\"},\"datePublished\":\"2018-11-13T18:16:40+00:00\",\"dateModified\":\"2021-11-04T15:21:22+00:00\",\"description\":\"In the Gutenberg Editor, you can switch your post from the visual view to the code view. This allows you to edit the post\u2019s code directly.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.pair.com\/support\/kb\/gutenberg-editor-how-to-access-the-code-editor\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.pair.com\/support\/kb\/gutenberg-editor-how-to-access-the-code-editor\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.pair.com\/support\/kb\/gutenberg-editor-how-to-access-the-code-editor\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.pair.com\/support\/kb\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Block Editor: How to Open Your Post’s Code Editor\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.pair.com\/support\/kb\/#website\",\"url\":\"https:\/\/www.pair.com\/support\/kb\/\",\"name\":\"Knowledge Base - Pair Networks\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/www.pair.com\/support\/kb\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.pair.com\/support\/kb\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.pair.com\/support\/kb\/#organization\",\"name\":\"Pair Networks\",\"url\":\"https:\/\/www.pair.com\/support\/kb\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.pair.com\/support\/kb\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.pair.com\/support\/kb\/wp-content\/uploads\/2022\/02\/Gb_TUkUE_400x400.jpeg\",\"contentUrl\":\"https:\/\/www.pair.com\/support\/kb\/wp-content\/uploads\/2022\/02\/Gb_TUkUE_400x400.jpeg\",\"width\":360,\"height\":360,\"caption\":\"Pair Networks\"},\"image\":{\"@id\":\"https:\/\/www.pair.com\/support\/kb\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/pairnetworks\/\",\"https:\/\/twitter.com\/pairNetworks\",\"https:\/\/www.instagram.com\/pairnetworks\/\",\"https:\/\/www.linkedin.com\/company\/2269676\/\",\"https:\/\/www.pinterest.com\/pairnetworksinc\/pins\/\",\"https:\/\/www.youtube.com\/user\/pairnetworks\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Block Editor: How to Open Your Post's Code Editor - Knowledge Base - Pair Networks","description":"In the Gutenberg Editor, you can switch your post from the visual view to the code view. This allows you to edit the post\u2019s code directly.","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.pair.com\/support\/kb\/gutenberg-editor-how-to-access-the-code-editor\/","og_locale":"en_US","og_type":"article","og_title":"Block Editor: How to Open Your Post's Code Editor - Knowledge Base - Pair Networks","og_description":"In the Gutenberg Editor, you can switch your post from the visual view to the code view. This allows you to edit the post\u2019s code directly.","og_url":"https:\/\/www.pair.com\/support\/kb\/gutenberg-editor-how-to-access-the-code-editor\/","og_site_name":"Knowledge Base - Pair Networks","article_publisher":"https:\/\/www.facebook.com\/pairnetworks\/","article_modified_time":"2021-11-04T15:21:22+00:00","og_image":[{"url":"https:\/\/www.pair.com\/support\/kb\/wp-content\/uploads\/2020\/09\/2-1.png"}],"twitter_card":"summary_large_image","twitter_site":"@pairNetworks","twitter_misc":{"Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.pair.com\/support\/kb\/gutenberg-editor-how-to-access-the-code-editor\/","url":"https:\/\/www.pair.com\/support\/kb\/gutenberg-editor-how-to-access-the-code-editor\/","name":"Block Editor: How to Open Your Post's Code Editor - Knowledge Base - Pair Networks","isPartOf":{"@id":"https:\/\/www.pair.com\/support\/kb\/#website"},"datePublished":"2018-11-13T18:16:40+00:00","dateModified":"2021-11-04T15:21:22+00:00","description":"In the Gutenberg Editor, you can switch your post from the visual view to the code view. This allows you to edit the post\u2019s code directly.","breadcrumb":{"@id":"https:\/\/www.pair.com\/support\/kb\/gutenberg-editor-how-to-access-the-code-editor\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.pair.com\/support\/kb\/gutenberg-editor-how-to-access-the-code-editor\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.pair.com\/support\/kb\/gutenberg-editor-how-to-access-the-code-editor\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.pair.com\/support\/kb\/"},{"@type":"ListItem","position":2,"name":"Block Editor: How to Open Your Post’s Code Editor"}]},{"@type":"WebSite","@id":"https:\/\/www.pair.com\/support\/kb\/#website","url":"https:\/\/www.pair.com\/support\/kb\/","name":"Knowledge Base - Pair Networks","description":"","publisher":{"@id":"https:\/\/www.pair.com\/support\/kb\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.pair.com\/support\/kb\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.pair.com\/support\/kb\/#organization","name":"Pair Networks","url":"https:\/\/www.pair.com\/support\/kb\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.pair.com\/support\/kb\/#\/schema\/logo\/image\/","url":"https:\/\/www.pair.com\/support\/kb\/wp-content\/uploads\/2022\/02\/Gb_TUkUE_400x400.jpeg","contentUrl":"https:\/\/www.pair.com\/support\/kb\/wp-content\/uploads\/2022\/02\/Gb_TUkUE_400x400.jpeg","width":360,"height":360,"caption":"Pair Networks"},"image":{"@id":"https:\/\/www.pair.com\/support\/kb\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/pairnetworks\/","https:\/\/twitter.com\/pairNetworks","https:\/\/www.instagram.com\/pairnetworks\/","https:\/\/www.linkedin.com\/company\/2269676\/","https:\/\/www.pinterest.com\/pairnetworksinc\/pins\/","https:\/\/www.youtube.com\/user\/pairnetworks"]}]}},"_links":{"self":[{"href":"https:\/\/www.pair.com\/support\/kb\/wp-json\/wp\/v2\/ht-kb\/6051"}],"collection":[{"href":"https:\/\/www.pair.com\/support\/kb\/wp-json\/wp\/v2\/ht-kb"}],"about":[{"href":"https:\/\/www.pair.com\/support\/kb\/wp-json\/wp\/v2\/types\/ht_kb"}],"author":[{"embeddable":true,"href":"https:\/\/www.pair.com\/support\/kb\/wp-json\/wp\/v2\/users\/11"}],"replies":[{"embeddable":true,"href":"https:\/\/www.pair.com\/support\/kb\/wp-json\/wp\/v2\/comments?post=6051"}],"version-history":[{"count":11,"href":"https:\/\/www.pair.com\/support\/kb\/wp-json\/wp\/v2\/ht-kb\/6051\/revisions"}],"predecessor-version":[{"id":8131,"href":"https:\/\/www.pair.com\/support\/kb\/wp-json\/wp\/v2\/ht-kb\/6051\/revisions\/8131"}],"wp:attachment":[{"href":"https:\/\/www.pair.com\/support\/kb\/wp-json\/wp\/v2\/media?parent=6051"}],"wp:term":[{"taxonomy":"ht_kb_category","embeddable":true,"href":"https:\/\/www.pair.com\/support\/kb\/wp-json\/wp\/v2\/ht-kb-category?post=6051"},{"taxonomy":"ht_kb_tag","embeddable":true,"href":"https:\/\/www.pair.com\/support\/kb\/wp-json\/wp\/v2\/ht-kb-tag?post=6051"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}