How can I display customizer's "Additional CSS" to administrators and editors (in multisite)?

Question

In my multi-site WordPress, administrators and editors don't see the Additional CSS section in the customizer. I would like them to have access to that panel. Only super-admins can see the additional CSS panel currently.

I've tried adding the following capabilities to the editor role:

• 'edit_css'
• 'customize_css'
• 'unfiltered_html'
• 'switch_themes'
• 'create_patterns'
• 'update_themes'
• 'edit_themes'

...none of which enabled the panel in the customizer. Really, edit_css should have worked based on wp-includes/class-wp-customize-manager.php:5740 (wordpress 6.2) where it seems to indicate that edit_css is the required capability to display the Additional CSS panel.

I've also tried switching to TwentyTwelve theme, but still nothing.

Answer 1

In Multisite, Core only allows super admins to edit CSS by default. One of the reasons is that there are some security edge cases, especially in older browsers.

To allow site admins, you'll need to grant them the edit_css capability. It sounds like you tried to do that with your plugin, but without seeing the code there's no way to troubleshoot that. You could edit your question to include a minimal reproducible example if you'd like help with that.

Here's an example of how Jetpack does it:

/**
 * Re-map the Edit CSS capability.
 *
 * Core, by default, restricts this to users that have `unfiltered_html` which
 * would make the feature unusable in multi-site by non-super-admins, due to Core
 * not shipping any solid sanitization.
 *
 * We're expanding who can use it, and then conditionally applying CSSTidy
 * sanitization to users that do not have the `unfiltered_html` capability.
 *
 * @param array  $caps Returns the user's actual capabilities.
 * @param string $cap  Capability name.
 *
 * @return array $caps
 */
public static function map_meta_cap( $caps, $cap ) {
    if ( 'edit_css' === $cap ) {
        $caps = array( 'edit_theme_options' );
    }
    return $caps;
}

To mitigate those security problems, you can sanitize the CSS when it's saved. An example of that is how WordCamp.org does it. For more details you can see Sanitize User Entered CSS.