Getting started with the Block Grid Editor
There is already extensive documentation available for the Block Grid Editor, so that’s a good starting point. You can also find an introduction to the editor in the Umbraco 10.3 release candidate blog post along with what to focus on for testing.
The property editor was originally scheduled for release in Umbraco 10.3 but was postponed to Umbraco 11 as we believe it can benefit from more testing and feedback - so please do give it a go. 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.
Updated Rich Text Editor with TinyMCE 6
TinyMCE is the JavaScript frameworkthat powers the Rich Text Editor in the Backoffice of Umbraco CMS. It is a finely tuned engine able to wrap a bunch of HTML and show it in a friendly way to content editors, who can in turn make updates to their content and be ensured that TinyMCE will preserve their edits neatly in the database as HTML.
Umbraco has been using TinyMCE 4 for quite a few years now. With the culmination of the release of TinyMCE 6 earlier this year and the upcoming release of Umbraco 11, we saw fit to get back in sync with the module. Therefore, you can look forward to the inclusion of TinyMCE 6.2 in Umbraco 11.
TinyMCE has yet to announce for how long version 6.2 will be supported, but by the looks of it, it will be supported well into 2024.
From TinyMCE 4 until TinyMCE 6 there have been many breaking changes to their public API, but you can look forward to a more robust API with a more modern UI theme and new built-in features.
You can find more about the features of TinyMCE on their product page.
Migrating to TinyMCE 6
There will be no breaking changes to any existing HTML content - all custom styling, media, links, and macros will continue working.
On the JavaScript side, however, there are some changes to consider. Umbraco ships with an updated TinyMCE service for AngularJS, which supports the new API of TinyMCE 6.
If you are customizing TinyMCE in any way, it may be relevant for you to follow the migration guides from TinyMCE itself. The process is to first follow the migration guide from version 4 to 5, and then from version 5 to 6.
Read more about how Umbraco did it internally in the backoffice with the Pull Request that updated TinyMCE.
What to focus on for testing
The most important thing to test is that your HTML content still works with the new version of TinyMCE if you are migrating from an older version of Umbraco.
If you are extending the configuration of TinyMCE with JavaScript, here are some hints for you to consider:
Buttons
Adding buttons to the Rich Text Editor has changed a bit. It is necessary to rewrite some of your code:
Before:
editor.addButton(name, config)
Now:
editor.ui.registry.addButton(name, config)
Please note that the config object was changed as well, notably “onclick” was renamed to “onAction” and there is a new “onSetup” callback to use.
Plugins
Some features were previously added as plugins which are now part of the core of TinyMCE including “hr” and “paste”. Please take note if you load in plugins from TinyMCE manually and/or have installed third-party plugins.
Stylesheets
There have been a few optimizations to Umbraco’s deserializer for stylesheets included in the rich text editor. Please take note that your styles still appear in the “Formats” dropdown and work as expected.
Configuration
If you at all interact with the RichTextEditorSettings object in appsettings, please make sure to test that it still works. Namely, the “plugins” config may have changed and a lot of configuration keys were removed or renamed in the “CustomConfig” object, which is being forwarded directly to TinyMCE. More on this under Breaking Changes.
Decoupling Dependencies
Umbraco has a dependency on ImageSharp to do image manipulation. This dependency has been moved out so it works like a package, which is shipped with Umbraco. This change makes it possible to upgrade to future major versions of Imagesharp in Umbraco 11+ independently of the Umbraco version.
In the same way, a few classes are also moved into the Umbraco.Cms.Persistence.SqlServer assembly.
Breaking Changes
Most breaking changes are due to changes introduced by updating dependencies. The breaking changes in .NET 7 and ASP.NET Core 7 are documented by Microsoft.
The update to .NET 7 included a breaking change that broke ModelsBuilder in InMemoryAuto mode. We have handled the breaking change and made ModelsBuilder work again as expected. Besides the documented changes, we have also seen a few method signatures that are changed to support Nullable-Reference-Types.
The breaking changes in TinyMCE are documented in the migration guides for version 4 to 5 and from version 5 to 6.
Most other breaking changes in Umbraco 11 are due to the removal of classes, methods, etc. marked as obsolete in Umbraco 9. A few methods and classes have also been moved and changed namespace. Decoupled dependencies are documented on the announcement repository.
The full list of API-breaking changes can be found in the documentation and further details can be found on the respective PRs linked from the release notes.
Known issues
Umbraco 11 RC1 currently depends on ASP.NET Core 7 RC2 and .NET 7 RC2. These dependencies will be updated to the final versions before the official release.
As mentioned earlier in the post, a few tweaks are coming to the Block Grid Editor with a sort mode, improved drag and drop functionality, and we’re looking into adding an inline editing mode as known from the old Grid Layouts editor.
Substantial updates and fixes will be added in further release candidates as warranted (RC2, RC3, etc.), so you have the opportunity to test them out before the public release.