Extend list with class field

1

I would like to have a Table of Content as a block. I tried building a custom block width definition list using the “faq”-example but failed, mostly at the vue part. I tried to just use a modified list block and just add a class to it, so I can use css columns, but I failed again. I get either a <ul> with a class but no list items or I get list items without the ul with class. And I get every possible fail in between these two limited options.

What confuses me is that there a several receipts in the docs to either create a custom block or to modify it.

So I need help or otherwise I type html in a textarea and continue living stupid.

Here is my stuff at the time being:

  1. a yml blueprint in site/blueprints/blocks called “list”. Here is its fields’n stuff:
name: list
icon: list
label: Table of Content
fields:
  class:
    type: text
  items:
    label: liste
    type: list
  1. A snippet called “list.php” in site/snippets/blocks:
 <ul class="<?= $block->class() ?>">
 <?= $block->items() ?>
</ul>
2

This doesn’t make sense, because the list field already has a <ul> element, so with your outer ul element you create invalid HTML.

If you want to do it like this, use a div as wrapper

     <div class="<?= $block->class() ?>">
     <?= $block->items() ?>
    </div>

Or inject the class through string manipulation.

It also probably doesn’t make sense to overwrite the default list block for this special case? Better create your own block type.

Is there a reason why you don’t create your ToC from the headlines in your blocks field?

3

You are right, this doesn’t not makes sense, because then I could just as well style my (every) ul with a few lines of css.

I tried to create a custom block type because I saw this thread but didn’t get it. Tried do go the easier way, which turned out to be a dead end for me :wink: