London Dev Meetup Rescheduled! Due to unavoidable reasons, the event has been moved to 21st May. Speakers remain the same—any changes will be communicated. Seats are limited—register here to secure your spot!

Cindy.Gilicze
Jul 4, 2022
  4218
(4 votes)

Headless Edit Mode – A non-scary way of working with “pure content”

Although headless Content Management Systems have been around for a number of years, many solutions focus purely on how content is retrieved, and leave content creators and editors with difficult to use, unintuitive editorial interfaces.

Content Cloud is often used as a headless or hybrid CMS, and we receive a lot of feedback on extending upon our capability to best support these use cases. From the extended RESTful APIs in CMS12 to our upcoming support for GraphQL (keep an eye out for this blog in the upcoming weeks!), we are continuously improving the ways in which content can be consumed.



However, this blog post wants to focus not on the delivery, but the creation of content.

To support (and differentiate) headless and hybrid content creation in the UI, the editing UI got a new friend: the Multi-Channel Content gadget.

It extends some of the already familiar Navigation view (Pages, Sites, Tasks, Project items) and Assets view (Blocks, Media) functionalities to headless content, making it easy for editors to learn how to use.


In the Multi-Channel Content tree:

  • Users can create blocks and folders directly from Root
  • Users can create blocks under blocks
  • Content types for a block can now be defined in Admin mode too (this is a new addition that is now available in non-headless mode too!)
  • Blocks can be created under a folder, similarly to how it works in the Blocks gadget
  • Images can be uploaded to folders only

Image pancake.png


Headless contents (i.e. contents in the Multi-Channel Content tree) behave similarly to all other content types and respect most functionalities related to a content, such as approval flows, access rights, languages, or personalization. The Multi-Channel Content tree should operate similarly to a Page tree when a content’s status changes, or language is missing.

The only notable difference is the lack of drag and drop functionality - we are making some improvements to our tech stack that will make it available further down the line.

This looks great! How can I actually access it?

I’m glad you asked!

There are two ways to access the Multi-Channel Content gadget – in headless-only mode and in hybrid mode.  


Headless-only mode

Headless-only mode can be configured by developers. When enabled, the Multi-Channel Content gadget appears and hides the Navigation view (Pages, Sites, Tasks, Project Items) and the Assets view (Blocks, Media). Only headless content can be created, with no access to page-specific editing functionality. Preview might be available, depending on the content type and its rendering.


To enable headless-only mode, HeadlessModeOptions.HeadlessModeEnabled needs to be set to true. It can be configured programmatically or using appSettings.json.


Hybrid mode

Even if headless-only mode is disabled, editors still can access the Multi-Channel Content tree gadget by adding to the left-hand navigation pane, along with the Page navigation tree. 

 

In this view, editors can have access to both the Page tree and the Multi-Channel Content tree in the same view, leveraging the capabilities of both.


For further information on how to enable Headless Edit mode, please visit Enabling Headless Content Mode

For a user guide on the same, see Headless mode: editing multi-channel content in Optimizely

We are actively looking at expanding the functionalities mentioned above. Please get in touch if you’d like to be involved in testing or reviewing any prototypes, or tell us about your use cases so we can take them into consideration.

As always, we are very interested in your feedback!

CMS Product team

Jul 04, 2022

Comments

Please login to comment.
Latest blogs
Helper method to encode query string properly

When using Url.ContentUrl() in Optimizely 12, encodes spaces as + in the query string. If you want to encode the spaces as %20, use the below helpe...

sunylcumar | May 13, 2025

Get ContentReference from GUID

Optimizely CMS 12 provides a Utility function to retrieve Content Reference from a Guid by ussing the below static method. var contentReference =...

sunylcumar | May 13, 2025

Creating a Dropdownlist in Optimizely CMS: Populate ISelectionFactory with values from another block's properties

Create a Block to hold selection options using EPiServer.Cms.Shell.UI.ObjectEditing.EditorDescriptors; using EPiServer.PlugIn; using EPiServer.Shel...

sunylcumar | May 12, 2025

Opal AI available in Optimizely CMS (SaaS)

Use Opal AI to translate your content!

Tomas Hensrud Gulla | May 12, 2025 |