Bricks
Je kunt de Bricks-data van een bericht bewerken en naar wens bijwerken, door de Bricks JSON-meta van dat bericht op te vragen, te itereren, te transformeren en op te slaan.
Bricks-data opvragen
Vraag het veld bricksData op, dat de JSON retourneert van alle elementen in het Bricks-bericht.
query GetBricksData($customPostId: ID!) {
customPost(by: { id: $customPostId }, status: any) {
...on BricksMaybeEnabledForCustomPostType {
bricksData
}
}
}De response ziet er als volgt uit:
{
"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"
}
]
}
}
]
}
}
}Je kunt elementen ook op naam filteren via de parameter filterBy (die include en exclude accepteert).
Als je deze query uitvoert:
query GetBricksData($customPostId: ID!) {
customPost(by: { id: $customPostId }, status: any) {
...on BricksMaybeEnabledForCustomPostType {
bricksData(filterBy: {
include: [
"post-comments",
"post-author"
]
})
}
}
}...krijg je deze 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"
}
}
]
}
}
}Je kunt elk globaal Bricks-component vervangen door de bijbehorende Bricks-elementen door de parameter replaceComponents: true mee te geven:
{
post(by: { id: 1 }) {
bricksData(replaceComponents: true)
}
}Om de Bricks-componenten op te vragen, gebruik je het veld bricksComponents, dat de JSON retourneert van alle componenten (zoals opgeslagen onder de optie bricks_components in de database).
{
bricksComponents
}De response ziet er als volgt uit:
{
"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"
}
]
}
}Je kunt Bricks-componenten ook filteren op hun ID's: bricksComponents(filter: {ids: ["flgizw"]}).
Bricks-data aanpassen en opslaan
Itereer de elementen in de JSON die door bricksData is geretourneerd, pas ze naar wens aan en sla de gewijzigde JSON weer op in de post-meta via een van deze mutaties:
bricksSetCustomPostElementDatabricksMergeCustomPostElementDataItem
Met bricksSetCustomPostElementData
Exporteer na het aanpassen van de elementen de volledige gewijzigde JSON onder een dynamische variabele (om die in de mutatie te injecteren).
Deze query transformeert bijvoorbeeld alle heading-elementen in de JSON naar hoofdletters en exporteert de gewijzigde JSON (onder de dynamische variabele $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")
}
}
}Let op: de JSON bevat alle elementen, inclusief de elementen die niet zijn gewijzigd.
Gebruik vervolgens de mutatie bricksSetCustomPostElementData om de gewijzigde JSON weer op te slaan in de 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
}
}
}
}Met bricksMergeCustomPostElementDataItem
Als alternatief kun je alleen de gewijzigde elementen exporteren.
In deze query filteren we de elementen op naam en exporteren we de gewijzigde koppen (onder de dynamische variabele $modifiedBricksHeadings) en hun ID's (onder de dynamische variabele $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")
}
}
}Gebruik vervolgens de mutatie bricksMergeCustomPostElementDataItem om die vermeldingen samen te voegen in de post-meta JSON.
Daarvoor moet je eerst de invoer genereren die in de mutatie wordt geïnjecteerd, als een array met het ID en de instellingen van elk gewijzigd 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
}
}
}
}