README

只需将模板添加到您的Sage主题，即可生成ACF Gutenberg块。此包主要基于这篇文章，作者是nicoprat。

安装

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

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

创建块

将blade模板添加到views/blocks，该模板获取并使用ACF数据。每个模板都需要一个包含一些数据的注释块

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

示例块模板

{{--
  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
  EnqueueStyle: styles/style.css
  EnqueueScript: scripts/script.js
  EnqueueAssets: path/to/asset
--}}

<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来将Sage中的ACF字段纳入版本控制。

过滤块数据

可以通过'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;
});