Gutenberg Image Caption Window Missing During Editing

I have the same problem!
If I click on where the caption should be in Gutenberg editor and drag the cursor, it highlights the caption text. The caption text is white and I have a white background for my theme – so I think the caption text is there – it is just white on white!
On the actual page there is no problem and the caption text is black (on white page) – it is just the Gutenberg editor page that has the problem.
This only started to happen recently.
I updated to WP 5.7.2 recently.
I have a second WP site which is also 5.7.2 but this seems to be OK.
P.S. Forgot to add – if I highlight the text and change its color to black (it was already set to black) then Gutenberg will then display it.

• This reply was modified 3 years, 6 months ago by stevesi.

<figcaption role=”textbox” aria-multiline=”true” aria-label=”Image caption text” class=”block-editor-rich-text__editable rich-text” contenteditable=”true” style=”white-space: pre-wrap;”>E2B Launcher will help you use your new E2B USB drive</figcaption>

This is what I see if I inspect the image element in Chrome on the Gutenberg edit page

In Chrome F12 mode, I can see a

.wp-block-image figcaption {
  color: #555;
  font-size: 13px;
  text-align: center;
}

but the color and text lines are struck through.
I can change the font-size and the caption space increases, so the text is getting larger but the color setting seems to be ignored if I try to change it.

• This reply was modified 3 years, 6 months ago by stevesi.

@stevesi, I have tried to change the text color to black, but it doesn’t change the visibility while I’m in Edit mode. I still can’t see the text in the caption.

Does anyone have a workaround for this?

Thanks!
Belinda

P.S. I’m on a mac, using safari, and the most recent os, browser app and wordpress, etc.

Did you change the text colour of the caption text?
You first have to find the caption text empty box which is like playing battleships because you have to click on the blank space under the image where the caption text box should be if only you could see it. If there is text already there then you need to highlight the existing caption and then set the colour to black.
1. click on image – you see it is selected
2. move cursor down to where caption should be (cursor changes from arrow to I-beam cursor in Edge and Chrome)
3. click – now you should see the small floating caption box for B I <link> v
(bold italic link more)
4. Once you get the caption edit control box visible, move the cursor to just below it in the approx middle of the screen (empty white space) until you get the I-beam cursor and hold down the left-mouse button – now move the mouse to the left and it should highlight the current caption text (background colour will depend on your theme – I use Astra).
5. After selecting caption text, click on v down-arrow of the floating caption edit control and select ‘text color’
6.Click on Black colour (even though it is already selected)
now the text should remain visible in the editor (but only for that image).
HTH

• This reply was modified 3 years, 6 months ago by stevesi. Reason: add detail steps
• This reply was modified 3 years, 6 months ago by stevesi.

Hi Stevesi – Thank you for the step-by-step directions to get an existing caption to show. That’s very thoughtful of you. ??

I’m looking for the source of the problem… I’d like to understand why the captions have suddenly turned white on white, and what I can do in the dashboard or in custom css to remedy the problem so each caption is not a muti=step sequence. Know what I mean?

If you ever stumble upon a solution for this one, other than a caption-by-caption workaround, please do let me know.

I was hoping someone cleverer than me would read our posts and fix the issue!

Yes! We will both remain hopeful!
Thanks, Stevesi!

Meanwhile change your background page colour to be a very light grey, then you can see the caption. You can change the background back to white after editing all pages.