WordPress 5.5 引入了區塊模式（也常被稱為“區塊”），允許用戶創建和共享預定義的區塊佈局。這些佈局存儲在模式目錄中，包含由WordPress 社區設計的各種模式。這些模式採用簡單的複制粘貼格式，無需任何編碼知識，極大地節省了用戶時間。
雖然已有大量關於模式的文章，但缺乏涵蓋最新增強功能的全面且最新的模式創建文章。本文旨在填補這一空白，重點介紹最近的增強功能，例如無需註冊即可創建模式，並為新手和經驗豐富的作者提供最新的創建和使用模式的分步指南，尤其是在區塊主題中。
自WordPress 5.9 和Twenty Twenty-Two (TT2) 默認主題發布以來，區塊主題中區塊模式的使用激增。我一直是區塊模式的忠實粉絲，並在我的區塊主題中創建和使用了它們。
WordPress 6.0 為作者提供了三個主要的模式功能增強：
在介紹性視頻“探索WordPress 6.0”中，Automattic 產品聯絡員Ann McCathy 強調了一些新增強的模式功能（從15:00 開始），並討論了未來的模式增強計劃——包括模式作為分節元素、提供在頁面創建時選擇模式的選項、集成模式目錄搜索等等。
本文假設讀者俱備WordPress 全站編輯(FSE) 界面和區塊主題的基本知識。區塊編輯手冊和全站編輯網站提供了最新的教程指南，用於學習所有FSE 功能，包括本文中討論的區塊主題和模式。
最初創建區塊模式的方法需要使用區塊模式API，可以作為自定義插件，也可以直接在functions.php 文件中註冊以與區塊主題捆綁在一起。新發布的WordPress 6.0 引入了幾種與模式和主題一起使用的新增和增強功能，包括通過/patterns 文件夾註冊模式和頁面創建模式模態。
作為背景，讓我們首先簡要概述模式註冊工作流程如何從使用register 模式API 演變為直接加載而無需註冊。
默認的Twenty Twenty-One 主題(TT1) 和TT1 Blocks 主題（TT1 的姊妹主題）展示瞭如何在主題的functions.php 中註冊區塊模式。在TT1 Blocks 實驗主題中，包含八個區塊模式的單個block-pattern.php 文件作為包含文件添加到functions.php 中，如下所示。
需要使用register_block_pattern 函數註冊自定義區塊模式，該函數接收兩個參數——標題（模式的名稱）和屬性（描述模式屬性的數組）。
以下是根據Theme Shaper 文章註冊簡單的“Hello World”段落模式的示例：
register_block_pattern(
'my-plugin/hello-world',
array(
'title' => __( 'Hello World', 'my-plugin' ),
'content' => "\n<p> Hello World</p> \n",
)
);註冊後，應從附加到init 掛鉤的處理程序調用register_block_pattern() 函數，如下所述。
function my_plugin_register_my_patterns() {
register_block_pattern( ... );
}
add_action( 'init', 'my_plugin_register_my_patterns' );註冊區塊模式後，它們會在區塊編輯器中可見。更詳細的文檔可在區塊模式註冊中找到。
區塊模式屬性
除了必需的標題和內容屬性外，區塊編輯器手冊還列出了以下可選模式屬性：
以下是從WordPress 博客中獲取的引用模式插件代碼片段示例。
/*
Plugin Name: Quote Pattern Example Plugin
*/
register_block_pattern(
'my-plugin/my-quote-pattern',
array(
'title' => __( 'Quote with Avatar', 'my-plugin' ),
'categories' => array( 'text' ),
'description' => _x( 'A big quote with an avatar".', 'Block pattern description', 'my-plugin' ),
'content' => ' <div><div>
<hr>
<div><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174183133237166.jpg" class="lazy" alt="" style="max-width:90%" style="max-width:90%"></div>
<blockquote>
<p> "Contributing makes me feel like I\'m being useful to the planet."</p> <cite>— Anna Wong, <em>Volunteer</em></cite>
</blockquote>
<hr>
</div></div> ',
)
);在模板文件中使用模式
創建模式後，可以使用以下區塊標記在主題模板文件中使用它們：
來自此GitHub 存儲庫的示例顯示了在TT2 Gopher 區塊主題中使用帶有“tt2gopher”前綴的“footer-with-background”模式slug。
區塊主題和Gutenberg 插件的早期採用者也利用了經典主題中的模式。默認的Twenty Twenty 和我最喜歡的Eksell 主題（此處為演示站點）是展示如何將模式功能添加到經典主題的良好示例。
如果主題只包含少量模式，則開發和維護相當容易管理。但是，如果區塊主題包含許多模式，例如TT2 主題，則pattern.php 文件會變得非常大且難以閱讀。默認的TT2 主題捆綁了60 多個模式，展示了重構的模式註冊工作流程結構，該結構更易於閱讀和維護。
以TT2 主題為例，讓我們簡要討論此簡化工作流程的工作原理。
2.1：註冊模式類別
出於演示目的，我創建了一個TT2 子主題，並使用一些虛擬內容在我的本地測試站點上設置了它。按照TT2 的方法，我在其block-patterns.php 文件中註冊了footer-with-background 並添加到以下模式類別數組列表中。
/**
* Registers block patterns and categories.
*/
function twentytwentytwo_register_block_patterns() {
$block_pattern_categories = array(
'footer' => array( 'label' => __( 'Footers', 'twentytwentytwo' ) ),
'header' => array( 'label' => __( 'Headers', 'twentytwentytwo' ) ),
'pages' => array( 'label' => __( 'Pages', 'twentytwentytwo' ) ),
// ...
);
/**
* Filters the theme block pattern categories.
*/
$block_pattern_categories = apply_filters( 'twentytwentytwo_block_pattern_categories', $block_pattern_categories );
foreach ( $block_pattern_categories as $name => $properties ) {
if ( ! WP_Block_Pattern_Categories_Registry::get_instance()->is_registered( $name ) ) {
register_block_pattern_category( $name, $properties );
}
}
$block_patterns = array(
'footer-default',
'footer-dark',
'footer-with-background',
//...
'header-default',
'header-large-dark',
'header-small-dark',
'hidden-404',
'hidden-bird',
//...
);
/**
* Filters the theme block patterns.
*/
$block_patterns = apply_filters( 'twentytwentytwo_block_patterns', $block_patterns );
foreach ( $block_patterns as $block_pattern ) {
$pattern_file = get_theme_file_path( '/inc/patterns/' . $block_pattern . '.php' );
register_block_pattern(
'twentytwentytwo/' . $block_pattern,
require $pattern_file
);
}
}
add_action( 'init', 'twentytwentytwo_register_block_patterns', 9 );在此代碼示例中，$block_patterns = array() 中列出的每個模式都由foreach() 函數調用，該函數需要一個模式目錄文件，其中包含數組中列出的模式名稱，我們將在下一步中添加該文件。
2.2：向/inc/patterns 文件夾添加模式文件
接下來，我們應該在$block_patterns = array() 中擁有所有列出的模式文件。以下是一個模式文件footer-with-background.php 的示例：
/**
* Dark footer wtih title and citation
*/
return array(
'title' => __( 'Footer with background', 'twentytwentytwo' ),
'categories' => array( 'footer' ),
'blockTypes' => array( 'core/template-part/footer' ),
'content' => '
<div style="padding-top:var(--wp--custom--spacing--small, 1.25rem);padding-bottom:var(--wp--custom--spacing--small, 1.25rem)">
<p>' .
sprintf(
/* Translators: WordPress link. */
esc_html__( 'Proudly powered by %s', 'twentytwentytwo' ),
' <a href="'%20.%20esc_url(%20__(%20'https://wordpress.org',%20'twentytwentytwo'%20)%20)%20.%20'" rel="nofollow">WordPress</a> | a modified TT2 theme.'
) . '</p>
</div>
',
);讓我們在footer.html 模板部件中引用該模式：
這類似於在模板文件中添加標題或頁腳部件。
可以通過修改它以引用主題模式文件（footer-with-background）的slug 來類似地將模式添加到parts/footer.html 模板中：
現在，如果我們訪問區塊編輯器的模式插入器，則可以使用“Footer with background”。
以下屏幕截圖顯示前端新創建的帶有背景的頁腳模式。
現在模式已成為區塊主題的組成部分，許多模式都捆綁在區塊主題中——例如Quadrat、Seedlet、Mayland、Zoologist、Geologist——遵循上述工作流程。這是一個Quadrat 主題/inc/patterns 文件夾的示例，其中包含一個區塊模式註冊文件和一系列文件，其中包含內容源和return array() 函數中所需的模式標題。
請注意，此功能需要在您的站點中安裝WordPress 6.0 或Gutenberg 插件13.0 或更高版本。
此新的WordPress 6.0 功能允許通過標准文件和文件夾（/patterns）註冊模式，帶來了類似於/parts、/templates 和/styles 的約定。
此過程，如本文所述，涉及以下三個步驟：
從文章中獲取的典型模式標題標記如下所示：
<?php /** * Title: A Pattern Title * Slug: namespace/slug * Description: A human-friendly description. * Viewport Width: 1024 * Categories: comma, separated, values * Keywords: comma, separated, values * Block Types: comma, separated, values * Inserter: yes|no */ ??>
如上一節所述，只有標題和Slug 字段是必需的，其他字段是可選的。
參考最近發布的主題中的示例，我在之前的關於CSS-Tricks 的文章中準備的TT2 Gopher Blocks 演示主題中重構了模式註冊。
在以下步驟中，讓我們探討如何重構使用PHP 註冊並在footer.html 模板中使用的footer-with-background.php 模式。
2.1：在主題的根目錄下創建一個/patterns 文件夾
第一步是在TT2 Gopher 主題的根目錄下創建一個/patterns 文件夾，並將footer-with-background.php 模式文件移動到/patterns 文件夾並重構。
2.2：將模式數據添加到文件標題
接下來，創建以下模式標題註冊字段。
<?php /** * Title: Footer with background * Slug: tt2gopher/footer-with-background * Categories: tt2gopher-footer * Viewport Width: 1280 * Block Types: core/parts/footer * Inserter: yes */ ??>
模式文件有一個作為PHP 註釋編寫的頂部標題字段。後跟以HTML 格式編寫的block-content 。
2.3：將模式內容添加到文件中
對於內容部分，讓我們複製單引號（例如，'...'）中的代碼片段，從footer-with-background 的內容部分開始，並替換：
<div style="padding-top:35px;padding-bottom:30px">
<p>Powered by WordPress | TT2 Gopher, a modified TT2 theme</p>
</div>patterns/footer-with-background.php 文件的完整代碼片段可以在GitHub 上查看。
請注意，/inc/patterns 和block-patterns.php 是額外的，在WordPress 6.0 中不需要，僅出於演示目的而包含。
2.4：在模板中引用模式slug
將上述重構的footer-with-background.php 模式添加到footer.html 模板與上一節（第1 節，2.2）中描述的完全相同。
現在，如果我們在區塊編輯器或瀏覽器中站點的頁腳部分查看站點，則會顯示頁腳部分。
要對區塊模式進行分類，應在主題的functions.php 文件中註冊模式類別和類型。
讓我們考慮一個從TT2 Gopher 主題註冊區塊模式類別的示例。
註冊後，模式會與核心默認模式一起顯示在模式插入器中。要在模式插入器中添加主題特定的類別標籤，我們應該通過添加主題命名空間來修改之前的代碼片段：
/**
* Registers block categories, and type.
*/
function tt2gopher_register_block_pattern_categories() {
$block_pattern_categories = array(
'tt2gopher-header' => array( 'label' => __( 'TT2 Gopher - Headers', 'tt2gopher' ) ),
'tt2gopher-footer' => array( 'label' => __( 'TT2 Gopher - Footers', 'tt2gopher' ) ),
'tt2gopher-page' => array( 'label' => __( 'TT2 Gopher - Page', 'tt2gopher' ) ),
// ...
);
/**
* Filters the theme block pattern categories.
*/
$block_pattern_categories = apply_filters( 'tt2gopher_block_pattern_categories', $block_pattern_categories );
foreach ( $block_pattern_categories as $name => $properties ) {
if ( ! WP_Block_Pattern_Categories_Registry::get_instance()->is_registered( $name ) ) {
register_block_pattern_category( $name, $properties );
}
}
add_action( 'init', 'tt2gopher_register_block_pattern_categories', 9 );footer-with-background 模式在其預覽中（如果已選擇）與模式插入器一起顯示：
此過程極大地簡化了在區塊主題中創建和顯示區塊模式的過程。它可在WordPress 6.0 中使用，無需使用Gutenberg 插件。
早期採用者已經開始在其區塊主題中使用此功能。主題目錄中提供的一些無需註冊即可加載模式的主題示例如下所示：
官方模式目錄包含社區貢獻的創意設計，可以根據需要復制和自定義以創建內容。使用區塊編輯器中的模式從未如此簡單！
任何來自不斷增長的目錄的模式也可以通過簡單的“複製和粘貼”或在theme.json 文件中包含它們來添加到區塊主題中，方法是引用其目錄模式slug 。接下來，我將簡要介紹如何輕鬆地用非常有限的代碼實現這一點。
3.1：將模式從目錄複製到頁面
在這裡，我使用的是FirstWebGeek 來自模式目錄的頁腳部分模式。通過選擇“複製模式”按鈕複製模式，並直接將其粘貼到新頁面中。
3.2：進行所需的自定義
我只對字體和按鈕背景的顏色進行了一些更改。然後將整個代碼從代碼編輯器複製到剪貼板。
如果您不熟悉使用代碼編輯器，請轉到選項（帶有三個點，右上角），單擊代碼編輯器按鈕，然後從此處複製整個代碼。
3.3：在/patterns 文件夾中創建一個新文件
首先，讓我們創建一個新的/patterns/footer-pattern-test.php 文件並添加所需的模式標題部分。然後粘貼整個代碼（步驟3，上面）。模式在頁腳區域（第5 行）中分類，我們可以在模式插入器中查看新添加的模式。
<?php /** * Title: Footer pattern from patterns library * Slug: tt2gopher/footer-pattern-test * Categories: tt2gopher-footer * Viewport Width: 1280 * Block Types: core/template-part/footer * Inserter: yes */ ??><div style="padding-top:100px;padding-right:30px;padding-bottom:70px;padding-left:30px"> <div> <div> <h2 style="font-style:normal;font-weight:700;text-transform:uppercase">lorem</h2> <p style="font-size:16px">One of the main benefits of using Lorem Ipsum is that it can be easily generated, and it takes the pressure off designers to create meaningful text. Instead, they can focus on crafting the best website data.</p> <ul></ul> </div> <div> <h4 style="font-size:30px;font-style:normal;font-weight:700;text-transform:capitalize">Contact Us</h4> <p style="font-size:16px;line-height:1.2">123 BD Lorem, Ipsum<br><br> 123-456-7890</p> <p style="font-size:16px;line-height:1">[email protected]</p> <p style="font-size:16px;line-height:1">Opening Hours: 10:00 - 18:00</p> </div> <div> <h4 style="font-size:30px;font-style:normal;font-weight:700;text-transform:capitalize">Newsletter</h4> <p style="font-size:16px">Lorem ipsum dolor sit amet, consectetur ut labore et dolore magna aliqua ipsum dolor sit</p> </div> </div> </div>
3.4：在插入器中查看新模式
要查看新添加的“來自模式庫的頁腳模式”，請轉到任何帖子或頁面並選擇插入器圖標（左上角的藍色加號符號），然後選擇“TT2 Gopher – 頁腳”類別。新添加的模式顯示在左側面板上，以及其他頁腳模式及其右側的預覽（如果已選擇）：
在WordPress 6.0 中，可以使用以下語法在theme.json 文件中從模式目錄註冊任何所需的模式。 6.0 開發說明指出，“patterns 字段是模式目錄中[模式slug ] 的數組。模式slug 可以通過模式目錄中單個模式視圖中的[URL] 提取。”
{
"version": 2,
"patterns": ["short-text", "patterns-slug"]
}這段簡短的WordPress 6.0 功能視頻演示瞭如何在/patterns 文件夾中註冊模式（在3:53 處）以及如何在theme.json 文件中註冊模式目錄中所需的模式（在3:13 處）。
然後，註冊的模式可在模式插入器搜索框中使用，然後可以像主題捆綁的模式庫一樣使用。
{
"version": 2,
"patterns": [ "footer-from-directory", "footer-section-design-with-3-column-description-social-media-contact-and-newsletter" ]
}在此示例中，來自前面示例的模式slug footer-section-design-with-3-column-description-social-media-contact-and-newsletter 通過theme.json 註冊。
作為“使用模式構建”計劃的一部分，WordPress 6.0 為主題作者提供了一個模式模態選項，用於將頁面佈局模式添加到區塊主題中，允許站點用戶在創建頁面時選擇頁面佈局模式（例如，關於頁面、聯繫頁面、團隊頁面等）。以下是從開發說明中獲取的一個示例：
register_block_pattern(
'my-plugin/about-page',
array(
'title' => __( 'About page', 'my-plugin' ),
'blockTypes' => array( 'core/post-content' ),
'content' => '
<p>Write you about page here, feel free to use any block</p>
',
)
);此功能目前僅限於頁面帖子類型，而不適用於“帖子帖子類型”。
也可以通過刪除所有模式的post-content 區塊類型來完全禁用頁面創建模式模態。此處提供了一個示例樣本代碼。
您可以關注並參與GitHub 中的討論，討論鏈接列在下面的資源部分。
與頁面構建器類似，也可以使用目錄中的模式來創建所需的帖子或頁面佈局。 GutenbergHub 團隊使用模式目錄中的模式創建了一個實驗性的在線頁面構建器應用程序（介紹性視頻）。然後可以將應用程序中的代碼複製並粘貼到站點中，這極大地簡化了無需編碼即可構建複雜頁面佈局的過程。
在這個簡短的視頻中，Jamie Marsland 演示了（在1:30 處）如何使用應用程序使用目錄中所需的頁面部分來創建類似於頁面構建器的整個頁面佈局。
模式允許用戶在任何頁面中重新創建他們常用的內容佈局（例如，英雄頁面、號召性用語等），並降低了以前沒有編碼技能就無法呈現樣式內容的障礙。就像插件和主題目錄一樣，新的模式目錄為用戶提供了從模式目錄中選擇各種模式的選項，並以樣式編寫和顯示內容。
事實上，區塊模式將改變一切，這無疑是WordPress 主題領域中具有變革意義的功能。當“使用模式構建”工作的全部潛力可用時，這將改變我們設計區塊主題以及即使只有低代碼知識也能創建精美內容的方式。對於許多創意設計師來說，模式目錄也可能提供了一個展示其創造力的合適途徑。
以上是如何在WordPress 6.0中創建塊主題模式的詳細內容。更多資訊請關注PHP中文網其他相關文章！
