Manchmal ist es übersichtlicher, Texte in Akkordeons zu unterteilen. Das sind ein- und ausklappbare Segmente, die Text oder auch andere Elemente beinhalten können.
Der früher in diesem Beitrag empfohlene Block Accordion Items von Phil Buchanan wird nicht mehr zuverlässig upgedatet, aber seit WordPress 6.9 gibt es ja einen echten Akkordeon-Block im Core.
Inhaltsverzeichnis
- Der Block »Akkordeon«
- Der Block »Details«
- Details als Akkordeon (1): Die Mentoring-FAQ
- Details als Akkordeon (2): Das WP-Lexikon
- Andere Akkordeon-Blöcke
Der Block »Akkordeon«
Akkordeons? Dazu hat man in WordPress lange Zeit Plugins oder den weiter unten beschriebenen Details-Block verwendet. Aber jetzt gibt es einen eigenen Block für Akkordeons. Was ist dann aber der Unterschied zum Details-Block?
Der Unterschied zwischen Details und Akkordeon
In der Dokumentation zum Accordion Block steht zum Unterschied mit dem Details-Block folgendes:
Details creates a single collapsible section.
Accordion is a list of coordinated collapsible items with options to allow one or multiple open at once.
Ein Akkordeon besteht also in der Regel aus mehreren Einträgen, der Details-Block hingegen ist ein Einzelgänger, eher eine Art Mundharmonika.
Das wir mit dem Details-Block lange Zeit ganze Seiten voller Akkordeons geschrieben haben, war also eigentlich nicht vorgesehen. Nun denn.
Interaktives Beispiel für ein einfaches Akkordeon
Hier ein Beispiel für ein einfaches Akkordeon. Probieren Sie, die beiden Bereiche ein- und auszuklappen und achten Sie darauf, wie die einzelnen Teile des Akkordeons gestaltet wurden.
Ein Akkordeon besteht :
- Block Akkordeon
- Block Akkordeon-Element
- Block Akkordeon-Überschrift
- Block Akkordeon-Bedienfeld
- Block Akkordeon-Element
- Block Akkordeon-Überschrift
- Block Akkordeon-Bedienfeld
- Block Akkordeon-Element
Und so weiter.
Man kann festlegen, ob ein Akkordeon standardmäßig geöffnet ist und im Block-Inspektor alle zu einem Akkordeon gehörenden Blöcke einzeln gestalten.
Im Block-Editor sieht dieses Akkordeon so aus:
Akkordeons sind so vielseitig gestaltbar, dass Justin Tadlock dazu einen ganzen Beitrag geschrieben hat: Styling accordions in WordPress 6.9.
Der Block »Details«
Seit der Version 6.3 gibt es in WordPress einen Block namens Details, der wie gesagt lange Zeit als Ersatz für echte Akkordeons diente.
Der Details-Block besteht aus einer Zusammenfassung, die immer zu sehen ist, und dem Inhalt, der erst nach dem Ausklappen in Erscheinung tritt.
Im Details-Block kann man als Zusammenfassung leider keine Überschriften nutzen, sondern nur normale Absätze:
Zudem gibt es nur wenig Einstellungen zur Gestaltung des Blocks und die wenigen vorhandenen kann man nur für den gesamten Block nutzen. Deshalb ist z. B. eine getrennte Gestaltung von Zusammenfassung und Inhalt bisher nur über zusätzliches CSS möglich.
Immerhin sind im Inhaltsbereich des Details-Blocks neben Absätzen auch verschiedene Blockarten möglich, wie Bilder, Listen, oder sogar ein weiterer Details-Block. Hier ein Beispiel (bitte ausklappen):
Das ist ein Beispiel für einen einfachen Details-Block
So sieht er aufgeklappt aus. Die Gestaltung erfolgte nur über die standardmäßigen WordPress-Einstellungen.
Man kann auch ein Bild oder eine Liste einfügen und das sogar in Spalten:
- Ein Listenpunkt
- Noch ein Listenpunkt
- Wieder ein Listenpunkt
- und so weiter
- und so fort
Zwei Beispiele für den Einsatz des Details-Blocks finden Sie in den nächsten Abschnitten, aber beide könnte man inzwischen mit dem Akkordeon-Block erstellen.
Details als Akkordeon (1): Die Mentoring-FAQ
Die Mentoring-FAQ auf meiner eigenen Website sieht so aus:
Heute würde man das mit dem Akkordeon-Block bauen, aber den gab es damals noch nicht. Deshalb basiert die FAQ auf dem Details-Block, und zur Gestaltung benötigte man folgenden Zusatz an individuellem CSS:
Details als Akkordeon (2): Das WP-Lexikon
Auch das von Peter erstellte WP-Lexikon basiert noch auf dem Details-Block von WordPress:
Die Umsetzung des WP-Lexikons, von der Block-Struktur über das CSS zur Gestaltung bis zum JavaScript für das Verhalten, wurde im folgenden Beitrag ausführlich dokumentiert:
Mit ein bisschen zusätzlicher Arbeit ist der Details-Block also recht vielseitig einsetzbar, aber heutzutage würde man das natürlich mit dem Akkordeon-Block bauen.
Andere Akkordeon-Blöcke
Die im Buch vorgestellten Blocksammlungen wie Kadence Blocks, Spectra oder GenerateBlocks haben allesamt einen eigenen Akkordeon-Block.
Der Accordion-Block von GenerateBlocks bietet zum Beispiel wirklich viele Einstellungsmöglichkeiten, die neben dem Aussehen auch das Verhalten betreffen, steht aber leider nur in der Bezahlvariante zur Verfügung:
GenerateBlocks bietet aber sehr detaillierte Möglichkeiten zur Gestaltung und zum Layouten von Inhalten (siehe z. B. GenerateBlocks statt Elementor).
