Contribute to Docs Contribute to Docs

Add Custom Block

This tutorial explains how to add a custom block to add raw HTML to a page.

Raw HTML Block

This is the class for the block which inherits from the standard TextBlock as it just needs a single string value.

using Piranha.Extend;
using Piranha.Extend.Blocks;

namespace MyWeb.Blocks
    [BlockType(Name = "Html", Category = "Content", Icon = "fab fa-html5", Component = "rawhtml-block")]
    public class RawHtmlBlock : TextBlock

This is the javascript-file containing your custom Vue component, as specified in the BlockTypeAttribute. This file should be located in your wwwroot directory.

Vue.component('rawhtml-block', {
    props: ['uid', 'model'],
    template: '<div class="block-body"><textarea :id="uid" rows="8" v-model="model.body.value"></textarea></div>'

Here are some basic styles to make it look nicer. Adapt to your needs. This file should be located in your wwwroot directory.

.rawhtml-block textarea {
    background: #043143;
    color: #9bddff;
    width: 100%;
    font-size: 0.875rem;
    font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    border: medium none;
    padding: 0.75rem 1rem;
    border-radius: 0.25rem;
Create RawHtmlBlock.cshtml

Create an empty file called RawHtmlBlock.cshtml and add this file to Views\Cms\DisplayTemplates. Then add the following code to the file:

@model MyWeb.Blocks.RawHtmlBlock


##### StartUp.cs

Finally you need to add the following three lines in Configure in your Startup.cs. The first line registers your block, the second and third lines registers your js/css resources so they are included in the manager interface. The lines should be placed below App.Init().

public void Configure(IApplicationBuilder app, IWebHostEnvironment env, IApi api)