Umbraco v8: How to Pick a Block Style Editor

** UPDATED: September 2020, following the Umbraco 8.7 release that includes a shiny Block Editor!**

During the last couple of weeks, we’ve seen a couple of new releases of block-based editors for Umbraco v8.

Perplex released Perplex.ContentBlocks, KØBEN delivered the Bento Editor and many other developers and agencies are currently using their own implementations and approaches to achieve the same goal - to make the editor's life easier when creating rich, grid-based / stacked content creations. Not mentioning that we’re also aware of the upcoming built-in to the Umbraco core block editor which is going to be released with the Umbraco v8.7, (no target date, but 99% completion state seems to make it a short call!). It’s always great to have a choice, but it’s also problematic because it throws in concerns and questions like WHICH ONE TO USE IN OUR PROJECTS?!

Let’s quickly review all of them and try to compare to make this choice easier for all of us.

NestedContent?

When Umbraco v8 was released, one of the first ‘missing’ parts of the project and ecosystem was the lack of package support such as DTGE (Doc Type Grid Editor) and Stacked Content. Grid editor, which was already very popular, was available out of the box, but for many developers using it with the built-in configuration and without strongly typed objects within it, was a “no-go” and pure struggle. 

Before amazing package creators and community people decided to put more effort into bringing some of the most popular packages to v8, developers were struggling and trying to find a way to replicate the behaviours that they were used to using when they were building solutions using Umbraco v7. 

Having Nested Content, (which was merged into the Core back in the day and originally developed by UMCO by Lee Kelleher and Matt Brailsford), we’ve started to see constructions of stacked components = blocks using this property editor.

Nested Content allows us to define element definitions using the built-in document types objects (widely used for documents and page representations in the Umbraco ecosystem) and “nest” them in a defined structure - even nesting other definitions within others.

Pros of using NC:

- Available out-of-the-box.
- Based on the document type definitions = possible to be strongly typed using ModelsBuilder.
- Full control over the rendering process

Cons of using NC:

- No preview features.
- No built-in configurations, (e.g. for columns, rows,  or elements). All of it must be defined and created inside of the document type definition and then processed in the code.

Good “old” Grid + DTGE.

Somewhere in the middle of summer (August 2019?), the Doc Type Grid Editor package was handed over to Søren Kottal who initially began the conversion of the existing version into a v8 supported one.

A lot of Umbraco developers cheered as DTGE was extremely popular amongst all builds and allowed us to define grid editors (single units within grid cells, columns and rows), using the same, well-known approach of using document types for it. Magic!

After a beta release of 1.0.0 in August, DTGE was released and the power of document type based editors began to be present inside of v8 implementations!

DTGE allows developers to configure the ability to use document type based editors within the configured grid configurations. It brings the full power of the grid (layouts, columns, rows, cells) and merges it with the full control over the objects defined using the shared repository of data types and elements already used inside of the solution or created for the purpose of this particular implementation!

We can configure the space available on-screen to edit single elements, we have full validation from the recent versions (we can use mandatory fields validation inside of the editors!!) and only our creativity or business requirements are the limitation when it comes to the complexity of the single editors. 

In the above example, you can see even the Nested Content collection bundled within the editor for the sake of listing some “items” as a part of the editor functionality.

Pros of using Grid + DTGE:

- Based on the built-in grid system.
- Based on the document types. (It works seamlessly with Models Builder too).
- Validation of elements or properties inside the grid editors.
- Preview functionality for editors; we can define a different preview view to render it for editors in the backoffice). 

Cons of using Grid + DTGE:

- Requires installation of the package, plus configuration.
- No built-in configurations (e.g. for columns, rows, or elements). All of it must be defined and created inside of the document type definition and then processed in the code.

Perplex.ContentBlocks.

This Perplex.ContentBlocks block-based editor was initially built by Perplex for one of their clients. Back then, it was silently demoed on various dev hack days/nights found at Umbraco Retreat...or Codegarden.

Finally, after a while, Perplex went public and open source!  #h5yr

This block editor brings a wide range of features which are not available in the built-in editorial features in the Umbraco Grid.

Some of the amazing features are:

- Smart Preview automatically refreshes when the content on a page is populated.
- Ability to hide or show blocks without removing them from the page content!
- Multiple layouts for blocks; to control the location of elements in the various configurations!
- A nice demo of the editor with all of its features is here:

