塊模式有可能使在WordPress中發(fā)布內(nèi)容比以往任何時(shí)候都更容易、更靈活。

例如，假設(shè)您總是發(fā)現(xiàn)自己在您的帖子中添加了相同的兩個(gè)塊。也許是兩個(gè)并排的按鈕。如果你以前做過這樣的事情，那么你就知道怎樣才能做到這一點(diǎn):

添加一個(gè)包含兩列的列塊

接下來，在左列中添加一個(gè)按鈕塊

然后。向右列添加一個(gè)按鈕塊

顯示帶有兩列的輪廓，每列都有一個(gè)表示button作為標(biāo)簽的藍(lán)色圓角按鈕。

這就是塊模式被設(shè)計(jì)來解決的問題。

塊模式允許您將塊組合成一個(gè)組，以便在需要的時(shí)候重用，而不是放入多個(gè)塊來創(chuàng)建一個(gè)元素。WordPress甚至提供了幾種開箱即用的塊模式。

塊菜單作為內(nèi)容編輯器左側(cè)的邊欄打開，Patterns選項(xiàng)卡處于活動(dòng)狀態(tài)。在模式菜單上方有一個(gè)灰色的搜索框。菜單下面是前兩個(gè)模式的預(yù)覽，包括兩個(gè)按鈕、三個(gè)按鈕和列。

以我們的按鈕為例，我們可以將這些塊組合在一起，并將它們保存為一個(gè)塊以供以后使用。但在這之前，讓我們先畫出另一個(gè)重要的區(qū)別。

塊模式與可重用塊非常相似。

塊編輯器已經(jīng)允許我們完成塊模式對(duì)可重用塊的處理:將一些塊作為一個(gè)組放入編輯器中，單擊小菜單圖標(biāo)，然后選擇“添加到可重用塊”選項(xiàng)。

太酷了!現(xiàn)在給它一個(gè)名字，當(dāng)我們需要兩個(gè)緊挨著的按鈕時(shí)，我們可以使用它。

那么，當(dāng)可重用塊還可以保存一組塊時(shí)，為什么要使用塊模式呢?

一個(gè)原因是，當(dāng)你對(duì)一個(gè)可重用的塊做了一個(gè)改變時(shí)，這些改變將自動(dòng)應(yīng)用到任何塊被使用的地方，無論是在同一個(gè)崗位上，還是在另一個(gè)崗位上。可以將一個(gè)可重用塊轉(zhuǎn)換為一個(gè)常規(guī)塊，這樣更改只適用于該實(shí)例，但這會(huì)破壞分組塊的布局，并需要修改一堆內(nèi)容。

另一方面，塊模式是一開始就可以編輯的。它們只是提供了塊的布局，你可以在其中創(chuàng)建和定制你的內(nèi)容。

相關(guān):查看要與事件日歷一起使用的這些塊模式。

如何注冊塊模式

WordPress引入了一個(gè)新的register_block_pattern()函數(shù)，就像它的名字一樣，它注冊了一個(gè)塊模式，以便你將來可以使用它。它的所有文檔都可以在WordPress.org上找到，所以我們不會(huì)在這里詳細(xì)說明。重要的是了解它所需要的論證。這是兩個(gè)必需的參數(shù):

標(biāo)題:您將在模式菜單中看到的模式名稱。

內(nèi)容:模式代碼。

描述:一個(gè)簡短的描述模式的簡介。

categories:將模式與相同類別中的其他模式進(jìn)行分組。

關(guān)鍵字:告訴WordPress如果在塊菜單中搜索某些單詞應(yīng)該返回作為搜索結(jié)果的模式。這對(duì)于使模式更容易被發(fā)現(xiàn)非常方便。例如，在搜索“three”或任何其他單詞組合時(shí)，可以找到一個(gè)包含一行三張卡片的模式，稱為“cards”。

viewportWidth:這給了你一點(diǎn)額外的控制模式在塊插入器中的外觀，比如將其設(shè)置為全寬項(xiàng)。

首先，讓我們定義一個(gè)模式類別。

這是完全可選的，并且只有在您想在一個(gè)全新的類別下注冊一個(gè)模式時(shí)才真正必要。

如果你可以使用其中任何一種，那太棒了!如果沒有，那就創(chuàng)建一個(gè)!無論哪種方式，如果你不想分類一個(gè)模式，它會(huì)自動(dòng)進(jìn)入一個(gè)“未分類”的類別，就像未分類的文章一樣。

正如您所看到的，它實(shí)際上只需要一個(gè)標(biāo)簽參數(shù)。my-block-patterns的部分只是你插件或主題的命名空間…無論你注冊塊模式的地方。

接下來，在WordPress中創(chuàng)建模式。

現(xiàn)在，我們可以在register_block_pattern()函數(shù)中直接為模式編寫代碼。但這將是對(duì)耐心的考驗(yàn)。在塊編輯器中勾畫模式的草圖，然后將代碼復(fù)制到函數(shù)中，這樣做要容易得多。

首先，創(chuàng)建一個(gè)組。然后，在那個(gè)組中放下一些積木。接下來，選擇組，打開塊選項(xiàng)菜單，選擇“復(fù)制”選項(xiàng)。

顯示包含兩個(gè)黑色按鈕的選定組，在組內(nèi)容上展開選項(xiàng)菜單，選擇復(fù)制選項(xiàng)。

復(fù)制塊復(fù)制塊的HTML和標(biāo)記。這就是我們需要的內(nèi)容參數(shù)寄存器函數(shù)。

但首先……

我們需要對(duì)復(fù)制的代碼進(jìn)行轉(zhuǎn)義。

這是正確的。我們不能簡單地把它粘貼進(jìn)去。幸運(yùn)的是，有一個(gè)在線工具可以幫我們擺脫代碼。粘貼到那里，計(jì)時(shí)“Escape”按鈕，然后復(fù)制它輸出的代碼。

顯示用于轉(zhuǎn)義代碼的在線工具。這里有一個(gè)用于粘貼代碼的紋理，需要在包含生成代碼的另一個(gè)紋理之上轉(zhuǎn)義。

先拿著這個(gè)。我們馬上就需要它。

注冊模式。

我們有一些模式的代碼。我們有一個(gè)記錄模式的函數(shù)?，F(xiàn)在，讓我們把它們放在一起來創(chuàng)建一個(gè)圖案。

開始使用模式!

現(xiàn)在我們可以回到編輯器。打開塊插入器，搜索模式，并從結(jié)果中選擇它。

在塊插入程序中顯示兩個(gè)按鈕示例模式，該模式在發(fā)布內(nèi)容的左側(cè)打開。

開始在事件日歷中使用塊模式。

如果我們沒有帶一些模式，這篇文章是不完整的。因此，我們創(chuàng)建了一個(gè)小擴(kuò)展，您可以安裝添加一些模式，以使用與事件日歷。