Fügen Sie dem Blockeditor Vorveröffentlichungsbedingungen hinzu

9

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 :

Schecks vorveröffentlichen

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:

Benutzerdefiniertes Pre-Publish-Panel

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

Christine Cooper
quelle
Es sieht so aus, als hätten Sie den Ansatz festgenagelt - suchen Sie nach dem Code, der diesen Ansatz implementiert?
Welcher
@ Welcher Ja, absolut. Mit den (vier) Bedingungen.
Christine Cooper
Bitte überprüfen Sie diese ostraining.com/blog/wordpress/blog-post-checklists . Dies kann Ihnen helfen.
Bhupen
@ Bhupen Danke, aber alle in diesem Artikel aufgeführten Plugins funktionieren nicht mit Gutenberg, außer vielleicht einem, das ein kostenpflichtiges Plugin ist.
Christine Cooper

Antworten:

9
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:

Geben Sie hier die Bildbeschreibung ein

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 )
Welcher
quelle
Es gab ein kleines Problem mit dem Operator für die Tags (Ihre Antwort wurde bearbeitet), aber es funktioniert wie ein Zauber. Ich weiß jetzt, wie wenig ich über die Entwicklung mit Gutenberg weiß. Vielen Dank für diese Antwort! PS: Der Grund, warum es ursprünglich nicht für mich angezeigt wurde, war, dass Benutzer auf contributorEbene das Vorveröffentlichungsfenster nicht richtig sehen können. Siehe diesen Fehlerbericht .
Christine Cooper
Update: Mein Fehlerbericht ist erfolgreich und sie beheben ihn !
Christine Cooper
3

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"
 }
}
  1. Erstellen Sie eine Datei im Ordner mit dem Pfad 'src / index.js' und platzieren Sie den Code in der Datei
  2. yarn
  3. yarn build
  4. 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' );
BenB
quelle