How to override Gutenberg admin CSS

Question

I need advice how to modify Gutenberg's core CSS.

What's my problem: the outlines and block labels disappear and I want them fixed, visible on every block all the time, not only in focus. I've found GB gets his styles from something called wp-admin/load-styles.php which basically got me nowhere. All the styles merge via that load-styles.php file. I don't know where to look for that class for the outline.

Additionally, most CSS files I found wherever are x4 - minified and and alternative for RTL.

Which file and which version of it should I modify? Or maybe there is another approach?

Answer 1

To override Gutenberg's styles you need to add your own stylesheet. So hook into enqueue_block_editor_assets and then add your own stylesheet in which you target the selectors you wanna override. In the following example I placed a stylesheet in a custom theme's assets/ folder.

functions.php:

// Add backend styles for Gutenberg.
add_action('enqueue_block_editor_assets', 'gutenberg_editor_assets');

function gutenberg_editor_assets() {
  // Load the theme styles within Gutenberg.
  wp_enqueue_style('my-gutenberg-editor-styles', get_theme_file_uri('/assets/gutenberg-editor-styles.css'), FALSE);
}

assets/gutenberg-editor-styles.css:

.editor-post-title__input {
  border: 1px solid black;
}

---

Source: Creating theme editor styles for Gutenberg