WordPress Gutenberg Block API：擴(kuò)展塊

歡迎回到我們使用WordPress Gutenberg Block API創(chuàng)建自定義塊的系列教程。本教程是關(guān)于擴(kuò)展我們?cè)谏?a href="http://www.ydqwiac.cn/wordpress-gutenberg-block-api-creating-custom-blocks.html" target="_blank" rel="noopener">一篇文章中創(chuàng)建的隨機(jī)圖像塊。我們已經(jīng)添加了一個(gè)下拉控件來選擇圖像類別。下來將添加更多選項(xiàng)，來進(jìn)行更多自定義。

具體來說，我們將看到如何在編輯器的各個(gè)部分添加塊設(shè)置。沒錯(cuò)，您不僅限于直接在塊本身上添加塊控件！

最終的my-custom-block?插件代碼會(huì)提供下載。只需點(diǎn)擊下載my-custom-block到您的計(jì)算機(jī)，然后像安裝任何其他WordPress插件一樣進(jìn)行安裝。您還可以在我們的GitHub倉庫中找到源代碼。

Gutenberg正在以合理的速度開發(fā)，自上一個(gè)教程發(fā)布以來，已有一個(gè)新的重要版本。本教程中使用的Gutenberg版本已更新至3.0.1，并且某些編輯器UI可能與本系列之前的教程中顯示的屏幕截圖略有不同。

開始擴(kuò)展吧！

我們?cè)谏弦粋€(gè)教程中添加的下拉控件位于編輯器內(nèi)部，直接位于隨機(jī)圖像的標(biāo)記下方。這很方便，但我們也有其他選擇。

我們還可以將塊控件添加到彈出工具欄（在選擇塊時(shí)顯示）和塊檢查器面板。

在上面的界面截圖中，我們可以看到段落塊[1]的工具欄控件，以及面板檢查器[3]中的相關(guān)控件。位置[2]顯示我們的隨機(jī)圖像塊的下拉控件。

您可能已經(jīng)在考慮為自己的塊設(shè)置選擇哪個(gè)位置，但您不必只選擇其中一個(gè)位置。它們不是相互排斥的。例如，對(duì)于段落塊（如上所示），您可以看到塊檢查器面板和工具欄之間的設(shè)置是分開的。

此外，在編輯器中的不同位置有兩個(gè)獨(dú)立的控件可以影響相同的設(shè)置。你可能不想經(jīng)常這樣做，但還是要知道如何實(shí)現(xiàn)它，所以我們稍后會(huì)看到如何做到這一點(diǎn)。

直接塊設(shè)置

讓我們最簡(jiǎn)單為塊添加功能的方法開始，該功能直接位于塊的edit?函數(shù)內(nèi)。我們已經(jīng)使用這種方法添加了我們的隨機(jī)圖像下拉控件，因?yàn)樗恍枰苌俚念~外工作。

我們不會(huì)為塊本身添加新的控件，但我們可以調(diào)整下拉控件的行為，使其更加直觀。為了使其盡可能靠近前端渲染，除非選擇了塊，否則我們可以限制下拉顯示。

我們現(xiàn)在就做這個(gè)修改吧。如果您上次關(guān)注本教程，請(qǐng)在您喜歡的編輯器中打開/my-custom-block/src/random-image/index.js。這是我們隨機(jī)圖像塊的主要JavaScript文件。

傳遞給所有塊的一個(gè)工具是isSelected，它保存了塊的可見性狀態(tài)。我們可以使用它來有條件地顯示類別下拉控件。

首先，isSelected?從props?對(duì)象中拉出并將其添加到edit?函數(shù)內(nèi)的常量列表中。這很有用，所以我們可以用縮短的名稱（即isSelected?而不是props.isSelected）來引用它。

const { attributes: { category }, setAttributes, isSelected } = props;

接下來，我們可以使用此屬性來確定是否應(yīng)顯示下拉控件：

