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…

fixed element overlapping SEO metabox

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.

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.

Simple Solution with CSS

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.

.hide-in-editor.oxygenberg-element {
    display: none;
}

All done

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.

Need help implementing a tutorial in your site or want to hire me for custom work?

HIRE ME

Find the article helpful and wish to donate?

DONATE

Comments

For adding code blocks wrap the code in three backticks. Markdown should work.
Provide a URL of your site/webpage if something is not working.
magnifiercross
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram
%d bloggers like this: