0

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?

  • 1
    Your not talking about directly modifying them right? Just enqueue a stylesheet and OVERRIDE them. – RiddleMeThis May 3 '19 at 20:47
  • I didn't know how to do it at all :) Now I know. Thanks :) – polish bastard May 4 '19 at 22:24
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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.