Editor: Metaboxes fail to save after heartbeat reauthentication in block editor

[LinSoftware]

When a session expires and a user logs in again via the heartbeat API, the nonces used by the metabox loader are not refreshed. This can cause data loss because saving the metaboxes fails after reauthentication.

Steps to reproduce:

1. Add a metabox to a post type that uses the block editor. For example:

<?php

function wporg_add_custom_box() {
   add_meta_box(
         'example_metabox',
         'Meta Box Test',
         function( $post ) {
            $value = get_post_meta( $post->ID, '_wporg_meta_key', true );
            ?>
            <label for="wporg_field">Test metabox</label>
            <textarea id="wporg_field" name="wporg_field" rows="4" cols="50"><?php echo esc_html( $value ); ?></textarea>
            <?php
         },
         'post'
   );
}
add_action( 'add_meta_boxes', 'wporg_add_custom_box' );
function wporg_save_postdata( $post_id ) {
   if ( array_key_exists( 'wporg_field', $_POST ) ) {
      update_post_meta(
            $post_id,
            '_wporg_meta_key',
            $_POST['wporg_field']
      );
   }
}
add_action( 'save_post', 'wporg_save_postdata' );

2. Edit a post. Change the content in the metabox.
3. Simulate the session expiring by deleting the site cookies, or in another tab, log out of the site.
4. On the post edit screen, wait up to 30 seconds for the heartbeat API to cause the authentication modal to appear.
5. Log in via the authentication modal.
6. Save or publish your post. The block editor content will successfully save but the content in metaboxes will not. If you clicked “update”, you will see that the button changes to “Updating...” and stays in that state.  Checking the console, you will see errors. If you reload the post edit screen, your metabox changes will be gone. If you tried to publish, it will appear successful, but the metabox data does not get saved.

In the classic editor, post.js was responsible for applying refreshed nonces supplied by wp_refresh_post_nonces(), but that file is not enqueued in the block editor. The attached patch would re-implement the relevant parts of post.js as part of loading metaboxes in the block editor, and it would create a new PHP callback responsible for creating the nonces.

It would also be possible to extract the heartbeat logic out of post.js into a new JS file enqueued by both the classic and block editor screens rather than use the inline JS approach used in the patch. That would widen the scope of the patch, though, and seemed not worth trying without a consensus that it was necessary.

Thanks to @dlh who helped with creating the attached patch.

[chaion07]

Thanks to @LinSoftware for reporting this. We recently reviewed this during a recent [bug-scrub session]​https://wordpress.slack.com/archives/C02RQBWTW/p1623098539375400. Upon consultation with the team and with Beta 1 coming up in a day this could be a good candidate for future Releases. We also noticed that it lacks Unit Testing. So keyword has been added along with milestone being updated. Thanks

Props to @jorbin

This pull request contains the previously submitted patch. It also adds a unit test.

Fixes https://core.trac.wordpress.org/ticket/52584

Please see ​this recording of this issue, which demos the data loss in the metabox.

[hellofromTonya]

Hello @LinSoftware,

Welcome to WordPress Core's Trac! Thank you for reporting the issue and ​preparing the fix.

As there are testing instructions and unit tests, I'm moving this ticket into the 6.1 milestone for visibility.

What's needed to get it to commit-ready?

• The PR needs a thorough code review.
• ​Needs test reports that validate it works in multiple environments. The keywords needs-testing + has-testing-info alert the Test Team that this ticket is ready for testing.

[jorbin]

Looks good to me

[joemcgill]

In 54122:

Editor: Refresh nones for metaboxes after reauthentication.

This fixes an issue where metaboxes fail to save after a session expires and a user logs in again via the heartbeat API.

Props LinSoftware.
Fixes #52584.

Merged in ​https://github.com/WordPress/wordpress-develop/commit/3fbc7e5aea966a75c6e41c6b65cb365c9748a0df