I'm building a setup for a client that allows them to use a number of colour swatches throughout their gutenberg blocks in a post. They define the colour swatches in the document inspector panel (post-wide). This works works great for all of the custom blocks that I've built, however, when it comes to supporting core blocks, some of them display a wordpress colour palette that shows different colours.

All my custom colour palettes in the blocks update in realtime if the user changes the colour palette in the document inspector. However, in order to make the WordPress colour palettes show those same colours I need to edit the WordPress colour palettes via JavaScript (as they're defined in the editor - so PHP can't do it)

I was hoping there would be a block or editor filter like addFilter("block.registerBlockType", myFunction) (link below) that could be tied into, but I can't find one.

My main question...

Is there any way to edit the colours in the WordPress color palettes with JavaScript?

I'm using WordPress 5.5.1 Self Hosted.

Here's what I've tried so far:

Without a way to edit the WordPress colour palettes client-side, I've attempted to change them with PHP or simply revert to hiding them...

PHP: While not client-side, this would help a little (If I could get it working). According to documentation it should work.

function myplugin__disable_custom_color_pickers() {

    // These both work to remove the ability to create custom colors
    add_theme_support( 'disable-custom-colors' );
    add_theme_support( 'disable-custom-gradients' );

    // This works to remove the ability to select from a palette of gradients
    add_theme_support( 'editor-gradient-presets' );

    // This is SUPPOSED to remove the ability to select from a palette of colours
    // But it DOESN'T work
    add_theme_support( 'editor-color-palette' );


}

add_action( 'after_setup_theme', 'myplugin__disable_custom_color_pickers' );

Even if I pass in a new array of colours it doesn't work:

    // This is SUPPOSED to replace the colours with just the one I pass in, but it still doesn't work
    add_theme_support(
        'editor-color-palette',
        array(
            array(
                'name' => __( 'strong magenta', 'themeLangDomain' ),
                'slug' => 'strong-magenta',
                'color' => '#a156b4',
            )
        )
    );

Am I missing something with the PHP?

Messing with the blocks through Javascript and CSS:

Since PHP doesn't do the job, hacking through JS works but it's delicate - and still doesn't get me what I actually want (which is to populate the colours dynamically).

JavaScript:

addFilter("blocks.registerBlockType", plugin.slug, (settings, name) => {
    
    try {
        // This works for core/group and core/media-text (Because these seem to only use withColors HOC)
        // but not core/cover or core/pullquote (Because these also use ColorPalette or PanelColorSettings components)
        delete settings.supports.__experimentalColor;
        console.log(`deleted from ${name}`);
        
    } catch(e) {
        console.log(e);
    }

    return settings;

});

CSS:

// Hide color options from the document inspector
// Applies to:
// core/media-text
// core/cover
.block-editor-panel-color-gradient-settings {
    display: none;
}

// Hide color selections from background selection screen in core/cover block
.wp-block-cover .wp-block-cover__placeholder-background-options {
    display: none;
}

Any ideas on how to edit the colours with JS or why the PHP isn't working?

Thanks, Dale.