沒有 JavaScript 的塊構建：測試 ACF、Block Lab 和 Lazy Blocks

已發表: 2019-05-17

並不是每個人都能夠或願意在 JavaScript 中構建塊，有時您必須安裝三到四個塊集合，直到找到您想要的塊。

還有第三種方式：插件從一組特定的自定義字段為您創建塊，並使用模板來控制塊的前端顯示。執行此操作的三個最受歡迎的選項包括：Block Lab、ACF（高級自定義字段）和 Lazy Blocks。

這個測試的用例是我打算用每個插件完成的一項小任務——為公司的團隊成員創建一個塊，其中包括以下字段：名字、姓氏、頭像、簡歷、電話號碼、和電子郵件地址，並在包含兩個團隊成員的兩列顯示中使用頁面上的塊。

對於我將演示的每個插件

如何創建字段組，
如何為前端創建模板和
如何使用塊創建團隊頁面。

我使用 Flywheel 的 Local 作為我的本地開發工具。測試站點在 WordPress 5.1.1、Gutenberg 5.4 和 WordPress.com 的商業主題上運行

閱讀這篇文章後，您將能夠選擇適合您需求的插件。

使用 Block Lab 創建團隊塊

XWP 團隊的成員構建了 Block Lab，它可以作為帶有商業版本的免費插件使用。我首先使用了 Block Lab，安裝了插件，然後開始了一個新的塊。

這是有關如何設置字段的視頻。

下一步是設置塊模板

當我查看預期位置時，模板將成為主題目錄的一部分，位於名為 /blocks/ 的子文件夾中，這是開發人員需要記住的，因為在切換主題時會有一些內容鎖定。

為了創建模板，我打開了我的代碼編輯器，創建了文件 block-team-member.php，並添加了 HTML + 和最小的 PHP 來引用這些字段。

 <h2>
<?php block_field('first-name');?> 
<?php block_field('姓氏');?>
</h2>
<p><img class="teamphoto" src="<?php block_field( '圖片' ); ?>"
 alt="<?php block_field('first-name');?> 
<?php block_field('姓氏');?> " width="150"/>
<?php block_field('short-bio'); ?></p>

<p><em>你可以到達 <?php block_field( 'first-name' );?></em> 
<br/>通過電子郵件<span><a href="mailto:<?php block_field('email-address');?>">
<?php block_field('電子郵件地址'); ?></a></span>
 或 <br/>
通過電話：<span><?php block_field('extension'); ?></span></p>

在最後一步中，我使用塊屬性完成了此塊的配置

我將圖標設置為一個人，
選擇“佈局元素”作為類別和
添加“團隊成員，團隊”作為關鍵字

所有這些對於編輯器中的塊插入器都是必需的。

讓我們看看它是如何工作的。

我添加了一個名為Meet our Block Lab Team的新頁面，並使用 Block “Team Member”添加了團隊成員。

現在，我決定在塊編輯器邊界內填充所有信息。在設置字段組期間，我還可以選擇在側邊欄中的“塊選項”選項卡中顯示表單控件。目前，我已經確定這只是個人喜好。一旦您在塊外單擊，表單就會消失，並且塊的呈現方式與其前端表示相似。

現在我已經完成了塊，我可以向頁面添加更多團隊成員。我決定，我想把它們放在一個有兩列的列塊中。

到現在為止還挺好。我對模板的位置指向主題文件夾並不感到興奮。

當我想切換主題時，我仍然希望將塊和塊的佈局保留在我的站點中，因此我需要確保將塊文件夾複製到新主題的目錄中。另一種方法在 Github 上的 Blocklab 文檔中進行了概述。它提供了兩個過濾器來更改模板的默認位置：

“要在主題中使用不同的模板，請使用 block_lab_override_theme_template( $theme_template ) 過濾器。 要在主題之外使用不同的模板（例如，在插件中），請使用 block_lab_template_path( $template_path ) 過濾器。”

這很容易設置，即使您不是 PHP 開發人員，您也可以使用一個 PHP 函數 block-field() 並確保引用正確的字段名稱。

Block Lab本質上為你提供了一種在一個屏幕中創建字段和配置塊屬性的方法，然後你需要將相應的塊模板添加到你的主題目錄下的文件夾/blocks/中。這是相當直接的。

