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\n\n\n\n
Each sidebar panel has its identifier, which we need to remove them. We find those IDs in the Gutenberg GitHub repo<\/a>, more specific in the directory with the code for the default panels<\/a>.<\/p>\n\n\n\n In the The following code shows that for the featured image panel:<\/p>\n\n\n With that, the featured image panel should no longer exist. You could also hide panels just for specific post types, by using the check for post types in the editor<\/a>.<\/p>\n\n\n\n I wrote two posts in German for KrautPress<\/a> which help to get started with development for the block editor. One about setting up webpack for development<\/a> and the other one about creating a block style<\/a>. Maybe they are helpful if you never wrote code for the block editor.<\/p>\n","protected":false},"excerpt":{"rendered":" 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":{"footnotes":"","wpf_show_in_dewp_planet_feed":false,"flobn_post_versions":"","lazy_load_responsive_images_disabled":false},"categories":[115],"tags":[],"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"}],"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}]}}featured-image\/index.js<\/code>, for example, you can find the following line of code:<\/p>\n\n\nconst<\/span> PANEL_NAME = 'featured-image'<\/span>;<\/code><\/div>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\nfeatured-image<\/code> is the ID we need. The editor comes with the removeEditorPanel<\/code> function, which accepts a panel ID as its parameter, to hide the panel.<\/p>\n\n\n\nwp.domReady( ()<\/span> =><\/span> {\n\tconst<\/span> { removeEditorPanel } = wp.data.dispatch('core\/edit-post'<\/span>);\n\n\t\/\/ Remove featured image panel from sidebar.<\/span>\n\tremoveEditorPanel( 'featured-image'<\/span> );\n} );<\/code><\/div>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n