I customized my Gutenberg block color pallete and the WordPress default is that the CSS classes generated has the form has-(slug)-color. For example say I added a color called red. The resulting CSS class will be has-red-color. I traced the function to a core WordPress file: https://github.com/WordPress/WordPress/blob/master/wp-includes/block-supports/colors.php#L73

How do I override this function from my functions.php in my theme so I can generate different class names.

I've been reading about hooks and filters but I'm not sure how to use that in this case.

  • 1
    Why do you want to change it? In addition to the PHP file there is most likely a pure JS version as well, so you'd need to change that as well. I don't see any filters applied in the linked method, so no chance to change it here - you'd need to find another spot
    – kero
    Oct 21 '21 at 11:18
  • what's the problem this solves? Are you trying to repurpose the colours for something else? Or make it use something else for something like bootstrap? Add some context to your question, it's important for understanding and answering the question
    – Tom J Nowell
    Oct 21 '21 at 11:33
  • @TomJNowell well the organization has an in-house package for all it's CSS uses in all its sites. So the stylesheet used in the front end already has these css classes which is used across all the sites. So the after customizing the color pallete on the Gutenberg block editor, I want the generated classes to have the names which are similar to those in our in-house stylesheet
    – BlackBeard
    Oct 21 '21 at 15:47
  • 1
    it's more likely that you can add CSS classes rather than remove them, and you would do it on a filter that the function you linked to is added to, not a filter the function fires/uses. Removing or changing the has-xxxx-color classes is more likely to cause issues. I'm also mindful that this is a technical limitation of your design library, one that can be fixed via common language features via SCSS/SASS/PostCSS/Less/etc build tools e.g. something like .has-red-color{ @extends .blackbeards-red-text; }
    – Tom J Nowell
    Oct 21 '21 at 16:16
  • also keep in mind that by doing this, you're taking a tonne of future WP features and changes and throwing them in the trash. E.g. in the future that has-red-color will pull the red from theme.json with a palette picker in global styles with CSS variables, which won't be possible if you do this. You'll find that even the easier simpler solution of declaring the available palette and their colour hex codes in theme.json so it can't be modified by users might become incompatible if you're not careful
    – Tom J Nowell
    Oct 21 '21 at 16:19

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.