Kombinieren von WordPress Theme-Einstellungen und WordPress-Blöcken

Ein grosser Teil meiner Arbeit an Websites und Webanwendungen ist kundenspezifische Entwicklung. Das bedeutet, dass ich in den letzten Jahren auf einer sehr langen Karriere aufgebaut und mich auf den WordPress Block Editor konzentriert habe. Dank meiner langjährigen Erfahrung in der Entwicklung von und mit Content-Management-Systemen habe ich gelernt, für jedes Projekt die beste Herangehensweise zu wählen und dabei sowohl die Anforderungen des Kunden als auch des Systems zu berücksichtigen.

Meine Arbeit basiert oft auf den Standard-Inhaltselementen, die WordPress zur Verfügung stellt—den sogenannten «Blöcken»—und auch auf Inhaltselementen, die ich selbst erstelle. Manchmal ist es sinnvoll, ein komplett individuelles Inhaltselement von Grund auf zu bauen, damit die Redakteure schnell arbeiten können und sich nicht so tief in die WordPress-Blöcke einarbeiten müssen. Den Redakteuren einen Block zur Verfügung zu stellen, der das richtige Mass an Kontrolle bietet, aber weniger komplex ist, ist oft der richtige Weg. Vor allem, wenn der Content Manager noch andere Aufgaben in seinem arbeitsreichen Tag hat.

Dennoch sind die Blöcke, die WordPress zur Verfügung stellt, sehr leistungsfähig und es kann sinnvoll sein, sie zu nutzen, wo immer es möglich ist, und ihre Funktionen bei Bedarf zu erweitern.

Erweitern des WordPress Button Blocks

Bei einem aktuellen Projekt hat der Kunde eine Reihe von Links auf der gesamten Website, die zu einem Buchungssystem eines Drittanbieters führen. Die URL für den Link ist immer dieselbe. Anstatt den Kunden zu bitten, den Link auf Dutzenden von Seiten manuell hinzuzufügen oder zu ändern, entschied ich mich, den Button Block¹ zu erweitern—der dank seiner Designflexibilität verwendet wird—und sicherzustellen, dass alle Blöcke denselben Link verwenden.

Nachdem wir im Admin-Bereich von WordPress eine Einstellungsseite² hinzugefügt haben, in der ein Feld «booking_url» geändert werden kann, war der nächste Schritt, sicherzustellen, dass der Button-Block diese URL verwendet.

Ich habe einen benutzerdefinierten PanelBody zu den Block-Steuerelementen hinzugefügt, in dem ein ToggleControl dem Redakteur ermöglicht, festzulegen, wann die URL aus den vordefinierten Einstellungen verwendet werden soll. Um dem Redakteur zu helfen, sicherzustellen, dass die notwendige Einstellung gesetzt wurde, habe ich eine Notice-Komponente hinzugefügt, welche die vordefinierte URL anzeigt, wenn die Option ausgewählt wurde, oder sonst eine alternative Meldung, wenn es keinen passenden Wert für die Einstellung gibt.

Nachdem die Steuerelemente erweitert wurden und der Wert des ToggleControls als Block-Attribut³ gesetzt wurde, bin ich zu PHP übergegangen, um die Ausgabe des Button-Blocks zu ändern. Mit dem Filter render_block_core/button prüfe ich, ob das benutzerdefinierte Attribut gesetzt ist und eine gültige URL ist. Wenn ja, verwende ich den WP_HTML_Tag_Processor⁴, um das HTML zu analysieren und das href-Attribut des Links zu ersetzen.

Fußnoten

1. https://wordpress.org/documentation/article/buttons-block/ ↩︎
2. https://developer.wordpress.org/plugins/settings/custom-settings-page/ ↩︎
3. https://developer.wordpress.org/block-editor/reference-guides/block-api/block-attributes/ ↩︎
4. https://developer.wordpress.org/reference/classes/wp_html_tag_processor/ ↩︎