BlockBreadcrumbs — an add-on for improving the EPiServer UI when editing 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.

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

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.

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.

BlockBreadcrumbs at the top of the on-page edit of a block.
In this scenario, the “Book a demo” block is only used in “Bottom section”, and that block is used in to places on the site. The user will have to navigate to “Bottom section” and press the “2 items” link to see all usages.

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.

--

--

Full stack developer working at Blank Oslo AS

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store