為 WordPress 古騰堡塊設計自訂樣式：第 1 部分

現在對 WordPress 開發者來說是一個令人興奮的時刻，5.0 版本的正式發布即將到來。這將標誌著代號為古騰堡的全新編輯器的首次亮相。如果您經常與 WordPress 打交道，無論是作為開發人員還是作為用戶，那麼您可能會明白為什麼這是一個大新聞。

不過，並不是所有人都期待新版本，因為它確實為 WordPress 帶來了非常不同的編輯體驗。這將如何影響更廣泛的 WordPress 生態系統存在一些不確定性。然而，新的編輯器有可能徹底改變您為 WordPress 網站創建內容的方式。儘管它在吸引用戶時可能會遇到最初的阻力全體，但我認為它最終可以以經典的 TinyMCE 編輯器無法實現的方式與您的內容建立更切實的聯繫.

您可以透過從 WordPress 外掛程式儲存庫安裝 Gutenberg 插件，在計畫的 WordPress 5.0 版本發布之前試用新編輯器。如果您還沒有機會嘗試，那麼我強烈建議您這樣做，以預覽 WordPress 中未來的編輯體驗！

在新編輯器中建立內容完全基於區塊。您新增到編輯器的每一段內容都是一個區塊。這包括所有您喜歡的元素，例如滑桿、段落、按鈕、清單、圖像、推薦等。將區塊新增至編輯器後，您可以配置控制其外觀和行為的設定。這些可以在塊本身上或透過檢查器面板（位於編輯器螢幕右側）進行編輯。區塊設定有時會在兩個位置重複，但這因區塊而異。

不過，幾乎所有區塊都在檢查器面板中提供了一個選項，可以手動新增一個或多個 CSS 類別名，以允許進一步自訂區塊。如果您希望覆蓋核心區塊或第三方區塊的樣式，這可能非常有用。

雖然這工作正常，但擴展此行為並允許透過一組添加區塊自訂選項將是有益的預先定義的樣式選擇。這正是塊樣式變化為我們帶來的，我們將在本教程中專門關注它們。

先決條件

我們還將了解如何為您自己的區塊添加區塊樣式變體以及如何擴展現有區塊，因此為了繼續進行，您最好需要熟悉以下基礎知識WordPress 外掛程式開發以及如何建立區塊。

不過，別驚慌 - 如果您需要速成課程，請查看我的關於創建自訂區塊的四部分教程。它涵蓋了本教程中您需要了解的幾乎所有內容 - 除了區塊樣式變化之外，這是本特定教程的重點！

此外，如果您想跟隨程式碼並親自嘗試一下，那麼您將需要一個用於執行 WordPress 的本機開發伺服器（例如 WAMP、MAMP 等）和程式碼編輯器。

背景

區塊樣式變體 API 已在外掛程式 v3.2 中引入到 Gutenberg 專案中，並允許您直接透過編輯器介面套用替代區塊樣式。

要在區塊樣式變化之前獲得相同的結果，您必須在區塊檢查器面板的其他CSS 類文字欄位中手動輸入自訂CSS 類，該文字欄位位於進階 部分。

如果您對區塊樣式變更的原始提案感興趣，那麼您可以閱讀古騰堡官方儲存庫中拉取請求中的完整詳細資訊。

為區塊定義的任何樣式變體都可以直接在區塊工具列中存取。選擇區塊，然後按一下工具列左上角的圖示以顯示區塊樣式窗格。

還記得之前我說過可以直接在區塊中存取某些區塊設定和檢查小組？嗯，這正是塊狀變化的情況！確保該區塊被選中並在檢查器面板中查看。

這是為了方便，您可以從最適合您的位置選擇樣式變體。例如，在較大的螢幕上，您可以選擇透過檢查器面板來變更區塊樣式，因為它使您可以透過點擊滑鼠在樣式之間進行交換。但是，在較小的裝置上，您可能想要隱藏檢查器面板，而只是透過區塊工具列來變更樣式。

核心區塊支援

一些核心區塊目前支援區塊樣式變化，包括：

• #按鈕
• Pull Quote
• Quote
• 分隔符號
• Table

我確信隨著此功能得到更廣泛的採用，將來還會添加對其他核心區塊的支援。它非常靈活，我相信很多用戶都會期望為大多數區塊選擇預先定義的樣式選項。一旦您使用了塊樣式變體，就很容易明白為什麼會發生這種情況。

當然，您也可以將區塊樣式變體新增到您自己的區塊中。接下來我們將探討具體的實作細節。

#實作區塊樣式變化

有兩種方法可以實現自訂區塊樣式變化。如果您有權存取區塊定義，那麼您可以透過 style 屬性直接在 registerBlockType() 函數內指定區塊樣式變體。

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

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

在這裡，註冊了三個新的區塊樣式變體。請注意，圓角樣式也被設定為預設樣式。

但是，如果您無法存取區塊原始程式碼，那麼您可以採取另一種方法。在 Gutenberg 3.4 中，新增了兩個新函數來從區塊定義外部註冊和取消註冊區塊樣式變體。

#要註冊自訂區塊樣式變體，請使用 registerBlockStyle() 函數，如下所示：

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

這會在核心按鈕區塊中新增一個名為 custom-button-style 的新區塊樣式變體。現在，當按鈕區塊插入編輯器時，您將看到可用的新區塊樣式變體。

一旦選擇，區塊樣式變體就會加入is-style-custom-將Button-style CSS 類別加入到區塊檢查器面板中的其他CSS 類別文字欄位。

這反過來會觸發區塊輸出的更新，並且該類別將添加到 HTML 標記中。

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

一個小問題！

當您第一次插入支援區塊樣式變體的區塊時，值得注意的是，直到您專門點擊區塊樣式變體之前，實際上並沒有任何CSS 類別添加到區塊標記中，即使其中一個顯示為預設選取。

親自嘗試。

將新的按鈕區塊插入編輯器並開啟區塊樣式變化選項。您應該會看到預設選擇的圓角選項。如果您在區塊檢查器中開啟進階部分，則尚未將 CSS 類別新增至文字欄位。因此，不會將 CSS 類別插入到區塊標記中。在編輯器中查看按鈕區塊輸出的 HTML 以自行確認。

現在返回按鈕區塊的區塊樣式變體設置，然後按一下預設選項（選定的選項）或任何其他區塊樣式選項。您將立即看到 CSS 類別已新增至其他 CSS 類別文字欄位和區塊包裝標記。選擇區塊樣式變體後，為自訂類別定義的任何自訂 CSS 規則也將立即套用。

這種行為在第一次接觸時有點令人困惑，因為直覺上您會期望為預設選擇的區塊樣式變體自動添加 CSS 類別。

結論

我們已經了解了塊樣式變體是什麼以及為什麼它們是塊編輯體驗的有用補充。我還演示了塊樣式變體的基本實作。

在下一篇文章中，我們將詳細介紹如何註冊您自己的區塊樣式並透過外掛程式以及子主題連接 CSS。

我們還將了解如何取消註冊區塊樣式以及如何設定在首次將區塊插入編輯器時預設選擇哪種樣式變體。

以上是為 WordPress 古騰堡塊設計自訂樣式：第 1 部分的詳細內容。更多資訊請關注PHP中文網其他相關文章！