Gutenberg 是 WordPress 的块编辑器，它彻底改变了我们在 WordPress 中创建和设计内容的方式。Advanced Custom Fields (ACF) 和 LazyBlocks 是两个流行的插件，它们通过允许用户创建自定义块来扩展 Gutenberg 的功能。在本文中，我们将讨论使用这两个插件创建 Gutenberg 块的过程，并分析它们的优缺点。

1.- Advanced Custom Fields (ACF)

ACF 是一个流行的 WordPress 插件，它允许用户向其文章、页面和自定义文章类型添加自定义字段。它还支持使用用户友好的界面创建自定义 Gutenberg 块。

使用 ACF 创建块：

安装并激活 ACF 插件。
将回调函数 my_acf_block_render_callback() 添加到主题的 functions.php 文件中：

/**
 * 回调函数，将块名称映射到模板。
 * @param $block
 * @return void
 */
function my_acf_block_render_callback( $block ) {

    // 将名称 ("acf/slider") 转换为路径友好的 slug ("slider")
    $slug = str_replace('acf/', '', $block['name']);

    // 从 "template-parts/block" 文件夹中包含一个模板部分。
    if ( file_exists( get_theme_file_path("/template-parts/block/content-{$slug}.php") ) ) {
        include( get_theme_file_path("/template-parts/block/content-{$slug}.php") );
    }
}

使用 acf_register_block_type() 在主题的 functions.php 文件中注册该块。

/**
 * 注册 acf 块的示例。
 */
function my_acf_block_init() {
    // 检查函数是否存在以避免错误。
    if (function_exists('acf_register_block_type')) {
        acf_register_block_type(array(
            'name'              => 'my-nice-block-name',
            'title'             => __('这是我的第一个块'),
            'description'       => __('这是使用 ACF 创建的自定义块。'),
            'render_template'   => 'path/to/your/block/template.php',
            'category'          => 'formatting',
            'icon'              => 'admin-comments',
            'keywords'          => array('nice', 'block', 'name'),
        ));
    }
}
add_action('acf/init', 'my_acf_block_init');

在 WordPress 管理仪表板中，导航到自定义字段 > 添加新字段。
创建一个新的字段组，并添加块所需的字段，然后配置它们的设置。
在字段组设置的“位置”下，为规则选择“块”，并将其设置为“等于”你的块标题（例如，“这是我的第一个块”）。
在主题的 template-parts/block 目录中创建一个新的 PHP 文件，作为自定义块的模板文件。使用命名约定 content-{slug}.php，其中 {slug} 是从块名称派生的路径友好的 slug。例如，如果你的块名称是“acf/your-block-name”，则创建一个名为 content-your-block-name.php 的模板文件。
在新创建的模板文件中，编写渲染块的 PHP 和 HTML 代码。从开头的 PHP 标记开始，并使用 ACF 的 get_field() 或 the_field() 函数来检索和显示添加到块的自定义字段的值。这些函数允许你访问自定义字段中存储的数据，并在块的模板中输出它。

/**
 * 块模板示例。
 */
<?php
// 获取自定义字段值
$heading = get_field('heading');
$content = get_field('content');
?>

<!-- 输出块的 HTML 结构 -->
<div class="my-custom-block">
    <h2><?php echo esc_html($heading); ?></h2>
    <p><?php echo esc_html($content); ?></p>
</div>

ACF 的优点：

用户友好的界面。
有多种字段类型可供选择。
与其他 WordPress 功能（如自定义文章类型和分类法）集成。
广泛的文档和庞大的用户社区。

ACF 的缺点：

对于编码经验有限的用户来说可能具有挑战性。
某些高级功能需要 PRO 版本。
当自定义字段数量很多时，可能会出现性能问题。

2.- LazyBlocks

LazyBlocks 是一个 Gutenberg 块可视化构造器，它允许你使用简单的拖放界面创建自定义 Gutenberg 块。

使用 LazyBlocks 创建块：

安装并激活 LazyBlocks 插件。
在 WordPress 管理仪表板中，导航到 LazyBlocks > 添加新块。
输入块名称和 slug，然后开始使用拖放界面添加控件（字段）。
通过在 PHP、HTML 或 Handlebars 模板之间进行选择来配置块输出。
在提供的编辑器中添加块输出代码，或在主题中创建单独的模板文件。以下是每种选项的优点：
- PHP：为你的块输出提供完全的灵活性和控制权，并允许你使用任何 PHP 功能来定制块的外观和行为。
- HTML：提供一种简单直接的方式来定义块的输出，而无需处理 PHP 代码。非常适合偏好仅使用 HTML 和 CSS 进行工作的用户。
- Handlebars 模板：将 HTML 输出的简洁性与条件逻辑和循环的功能相结合，对于需要更多控制块输出而无需编写 PHP 的用户来说，这是一个多功能的选择。
保存块，它将在 Gutenberg 编辑器中可用。

LazyBlocks 的优点：

直观的拖放界面。
基本块无需编码。
可与自定义文章类型和自定义分类法配合使用。
提供相当数量的字段类型。

LazyBlocks 的缺点：

与 ACF 相比，文档不够全面。
与 ACF 相比，字段类型有限。
与 ACF 相比，功能和选项较少。

Gutenberg

使用 Advanced Custom Fields (ACF) 和 LazyBlocks 创建 Gutenberg 块：对比指南