[Resolved] White text on white background in WordPress editor

[John]

For example: https://www.rageheart.co/wp-content/uploads/2022/09/Screen-Shot-2022-09-29-at-7.28.15-am-1.png

Cleared the browser cache, disabled all plugins, plus the other stuff you mentioned. The issue remains.

See the CSS editor in the image. It doesn’t look like one of my styles from my sheets. It looks like it comes from the theme somehow. I tried overriding it with my own rule but it didn’t work.

So I’m out of ideas.

How do I fix?

[Ying]

Hi John,

Is this a post title block? If so, you can change its color within the block settings.

[John]

This is the default WordPress editor when I click “new post”.

What block settings are you referring to?

[Ying]

Oh I see, have you set the H1 title color to white at customizer > colors > content > h1?

[John]

Yeah. Well, well “Content Title” is set to white.

But shouldn’t that only apply to the front end?

How do I change the back end title to black again, while keeping the front-end titles white?

[Ying]

If the content title is set to white on front end, what’s the background color set for content?

[John]

Content background is set to white.

But that should only be for the front-end.

I don’t understand why it would affect the back-end WordPress post editor, or how to fix it.

[Ying]

I don’t see an easy fix, WP tries to make the front end and back end look as similar as possible.

If you do not see the title on the front end, then it applies to the backend as well?

To fix this, you will need to install a child theme and create a CSS file only for the block editor and use PHP code to force the editor to load this style sheet.

Let me know if you want to go this way.

[John]

That’s a bit weird.

I can see the title on the front-end perfectly fine.

For example: https://www.rageheart.co/no-my-parents-didnt-give-me-drugs-when-i-was-7-years-old/

It’s just the back-end.

Is the child theme the only solution? I can’t just add some simple CSS to fix it?

[Fernando]

Hi John,

This is default WordPress behavior.

One thing you could do is go to Appearance > Customize > Colors > Body, and set a Background color.

Other than that, you would need to create a stylesheet for your Block Editor as mentioned by Ying.

[John]

I found a far simpler solution.

I used the Customiser to change the color back to black (which fixed the white text in the back-end editor) and then custom CSS to target the <h1> tag specifically on the front-end.

Simple and easy.

[Fernando]

I see. Glad you found a solution!

[Author]

Posts