Kirby 4

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:

dialogs/$modelPath/fields/$fieldName/$pattern

Here's an example:

dialogs/pages/blog/fields/blocks/delete

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:

layout:
  type: layout
  layouts:
    ...
  selector:
    # `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

Core

• Throw proper errors when thumbnails cannot be generated 
• Removed config/blueprints directory with dead block blueprints and moved default blueprints for site, page and file to in-code arrays in Kirby\Cms\Core::blueprints()
• Removed Kirby\Toolkit\Properties trait from Kirby\Api\Api, Kirby\Cms\Api, Kirby\Email\Email,  Kirby\Email\Body, Kirby\Cms\Auth\Status, Kirby\Cms\App, Kirby\Cms\ContentTranslation, Kirby\Cms\ModelWithContent, Kirby\Toolkit\Pagination , Kirby\Http\Uri , Kirby\Cms\FileVersion, Kirby\Filesystem\Asset, Kirby\Filesystem\File, Kirby\Image\Image classes and Kirby\Filesystem\IsFile trait
• Kirby\Cms\Language, Kirby\Cms\Plugin, Kirby\Cms\Role and Kirby\Cms\StructureObject don't extend Kirby\Cms\Model (and thus also don't use the Kirby\Toolkit\Properties trait) anymore
• Kirby\Cms\Structure extends Kirby\Cms\Items and Kirby\Cms\StructureObject extends Kirby\Cms\Item
• New Content namespace
  • Moved the Content, ContentTranslation and Field classes into the new namespace (compatibility aliases are provided for now)
  • New internal ContentStorage class that currently holds more of the storage related business logic
  • New internal ContentStorageHandler interface and internal PlainTextContentStorageHandler class to bundle all low-level content logic in one place
• Whoops is now generally disabled during PHPUnit test runs to reduce memory usage during tests

Panel

• More frontend unit tests
• Cleaned up k-toolbar component
• New drawer component structure:

  <k-overlay type="drawer">
    <form class="k-drawer" method="dialog">
      <k-drawer-notification />
      <k-drawer-header />
      <k-drawer-body>
        <k-drawer-fields />
      </k-drawer-body>
    </form>
  </k-overlay>

• Portals: Dialogs, Drawers and other Overlays are now separated into different portals. This is done by setting the overlay type:
  • <k-overlay type="dialog">
  • <k-overlay type="drawer">
  • <k-overlay>
    An overlay without a type will use the default overlay portal. Separating them into different portals gives us more control over z-index and layering of elements.
• Removed v-model from k-form and k-fieldset
• Removed $listeners usage from k-draggable, k-button and subcomponents, k-link, k-headline, k-form, k-block, k-block-title, k-box, k-image, k-content-item
• Made k-bubble more flexible
• Use the Vue object syntax for dynamic :style attributes to enhance the robustness and security
• Reduce JS forEach usage

Core

• Files in a plugin's assets directory are now always assumed to be public, independent of their file extension. If your plugin needs to store other files in the assets directory, please use the new assets extension to explicitly define the public assets.
• Passing a single space as value to Xml::attr() (with the intention to generate an attribute with an empty value) has been deprecated in favor of passing an empty string.
• Kirby\Cms\Model: Use Kirby\Cms\ModelWithContent instead
• Kirby\Email\Email::clone() and Kirby\Email\Body::clone()
• Page::isReadable(): Use Page::isAccessible() instead
• The name query should not be used for custom API endpoints anymore, it will be used for the Kirby QL (KQL) plugin/core implementation
• Internal $model->contentFile(), $model->contentFiles(), $model->contentFileDirectory(), $model->contentFileExtension() and $model->contentFileName() methods have been deprecated and will be removed in v5.

Panel

• Custom icons using a 16x16 viewbox have been deprecated. In an upcoming version, Kirby will only support custom icons with a 24x24 viewbox by default. If you want to continue using icons with a different viewport, please wrap them in an <svg> element with the corresponding viewBox attribute.
• Icons circle-outline, heart-outline and star-outline: Use circle, heart and star instead
• this.$events: Use this.$panel.events instead
• this.$panel.events.$on: Use this.$panel.events.on instead
• this.$panel.events.$off: Use this.$panel.events.off instead
• this.$panel.events.$emit: Use this.$panel.events.emit instead
• this.$store.dispatch("isLoading"): Use this.$panel.isLoading instead
• this.$translation: Use this.$panel.translation instead
• this.$store.dispatch("dialog"): Use this.$panel.dialog.open and this.$panel.dialog.close instead
• this.$store.dispatch("drag", drag): Use this.$panel.drag = drag instead
• k-dropdown: Use k-dropdown-content as standalone instead
• k-calendar was renamed to k-calendar-input; k-calendar is still available but only as deprecated alias.

Core

