Logo
Trabalhando com
Trabalhando comBricks

Bricks

Podemos editar os dados do Bricks de um post e atualizá-los conforme necessário, consultando, iterando, transformando e armazenando o meta JSON do Bricks para esse post.

Trabalhando com Bricks. Assista no YouTube

Consultar dados do Bricks

Consulte o campo bricksData, que retorna o JSON de todos os elementos no post do Bricks.

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

A resposta terá esta aparência:

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

Também podemos filtrar elementos por nome via parâmetro filterBy (que aceita include e exclude).

Executando esta query:

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

...será produzida esta resposta:

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

Você pode substituir qualquer componente global do Bricks pelos elementos Bricks correspondentes, passando o parâmetro replaceComponents: true:

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

Para consultar os componentes Bricks, use o campo bricksComponents, que retorna o JSON de todos os componentes (conforme armazenados sob a opção bricks_components no banco de dados).

{
  bricksComponents
}

A resposta terá esta aparência:

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

Você também pode filtrar os componentes Bricks pelos seus IDs: bricksComponents(filter: {ids: ["flgizw"]}).

Modificar e Armazenar dados do Bricks

Itere os elementos no JSON produzido por bricksData, modifique-os conforme necessário, e armazene o JSON modificado de volta no meta do post, por meio de qualquer uma destas mutations:

  • bricksSetCustomPostElementData
  • bricksMergeCustomPostElementDataItem

Usando bricksSetCustomPostElementData

Após modificar os elementos, exporte o JSON modificado completo sob uma variável dinâmica (para injetá-la na mutation).

Por exemplo, esta query transformará todos os elementos heading no JSON para maiúsculas e exportará o JSON modificado (sob a variável dinâmica $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")
    }
  }
}

Observe que o JSON conterá todos os elementos, incluindo os que não foram modificados.

Em seguida, use a mutation bricksSetCustomPostElementData para armazenar o JSON modificado de volta no meta do post:

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

Usando bricksMergeCustomPostElementDataItem

Alternativamente, você pode exportar apenas os elementos modificados.

Nesta query, filtramos os elementos por nome e exportamos os headings modificados (sob a variável dinâmica $modifiedBricksHeadings) e também seus IDs (sob a variável dinâmica $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")
    }
  }
}

Em seguida, use a mutation bricksMergeCustomPostElementDataItem para mesclar essas entradas no JSON meta do post.

Para isso, você deve primeiro gerar o input a ser injetado na mutation, como um array com o ID e as configurações de cada elemento modificado:

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