Logo
คู่มือการใช้งาน
คู่มือการใช้งานBricks

Bricks

เราสามารถแก้ไขข้อมูล Bricks จากโพสต์และอัปเดตตามต้องการได้ โดยการ query, วนซ้ำ, แปลง และจัดเก็บ Bricks JSON meta สำหรับโพสต์นั้น

การทำงานกับ Bricks. ดูบน YouTube

Query ข้อมูล Bricks

Query ฟิลด์ bricksData ซึ่งจะคืนค่า JSON ของ element ทั้งหมดในโพสต์ Bricks

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"
              }
            ]
          }
        }
      ]
    }
  }
}

เรายังสามารถกรอง element ตามชื่อได้ผ่านพารามิเตอร์ 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"
          }
        }
      ]
    }
  }
}

คุณสามารถแทนที่ Bricks global component ใดๆ ด้วย Bricks element ที่สอดคล้องกันได้ โดยการส่งพารามิเตอร์ replaceComponents: true:

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

หากต้องการ query Bricks component ให้ใช้ฟิลด์ bricksComponents ซึ่งจะคืนค่า JSON ของ component ทั้งหมด (ตามที่จัดเก็บไว้ภายใต้ตัวเลือก bricks_components ใน DB)

{
  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"
      }
    ]
  }
}

คุณยังสามารถกรอง Bricks component ตาม ID ได้: bricksComponents(filter: {ids: ["flgizw"]})

แก้ไขและจัดเก็บข้อมูล Bricks

วนซ้ำ element ใน JSON ที่สร้างโดย bricksData แก้ไขตามต้องการ และจัดเก็บ JSON ที่แก้ไขแล้วกลับเข้าไปใน post meta ผ่าน mutation ใดๆ เหล่านี้:

  • bricksSetCustomPostElementData
  • bricksMergeCustomPostElementDataItem

การใช้ bricksSetCustomPostElementData

หลังจากแก้ไข element แล้ว ให้ export JSON ที่แก้ไขแล้วทั้งหมดภายใต้ dynamic variable (เพื่อ inject เข้าไปใน mutation)

ตัวอย่างเช่น query นี้จะแปลง element heading ทั้งหมดใน JSON ให้เป็นตัวพิมพ์ใหญ่ และ export JSON ที่แก้ไขแล้ว (ภายใต้ dynamic variable $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 จะมี element ทั้งหมด รวมถึง element ที่ไม่ได้ถูกแก้ไขด้วย

จากนั้น ใช้ mutation bricksSetCustomPostElementData เพื่อจัดเก็บ JSON ที่แก้ไขแล้วกลับเข้าไปใน post meta:

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

อีกทางเลือกหนึ่ง คุณสามารถ export เฉพาะ element ที่แก้ไขแล้วได้

ใน query นี้ เรากรอง element ตามชื่อ และ export heading ที่แก้ไขแล้ว (ภายใต้ dynamic variable $modifiedBricksHeadings) รวมถึง ID ของพวกมันด้วย (ภายใต้ dynamic variable $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")
    }
  }
}

จากนั้น ใช้ mutation bricksMergeCustomPostElementDataItem เพื่อ merge รายการเหล่านั้นเข้าไปใน post meta JSON

ในการทำเช่นนั้น คุณต้องสร้าง input เพื่อ inject เข้าไปใน mutation ก่อน โดยเป็น array ที่มี ID และ settings ของแต่ละ element ที่แก้ไขแล้ว:

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
      }
    }
  }
}