How to prevent saving or publishing a post using lockPostSaving in WordPress Gutenberg?

There can be instances where you might want to prevent publishing a post until certain conditions are met. Although you can handle this in PHP using action hooks, Gutenberg provides an action called lockPostSaving that disables any attempt to save a post.

Let’s set a silly goal for the sake of learning:

Goal: Create a Gutenberg plugin that doesn’t allow the post author to save/publish a post if the post title is empty.

Our goal is pretty simple, so let’s get started!

Register the plugin

import { registerPlugin } from "@wordpress/plugins";

function TitleChecker() {
    return null;
}

registerPlugin( 'empty-title-check', {
    render: TitleChecker
} );
Code language: JavaScript (javascript)

We have registered a plugin called empty-title-check, which accepts a component called <TitleChecker />

We return null because we don’t need to render anything.

Get the post title

import { registerPlugin } from "@wordpress/plugins";
import { useSelect } from "@wordpress/data";

function TitleChecker() {

    const { postTitle } = useSelect( select => {
        const { getEditedPostAttribute } = select( 'core/editor' );

        return {
            postTitle: getEditedPostAttribute( 'title' ),
        }
    } );

    console.log( postTitle )

    return null;
}

registerPlugin( 'empty-title-check', {
    render: TitleChecker
} );
Code language: JavaScript (javascript)

The post title data is part of the core/editor data store. Open your developer console and update the post title. You will notice that it logs the updated post title. So far, so good.

Lock post saving if title is empty

import { registerPlugin } from "@wordpress/plugins";
import { useSelect, useDispatch } from "@wordpress/data";

function TitleChecker() {

    const { postTitle } = useSelect( select => {
        const { getEditedPostAttribute } = select( 'core/editor' );

        return {
            postTitle: getEditedPostAttribute( 'title' ),
        }
    } );

    /**
     * Methods to lock and unlock post saving.
     */
    const { lockPostSaving, unlockPostSaving } = useDispatch( 'core/editor' );

    /**
     * If post title is empty, then lock post saving,
     * else release lock.
     */
    if ( ! postTitle.length ) {
        lockPostSaving( 'title-empty-lock' );
    } else {
        unlockPostSaving( 'title-empty-lock' );
    }

    return null;
}

registerPlugin( 'empty-title-check', {
    render: TitleChecker
} );
Code language: JavaScript (javascript)

If the post title is empty, we run lockPostSaving and give it an ID title-empty-lock. When the post title is not empty, we call another action called unlockPostSaving and refer to the same ID: title-empty-lock to release the lock.

Final result