Toggle Gutenberg preferences by user role

Question

I'm looking for a way to hide some of the Page setting panels in the Gutenberg editor sidebar based on user role. Since there's no specific class for those panel headers I can't target them with CSS, so I was wondering if there's a way to at least control which panels are active in the Preferences:

Does anyone know if there's a hook or something I can use to conditionally pre-set these toggles based on user role?

Many thanks.

Answer 1

I've got something working on WordPress 5.9 (didn't test on earlier versions).

Include the JS from a plugin/theme

add_action( 'enqueue_block_editor_assets', [ __CLASS__, 'so67286587EnqueueGutenbergEditorAssets' ] );

function so67286587EnqueueGutenbergEditorAssets() {
  wp_enqueue_script( 'so67286587-gutenberg', plugins_url( '/js/gutenberg.jsx.js', __FILE__ ), [ 'wp-edit-post' ] );
}

Here is the JS that does the trick. I simply check wether some features are checked/unchecked and toggle them.

// force enabling those settings
['reducedUI', 'keepCaretInsideBlock', 'showBlockBreadcrumbs', 'focusMode', 'themeStyles'].forEach(mustBeEnabled => {
    if (!wp.data.select('core/edit-post').isFeatureActive(mustBeEnabled)) {
        wp.data.dispatch('core/edit-post').toggleFeature(mustBeEnabled);
    }
});

// force disabling those settings
['fullscreenMode', 'fixedToolbar', 'welcomeGuide', 'showIconLabels', 'mostUsedBlocks'].forEach(mustBeDisabled => {
    if (wp.data.select('core/edit-post').isFeatureActive(mustBeDisabled)) {
        wp.data.dispatch('core/edit-post').toggleFeature(mustBeDisabled);
    }
});

This JSX file has been compiled with @wordpress/scripts