Improve publishing with inline edit blocks
Describes inline blocks introduced to improve the publishing process
CMS UI 12.22.3 and newer
Inline blocks are turned off by default, but from version 12.22.3, you can opt-in so that whenever you create a new block from a ContentArea
property, you create an inline block stored inside the parent content item.
Inline blocks are no longer IContent
instances. Instead, they are just property bags stored inside ContentAreaItem
.
Inline blocks do not have a Name
or ContentLink
or other base properties.
For example, if there is a block type defined in the following way:
[ContentType(Guid = "67F617A4-2175-4360-975E-75EDF2B924A7")]
public class TeaserBlock: BlockData {
public virtual string Foo {
get;
set;
}
}
If you add an instance of TeaserBlock
to the Assets panel as a shared block then it has the properties implemented from IContent
such as Name
, ID
, and so on.
However, if you decide to add TeaserBlock
through Create a new block
link in Content Area, then it prompts the editor to enter the value for the Foo
string property and serializes that object and stores it inside the ContentAreaItem.InlineBlock
property.
It does not have ContentLink
of its own. It does not have a publishing or approval lifecycle of its own but will be managed only through its parent content.
You cannot differentiate inline blocks; they are just shown as block types.
Caution
`
InlineBlockEditSettings
is being obsoleted and will be removed in CMS 13.
ILocalAssetNameGenerator
does not influence Inline Blocks because, as stated above, inline blocks do not have Name
property on their own.
Inline blocks are convenient in on-page editing. However, it can be difficult to distinguish them in All Properties view because those blocks are no longer IContent
and thus have no Name
property on their own.
Inline block labels are their type names, which is fine if there are just a few, but if the list of blocks is long, it may become problematic to find the block you want to edit (because, in contrast to the on-page editing, you do not see the view of the block). You can instruct ContentArea
to use a specific property from block type as a label by using the InlineBlockNameProperties
options which can be set in appsettings.json
:
{
"EPiServer": {
"CmsUI": {
"InlineBlockNameProperties": {
"Contact": "Heading",
"Teaser": "Heading"
}
}
}
}
Or in Startup.cs
services.Configure<InlineBlockNamePropertiesOptions>(options => {
options.Add("Contact", "Heading");
options.Add("Teaser", "Heading");
});
It is a Dictionary\<string, string>
of BlockTypeName / PropertyName
.
After adding those options the ContentArea
looks like this:
This is because you instructed the ContentArea
editor to use Heading
property as label for Contact & Teaser block types.
Opt-in to inline blocks
In version 12.22.3, you can turn on the ability to create inline blocks from ContentArea
by using UIOptions
.
services.Configure<UIOptions>(uiOptions => {
uiOptions.InlineBlocksInContentAreaEnabled = true;
});
You also can opt-in from appsettings.json
.
{
"EPiServer": {
"CmsUI": {
"UI": {
"InlineBlocksInContentAreaEnabled": true
}
}
}
}
After turning that flag on, the link to Create a new block creates blocks inline to the parent ContentArea
property, potentially creating a version of the current content item.
CMS UI 12.20.0 and earlier
The inline edit dialog box is designed to be simple while letting editors edit a block's most common properties.
Optimizely introduced the InlineBlockEditSettings
configuration attribute so that you can apply it to your block content type and hide or show the Name
and Categories
properties. 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 the Name property is displayed. |
ShowCategoryProperty | false | When true, then the Categories property is displayed. |
HiddenGroups | Advanced | Comma-separated list of tabs that should be hidden. |
Note
Advanced group is the Settings tab in the user interface, which is hidden by default in the inline edit dialog box.
Change settings for a specific block content type
To turn on the Name
property for a specific block content type:
[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;
}
}
Below is to display the 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;
}
}
To hide more than one group:
[SiteContentType(GUID = "9E7F6DF5-A963-40C4-8683-211C4FA48AE1")]
[SiteImageUrl]
[InlineBlockEditSettings(HiddenGroups = "Advanced, Contact")]
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.Contact)]
public virtual string Text4 {
get;
set;
}
}
Change settings for multiple block content types
If you want to show Name
for several block content types, you can configure the setting in their base class, like this:
[InlineBlockEditSettings(ShowNameProperty = true)]
public abstract class SiteBlockData: EPiServer.Core.BlockData {}
[SiteContentType(GUID = "9E7F6DF5-A963-40C4-8683-211C4FA48AE1")]
[SiteImageUrl]
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.Contact)]
public virtual string Text4 {
get;
set;
}
}
Note
If you want to change a setting in a child block type, while still wanting to have some other settings from the base class, you have to copy those settings to the child block type class because the settings in the child block type override the settings in the base class.
Override auto-generated name for inline-creating blocks
Because the Name
property is hidden by default, blocks created from an inline edit dialog (inline create) get an automatically generated name. The name is generated using ILocalAssetNameGenerator
, and the default format is PageName BlockType AutoIncrementId
.
To override the default auto-generated name format, you just need to implement ILocalAssetNameGenerator
.
Updated 4 months ago