block editor - How to override Gutenberg admin CSS

admin管理员组

文章数量:1430605

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?

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?

• css
• block-editor

Share Improve this question edited May 3, 2019 at 21:05 norman.lol 3,24133 gold badges3030 silver badges3535 bronze badges asked May 3, 2019 at 20:38 polish bastardpolish bastard 4722 silver badges55 bronze badges 0

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 5

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

本文标签： block editorHow to override Gutenberg admin CSS