Bricks
Integración con el plugin Bricks.
El esquema GraphQL se proporciona con campos y mutaciones para obtener y actualizar datos de Bricks desde páginas y plantillas.
Campos
Consulta los datos de Bricks de un custom post, obtenidos mediante los siguientes campos añadidos a todos los tipos CustomPost (como Post, Page y GenericCustomPost):
bricksData
Además, consulta los componentes de Bricks mediante el campo raíz bricksComponents.
bricksData
El campo CustomPost.bricksData: [JSONObject!] obtiene los datos de Bricks para el custom post, tal y como los almacena Bricks.
Al ejecutar esta consulta:
{
post(by: { id: 1 }) {
bricksData
}
}...podría producir esta respuesta:
{
"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"
}
]
}
}
]
}
}
}También podemos filtrar elementos por nombre mediante el parámetro filterBy, que acepta include y exclude.
Al ejecutar esta consulta:
{
post(by: { id: 1 }) {
bricksData(filterBy: {include: ["post-comments", "post-author"]})
}
}...producirá esta respuesta:
{
"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"
}
}
]
}
}
}Puedes reemplazar cualquier componente global de Bricks con los elementos de Bricks correspondientes, pasando el parámetro replaceComponents: true:
{
post(by: { id: 1 }) {
bricksData(replaceComponents: true)
}
}bricksComponents
El campo Root.bricksComponents: [JSONObject!]! obtiene los datos de Bricks para los componentes globales, tal y como los almacena Bricks bajo la opción bricks_components.
Al ejecutar esta consulta:
{
bricksComponents
}...podría producir esta respuesta:
[
{
"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"
}
]Mutaciones
Actualiza los datos de Bricks para un custom post mediante estas mutaciones:
bricksSetCustomPostElementData establece los datos de Bricks para el custom post, esperando un JSON con el mismo formato que utiliza Bricks.
bricksMergeCustomPostElementDataItem sobrescribe el valor de elementos específicos de los datos de Bricks de un custom post.
bricksRegenerateCustomPostElementIDSet regenera los IDs de los elementos en los datos de Bricks de un custom post.