I've been trying to use the Block List property editor in a custom macro (Umbraco 9.4.3) but have failed to get it up and running. My goal is to give editors the opportunity to insert a specific functionality into any document type containing a grid for which the Block List would be the perfect choice, since it offers that much flexibility compared to the custom solution that I have now. The property editor is much more expandable to other element type blocks and offers a great UI for editors. I have seen the post "Block list editor in the grid" and the suggestion to use "Doc Type Grid Editor", but the package is retired.

The element type which I used for testing purposes:

In the html of the macro I have the following:

<div ng-controller="MacroParameterTypes.BlockListTestWidgetController">
<ng-form val-form-manager>
    <umb-property-editor model="property" value="value"></umb-property-editor>
</ng-form>

The code of the controller:

angular.module('umbraco').controller('MacroParameterTypes.BlockListTestWidgetController', ['$scope', function ($scope) {

    $scope.value = {};

    $scope.property = {
        alias: "blockList",
        label: "Block List",
        description: "This is my property.",
        dataTypeKey: "6a9575bb-8916-445d-805d-7ec3a8129ed2",
        config: {
            blocks: [
                {
                    contentElementTypeKey: "8ff9c094-c57c-4a0b-92ec-446ca6cdafc6",
                    label: "Desk",
                    editorSize: "medium",
                    forceHideContentEditorInOverlay: false
                }
            ],
            validationLimit: {
                min: 0,
                max: 100
            },
            useLiveEditing: true,
            useInlineEditingAsDefault: true
        },
        editor: "Umbraco.BlockList",
        hideLabel: false,
        onValueChanged: function (newVal, oldVal) {
            console.log("Value changed in block list?", newVal, oldVal);
        },
        readonly: false,
        value: $scope.value,
        view: "blocklist"
    };
}]);

I didn't find any notable documentation for the configuration of the property editor. Before creating the macro I have added a block list property to a document type with the desk element type added to the blocks array. This way I tried getting the right config by calling angular.element($0).scope() on various parts of the rendered html in the browser console in the backoffice. I don't think that's the right way of figuring out the configuration but I couldn't find anything relevant on the github page of the block list controller definition (There might be some key information that I'm missing).

The button Add LinkElement is rendered, but the error vm.umbVariantContent is null is thrown upon clicking it. The stacktrace is:

ensureCultureData umbraco.directives.min.js:1
updateBlockObject umbraco.directives.min.js:1
getBlockObject umbraco.directives.min.js:1
addNewBlock umbraco.directives.min.js:1
requestShowCreate umbraco.directives.min.js:1

I have also tried wrapping <umb-property-editor> in an <umb-property> element which lead to a different error Could not find umbVariantContent in the $scope chain. The html in that case:

<div ng-controller="MacroParameterTypes.BlockListTestWidgetController">
    <ng-form val-form-manager>
        <umb-property property="property">
            <umb-property-editor model="property"></umb-property-editor>
        </umb-property>
    </ng-form>
</div>

The macro displayed to the editor:

What am I missing and is this even the right way to achieve what I try to do?