Bricks
We can edit the Bricks data from a post and update it as needed, by querying, iterating, transforming and storing the Bricks JSON meta for that post.
Query Bricks data
Query field bricksData, which returns the JSON of all the elements in the Bricks post.
query GetBricksData($customPostId: ID!) {
customPost(by: { id: $customPostId }, status: any) {
...on BricksMaybeEnabledForCustomPostType {
bricksData
}
}
}The response will look like this:
{
"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"
}
]
}
}
]
}
}
}We can also filter elements by name via param filterBy (which accepts include and exclude).
Running this query:
query GetBricksData($customPostId: ID!) {
customPost(by: { id: $customPostId }, status: any) {
...on BricksMaybeEnabledForCustomPostType {
bricksData(filterBy: {
include: [
"post-comments",
"post-author"
]
})
}
}
}...will produce this response:
{
"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"
}
}
]
}
}
}You can replace any Bricks global component with the corresponding Bricks elements, by passing param replaceComponents: true:
{
post(by: { id: 1 }) {
bricksData(replaceComponents: true)
}
}To query the Bricks components, use field bricksComponents, which returns the JSON of all the components (as stored under the bricks_components option in the DB).
{
bricksComponents
}The response will look like this:
{
"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"
}
]
}
}You can also filter Bricks components by their IDs: bricksComponents(filter: {ids: ["flgizw"]}).
Modify and Store Bricks data
Iterate the elements in the JSON produced by bricksData, modify them as needed, and store the modified JSON back into post meta, via any of these mutations:
bricksSetCustomPostElementDatabricksMergeCustomPostElementDataItem
Using bricksSetCustomPostElementData
After modifying the elements, export the whole modified JSON under a dynamic variable (to inject into the mutation).
For instance, this query will transform all the heading elements in the JSON to uppercase, and export the modified JSON (under 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")
}
}
}Notice that the JSON will contain all the elements, including the ones that were not modified.
Then, use the bricksSetCustomPostElementData mutation to store the modified JSON back into 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
}
}
}
}Using bricksMergeCustomPostElementDataItem
Alternatively, you can export only the modified elements.
In this query, we filter the elements by name, and export the modified headings (under dynamic variable $modifiedBricksHeadings) and also their IDs (under 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")
}
}
}Then, use the bricksMergeCustomPostElementDataItem mutation to merge those entries into the post meta JSON.
To do that, you must first generate the input to inject into the mutation, as an array with the ID and settings of each modified 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
}
}
}
}