In today's tutorial, you will learn all about Episerver blocks. In Episerver land, we build pages using page types. Onm each page, it is likely that you will want to render some components. Some examples of components may include:

  • Call To Action
  • Carousel
  • Contact Form
  • Text Block
  • Image Block
  • Accordion
  • Banner
  • Tab
  • Promo

Within Episerver terminology, these re-usable components are called blocks. To build a block in Episerver, you need to add some code into your project. A block is rendered on a page, in a similar way as a user-control would be in web forms, or a partial would be in MVC. At a minimum, the code required to render a block will be a view, however, I recommend that you always create a controller and a view model when working with blocks. The benefit of using a block is that it eliminates a lot of duplication. Say you have a homepage and a listing page. At the top of each page you have an advertising banner. Instead of having to write the same banner code twice, you can create one banner block.

Content editors can add blocks onto pages within the Episerver editor. Blocks can be added to a ContentArea property. A ContentArea is a special kind of Episerver property. You can learn more about them later and also here. To create a banner block, in code, you would define a class called BannerBlock and decorate the class with an Episerver attribute. To add content editable properties onto the block, you define some normal .NET properties (getter/setter) onto the class. Episerver ships with a number of other special properties aside from the ContentArea. The field type within the CMS is based on the type of property you create in the block class. You simply define the property type and Episerver does the rest. You can add properties like images, links, text editor, dropdown lists, etc...

Content Areas

To allow content editors to add blocks to a page, a property of type content needs to be defined within the pages the corresponding page-type. This can be done using the following code snippet:

As you can see the code is pretty simple 😊

Shared Block

A content editor can create a block and then re-use it on different pages if they want. These are called shared blocks. In the editor, any shared block can be accessed from the 'Block Library'. It is also possible to hardcode any block-type definition you create as a property onto a page (or another block). Doing this will create a block known as a local block. The code is the same, the difference is that hardcoded blocks can not be reused in the editor and these blocks will not show up in the 'block library'. I tend to create local blocks for an image and a link, to ensure consistent CMS naming conventions are used throughout my projects. An example of how to create a local block is shown below:

Hiding A Block in The Editor

You may not want a content editor to create, or interact with all the blocks you create in the editor. Maybe you want to create an admin settings block. Hiding a block in the editor is possible by using the AvailableInEditMode attribute. Decorate this attribute on your block, and set it to false, as seen below:

The Episerver attributes that you can decorate onto a block type are the same for a page type. You can learn more about these in my introduction to page-types guide. If you are learning about Episerver CMS, I recommend reading both these guides🔥🔥🔥

Constructor or Constructorless Blocks

After you have defined your block type, you will need to decide if you want to display your block as a partial, or, if you want to create a corresponding controller for the block. As mentioned earlier I always recommend the latter. I recommend that you always create a view model, controller and view for your blocks. To learn how to do this, you can see this post

You should now be an Episerver block 🐱‍👤, or, you should have some links to help you learn a little more. How do you feel about blocks, good or a bad thing? Leave your opinions in the comment section below. Happy Coding 🤘