Site icon Hip-Hop Website Design and Development

Gutenberg – Dispatch action or setAttributes() on Post Save/Update action instead of onChange listener

I have a requirement to add up to 8 user selected custom colors to the list of default options when using the Colour Palette.

I have registered a meta that saves custom colours.

Problem:

I want to save custom colours when the "Update" post button is pressed instead of using the onChange listener, because the listener fires multiple times when the colour selector tool is dragged.

What I am doing at the moment:

const { isSavingPost } = useSelect( select => {
    const { isSavingPost } = select( 'core/editor' );

    return {
        isSavingPost: isSavingPost(),
    }
} );

useEffect( () => {
    if ( isSavingPost ) {
        // Logic to save custom colours.
        setAttributes( { customColors } );
    }
}, [ isSavingPost ] );

The problem is that when setAttribute() is called when "Update" is pressed, the state is updated after the post is saved, which Gutenberg considers dirty and a page reload following an "Update" shows this:

I am however able to save it if I press "Update" post twice, but this is not feasible for the end user.

Is there a way I can fire wp.data.dispatch( 'core/editor' ).editPost() or setAttributes() when a Post is saved manually by pressing the "Update" button?