Logo
操作指南
操作指南Bricks

Bricks

我们可以通过查询、迭代、转换并保存文章的 Bricks JSON 元数据，来编辑文章中的 Bricks 数据并按需更新。

使用 Bricks. 在 YouTube 上观看

查询 Bricks 数据

查询字段 bricksData，它会返回 Bricks 文章中所有元素的 JSON。

query GetBricksData($customPostId: ID!) {
  customPost(by: { id: $customPostId }, status: any) {
    ...on BricksMaybeEnabledForCustomPostType {
      bricksData
    }
  }
}

响应如下所示：

{
  "data": {
    "post": {
      "bricksData": [
        {
          "id": "oleqdy",
          "name": "section",
          "parent": 0,
          "children": [
            "uuiyqj"
          ],
          "settings": []
        },
        {
          "id": "uuiyqj",
          "name": "container",
          "parent": "oleqdy",
          "children": [
            "ejfwpo",
            "czivwt",
            "ucuzdk",
            "wzcyug",
            "ipoorm",
            "zvgqxx",
            "yrambp",
            "hywkos",
            "gdoiqo",
            "tyksto",
            "nquple",
            "typize",
            "fjiwqp"
          ],
          "settings": []
        },
        {
          "id": "ejfwpo",
          "name": "post-title",
          "parent": "uuiyqj",
          "children": [],
          "settings": {
            "tag": "h1"
          }
        },
        {
          "id": "czivwt",
          "name": "post-excerpt",
          "parent": "uuiyqj",
          "children": [],
          "settings": []
        },
        {
          "id": "hywkos",
          "name": "post-comments",
          "parent": "uuiyqj",
          "children": [],
          "settings": {
            "title": true,
            "avatar": true,
            "formTitle": true,
            "label": true,
            "submitButtonStyle": "primary"
          }
        },
        {
          "id": "yrambp",
          "name": "post-author",
          "parent": "uuiyqj",
          "children": [],
          "settings": {
            "avatar": true,
            "name": true,
            "website": true,
            "bio": true,
            "postsLink": true,
            "postsStyle": "primary"
          }
        },
        {
          "id": "zvgqxx",
          "name": "related-posts",
          "parent": "uuiyqj",
          "children": [],
          "settings": {
            "taxonomies": [
              "category",
              "post_tag"
            ],
            "content": [
              {
                "dynamicData": "{post_title:link}",
                "tag": "h3",
                "dynamicMargin": {
                  "top": 10
                },
                "id": "a667d0"
              },
              {
                "dynamicData": "{post_date}",
                "id": "5bb1b2"
              },
              {
                "dynamicData": "{post_excerpt:20}",
                "dynamicMargin": {
                  "top": 10
                },
                "id": "80e288"
              }
            ]
          }
        }
      ]
    }
  }
}

还可以通过参数 filterBy（接受 include 和 exclude）按名称过滤元素。

执行以下 query：

query GetBricksData($customPostId: ID!) {
  customPost(by: { id: $customPostId }, status: any) {
    ...on BricksMaybeEnabledForCustomPostType {
      bricksData(filterBy: {
        include: [
          "post-comments",
          "post-author"
        ]
      })
    }
  }
}

...将返回以下响应：

{
  "data": {
    "post": {
      "bricksData": [
        {
          "id": "hywkos",
          "name": "post-comments",
          "parent": "uuiyqj",
          "children": [],
          "settings": {
            "title": true,
            "avatar": true,
            "formTitle": true,
            "label": true,
            "submitButtonStyle": "primary"
          }
        },
        {
          "id": "yrambp",
          "name": "post-author",
          "parent": "uuiyqj",
          "children": [],
          "settings": {
            "avatar": true,
            "name": true,
            "website": true,
            "bio": true,
            "postsLink": true,
            "postsStyle": "primary"
          }
        }
      ]
    }
  }
}

通过传入参数 replaceComponents: true，可以将任意 Bricks 全局组件替换为对应的 Bricks 元素：

{
  post(by: { id: 1 }) {
    bricksData(replaceComponents: true)
  }
}

要查询 Bricks 组件，使用字段 bricksComponents，它会返回所有组件的 JSON（存储在数据库的 bricks_components 选项中）。

{
  bricksComponents
}

响应如下所示：

{
  "data": {
    "bricksComponents": [
      {
        "id": "flgizw",
        "category": "",
        "desc": "",
        "elements": [
          {
            "id": "flgizw",
            "name": "container",
            "settings": {
              "_padding": {
                "right": 50
              },
              "_padding:mobile_landscape": {
                "right": "0"
              },
              "_alignItems:mobile_portrait": "center",
              "_width:tablet_portrait": "100%",
              "_padding:tablet_portrait": {
                "right": "0"
              },
              "_margin:tablet_portrait": {
                "bottom": "60"
              },
              "_margin:mobile_portrait": {
                "bottom": "30"
              }
            },
            "children": [
              "9029cb",
              "9a5e42"
            ],
            "parent": 0,
            "label": "Text Component"
          },
          {
            "id": "9029cb",
            "name": "heading",
            "settings": {
              "text": "Exceptional Furniture for Every Residence",
              "tag": "h2",
              "_typography:mobile_portrait": {
                "text-align": "center"
              }
            },
            "children": [],
            "parent": "flgizw"
          },
          {
            "id": "9a5e42",
            "name": "text",
            "settings": {
              "text": "Explore our vast selection of high-quality furniture crafted to elevate the ambiance of every room in your residence. From cozy sofas and sophisticated dining tables to practical storage options, our offerings blend style, durability, and value. Each piece is thoughtfully chosen to uphold the highest quality standards while accommodating diverse budgets and design tastes.",
              "_margin": {
                "top": "25"
              },
              "_typography:mobile_portrait": {
                "text-align": "center"
              }
            },
            "children": [],
            "parent": "flgizw"
          }
        ],
        "properties": [],
        "_created": 1750821473,
        "_user_id": 1,
        "_version": "2.0-beta"
      }
    ]
  }
}

