Is there a way to change and limit the headings in the textarea field? I want the user to be able to use headlines from <3> to <6> only. I’ve seen this question asked before in 2021, but am wondering if there have been updates that allow this in the recent version of Kirby, without relying on plugins. Or, if there are any more recent plugins compatible with V4.
To make only certain levels such as h3 to h6 available for selection in the heading block (i.e., in blocks/heading), you can customize the block blueprint yourself:
Create a file under: /site/blueprints/blocks/heading.yml
name: Heading
fields:
level:
label: Level
type: select
width: 1/4
options:
h3: Heading 3
h4: Heading 4
h5: Heading 5
h6: Heading 6
text:
label: Text
type: text
width: 3/4
This overwrites the default heading block and effectively limits the selectable levels in the panel to h3–h6. This adjustment affects all heading blocks in the panel. This restriction only applies to the heading block type, not to the classic Blueprint field type: headline.
In a textarea field, you can only allow headings in general without an option to to disable certain levels.
Workarounds:
- Custom textarea buttons for headings: Textarea buttons | Kirby CMS
- Use the markdown field instead, where this option exists: GitHub - fabianmichael/kirby-markdown-field: Super-sophisticated markdown editor for Kirby 3, community built.
Thank you for your reply! I’m trying to use the markdown field you suggested, but I’m running into an issue: even though I try to limit the headings available, it doesn’t seem to actually do anything. I went into src/components/buttons/Headlines.js, and modified the following code to only show h3:
`get defaults() { return { levels: ["h3"]};}`
But when I go into the markdown field in the panel, it still shows the default H1, H2, and H3 as options. I also tried deleting them entirely from dropdownItems, but that also had no effect:
dropdownItems() {
return [
{
name: "h3",
icon: "h3",
label:
this.input.$t("markdown.toolbar.button.heading.3") +
this.formatKeyName(
{ mac: "Ctrl-Alt-3", key: "Alt-Shift-3" },
"<kbd>",
"</kbd>"
),
command: () => this.editor.toggleBlockFormat("ATXHeading3"),
token: "ATXHeading3",
tokenType: "block"
},
{
name: "h4",
icon: "h4",
label:
this.input.$t("markdown.toolbar.button.heading.4") +
this.formatKeyName(
{ mac: "Ctrl-Alt-4", key: "Alt-Shift-4" },
"<kbd>",
"</kbd>"
),
command: () => this.editor.toggleBlockFormat("ATXHeading4"),
token: "ATXHeading4",
tokenType: "block"
},
{
name: "h5",
icon: "h5",
label:
this.input.$t("markdown.toolbar.button.heading.5") +
this.formatKeyName(
{ mac: "Ctrl-Alt-5", key: "Alt-Shift-5" },
"<kbd>",
"</kbd>"
),
command: () => this.editor.toggleBlockFormat("ATXHeading5"),
token: "ATXHeading5",
tokenType: "block"
},
{
name: "h6",
icon: "h6",
label:
this.input.$t("markdown.toolbar.button.heading.6") +
this.formatKeyName(
{ mac: "Ctrl-Alt-6", key: "Alt-Shift-6" },
"<kbd>",
"</kbd>"
),
command: () => this.editor.toggleBlockFormat("ATXHeading6"),
token: "ATXHeading6",
tokenType: "block"
}
];
}
Am I not modifying the right area of code?
Never touch the source code. See the documentation of the plugin how to do this in the blueprint
Ahh, I see! I misunderstood the plugin’s read.me and was overcomplicating things. For anyone else who might’ve run into the same problem, I just needed to modify the yml itself:
fields:
Bio:
label: Bio
type: markdown
font: sans-serif
buttons:
headlines:
- h6
Oh, actually — I’ve been noticed that sometimes I get this error at the top of my page, even though now I’ve reverted the plugin to its original state, without any modifications:
Deprecated: {closure:/Users/…/site/plugins/markdown-field/fields/markdown.php:42}(): Implicitly marking parameter $font as nullable is deprecated, the explicit nullable type must be used instead in /Users/…/site/plugins/markdown-field/fields/markdown.php on line 42
Anyone know why this might be happening and what the solution could be?