Block editor style far different from site

Hello Etienne,

This is something I am very interested in too!

So far the only way we have found to inject styles into the block editor is as follows …

add_action('after_setup_theme', 'add_virtual_stylesheet', 11);
add_filter('pre_http_request', 'create_virtual_stylesheet', 10, 3);

function add_virtual_stylesheet() {
  add_editor_style('https://non-existant-website.com');
}

function create_virtual_stylesheet($response, $parsed_args, $url) {
  if ($url === 'https://non-existant-website.com') {
    $response = array(
      'body'     => '',
      'headers'  => new Requests_Utility_CaseInsensitiveDictionary(),
        'response' => array(
        'code'    => 200,
        'message' => 'OK',    
      ),
      'cookies'  => array(),
      'filename' => null,
    );

    // Add your styles here ...
    $response['body'] .= 'body { font-size: 1rem; }'; }

  }
  return $response;
}

… what this is doing is telling the block editor to use a stylesheet that doesn’t exist and then using a hook to intercept the request for the stylesheet to provide the styles.

It’s a bit too hacky for my liking and I’d much prefer to do something else so if anyone has any ideas please shout out!

Thank you,

Oliver

Hi Oliver,

Thank you for this first response.

As you say, it’s a bit too hacky. I understand that in both cases we have to copy any change in the style.css either in your code (your solution) or at the end of the style-editor.css file (my suggested solution).
I am quite sure something simpler could be feasible.

Regards
Etienne

Hi Etienne,

You will always have to manually add this CSS to the editor somehow because the front end CSS cannot be automatically injected.

The solution you have suggested requires editing the theme and ends up being injected using the add_editor_style() anyway because this is how the theme developers inject style-editor.css into the editor.

We prefer not to edit the theme (be it via a child theme or not) because it causes the theme to become out of sync with the repository version and potentially incompatible with future releases.

Anyway, both approaches are using add_editor_style() function which is the recommended method as it creates properly scoped CSS which doesn’t leak out into the rest of the editor. This article gives a bit more of an explanation about it.

Here is a thread on GitHub for Gutenberg talking about the previous Twenty Twenty theme and the only other suggestion is the one I mention above.

I don’t think the Gutenberg developers think that anyone would want to inject CSS other than to create a css file and use add_editor_style() function.

Either way, this is a general Gutenberg question that is not solely a Twenty Twenty-One issue.

Oliver

Thanks for this review