Skip to content

3.6-rc.1 ⚡

Release preview

We started working on Kirby 3.6 in April and we are finally about to release it very soon.

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 wanted 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 were things in our architecture that could have been better, simpler – more aligned with Kirby's philosophy.

With 3.6, we get rid of the bad parts and move forward with fantastic new parts. 3.6 is the door opener for all your feature requests that are currently blocked. It is the foundation for the coming years and we couldn't be more proud of it.

We are now in the final phase before the release. Jump on board and help us test 3.6-rc.1

We hope you'll enjoy it!

– The Kirby team

  • alpha

    July 2nd

  • beta

    September 21st

  • launch

    October

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-rc.1

Total: 694.98 KB

vendor.js:
385.04 KB KB
app.js:
309.94 KB KB
-113.38 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' => function () {
      return [
        'label' => 'Todos',
        'icon'  => 'check',
        'menu'  => true
        '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.

  • Copy & paste for blocks →

    With 3.6, you can now copy and paste blocks between block and layout fields and even import blocks from HTML or text. This lifts the blocks field on an entirely new level in terms of usability.

  • New formats for the writer field →

    Enable headings and list block formats for your writer fields and simplify WYSIWYG editing for your users.

  • New icons →

    Select from 48 brand new icons. Improve your fields, plugins and more with recognizable visuals.

  • 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.

  • It’s all in the details →

    An improved duplicate dialog, a new email dialog for writer fields, customizable navigation options, a customizable favicon and more. We’ve improved tons of smaller Panel details in this release.

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([
  '400vw'  => ['width' => 400, 'format' => 'webp'],
  '800vw'  => ['width' => 800, 'format' => 'webp']
  '1200vw' => ['width' => 1200, 'format' => 'webp']
])

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%);"

There’s more …

This release is packed with features

Find out more about each of them in our early 3.6 docs

Get involved