Disable the Code View in the content editor?

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' );
} );

Leave a Comment