0

To understand what I am asking, if you look at my attachment... enter image description here

...you will see towards the far right, that both the text and background words, have empty circles with a line going across them. I already know how to add custom colors to my custom color palettes. But I don't know how to modify these 2 empty circles. How can I replace these two empty circles for actual colored circles (presentation purposes).

Is this something that can be incorporated into our theme.json file?

Improve this question
3
  • 1
    those circles fill with colour when you select an option from the palette. The absence of colour/emptiness indicates the absence of a selection, and that the default is going to be used ( it took me a while to figure out which circles you were referring to and what you meant, you might want to reword your sentence and constrain your screenshot down to just the relevant parts or with arrows )
    – Tom J Nowell ♦
    Mar 10, 2023 at 19:57
  • 1
    if what you mean is that the button has a black background so the circle should be black, then I understand, but this is one of those things were it's really easy to say it, but 1000x harder to actually do it. It might seem trivial but the moment you introduce any form of editor CSS the scope blows up out of control as you have no way of knowing what the colour is meant to be. Short of grabbing the gutenberg source, rebuilding the @wordpress/components package, and meticulously redoing it on every major WP release this won't be possible, and even then it wont always show the right colour
    – Tom J Nowell ♦
    Mar 10, 2023 at 20:00
  • 1
    nevermind that even if you did that and were lucky, block styles/button styles/block variants would immediately break it
    – Tom J Nowell ♦
    Mar 10, 2023 at 20:01

1 Answer 1

Reset to default
1

If you mean the indicator for the currently selected colour here:

enter image description here

Then No.

The problem is a misunderstanding of what the circles colour represents. It's not telling you the current colour of the buttons text, it's telling you the chosen/selected colour of the text, and you have not chosen a colour yet, it has not been overriden. Hence the blank circle with a cross.

To change it to the current colour even when none is provided would require you to build several core WordPress JS packages with custom versions that modify the JS components to show it.

Even then, figuring out what that colour should be when the user has not chosen a colour from the palette will be very difficult, especially when the colour may not be in the palette of options available, and arbitrary CSS from blocks, block styles, block variations, parent blocks, the theme, child themes, custom CSS, and plugins, as well as core itself could have changed the block.

Is this something that can be incorporated into our theme.json file?

No, because that's not how the control works. theme.json configures things, but it can't be used to replace React components or make more extensive changes. If it could do this it would probably already have been done, most likely via global styles.

Improve this answer
3
  • I can foresee that you disagree that the control should show the current colour, we all have our opinions, but sadly I don't have the power to change cores UX decisions on my own. They can be influenced however! Core editor meetings, UX meetings, feedback cycles, Make posts, issues, and gutenberg plugin releases are all opportunities to highlight UX improvements or problems. As long as you're constructive and friendly a lot of progress can be made. Just don't go in saying it's awful and argue they're wrong, you'll be shut out very quickly
    – Tom J Nowell ♦
    Mar 10, 2023 at 20:10
  • After hearing you out, It now would make more sense to me (from a usability standpoint) to have text next to each indicator that says "make selection" or something short like that, rather than depending on an icon to express "choose/select". Because I didn't even think that just by looking at them. In any regard, thanks for bringing understanding to this whole process.
    – klewis
    Mar 10, 2023 at 20:25
  • 1
    it might be worth looking into the JS filters to see if that text change is possible, translation APIs specifically, since that text will come from a translation in a JSON file
    – Tom J Nowell ♦
    Mar 10, 2023 at 20:29

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.