Bricks
Kita dapat mengedit data Bricks dari sebuah post dan memperbaruinya sesuai kebutuhan, dengan melakukan query, iterasi, transformasi, dan menyimpan kembali meta JSON Bricks untuk post tersebut.
Query data Bricks
Query field bricksData, yang mengembalikan JSON dari semua elemen dalam post Bricks.
query GetBricksData($customPostId: ID!) {
customPost(by: { id: $customPostId }, status: any) {
...on BricksMaybeEnabledForCustomPostType {
bricksData
}
}
}Responsnya akan terlihat seperti ini:
{
"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"
}
]
}
}
]
}
}
}Kita juga dapat memfilter elemen berdasarkan nama melalui param filterBy (yang menerima include dan exclude).
Menjalankan query ini:
query GetBricksData($customPostId: ID!) {
customPost(by: { id: $customPostId }, status: any) {
...on BricksMaybeEnabledForCustomPostType {
bricksData(filterBy: {
include: [
"post-comments",
"post-author"
]
})
}
}
}...akan menghasilkan respons ini:
{
"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"
}
}
]
}
}
}Anda dapat mengganti komponen global Bricks mana pun dengan elemen Bricks yang sesuai, dengan melewatkan param replaceComponents: true:
{
post(by: { id: 1 }) {
bricksData(replaceComponents: true)
}
}Untuk melakukan query komponen Bricks, gunakan field bricksComponents, yang mengembalikan JSON dari semua komponen (sebagaimana tersimpan di bawah opsi bricks_components di DB).
{
bricksComponents
}Responsnya akan terlihat seperti ini:
{
"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"
}
]
}
}Anda juga dapat memfilter komponen Bricks berdasarkan ID-nya: bricksComponents(filter: {ids: ["flgizw"]}).
Modifikasi dan Simpan data Bricks
Iterasi elemen dalam JSON yang dihasilkan oleh bricksData, modifikasi sesuai kebutuhan, dan simpan kembali JSON yang telah dimodifikasi ke dalam post meta, melalui salah satu mutasi berikut:
bricksSetCustomPostElementDatabricksMergeCustomPostElementDataItem
Menggunakan bricksSetCustomPostElementData
Setelah memodifikasi elemen, ekspor seluruh JSON yang telah dimodifikasi di bawah sebuah variabel dinamis (untuk diinjeksikan ke dalam mutasi).
Misalnya, query ini akan mengubah semua elemen heading dalam JSON menjadi huruf kapital, dan mengekspor JSON yang telah dimodifikasi (di bawah variabel dinamis $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")
}
}
}Perhatikan bahwa JSON akan berisi semua elemen, termasuk yang tidak dimodifikasi.
Kemudian, gunakan mutasi bricksSetCustomPostElementData untuk menyimpan kembali JSON yang telah dimodifikasi ke dalam 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
}
}
}
}Menggunakan bricksMergeCustomPostElementDataItem
Sebagai alternatif, Anda dapat mengekspor hanya elemen yang telah dimodifikasi.
Dalam query ini, kita memfilter elemen berdasarkan nama, dan mengekspor heading yang telah dimodifikasi (di bawah variabel dinamis $modifiedBricksHeadings) serta juga ID-nya (di bawah variabel dinamis $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")
}
}
}Kemudian, gunakan mutasi bricksMergeCustomPostElementDataItem untuk menggabungkan entri-entri tersebut ke dalam JSON meta post.
Untuk melakukannya, Anda harus terlebih dahulu menghasilkan input untuk diinjeksikan ke dalam mutasi, sebagai array dengan ID dan settings dari setiap elemen yang telah dimodifikasi:
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
}
}
}
}