6

Is there any way to hide specific Gutenberg block settings from users?

For example: "Crop Images", "Link To", and "Additional CSS Class"

enter image description here

  • One thing comes to mind right away, but it's kind of hacky way of doing things, so I'm leaving it as a comment. You can hook CSS to 'enqueue_block_editor_assets' and in the styles, you can hide pretty much everything with display: none;. This can be a solution until you figure a solid way to handle the issue. Another thing that might work but I don't have time to research is the remove_meta_box() function. I think that will give you something to look into or some ideas to the people with more time for a complete in-depth answer. Cheers! – Valentin Genev Mar 19 at 22:52
  • 1
    Thanks @ValentinGenev for your support, Yeah I tried to find some way to hide them by using CSS but all Gutenberg field came with the same id name..btw I'll re-searching about remove_meta_box() Thanks so much. – Adham Mohamed Mar 20 at 5:43
  • Ah you're right! That's a bummer... New plan, but it gets even hackier. To the mentioned action enqueue_block_editor_assets hook a script too. Get the editor-block-styles__item-label inner text, check if it matches the one you want to hide, and then add a class to the card that hides whatever you want. The last step is to write a MutationObserver to look for changes and toggle the class that hides the card. Last-last step should be to ask for card specific classes for the block editor from the Gutenberg team... – Valentin Genev Mar 20 at 18:23
0

As far as I know, as of right now there isn't a built-in way of removing unwanted inspector controls.

You can read THIS POST, but the gist is that there are proposed solutions out there and devs are aware but they have bigger fish to fry atm, apparently.

With that said, I guess you are left with 2 options.

1 - Copy the block in question and remake it without the options

This could be difficult, especially if you don't have any JS and/or block editor dev experience.

2 - Use some crazy CSS selector to add display:none to the options

This is probably easier but you still have to figure out the right CSS selector, which is difficult due to no IDs or classes on the option elements.

Neither of these solutions are great but I think thats what we have, for now...

  • Thanks @RiddleMeThis for your answer, I read the post you attached above, But i don't know where can i insert this code let controls = {///} , and when i added function removeGalleryControls( controls, block ) {} in theme function I got error on the comma between ( control , block )! Should i adding let control within javascript or on my theme function.php? Gutenberg is so complicated to me :( – Adham Mohamed Mar 21 at 9:47

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.