Fügen Sie dem Blockeditor Vorveröffentlichungsbedingungen hinzu

Mit der Einführung des Block-Editors wurden alle Plugins gelöscht, die Veröffentlichungsbedingungen wie Mindestwortzahlen, Bildanforderungen usw. bieten.

Der Blockeditor hat jedoch die Überprüfungen vor der Veröffentlichung eingeführt :

Wunderschönen. Wie können wir die PublishSchaltfläche deaktivieren , bis eine bestimmte Anzahl von Bedingungen erfüllt ist?

Beispiele für vier (sehr) unterschiedliche Bedingungen:

1. Minimale Wortzahl (Beispiel: 500Wörter)
2. Min / Max-Tags (Beispiel: 3-5Tags)
3. Min Kategorie (das ist nicht uncategorized)
4. Ausgewähltes Bild wird zugewiesen

Was wir bisher haben

Wie erwartet ist die Dokumentation nicht vorhanden. Die Leads sind jedoch über das Internet verteilt.

In core/editorkönnen wir .lockPostSaving () verwenden, um die PublishSchaltfläche zu deaktivieren und über zu entsperren .unlockPostSaving().

Wir können dem Vorveröffentlichungsbildschirm über ein Panel hinzufügen PluginPrePublishPanel. Beispiel (von 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,
});

Es klappt:

Und wir haben großartige Diskussionen auf GitHub: # 7020 , # 7426 , # 13413 , # 15568 , # 10649 ...

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/block-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 } );

Anzeige:

Die obige Lösung erfüllt die in der Frage aufgeführten Anforderungen. Eine Sache, die erweitert werden kann, ist die Kategorieprüfung. Ich mache einige Annahmen über die Kategorie-ID.

Der Kürze halber habe ich alle Überprüfungen aus Gründen der Kürze und Lesbarkeit in derselben Komponente gespeichert. Ich würde empfehlen, jeden Teil in eine separate Komponente zu verschieben und sie möglicherweise zu Komponenten höherer Ordnung zu machen (dh mit WordCount).

Ich habe Inline-Kommentare, die erklären, was getan wird, erkläre sie aber gerne weiter, wenn es Fragen gibt.

EDIT: So stelle ich das Skript in die Warteschlange

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' );

Hinzufügen weiterer Details zum Erstellungsprozess. Ich verwende @ wordpress / scripts und führe die folgenden Skripte aus:

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

Bearbeiten 2:

Sie können die Anhangsdaten erhalten über:

wp.data.select('core').getMedia( ID )

Update 29.02.2020

Sie müssen ersetzen select( 'core/editor' ).getBlocks()mit select( 'core/block-editor' ).getBlocks()dafür zu arbeiten, um

Das hat bei mir funktioniert:

path\to\theme\pre-publish-checklist\src\index.js

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/block-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 } );

Vollständige Schritte zum Erstellen des Panels mit @ wordpress / scripts

1. Erstellen Sie einen Ordner pre-publish-checklistin Ihrem Thema
2. Erstellen Sie im Ordner package.json die Datei mit

 "scripts": {
   "build": "wp-scripts build",
   "check-engines": "wp-scripts check-engines",
   "check-licenses": "wp-scripts check-licenses",
   "format:js": "wp-scripts format-js",
   "lint:css": "wp-scripts lint-style",
   "lint:js": "wp-scripts lint-js",
   "lint:md:docs": "wp-scripts lint-md-docs",
   "lint:md:js": "wp-scripts lint-md-js",
   "lint:pkg-json": "wp-scripts lint-pkg-json",
   "packages-update": "wp-scripts packages-update",
   "start": "wp-scripts start",
   "test:e2e": "wp-scripts test-e2e",
   "test:unit": "wp-scripts test-unit-js"
 },
 "dependencies": {
   "@wordpress/scripts": "^7.1.2"
 }
}

3. Erstellen Sie eine Datei im Ordner mit dem Pfad 'src / index.js' und platzieren Sie den Code in der Datei
4. yarn
5. yarn build
6. Fügen Sie diesen Code zu functions.php hinzu, um die Datei in die Warteschlange zu stellen

function enqueue_block_editor_assets() {
    wp_enqueue_script(
        'pre-publish-checklist', // Handle.
        get_template_directory_uri(). '/pre-publish-checklist/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' );