Wagtail: how to change css class in auto-generated block?

Question

I have a StructBlock inside StreamFied:

courses = StreamField([
        ('Courses', StructBlock([
            ('Start_date', CharBlock()),
            ('Name', CharBlock()),
            ('Description', TextBlock()),
            ('Image', ImageChooserBlock()),
            ('Price', CharBlock()),

        ], icon = 'plus', template = 'blocks/course_block.html'))
    ], True)

content_panels = Page.content_panels + [FieldPanel('courses')]

In html i have following structure: /index.html

<div class="swiper-wrapper" id="swiper-wrapper-dfa89409b3fe2577" aria-live="polite" style="transform: translate3d(0px, 0px, 0px); transition-duration: 0ms;">
    {{ page.courses }}
    # Html have this structure after rendering
    #<div class="block-Courses"></div>
    #<div class="block-Courses"></div>
    #<div class="block-Courses"></div>
</div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>

/blocks/course_block.html

<div class="{{ classname }}">
    <div class="item-courses swiper-slide">
        <p class="item-courses__data">{{ self.start_date }}</p>
        <div class="item-courses__title">
            <h3 class="title3">{{ self.course_name }}</h3>
        </div>
        <div class="item-courses__text">
            <p class="text2">{{ self.course_description }}</p>
        </div>
        <div class="item-courses__more">
            <div class="item-courses__price">
                <h4 class="title4">{{ self.course_price }} ₫</h4>
            </div>
            <a href="#" class="item-courses__link link-hover">More</a>
        </div>
        <div class="item-courses__image">
            <img src="{{ image_course.url }}" alt="chocolate-basics">
        </div>
    </div>
</div>

And i want to change class name for course-Block in index page

I was try add form_classname inside the StructBlock

courses = StreamField([
        ('Courses', StructBlock([
            ('Start_date', CharBlock()),
            ('Name', CharBlock()),
            ('Description', TextBlock()),
            ('Image', ImageChooserBlock()),
            ('Price', CharBlock()),

        ], form_classname = 'swiper-wrap' icon = 'plus', template = 'blocks/course_block.html'))
    ], True)

content_panels = Page.content_panels + [FieldPanel('courses')]

But that didn't help me Its create a new div inside course-Block without class attribute like this:

<div class="swiper-wrapper" id="swiper-wrapper-b225a982a905e0c8" aria-live="polite" style="transform: translate3d(0px, 0px, 0px);">
<div class="block-Courses">
    <div class=""></div>
</div>
<div class="block-Courses">
    <div class=""></div>
</div>
<div class="block-Courses">
    <div class=""></div>
</div>

<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>

There was an idea to add a css class through the admin panel, but this idea is not very successful, since the end user does not need fields that will interfere. But still it did not replace the class for the course block

I want to change class attribute in auto generated blocks in html. — Hater, Jan 12 '23 at 20:47

score 1 · Accepted Answer · answered Jan 12 '23 at 20:59

The <div class="block-Courses"></div> wrapper is just the standard rendering you get if you render the whole StreamField in one go with {{ page.courses }}. If you want something different, you can loop over page.courses and write the HTML yourself:

{% for course in page.courses %}
    <div class="whatever-you-like">
        {{ course }}
    </div>
{% endfor %}

See https://docs.wagtail.org/en/stable/topics/streamfield.html#template-rendering for more ways to render a StreamField value.

Wagtail: how to change css class in auto-generated block?

1 Answers1