為WordPress Gutenberg 區(qū)塊創(chuàng)建樣式變體：第1部分

今明兩天，倡萌將和大家分享《為WordPress Gutenberg塊創(chuàng)建樣式變體》的教程，出自?ENVATO TUTS+，由英國開發(fā)者?David Gwyer?撰寫。如果你的英文水平比較好，建議直接到官方看原版：https://code.tutsplus.com/tutorials/implementing-block-style-variations-in-gutenberg-part-1–cms-32243，倡萌水平有限，翻譯可能不那么好，請見諒。此外，由于內(nèi)容還是和?Gutenberg 區(qū)塊API 相關(guān)，所以倡萌還是將文章歸屬到《WordPress Gutenberg Block API》系列中。

該系列文章是從2018年11月28日開始寫的，當時 WordPress 5.0 還沒有發(fā)布，所以教程可能不一定十分符合當前你看到的?Gutenberg 編輯器，但是依舊很有幫助。在翻譯過程中，倡萌也會按照作者原來的行文進行，有些事件表述可能會和當前不太符合，請知曉。

對于WordPress開發(fā)人員來說，現(xiàn)在是一個激動人心的時刻，5.0 正式版即將到來。這將標志著代號為Gutenberg的全新編輯的首次亮相。如果您經(jīng)常與WordPress接觸，無論是作為開發(fā)人員還是作為用戶，那么您可能會理解為什么這是個大新聞。

然而，并非所有人都期待新版本，因為它確實為WordPress帶來了截然不同的編輯體驗。關(guān)于這將如何影響更廣泛的WordPress生態(tài)系統(tǒng)存在一些不確定性。但是，新編輯器有可能徹底改變您為WordPress站點創(chuàng)建內(nèi)容的方式。即使它可能遇到初始阻力，當它集體擊中用戶時，我認為最終可能會以一種經(jīng)典的TinyMCE編輯器無法實現(xiàn)的方式與您的內(nèi)容建立更加切實的聯(lián)系。

您可以從WordPress插件庫安裝Gutenberg插件，在WordPress 5.0版本發(fā)布之前試用新的編輯器。如果您還沒有機會嘗試，那么我強烈建議您這樣做，以便預覽WordPress未來的編輯體驗！

新編輯器完全基于區(qū)塊來創(chuàng)建內(nèi)容。您添加到編輯器的每個內(nèi)容都是一個塊。這包括所有您喜歡的元素，如滑塊、段落、按鈕、列表、圖像、引用等。將塊添加到編輯器后，您可以配置控制其外觀和行為的設(shè)置。這些可以在塊本身或通過檢查器面板（位于編輯器屏幕右側(cè)）進行編輯。塊設(shè)置有時在兩個位置都重復，但這在塊與塊之間會有所不同。

但是，幾乎所有塊都在檢查器面板中有一個選項，可以手動添加一個或多個CSS類名以允許進一步來自定義區(qū)塊。如果您希望覆蓋核心塊或第三方塊的樣式，這可能非常有用。

雖然這樣可以正常工作，但擴展此行為并允許通過一組預定義樣式選項，來自定義區(qū)塊將是非常不錯的。這正是區(qū)塊樣式變體給我們帶來的好處，我們將在本教程中專注于它們。

先決條件

我們還將看看如何將塊樣式變體添加到您自己的塊以及如何擴展現(xiàn)有塊，因此，為了可以順利地進行，您需要熟悉WordPress插件開發(fā)的基礎(chǔ)知識以及知道如何創(chuàng)建區(qū)塊。

如果你需要速成課程，那么請查看我關(guān)于創(chuàng)建自定義塊的四部分教程。它涵蓋了本教程中您需要了解的所有內(nèi)容 – 除了塊樣式變體之外，這個特定教程的重點！

此外，如果您想跟隨代碼并自己嘗試，那么您將需要一個本地開發(fā)服務器來運行WordPress（例如WAMP，MAMP等）和代碼編輯器。

背景

塊樣式變量API?在插件的v3.2中引入了Gutenberg項目，允許您通過編輯器界面直接應用替代塊樣式。

要在塊樣式變體之前獲得相同的結(jié)果，必須?在“塊高級”??部分下的塊檢查器面板的“?附加CSS類”文本字段中手動輸入自定義CSS類。

如果您對塊樣式變體的原始提議感興趣，那么您可以閱讀官方Gutenberg倉庫中的pull請求中的完整詳細信息。

可以在塊工具欄中直接訪問為塊定義的任何樣式變體。選擇塊，然后單擊工具欄上的左上角圖標以顯示“?塊樣式”窗口。

