{"id":3498,"date":"2020-01-06T13:05:18","date_gmt":"2020-01-06T02:05:18","guid":{"rendered":"https:\/\/wpdevdesign.wpengine.com\/?p=3498"},"modified":"2020-01-06T13:17:33","modified_gmt":"2020-01-06T02:17:33","slug":"hide-oxygen-elements-inside-gutenberg-editor","status":"publish","type":"post","link":"https:\/\/wpdevdesign.com\/hide-oxygen-elements-inside-gutenberg-editor\/","title":{"rendered":"How to Hide Oxygen Elements inside Gutenberg"},"content":{"rendered":"\n

There’s a number of reasons why we may want to hide some elements on a page when making the page ‘editable in Gutenberg’. Here’s how to do it…<\/p>\n\n\n\n

\"\"
fixed element overlapping SEO metabox<\/figcaption><\/figure>\n\n\n\n

A common reason for wanting to hide elements are when the elements are fixed. They can cover some of the content and the meta boxes below Gutenberg, making it difficult for content editors to access some of the settings.<\/p>\n\n\n\n

Another reason might be that some of the blocks are dynamic and don’t need to be edited inside Gutenberg, so we may wish to hide them.<\/p>\n\n\n\n

Simple Solution with CSS<\/h2>\n\n\n\n

We can target just the elements that we want to remove by giving them all the same class, say, ‘hide-in-editor’ and then adding this CSS to a stylesheet inside Oxygen.<\/p>\n\n\n\n

.hide-in-editor.oxygenberg-element {\n    display: none;\n}<\/code><\/pre>\n\n\n\n
All done<\/h2>\n\n\n\n
These elements will still be visible when viewing inside Oxygen’s builder and will remain on the front end of the site, they just won’t be visible inside the Gutenberg block editor.<\/p>\n","protected":false},"excerpt":{"rendered":"
There’s a number of reasons why we may want to hide some elements on a page when making the page ‘editable in Gutenberg’. Here’s how to do it… A common reason for wanting to hide elements are when the elements are fixed. They can cover some of the content and the meta boxes below Gutenberg, …<\/p>\n","protected":false},"author":551,"featured_media":3503,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_seopress_robots_primary_cat":"","_seopress_titles_title":"","_seopress_titles_desc":"","_seopress_robots_index":"","sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"footnotes":""},"categories":[63,64],"tags":[238],"class_list":["post-3498","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-free-content","category-oxygen","tag-gutenberg"],"acf":[],"featured_image_src":"https:\/\/wpdevdesign.com\/wp-content\/uploads\/2020\/01\/hide-elements-in-gutenberg.jpg","featured_image_src_square":"https:\/\/wpdevdesign.com\/wp-content\/uploads\/2020\/01\/hide-elements-in-gutenberg.jpg","author_info":{"display_name":"David Browne","author_link":"https:\/\/wpdevdesign.com\/author\/davidbrowne\/"},"_links":{"self":[{"href":"https:\/\/wpdevdesign.com\/wp-json\/wp\/v2\/posts\/3498","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wpdevdesign.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wpdevdesign.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wpdevdesign.com\/wp-json\/wp\/v2\/users\/551"}],"replies":[{"embeddable":true,"href":"https:\/\/wpdevdesign.com\/wp-json\/wp\/v2\/comments?post=3498"}],"version-history":[{"count":0,"href":"https:\/\/wpdevdesign.com\/wp-json\/wp\/v2\/posts\/3498\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wpdevdesign.com\/wp-json\/wp\/v2\/media\/3503"}],"wp:attachment":[{"href":"https:\/\/wpdevdesign.com\/wp-json\/wp\/v2\/media?parent=3498"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wpdevdesign.com\/wp-json\/wp\/v2\/categories?post=3498"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wpdevdesign.com\/wp-json\/wp\/v2\/tags?post=3498"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}