Adding a created KirbyTag in a text changes rendering from that point on

The CMS Questions
1

Rendering problems with div in a KirbyTag (in a block)

When I use <div> in a created KirbyTag (like this wikipedia-tag example), the html output of a block will change from using <p> to using <br/> from that point on. This causes problems like links dissapearing and markup problems based on my CSS.

codesnippet from the wikipedia example
The example will give me no problems:
return '<a href="/">Wikipedia</a>'; Also <span> is allright for me to use.
but
return '<div>Wikipedia</div>';
will render everything after the KirbyTag a different way.

Instead of using <p> for every line, it will use <br/> from that point on.

Question
Am I doing something wrong, or is this a known thing?

context
In the template I use <?= $block->textfield()->kt() ?>. And the KirbyTag is rendered without problems. Only what comes after the KirbyTag is not rendered properly.
For the blocks I am using code that resembles the Block factory examples

Thanks,
René

2

Are you using a textarea field in your custom block or a writer field?

3

I am using a writer field
(which is not called ‘textfield’ but ‘alinea’) in my blueprint for the block-type:

  alinea:
    label: Tekst
    type: writer
    marks: true
    placeholder: tekst

So my template says <?= $block->alinea()->kt() ?>

4

Why don’t you use a markdown block if you want to use Kirbytags?

A writer field is not really intended to support Kirbytags.

Having said that, I did a quick test and cannot reproduce the issue, maybe you can post the exact content of your alinea field? Is it already stored wrong or is just the output wrong?

Which Kirby version are you using?

5

I am a beginner :slight_smile: and have not come across this, so I looked it up just now:

Could you tell me how to change my alinea: into a markdown block?
I have difficulty changing the example I found here into something that resembles my field.

6

I will check the contents

7

If your custom block only contains a single field, why don’t you use the markdown block instead, you don’t even need a custom block in that case.

 alinea:
    label: Tekst
    type: textarea
    placeholder: tekst

The docs have the definition of the markdown block: markdown | Kirby CMS, so you can create your custom block based on that.

So that markdown block is the good old textarea field wrapped in a block type.

8

So after analyzing the content:

  1. The content is saved with only <br/> no <p>
  2. I see now, that the surrounding <p> tag (around the complete writer field) is closed </p> directly after the (faulty) KirbyTag and not opened again.

I am doing things wrong here.

  1. I thought I was using <p> structure, but obviously not when I look at the content
  2. The code in the k-writer elements is not very clear to me, maybe I am doing things wrong there
            <k-writer class="alinea"
              ref="alinea"
              :inline="true"
              :value="content.alinea"
              :placeholder="alineaField.placeholder"
              @input="update({ alinea: $event })"
            />

My complete blueprint for the Block is this:
(so I am using more than one field)

name: field.blocks.cafetekst.name
icon: document
preview: cafetekst
wysiwyg: true
fields:
  titel:
    label: Titelkop
    type: text
    placeholder: titel 
  subtitel:
    label: Subtitel
    type: text
    placeholder: subtitel 
  alinea:
    label: Tekst
    type: writer
    marks: true
    placeholder: tekst 
  image:
    label: Foto
    type: files
    layout: list
    max: 1

Could you suggest the best approach for me?

Also: Thanks a lot for the quick reactions, it’s getting more and more clear to me.
René

9

If you set inline to true here in the preview, that removes p tags. Maybe that is already the whole issue.

But as I wrote above, a writer field is not made for Kirbytags. There might be cases where they work and cases where they don’t work.

10

That was a journey!
It is solved.

I set
:inline="false" like you suggested. Thanks!

But also:
I first pasted the existing text directly into a newly created block: no change.
Then I pasted the text via my editor to remove all the markup: It worked!

So, when I copied the old text the first time I was not aware that all the markup was also copied and pasted into the new block with all the <br> still in there.

Now I know.

Thank you so much for your help in solving this. Also I will read more on the markup block although it seems I couldn’t use it here, because of the other fields.

Thanks!
René

11

You could simply replace the writer field in your custom block with a textarea field. This would make sense when you keep running into issues with the writer field. Probably depends on the types of Kirbytags you want to use.

12

Thanks!
I have now changed every writer field in my different types of blocks.
But I have another problem, this time with the edit-sidebar.

Should I now also change
<k-writer .. /> definitions in the index.js of the block plugin
into:
<k-textarea-field ... /> ?
Because on the Panel, the side editor reacts strange:
I cannot edit without the cursor jumping to the last character.

edit:
<k-text > maybe.

13

This is the preview for the textarea field in the markdown block: kirby/Markdown.vue at main · getkirby/kirby · GitHub, it uses k-input.

14

Thank you soo much!
I have used the type: textarea and <k-input ..> combination.
And so far it looks to work very good! I’m relieved.

I have been struggling with this for some time now. I also now know why I used the writer field: I followed the example from the block-factory as I mentioned above. And there were only text fields with type: writer in there.

And thank you for the link to the source code, now I have a better understanding how to get examples of use. I would never been able to find that by myself.

Thanks again!
René