ElementorElementor
Elementor
Integrazione con il plugin Elementor (e anche con Elementor PRO).
Lo schema GraphQL è fornito con campi e mutation per recuperare e aggiornare i dati Elementor da pagine e template.
Campi
Interroga i dati Elementor di un custom post, recuperati tramite i seguenti campi aggiunti a tutti i tipi CustomPost (come Post, Page e GenericCustomPost):
elementorDataelementorFlattenedDataItems
Il campo CustomPost.elementorData: [JSONObject!] recupera i dati Elementor del custom post, così come sono memorizzati da Elementor.
Eseguendo questa query:
{
post(by: { id: 1 }) {
elementorData
}
}...questo potrebbe produrre questa risposta:
{
"data": {
"post": {
"elementorData": [
{
"id": "164e55c4",
"elType": "container",
"settings": {
"layout": "full_width",
"flex_gap": {
"size": 0,
"unit": "px",
"column": "0",
"row": "0",
"isLinked": true
},
"min_height": {
"unit": "vh",
"size": 100,
"sizes": []
},
"flex_align_items": "stretch",
"content_position": "middle",
"structure": "20",
"margin": {
"unit": "%",
"top": "",
"right": 0,
"bottom": "",
"left": 0,
"isLinked": true
},
"padding": {
"unit": "%",
"top": "0",
"right": "6",
"bottom": "0",
"left": "6",
"isLinked": false
},
"margin_tablet": {
"unit": "%",
"top": "12",
"right": 0,
"bottom": "0",
"left": 0,
"isLinked": false
},
"margin_mobile": {
"unit": "%",
"top": "20",
"right": 0,
"bottom": "0",
"left": 0,
"isLinked": false
},
"padding_tablet": {
"unit": "%",
"top": "",
"right": "",
"bottom": "",
"left": "",
"isLinked": true
},
"z_index": 1,
"_title": "Hero",
"flex_direction": "row",
"content_width": "full",
"flex_direction_tablet": "column"
},
"elements": [
{
"id": "600c1786",
"elType": "container",
"settings": {
"_column_size": 50,
"width": {
"size": 50,
"unit": "%"
},
"padding": {
"unit": "%",
"top": "0",
"right": "12",
"bottom": "0",
"left": "0",
"isLinked": false
},
"width_tablet": {
"size": 100,
"unit": "%"
},
"align_tablet": "center",
"flex_gap": {
"size": 20,
"unit": "px",
"column": "20",
"row": "20",
"isLinked": true
},
"padding_tablet": {
"unit": "%",
"top": "0",
"right": "15",
"bottom": "0",
"left": "15",
"isLinked": false
},
"padding_mobile": {
"unit": "px",
"top": "0",
"right": "0",
"bottom": "0",
"left": "0",
"isLinked": false
},
"content_width": "full",
"flex_direction": "column",
"flex_justify_content": "center",
"flex_align_items": "flex-start",
"flex_align_items_tablet": "center"
},
"elements": [
{
"id": "db84e33",
"elType": "widget",
"settings": {
"title": "Your health, <br><b>on your time<\/b>",
"header_size": "h1",
"title_color": "#0D3276",
"typography_typography": "custom",
"typography_font_family": "Poppins",
"typography_font_size": {
"unit": "px",
"size": 76,
"sizes": []
},
"typography_font_weight": "400",
"typography_text_transform": "capitalize",
"typography_font_style": "normal",
"typography_text_decoration": "none",
"typography_line_height": {
"unit": "em",
"size": 1,
"sizes": []
},
"typography_letter_spacing": {
"unit": "px",
"size": 0,
"sizes": []
},
"_z_index": 1,
"align_tablet": "center",
"typography_font_size_tablet": {
"unit": "px",
"size": 55,
"sizes": []
},
"typography_font_size_mobile": {
"unit": "px",
"size": 40,
"sizes": []
}
},
"elements": [],
"widgetType": "heading",
"htmlCache": "\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h1 class=\"elementor-heading-title elementor-size-default\">Your health, <br><b>on your time<\/b><\/h1>\t\t\t\t<\/div>\n\t\t"
}
]
}
],
"isInner": false
}
]
}
}
}Il campo CustomPost.elementorFlattenedDataItems: [JSONObject!] appiattisce l'output del campo elementorData, in modo che tutti gli elementi (anche quelli annidati) appaiano al primo livello dell'array.
Eseguendo questa query:
{
post(by: { id: 1 }) {
elementorFlattenedDataItems
}
}...questo potrebbe produrre questa risposta:
{
"data": {
"post": {
"elementorFlattenedDataItems": [
{
"id": "164e55c4",
"elType": "container",
"settings": {
"layout": "full_width",
"flex_gap": {
"size": 0,
"unit": "px",
"column": "0",
"row": "0",
"isLinked": true
},
"min_height": {
"unit": "vh",
"size": 100,
"sizes": []
},
"flex_align_items": "stretch",
"content_position": "middle",
"structure": "20",
"margin": {
"unit": "%",
"top": "",
"right": 0,
"bottom": "",
"left": 0,
"isLinked": true
},
"padding": {
"unit": "%",
"top": "0",
"right": "6",
"bottom": "0",
"left": "6",
"isLinked": false
},
"margin_tablet": {
"unit": "%",
"top": "12",
"right": 0,
"bottom": "0",
"left": 0,
"isLinked": false
},
"margin_mobile": {
"unit": "%",
"top": "20",
"right": 0,
"bottom": "0",
"left": 0,
"isLinked": false
},
"padding_tablet": {
"unit": "%",
"top": "",
"right": "",
"bottom": "",
"left": "",
"isLinked": true
},
"z_index": 1,
"_title": "Hero",
"flex_direction": "row",
"content_width": "full",
"flex_direction_tablet": "column"
},
"isInner": false,
"innerElementIds": [
"600c1786",
"5b451d4"
],
"parentElementId": null
},
{
"id": "600c1786",
"elType": "container",
"settings": {
"_column_size": 50,
"width": {
"size": 50,
"unit": "%"
},
"padding": {
"unit": "%",
"top": "0",
"right": "12",
"bottom": "0",
"left": "0",
"isLinked": false
},
"width_tablet": {
"size": 100,
"unit": "%"
},
"align_tablet": "center",
"flex_gap": {
"size": 20,
"unit": "px",
"column": "20",
"row": "20",
"isLinked": true
},
"padding_tablet": {
"unit": "%",
"top": "0",
"right": "15",
"bottom": "0",
"left": "15",
"isLinked": false
},
"padding_mobile": {
"unit": "px",
"top": "0",
"right": "0",
"bottom": "0",
"left": "0",
"isLinked": false
},
"content_width": "full",
"flex_direction": "column",
"flex_justify_content": "center",
"flex_align_items": "flex-start",
"flex_align_items_tablet": "center"
},
"isInner": true,
"parentElementId": "164e55c4",
"innerElementIds": [
"db84e33",
"7fe7b508",
"314da60",
"7b7e33ce",
"7ff4508"
]
},
{
"id": "db84e33",
"elType": "widget",
"settings": {
"title": "Your health, <br><b>on your time<\/b>",
"header_size": "h1",
"title_color": "#0D3276",
"typography_typography": "custom",
"typography_font_family": "Poppins",
"typography_font_size": {
"unit": "px",
"size": 76,
"sizes": []
},
"typography_font_weight": "400",
"typography_text_transform": "capitalize",
"typography_font_style": "normal",
"typography_text_decoration": "none",
"typography_line_height": {
"unit": "em",
"size": 1,
"sizes": []
},
"typography_letter_spacing": {
"unit": "px",
"size": 0,
"sizes": []
},
"_z_index": 1,
"align_tablet": "center",
"typography_font_size_tablet": {
"unit": "px",
"size": 55,
"sizes": []
},
"typography_font_size_mobile": {
"unit": "px",
"size": 40,
"sizes": []
}
},
"widgetType": "heading",
"parentElementId": "600c1786",
"innerElementIds": []
}
]
}
}
}Possiamo anche filtrare gli elementi per tipo o nome del widget tramite il parametro filterBy, che accetta include ed exclude.
Eseguendo questa query:
{
post(by: { id: 1 }) {
elementorContainerFlattenedDataItems: elementorFlattenedDataItems(filterBy: {include: ["container"]})
elementorHeadingFlattenedDataItems: elementorFlattenedDataItems(filterBy: {include: ["heading"]})
}
}...questo produrrà questa risposta:
{
"data": {
"post": {
"elementorContainerFlattenedDataItems": [
{
"id": "164e55c4",
"elType": "container",
"settings": {
"layout": "full_width",
"flex_gap": {
"size": 0,
"unit": "px",
"column": "0",
"row": "0",
"isLinked": true
},
"min_height": {
"unit": "vh",
"size": 100,
"sizes": []
},
"flex_align_items": "stretch",
"content_position": "middle",
"structure": "20",
"margin": {
"unit": "%",
"top": "",
"right": 0,
"bottom": "",
"left": 0,
"isLinked": true
},
"padding": {
"unit": "%",
"top": "0",
"right": "6",
"bottom": "0",
"left": "6",
"isLinked": false
},
"margin_tablet": {
"unit": "%",
"top": "12",
"right": 0,
"bottom": "0",
"left": 0,
"isLinked": false
},
"margin_mobile": {
"unit": "%",
"top": "20",
"right": 0,
"bottom": "0",
"left": 0,
"isLinked": false
},
"padding_tablet": {
"unit": "%",
"top": "",
"right": "",
"bottom": "",
"left": "",
"isLinked": true
},
"z_index": 1,
"_title": "Hero",
"flex_direction": "row",
"content_width": "full",
"flex_direction_tablet": "column"
},
"isInner": false,
"innerElementIds": [
"600c1786",
"5b451d4"
],
"parentElementId": null
},
{
"id": "600c1786",
"elType": "container",
"settings": {
"_column_size": 50,
"width": {
"size": 50,
"unit": "%"
},
"padding": {
"unit": "%",
"top": "0",
"right": "12",
"bottom": "0",
"left": "0",
"isLinked": false
},
"width_tablet": {
"size": 100,
"unit": "%"
},
"align_tablet": "center",
"flex_gap": {
"size": 20,
"unit": "px",
"column": "20",
"row": "20",
"isLinked": true
},
"padding_tablet": {
"unit": "%",
"top": "0",
"right": "15",
"bottom": "0",
"left": "15",
"isLinked": false
},
"padding_mobile": {
"unit": "px",
"top": "0",
"right": "0",
"bottom": "0",
"left": "0",
"isLinked": false
},
"content_width": "full",
"flex_direction": "column",
"flex_justify_content": "center",
"flex_align_items": "flex-start",
"flex_align_items_tablet": "center"
},
"isInner": true,
"parentElementId": "164e55c4",
"innerElementIds": [
"db84e33",
"7fe7b508",
"314da60",
"7b7e33ce",
"7ff4508"
]
}
]
},
{
"elementorHeadingFlattenedDataItems": [
{
"id": "db84e33",
"elType": "widget",
"settings": {
"title": "Your health, <br><b>on your time<\/b>",
"header_size": "h1",
"title_color": "#0D3276",
"typography_typography": "custom",
"typography_font_family": "Poppins",
"typography_font_size": {
"unit": "px",
"size": 76,
"sizes": []
},
"typography_font_weight": "400",
"typography_text_transform": "capitalize",
"typography_font_style": "normal",
"typography_text_decoration": "none",
"typography_line_height": {
"unit": "em",
"size": 1,
"sizes": []
},
"typography_letter_spacing": {
"unit": "px",
"size": 0,
"sizes": []
},
"_z_index": 1,
"align_tablet": "center",
"typography_font_size_tablet": {
"unit": "px",
"size": 55,
"sizes": []
},
"typography_font_size_mobile": {
"unit": "px",
"size": 40,
"sizes": []
}
},
"widgetType": "heading",
"parentElementId": "600c1786",
"innerElementIds": []
}
]
}
}
}Mutation
Aggiorna i dati Elementor di un custom post tramite queste mutation:
elementorSetCustomPostElementData imposta i dati Elementor per il custom post, aspettandosi un JSON con lo stesso formato di Elementor.
elementorMergeCustomPostElementDataItem sovrascrive il valore di elementi specifici dei dati Elementor di un custom post.