还可以通过 ID 过滤 Bricks 组件：bricksComponents(filter: {ids: ["flgizw"]})。

修改并保存 Bricks 数据

迭代 bricksData 生成的 JSON 中的元素，按需修改，然后通过以下任一 mutation 将修改后的 JSON 写回文章元数据：

  • bricksSetCustomPostElementData
  • bricksMergeCustomPostElementDataItem

使用 bricksSetCustomPostElementData

修改元素后，将整个修改后的 JSON 导出到一个动态变量中（以便注入到 mutation）。

例如，以下 query 会将 JSON 中所有 heading 元素转换为大写，并将修改后的 JSON 导出到动态变量 $modifiedBricksData：

query GetAndModifyBricksData($customPostId: ID!) {
  customPost(by: { id: $customPostId }, status: any) {
    ...on BricksMaybeEnabledForCustomPostType {
      bricksData
        @underEachArrayItem(
          passValueOnwardsAs: "elementJSON"
          affectDirectivesUnderPos: [1, 2, 3]
        )
          @applyField(
            name: "_objectProperty",
            arguments: {
              object: $elementJSON,
              by: { key: "name" }
              failIfNonExistingKeyOrPath: false,
            },
            passOnwardsAs: "elementName"
          )
          @applyField(
            name: "_equals",
            arguments: {
              value1: $elementName,
              value2: "heading"
            },
            passOnwardsAs: "isMatch"
          )
          @if(condition: $isMatch)
            @underJSONObjectProperty(
              by: { path: "settings.text" }
              failIfNonExistingKeyOrPath: false
            )
              @strUpperCase
        @export(as: "modifiedBricksData")
    }
  }
}

请注意，JSON 中包含所有元素，包括未被修改的元素。

然后，使用 bricksSetCustomPostElementData mutation 将修改后的 JSON 写回文章元数据：

mutation StoreBricksData($customPostId: ID!)
  @depends(on: "GetAndModifyBricksData")
{
  bricksSetCustomPostElementData(input: {
    customPostID: $customPostId
    data: $modifiedBricksData
  }) {
    status
    errors {
      __typename
      ...on ErrorPayload {
        message
      }
    }
    customPost {
      __typename
      ...on CustomPost {
        id
        bricksData
      }
    }
  }
}

使用 bricksMergeCustomPostElementDataItem

或者，也可以只导出修改过的元素。

在此 query 中，我们按名称过滤元素，并导出修改后的标题（动态变量 $modifiedBricksHeadings）以及它们的 ID（动态变量 $modifiedBricksHeadingIDs）：

query GetAndModifyBricksData($customPostId: ID!) {
  customPost(by: { id: $customPostId }, status: any) {
    ...on BricksMaybeEnabledForCustomPostType {
      bricksData(filterBy: {include: ["heading"]})
        @underEachArrayItem(affectDirectivesUnderPos: [1, 3])
          @underJSONObjectProperty(by: { key: "id" })
            @export(as: "modifiedBricksHeadingIDs")
          @underJSONObjectProperty(
            by: { path: "settings.text" }
            failIfNonExistingKeyOrPath: false
            affectDirectivesUnderPos: [1, 2]
          )
            @strUpperCase
            @export(as: "modifiedBricksHeadings")
    }
  }
}

然后，使用 bricksMergeCustomPostElementDataItem mutation 将这些条目合并到文章元数据的 JSON 中。

为此，需要先生成注入 mutation 的输入，以包含每个修改元素的 ID 和设置的数组形式：

query GenerateBricksMergeDataItemInputs
  @depends(on: "GetAndModifyBricksData")
{
  bricksMergeDataItemInputs: _echo(value: $modifiedBricksHeadingIDs)
    @underEachArrayItem(
      passIndexOnwardsAs: "index",
      passValueOnwardsAs: "id"
      affectDirectivesUnderPos: [1, 2]
    )
      @applyField(
        name: "_arrayItem",
        arguments: {
          array: $modifiedBricksHeadings,
          position: $index
        },
        passOnwardsAs: "heading"
      )
      @applyField(
        name: "_echo",
        arguments: {
          value: {
            id: $id,
            settings: {
              text: $heading
            }
          }
        }
        setResultInResponse: true
      )
    @export(as: "bricksMergeDataItemInputs")
}
 
mutation StoreBricksData($customPostId: ID!)
  @depends(on: "GenerateBricksMergeDataItemInputs")
{
  bricksMergeCustomPostElementDataItem(input: {
    customPostID: $customPostId
    elements: $bricksMergeDataItemInputs
  }) {
    status
    errors {
      __typename
      ...on ErrorPayload {
        message
      }
    }
    customPost {
      __typename
      ...on CustomPost {
        id
        bricksData
      }
    }
  }
}