getkirby / kirby

Kirby's core application folder
https://getkirby.com
Other
1.27k stars 167 forks source link

Turn off WYSIWYG editing for the quote block #4852

Closed MoritzLost closed 1 year ago

MoritzLost commented 1 year ago

Description

I'm trying to modify the core quote block. In particular, I want to allow only plaintext instead of formatted text for the text and citation fields. So I've copied over the blueprint from the core (config/block/quote/quote.yml) to my own blueprints directory (blueprints/blocks/quote.yml) and modified it to fit my needs:

name: field.blocks.quote.name
icon: quote
wysiwyg: false
preview: quote
fields:
  text:
    label: field.blocks.quote.text.label
    placeholder: field.blocks.quote.text.placeholder
    type: textarea
    buttons: false
    icon: quote
  citation:
    label: field.blocks.quote.citation.label
    placeholder: field.blocks.quote.citation.placeholder
    type: text
    icon: user

Now the fields that are displayed in the modal window use those settings correctly. But the preview still show the HTML formatting toolbar when I select text in the preview (see screenshots below). This also causes further problem – in the modal, I can see the <p> tags generated by the preview. When I try to delete them, the preview editor insert &lt; once I delete the /p> from the modal editor and so on.

quote-modal

quote-preview

Expected behavior

I would expect the preview to use the same settings defined for the text and citation fields. So if I set those to text fields, the preview should not show a writer interface.

Alternatively, I thought the wysiqyg option would turn off the formatting toolbar. But as far as I can change, setting that option to false has absolutely no effect. Does that option do anything at all?

I also tried to keep the two fields as writer fields, but disable all nodes and marks to only allow plain text in the preview:

    type: writer
    nodes: false
    marks: false

For some reason, this gets rid of all the inline formatting options (strong, italic, etc) but still shows the nodes dropdown:

quote-nodes-marks-disabled

To reproduce

  1. Copy the full quote blueprint included above to blueprints/blocks/quote.yml.
  2. Open an entry with a blocks field that includes this quote block and try to edit it in both the modal window and the preview.

Kirby Version

3.8.1.1

Additional context

Besides not being able to fully customize this behaviour, I would argue that the current default is pretty unusable. It will never make sense to have an h1 inside a quote block, but the default happily allows this.

texnixe commented 1 year ago

Well, this is not really a bug. The preview is implemented so that it fits the settings in the quote yaml. Since the writer field is set to inline and inline also means that there are no nodes, there is no additional check for the node property.

Likewise, the preview cannot fit a textare field, because a textarea doesn't have a nodes or marks property. So when you change the blueprint, you very often also have to change the preview to make it fit your choice of fields and settings.

MoritzLost commented 1 year ago

@texnixe Thanks for the explanation! A couple of follow-up questions:

Since the writer field is set to inline and inline also means that there are no nodes, there is no additional check for the node property.

Since it's set to inline, why am I seeing the dropdown with the paragraph/heading/list options in my example? Maybe I've messed something up with my testing. If I remove my custom quote.yml blueprint and create a new page, I'm only seeing the marks options. Is there some scenario where the writer field shows the dropdown with the nodes options, even if nodes is set to false? For instance, if the text already contains a <p> tag?


Alternatively, I thought the wysiqyg option would turn off the formatting toolbar. But as far as I can change, setting that option to false has absolutely no effect. Does that option do anything at all?

What is the wysiwyg option supposed to do, then? I can see absolutely no difference in behaviour between having this option set to true and false. Is this option used at all?


On a broader note, but wouldn't it make sense to make the built-in preview templates a bit more flexible? Arguably, creating a new Vue template is a larger hurdle than just overwriting a template. Arguably, the preview field should respect the blueprint settings as much as possible.

texnixe commented 1 year ago

@MoritzLost

Since it's set to inline, why am I seeing the dropdown with the paragraph/heading/list options in my example

Because in your yaml, you did not set the writer field to inline, but the default quote block has it set to inline. So the preview checks the inline property, but not the nodes property.

What is the wysiwyg option supposed to do, then?

Have a look at the image block. It opens the drawer automatically, when you add a new block. When you set wysiwyg to true on that block type, the drawer is not opened.

On a broader note, but wouldn't it make sense to make the built-in preview templates a bit more flexible?

That's not as easy as it sounds. For the quote block in particular or maybe other small changes, that might work, because it could respect the nodes property. But if you use different field types or add fields etc, a custom preview usually makes sense. In any case, for feature requests, please post in our https://feedback.getkirby.com channel.

I'm therefore closing this here.

MoritzLost commented 1 year ago

@texnixe Thank for the explanation!

Have a look at the image block. It opens the drawer automatically, when you add a new block. When you set wysiwyg to true on that block type, the drawer is not opened.

Thanks, that makes sense. Is that property documented anywhere? I haven't found any mention of it either in the guide or in the docs. The reference for creating custom blocks has a section on WYSIWYG editing, but that has nothing to do with the wysiwyg setting, hence my confusion.