Menu 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.

RawHtmlBlock.cs

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
    {
    }
}

custom-blocks.js

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>'
});

custom-blocks.css

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

@Html.Raw(Model.Body)

##### 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)
{
    ...
    App.Blocks.Register<MyWeb.Blocks.RawHtmlBlock>();
    App.Modules.Manager().Scripts.Add("~/custom-blocks.js");
    App.Modules.Manager().Styles.Add("~/custom-blocks.css");
    ...
}