Skip Navigation

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

This thread is resolved. Here is a description of the problem and solution.

Problem:

What I'm asking is if you can make it function like the standard WP blocks. and accept the color-palette classes

Solution:

there isn't such kind of built-in feature within Toolset Blocks plugin, currently, as a workaround, you can setup those CSS class in the "CSS Classes" input box of Toolset Blocks.

Relevant Documentation:

This support ticket is created 3 years, 10 months ago. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

Sun Mon Tue Wed Thu Fri Sat
- 9:00 – 13:00 9:00 – 13:00 9:00 – 13:00 9:00 – 13:00 9:00 – 13:00 -
- 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 -

Supporter timezone: Asia/Hong_Kong (GMT+08:00)

This topic contains 5 replies, has 2 voices.

Last updated by nicholasM 3 years, 10 months ago.

Assisted by: Luo Yang.

Author
Posts
#1620587
toolset-cover.png

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!

#1621109
background-color.JPG

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

#1621735

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?

#1621907

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

#1622149
css-classes.JPG

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

#1623531

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

This ticket is now closed. If you're a WPML client and need related help, please open a new support ticket.