Umbraco 10.3 Release Candidate

Overview:

• What’s in Umbraco 10.3?
• New Property Editor: Block Grid Editor
• Umbraco UI Library now included
• Dependency Updates
• Known issues
• How to test
• How to get your hands on Umbraco 10.3
• When is the public release?

To help you provide feedback, I’ve gathered an overview of some of the items you can help test for this RC. We have run internal testing and are very happy with the current state of the build - but extra polishing and testing are always helpful. So if you have time to help - or just find yourself super curious, feel free to dive into the full list of improvements in the 10.3. RC today. 

What’s in Umbraco 10.3?

Launching an entirely new Property Editor is a big deal but it’s not all that’s in this release. You’ll also find the Umbraco UI Library now ships as part of the CMS, you can finally copy existing Data Types, and a multitude of dependencies have been updated including the Examine search engine, which addresses some issues in Umbraco 10. Aside from that, there is a long and wonderful list of smaller features, improvements, and fixes - let’s take a look at Umbraco 10.3:

New Property Editor: Block Grid Editor

Update October 18, 2022: Please note that the Block Grid Editor has been postponed and is not part of the Umbraco 10.3 release. We've received great feedback and it warrants another round of testing. The new Property Editor will be part of the Umbraco 11 release candidate, and is now targeted for release with Umbraco 11 on December 1, 2022. It will be added to Umbraco 10 in an unscheduled minor release (10.4).

The Block Grid Editor is a new Property Editor that will supersede the popular Grid Layouts Editor. The goal is to bring layout and content structure capabilities to editors, built on modern and future-proof technology, and provide an improved developer experience.

Building Blocks

As you might have guessed from the name, Block Grid Editor, everything is now based on Blocks (Element Types) which allows developers to craft tailored editing experiences and content structures using known conventions. If you’re at all familiar with the Block List Editor (or Nested/Stacked Content) you’ll be right at home. 

 

Using Blocks and Element Types allows you to configure content and settings in a much easier way than with the old Grid Layouts editor. You can now use the built-in Property Editors to create the Blocks. And you of course get all the features you're used to from the Block List Editor such as adding Settings, drag and drop re-ordering, copy/paste blocks, and Property Actions, all in a familiar editing interface. 

Configuring a Block Grid Data Type

The easiest way to get started with the Block Grid Editor is to install the sample configuration available when you create a new Data Type. This will give you a few simple Blocks for content editing, Header, Image, and Rich Text, as well as a Two Column layout.

Here you’ll notice the first feature specific to the Block Grid allowing you to group the Blocks available. So instead of having a long list of Blocks to choose from you can now divide them into named groups and help editors easily identify the type of Block they want to work with. As an example, you can create a “Layout” group and add the Two Column Block from the sample configuration.

Now there is a clear distinction between inserting layout and content Blocks.

Laying out a Grid 

There are two different ways of controlling the layout in the Block Grid Editor. Size Options for individual Blocks, and Areas that create predefined content areas. These are added to give flexibility in how you work with layout and allow for varying degrees of freedom and creativity.

Size Options

Adding Size Options to a Block means you can resize the block after it is added. Horizontally you can define how many columns the block can span and vertically you can define how many rows the block can span.

As an example, we can try adding Size Options for the Image and Rich Text sample Blocks. If we want editors to resize between full and half-width all we have to do is add these two Size Options.

The different sizes are defined in columns, 12 by default, so adding options for spanning 6 and 12 columns gives full and half-width resize options when editing the content. 

Areas

The other way of controlling layout is by adding Areas to a Block. Areas form a fixed layout in which content can be created. In the sample configuration, the Two Column layout has two Areas defined, each spanning 6 columns (again working with a 12-column default).

You can define as many Areas as you like and within each Area can control how many Blocks can be added and what type of Blocks. You can even use the aforementioned Groups for the allowed Blocks so you no longer have to add each Block individually but can instead add a Group.