{ isSelected && (
    <form onSubmit={ setCategory }>
        <select value={ category } onChange={ setCategory }>
            <option value="animals">Animals</option>
            <option value="arch">Architecture</option>
            <option value="nature">Nature</option>
            <option value="people">People</option>
            <option value="tech">Tech</option>
        </select>
    </form>
) }

這是一種測(cè)試isSelected的簡(jiǎn)便方法?，因?yàn)槲覀儫o法在JSX代碼中使用完整的JavaScript?if?語句。

確保您仍在觀看文件并進(jìn)行更改，以便將任何塊的源代碼（JSX，ES6 +，Sass等）轉(zhuǎn)換為有效的JavaScript和CSS。如果您當(dāng)前沒有在文件中查看更改，請(qǐng)?jiān)?strong>my-custom-block插件根文件夾中打開命令行窗口并輸入npm start。

打開Gutenberg編輯器并添加隨機(jī)圖像塊。這次，如果尚未單擊塊，則下拉控件不可見。

這為塊提供了更好的互動(dòng)體驗(yàn)。

工具欄控件

如果您使用了任何核心Gutenberg塊（例如段落塊），那么您將熟悉工具欄設(shè)置。選擇“段落”塊后，會(huì)出現(xiàn)一個(gè)彈出工具欄，其中包含用于格式化文本的按鈕。這種類型的控件非常適用于具有開/關(guān)類型狀態(tài)的塊設(shè)置 – 例如，文本對(duì)齊或格式（如粗體或斜體）。

我們將使用內(nèi)置對(duì)齊工具欄控件來允許下拉圖像類別控件設(shè)置左對(duì)齊（默認(rèn)），右對(duì)齊或居中對(duì)齊。

首先，我們需要從wp.blocks中提取AlignmentToolBar?和BlockControls?組件。這些允許我們?cè)谶x中塊時(shí)在上方的浮動(dòng)工具欄中顯示對(duì)齊控件。這些是我們可以在自己的塊中使用的核心組件的一部分。

const {
    AlignmentToolbar,
    BlockControls,
    registerBlockType
} = wp.blocks;

該BlockControls?組件充當(dāng)工具欄容器，并將AlignmentToolbar?放在里面。

我們?nèi)匀恍枰謩?dòng)設(shè)置對(duì)齊工具欄的行為，我們可以添加新categoryAlign?屬性來存儲(chǔ)塊的對(duì)齊狀態(tài)（左，右或居中）。

我們的attributes?對(duì)象現(xiàn)在包含兩個(gè)設(shè)置。

attributes: {
    category: {
        type: 'string',
        default: 'nature'
    },
    categoryAlign: {
        type: 'string'
        default: ''
    }
}

categoryAlign?屬性的默認(rèn)值為空字符串，這將導(dǎo)致默認(rèn)情況下不應(yīng)用對(duì)齊。

要引用新屬性，我們可以將此值拉出到自己的常量變量中，就像我們對(duì)下拉category?屬性所做的那樣。

const { attributes: { category, categoryAlign }, setAttributes, isSelected } = props;

我們現(xiàn)在需要做的就是將兩個(gè)新組件放入edit?函數(shù)中并配置屬性。

<BlockControls>
    <AlignmentToolbar
        value={ categoryAlign }
        onChange={ value => setAttributes( { categoryAlign: value } ) }
    />
</BlockControls>

正如你所看到的，我們需要做的是，當(dāng)工具欄按鈕被點(diǎn)擊時(shí)，分配Alignmenttoolbar?的?value屬性給categoryAlign?屬性，并調(diào)用setAttributes?函數(shù)。此函數(shù)會(huì)更新categoryAlign?屬性并使所有內(nèi)容保持同步。

要應(yīng)用下拉控件的對(duì)齊樣式，我們需要向表單元素添加樣式屬性。

<form onSubmit={ setCategory } style={ {textAlign: categoryAlign} }>

請(qǐng)注意，我們不需要此控件來影響前端的任何內(nèi)容，因此我們不需要向塊的save?函數(shù)添加任何代碼。

