Grzegorz Wiecheć
Jul 8, 2019
  12130
(24 votes)

Episerver Labs - Block Enhancements

The project contains a few features that, in general, make the life of Episerver editors easier. The vision is to make it possible to edit and publish blocks directly on the page without a need for switching context. The page is selected at all times, and all actions around local blocks is performed inline.

The list of current features is:

  • Publish content with local blocks
  • Inline block editing
  • Show block status on content area
  • Inline publishing
  • Content Draft View

All features work together, but you can decide which ones are enabled by Configuring enabled features.

Publish content with local blocks

This is an extra command available in the global menu. It automatically checks the "For this page" folder of the current page and lists all draft versions of blocks that could be published with the page.

Publish content with local blocks

After running the command, a dialog box with a list of all draft versions of local blocks is displayed. The editor can decide which blocks will be published using check boxes next to the local block name.

Publish content with local blocks

The command will publish the page and all selected blocks.

Known issue
If a block contains a "For this block" folder, the content from this block will not be published.


Using this feature, the editor do not have to manually click through all local blocks just to check if all of them have already been published.

Publish content with local blocks

Inline block editing

This feature allows editors to edit block content directly on the page. There is a new "Inline block edit" command added to content area items menu.

Inline block editing command

The command opens a dialog box with an editable block form. The editor can edit blocks the same way as when switching to blocks editing context.

Inline block editing default form

As you can see, the layout is a bit different than in the Forms view. Tabs are replaced with sections which makes more sense for blocks that usually have only a few properties.

The changes can also be published directly from the dialog box.

Additionally, the command is available from the assets pane.

Inline block editing from assets

In many scenarios, blocks are not using Name and Categories properties during rendering. This is the reason why we introduced the InlineBlockEditSettings configuration attribute. You can apply it to your block content type and hide those properties. Additionally, you can also use this attribute to hide specific groups to make the editing form cleaner.

The attribute contains three properties:

Property Default value Description
ShowNameProperty false When true, then Name property will be displayed
ShowCategoryProperty false When true, then Categories property will be displayed
HiddenGroups Advanced Comma-separated list of tabs that should be hidden

For example, the only property that is editable for the Editorial block type in the Alloy templates is "Main body". There is no need to display other built-in properties or group properties into sections:

Inline block editing with publish and tinymce

Another example is the Teaser block which has just a few simple properties:

Inline block editing enhanced form

To turn on the Name property:

[SiteContentType(GUID = "67F617A4-2175-4360-975E-75EDF2B924A7",
    GroupName = SystemTabNames.Content)]
[SiteImageUrl]
[InlineBlockEditSettings(ShowNameProperty = true)]
public class EditorialBlock : SiteBlockData
{
    [Display(GroupName = SystemTabNames.Content)]
    [CultureSpecific]
    public virtual XhtmlString MainBody { get; set; }
}

And below is an example of how to display Name and Categories properties and Settings group.

[SiteContentType(GUID = "9E7F6DF5-A963-40C4-8683-211C4FA48AE1")]
[SiteImageUrl]
[InlineBlockEditSettings(ShowNameProperty = true, ShowCategoryProperty = true, HiddenGroups = "")]
public class AdvancedBlock : SiteBlockData
{
    [Display(Order = 1, GroupName = SystemTabNames.Content)]
    public virtual string Text1 { get; set; }

    [Display(Order = 2, GroupName = SystemTabNames.Content)]
    public virtual string Text2 { get; set; }

    [Display(Order = 1, GroupName = Global.GroupNames.Products)]
    public virtual string Text3 { get; set; }

    [Display(Order = 2, GroupName = Global.GroupNames.Products)]
    public virtual string Text4 { get; set; }
}

Inline blocks edit

Showing block status on content area

Another enhancement is the way to get a few more details about particular content area items. Each content area item will display status icons similar to the page tree. You will now see if a block is a draft or if a language branch is missing.

Additionally to help distinguish local blocks from shared blocks, there is a new "Local block" icon.

Publish content with local blocks

Thanks to those flags, the editor can easily see if the page is ready to be published or not.

Inline publish

This feature is just a convenient way to publish Content Area Items directly from the list, without the need of switching context.

There is a new command available in the content area menu.

Publish content with local blocks

And also from the assets pane.

Publish content with local blocks

Publish content with local blocks

Content Draft View

Allow editors to preview draft versions of content area blocks.

There is now a new button in the top bar.

Toggle draft view

By default in edit view, the editor sees the published blocks versions when a page is rendered.

Published content view

The editor can use the new "Content Draft View" button to get an overview of how the page will look after all blocks have been published.

Unpublished content view

Content draft view

Configuring enabled features

To turn off one or more feature, use the BlockEnhancementsOptions options class and then, for example, in the initialization module, set false on the feature that should not be available. All features are enabled by default.

