Posted by Aimee Cozza on December 12th, 2018

Gutenberg has been out for… Like all of a week now. While it’s sometimes breaking things and sometimes working A-okay, there are some weird bugs that are popping up here and there while we wait for theme authors and plugin authors to roll out adjustments to their items to make Gutenberg work as seamlessly as possible. One issue I ran into was a curious one – white on white text in the backend.

While trying to add some relevant edits into my post about adding an additional RSS feed (and making images work in MailChimp) without a plugin, I noticed this interesting thing happening. All of the text was there, and it appeared just fine on the front end, but was white in the backend.

I’ve seen things like this happen before when well-meaning code is marked as “!important” or ends up, somehow, globally overriding all CSS on a site. I’ve had styling unknowingly carry over from front end to back end, so fixing this is actually quite simple so you can get editing in Gutenberg once more. I’m expecting theme updates to fix most of these issues, but for now, here’s a quick fix.

Step 1: Create a CSS File

If you have a CSS file that affects your backend admin area already, you can just append this code to it. If not, you will want to create a CSS file. There’s nothing special to it – it’s just a plaintext file with CSS inside of it, and then has the extension “.css” on it, so if you don’t have a fancy code editor, no worries. You can just use notepad or TextEditor to create the file.

Step 2: Add the code

Basically what is happening is there is some code somewhere telling the text within the Gutenberg editor to be white. We’re just going to tell it to be black instead. Add this to your CSS file:

.editor-block-list__layout, .editor-block-list__layout .editor-block-list__block {
	color: black;
}

Step 3: Call your Admin CSS file into the Admin area

This will require making a change to your functions.php file. I would highly suggest if you are not using a child theme to use a child theme, as any changes you make will be overridden if you update your theme. 

// Add your CSS file to the WP Admin Area
function admin_style() {
  wp_enqueue_style('admin-styles', get_stylesheet_directory_uri().'/gutestyle.css');
}
add_action('admin_enqueue_scripts', 'admin_style');

You’ll notice I named my style “gutestyle.css”, but you can name it whatever you want. You’ll want to place your CSS file within your theme’s folder, right next to functions.php and any other stylesheets you may have.

Once you refresh in WordPress, you’ll see you now have black text. Hooray! Isn’t that much better?