From af7ce072a8491ea7f0f28ff11b9893724e938fd3 Mon Sep 17 00:00:00 2001
From: Jordan McFarlane <jmf@umbraco.dk>
Date: Fri, 9 Feb 2024 10:46:20 +0100
Subject: [PATCH] Add block grid property editor & schema

---
 .../graphql/property-editors.md               |  11 +
 .../graphql/schema-generation.md              | 190 ++++++++++++++++++
 2 files changed, 201 insertions(+)

diff --git a/umbraco-heartcore/api-documentation/graphql/property-editors.md b/umbraco-heartcore/api-documentation/graphql/property-editors.md
index a5614c65919..e672b388307 100644
--- a/umbraco-heartcore/api-documentation/graphql/property-editors.md
+++ b/umbraco-heartcore/api-documentation/graphql/property-editors.md
@@ -30,6 +30,17 @@ Can be used for filtering: `true`
 
 <details>
 
+<summary>Block Grid</summary>
+
+Editor Alias: `Umbraco.BlockGrid`\
+GraphQL Type: [`BlockGrid`](schema-generation.md#block-grid)&#x20;
+
+Can be used for filtering: `false`
+
+</details>
+
+<details>
+
 <summary>Block List</summary>
 
 Editor Alias: `Umbraco.BlockList`\
diff --git a/umbraco-heartcore/api-documentation/graphql/schema-generation.md b/umbraco-heartcore/api-documentation/graphql/schema-generation.md
index 34a3ba5458e..c2a8189ef83 100644
--- a/umbraco-heartcore/api-documentation/graphql/schema-generation.md
+++ b/umbraco-heartcore/api-documentation/graphql/schema-generation.md
@@ -284,6 +284,196 @@ The Umbraco Heartcore GraphQL schema contains some default types, below you can
 
 The [Property Editors](property-editors.md) page contains a list of all the Property Editors and which GraphQL types they return.
 
+### Block Grid
+
+```graphql
+type BlockGrid {
+    """
+    Items in the grid.
+    """
+    items: [BlockGridItem]!
+
+    """
+    Number of columns in the grid.
+    """
+    gridColumns: Int!
+}
+```
+
+**Query**
+
+```graphql
+{
+  contentPage {
+    blocks {
+      gridColumns
+    }
+  }
+}
+```
+
+**Output**
+
+```json
+{
+  "data": {
+    "contentPage": {
+      "blocks": {
+        "gridColumns": 12
+      }
+    }
+  }
+}
+```
+
+### Block Grid Area
+
+```graphql
+type BlockGridArea {
+    """
+    Name of the area.
+    """
+    alias: String!
+
+    """
+    Items in the area.
+    """
+    items: [BlockGridItem]!
+
+    """
+    Number of rows spanned by the area.
+    """
+    rowSpan: Int!
+
+    """
+    Number of columns spanned by the area.
+    """
+    columnSpan: Int!
+}
+```
+
+**Query**
+
+```graphql
+{
+  contentPage {
+    blocks {
+      items {
+        areas: {
+          alias
+          columnSpan
+          items {
+            title
+          }
+        }
+      }
+    }
+  }
+}
+```
+
+**Output**
+
+```json
+{
+  "data": {
+    "contentPage": {
+      "blocks": {
+        "items": [{
+          "areas": [{
+            "alias": "mainArea",
+            "columnSpan": 12,
+            "items": [{
+              "title": "Essential Heartcore Tips: Volume 4"
+            }]
+          }]
+        }]
+      }
+    }
+  }
+}
+```
+
+### Block Grid Item
+
+```graphql
+type BlockGridItem {
+    """
+    The content.
+    """
+    content: Element!
+
+    """
+    The settings.
+    """
+    settings: Element
+
+    """
+    Number of rows spanned by the item.
+    """
+    rowSpan: Int!
+
+    """
+    Number of columns spanned by the item.
+    """
+    columSpan: Int!
+
+    """
+    Number of columns in child areas.
+    """
+    areaGridColumns: Int!
+
+    """
+    Number of columns in child areas.
+    """
+    areas: [BlockGridArea]
+}
+```
+
+**Query**
+
+```graphql
+{
+  contentPage {
+    blocks {
+      items: {
+        content: {
+          title
+        }
+        settings: {
+          openLinkInNewTab
+        }
+        rowSpan
+        columnSpan
+      }
+    }
+  }
+}
+```
+
+**Output**
+
+```json
+{
+  "data": {
+    "contentPage": {
+      "blocks": {
+        "items": [{
+          "content": {
+            "title": "Essential Heartcore Tips: Volume 7"
+          },
+          "settings": {
+            "openLinkInNewTab": false
+          },
+          "rowSpan": 1,
+          "columnSpan": 4
+        }]
+      }
+    }
+  }
+}
+```
+
 ### Block List Item
 
 ```graphql