[Tomas Mulder]

If you make select available to dig into WordPress’s data and a few color helper functions

const { select } = wp.data;
const {
    getColorClassName,
    getColorObjectByColorValue,
} = wp.editor;

then you can grab the class name or style (in case they select a custom color)

if( color ) {
    const settings = select( 'core/editor' ).getEditorSettings();
    const colorObject = getColorObjectByColorValue( settings.colors, color );
    if( colorObject ) {
        console.log( 'add a class of', getColorClassName( 'background-color', colorObject.slug ) );
    } else {
        console.log( 'add a style of', { backgroundColor: color } );
    }
}

pretty easily.

[Author]

Posts