The Areas correspond roughly to Row Configurations from the old Grid Layout area but as they are now based upon Blocks you can add Settings based on all the available Property Editors giving much more flexibility and quick setup.

Advanced Configuration

With the features listed above, you can create a flexible content editing experience with a focus on freedom and creativity or predefined layout structures - or maybe even a combination of both.

There are Advanced configuration options that allow you to add custom views and stylesheets, control the size of the overlay for a Block, and hide the content edit button if you’re creating an inline editing experience or pulling in data that can’t be edited. These are useful tools but not necessary for creating a good editing experience.

Rendering Block Grid

There are helper methods to render Block Grid content. You can either use the example rendering (remember to include the stylesheet) that ships with Umbraco or create your own custom renderer. 

You can also create partial views for your custom Blocks and it all comes with full support for Models Builder. Please check the documentation for details on rendering. 

It’s Playtime - Help us with feedback!

With the above introduction, we hope you can get off to a good start with the new Property Editor. The release candidate period is crucial when adding a new feature like this and we hope you’ll give it a go and report back on any findings - good or bad :) 

All feedback is valuable so whether you play around with the sample configuration, set up your own simple layout, or maybe replicate a more advanced setup you already have with the old Grid Layouts editor we want to know how the experience is. See below for how to provide feedback.

We believe the new editor is ready for prime time but it’s also important to state that we’re prepared to postpone it to the next release should the feedback warrant it. In this case, it will be part of Umbraco 11 and we will release it for Umbraco 10 in an unscheduled minor (10.4) to ensure it is part of the LTS version as well.

You can find more details in the documentation for the Block Grid Editor.

Umbraco UI Library now included

The Umbraco UI Library now ships with Umbraco CMS. While we’re still ways out from having a new backoffice built with the new component library, it is released in its first major version (currently 1.0.2) and It is used for the new Block Grid Editor.

This means that it can be used for package development as well and help prepare for the backoffice implementation currently scheduled for Umbraco 13. 

See the Umbraco UI Library documentation for more information. 

Updated Dependencies

• Examine has been updated from 3.0.0 to 3.0.1 fixing a few bugs. Especially notable that filtered properties should now work as expected in Umbraco 10+.
• Smidge is updated from 4.1.0 to 4.1.1 and brings a dependency update for Nuglify which addresses several reported issues.
• A long list of Javascript dependencies has been updated to the latest version. See the PR for more details.

Known issues

We’re currently investigating alternative ways of providing the views required for the sample configuration of the Block Grid Editor. We want to make it easier to discover and customize the views. 

How to test

First, you need to make a new Umbraco installation from 10.3RC (links below) or upgrade an existing project, both scenarios can provide valuable feedback.

If you find things in the RC that are not working, we’d be grateful for feedback on the Github issue tracker. You’re welcome to add comments to the features and fixes listed under 10.3 release or submit new bug reports (click New Issue and select Bug Report), please prefix the issue with 10.3RC:.

As mentioned previously, the RC is feature complete, so we’re not going to add additional features but will, of course, fix bugs that prevent a stable release.

How to get your hands on the Umbraco 10.3 RC

As always, installation and release notes can be found on Our: https://our.umbraco.com/contribute/releases/1030

This release candidate is also available from NuGet: https://www.nuget.org/packages/Umbraco.Cms/10.3.0-rc

When is the public release?

We’re aiming for a full public release on October 20, 2022. This means Umbraco 10.3 will be available for upgrade on Umbraco Cloud and via NuGet. We need a couple of days to wrap up the release so the sooner we get your feedback the better 🙂

Big H5YR 🙌 to everyone who has contributed to Umbraco 10.3 and thanks to everyone willing to lend a hand in testing it out. It means the world to get it validated by the users.

Bug reports are best handled on the issue tracker and as always, we welcome you to submit product feedback and questions to product@umbraco.com