7

The introduction of the Block Editor killed all plugins which offered publishing conditions, such as minimum word counts, featured image requirements etc.

But the Block Editor did introduce the pre-publish checks:

Pre-publish checks

Beautiful. How can we disable the Publish button until a set amount of conditions have been fulfilled?

Examples of four (very) different conditions:

  1. Minimum word count (example: 500 words)
  2. Min/max tags (example: 3-5 tags)
  3. Min category (that isn't uncategorized)
  4. Featured image is assigned

What we have so far

As expected, the documentation is non-existent. But leads are scattered across the web.

In core/editor, we can use .lockPostSaving() to disabled the Publish button, and unlock it via .unlockPostSaving().

We can add a panel to the pre-publish screen via PluginPrePublishPanel. Example (by MadMaardigan):

var PluginPrePublishPanel = wp.editPost.PluginPrePublishPanel;
var registerPlugin = wp.plugins.registerPlugin;

function Component() {
    // lock post saving
    wp.data.dispatch('core/editor').lockPostSaving()

    // unlock post saving
    // wp.data.dispatch('core/editor').unlockPostSaving()

    return wp.element.createElement(
        PluginPrePublishPanel,
        {   
            className: 'my-plugin-publish-panel',
            title: 'Panel title',
            initialOpen: true,
        },  
        'Panel content'
    );  
}

registerPlugin( 'my-plugin', {
  render: Component,
});

It works:

Custom pre-publish panel

And we have great discussions on GitHub: #7020, #7426, #13413, #15568, #10649...

  • It looks like you have the approach nailed down - are you looking for the code that implements this approach? – Welcher May 30 at 11:30
  • @Welcher Yes, absolutely. With the (four) conditions. – Christine Cooper May 30 at 11:40
  • Please check this ostraining.com/blog/wordpress/blog-post-checklists. This may help you. – Bhupen Jun 5 at 5:39
  • @Bhupen Thanks, but all plugins listed in that article doesn't work with Gutenberg, beside perhaps one, which is a paid plugin. – Christine Cooper Jun 5 at 8:45
9
+200
const { registerPlugin } = wp.plugins;
const { PluginPrePublishPanel } = wp.editPost;
const { select, dispatch } = wp.data;
const { count } = wp.wordcount;
const { serialize } = wp.blocks;
const { PanelBody } = wp.components;

const PrePublishCheckList = () => {
    let lockPost = false;

    // Get the WordCount
    const blocks = select( 'core/editor' ).getBlocks();
    const wordCount = count( serialize( blocks ), 'words' );
    let wordCountMessage = `${wordCount}`;
    if ( wordCount < 500 ) {
        lockPost = true;
        wordCountMessage += ` - Minimum of 500 required.`;
    }

    // Get the cats
    const cats = select( 'core/editor' ).getEditedPostAttribute( 'categories' );
    let catsMessage = 'Set';
    if ( ! cats.length ) {
        lockPost = true;
        catsMessage = 'Missing';
    } else {
        // Check that the cat is not uncategorized - this assumes that the ID of Uncategorized is 1, which it would be for most installs.
        if ( cats.length === 1 && cats[0] === 1 ) {
            lockPost = true;
            catsMessage = 'Cannot use Uncategorized';
        }
    }

    // Get the tags
    const tags = select( 'core/editor' ).getEditedPostAttribute( 'tags' );
    let tagsMessage = 'Set';
    if ( tags.length < 3 || tags.length > 5 ) {
        lockPost = true;
        tagsMessage = 'Required 3 - 5 tags';
    }

    // Get the featured image
    const featuredImageID = select( 'core/editor' ).getEditedPostAttribute( 'featured_media' );
    let featuredImage = 'Set';

    if ( featuredImageID === 0 ) {
        lockPost = true;
        featuredImage = 'Not Set';
    }

    // Do we need to lock the post?
    if ( lockPost === true ) {
        dispatch( 'core/editor' ).lockPostSaving();
    } else {
        dispatch( 'core/editor' ).unlockPostSaving();
    }
    return (
        <PluginPrePublishPanel title={ 'Publish Checklist' }>
            <p><b>Word Count:</b> { wordCountMessage }</p>
            <p><b>Categories:</b> { catsMessage }</p>
            <p><b>Tags:</b> { tagsMessage }</p>
            <p><b>Featured Image:</b> { featuredImage }</p>
        </PluginPrePublishPanel>
    )
};

registerPlugin( 'pre-publish-checklist', { render: PrePublishCheckList } );

Display:

enter image description here

The solution above addresses the requirements listed in the question. One thing that can be expanded on is the category checking, I am making some assumptions about the category ID.

I have kept all of the checks in the same component for the sake of brevity and readability here. I would recommend moving each portion into a separate component and potentially making them Higher Order Components ( i.e withWordCount ).

I have inline comments that explain what is being done but am happy to explain further if there are any questions.

EDIT: Here's how I'm enqueuing the script

function enqueue_block_editor_assets() {
    wp_enqueue_script(
        'my-custom-script', // Handle.
        plugin_dir_url( __FILE__ ) . '/build/index.js',
        array( 'wp-blocks', 'wp-i18n', 'wp-element', 'wp-editor', 'wp-edit-post', 'word-count' ) // Dependencies, defined above.
    );
}
add_action( 'enqueue_block_editor_assets', 'enqueue_block_editor_assets' );

Adding some more details about the build process. I am using @wordpress/scripts and running the following scripts:

"scripts": {
    "build": "wp-scripts build",
    "start": "wp-scripts start"
  },

Edit 2:

You can get the attachment data via:

wp.data.select('core').getMedia( ID )
  • There was a minor issue with the operator for the tags (edited your answer), but works like a charm. I now know how little I know about developing with Gutenberg. Thank you so much for this answer! PS: The reason why it was not displaying originally for me was because users on contributor level can't see the pre-publish panel properly, see this bug report. – Christine Cooper Jun 17 at 13:56
  • Update: my bug report is successful and they are fixing it! – Christine Cooper Jul 12 at 11:37

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.