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.


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:

enter image description here

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?

1 Answer 1


You can still use the onChange listener and do setAttributes only when value passed in onChange is different from the one in attributes.customColors. This is one if and should not penalize performance much.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.