Pros of using Perplex.ContentBlocks:

- Rich editorial experience.
- Multiple ways of treating the same content block (layouts).
- Smart Preview.
- Advanced configuration options (full control over elements).
- Hide, disable and copy option for the blocks.
- Based on Nested Content but with custom layer on top of the editor ( this also works with Models Builder).
- Possibility to be extended, e.g. custom view models for more advanced use-cases.

Cons of using Perplex.ContentBlocks:

- Requires installation of the package, plus configuration.
- Higher entry-level: custom block definitions and new extension methods to render content.
- Custom editor experience, (a little bit different than the “standard” Umbraco approach that some editors might be used to.

Bento Editor.

As the package description says:

     'The Bento Editor is a content block editor for Umbraco 8 that takes advantage of the infinite editing features of Umbraco 8. The aim of Bento is to simplify the experience of creating creative layouts in Umbraco without compromising brand and design standards. It is heavily inspired by the best parts of the original Umbraco Grid Editor with the DTGE plugin, but with the simplicity of editors such as Stacked Content.’

KØBEN Digitals’ experience of using the most popular approaches amongst the packages mentioned above, resulted in the creation of a “rule-them-all” package and editor.

Setup requires the creation of a couple of document types used for gathering the reusable components for the blocks, (they are stored within the content which allows editors or content creators to be able to define elements for the blocks - without involving developers in the process!).

We have a range of configuration options by default. Ability to affect the way rows, columns and single blocks or editors are styled with the range of the grid settings placed within the layout configuration in the editor. The core functionality and editor experience is reusing the well-known practises such as drag and drop of elements and built-in default editors for properties such as colour picker, sliders and so on...

Pros of using Bento Editor:

- Blocks defined as content; allowing the editors to control the element definitions.
- Wide options for layout definition and control.
- User experience similar to well-known Umbraco one.
- Inline preview of elements.
- Full control over the front-end rendering of elements.

Cons of using Bento Editor:

- Requires installation of the package, plus configuration.
- "Bento Stack” to be learned and followed.
- Blocks defined as content -  stored in the Umbraco content database with all the versions and general “cons” on how CMS gathers versions of documents in the DB.

The idea behind BlockEditor, Umbraco 8.7. 

The idea of a new block editor for Umbraco CMS started a long time ago. The initial steps of converting it into reality started on the retreat where the first RFC was created for project Proteus :)

The Umbraco Block List Editor is here, Umbraco 8.7.

The Block List editor is a new property editor in Umbraco built as a result of a community and HQ collaboration and discussion since initial ideas back in 2019. To build this the RFC gathered a lot of amazing feedback from community members, HQ, editors and everyone else who loves to use built-in editors! Before it was released into the wild, the new editor was anticipated to let editors manage content by closing them within "blocks" which could be stacked and organised in several, programmable and configurable ways! 

Now ready to use, it's clear this is an amazing piece of work which is a combination of various new approaches introduced in Umbraco v8 such as infinite editing, inline and overlay editing (real-time) and complex validation (my personal favourite <3)

The full demo and feature highlight was performed on the umbraCoffee #140, where Niels Lyngsø (@nielslyngsoe) from Umbraco HQ showed the full example on how to use the new editor and how to integrate it with our projects.

Watch the full demo here

So, which one should I pick?

It’s always great to have a choice! But it’s hard to choose from such a great set of possibilities when it comes to block-based editors for Umbraco v8. The answer to the question which one to use? might be… IT DEPENDS!

If you want to stay vanilla Umbraco and follow the pure and full document type based configuration you can use Nested Content or DTGE with the Grid and have full control over what is placed within the blocks or editors and how it’s rendered. 

If you or your editors want to have more rich experience with content and block creations - then check Perplex.ContentBlocks and Bento Editor and choose with your preferences.

To stay more ‘native’ and follow what Umbraco offers, the new Block List Editor can create an amazing and tailored experience foe editors from a site content perspective. 

Just remember that all of the editors are still required to be configured and analysed in terms of things like search functionality to be able to combine the way how content is populated and curated with the range of features built outside of the backoffice to utilise and consume it in your systems. If you have any other approach or tips to be applied for the block and grid-based content population, don’t hesitate to reach out to us on socials.

Happy coding and content editing!