Skip to content

3.6-alpha.3 ⚡

Release preview

We started working on Kirby 3.6 in April and want to take you with us on our journey from now on.

This release is maybe the most important one since 3.0. The v3 foundation is still holding up and we see endless possibilities to extend it and keep it growing. But we also want to make sure that we don't carry along old baggage. We've learned a ton from all the projects you build and the plugins you develop, and there are things in our architecture that could be better, simpler – more aligned with Kirby's philosophy.

With 3.6, we want to get rid of the bad parts and move forward with some fantastic new parts. 3.6 is the door opener for all your feature requests that are currently blocked. We don't want to think about Kirby 4 right now. We want to make Kirby 3 even more awesome and more stable – for years to come.

We are taking some bigger steps with this release that introduce breaking changes. That's why we want you to have full insight in our roadmap, in the state of the alpha and beta and hear your feedback as early as possible.

We hope you'll enjoy the alpha!

– The Kirby team

  • alpha

    July 2nd

  • beta

    Late July

  • test phase

    August

  • launch

    September

Fiber

Our architecture for the future

We’ve spent the last months working on a brand new backend architecture for the Panel. Moving from a single page application to a more traditional approach with a simplified server-rendered backend. The new architecture is inspired by Inertia.js and simplifies our Panel and Panel plugins in ways that we’ve never dreamed of. Learn more ›

Panel view definition in PHP
[
  'pattern' => 'todos',
  'action'  => function () {
    return [
      'component' => 'k-todo-view',
      'props' => [
        'title' => 'Todos',
        'todos' => [
          'Buy milk',
          'Try Kirby 3.6'
        ]
      ]
    ]
  }
]

View component in Vue.js
<template>
  <k-header>{{ title }}</k-header>
  <ul>
    <li v-for="(todo, index) in todos" :key="index">
      {{ todo }}
    </li>
  </ul>
</template>

<script>
export default {
  props: {
    title: String,
    todos: Array
  }
}
</script>
  • Drastically reduced bundle size

    With the move to Fiber, we massively reduce the complexity and bundle size of the Panel. We shaved off more than 100kb of uncompressed JavaScript and will likely manage to shave off even more. 🤯

  • Super simple plugins

    Panel plugins were already extremely powerful, but quite complex to build. With the new backend architecture, we handle many tasks on the server. Building views, dialogs and more is therefore far easier now. No need to be a Vue.js expert anymore.

  • Better performance

    With the smaller bundle size and fewer requests, the Panel becomes more performant for everyone, and will stay fast and lean even with a growing number of features and plugins. New views and dialogs no longer add to the bundle size. It’s the JS diet we’ve been looking for.

  • Future proof

    The new architecture paves the way for many fantastic features that have not been possible before.

3.5.7

Total: 808.36 KB

vendor.js:
457.04 KB
app.js:
351.32 KB

3.6-alpha

Total: 695.61 KB

vendor.js:
379.32 KB
index.js:
316.29 KB
-112.75 KB
less JS

Panel areas

The plugin API you’ve been dreaming of

Our new Fiber architecture splits the Panel in areas: site area, users area, settings area, etc. You can create your own areas and build entire applications on top of the Panel. Learn more ›

Kirby::plugin('yourname/todos', [
  'areas' => [
    'todos' => [
      'label' => 'Todos',
      'icon'  => 'check',
      'menu' => true
      'link' => 'todos',
      'dialogs' => [
        'todos/create' => [
          'load' => function () { ... },
          'submit' => function () { ... }
        ]
      ],
      'views' => [
        [
          'pattern' => 'todos',
          'action' => function () { ... }
        ]
      ]
    ]
  ]
]);
  • Custom routes

    Building custom views with your own routes is now as simple as routing for your Kirby site. Define props for your view components and don't worry about API endpoints, state management or any other complex stuff. Just start building.

  • Your own dialogs in seconds

    Dialogs can now also be defined in PHP and opened with a simple JS call $dialog("my-dialog"). Create form dialogs, text dialogs or confirmation dialogs to delete entries. It’s so much fun.

  • Access control made simple

    You want your own permissions for your shiny new Panel area? No problem. It’s automatically handled for you. Deny access for individual roles and the Panel will lock users out that are not allowed in.

  • No more API endpoint hassle

    With Fiber, you return exactly the kind of data you need for your Panel components. No more multiple API calls or custom API routes. Write some PHP and be done.

Panel UI

More customizable than ever

Of course this release is not just about Fiber. We’ve refactored our Panel CSS and started building new layout types to give you even more control.

A screenshot of the new cardlets layout

sections:
  notes:
    type: pages
    template: note
    layout: cardlets
  • New cardlets →

    They are finally here! We showed them off more than a year ago and now their time has come. Cardlets can be used everywhere instead of lists or cards. They are the perfect mixture between visual and text content.

  • CSS variables →

    Every little detail of the Panel is now defined as a CSS variable. What’s great about that? You can overwrite our variables in your panel.css. Custom Panel themes just got so much easier.

WebP & AVIF Support

Serve smaller and better images

Our image processing API finally supports WebP and AVIF as better alternatives for your JPEGs or PNGs. Learn more ›

$image->thumb(['width' => 200, 'format' => 'webp']);

$image->srcset([
  ['width' => 200, 'format' => 'avif'],
  ['width' => 200, 'format' => 'webp'],
  ['width' => 200, 'format' => 'jpg']
]);

Better Panel image settings

Improve your previews with custom queries

You can now set custom backgrounds, icons, images and more for your pages via blueprint settings. Learn more ›

image:
  back: "{{ page.panelBack }}"

# or

image:
  back: "linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 35%, rgba(0,212,255,1) 100%);"

We are not done yet

Help us shape the rest of this release

We are looking for your feedback, your ideas and your magic testing skills :)

Get involved