README

通过向Sage主题中添加模板来生成ACF Gutenberg块。此包主要基于这篇文章，作者nicoprat。

安装

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

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

创建块

将刀片模板添加到views/blocks中，以获取和使用ACF数据。每个模板都需要一个包含一些数据的注释块

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

示例块模板

{{--
  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
  Preview: true
  PreviewImage: path/to/my/block/preview.jpg
--}}

<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函数中的选项。

字段	描述	值	备注
`标题`	在Gutenberg编辑器中块的标题	例如：`Testimonial`	必需
`描述`	在Gutenberg编辑器中块的描述	例如：`我的推荐块`	可选
`类别`	存储块的类别。使用这些值或注册自己的自定义块类别	`common`、`formatting`、`layout`、`widgets`、`embed`	必需
`图标`	可以指定一个图标属性，以便更容易识别块。使用dashicons	例如：`book-alt`	可选
`关键词`	一个搜索词数组，帮助用户在搜索时发现该块。用空格分隔值。	例如：`quote mention cite`	可选
`模式`	块的显示模式。auto：默认显示预览，但当块被选中时转换为编辑表单。preview：始终显示预览。当块被选中时，编辑表单出现在侧边栏。edit：始终显示编辑表单。	`auto`、`preview`或`edit`	可选（默认为`preview`）
`对齐`	默认的块对齐方式。	`左中右宽全屏`	可选（默认为空字符串）
`PostTypes`	一个数组，限制此块类型到指定的帖子类型。用空格分隔值。	例如：`post page`
`SupportsAlign`	此属性添加了允许用户更改块对齐的块控件。设置为true以显示所有对齐方式，设置为false以隐藏对齐工具栏。设置为特定对齐名称的数组（由空格分隔）以自定义工具栏。	(布尔值) `true`、`false` 或 (数组) `left center right wide full`	可选（默认为true）
`SupportsMode`	此属性允许用户通过按钮在编辑和预览模式之间切换。	`true`或`false`	可选（默认为`true`）
`支持多次`	此属性允许块多次添加。	`true`或`false`	可选（默认为`true`）
`预览`	启用块样本预览	`true`或`false`	可选
`PreviewImage`	块样本预览图像的路径。相对于主题目录	`path/to/block/sample/image.jpg`	可选

创建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. });

ravorona / sage-acf-gutenberg-blocks

维护者

详情

README

安装

创建块

示例块模板

数据选项

创建ACF字段

过滤块数据