還記得我之前說過一些塊設(shè)置可以直接在塊和檢查器面板中訪問嗎？嗯，這就是塊樣式變體的情況！確保選中該塊并查看檢查器面板。

這是為了方便起見，您可以從最適合您的位置選擇樣式變體。例如，在較大的屏幕上，您可以選擇通過檢查器面板更改塊樣式，因為它使您可以通過單擊鼠標在樣式之間進行切換。但是，在較小的設(shè)備上，您可能希望隱藏檢查器面板，只需通過塊工具欄更改樣式。

核心塊支持

目前支持塊樣式變化的幾個核心塊包括：

• 按鈕
• 醒目引文
• 引語
• 分隔器
• 表格

我確信將來會為其他核心塊添加支持，因為此功能將被廣泛采用。我確信很多用戶會期望為大多數(shù)塊選擇預定義的樣式選項。一旦你使用了塊樣式變體，就很容易理解為什么會出現(xiàn)這種情況。

當然，您也可以將塊樣式變體添加到您自己的塊中。我們接下來將探討具體的實現(xiàn)細節(jié)。

實現(xiàn)塊樣式變體

有兩種方法可用于實現(xiàn)自定義塊樣式變體。如果您可以訪問塊源碼，則可以在registerBlockType()通過style屬性直接在函數(shù)內(nèi)指定塊樣式變體。

例如，這就是按鈕核心塊樣式屬性定義的樣子。

styles: [
    { name: 'default', label: _x( 'Rounded', 'block style' ), isDefault: true },
    { name: 'outline', label: __( 'Outline' ) },
    { name: 'squared', label: _x( 'Squared', 'block style' ) },
],

這里，注冊了三種新的塊樣式變體。請注意，Rounded??樣式被設(shè)置為默認樣式。

但是，如果您無法訪問塊源代碼，那么您可以采用另一種方法。在Gutenberg 3.4中，添加了兩個新函數(shù)來注冊和取消注冊塊定義之外的塊樣式變體。

要注冊自定義塊樣式變體，請使用以下registerBlockStyle()函數(shù)：

wp.blocks.registerBlockStyle( 'core/button', {
    name: 'custom-button-style',
    label: 'My Button Style'
} );

這會添加一個名為custom-button-style核心按鈕塊的新塊樣式變體。現(xiàn)在，當一個按鈕塊插入編輯器時，您將看到可用的新塊樣式變體。

選擇后，塊樣式變體會?在塊檢查器面板中的is-style-custom-button-style“?附加CSS類”文本字段中添加CSS類。

這反過來觸發(fā)了塊輸出的更新，并且該類將被添加到HTML標記中。

您可能想知道在registerBlockStyle()自己的代碼中添加函數(shù)的位置。別擔心 – 我們將在下一篇文章中介紹完整的示例，您將能夠下載最終的插件代碼，以便您自己進行測試。

一個小問題！

當您第一次插入支持塊樣式變體的區(qū)塊，有趣的是，盡管原來就默認顯示了一個CSS類，但是沒有CSS類會被添加到塊標記，直到??你明確點擊塊樣式變體。

自己試試吧。

將新的按鈕塊插入編輯器并打開塊樣式變化選項。您應該會看到?默認情況下選中“?圓角”選項。如果在塊檢查器中打開“?高級”部分，會發(fā)現(xiàn)在文本字段中并沒有添加CSS類。因此，不會在塊標記中插入CSS類。查看編輯器中按鈕塊輸出的HTML以自行確認。

現(xiàn)在返回按鈕塊的塊樣式變體設(shè)置，然后單擊默認選項（選定的選項）或任何其他塊樣式選項。您將立即看到CSS類被添加到Additional CSS Class文本字段和塊??包裝器標記中。一旦選擇了塊樣式變體，也將應用為自定義類的CSS規(guī)則。

這種行為在第一次加載時有點混亂，因為直覺上你會期望為默認選擇的塊樣式變體自動添加CSS類。

結(jié)論

我們已經(jīng)了解了塊樣式變體以及為什么它們是塊編輯體驗的有用補充。我還演示了塊樣式變體的基本實現(xiàn)。

在下一篇文章中，我們將詳細介紹如何注冊自己的塊樣式并通過插件以及子主題連接CSS。

我們還將介紹如何取消注冊塊樣式以及如何在首次將塊插入編輯器時設(shè)置默認選擇的樣式變體。

原文：Create Style Variations for WordPress Gutenberg Blocks: Part 1?，發(fā)布于 2018年11月28日，由?倡萌@WordPress大學?翻譯，未經(jīng)許可，禁止轉(zhuǎn)載和挪用譯文！