Auto exposed block variants are collapsed

[MichaelNielsenDK]

Which Umbraco version are you using? (Please write the exact version, example: 10.1.0)

15.2.1

Bug summary

When Blocks are set to variants, when the element type is set to vary by culture, and blocks are created on one language, they show up on other variants, in a grey box with a label saying "+ Create New {BlockName}".

These boxes are however collapsed into each other and also in the general "Create new" button.

Specifics

No response

Steps to reproduce

• Create two languages.
• Create new ElementType, set vary by culture.
• Create new Rich Text Editor property on element type, set vary by culture.
• Create new BlockList Editor data type, and choose element type as available block.
• Create new Document Type, set vary by culture.
• Create new BlockList Editor property on document type, do not set vary by culture.
• Insert one or more blocks into the Block list on one language, Save and Publish.
• Open second language in split view, the inserted blocks can be seen on the other language, however they are all collapsed/placed on top of each other and the general insert new block link.

Expected result / actual result

No response

---

This item has been added to our backlog AB#49562

[github-actions]

Hi there @MichaelNielsenDK!

Firstly, a big thank you for raising this issue. Every piece of feedback we receive helps us to make Umbraco better.

We really appreciate your patience while we wait for our team to have a look at this but we wanted to let you know that we see this and share with you the plan for what comes next.

• We'll assess whether this issue relates to something that has already been fixed in a later version of the release that it has been raised for.
• If it's a bug, is it related to a release that we are actively supporting or is it related to a release that's in the end-of-life or security-only phase?
• We'll replicate the issue to ensure that the problem is as described.
• We'll decide whether the behavior is an issue or if the behavior is intended.

We wish we could work with everyone directly and assess your issue immediately but we're in the fortunate position of having lots of contributions to work with and only a few humans who are able to do it. We are making progress though and in the meantime, we will keep you in the loop and let you know when we have any questions.

Thanks, from your friendly Umbraco GitHub bot 🤖 🙂

[nielslyngsoe]

Hi @MichaelNielsenDK

It looks like you are using a Custom View on your Blocks. Could you provide us with the code for it?
Eventually prove when having the custom view not showing up this works correctly?

With all my assumptions: Then reason why you see the problem is because the Expose button goes on top of the custom view. But your custom view has a close to zero height.

We could solve this by enforcing a minimum height on blocks, would you like that approach or would you rather make sure to set that in your Custom Blocks?

Thanks in advance

[nielslyngsoe]

@MichaelNielsenDK If you agree with above, then please see how this change fits for your case.
Thanks in advance

#18400

[MichaelNielsenDK]

Hi @nielslyngsoe

I don't think it uses anything from the custom view, when a variant hasn't been added, so I don't think setting any styles would help. I have already tried with margin, padding, min-height and so on.

I've added a min-height here, and nothing changes, and I've highlighted one of the block editors, and as you can see, there is no markup from the custom view.

To answer your question, since what is shown is something Umbraco generates, I feel it should behave and look nice out of the box.

This is how my custom view looks

import { html, customElement, LitElement, property, css, unsafeHTML } from '@umbraco-cms/backoffice/external/lit';
import { UmbElementMixin } from '@umbraco-cms/backoffice/element-api';
import type { UmbBlockDataType } from '@umbraco-cms/backoffice/block';
import type { UmbBlockEditorCustomViewElement } from '@umbraco-cms/backoffice/block-custom-view';

@customElement('block-text-custom-view')
export class BlockTextCustomView extends UmbElementMixin(LitElement) implements UmbBlockEditorCustomViewElement {

    @property({ attribute: false })
    content?: UmbBlockDataType;

    @property({ attribute: false })
    settings?: UmbBlockDataType;

    override render() {
        return html`
        <div style="margin-top:${this.settings?.spaceAbove ?? 0}rem; margin-bottom:${this.settings?.spaceBelow ?? 0}rem;">
            ${unsafeHTML(this.content?.text?.markup)}
        </div>
    `;
    }

    static override styles = css`
        h1, .h1 { font-size: 3rem;}
        h2, .h2 { font-size: 2.25rem; }
        h3, .h3 { font-size: 1.875rem; }
        h4, .h4 { font-size: 1.5rem; }
    `;
}

export default BlockTextCustomView;

declare global {
    interface HTMLElementTagNameMap {
        'block-text-custom-view': BlockTextCustomView;
    }
}

[nielslyngsoe]

Hi @MichaelNielsenDK I agree, it seems to be something we could make sure acts nice out of the box.

But for you to be able to move on faster, I assume you could add a minimum height to your custom view and it should work.

You should also be able to figure out the change on your own, but it seems to me you need a little guidance to find the actual UI. You need to navigate into the Shadow-Root of the component, inside this one you should find and inside its Shadow-root you should find the actual 'expose-button' and see that your Custom View is present.

So you should be able to fix this by adding a minimum height to the component that you shared the code from in the post above. Add something like this to make sure your custom view has a minimum height:

> div {
    min-height: 60px;
}

And then in near future we will have a closer look at this exact case.

[MichaelNielsenDK]

@nielslyngsoe
Huh... I thought had tried adding a min-height, padding, margin and such, but I guess I did not do it right, or on the right element. 🤷‍♂️

Because you're right, adding a min-height to the outer div works, I've illustrated it with a color also here

So that's great 👍🥳

But yeah, it should look nice OOTB, but until then, this is an easy fix.

[nielslyngsoe]

@MichaelNielsenDK thank you for clarifying that, and I'm pleased you can move on. We will make it work out of the box in the near future.