Logo
활용 가이드
활용 가이드Bricks

Bricks

게시물의 Bricks 데이터를 편집하고 필요에 따라 업데이트할 수 있습니다. 해당 게시물의 Bricks JSON 메타를 쿼리, 반복, 변환 및 저장하는 방식으로 이를 수행합니다.

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 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（DB의 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의 요소를 반복 처리하고 필요에 따라 수정한 후, 다음 뮤테이션 중 하나를 통해 수정된 JSON을 게시물 메타에 다시 저장합니다:

  • bricksSetCustomPostElementData
  • bricksMergeCustomPostElementDataItem

bricksSetCustomPostElementData 사용

요소를 수정한 후, 수정된 전체 JSON을 다이나믹 변수에 내보냅니다（뮤테이션에 주입하기 위해）.

예를 들어, 다음 쿼리는 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 뮤테이션을 사용하여 수정된 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 사용

또는 수정된 요소만 내보낼 수도 있습니다.

이 쿼리에서는 이름으로 요소를 필터링하고, 수정된 헤딩（다이나믹 변수 $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 뮤테이션을 사용하여 해당 항목들을 게시물 메타 JSON에 병합합니다.

그러려면 먼저 뮤테이션에 주입할 입력을 생성해야 합니다. 이는 수정된 각 요소의 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
      }
    }
  }
}