Wie wir ACF Blocks mit Handlebars Templating einsetzen

Raphael_1024
Raphael Hüni
DSC00931

Mittels Handlebars Templating trennen wir Logik sauber vom Inhalt. Auf diese Weise können wir übersichtliche, einfache und performante Templates für WordPress Editor Blocks erstellen, welche je nach Anwendugskontext server- oder clientseitig gerendert werden.

Einführung

Warum und wie wir in unserem Gutenbase Core auf das Advanced Custom Fields Pro Plugin setzen, haben wir bereits in einem früheren Blogbeitrag berichtet.

Die Verwendung von Handlebars als Templatesprache erlaubt uns eine saubere Trennung von Logik und Inhalt. Dies ermöglicht es uns einfache und klar verständliche Vorlagen zu schreiben, welche sich auch einfach von Projekt zu Projekt portieren lassen. Hier das Beispiel eines Galerie Blocks, der diverse Layout Optionen anbietet sowie allenfalls auch ein Fancybox Overlay unterstützt.

<section{{{ct-init}}} class="{{ct-classes}}" role="group">
  <div class="row">
    {{#each items}}
      <div class="{{../layout}}">
        <figure class="item" role="group">
          {{#if ../fancybox}}<a href="{{{display.images.full}}}" data-src="#{{{../galleryid}}}-{{id}}" data-fancybox="{{../galleryid}}">{{/if}}
          {{#if ../ct-admin}}
            {{{display.tags.adminpicture}}}
          {{else}}
            {{{display.tags.picture}}}
          {{/if}}
          {{#if download}}
            <a class="dl" href="{{download}}" target="_blank" download>{{{ct-fontawesome "fa-solid fa-download"}}}</a>
          {{/if}}
          {{#if ../fancybox}}</a>{{/if}}
          {{#if ../fancybox}}
            <div class="ct_gallery_overlay" id="{{{../galleryid}}}-{{id}}">
              {{{overlay.tags.picture}}}
            </div>
          {{/if}}
        </figure>
      </div>
    {{/each}}
  </div>
</section>

Um dies zu ermöglichen stehen uns eine Vielzahl von Helferfunktionen zur Verfügung. In der Render Funktion des Blockes sammeln wir sämtliche per ACF definierten Felder sowie einige der Standard Gutenberg Blockeigenschaften (z. B. optional definierbare Block-ID’s oder Klassen) in einem Array. Dieses wird auf Block sowie Template Ebene gefiltert und erlaubt es uns so die Daten konkret, wie wir sie benötigen aufzubereiten. Diese Ergänzungen reichen von simpel, wie im obigen Beispiel die galleryid, bis zu der Generierung unserer Bilder. Die galleryid ist nichts weiteres als ein Präfix und die PHP Funktion uniqid(). Bei den Bildern hingegen, gehen wir von einer einfachen Bild-ID aus und generieren diverse HTML Elemente (so unterscheidet sich z. B. das benötigte Element im Editor/Backend von jenem im Frontend), die weiter unser voll responsives Bildhandling unterstützen. Unser hochperfomanter Handlebars Compiler rendert im Anschluss das Templates mit den Daten aus dem Array.

Performance

Zur Optimierung unserer Server-Antwortzeiten setzen wir an verschiedenen Orten dieser Prozesse auf Caching. Dazu nutzen wir die natives WordPress Transient Caching um beispielsweise den Rückgabewert unseres Bildhelfers zu sichern. Dies basierend auf den gegebenen Funktionswerten, so werden die Bildtags jeweils nur einmal, üblicherweise während der Bearbeitung im Editor, generiert, bei allen weiteren Calls, wird dann der Transient geladen. Auf höchster Ebene schreiben wir das Resultat des HBS Compilers basierend auf dem Datenarray in die Transienten. Die Kompilierung sowie eventuell server-intensive Zusammenstellung der nötigen Daten, erfolgt also meist bloss zweimal (einmal für die Editoransicht, einmal im Frontend).

Frontend Rendering

Für einige unserer Komponenten nutzen wir dynamisches Rendering von HBS Templates im Frontend, basierend auf Daten, welche wir per AJAX laden. Im Hintergrund funktioniert dies identisch zum Prozess bei den normalen Blocks. Im Callback eines benutzerdefinierten WordPress REST Endpoints, stellen wir die benötigten Daten fürs Rendering in einem Array zusammen. Dies wird im zurückgeschickt und im Frontend mit einem vorkompilierten HBS Template gerendert. Auf dieser Basis ist es uns möglich, Inhalte wie beispielsweise einen Überblick von Teammitgliedern oder Shop Produkte dynamisch zu filtern und/oder paginieren («mehr laden» Button). Aber auch andere dynamische Elemente, wie die Variantenauswahl (Halsband, Zubehör) beim oben verlinkten Shop, lassen sich so umsetzen.

Diese Anwendung bringt uns verschiedene Vorteile. Wir verwenden dieselben Templates unabhängig davon ob diese Server oder Client seitig gerendert werden. Ebenfalls minimieren wir die Datenmenge, welche in der REST Antwort mitgeschickt werden muss. Nehmen wir an, die Profile der Teammitglieder aus dem obigen Beispiel würden serverseitig gerendert, müssten wir für jede neue geladene Person den kompletten HTML Code mitschicken. Mit unserer Umsetzung wird lediglich das Bild, der Name und das Icon zurückgeschickt, das Template mit allem HTML Code wurde beim Seitenaufruf einmal initial mitgeschickt und kann im Anschluss für das Rendering jedes geladenen Angestellten verwendet werden.

Über mehr Details zum Frontendhbs, wie wir diese Tools in unserer Gutenbase nennen, sowie die Ideen, welche wir zur Weiterentwicklung haben, werden wir in einem späteren Blogbeitrag berichten. Abonniere unseren Newsletter, um sicherzustellen, dass Du diesen nicht verpasst.

Raphael_1024

Artikel von

Raphael Hüni

Ur­sprüng­li­cher Ost­schwei­zer nun im Mit­tel­land an­säs­sig; mein Herz schlägt für meine Fa­mi­ly, Musik und na­tür­lich das Coden. Nach einem Volks­wirt­schafts­s­tu­di­um ge­lang mir der Quer­ein­stieg in die Ent­wick­lung, wo ich seit mitt­ler­wei­le 7 Jah­ren mein Wis­sen ste­tig er­wei­te­re und täg­lich neues dazu lerne.

Abonniere 
unseren Newsletter

Nur wertvolle Infos – kein Spam. Mit der Ameldung bestätigst Du, dass wir Dir einmal im Monat eine Zusammenfassung der neuesten Themen im Web-Bereich als E-Mail zusenden dürfen.

Mehr Artikel wie dieser

WordPress 6.1 – Alle Neuerungen mit webP und dem neuen Twenty Twenty-Three Standard-Theme im Überblick

Das dritte grosse WordPress Update in diesem Jahr steht vor der Türe. Mit WordPress 6.1 kommen am 1. November 2022 wieder zahlreiche Neuerungen auf uns…
Kevin Kyburz
Weiterlesen

iPhone Bildschirmgrössen – (k)ein Hexenwerk für Webdesigner?

iPhone-Bildschirm Messgrössen iPhone Bildschirmgrösse in Zoll (Display Size, Inches) Dies ist die Bildschirmgrösse in Zoll, gemessen von einer Ecke zur anderen. Genau so, wie auch Bildschirmgrössen von…
Christoph Ackermann
Weiterlesen

Vorstellung von WordPress 6.0 – Neue Blöcke und mehr Performance

Seit dem 24. Mai 2022 ist mit WordPress 6.0 die zweite Hauptversion in diesem Jahr veröffentlicht worden. Benannt wurde die Version nach Jazzmusiker Arturo O’Farrill.…
Kevin Kyburz
Weiterlesen

So kombinieren wir Nested Pages, SEO Framework & Polylang in WordPress

Bei vielen Kundenwebseiten setzen wir auf das Plugin Nested Pages, um Seitenstruktur besser sehen (und verwalten) zu können. Ohne dieses Plugin sieht die Anzeige von…
Christian Stampfli
Weiterlesen

WordPress Login – so bekommst Du Zugang zu Deinem Dashboard

Gerade für WordPress Anfänger, aber auch bei fortgeschrittenen Benutzern, kann es oft schwierig sein, sich bei seinem Konto anzumelden. Im folgenden Beitrag werde ich Dir…
Kevin Kyburz
Weiterlesen

WordPress 6.0: Entwicklerteam gibt Zeitplan der neuen Version bekannt

Update: WordPress 6.0 wurde am 24. Mai 2022 veröffentlicht Wie Matias Ventura Ende Januar schrieb, soll WordPress 6.0 ein Abschluss der Phase 2 des Gutenberg-Projekts…
Kevin Kyburz
Weiterlesen

WordPress 5.9 – Was ist neu und kommt mit dem Update

Ursprünglich sollte WordPress 5.9 (Josephine) bereits am 14. Dezember 2021 veröffentlicht werden, wurde jedoch wegen offenen Problemen nach mehrfachen Verschieben nun am 25. Januar 2022…
Kevin Kyburz
Weiterlesen

WordPress Bilder und Medien: Alles was du wissen musst

Bilder sind ein grosser und wichtiger Bestandteil einer modernen Webseite. Sie helfen dem Besucher und Leser, Dinge zu visualisieren und lockern auch gerne lange Beiträge…
Kevin Kyburz
Weiterlesen

Welche WordPress Version habe ich? So findest Du es heraus!

WordPress ist das beliebteste CMS der Welt, mit welchem sich neben Blogs auch ganze Webseiten erstellen lassen. Da WordPress regelmässig und fleissig verbessert wird, kann…
Kevin Kyburz
Weiterlesen

Warum unsere Kunden ihre Webseite kaputt layouten können

Einleitung / Basics Bereits seit einiger Zeit haben wir unseren neuen cubetech Core im Einsatz. Intern nennen wir das Ding liebevoll „gutenbase“ – eine Mischung…
Christian Stampfli
Weiterlesen

Tech Talk – „Advanced Custom Fields“ Plugin

Bereits seit langer Zeit setzen wir bei unseren WordPress-Installationen auf das populäre Plugin «Advanced Custom Fields» (nachfolgend ACF). Dieser Beitrag zeigt, wie wir unsere Webseiten…
Christian Stampfli
Weiterlesen

Wie du deine WordPress Medienbibliothek aufräumst

Wer WordPress für seinen Blog oder seine Firmenwebseite schon länger nutzt, hat sicher schon einiges an Dateien in die Mediathek hochgeladen. WordPress erstellt beim Hochladen…
Kevin Kyburz
Weiterlesen