How to Format Block Labels Using UFM in Umbraco 14 and Newer

If you recently updated to the newer versions of Umbraco (v14 and up), you probably noticed a massive change in the Backoffice. Everything feels faster and cleaner, but some of your old tricks might be broken.

One common headache developers run into right away is block labels. If you used to write little bits of logic to name your blocks in the Block List or Block Grid editor, you might just see raw code showing up on your screen instead of the nice formatting you expect.

Let's look at why that happens and how to update your block labels to the new standard.

How it used to work

In Umbraco 13 and older, the Backoffice was built on AngularJS. Because of that, we could tap right into Angular to format our block labels.

If you wanted a block to show a custom name—like providing a fallback title or showing "Yes/No" based on a toggle—you used Angular expressions inside double curly braces.

For example, you might have written something like:

or

It worked great. But because the new Umbraco backoffice was rebuilt from the ground up using Web Components, AngularJS is completely gone. Those double curly braces don't do anything anymore, which is why they are currently rendering as plain text on your screen.

Enter Umbraco Flavored Markdown (UFM)

To replace the old Angular logic, Umbraco introduced something called Umbraco Flavored Markdown (UFM).

Since they needed a safe, standard way to let developers format text and inject variables without relying on a massive framework, UFM steps in to do exactly that. It is essentially regular Markdown mixed with a JavaScript-style syntax for handling variables and basic logic.

The biggest change to remember? Instead of double curly braces {{ }}, you now use a dollar sign and single curly braces ${ }.

A Practical Example

Let's say you have a block called "Hero Banner". This block has two properties:

1. A text string with the alias headline.

2. A true/false toggle with the alias isFeatured.

You want the block label in the editor to show the headline in bold text. Also, if the banner is marked as featured, you want to show a star next to it so content editors can easily spot it in the list.

Here is how you do it in the new system:

1. Open up your Data Types and go to your Block List or Block Grid configuration.

2. Click on the block you want to edit.

3. Find the Label field.

4. Type in your new UFM code.

For our example, the code looks like this:

What is happening here?

The on the outside is standard Markdown. It makes the headline text bold.

• ${ headline } pulls in the text from your string property.

• ${ isFeatured ? "⭐" : "" } is a simple JavaScript ternary operator. It checks if the toggle is checked (true). If it is, it prints a star. If it isn't, it prints nothing.

Wrapping Up

It takes a little bit of muscle memory to stop typing {{ }} and start typing ${ }, but UFM is actually really flexible once you get used to it.

The logic runs in a safe, sandboxed environment, so you can safely use standard JavaScript operators like &&, ||, and ! to make your content editors' lives easier, without worrying about breaking the Backoffice.