Disable "Code Editor" for roles, e.g. Authors

Question

I was asked to disable the "Code Editor" and the "Edit as HTML" function in the WordPress Gutenberg editor.

Unfortunately I am not able to find any solution on Google (thanks, Classic Editor posts...) or in the wp.org Developer Reference.

My first attempt was to filter the Code Editor menu entry with wp_default_editor, but the possible arguments does not seem to fit for WP version 5.*

Any ideas for one of both cases?

What do you mean by the Code Editor? Do you mean the Code Block? — WebElaine

WebElaine WebElaine · Accepted Answer · 2019-04-16T21:11:39

To disable the "Edit as HTML" option for all blocks on a site, you'll need to set up Webpack and all that fun sort of thing. You can use Create Guten Block to get the project going if you don't want to set it all up yourself.

Then, in your block.js file (or whatever custom JS file you're setting up for the editor), you'll just need a few lines of code. Use the registerBlockType filter to change all the blocks right as they're registered, and that will allow you to disable "Edit as HTML" as well as other features (such as custom class name) as desired.

// Use WP Hooks
const { addFilter } = wp.hooks;
// Create the filter
addFilter(
    "blocks.registerBlockType", // Using the registerBlockType hook
    "cgb/change-core-blocks", // Custom namespace, slash, name for your filter
    changeCoreBlocks // The name of your custom function
);
function changeCoreBlocks( settings, name ) {
    // This will fire for all blocks - from Core, plugins, and themes
    settings.supports = Object.assign({}, settings.supports, {
        // Setting "html" to false disables the "Edit as HTML" functionality
        html: false
    });
}

There is probably a way to do this in older JavaScript that wouldn't require you to set up Webpack or use Create Guten Block, which seem rather complicated to run this simple filter.

Disable "Code Editor" for roles, e.g. Authors

1 Answers