Umbraco 8.14 Release

Overview:

• What’s new in Umbraco 8.14
  • New Media Picker
  • Improved validation notifications
  • Single item mode for Block List editor
• Community Contributions
  • 🌳🌳🌳🌳🌳🌳
• How to get your hands on Umbraco 8.14

What’s new in Umbraco 8.14

New Media Picker

Umbraco’s built-in Media Library and image cropping capabilities have been selling points and indeed very useful for many years. Combine that with a Media Picker and you have some great functionality out-the-box that allow content editors to create great looking content and tweak the images to fit the design perfectly. 

So why a new Media Picker? Well, there are things in the user experience and workflow that were not as intuitive as it could be and, depending on how it was configured, even downright confusing. With Umbraco 8.14 and the new Media Picker a lot of these small (and big) inconsistencies have been addressed along with new functionality, re-designed UX and more granular control.

And it goes beyond the Media Picker itself: the UmbracoFile property editor (used for upload fields on e.g. Media Items) has been extended and additional Media Types are available in new installations.

Improved Upload Field

You can now define which file extension(s) are allowed on an upload field. This is very handy if you only want specific image types or want to create functionality for certain types of documents.

You can easily create a new data type using the new configuration options and limit it to only accept PDF documents, for example. It was added to support some of the new features for the Media Picker but can be used for all file uploads. Now that you know the type of file being uploaded you can create specific functionality around that.

New default Media Types

Umbraco now ships with additional default Media Types. Aside from the well-known Image, Folder and File Media Types, you’ll now see Article, Audio, Vector Graphics (SVG) and Video. 

These additional Media Types will give you more control over what can be picked.

Configuration of the new Media Picker

The new Media Picker comes with entirely new configuration (prevalue editor) to support all the new functionality. Previously you were able to allow picking multiple items, limit the picker to only work with images, disabled folder selection and set a start node in the Media Library. Useful configuration options and they have all been preserved or enhanced in the new Media Picker.

You can now limit what Media Types are pickable, simply choosing from the Media Types available in the installation both custom and default Media Types (including the new ones in 8.14). A huge improvement over just being able to limit the picker to Images.

Toggling between multiple or single item picking works as before but you can additionally set a range for the number of items to be picked. 

Setting a start node for the picker is also the same and you can now choose to “Ignore user start nodes” allowing access to pick Media items from parts of the Media Library that a user does not normally have access to. 

Finally, there are configuration options for adjusting images with the use of the focal point and the addition of local crops 🎉 Yes, the Media Picker now supports cropping through the picker UI and storing the crop information on property. This means you no longer have to adjust a crop globally in the Media Library or resort to the Image Cropper upload field directly on content items. With this you can choose an image in the Media Library and adjust the crop and/or focal point for the specific case. The focal point is off by default and if you don’t add any crops, it will function as a standard picker, allowing you to configure an intuitive editing experience that fits the specific use case.

Improved editing experience 

To bring all these improvements and new features together, the UI for the new Media Picker has been completely redesigned. You’ll see that the picked items take up a bit more space allowing for a better preview of the selected items. Property actions are now being used (you might recognize them from the Block List editor) so you can copy the contents of a Media Picker for reuse elsewhere or completely remove all items all at the click of a button - just click the three dots next to the property name.

Watch the video in full-screen

Picking items works similar to before through an infinite editing dialog where you can browse the Media Library. But, when you have picked items you’ll see some changes. You can now copy an individual item by clicking the copy button in the top right corner, which is really helpful if you want to use an image elsewhere. If you have multiple items allowed, you can add new or copied items in between already selected items by clicking the plus and there is of course support for drag n drop if you want to change the sort order. It’s also worth noting that uploading files with the new Media Picker will auto-magically map them to the relevant Media Type based on the file extension ✨

The last big change you’ll see is when accessing a picked item. This is done by clicking the name of the item, the same way it works in the Media Library. A new dialog designed specifically for the new Media Picker will open up and allow you to adjust the focal point, edit individual crops and at the bottom you’ll find actions to change the Media Item or edit it in the Media Library.

Almost all areas have been reworked to provide a better user experience and allow for greater flexibility when designing editing workflows. 

If you want more information you can read the new documentation for the Media Picker.

Improved validation notifications

Another big improvement in Umbraco 8.14 is a better way of handling notifications for saving items with mandatory properties. You’ve always been able to save (not publish) WIP content even though mandatory properties were not filled out. This is quite useful as you might be preparing content without all information at hand and want to store your progress so you can return to it later. Unfortunately it was not all that clear that the document was saved and it was handled with error alerts leaving the impression that it did not work.

