Eine klitzekleine Kleinigkeit, die ich mir bei Kirby 4 noch gewünscht hätte, wäre ein Hook um neue Buttons in die Buttonbar auf der Seite-Bearbeiten-Seite einfügen zu können. Ich hab mir nämlich schon vor Jahren mal ein Plugin geschrieben, dass einen "Save & Publish"-Knopf bereitstellt. Für alle, die Kirby als Blog benutzen ist das eine wichtige Sache, denn niemand klickt gerne "Save" um dann auch noch auf den Status-Chooser zu gehen um dort "Published" auszuwählen. Das sind mindestens drei oder vierhundert Klicks zu viel. Im Jahr.

Bisher war das Plugin allerdings ein Feld, das man im Blueprint irgendwo hingepackt hat, viel besser wäre es doch einfach wenn es sich neben dem normalen Speichern-Button befinden würde.

Leider ist das nicht möglich. Gestern hat der Kirby-Mastodon-Account dieses language-selector-Plugin erwähnt und ich hatte schon Hoffnung, etwas übersehen zu haben, doch das Plugin überschreibt einfach eine Komponente und injiziert damit seine Funktionalität. Smart, aber für meinen Button nicht zu gebrauchen, ich will ja nicht den language-selector durch meinen Button ersetzen.

Naja. Ich dachte also nochmal zehn Minuten darüber nach, wie man das kurz und schmerzlos reinklöppeln könnte und kam zu der folgenden, leicht schmutzigen, aber gut funktionierenden Lösung, indem ich meinen Button einfach ins DOM klöppel. Alle nötigen Funktionen zum Status ändern und Speichern sind durch window.panel zum Glück einfach global verfügbar. Vielen Dank!

window.onload = () => {
    const buttons = document.querySelector('.k-header-buttons .k-button-group');

    const template = `
        <button 
            data-has-icon="true" 
            data-has-text="true" 
            data-responsive="true" 
            data-size="sm" 
            data-theme="positive" 
            data-variant="filled" 
            type="button" 
            class="k-button k-page-view-status k-status-icon" 
            style="--icon-size: 15px;"
           >
            <span class="k-button-icon">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="k-icon" style="fill: black !important;"><path d="M9 7.53861L15 21.5386L18.6594 13H23V11H17.3406L15 16.4614L9 2.46143L5.3406 11H1V13H6.6594L9 7.53861Z"></path></svg>
            </span>
            <span class="k-button-text"> Save & Publish </span>
          </button>
    `

    const button = document.createElement('button');
    button.innerHTML = template;

    button.addEventListener('click', async () => {
        await panel.$vue.$store.dispatch("content/save");
        panel.$vue.$events.emit("model.update");
        panel.notification.success();

        await panel.$api.pages.changeStatus(panel.$view.path.replace('pages/', ''), 'listed', 0)
        panel.$vue.$reload({ silent: true });
    });

    buttons.appendChild(button);
}

Das landet einfach in der index.js in einem Plugin, ganz ohne Build-Prozess und schwupps:

(Wär natürlich jetzt noch schön, wenn er nur angezeigt werden würde, wenn der State dirty ist, das geht sicher auch, wenn ich auf ein paar Events höre, aber meine 10 Minuten für Quatsch sind heute aufgebraucht)

Update: Ich hab es doch mal auf Github gepackt (und noch einen Bug gefixt)