{"id":5726,"date":"2019-11-08T09:11:27","date_gmt":"2019-11-08T08:11:27","guid":{"rendered":"https:\/\/florianbrinkmann.com\/en\/?p=5726"},"modified":"2020-02-09T11:05:58","modified_gmt":"2020-02-09T10:05:58","slug":"remove-panels-from-the-block-editor-sidebar","status":"publish","type":"post","link":"https:\/\/florianbrinkmann.com\/en\/remove-panels-from-the-block-editor-sidebar-5726\/","title":{"rendered":"Remove panels from the block editor sidebar"},"content":{"rendered":"\n<p>The document sidebar of the block editor contains various panels, for example, one for the featured image and, for posts, one for tags. If specific panels are not used, it could be useful to hide them, to make the sidebar clearer. This post shows you how to do this.<\/p>\n\n\n\n<!--more Read more-->\n\n\n\n<p>Each sidebar panel has its identifier, which we need to remove them. We find those IDs in the <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/\">Gutenberg GitHub repo<\/a>, more specific in the <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/tree\/master\/packages\/edit-post\/src\/components\/sidebar\">directory with the code for the default panels<\/a>.<\/p>\n\n\n\n<p>In the <code class=\"lang-js\">featured-image\/index.js<\/code>, for example, you can find the following line of code:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-1\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\"><span class=\"hljs-keyword\">const<\/span> PANEL_NAME = <span class=\"hljs-string\">'featured-image'<\/span>;<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-1\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p><code class=\"lang-js\">featured-image<\/code> is the ID we need. The editor comes with the <code class=\"lang-js\">removeEditorPanel<\/code> function, which accepts a panel ID as its parameter, to hide the panel.<\/p>\n\n\n\n<p>The following code shows that for the featured image panel:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-2\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\">wp.domReady( <span class=\"hljs-function\"><span class=\"hljs-params\">()<\/span> =&gt;<\/span> {\n\t<span class=\"hljs-keyword\">const<\/span> { removeEditorPanel } = wp.data.dispatch(<span class=\"hljs-string\">'core\/edit-post'<\/span>);\n\n\t<span class=\"hljs-comment\">\/\/ Remove featured image panel from sidebar.<\/span>\n\tremoveEditorPanel( <span class=\"hljs-string\">'featured-image'<\/span> );\n} );<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-2\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>With that, the featured image panel should no longer exist. You could also hide panels just for specific post types, by using the <a href=\"https:\/\/florianbrinkmann.com\/en\/get-post-type-in-block-editor-5690\/\">check for post types in the editor<\/a>.<\/p>\n\n\n\n<p>I wrote two posts in German for <a href=\"https:\/\/krautpress.de\/\">KrautPress<\/a> which help to get started with development for the block editor. One about <a href=\"https:\/\/krautpress.de\/2019\/einrichtung-von-webpack-fuer-die-gutenberg-entwicklung\/\">setting up webpack for development<\/a> and the other one about <a href=\"https:\/\/krautpress.de\/2019\/alternativen-stil-fuer-gutenberg-block-erstellen\/\">creating a block style<\/a>. Maybe they are helpful if you never wrote code for the block editor.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>The document sidebar of the block editor contains various panels, for example, one for the featured image and, for posts, one for tags. If specific panels are not used, it could be useful to hide them, to make the sidebar clearer. This post shows you how to do this.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"wpf_show_in_dewp_planet_feed":false,"flobn_post_versions":"","webmentions_disabled_pings":false,"webmentions_disabled":false,"lazy_load_responsive_images_disabled":false,"footnotes":""},"categories":[115],"tags":[],"class_list":["post-5726","post","type-post","status-publish","format-standard","hentry","category-wordpress-snippets"],"wp-worthy-pixel":{"ignored":false,"public":null,"server":null,"url":null},"wp-worthy-type":"normal","_links":{"self":[{"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/posts\/5726","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/comments?post=5726"}],"version-history":[{"count":5,"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/posts\/5726\/revisions"}],"predecessor-version":[{"id":5949,"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/posts\/5726\/revisions\/5949"}],"wp:attachment":[{"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/media?parent=5726"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/categories?post=5726"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/tags?post=5726"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}