Thêm điều kiện xuất bản trước vào trình chỉnh sửa khối

Việc giới thiệu Block Editor đã giết chết tất cả các plugin cung cấp các điều kiện xuất bản, chẳng hạn như số từ tối thiểu, yêu cầu hình ảnh đặc trưng, ​​v.v.

Nhưng Block Editor đã giới thiệu các kiểm tra trước khi xuất bản :

Xinh đẹp. Làm thế nào chúng ta có thể vô hiệu hóa Publishnút cho đến khi một lượng điều kiện đã được hoàn thành?

Ví dụ về bốn (rất) điều kiện khác nhau:

1. Số lượng từ tối thiểu (ví dụ: 500từ)
2. Thẻ tối thiểu / tối đa (ví dụ: 3-5thẻ)
3. Danh mục tối thiểu (không phải vậy uncategorized)
4. Hình ảnh nổi bật được chỉ định

Những gì chúng ta có cho đến nay

Như mong đợi, các tài liệu là không tồn tại. Nhưng khách hàng tiềm năng nằm rải rác trên web.

Trong core/editor, chúng ta có thể sử dụng .lockPostSaving () để tắt Publishnút và mở khóa qua .unlockPostSaving().

Chúng tôi có thể thêm một bảng điều khiển vào màn hình xuất bản trước thông qua PluginPrePublishPanel. Ví dụ (bởi 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,
});

Nó hoạt động:

Và chúng tôi có các cuộc thảo luận tuyệt vời trên 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 } );

Trưng bày:

Các giải pháp trên giải quyết các yêu cầu được liệt kê trong câu hỏi. Một điều có thể được mở rộng là kiểm tra danh mục, tôi đang đưa ra một số giả định về ID danh mục.

Tôi đã giữ tất cả các kiểm tra trong cùng một thành phần vì lý do ngắn gọn và dễ đọc ở đây. Tôi sẽ khuyên bạn nên di chuyển từng phần vào một thành phần riêng biệt và có khả năng biến chúng thành Thành phần bậc cao hơn (ví dụ vớiWordCount).

Tôi có những bình luận nội tuyến giải thích những gì đang được thực hiện nhưng rất vui được giải thích thêm nếu có bất kỳ câu hỏi nào.

EDIT: Đây là cách tôi mê mẩn kịch bản

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

Thêm một số chi tiết về quá trình xây dựng. Tôi đang sử dụng @ wordpress / scripts và chạy các đoạn script sau:

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

Chỉnh sửa 2:

Bạn có thể lấy dữ liệu đính kèm qua:

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

Cập nhật 29.02.2020

Bạn phải thay thế select( 'core/editor' ).getBlocks()với select( 'core/block-editor' ).getBlocks()để cho tiện làm việc

Điều này làm việc cho tôi:

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

Các bước đầy đủ để tạo bảng điều khiển với @ wordpress / scripts

1. Tạo một thư mục pre-publish-checklisttrong chủ đề của bạn
2. Tạo bên trong tệp thư mục pack.json với

 "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. tạo một tệp trong thư mục với đường dẫn 'src / index.js' và đặt mã vào tệp
4. yarn
5. yarn build
6. Thêm mã này vào hàm.php để liệt kê tệp

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