BlockBreadcrumbs — an add-on for improving the EPiServer UI when editing blocks
This blog post introduces a new EPiServer add-on that eases the cognitively difficult task of editing nested blocks.
Background
Since EPiServer CMS 7.0 editors have been able to use blocks to compose pages that are highly modular and flexible. Developers can utilize the block and ContentArea concept to create a set of block types available to use directly on pages or as part of other blocks. This enables the editors to compose pages with different looks and layouts without relying on the developer to make a new page type for each variation.
Examples of blocks we have made in the last couple of projects are:
- A TextBlock that only have an XhtmlString property.
- A SectionBlock containing a ContentArea property and a BackgroundColor property. The SectionBlock defines a section on a page and gives editors the possibility to change the background color of that section.
- A RowBlock containing a ContentArea property. The RowBlock is responsible of positioning its child blocks with equal width in a row.
When these blocks are used on a ContentPage — consisting of nothing more than a ContentArea property — the editor has complete freedom over the composition of that page. A common scenario would be to create a ContentPage with three SectionBlocks, each containing some RowBlocks with two or three Textblocks in its columns. Blocks in blocks in blocks on a page.
As a side note, I am not recommending this as the only option for editing pages. In my experience, it serves well as a flexible option alongside more rigid page types with well-defined layouts.
The problem
Editorial freedom places a lot of responsibility on the person editing the pages. Without an intuitive editing experience, the benefits of having a flexible layout are soon lost due to its complexity.
The first step towards improving the block editing UI is to enable its on-page edit mode. This gives us a live preview of the block while editing it. Enabling the on-page edit of blocks requires a PreviewController (explained by Joel Abrahamsson here and Jon D. Jones here).
The on-page edit mode of blocks is a great improvement and simply a must-have in my opinion. However, it is still hard to get an overview of what we are actually editing. When editing a block that is included in a ContentArea it would be great if we could see a thumbnail of this usage at the same time as editing the block.
There’s an add-on for that!
I have developed an add-on called BlockBreadcrumbs that addresses this issue. The add-on renders a path of thumbnails showing the current block’s usage tree in the on-page edit view of the block. The rightmost thumbnail highlights the current block, and that block is highlighted in the thumbnail to its left and so on.
Each thumbnail also serves as a navigation link to the edit view of that piece of content. This has proven to be a quick and useful way of navigating back up the usage tree. It also fixes the annoying problem of losing EPiServer’s “back” link in the yellow bar at the top when editing a block if you hit refresh.
BlockBreadcrumbs includes unpublished content in the usage tree. This is crucial, as a common scenario is to create a local block from the link at the bottom of a ContentArea. The relationship between the owner content and the newly created block is then in an unpublished state.
The add-on works best when all blocks in the usage tree are locally owned. If a block is shared and used more than two places, the usage chain stops at this crossroad, showing the usage count instead of a thumbnail. To see those references you can navigate to the last thumbnail before it and click the “changes made here will affect at least x items” link in the yellow bar at the top.
Use and contribute
The add-on is free to use and available on Nuget. The project is hosted on https://github.com/skjelbek/block-breadcrumbs as open source. The Github repo contains instructions on how to use the add-on in your EPiServer project.