Now the validation messages show as warnings instead of alerts (yellow as opposed to red notifications), which is a much nicer experience. There were some instances where the save would not be completed, so the entire validation flow has been reworked to make it more consistent. This also means that you’ll get the ✔ response on the save button as you normally do, making it clear that it was completed as intended.

Watch the video in full-screen

The notifications will still show as red alerts if you try to publish empty mandatory properties. 

All in all a more consistent and less stressful workflow, that helps notify you when something is missing but doesn’t get in the way.

Single item mode for the Block List Editor

The Block List editor has also received an update to the UX with an improved way of handling lists where only a single block type is allowed. It will now skip the Block Catalogue, which was unnecessary with only one type and allow for much faster content creation.

Watch the video in full-screen

Try it out by only allowing a single Block Type on a Block List editor and add some content. Notice that the paste feature has been moved from the catalog to the Add button when in single item mode, ensuring that you’re still able to paste in copied items.

Updated dependencies

Several dependencies have been updated to newer versions with this release. While they are not listed as breaking changes you should be aware if you are using these in any packages or extensions. Make sure to test them out if this is the case:

• Update noUiSlider to latest 14.6.4
• Update spectrum color picker to latest v2.0.8
• Update Underscore from 1.9.1 to 1.12.1 in /src/Umbraco.Web.UI.Client
• Update to Examine 1.2.0

Community Contributions

Of the 34 bug fixes and feature additions in 8.14.0, 19 of them have been contributed by the community created by 13 unique contributors. 

We’re welcoming one brand new contributor who has made their first pull request for Umbraco-CMS, they’re marked with a star below. Welcome to the contributor club Harikrishna Parmar! 🏆

⭐ = First pull request to any Umbraco repository

Planting seeds 🌳

Speaking of contributions, as you may know we join Hacktoberfest every year and it’s great to get a lot of new contributors added to the list at that time. 

Last October we joined the Digital Ocean’s Hacktoberfest mission to do something a little different than sending every contributor some swag, they suggested having a tree 🌳 planted instead of receiving a t-shirt. 

It’s been great to see that 37% of last Hacktoberfest contributors asked for a tree to be planted on their behalf and some of you even answered: “I really want the swag, but I’ll plant trees as well because I’d feel guilty otherwise”. 

Now, we’ll let you in on a little secret: we had no idea where to start with the tree planting, so it took us a little while to get it done. We looked around and got the golden tip from Callum Whyte who found a lovely group of people calling themselves Ecologi.They have built a really beautiful platform where we can build a plot of trees and keep adding to it. 

So this is what we started with: we subscribed to their service and will not just plant 1 tree for each Hacktoberfest contributor, but we’ve committed to plant a tree every month! 

You can check out our growing plot over at Ecologi.

The Ecologi platform got us thinking of more reasons to plant trees, as Callum explained to us, you can easily donate additional trees, there is even an API to automate tree planting 🤩. We recently received an automated welcome gift from our brand new Gold Partner Bump Digital.

Therefore, we have now committed to not just do this for Hacktoberfest, but from now on we’ll also plant a tree for each contributor to new minor releases of Umbraco, starting now! So for this 8.14.0 release, we’ve added a clump of trees 🌳🌲🌴 as a thank you for your great contributions.

We are planning more interesting ways to grow our plot together with the community and now have a dedicated page with all the information about it on our Community site. Stay tuned for more tree updates in the near future!

Breaking Changes

This release contains no breaking changes.

How to get your hands Umbraco 8.14

As always, all new v8 Umbraco Cloud projects will be running 8.14 from today. For all our Umbraco Cloud customers with existing projects, this upgrade is only 2 minutes away:

We’ve wrapped it all up for you, so all you have to do now is follow these steps:

• Add a Development Environment to your project, if you do not already have one (Add a Development environment by clicking “Manage Environments” in the project view)
• Make sure you also restore the content to the Development Environment from your Live.
• When the Development Environment is all set up and you’ve made sure you don’t have any pending changes on the Development Environment - you are all ready to upgrade to Umbraco 8.14!
• It's as easy as clicking a button - like, literally clicking the "Upgrade Available" button on the Development Environment. The auto-upgrader will take care of everything from here! 🚀
• Once it's done, check the Development Environment to make sure everything is looking right.
• When that's confirmed, you are ready to deploy the upgrade to the next environment - Live or Staging, and start taking full advantage of all the new features.

Non-Cloud and release notes:

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

This release is also available from Nuget: https://www.nuget.org/packages/UmbracoCms/8.14.0