🚀 A new era: Kirby 4 Get to know
Skip to content

Panel improvements

Dialogs for fields

Fields can now define their own dialogs on the backend:

  • Fields with array definition:
    return [
      'props' => [
        // ...
      'dialogs' => function () {
        return [
            'pattern' => 'delete',
            'load' => function () {},
            'submit' => function () {},

  • Field classes:
    class MyField extends FieldClass
      public function dialogs(): array
        return [
            'pattern' => 'delete',
            'load' => function () {},
            'submit' => function () {},

The route patterns for field dialogs are automatically prefixed with the following scheme:


Here's an example:


In a field component, the dialog can be opened by using the field endpoint:

this.$dialog(this.endpoints.field + "/delete")

Customization of the layout selector

The layout selector is now customizable with the size (small, medium, large, huge) and columns options via the new selector prop:

  type: layout
    # `small`, `medium`, `large` or `huge`
    size: huge
    columns: 6

More improvements

  • Disabled buttons can receive focus (tab) which allows them to be read out by screenreaders.
  • Structure fields don’t disregard content changes anymore when clicking outside the form (now drawer).
  • Correct autofocus handling for blocks, layout, structure, picker fields and dropdowns
  • Improved focus styles for links and the flag preview in tables
  • All minified panel assets now add .min to the filename. This will avoid auto-minification in Cloudflare and possibly other environments.
  • Improved text overflow behavior for links in tables
  • Increase the font size for help text in sections and fields
  • The multiselect and tag dropdowns now offer more space to not cut off longer options.
  • Slug field: respect custom slug allowlist from the Str class
  • Pages section: new templatesIgnore option #5322
  • Users field: set default: true to always use the currently logged in user as default
  • New items size full

New Icons

We've added new icons to our Panel iconset: anchor, clear, lab, merge and split.

New Components

  • <k-alpha-input>
  • <k-browser>
  • <k-code>
  • <k-color-frame>
  • <k-coloroptions-input>
  • <k-colorname-input>
  • <k-dialog-body>
  • <k-dialog-box>
  • <k-dialog-buttons>
  • <k-dialog-fields>
  • <k-dialog-footer>
  • <k-dialog-form>
  • <k-dialog-notification>
  • <k-dialog-search>
  • <k-dialog-text>
  • <k-drawer-body>
  • <k-drawer-fields>
  • <k-drawer-header>
  • <k-drawer-notification>
  • <k-drawer-tabs>
  • <k-file-browser>
  • <k-frame>, <k-icon-frame> and <k-image-frame>
  • <k-hue-input>
  • <k-navigate>
  • <k-notification>
  • <k-page-tree>
  • <k-search-input>
  • <k-stat>
  • <k-text-drawer>
  • <k-tree>

New helpers

  • $helper.focus(element)
  • $helper.object.length(object)
  • $helper.string.isEmpty(string)
  • $helper.url.base
  • $helper.url.buildQuery
  • $helper.url.buildUrl
  • $helper.url.isAbsolute
  • $helper.url.isSameOrigin
  • $helper.url.isUrl
  • $helper.url.makeAbsolute
  • $helper.url.toObject
  • $library.colors

New JS error classes

  • RequestError
  • JsonRequestError

And so much more

We've tweaked the Panel extensively with too many improvements to name them all. But here are some more:

  • Load Panel area views dynamically with the new when prop
  • Each Panel area can now define additional requests for simple data endpoints or actions
  • Syntax highlighting in the k-code with Prism
  • Text fields: new font: monospace option
  • panel.css and panel.js config options now also support arrays with multiple entries as well as absolute URLs
  • k-pagination can always be navigated by keys (no extra prop needed anymore)
  • Notifications: support for custom icons
  • k-tag supports an image/icon frame
  • New disabled property for the k-options-dropdown component
  • New selected property for k-button to set the aria-selected attribute