README

只需将模板添加到您的 Sage 主题中即可生成 ACF Gutenberg 块。

本软件包主要基于这篇nicoprat的文章。

安装

在基于 Sage (v9 或 10) 的主题目录中运行以下命令

composer require "larodiel/sage-acf-gutenberg-blocks"

创建块

将刀片模板添加到 views/blocks，获取并使用 ACF 数据。每个模板都需要一个带有一些数据的注释块

{{--
  Title:
  Description:
  Category:
  Icon:
  Keywords:
  Mode:
  Align:
  PostTypes:
  SupportsAlign:
  SupportsMode:
  SupportsMultiple:
  SupportsFullHeight:
  SupportsInnerBlocks:
  EnqueueStyle:
  EnqueueScript:
  EnqueueAssets:
  Parent:
--}}

示例块模板

{{--
  Title: Testimonial
  Description: Customer testimonial
  Category: formatting
  Icon: admin-comments
  Keywords: testimonial quote
  Mode: edit
  Align: left
  PostTypes: page post
  SupportsAlign: left right
  SupportsMode: false
  SupportsMultiple: false
  SupportsFullHeight: false
  SupportsInnerBlocks: false
  EnqueueStyle: styles/style.css
  EnqueueScript: scripts/script.js
  EnqueueAssets: path/to/asset
  Parent: core/column
--}}

<blockquote data-{{ $block['id'] }} class="{{ $block['classes'] }}">
    <p>{{ get_field('testimonial') }}</p>
    <cite>
      <span>{{ get_field('author') }}</span>
    </cite>
</blockquote>

<style type="text/css">
  [data-{{$block['id']}}] {
    background: {{ get_field('background_color') }};
    color: {{ get_field('text_color') }};
  }
</style>

数据选项

文件头部的选项与 acf_register_block_type 函数 中的选项相对应。

创建 ACF 字段

创建块后，您将能够使用 WordPress 中的标准自定义字段界面将 ACF 字段分配给它。我们建议使用 sage-advanced-custom-fields 将您的 ACF 字段与 Sage 一起放在版本控制中。

过滤块数据

可以通过 'sage/blocks/[block-name]/data' 过滤器修改块数据。例如，如果您的块模板名为 my-block.blade.php，您可以通过这种方式修改数据

add_filter('sage/blocks/my-block/data', function ($block) { /* Do your thing here. */ });

过滤模板文件夹

默认情况下，所有在 views/blocks 中的模板文件都将被加载。如果您想添加更多文件夹，可以使用模板过滤器。以下是一个如何添加您自己的文件夹的示例。

add_filter('sage-acf-gutenberg-blocks-templates', function ($folders) {
    $folders[] = 'views/your-folder'; // Adds your folder
    return $folders;
});

创建您自己的自定义块分类

add_filter('block_categories_all', function ($categories) {
    // Define the new categories
    $newCategories = [
        ['slug' => 'my-custom-category', 'title' => __('Custom Category', 'sage')],
        ['slug' => 'my-custom-category2', 'title' => __('Custom Category 2', 'sage')],
    ];

    // Merge the new categories with the existing ones
    return array_merge($categories, $newCategories);
});

有关在 注册您自己的自定义块分类 的 block_categories_all 钩子的更多详细信息