使用 ACF 5.8 創建團隊塊

ACF（高級自定義字段）5.8 版帶有塊生成器（僅在 Pro 版本中可用）。對於我的測試，我使用了 ACF 5.8 RC 1。最終版本現已發布。 Elliot Condon 是該插件的作者，第一個版本於 2011 年發布。該插件已發展成為非常受自由職業者和代理機構歡迎的開發人員工具，安裝量超過 100 萬。

與其他兩個插件相比，它的成功和多功能性使得字段組的創建過程更加複雜。 Pro 版本 5.8 包含其塊構建工具的第一個版本。

這是字段組“團隊成員”的管理視圖。

現在我如何把它變成一個塊？文檔足夠全面。注意：在這個測試中，我的順序略有不同……

我從 Field Group 開始，我需要在註冊塊後返回該管理屏幕（見下文）。

我用了兩個文件。首先，我需要在我的主題的functions.php中註冊該塊。對於模板/塊渲染代碼，我使用content-block-team-member.php也存儲在活動主題的文件夾中。

您將在一秒鐘內看到這兩者如何結合在一起。其餘的工作由後端的插件完成。

所以讓我們用 PHP 編寫塊代碼

第一個片段是塊註冊。我給它起了名字，標題，描述，指向渲染模板，給它一個類別，一個圖標和一些關鍵字，內容生產者可以在塊插入器中找到塊。我一直滾動到我的主題functions.php的末尾並添加了這個片段：

 函數 register_acf_blocks() {
   // 註冊一個團隊成員塊。
   acf_register_block（數組（
       '名稱' => 'acf-團隊成員',
       'title' => __('ACF 團隊成員'),
       'description' => __('通過 ACF 5.8 創建的自定義團隊成員塊'),
       'render_template' => 'content-block-team-member.php',
       '類別' => '格式',
       '圖標' => '管理員評論',
       '關鍵字' => 數組（'團隊成員'，'團隊'），
   ));
}
// 檢查函數是否存在並掛鉤到 setup.
如果（函數存在（'acf_register_block'））{
   add_action('acf/init', 'register_acf_blocks');
}

此代碼直接來自文檔，我只是更改了一些值。

在下一節中，我創建了塊渲染模板。文件名需要與上述文本中的“render_template”屬性相匹配，即“ content-block-team-member.php ”

我也只是按照 ACF 的文檔進行操作，只更改了一些值並更新了顯示代碼。

 <?php
// 為特定樣式創建 id 屬性
$id = '團隊成員' 。 $block['id'];

// 從塊設置 ("wide") 創建對齊類 ("alignwide")
$align_class = $block['align'] ？ '對齊' 。 $block['align'] : '';

// 為塊字段加載值並分配默認值。
$short_bio = get_field('short_bio') ?: '簡短的簡歷放在這裡......';
$first_name = get_field('first_name') ?: 'First Name';
$last_name = get_field('last_name') ?: '姓氏';
$image = get_field('圖片');
$email_address = get_field('email_address');
$extension = get_field('extension');
?>

" 類="團隊成員">
       
   
   " alt="" alt=" " width="150"/>

當我開始使用 Fieldgroup 時，我需要返回並確保該組與我剛剛註冊的塊相關聯。在字段組屏幕下方，我為位置創建了一條規則：它需要顯示：“如果塊等於ACF 團隊成員，則顯示此字段組。

現在讓我們看看當我添加兩個成員時它在塊編輯器中是如何工作的。

這是一次有趣的經歷。您可以使用編輯器部分中的表格來輸入數據。另一種選擇是在側邊欄中可用的表單字段中輸入數據，您會實時看到塊更新。您可以在兩種方法之間切換，但單擊“切換到編輯”或“切換到預覽”按鈕，具體取決於您現在使用的方法。

塊編輯器 UI 運行良好。值得通過更複雜的設置和必要的代碼。

使用惰性塊創建團隊塊

此測試中的第三個插件被 nkdev.info 的 Nikita 稱為“Lazy Blocks”，該團隊也發布了 GhostKit 塊集合。

它不僅允許我將信息存儲在 post_content 中，而且我還可以選擇將其存儲在 post_meta 表中。

這是使用界面創建字段的視頻。