• Kirby 4 requires at least PHP 8.1 and supports up to PHP 8.3.
• When impersonating the almighty kirby user, any permission check will succeed even if permission has been disabled for regular admins.
• The twitter icon, KirbyTag and helper have been removed. Use the legacy plugin if you still rely on these: legacy-twitter.zip
• We have added more native PHP type hints throughout the system. When extending core classes, this might require you to update your method to include those type hints as well.
• Users field doesn't automatically use the current user as default, add default: true to keep this functionality.
• When thumb generation fails, the image API now throws an error and no longer loads the original image.
• Files: manipulate is now a core method and focus a reserved field by the core. These names are no longer available for custom file methods. Previous content fields with these names can only be accessed via e.g. $file->content()->get('manipulate').
• I18n::translate(): If $fallback is an array and neither the array $key nor the array $fallback have a matching entry for the locale, the first element of the $key array will now be returned (not anymore the one from $fallback). If $fallback is a string, it will be considered with priority over both of these.
• If overwriting the hidden field, it must return 'hidden' => true now.
• Removed deprecated DS constant. Use / instead.
• When sanitizing DOM objects (e.g. in the writer field, but not during the sanitization/validation of uploaded files), host-relative URLs that point outside the site root are now allowed as the use of the HTML <base> element is assumed for sites in a subfolder. To revert to the old, strict behavior, set Sane's allowHostRelativeUrls option to false.
• Renamed parameter of ::group() method of all collection classes to $caseInsensitive
• Errors are no longer hidden when a Response is converted to a string.
• The $translations->start() and $translations->stop() methods were no longer in use and have been removed. Content files are automatically converted by the Language class.
• $languages->codes() now returns ['default'] for single language installations.
• Kirby\Panel\Assets::custom() now returns an array.
• Kirby\Uuid\Uuid is now an abstract class, child classes need to implement the id method.
• Kirby\Uuid\Uuid::key() can now also return null if the new $generate parameter isn't passed as true and no UUID has yet been generated for the model.
• Kirby\Cms\ModelWithContent doesn't extend Kirby\Cms\Model anymore.
• Removed the ::clone() method from Kirby\Cms\Auth\Status, Kirby\Http\Uri, Kirby\Cms\FileVersion, Kirby\Filesystem\Asset, Kirby\Filesystem\File, Kirby\Image\Image, Kirby\Cms\Plugin, Kirby\Cms\Role, Kirby\Cms\StructureObject and Kirby\Cms\ContentTranslation classes
• Removed the ::hardcopy() method from Kirby\Api\Api, Kirby\Cms\Api,Kirby\Email\Email, Kirby\Email\Body, Kirby\Cms\Auth\Status, Kirby\Toolkit\Pagination, Kirby\Http\Uri, Kirby\Cms\FileVersion, Kirby\Filesystem\Asset, Kirby\Filesystem\File, Kirby\Image\Image, Kirby\Cms\Role, Kirby\Cms\StructureObject and Kirby\Cms\ContentTranslation classes
• Removed ::site() method from Kirby\Cms\Plugin, Kirby\Cms\Role and Kirby\Cms\StructureObject classes
• Removed ::kirby() method from Kirby\Cms\Role and Kirby\Cms\StructureObject classes
• Unauthenticated API and Panel calls now return a correct 401 HTTP code instead of 403.
• Registering a default block model now needs to be done with the key default, not Kirby\Cms\Block.
• new Kirby\Cms\Structure()/new Kirby\Cms\StructureObject() don't work anymore as before. Use Kirby\Cms\Structure::factory()/Kirby\Cms\StructureObject::factory() instead.
• Kirby\Cms\Items::factory() and all inheriting classes throw an exception now if malformed data is passed.
• Extending the internal $model->contentFile(), $model->contentFiles(), $model->contentFileDirectory(), $model->contentFileExtension(), $model->contentFileName(), $model->readContent() and $model->writeContent() methods in a page model will no longer have an effect as these methods are no longer called by the core. Please extend the new Kirby\Content\PlainTextContentStorageHandler class instead and return an instance of your custom class from $model->storage(). Please note that the interface of PlainTextContentStorageHandler is internal and may change in the future.
• New $isExternal argument for the Kirby\Sane\Handler::sanitize() and Kirby\Sane\Handler::validate() methods that custom Sane handlers need to implement; it allows to differentiate between strings from external files that may be accessed directly and strings that will end up directly on the page.

Panel

• Blocks: Removed keyboard shortcut to move block focus up/down
• Removed road-sign icon
• The icons circle, heart and star are now named circle-filled, heart-filled and star-filled.
• Removed this.$config.search from Panel
• Area search plugins receive two additional arguments for their query callback: $limit and $page to be used to paginate the results. They should then return an array with entries results and pagination. #5191
• <k-header> doesn't include tabs anymore by default. Use <k-tabs> separately.
• Defining the footer slot in <k-dialog> will no longer wrap the slot content in the <footer> element. This can now be more flexibly handled by using <k-dialog-footer> inside the slot.
• The form drawer no longer automatically closes on submit. This is introducing the same behaviour as in dialogs. Auto-closing might often not be the intended result of submitting the form and it's easier to close it manually in a submit handler than to re-open it again.
• this.$store.state.isLoading is no longer available. You can now use window.panel.isLoading or this.$panel.isLoading in Vue components to access the current loading state.
• this.$store.state.dialog is no longer available. Use this.$panel.dialog instead.
• Removed this.$store.state.drag, use window.panel.drag/this.$panel.drag instead.
• <k-button> , <k-link>, <k-headline> and <k-content-item> only emit the click event. For other native events, use the .native event listener modifier.
• Native events (e.g. click, dbclick) need the .native modifier now when used on <k-block> and <k-block-title>
• Need to use .native modifier for all previous event listeners on <k-box and <k-image>
• <k-pagination> doesn't support setting custom labels/titles via nextLabel, prevLabel or pageLabel
• <k-range was removed and replaced by <k-alpha-range> and <k-hue-range>.
• <k-choice> has been removed. Use <k-choice-input> instead.
• The unused theme prop has been removed from <k-choice-input>.

Removed deprecated code

• The Kirby\Form\Options, Kirby\Form\OptionsApi and Kirby\Form\OptionsQuery classes have been removed. Use Kirby\Option\Options, Kirby\Option\OptionsApi or Kirby\Option\OptionsQuery instead.
• The Kirby\Toolkit\Query class has been removed. Use Kirby\Query\Query instead.
• Passing the $slot or $slots variables to snippets was deprecated and support has now finally been removed.
• Passing an empty string as value to Xml::attr() (deprecated in Kirby 3.9) no longer omits the attribute but generates an attribute with an empty value.