Is there a way to disable JUST the Code editor view in the content editor?

I have a bunch of clients who fancy themselves developers and keep messing up their own pages because they really have no idea what they're doing. They manage their own content so I can't shut down their editing capabilities entirely, but that's all I can find functions for (that and Google is still overrun with articles about disabling Gutenberg every time you use "WordPress" and "disable" as keywords in the same search).

I just don't want them to have the option at all to use anything but the Visual Editor.

Thanks!

Is there a way to disable JUST the Code editor view in the content editor?

I have a bunch of clients who fancy themselves developers and keep messing up their own pages because they really have no idea what they're doing. They manage their own content so I can't shut down their editing capabilities entirely, but that's all I can find functions for (that and Google is still overrun with articles about disabling Gutenberg every time you use "WordPress" and "disable" as keywords in the same search).

I just don't want them to have the option at all to use anything but the Visual Editor.

Thanks!

• editor
• html-editor

Share Improve this question asked Oct 4, 2019 at 18:17 VanderbeamVanderbeam 8111 silver badge66 bronze badges 3

• Looks like this answer will do the trick. If not try searching for 'disable text editor'. – Dave Romsey Commented Oct 4, 2019 at 18:36
• 1 @DaveRomsey I appreciate this, but it looks like it doesn't work with the Gutenberg editor. And that's where I keep getting hung up and frustrated in my search because it seems like no matter what variation I Google, I'm just inundated with articles about disabling Gutenberg (and I've even ventured several pages in to search results) – Vanderbeam Commented Oct 4, 2019 at 18:41
• Ah, yep that's not going to work. – Dave Romsey Commented Oct 4, 2019 at 18:48

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 3

You can do it in JavaScript, though the downside is you have to do it block by block.

You'll need webpack set up with lodash installed:

function removeHtmlEditing( settings, name ) {
    return lodash.assign( {}, settings, {
        supports: lodash.assign( {}, settings.supports, {
            html: false
        } ),
    } );
}

wp.hooks.addFilter(
    'blocks.registerBlockType',
    'core/paragraph',
    removeHtmlEditing
);

There's not a lot of documentation on wp.hooks.addFilter(). I tried passing in an array of blocks, an empty string, and an asterisk, and it wouldn't work - it seems to require a single block name including namespace. So you would have to add a filter every block that could be on the site, though at least the removeHtmlEditing() function would work for them all.

There also doesn't seem to be a way to just display:none the "Edit as HTML" button with CSS, because there is no specific CSS class, aria-label, or data-attribute to determine which button you're targeting.

This changes the html "supports" setting to false, which prevents the "Edit as HTML" button from ever appearing. However, if a block gets corrupted, they would still be able to enter HTML. You might also want to disable the Custom HTML block entirely if that's another place they're adding bad code. Once again you'll need webpack and you'll need "wp-blocks", "wp-dom-ready", and "wp-edit-post" as dependencies when you enqueue the JS:

wp.domReady( function() {
    wp.blocks.unregisterBlockType( 'core/html' );
} );

What about a different approach, which might be to give your clients front-end editing access only, possibly using a plugin such as Front End Editor (free, see link) or Editus (not free but more robust and has a developer/unlimited sites option). You can then add some code to your functions to redirect all non-admins to the front-end editor (or, assuming some of your clients have admin-level access, any users but yourself to the front-end editor). I do this type of redirect away from the back-end for all users of a certain class I have setup so if you need a code snippet on how to do that just ask.

Front End Editor:

https://wordpress/plugins/wp-front-end-editor/

Editus:

https://edituswp

By redirecting them to a front-end editor you can keep them away from messing up scripts or any necessary HTML or adding scripts. If they want to add scripts, turn them into shortcodes and let them use those.

Good luck, I know how frustrating it can be with clients such as yours!