Bricks
Intégration avec le plugin Bricks.
Le schéma GraphQL est fourni avec des champs et des mutations pour récupérer et mettre à jour les données Bricks depuis les pages et les modèles.
Champs
Interrogez les données Bricks d'un custom post, récupérées via les champs suivants ajoutés à tous les types CustomPost (tels que Post, Page et GenericCustomPost) :
bricksData
De plus, interrogez les composants Bricks via le champ racine bricksComponents.
bricksData
Le champ CustomPost.bricksData: [JSONObject!] récupère les données Bricks pour le custom post, telles qu'elles sont stockées par Bricks.
En exécutant cette requête :
{
post(by: { id: 1 }) {
bricksData
}
}...pourrait produire cette réponse :
{
"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"
}
]
}
}
]
}
}
}Nous pouvons également filtrer les éléments par nom via le paramètre filterBy, qui accepte include et exclude.
En exécutant cette requête :
{
post(by: { id: 1 }) {
bricksData(filterBy: {include: ["post-comments", "post-author"]})
}
}...produira cette réponse :
{
"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"
}
}
]
}
}
}Vous pouvez remplacer n'importe quel composant global Bricks par les éléments Bricks correspondants, en passant le paramètre replaceComponents: true :
{
post(by: { id: 1 }) {
bricksData(replaceComponents: true)
}
}bricksComponents
Le champ Root.bricksComponents: [JSONObject!]! récupère les données Bricks pour les composants globaux, telles qu'elles sont stockées par Bricks sous l'option bricks_components.
En exécutant cette requête :
{
bricksComponents
}...pourrait produire cette réponse :
[
{
"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
Mettez à jour les données Bricks pour un custom post via ces mutations :
bricksSetCustomPostElementData définit les données Bricks pour le custom post, en attendant un JSON avec le même format utilisé par Bricks.
bricksMergeCustomPostElementDataItem écrase la valeur d'éléments spécifiques des données Bricks d'un custom post.
bricksRegenerateCustomPostElementIDSet régénère les IDs des éléments dans les données Bricks d'un custom post.