Block List Editor

Value Type Saved: List<Content>

The Block List Editor allows you to pick Element Types and update the content directly in the editor, save and sort the content. It then displays the content item in a list of blocks.

The blocks are customisable and you can display custom content in them using the IContentBlockPreview. In addition, for rendering on the front end, you can create a view to match the block using the IContentBlock

BlockListEditor

Example of getting value on page

var blocks = Content!.GetValue<List<Content>>("Content");

Then you can use the built in component to render the blocks

@foreach (var block in blocks)
{
    <div class="py-3">
        <RenderBlock Content="@(block)" TView="IContentBlockView"/>
    </div>
}

Content Blocks

To display data in the front end, you create a Blazor component and implement IContentBlock. Example below is a QuoteBlock.razor from my blog.

@implements ZauberCMS.Core.Content.Interfaces.IContentBlockView
<div class="prose md:prose-lg">
    @if (Content != null)
    {
        <figure class="text-end">
            <blockquote class="blockquote">
                <p>@(Content.GetValue<string>("Quote"))</p>
            </blockquote>
            <figcaption class="blockquote-footer">
                @(Content.GetValue<string>("Cite"))
            </figcaption>
        </figure>
    }
</div>

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

Your ContentTypeAlias is the Element Type alias and you just use the Content property like you do in the normal ContentViews.

Content Block Previews

To customise what you see in the admin section, you can override the default view and render a component. A lot of the time you will just want to render the Content Block, and because this is Blazor you can easily reuse blocks. The example below, is for the quote block again, where I just render the original QuoteBlock.razor in my QuoteBlockPreview.razor.

@implements ZauberCMS.Core.Content.Interfaces.IContentBlockPreview

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

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

Custom Styling

You can style the block list editor in the admin to match your website by linking your front end style sheet in the Block List Editor Settings. Just click on the settings icon on your Block List Editor and add the CSS file path. Must be relative to your website root, like you would add in your code.

Block List Editor Settings

Once this is done, ZauberCMS uses the shadow DOM to append the style sheet so your custom styles, only affect the blocks and not the rest of the admin. You can make the editing experience pretty nice! Below is my blog, I have set up the components and the styles.

Example showing the Block List Editor and the front end content and styling