[SOLVED] Adding block grid content programatically in Umbraco 13

I'm attempting to create some Block Grid content for a node with the property of pageBody.

I've got this working by using the Content Service and it's working nicely for the most part.

I have a structure that looks like this:

Row
- Column
  - Editor
Column
- Editor

The editors in this case are a custom doc type used to build a carousel.

To create the structure and content I'm creating a JSON object which follows the Block Grid content structure and it's all working nicely until it comes to creating the block list items which represent each slide.

This is the JSON that I'm using to create the block grid:

{
  "layout": {
    "Umbraco.BlockGrid": [
      {
        "contentUdi": "umb://element/9b607641d0794014bd4624633bdf0bc1",
        "settingsUdi": "umb://element/94e04102756f469c820a596d6ec32ccd",
        "areas": [
          {
            "key": "6c8edc61-b52f-375b-b805-91746c66ce1c",
            "items": [
              {
                "contentUdi": "umb://element/34e47a1023404389bdfdc437f3e46038",
                "columnSpan": 0,
                "rowSpan": 0,
                "areas": [
                  {
                    "key": "469abcec-0c05-3e54-b0d5-6475308649d1",
                    "items": [
                      {
                        "contentUdi": "umb://element/9f80b0d085e84fcdaff056826a61c6fe",
                        "columnSpan": 6,
                        "rowSpan": 1,
                        "areas": [],
                        "settingsUdi": "umb://element/cee1cdd9cf9a4220851ca14f003f49a7"
                      }
                    ]
                  },
                  {
                    "key": "1dcb2bbb-d383-37a1-90fc-d5083d16778d",
                    "items": [
                      {
                        "contentUdi": "umb://element/94e844d9e67b482fbe5bc6a98f43fc86",
                        "columnSpan": 6,
                        "rowSpan": 1,
                        "areas": [],
                        "settingsUdi": "umb://element/ee9c940313e2457c9058d3bb62cc6284"
                      }
                    ]
                  }
                ],
                "settingsUdi": null
              }
            ]
          }
        ]
      }
    ]
  },
  "contentData": [
    {
      "contentTypeKey": "e09e94a3-3697-42c6-9a4d-eb8631e35f05",
      "udi": "umb://element/9f80b0d085e84fcdaff056826a61c6fe",
      "carouselSlides": {
        "layout": {
          "Umbraco.BlockGrid": [
            {
              "contentUdi": "umb://element/23851b764ede47cf84b536bd9fdc1c96"
            }
          ]
        },
        "contentData": [
          {
            "contentTypeKey": "0bb6d398-44cd-4699-81ee-1ee8fb2362a8",
            "udi": "umb://element/23851b764ede47cf84b536bd9fdc1c96",
            "carouselHeading": "Test",
            "carouselImage": "umb://media/515526e502d64d33bb3a3cf993d25b19"
          }
        ],
        "settingsData": []
      }
    },
    {
      "contentTypeKey": "65b260e3-2060-3376-9182-277a3566c721",
      "udi": "umb://element/77ebac535c9849f78b9d4f54fa058c61"
    },
    {
      "contentTypeKey": "e09e94a3-3697-42c6-9a4d-eb8631e35f05",
      "udi": "umb://element/94e844d9e67b482fbe5bc6a98f43fc86",
      "carouselSlides": {
        "layout": {
          "Umbraco.BlockGrid": [
            {
              "contentUdi": "umb://element/66244dfd6c7a40b0a2a634495ff0e754"
            }
          ]
        },
        "contentData": [
          {
            "contentTypeKey": "0bb6d398-44cd-4699-81ee-1ee8fb2362a8",
            "udi": "umb://element/66244dfd6c7a40b0a2a634495ff0e754",
            "carouselHeading": "Test",
            "carouselImage": "umb://media/515526e502d64d33bb3a3cf993d25b19"
          }
        ],
        "settingsData": []
      }
    }
  ],
  "settingsData": []
}

This creates the rows, the columns, and the carousel but the carouselSlides property is empty.

For comparison, an example of the slides I'm trying to create look like this:

{
  "contentTypeKey": "e09e94a3-3697-42c6-9a4d-eb8631e35f05",
  "udi": "umb://element/9f80b0d085e84fcdaff056826a61c6fe",
  "carouselSlides": {
    "layout": {
      "Umbraco.BlockGrid": [
        {
          "contentUdi": "umb://element/23851b764ede47cf84b536bd9fdc1c96"
        }
      ]
    },
    "contentData": [
      {
        "contentTypeKey": "0bb6d398-44cd-4699-81ee-1ee8fb2362a8",
        "udi": "umb://element/23851b764ede47cf84b536bd9fdc1c96",
        "carouselHeading": "Test",
        "carouselImage": "umb://media/515526e502d64d33bb3a3cf993d25b19"
      }
    ],
    "settingsData": []
  }
}

If I create the content manually and get the data back, it comes back like this:

{
  "contentTypeKey": "e09e94a3-3697-42c6-9a4d-eb8631e35f05",
  "udi": "umb://element/8d04bbe17cc84a6f8ec024a2cdf6e521",
  "displayControls": 0,
  "autoPlay": 1,
  "carouselSlides": {
    "layout": {
      "Umbraco.BlockList": [
        {
          "contentUdi": "umb://element/ccc99d993bfc4faea384eb03becb6b78"
        }
      ]
    },
    "contentData": [
      {
        "contentTypeKey": "0bb6d398-44cd-4699-81ee-1ee8fb2362a8",
        "udi": "umb://element/ccc99d993bfc4faea384eb03becb6b78",
        "carouselHeading": "test",
        "carouselImage": "umb://media/515526e502d64d33bb3a3cf993d25b19"
      }
    ],
    "settingsData": []
  }
}

This structure looks to match, but it simple won't appear on the content when I view it in the UI.

This is how I'm saving the content:

string gridString = JsonSerializer.Serialize(newGrid, new JsonSerializerOptions { Encoder = System.Text.Encodings.Web.JavaScriptEncoder.UnsafeRelaxedJsonEscaping });

node.SetValue("pageBody", gridString);

_contentService.SaveAndPublish(node);

There are no errors and everything saves but not the carousel slides.

I've spent quite a lot of time on this and am struggling to figure out what's going on, please put my out of my misery!

Thanks,

Ben