Let the Gutenberg editor know there are no "unsaved changes"

[eyalacato]

@Mamaduka : We spoke briefly about this at the Contributor Day this afternoon and you asked me to create a discussion about this and tag you.

I have a use case where I use the Gutenberg editor for a custom post type and some ACF fields for extra meta data. In the project I'm using the Marketo API to retrieve data for this custom post type. The architecture is as follows:

• I have one ACF field for the Marketo Program Id for this post. A user enters this Id manually himself.
• I have several other ACF fields which are made to show values retrieved from the Marketo API based on the Marketo Program Id. They need to be filled automatically and not manually by the user.

My workflow is:

• After entering a Marketo Program Id, when you save a post, with the acf/save_post action I'm retrieving data from the Marketo API server-side and I'm storing the data in the database with the update_field function.
• I'd like to show the retrieved values in the corresponding ACF fields on the page. Since saving a post doesn't reload the editor/page, I'm using a Javascript script to retrieve the values from the database with an Ajax Post call and fill the ACF fields with their corresponding values. So far so good.
• Now when I'm leaving the page, an alert pops up that there are unsaved changes. Apparently the editor thinks there are unsaved changes, because ACF field values have changed via Javascript after saving the post.

My question:
Is there a way to let the editor know there are NOT unsaved changes, after finishing my Javascript script that fills the ACF fields with their values. I have tried using dispatch('core/editor').savePost(), however that can create an infinite loop, so that's not the best solution i guess.

Here is a little part of my Javascript code. You said that it's best not to use the "subscribe" function. Can you think with me, what's the best way to achieve my goal?

(() => {
  const { subscribe, select, dispatch } = wp.data;

  // Mark the post as saved to prevent the unsaved changes warning
  function markPostAsSaved() {
    // WHAT TO DO HERE TO LET THE EDITOR KNOW THERE ARE NO UNSAVED CHANGES.
  }

  const editor = select( 'core/editor' );
  if (!editor) {
    return;
  }
  // Set the initial state.
  let wasSavingPost = editor.isSavingPost();
  let wasAutosavingPost = editor.isAutosavingPost();
  subscribe(
    function () {
      const isSavingPost = editor.isSavingPost();
      const isAutosavingPost = editor.isAutosavingPost();
      // Execute on save completion, except for autosaves.
      const shouldExecute =
        wasSavingPost &&
        !wasAutosavingPost &&
        !isSavingPost;
      // Save current state for next inspection.
      wasSavingPost = isSavingPost;
      wasAutosavingPost = isAutosavingPost;
      if (shouldExecute) {
        fetch(
          window.acf_get_field_values_admin.ajax_url,
          {
            method: 'POST',
            headers: {
              'Content-Type': 'application/x-www-form-urlencoded',
            },
            body: new URLSearchParams(
              {
                action: 'acf_get_field_values',
                nonce: window.acf_get_field_values_admin.nonce,
                post_id: window.acf_get_field_values_admin.post_id
              }
            ).toString()
          }
        )
          .then( response => response.json() )
          .then( response => {
            if (response.success) {
              response.data.forEach( (value, key) => {
                // Fill the ACF fields, code not relevant for the discussion.
                markPostAsSaved();
              });
            }
          } );
      }
    }
  )
})();

[Mamaduka]

Thanks for sharing the examples, @eyalacato! Can you also share which store actions you are dispatching in the markPostAsSaved method?

WordPress 6.7 also introduced a new action editor.savePost, which runs after the post is saved. I wonder if this action is more suitable for your use case. You can read more about them here - https://make.wordpress.org/core/2024/10/20/miscellaneous-block-editor-changes-in-wordpress-6-7/#updates-related-to-actions-filters.