How to Fix Grayed-Out Text Blocks in the WordPress Editor

Have you ever logged in to edit your WordPress site and discovered that the text on the pages you want to edit are grayed out? If you click anywhere on the page, just one block you clicked in gets highlighted, and the rest is pale gray? Furthermore, you can’t select multiple paragraphs/blocks?  

That happened to me recently. Fortunately, the fix turned out to be easy. But it took me a while to figure it out. Here are the details:

One Block at a Time Highlighted

I logged into WordPress and opened a post in the visual editor one morning and the text was all grayed out. If I clicked in a block, it “lit up”, and I could edit it. But all the other blocks stayed grayed out.

It was annoying because I like to see and read the text above and below a block while I’m editing. And sometimes I like to copy several blocks, paste them into a word processor and make the changes there, and then paste the copy back into the page I’m editing.  But I couldn’t do that.  To copy anything, I had to do it one block at a time.

The experience was frustrating. I didn’t know why the pages suddenly stopped working right. I didn’t know if there had been an automatic WordPress update that caused the change, or if perhaps some plugin I updated was the culprit.  Or – since I’m a writer and consultant, not a WordPress wiz – maybe I just did something else, somewhere to screw up the site. 

What Caused the Grayed-Out Text?

I looked at the posts on another site I owned, and the problem wasn’t occurring there. So, I headed to the web to search for a solution. None of the results seem to address the specific problem I was having. There were some results that referred to grayed out buttons, tags, or widgets. But I couldn’t find anything that addressed the all the text being grayed out in the visual editor.

Next, I went back to my site, and deactivated all the plugins to see if any of those were the problem.

Nope.

I reactivated them one by one, checking each time. Nothing changed.

My next approach was to see if the grayed-out page was easier to edit from the code editor. I could see all the text at once in the code editor, but it wasn’t any easier to read because (duh!),  it showed the coding as well as the text. 

My stress level — and probably my blood pressure — was going up. I was annoyed at how much time I was wasting, I was wondering if I’d have to change themes or re-do the entire site to fix the problem.

Spotlight Mode Was the Culprit

Then, as I was about to click back to visual editor, I noticed there was a box above editor choices that gave you some viewing choices. Two were checked:   “Spotlight mode/focus on one block at a time” and “Fullscreen mode/Work without distraction.” 

I’m not sure why both were checked.  But as it turned out, it was the Spotlight mode that was causing the problem. As soon as I unchecked that, the visual editor started working normally.

I’m guessing WordPress pros would know about that setting. But if you’re reading this because, like me, you’re not a WordPress pro and the grayed-out text is driving you crazy, here’s how to fix it.

Finding and Turning Off Spotlight Mode

Open a blog post in the visual editor. Look at the menu at the top of the page.  At the far right, you should see three dots. When you hover over it with your cursor, you’ll see the word Options.

Click the options, and a drop-down menu will show up.

Look for Spotlight Mode. It should be the second item on the drop-down menu. If there is a checkmark next to it, that is why only one block at a time is easily visible (and why you can’t select more than one block at a time.)

To change the editor so that it works normally (i.e., none of the text is grayed out), click on Spotlight mode to uncheck the box.

Doing so will make the change sitewide.

Related Content:
Are DIY website-builders easy and practical to use?

Image source: Screen shots. Red question mark is from Istockphoto.