Custom Colors in Block Editor Interface

  • Unknown's avatar
    justjennifer · Member ·

    Howdy! I ran into some issues while trying to change the background color of a button in the Block Editor.

    1. Undefined/unclear area in the Block Color Section: After inserting a button block, when opening the button block module in my Editor’s sidebar and navigating to the button Color, there’s a checkerboard area at the top of each section, Text and Background Color, and it is unclear what its purpose is. However, clicking into that checkerboard area opened the block’s color selection box. (temp screenshot)

    Also, later I noted on a different block that if a custom color has been selected, it appears in that checkerboard area. But it is very unclear what that area is without it.

    2. Problem pasting from the Browser Eyedropper Tool: I then used my browser’s Eyedropper tool to select a color on the page to use as the button background color. When using the Browser Eyedropper tool, the tool copies the HEX number including the hash symbol #. Navigating back to the block color picker box, I pasted the color copied with the Eyedropper tool, but because that box contains a permanent hash symbol (temp screenshot), it would not accept the last character pasted directly from the Eyedropper tool. As an example, HEX color #e67676 became ##e6767 when pasted into the color picker box.

    In order to work around this, I first pasted the Browser Eyedropper tool content into a text editor, removed the hash symbol, then copied the HEX color from there back into the color picker box in the Block Editor.

    There should be a way to paste the HEX code from the Eyedropper tool directly in the color picker box without needing an intermediary method.

    Win10Pro PC on FF 94.0.2

    Hope all that was clear. Thanks.

    The blog I need help with is: (visible only to logged in users)

  • supernovia · Staff ·

    Hi @justjennifer, I just encountered the same thing today: even if I copy a code from that very dialogue box, the paste includes # so the last number/letter gets cut off.

    And I agree the transparency checkerboard thing isn’t ideal. Honestly I hope the whole thing will get a design overhaul, to be honest.

    I’ll confirm whether this is WordPress.com’s stuff or gutenberg itself, and get the requests to the right repository.

    Also, just as a reminder, going forward if there’s more than one issue, use two separate threads. Thanks!

  • supernovia · Staff ·

    @justjennifer I’ve found the relevant issue in the Gutenberg repository and commented there re: the transparency blocks.

    I’m still looking for one re: the picker color pasting.

  • supernovia · Staff ·

    OK. So here’s the one about the paste bug:
    https://github.com/WordPress/gutenberg/issues/37018

    Here’s one for the confusion on the checkered area:
    https://github.com/WordPress/gutenberg/issues/36998

    I’ll follow up when I hear back!

  • Unknown's avatar
    justjennifer · Member ·

    Thank you for all your efforts in getting this sorted and reported and I heartily agree with you that that entire area needs a redesign! It’s gotten very “noisy” and unclear.

    The section titles (Text/Background Color) have gotten lost in a sea of colorful dots and what does CORE, THEME and USER mean in this context? (And that’s *before* coffee. LOL)

    I’ll do my best to remember “separate issues/separate threads”.

    Thanks again

  • The topic ‘Custom Colors in Block Editor Interface’ is closed to new replies.