[Resolved] WP Gutenberg has-color and has-background missing

[Author]

Posts

[nicholasM]

Hi there, this really hurts my theme development with toolset blocks. because I would normally register my own theme colors using the add_theme_support( 'editor-color-palette' function in WP. you will see WP will apply the has-colorname-background-color class to a div when a theme color is used, same with text will be .has-colorname-color See Screenshot for example for out of box in 2020 theme.

So say I have a custom block inside the container with a header/text/button . I might want to say when ever the user has blue background the color on the container the text will be .... and when ever the container bg is red use these other colors. That way this doesn't need manually adding classes or individual color selections to be made on each instance.

I hope that makes sense!

[Luo Yang]

Hello,

Please provide detail steps to duplicate the same problem.

I have tried it in my localhost with a fresh WordPress installation + the latest version of Toolset Blocks plugin 1.2, with below steps:
1) Add below PHP codes into theme file "functions.php":

add_theme_support( 'editor-color-palette' );

2) Create a new post, add a Toolset Container block, background color choose one of theme color.
Test it in front-end, I don't see the any CSS class name " has-colorname-background-color" as you mentioned in screenshot
https://toolset.com/wp-content/uploads/2020/05/1620587-toolset_cover.png

3) Remove the PHP codes of step 1) , I see the same result, see my screenshot background-color.JPG

Is there anything missing? thanks

[nicholasM]

I think it's more of a feature request. What I'm asking is if you can make it function like the standard WP blocks. and accept the color-palette classes

1) Create a WP GB cover Block
2) assign one of the pre-defined colors
3) inspect the wrapping DIV of the cover block
4) It will have a class such as .has-colorname-background-color.

- What theme do you guys use for testing, doesn't look like 2020 judging by the bg color of the editor?

[nicholasM]

sorry for the double reply but this seams like a fairly easy add to toolset and I'm going to give you a use case:

Say I have a custom block - stylized 2 tone custom header block. In my theme I want to be able to say, If the user makes the container blue then the header is white and yellow. If the user makes the container black then the header is white and grey. I don't want the client to need to add classes manually just based on the outer container I want those styles to be applied, this is easy when the color is a class on the wrapping container, and already working great on the WP core blocks

[Luo Yang]

Thanks for the details, you are right, there isn't such kind of built-in feature within Toolset Blocks plugin, you can add a feature request here:
https://toolset.com/home/contact-us/suggest-a-new-feature-for-toolset/

Our developers will evaluate it.

Currently, as a workaround, you can setup those CSS class in the "CSS Classes" input box of Toolset Blocks, see screenshot css-classes.JPG, see screenshot css-classes.JPG

[nicholasM]

thanks they said they would add it in there! My issue is resolved now. Thank you!