[Resolved] Gutenberg Block Focus Outline Disappeared

[Omar]

Hi. I noticed that after I have been doing some color customization from the Appearance > Customization section, the blue outline around focused blocks inside the Gutenberg editor is no longer visible.

I tested removing any Additional CSS code I entered, but the issue was only resolved when I tried using WordPress default theme instead of GeneratePress.

If you can guess which color/appearance customization may have a conflict with the block border color, or maybe is there a way to reset to all the default appearance settings, and redo them all again and try to figure out what went wrong.

Thanks!

[David]

Hi there,

can you provide a screenshot of your editor with a parent container block selected?

[Omar]

Container Block with Select Tool:

Container Block with Edit Tool:

Grid Block:

[David]

Can you share an example of a front end page – just want to see what possible color conflict ( if any ) could be causing that.

[Omar]

I have been able to track down the issue down to the following CSS code in the “wp-admin/load-styles.php” file.

.is-dark-theme .block-editor-block-list__layout .block-editor-block-list__block:not([contenteditable]):focus:after{box-shadow:0 0 0 1.5px #fff}

The #fff white color is what is causing this issue since I have been able to try changing the color in the browser code inspector.

I’m trying to override this css code, thought I would like to know how to fix this issue at the source.

[Omar]

I think .is-dark-theme class that is added by generatepress/js/admin/block-editor.js line 85 is what created this issue. Removing this class from the code inspector instantly resolved the issue. This class would make sense if the editor background is dark, but since my background is white, a white block border make it pretty much invisible.

I just need to figure out what “generate_block_editor.text_color” in block-editor.js refers to in the theme customizer, and change it to something darker to avoid this class being triggered.

[Tom]

Strange, is-dark-theme should only appear if your text color is set to something light.

What do you have set as your text color in Customize > Colors > Body? How about Customize > Colors > Content?

[Omar]

Hi Tom. You are right. I have the Customizing>Colors>Content>Text as #949698. Changing the color to #000 fixes the issue. I also tried keeping the old color, but using a dark background color, and I can see the white border.

I’ll have this text color setting as CSS code instead to avoid this issue, but I hope you guys resolve this issue so that is-dark-theme class is triggered when the background color dark, not when the text color is closer to white than black.

Thanks

[Tom]

It was originally checking the background color, but that way wasn’t very reliable either, unfortunately. Things like background images, gradients etc.. are harder to guess than just checking the text color.

Glad it’s working now 🙂

[Author]

Posts