添加設(shè)置面板

塊檢查器面板為您提供了添加塊控件的空間，是更復(fù)雜控件的理想位置。

我們將專注于向檢查器面板添加兩個(gè)下拉控件。第一個(gè)將是類別下拉控件的副本，用來選擇隨機(jī)圖像的類型。這演示了如何通過多個(gè)控件來更新公共屬性。

更新一個(gè)控件后，相應(yīng)的控件也會(huì)自動(dòng)更新！但實(shí)際上，您通常只需要一個(gè)設(shè)置一個(gè)控件。

第二個(gè)下拉控件將??允許您選擇應(yīng)用于隨機(jī)圖像的濾鏡。PlaceIMG?Web服務(wù)支持兩種類型的過濾器 —— grayscale 和 sepia ——我們可以在它們之間選擇，只需添加sepia?或grayscale?到HTTP請(qǐng)求的網(wǎng)址中。如果我們不指定過濾器，則將返回標(biāo)準(zhǔn)彩色圖像。

兩個(gè)下拉列表的代碼非常相似，因此我們將它們一起添加。

首先，讓我們定義我們需要的新塊和組件。

const {
    AlignmentToolbar,
    BlockControls,
    registerBlockType,
    InspectorControls
} = wp.blocks;
 
const {
    PanelBody,
    PanelRow
} = wp.components;
 
const {
    Fragment
} = wp.element;

在這里，新的變量是InspectorControls，PanelBody，PanelRow，和Fragment，這些都是用來幫助創(chuàng)建Inspector面板UI。

當(dāng)您需要從edit?或save?函數(shù)返回多個(gè)頂級(jí)元素但不想將它們包裝在將要輸出的元素中時(shí)，<Fragment>?組件會(huì)非常有用。

<Fragment>?不會(huì)在前端輸出任何標(biāo)記，就像一個(gè)看不見的容器。它只是一種返回多個(gè)頂級(jí)元素的便捷方式，并且是以前返回元素?cái)?shù)組的方法的替代方法。

我們只需要添加一個(gè)名為 imageFilter?的新屬性，因?yàn)楝F(xiàn)有category?屬性可以重用。

attributes: {
    category: {
        type: 'string',
        default: 'nature'
    },
    categoryAlign: {
        type: 'string',
        default: ''
    },
    imageFilter: {
        type: 'string',
        default: ''
    }
}

在edit?函數(shù)內(nèi)部，我們需要引用新屬性來添加一個(gè)新變量。

const { attributes: { category, categoryAlign, imageFilter }, setAttributes, isSelected } = props;

添加塊檢查器面板非常簡(jiǎn)單。我們將使用的組件結(jié)構(gòu)如下：

<InspectorControls>
    <PanelBody>
        <PanelRow>
            ...
        </PanelRow>
        <PanelRow>
            ...
        </PanelRow>
    </PanelBody>
    <PanelBody>
        <PanelRow>
            ...
        </PanelRow>
        <PanelRow>
            ...
        </PanelRow>
    </PanelBody>
</InspectorControls>

該<InspectorControls>?組件作為塊檢查器容器，<PanelBody>?定義了各個(gè)可折疊部分。在每個(gè)組件中，您可以擁有任意數(shù)量的<PanelRow>?組件，而這些組件又包含了您的控件。

我們已經(jīng)為可以重用的類別下拉控件定義了標(biāo)記。為此，將其抽象為一個(gè)單獨(dú)的函數(shù)：

function showForm() {
    return (
        <form onSubmit={ setCategory } style={ {textAlign: categoryAlign} }>
            <select id="image-category" value={ category } onChange={ setCategory }>
                <option value="animals">Animals</option>
                <option value="arch">Architecture</option>
                <option value="nature">Nature</option>
                <option value="people">People</option>
                <option value="tech">Tech</option>
            </select>
        </form>
    );
}

