useSettings (or select( 'core/editor' ).getEditorSettings()) does not show theme.json palette

[cleshams]

I am trying to add a custom colour setting to core blocks, which all works fine until I try to save the classname for it. I am trying to get a matched colour using getColorObjectByColorValue and passing settings.colors to it. However the values for settings.colors is always the default wordpress colours and not those I have defined in theme.json.

I am using the blocks.getSaveContent.extraProps filter for this, and have experimented with changing the priority of it but no change.

As soon as I run select( 'core/editor' ).getEditorSettings() or any of the similar funcitons in the console, the correct palette is returned but I cannot work out how to get it in the filter callback.

Any advice?

function applyarrowColour(props, blockType, attributes) {
    if (blockType.name == 'core/button') {
        const { arrowColor } = attributes;
        const settings = select( 'core/editor' ).getEditorSettings();
        console.log(settings.colors)
        const colorObject = getColorObjectByColorValue( settings.colors, arrowColor );
         // -- this shows the wrong colors, so colorObject is undefined
//         ...


   }
}

wp.hooks.addFilter(
	'blocks.getSaveContent.extraProps',
	'cfa/button-hover-colour',
	applyarrowColour, 9999
);

The color pallete and new setting in the editor

The out put in the filter

the output from running the same code in the console

[kjroelke]

Sorry this is old, but for anyone stumbling upon it, I believe the store you're looking for is 'core/block-editor'.

Here's an example as a custom React hook:

import { useSelect } from '@wordpress/data';
import { store as blockEditorStore } from '@wordpress/block-editor';

export function useThemeColors() {
  const themeColors = useSelect(( select ) => select( blockEditorStore ).getSettings().colors, [] );
  return { themeColors };
}

in vanilla js/browser context:

function getThemeColors() {
  const colors = wp.data.select('core/block-editor').getSettings().colors;
};