BricksBricks
Bricks
Integration with the Bricks plugin.
The GraphQL schema is provided with fields and mutations to fetch and update Bricks data from pages and templates.
Fields
Query the Bricks data from a custom post, retrieved via the following fields added to all CustomPost types (such as Post, Page and GenericCustomPost):
bricksData
In addition, query the Bricks components via root field bricksComponents.
bricksData
Field CustomPost.bricksData: [JSONObject!] retrieves the Bricks data for the custom post, as stored by Bricks.
Running this query:
{
post(by: { id: 1 }) {
bricksData
}
}...might produce this response:
{
"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:
{
post(by: { id: 1 }) {
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)
}
}bricksComponents
Field Root.bricksComponents: [JSONObject!]! retrieves the Bricks data for the global components, as stored by Bricks under option bricks_components.
Running this query:
{
bricksComponents
}...might produce this response:
[
{
"id": "fufxfs",
"category": "",
"desc": "",
"elements": [
{
"id": "fufxfs",
"name": "container",
"settings": {
"_width": "50%",
"_alignItems": "flex-start",
"_padding": {
"left": "",
"right": 50
},
"_width:mobile_portrait": "100%",
"_padding:tablet_portrait": {
"right": "25"
},
"_padding:mobile_portrait": {
"right": "0"
},
"_alignSelf": "center",
"_order:mobile_portrait": "2",
"_margin:mobile_portrait": {
"top": "60"
},
"_flexShrink": "0"
},
"children": [
"e8fab6",
"52c06c"
],
"parent": 0,
"label": "Icons"
},
{
"id": "e8fab6",
"name": "icon-box",
"settings": {
"icon": {
"library": "fontawesomeSolid",
"icon": "fas fa-check-square"
},
"content": "<h4>Business Professionals<\/h4><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit aliquam.<\/p>",
"textAlign": "left",
"iconPosition": "left",
"verticalAlign": "flex-start",
"_padding": {
"top": "20",
"right": "20",
"bottom": "20",
"left": 20
},
"_background": {
"color": {
"hex": "#ffffff"
}
},
"_border": {
"width": {
"top": "1",
"right": "1",
"bottom": "1",
"left": "1"
},
"style": "solid",
"radius": {
"top": "10"
},
"color": {
"hex": "#f2f2f2"
}
},
"typographyHeading": {
"font-size": "16px",
"font-family": "Open Sans",
"font-weight": "600",
"color": {
"hex": "#30354a"
}
},
"iconColor": {
"hex": "#ff57a2"
},
"iconSize": "20px",
"contentMargin": {
"top": 8
},
"_boxShadow": {
"values": {
"offsetX": "2",
"offsetY": "2",
"blur": "25"
},
"color": {
"hex": "#000000",
"rgb": "rgba(0, 0, 0, 0.11)",
"hsl": "hsla(0, 0%, 0%, 0.11)"
}
},
"typographyBody": {
"color": {
"hex": "#919191"
},
"font-size": "13px",
"font-family": "Open Sans"
},
"iconPadding": {
"top": "15",
"right": "15",
"bottom": "15",
"left": "15"
},
"iconBackgroundColor": {
"hex": "#ff57a2",
"rgb": "rgba(255, 87, 162, 0.2)",
"hsl": "hsla(333, 100%, 67%, 0.2)"
},
"iconBorder": {
"radius": {
"top": "100",
"right": "100",
"bottom": "100",
"left": "100"
}
},
"_boxShadow:hover": {
"values": {
"offsetX": "2",
"offsetY": "2",
"blur": "15"
},
"color": {
"hex": "#000000",
"rgb": "rgba(0, 0, 0, 0.2)",
"hsl": "hsla(0, 0%, 0%, 0.2)"
}
}
},
"children": [],
"parent": "fufxfs"
},
{
"id": "52c06c",
"name": "icon-box",
"settings": {
"icon": {
"library": "fontawesomeSolid",
"icon": "fas fa-check-square"
},
"content": "<h4>Cloud Services<\/h4><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit aliquam.<\/p>",
"textAlign": "left",
"iconPosition": "left",
"verticalAlign": "flex-start",
"_padding": {
"top": "20",
"right": "20",
"bottom": "20",
"left": 20
},
"_background": {
"color": {
"hex": "#ffffff"
}
},
"_border": {
"width": {
"top": "1",
"right": "1",
"bottom": "1",
"left": "1"
},
"style": "solid",
"radius": {
"top": "10"
},
"color": {
"hex": "#f2f2f2"
}
},
"typographyHeading": {
"font-size": "16px",
"font-family": "Open Sans",
"font-weight": "600",
"color": {
"hex": "#30354a"
},
"line-height": "1none"
},
"iconColor": {
"hex": "#3d30ba"
},
"iconSize": "20px",
"contentMargin": {
"top": 8
},
"_boxShadow": {
"values": {
"offsetX": "2",
"offsetY": "2",
"blur": "25"
},
"color": {
"hex": "#000000",
"rgb": "rgba(0, 0, 0, 0.11)",
"hsl": "hsla(0, 0%, 0%, 0.11)"
}
},
"typographyBody": {
"color": {
"hex": "#919191"
},
"font-size": "13px",
"font-family": "Open Sans"
},
"iconPadding": {
"top": "15",
"right": "15",
"bottom": "15",
"left": "15"
},
"iconBackgroundColor": {
"hex": "#3e30bb",
"rgb": "rgba(62, 48, 187, 0.2)",
"hsl": "hsla(246, 59%, 46%, 0.2)"
},
"iconBorder": {
"radius": {
"top": "100",
"right": "100",
"bottom": "100",
"left": "100"
}
},
"_margin": {
"top": 30
},
"_boxShadow:hover": {
"values": {
"offsetX": "2",
"offsetY": "2",
"blur": "15"
},
"color": {
"hex": "#000000",
"rgb": "rgba(0, 0, 0, 0.2)",
"hsl": "hsla(0, 0%, 0%, 0.2)"
}
}
},
"children": [],
"parent": "fufxfs"
}
],
"properties": [],
"_created": 1750156913,
"_user_id": 1,
"_version": "2.0-beta"
}
]Mutations
Update the Bricks data for a custom post via these mutations:
bricksSetCustomPostElementData sets the Bricks data for the custom post, expecting a JSON with the same format by Bricks.
bricksMergeCustomPostElementDataItem overrides the value of specific elements from a custom post's Bricks data.
bricksRegenerateCustomPostElementIDSet regenerates the element IDs on a custom post's Bricks data.
Prev
Next