Gutenberg: Multiple AJAX requests to save meta boxes

[noisysocks]

Describe the bug
Dispatching the setAvailableMetaBoxesPerLocation() action causes multiple AJAX requests to post.php to be made.

These are the requests that cause meta boxes to update—they happen when the post is published.

To Reproduce

1. Create a new post
2. Open _Options_ and enable the _Custom Fields_ advanced panel
3. Type some content in the post
4. Open DevTools and run this code in the Console tab:
   js wp.data.dispatch( 'core/edit-post' ).setAvailableMetaBoxesPerLocation( {"side":[],"normal":[{"id":"postcustom","title":"Custom Fields"}],"advanced":[]} );
5. Press _Publish_
6. Open DevTools and look in the Network tab. Notice that there are two requests to post.php

Expected behavior
Only _one_ request to post.php should have been made.

Additional context
This happens because, in the SET_META_BOXES_PER_LOCATIONS effect, we subscribe() to the store without first removing any existing subscription:

https://github.com/WordPress/gutenberg/blob/70cc953a136609c4c889740ba0e7d4ca0c641b56/packages/edit-post/src/store/effects.js#L50-L72

[noisysocks]

Calling subscribe() returns an unsubscribe function, so fixing this should just be a matter of storing the return value of subscribe() and calling it next time.

https://wordpress.org/gutenberg/handbook/designers-developers/developers/packages/packages-data/#subscribe

[elliotcondon]

Hi @noisysocks

Is there any update on this issue? We are having to implement some "hacky" jQuery to add in metaboxes and metabox "sortable" locations. This is not ideal, as React destroys the HTML during renders.

[noisysocks]

@elliotcondon: It needs a developer to look into it. Would you like to take a crack and open a PR? 🙂

[elliotcondon]

Hi @noisysocks

I would love to, but find the code architecture of Gutenberg far to confusing. I wouldn't know where to start.

[mcsf]

Calling subscribe() returns an unsubscribe function, so fixing this should just be a matter of storing the return value of subscribe() and calling it next time.

What is best for SET_META_BOXES_PER_LOCATIONS? To run the subscribed callback only once per effect? Or to just make sure that never are there more than two subscriptions at once? Depending on that, one would either:

SET_META_BOXES_PER_LOCATIONS( action, store ) {
    const unsubscribe = subscribe( () => {
        …
        unsubscribe();
    } );
}

or

let unsubscribe;

SET_META_BOXES_PER_LOCATIONS( action, store ) {
    if ( unsubscribe ) {
        unsubscribe();
    }
    unsubscribe = subscribe( () => {
        …
    } );
}

[glendaviesnz]

What is best for SET_META_BOXES_PER_LOCATIONS? To run the subscribed callback only once per effect? Or to just make sure that never are there more than two subscriptions at once? Depending on that, one would either

On playing around with it, seems like it has to be the second option - if unsubscribing within the the subscription as in the first option the metabox save doesn't seem to run at all. I have a draft PR with the second approach up at https://github.com/WordPress/gutenberg/pull/17522

[noisysocks]

Thanks so much @glendaviesnz!