[InitializableModule]
public class CustomBlockEnhancementsModule : IInitializableHttpModule
{
    public void Initialize(InitializationEngine context)
    {
        var options = ServiceLocator.Current.GetInstance<BlockEnhancementsOptions>();
        options.InlineEditing = false;
        options.PublishWithLocalContentItems = true;
        options.ContentDraftView = true;
        options.InlinePublish = false;
        options.StatusIndicator = false;
    }

    public void Uninitialize(InitializationEngine context)  {  }

    public void InitializeHttpEvents(HttpApplication application) {  }
}

This documentation can also be found on our github page.

The NuGet is available on the EPiServer NuGet feed at: https://nuget.episerver.com/package/?id=EPiServer.Labs.BlockEnhancements&v=0.1.0

Please note

Episerver Labs projects are meant to provide the developer community with pre-release features with the purpose of showcasing ongoing work and getting feedback in early stages of development.

You should be aware that Labs are trials and not supported Episerver releases. While we hope you use them, there are a few things you should expect:

  • Functionality may change
  • Labs projects have not been through the same quality assurance process as the versioned products and, in some cases, may show unexpected behaviour.
  • The software may not work on all environments
  • There is no promise of support; however, we will gratefully receive all feedback

The software is provided “As is” without warranty of any kind or promise of support. In no event shall Episerver be liable for any claim, damages or liability in relation to the software. By using this software, you are agreeing to our developer program terms https://www.episerver.com/legal/program-terms/ .

Jul 08, 2019

Comments

Johan Petersson
Johan Petersson Jul 9, 2019 01:17 PM

You're the real MVP - as always!

Johan Petersson
Johan Petersson Jul 9, 2019 01:18 PM

Btw, it's not possible to delete comments here. But you deserve two of them anyway:)

Praful Jangid
Praful Jangid Jul 9, 2019 02:11 PM

These are really cool enhancements. Great to see those new features.

Erik Henningson
Erik Henningson Jul 9, 2019 05:27 PM

Great to see some experimenting with improving the UX for block editing!

Antti Alasvuo
Antti Alasvuo Jul 12, 2019 07:50 AM

Nice work Grzegorz! Next need to find some time to play around with this feature.

Daniel Ovaska
Daniel Ovaska Jul 13, 2019 03:50 PM

Nice work Dojo master!

KennyG
KennyG Nov 20, 2019 04:01 PM

Can't wait for this to make it to the core product.

Arild Henrichsen
Arild Henrichsen Nov 25, 2019 10:19 AM

Is there any way to install this module but configure it so only certain (super) users have access to its features? (for testing it out)

Joel Ekman
Joel Ekman Jan 30, 2020 08:44 AM

Hello! Love the functionality!
Are there any plans on translating it to other CMS languages? Or add so that it shows the labels in English if the CMS is set to another language than English? Currently it crashes the edit mode in the CMS. The issue is related to a script error in Dojo, tested in Swedish, Dutch and German  running version 0.6.3.

Cannot read property 'addtotranslationproject' of undefined at packaged.js: 2
Cannot read property 'label' of undefined at command.js :38

We have a multinational site and some of the editors do not use English as their CMS language and we would love to add these features. If all labels for the new features would be in English that would also work great.

Keep up the good work!

nitin anand
nitin anand May 2, 2020 08:25 AM

cool, Next gen. features. definitely going to recommend to my clients those waste a lot of time switching from pages - block - pages. Is it still a lab project and thus has no Episerver support? 

Petri Isola
Petri Isola Sep 10, 2020 07:42 AM

Feature request: Add a yellow bar indicating where a block is being used in Inline Edit (like in traditional Edit).

Please login to comment.
Latest blogs
CMS + CMP + Graph integration

We have just released a new package https://nuget.optimizely.com/package/?id=EPiServer.Cms.WelcomeIntegration.Graph which changes the way CMS fetch...

Bartosz Sekula | Nov 5, 2024

Block type selection doesn't work

Imagine you're trying to create a new block in a specific content area. You click the "Create" link, expecting to see a CMS modal with a list of...

Damian Smutek | Nov 4, 2024 | Syndicated blog

.NET 8 FAQ

I have previously written about .NET compatibility in general and .NET 8 in particular, see blog posts here , here and here . With the end of suppo...

Magnus Rahl | Nov 4, 2024

Dynamic packages in Commerce Connect

In Optimizely Commerce Connect, you can group different items using packages and bundles. Package: A package has one or more versions of a product...

K Khan | Nov 1, 2024

Efficient Catalog Metadata Management and Product Updates Using DTOs in Optimizely Commerce

This post explores ways to manage and update catalog metadata in Optimizely Commerce by utilizing Data Transfer Objects (DTOs). DTOs provide a...

Sujit Senapati | Oct 31, 2024

Effortlessly Resize Images with Cloudflare's On-the-Fly Solution

Resizing images in C# has traditionally been a complex and time-consuming task, often requiring intricate code and handling various image processin...

Manoj Kumawat | Oct 31, 2024 | Syndicated blog