In this tutorial, you will learn how to create a block within Optimizely CMS. Formally known as Episerver CMS, the big change in this version is that it is built using .NET Core/MVC 5. As a result, the process of creating a block has changed slightly compared to previous versions. In Optimizely CMS, a block is a re-usable component that a content editor can drop onto a page. Within this tutorial, you will learn how to create a block in code so you can become an Optimizely guru. If this sounds good to you, then read on 🔥🔥🔥

Block Type Definitions

Optimizely uses a code-first approach to model creation within the CMS. Blocks are created in code. The good news for old Episerver pros is that the code to create a block has not changed from previous versions. If you know how to build a block In Episerver CMS, you will be fine in CMS 12. An example of the code required to build a block is shown below:

If you want to learn more about the different attributes and properties you can use in a block definition, I recommend reading this.

View Components

In .NET Core, partial views are no longer a thing. In the new world, the view component is the king of the component castle👑. Building a block within the CMS is similar to building a page in MVC. Blocks are defined in code. For each block, you will need to create a controller and a view. In CMS 12 a view component controller is built by inheriting from AsyncBlockComponment<T>. To associate a new block with a AsyncPartialContentComponent you use the block type definition as T. This code is a big change compared to previous versions. In previous, you would have created a controller and inherited it from BlockController. BlockController is still available within Optimizely 12, however, it has been marked with the [Obsolete] attribute and I do not recommend you create new blocks using it. I think the main reason why BlockController has been left in CMS 12 is to make project migration easier, however, I avoid using it as it will be gone soon 👋👋👋

.NET Core ships with two view components flavours, a synchronise version and an async version. Using async will speed up the view as there is no render-blocking. This will allow the engine to process multiple things at once. The system is optimised to work this way so your website will be quicker if you favour async. The code to create a block this way is shown below:

As you can see the code is pretty straightforward. Inherit from AsyncBlockComponent<T> and use the block type definition as T. To add some custom logic to the controller, override the InvokeComponentAsync(T currentContent) method passing in the block type definition as T. In InvokeComponentAsync add your custom business logic and return a view model. In this example the view model looks like this:

You will also be required to create a view file. Views need to live in this location:

View ➡ Shared ➡ Components ➡ BLOCK NAME ➡ Default.cshtml

In this example, BLOCK NAME would be replaced by a folder called BannerBlock. Finally, you add the HTML within the view:

Here you can use the Optimizely PropertyFor() HTML helper to render the CMS properties correctly in code. You need to use the PropertyFor() HTML helper in order for on-page editing to work. As in the example above you can also render properties directly, the choice is yours 💥

That is all the code you need to know about in order to render blocks in Optimizely CMS. Let me know what you think about the new changes below. Happy Coding 🤘