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
Configured Commerce - Introduction to Long-Term Support (LTS) Releases

First off, for those who have not had a chance to meet me yet, my name is John McCarroll, and I am the Technical Product Manager for the Optimizely...

John McCarroll | Sep 29, 2023

Auto-translate with OpenAI in Optimizely CMS

You can now auto-translate content using your favorite online AI service, inside the old trustworthy Episerver.Labs.LanguageManager!

Tomas Hensrud Gulla | Sep 29, 2023 | Syndicated blog

Vulnerability in CMS 12 shell module configuration

Introduction A potential security vulnerability has been identified in Optimizely CMS 12, triggered by a certain shell module configuration. To be...

Magnus Rahl | Sep 28, 2023

AI-Assistant: The 'Change Tone' Shortcut

The AI-Assistant for Optimizely is constantly evolving, adjusting, and transforming to meet your digital needs, providing a cutting-edge advantage...

Luc Gosso (MVP) | Sep 27, 2023 | Syndicated blog