Content Block Preview

If you want to customise what the user will see in the BlockListEditor you can use

IContentBlockPreview

This allows you to display the picked content however you wish in the admin, instead of the default UI. All you have to do is create a Blazor component and implement IContentBlockPreview like so.

@implements ZauberCMS.Core.Content.Interfaces.IContentBlockPreview

@if (Content != null)
{
    <div class="fs-6">
        @((MarkupString)(Content.GetValue<string>("Content") ?? string.Empty))
    </div>
}

@code {
    [Parameter] public Content? Content { get; set; }
    [Parameter] public ContentType? ContentType { get; set; }
    public string ContentTypeAlias => "RTEBlock";
}

The above is an example of pulling data from the Rich Text Editor and displaying it to the user. The important part is making sure I set the ElementTypeAlias to match the content type being used on this content.

As this is Blazor, you could reuse the Content Block that you would use in the front end, for example, this Content Block Preview is exactly the same code as the Content Block I should on the front end of the site, to save duplication, I could simply do the following (Where RTEBlock is my IContentBlock component)

@implements ZauberCMS.Core.Content.Interfaces.IContentBlockPreview

@if (Content != null)
{
    <RTEBlock Content="@Content" />
}

@code {
    [Parameter] public Content? Content { get; set; }
    [Parameter] public ContentType? ContentType { get; set; }
    public string ContentTypeAlias => "RTEBlock";
}

To get the data is the same as querying data in the front end:

Querying Data