Mar 14, 2014
(2 votes)

Use connectorBlock to choose how a block is rendered.

Blocks are nice to reuse content, EPiServer developers already know all the benefits of using blocks. A while back a customer asked me if it was possible to “remove the white space around a set of blocks in a content area so the whole set looks like one block, but other blocks, let’s say the first and second block should look as one block and then block 3, 4 and 5 should look as one block”. like so :blocks Now I first thought let’s make a boolean property on the base type “IsConnected”, this worked fine but when the same block was used somewhere else the block was always connected. This was unacceptable according to the customer.

Then I thought of an empty blocktype called Connectorblock, it does not render anything but when in the content area it “stitches” the blocks together, allowing for different stitching on different pages.

I wrote a helper to retrieve the correct css Class


public static class GroupingClassHelper
       public static string GetGroupingCssClass(this HtmlHelper helper, IList<ContentAreaItem> items, int index)
           const string firstCss = "group first";
           const string attachedCss = "group attached";
           const string lastCss = "group last";

           bool NextItemIsConnector = false;
           bool PrevItemIsConnector = false;

           if (index < items.Count - 1)  // don't go out of bounds
               NextItemIsConnector = ((items[index + 1].GetContent() as ConnectorBlock) != null);

           // if this is the first block then this one gets class first or (null if the next block is not a connector)
           if (index == 0) return NextItemIsConnector ? firstCss : null;
           var prevContent = items[index - 1].GetContent() as ConnectorBlock;
           PrevItemIsConnector = (prevContent != null);

           // if previous block is a connector is then this block gets attached class or last class if the next one is not a connector
           // else (previous block is not a connector and this block is not the first block (index > 0)) then this block gets class first (null when next one is not a connector)
           return PrevItemIsConnector ? (NextItemIsConnector ? attachedCss : lastCss) : (NextItemIsConnector ? firstCss : null);

Now all you need to do is add connector blocks between the blocks that need to be stitched together and alter your CSS to render the margins accordingly.

I hope somebody has any use for this idea.

Mar 14, 2014


Mar 14, 2014 11:01 AM

Nice, I've had similar ideas.

I think it's easier for the editor to understand if there is less space by default and a block like this adds space instead.
But if you had spacing by default and want to reduce, this is a more seamless implementation.

Mar 14, 2014 11:08 AM

You are right, separate blocks is the default, only a few block need to be stitched together.

Please login to comment.
Latest blogs
Plug-in manager is back in CMS 12

Plug-in manager is back in the UI, what is it and how can i use it?

Luc Gosso (MVP) | Oct 6, 2022 | Syndicated blog

Display Child Pages in Content Delivery API Response

The below example will implement an instance of IContentConverterProvider to customise the serialisation of PageData and output child pages in the...

Minesh Shah (Netcel) | Oct 4, 2022

Bring the Report Center back in Optimizely CMS 12

The Report Center has been a part of Optimizely CMS since its first debut in version 5R2 in 2008, but in CMS 12, it's removed! Don't despair! Make...

Tomas Hensrud Gulla | Oct 4, 2022 | Syndicated blog

Customizing Property Lists in Optimizely CMS

Generic property lists is a cool editorial feature that has gained a lot of popularity - in spite of still being unsupported (officially). But if y...

Allan Thraen | Oct 2, 2022 | Syndicated blog