Bricks
Wir können die Bricks-Daten eines Beitrags bearbeiten und bei Bedarf aktualisieren, indem wir das Bricks-JSON-Meta dieses Beitrags abfragen, iterieren, transformieren und speichern.
Bricks-Daten abfragen
Frage das Feld bricksData ab, das das JSON aller Elemente im Bricks-Beitrag zurückgibt.
query GetBricksData($customPostId: ID!) {
customPost(by: { id: $customPostId }, status: any) {
...on BricksMaybeEnabledForCustomPostType {
bricksData
}
}
}Die Antwort sieht so aus:
{
"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"
}
]
}
}
]
}
}
}Wir können Elemente auch per Name über den Parameter filterBy filtern (der include und exclude akzeptiert).
Wenn du diese query ausführst:
query GetBricksData($customPostId: ID!) {
customPost(by: { id: $customPostId }, status: any) {
...on BricksMaybeEnabledForCustomPostType {
bricksData(filterBy: {
include: [
"post-comments",
"post-author"
]
})
}
}
}...erhältst du diese Antwort:
{
"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"
}
}
]
}
}
}Du kannst jede globale Bricks-Komponente durch die entsprechenden Bricks-Elemente ersetzen, indem du den Parameter replaceComponents: true übergibst:
{
post(by: { id: 1 }) {
bricksData(replaceComponents: true)
}
}Um die Bricks-Komponenten abzufragen, verwende das Feld bricksComponents, das das JSON aller Komponenten zurückgibt (wie sie unter der Option bricks_components in der DB gespeichert sind).
{
bricksComponents
}Die Antwort sieht so aus:
{
"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"
}
]
}
}Du kannst Bricks-Komponenten auch nach ihren IDs filtern: bricksComponents(filter: {ids: ["flgizw"]}).
Bricks-Daten ändern und speichern
Iteriere die Elemente im von bricksData erzeugten JSON, passe sie nach Bedarf an und speichere das geänderte JSON über eine dieser Mutations zurück ins Post-Meta:
bricksSetCustomPostElementDatabricksMergeCustomPostElementDataItem
bricksSetCustomPostElementData verwenden
Exportiere nach dem Ändern der Elemente das gesamte geänderte JSON unter einer dynamischen Variable (um sie in die Mutation zu injizieren).
Diese query zum Beispiel wandelt alle heading-Elemente im JSON in Großbuchstaben um und exportiert das geänderte JSON (unter der dynamischen 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")
}
}
}Beachte, dass das JSON alle Elemente enthält, einschließlich der nicht geänderten.
Verwende dann die Mutation bricksSetCustomPostElementData, um das geänderte JSON zurück ins Post-Meta zu speichern:
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 verwenden
Alternativ kannst du nur die geänderten Elemente exportieren.
In dieser query filtern wir die Elemente nach Name und exportieren die geänderten Headings (unter der dynamischen Variable $modifiedBricksHeadings) sowie deren IDs (unter der dynamischen 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")
}
}
}Verwende dann die Mutation bricksMergeCustomPostElementDataItem, um diese Einträge in das Post-Meta-JSON einzufügen.
Dazu musst du zunächst den Input für die Mutation generieren, als Array mit der ID und den Einstellungen jedes geänderten Elements:
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
}
}
}
}