you need to import the context e.g. for Block Grid you would import

UMB_BLOCK_ENTRY_CONTEXT 

Thank you for taking the time to reply! Ibrahim, it seems like this could be done with your regular expression component once it is merged in. I will watch for that.

I was able to get my custom component working with your explanation, pull request, and from the source code of the vanilla ufm label. Some explanation on why this is all necessary was found in a recent discord chat https://discord-chats.umbraco.com/t/23104860/context-api-umbraco-cms and another possible solution https://discord-chats.umbraco.com/t/23111780/but-i-do-not-think-you-need-to-do-any-different-for-your-ufm

Some gotchas: It seems my element tag had to start with the letters "ufm", i.e.

<ufm-pdf-block-label>

I couldn't put a slash in my label right before my token or it didn't work.

"/{% bodyText}" doesn't work but "{% bodyText}" does

The link between the element and the component seems to be based of the element name, which makes sense, but it also appears that this import inside the component is critical, even though I don't understand what it does. In my mind, imports import classes that can later be used but this syntax doesn't do that and it references a .js instead of .ts file. Maybe somebody can explain what this does.

import './pdf-block-label-element.js';

Here is my extension registration, from umbraco-package.json in the "extensions" section

{
  "type": "ufmComponent",
  "alias": "MyProject.PdfBlockLabel",
  "name": "PDF Path",
  "api": "/App_Plugins/CustomBlockLabels/pdf-block-label.js",
  "meta": {
    "marker": "%"
  }
},

Here is the referenced component

import { UmbUfmComponentBase } from '@umbraco-cms/backoffice/ufm';
import type { UfmToken } from '@umbraco-cms/backoffice/ufm';


import './pdf-block-label-element.js';

export class PdfBlockLabel extends UmbUfmComponentBase {
    render(token: UfmToken) {
        if (!token.text) return;

        const attributes = super.getAttributes(token.text);
        return `<ufm-pdf-block-label ${attributes}></ufm-pdf-block-label>`;
    }
}
export { PdfBlockLabel as api };

And here is the element

    import { UmbUfmElementBase } from '@umbraco-cms/backoffice/ufm';
    import { customElement, property } from '@umbraco-cms/backoffice/external/lit';
    import { UMB_BLOCK_ENTRY_CONTEXT } from '@umbraco-cms/backoffice/block';

    const elementName = 'ufm-pdf-block-label';

    @customElement(elementName)
    export class PdfBlockLabelElement extends UmbUfmElementBase {
        @property()
        alias?: string;

        constructor() {
            super();
            this.consumeContext(UMB_BLOCK_ENTRY_CONTEXT, (context) => {
                this.observe(
                    context.content,
                    (value) => {

                        if (this.alias !== undefined && value !== undefined && typeof value === 'object') {
                            const record = (value as Record<string, unknown>)[this.alias];

                            // Whatever you want to do to the value here -- in my case lowercase with some string replacement.
                            this.value = record.toString().toLowerCase().replace(" ", "-"); 


                        } else {
                            this.value = value;
                        }

                    },
                    'observeValue',
                );
            });
        }
    }

    export { PdfBlockLabelElement as element };

    declare global {
        interface HTMLElementTagNameMap {
            [elementName]: PdfBlockLabelElement;
        }
    }

With v15 this code doesn't work anymore since context.content isn't public or even an observable variable anymore.

Any ideas Niels Lyngs?

constructor() {
            super();
            this.consumeContext(UMB_BLOCK_ENTRY_CONTEXT, (context) => {
                this.observe(
                    **context.content,**

Try something like this :

this.consumeContext(UMB_BLOCK_ENTRY_CONTEXT, async (context) => {
        const content = await context.contentValues();
        this.observe(
            content,
            (value) => {

                                         /// use value here


            },
            'observeValue',
        );
    });

is working on a reply...