然后，只要我們需要渲染類別下拉控件，就可以引用此函數(shù)。塊檢查器面板的標(biāo)記需要在塊標(biāo)記之外，因此我們可以在返回之前使用<Fragment>?組件將它們包裹起來。

接下來，我們需要為類別和圖像過濾器下拉列表添加塊檢查器組件。這些需要在<PanelRow>?組件內(nèi)部定義，我們還必須定義一個(gè)新的回調(diào)函數(shù)來處理onChange?事件。這與上一個(gè)教程中的類別下拉代碼非常相似，所以現(xiàn)在應(yīng)該對(duì)它比較熟悉了。

把所有代碼放在一起，現(xiàn)在edit方法的return函數(shù)看起來是這樣的：

return (
    <Fragment>
        <InspectorControls>
            <PanelBody title={ __('Image Settings') }>
                <PanelRow>
                    <label>Set Filter</label>
                    { showForm() }
                </PanelRow>
                <PanelRow>
                    <label>Set Filter</label>
                    <form onSubmit={ setFilter }>
                        <select id="image-filter" value={ imageFilter } onChange={ setFilter }>
                            <option value="">None</option>
                            <option value="sepia">Sepia</option>
                            <option value="grayscale">Grayscale</option>
                        </select>
                    </form>
                </PanelRow>
            </PanelBody>
        </InspectorControls>
        <div className={ props.className }>
            <BlockControls>
                <AlignmentToolbar
                    value={ categoryAlign }
                    onChange={ value => setAttributes( { categoryAlign: value } ) }
                />
            </BlockControls>
            <RandomImage filter={ imageFilter } category={ category } />
            { isSelected && ( showForm() ) }
        </div>
    </Fragment>
);

而setFilter?回調(diào)被定義為：

function setFilter( event ) {
    const selected = event.target.querySelector( '#image-filter option:checked' );
    setAttributes( { imageFilter: selected.value } );
    event.preventDefault();
}

要獲取過濾后的圖像，我們需要在RandomImage?每次更改下拉列表時(shí)更新組件以接受新的過濾器值。

function RandomImage( { category, filter } ) {
    if(filter) {
        filter = '/' + filter;
    }
    const src = 'https://placeimg.com/320/220/' + category + filter;
    return <img src={ src } alt={ category } />;
}

請(qǐng)注意我們是如何在edit?方法中使用這個(gè)新的組件屬性將新的過濾器值發(fā)送到PlaceIMG。

<RandomImage filter={ imageFilter } category={ category } />

所有代碼更改會(huì)創(chuàng)建一個(gè)新的塊檢查器面板，其中包含兩個(gè)下拉控件來更改圖像類別和過濾器。

要使新的過濾器屬性也適用于前端，我們只需要更新save方法。

save: function( props ) {
    const { attributes: { category, imageFilter } } = props;
    return (
        <div>
            <RandomImage filter={ imageFilter } category={ category } />
        </div>
    );
}

小結(jié)

在這篇文章中，我們介紹了向塊添加設(shè)置的三種不同方法：

• 彈出工具欄
• 直接在塊內(nèi)部
• 塊檢查器面板

我們只為每個(gè)塊添加了基本設(shè)置，但我們可以輕松地做更多，比如添加對(duì)多個(gè)圖像的支持，添加圖像標(biāo)題以及控制樣式（如邊框顏色、半徑或隨機(jī)圖像尺寸）。

我敢肯定，到目前為止，你可能已經(jīng)有了一些創(chuàng)建自己的自定義塊的想法。我很想知道你在自己的項(xiàng)目中找到哪些有用的塊！

我們剛剛在Envato Tuts +開始使用Gutenberg，如果你想在未來的教程中看到Gutenberg塊開發(fā)的任何特定方面更深入的內(nèi)容，請(qǐng)通過評(píng)論告訴我們。

原文：WordPress Gutenberg Block API: Extending Blocks?，發(fā)布于 2018年6月18日，由?倡萌@WordPress大學(xué)?翻譯，未經(jīng)許可，禁止轉(zhuǎn)載譯文和他用！