由於此管理屏幕專注於獲取創建塊的所有信息，因此我在左側創建了我的字段和邊欄中。我填寫了向編輯器註冊塊所需的信息。

在下面，我能夠為前端和後端添加 HTML。語法比 Block Lab 更簡單，當然也比 ACF 的模板簡單得多。

我不需要向我的主題的 functions.php 添加任何代碼，也不需要使用我的模板代碼創建其他文件。

你可以在這裡添加它，借助語法高亮和合併標籤而不是函數調用。該文檔顯示了編寫模板代碼的多種方法。我絕對是 Handlebars（語義模板）的粉絲，因為它在這種情況下更接近於其他系統的合併標籤。

我將相同的代碼複製/粘貼到“編輯器 HTML”選項卡中，因此我可以在表單字段下方看到前端顯示。

讓我們使用它。

這似乎有效。當我取消選擇塊時，表單沒有消失，這有點尷尬。它在編輯器中佔用了大量空間。雖然，我想讓團隊成員在一個兩列塊中，但我沒有成功將這兩個塊拖放到一個列塊中。我在我的支持主題中提到了這一點，nK 回答說：“......當沒有選擇塊時隱藏控件是一個很好的功能，已經添加到 ACF 塊中，並將很快添加到惰性塊中。” 在這裡你有它 - 一切都在適當的時候。

結論：複雜、進化或簡單。

ACF 5.8具有非常強大的塊構建功能，每個使用該插件構建站點的人都會非常高興能夠為他們的客戶創建動態塊。這是經過深思熟慮的，所有技能組合的開發人員都會快速啟動並運行。

不精通 PHP 的人將有她公平的嘗試和錯誤來完成這一切。當對塊的要求更多地涉及並超出此測試的用例時，它將變得更加複雜。這不是 WordPress 初學者或自己不編寫大量代碼的 DIY 網站實施者的工具。

目前，只有 ACF 5.8 Pro 版本帶有塊生成器功能。 Condon 正在考慮使其成為一個獨立的插件。（看看 Twitteratti 對這個想法的看法……）

Block Lab處於早期發展階段。它成功地抽象了大部分塊架構並減少了需要編寫的代碼量。該文檔非常有幫助。模板存儲在單獨的文件中，需要與其餘主題文件一起維護。如果我們在我的公司將它用於我們的任何項目，我們將使用我們的幫助插件之一存儲模板文件，因此我們的客戶能夠切換主題而不會丟失使用 Block Lab 構建的塊的內容和顯示。

專業版擁有附加功能，例如中繼器字段、塊的導入/導出、用戶對象字段、地圖字段和更多塊功能。

XWP 是與 WordPress.com VIP 託管和其他公司的企業客戶合作的機構。他們的團隊成員正在為 WordPress 領域的其他大創意做出貢獻，包括定制器、AMP 和 Tide。我希望該插件能夠繼續存在並與 Gutenberg Phase 2 一起成長為網站實施者、代理商和主題開發人員的強大系統。

Lazy Blocks是一種令人愉悅的設置，並且如前所述，我是 Handelbars 模板語法的粉絲。即使對於初學者來說也很容易學習，並且通過一些練習，網站所有者將能夠為他們的網站創建特定的古騰堡塊。編輯器中的塊處理雖然功能正常，但有點笨拙，因為此時顯示不會在塊選擇狀態和取消選擇狀態之間切換。

如果需要為頁面或帖子的一部分添加其他字段，那麼 Lazy Blocks 是一個很好的原型工具，可以快速從想法到概念驗證。

唯一需要注意的是：我無法找出nkdev.info和 Nikita 這個名字背後的人是誰。該網站僅顯示它是一家年輕的公司，僅此而已。如果您使用該插件，請確保您有 B 計劃，以防開發人員在插件起飛前放棄該插件。

ACF 5.8 相當複雜； Block Lab 是一個非常靈活且只是半複雜的；和懶惰的塊有充分的命名和最容易使用。它們都不能讓您在不編寫代碼的情況下逃脫，因為每個塊都需要一些 HTML 顯示輸出。

讓我知道您對這三個塊生成插件的看法。另外，如果您發現另一個插件可以讓您在不進入 Javascript 的情況下構建塊，我想知道它！請在評論中分享您的想法和發現！