没有 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 的情况下构建块，我想知道它！请在评论中分享您的想法和发现！