# Block List Editor

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`

{% content-ref url="/pages/fwQVVTsKRRJLYm7r1xll" %}
[BlockListEditor](/zaubercms/extending-zaubercms/blocklisteditor.md)
{% endcontent-ref %}

<figure><img src="/files/o9BzuwD6WpK6SicAFVRs" alt=""><figcaption></figcaption></figure>

#### Example of getting value on page

<pre class="language-csharp"><code class="lang-csharp"><strong>var blocks = Content!.GetValue&#x3C;List&#x3C;Content>>("Content");
</strong></code></pre>

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

```csharp
@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.

```csharp
@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](broken://pages/NpZ6A9OgDAgRMm2Vw85s).

### 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`.

```csharp
@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.

<figure><img src="/files/s7tEd9nCC2mtQGtqr6br" alt=""><figcaption><p>Block List Editor Settings</p></figcaption></figure>

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.

<figure><img src="/files/3ioKXzvYQxqgpbBuirm3" alt=""><figcaption><p>Example showing the Block List Editor and the front end content and styling</p></figcaption></figure>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://aptitude.gitbook.io/zaubercms/creating-a-website/current-content-properties/block-list-editor.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.