Edit Markup of 'List' Block Element

Kirby 3 Solved ✅
1

I’m using Blocks in the editor and would like to edit the markup that is output.
For example, with a List block, I would like to change the HTML output of the <li> item, in this specific case to have an inner wrapping element, like <li><span>[inner content]</span></li>.

I’ve created an override for the block in snippets/blocks/list.php, but cannot seem to access the content within.

Is there a good way to do this?

2

The markup for the list block is stored in the content file, so cannot be changed via the snippet, or more correctly, not without manipulating the output in the snippet by changing the DOM elements.

This plugin might be helpful: Tree Methods | Kirby CMS

3

Ah, yes, that makes sense Sonja.
Thanks for the plugin suggestion.

For now, I am going with a string replace “solution”, but open to any better ideas!

<?php if ($block->type() == 'list'): ?>
      <div class="block block--<?= $block->type() ?>">
      <?php $block = Str::replace($block, '<li>', '<li><span>');
            $block = Str::replace($block, '</li>', '</span></li>');
            echo $block 
      ?>
      </div>
    <?php else: ?>
4

You might find out that we are tackling some of the automatic HTML markup by the Writer component (and the underlying Prosemirror library) just the same way :sweat_smile: kirby/List.vue at v4/main · getkirby/kirby · GitHub

1 Like