ElementorElementor
Elementor
Integrasi dengan plugin Elementor (dan juga Elementor PRO).
Skema GraphQL dilengkapi dengan fields dan mutations untuk mengambil dan memperbarui data Elementor dari halaman dan template.
Bidang
Query data Elementor dari sebuah custom post, yang diambil melalui fields berikut yang ditambahkan ke semua tipe CustomPost (seperti Post, Page, dan GenericCustomPost):
elementorDataelementorFlattenedDataItems
Field CustomPost.elementorData: [JSONObject!] mengambil data Elementor untuk custom post, sebagaimana yang disimpan oleh Elementor.
Menjalankan query ini:
{
post(by: { id: 1 }) {
elementorData
}
}...mungkin menghasilkan respons ini:
{
"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
}
]
}
}
}Field CustomPost.elementorFlattenedDataItems: [JSONObject!] meratakan output dari field elementorData, sehingga semua elemen (bahkan yang bersarang) muncul di tingkat pertama array.
Menjalankan query ini:
{
post(by: { id: 1 }) {
elementorFlattenedDataItems
}
}...mungkin menghasilkan respons ini:
{
"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": []
}
]
}
}
}Kita juga dapat memfilter elemen berdasarkan tipe atau nama widget melalui param filterBy, yang menerima include dan exclude.
Menjalankan query ini:
{
post(by: { id: 1 }) {
elementorContainerFlattenedDataItems: elementorFlattenedDataItems(filterBy: {include: ["container"]})
elementorHeadingFlattenedDataItems: elementorFlattenedDataItems(filterBy: {include: ["heading"]})
}
}...akan menghasilkan respons ini:
{
"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": []
}
]
}
}
}Mutasi
Perbarui data Elementor untuk sebuah custom post melalui mutasi berikut:
elementorSetCustomPostElementData mengatur data Elementor untuk custom post, dengan mengharapkan JSON berformat sama seperti yang digunakan Elementor.
elementorMergeCustomPostElementDataItem menimpa nilai elemen-elemen tertentu dari data Elementor sebuah custom post.