Customizable collapsed text?

[coredumperror]

As I mentioned over on the wagtail queue, it'd be nice if the text that's displayed when a block is collapsed were customizable. It's supposedly possible, but how does it work?

[BertrandBordage]

There’s indeed a way to specify the way the title of a block is displayed, but that’s limited to StructBlock for now. Suppose you have a ButtonBlock containing a color field, a label field and a URL field, then you might want to specify that the title of the block in the admin should be Button “the label content”. Here’s how to do it:

class ButtonBlock(StructBlock):
    color = CharBlock()
    label = CharBlock()
    url = URLBlock()

    def get_definition(self):
        definition = super().get_definition()
        definition['titleTemplate'] = 'Button “${label}”'
        return definition

Note that the “title template” uses the new JavaScript string format, with a dollar sign and braces.
In that template, you can also display multiple field contents, like “${label}” (${url}) that will show something like “Home page” (https://noripyt.com). It is not possible though to have conditions for now.

I’ll probably add the possibility later to specify a JavaScript function instead of a simple template like this. I’m not sure though on what would be the best API for it.

Anyways, note that another layout of block called SIMPLE will arrive soon. A block with SIMPLE layout will look more like the current StreamField, without any title. See the RFC for more detail.

[coredumperror]

Great! Looks quite useful for our purposes!

[fpoulain]

Hi,

On some StructBlock I experience weird behavior with this titleTemplate.

When I use integerfield as child, it takes it (the number) as a title ; which looks weird.

If I overload get_definition, then I define a title text but I am unable to add the block-type css class which makes it visually as like as others titles.

Finally, the block type is displayed at right whereas with other structs it is not the case.

I guess it is relied to some ability to display txt values of the struct but it breaks some homogeneity.

How do you think about it ?

[BertrandBordage]

@fpoulain Yes, the idea of these titles was to give a hint on what’s inside, but I’m not sure we want to give too much control over the HTML that’s inside it. The first simple reason for that is that I use text-ellipsis to truncate long inputs with a few other CSS rules to make everything well constrained. Giving control over all that means that we will probably have users complaining about broken layouts because of it.

I chose to display the numbers as title because it can make sense in lots of context, though I agree it’s not universal. The main idea was to at least give something, even meaningless, that helps users differentiate blocks when they often go on the same page or when reordering blocks.

Anyway, note that now the default layout is SIMPLE, so the title will not really be a problem for most Wagtail beginner developers.

The ideal solution of this is obviously to do AJAX calls to a Python method, but I want to see what’s the feedback before introducing that. I already introduced AJAX calls when rebuilding the whole preview system, and now I introduced a few AJAX callls when the page loads to fetch images chosen with the ImageChooserPanel. So let’s be cautious about this for now!

[fpoulain]

Anyway, note that now the default layout is SIMPLE, so the title will not really be a problem for most Wagtail beginner developers.

I confirm. Upgrading my local version of wagtail-react-streamfield suited my needs.

[roodie]

Is the .get_definition() part still supposed to work? I cannot get it working. All I need is to display a custom value as title for a few structblocks; but it only works if the block has a .title property.

[BertrandBordage]

@roodie It was renamed from get_definition() to a definition (cached) property in wagtail-react-streamfield 1.3.0. I will add a note about it.

[roodie]

Yes, I found it after my comment, but worths a note, yes.

[jkevingutierrez]

Is there a special way to use a block of type RichTextBlock or ImageChooserBlock on the titleTemplate?

Having:

class CustomBlock(StructBlock):
    text = RichTextBlock()

    @cached_property
    def definition(self):
        definition = super().definition
        definition['titleTemplate'] = '${text}'
        return definition

Is showing something like:

And having:

class CustomBlock(StructBlock):
    image = ImageChooserBlock()

    @cached_property
    def definition(self):
        definition = super().definition
        definition['titleTemplate'] = '${image}'
        return definition

Is showing a number, it would be good to show the image name instead of a number

[BertrandBordage]

@jkevingutierrez Unfortunately no, there is no easy & generic way to work around this. Which is why I disabled that help title on these block types.