Color Picker Attribute sync with Gutenberg Color Palette

Hey, everybody,
how can I synchronise the colour palette from Gutenberg with the colourpicker (from an attribute)?

It would be so good if this could somehow work out!

Best and thank you
Patrick

1 Like

As much as I’d love to see this, I doubt Pinegrow will be able to solve the issue anytime soon. In fact, even the most prominent themes and block plugins struggle with managing color and typography across the theme, front-end, and Gutenberg editor. This is one of those areas where WordPress is a giant mess, and it’s only getting worse with the uptake of theme.json.

If you are creating a theme using Pinegrow, then there are some things you can do by enqueuing block assets (see Matthias Altmann’s excellent article for Oxygen as inspiration), but things aren’t quite as straightforward if you are just making blocks.

What I end up doing, is manually creating a theme.json file with my site colors, typography, and other styles based on the CSS I’m using in Pinegrow. It’s a manual step, but it gets the job done.

4 Likes

Hey Adam,
thank’s for your answer!

Jepp, at the moment it’s a mess …

My workflow:

  1. ACF Options page with colour and typo settings
  2. functions.php add_theme_support('editor-color-palette’array(…) to get these colours in gutenberg
  3. On ACF Option Safe => scssphp to compile sass on the server

The question is:
How do I get this or other colours into the Pinegrow attribute colour picker?
It is the integrated colour picker of Pinegrow itself! You can see it in the attached image from my original post.

Is there a function or something to archive this?

Your workflow sounds pretty solid. Now, getting those colors into the PG color picker is probably something that @matjaz would need to add as an enhancement since I don’t think we have the ability to modify the controls in pg-blocks-controls.js.

It’s probably worth adding a feature request, especially since I suspect he’ll need to touch that code to account for theme.json and FSE in the semi-near future.

2 Likes

Hey Adam,
thanks, i’ve added a feature request :slight_smile: