[Resolved] Gutenberg Block Focus Outline Disappeared

Home Forums Support Gutenberg Block Focus Outline Disappeared

  • This topic has 8 replies, 3 voices, and was last updated 4 months ago by Tom.
Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #1453589
    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!

    #1453715
    David
    Staff
    Customer Support

    Hi there,

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

    #1454256
    Omar

    Container Block with Select Tool:
    Container Block with Select Tool

    Container Block with Edit Tool:
    Container Block with Edit Tool

    Grid Block:
    Grid Block

    #1455105
    David
    Staff
    Customer Support

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

    #1455831
    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.

    #1455865
    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.

    #1456121
    Tom
    Lead Developer
    Lead Developer

    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?

    #1457256
    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

    #1457589
    Tom
    Lead Developer
    Lead Developer

    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 🙂

Viewing 9 posts - 1 through 9 (of 9 total)
  • You must be logged in to reply to this topic.