Have you ever wondered how you can perform an action on save when using Gutenberg? Are you looking for a hook or a filter so you can perform an action when saving a post?

Good news, you can easily hook into the save with Gutenberg with the following code. Just add the following to your componentDidMount function in your Gutenberg Component.

subscribe( () => {
  const isSavingPost = select('core/editor').isSavingPost();
  const isAutosavingPost = select('core/editor').isAutosavingPost();

  if ( isAutosavingPost && ! isSavingPost ) {
    return;
  }

  // Do action.
});

Here you could insert some JavaScript code, or even send some data via AJAX or the REST API.

For this to work, don’t forget to import the subscribe and select from @wordpress/data:

import { select, subscribe } from '@wordpress/data';

To see an example of this code in action take a look at my guide on using options to store data when creating a Gutenberg block. Here we use the function above to save data to the Settings API on save.

Previous ArticleNext Article

This post has 2 Comments

2

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.