Gutenberg WordPress

Der WordPress Query-Block vorgestellt

Im letzten Blogbeitrag habe ich erklärt, welche neuen Features unter dem Schlagwort Full Site Editing in WordPress zusammengefasst werden. Eine neue Funktion, die bereits im kommenden WordPress-Release 5.8 Ende Juli 2021 integriert wird, ist der Query-Block und der dazugehörende Child-Block Query Loop (die Namen der beiden Blöcke können sich noch ändern).

Mit diesen beiden Blöcken kannst du eine bestimmte Anzahl von Blogbeiträgen, Seiten oder WooCommerce-Produkten auf einer Seite oder in einem Beitrag anzeigen.

Der äußere Query-Block bietet etliche Filter-Optionen an. Die Anzahl der Beiträge ist meiner Ansicht nach etwas schwierig zu finden. Du musst auf den „Display Settings“ Button in der Toolbar klicken. Derzeit gibt es außerdem eine Listen- oder Raster-Ansicht in der Toolbar.

Anzahl der Beiträge im Query Block
Anzahl der Beiträge im Query Block bestimmen.

In den Block-Einstellungen des Query-Blocks findest du dann die Filter-Optionen nach Datum der Veröffentlichung, Kategorien, Schlagwörtern, Autoren oder individuellen Stichwörtern. Wenn du die Rasteransicht gewählt hast, kannst du in den Block-Einstellungen auch noch die Anzahl der Spalten zwischen 2-6 wählen.

Filter Optionen des WordPress Query Blocks
Die Filter-Optionen des Query-Blocks.

Gestaltungsoptionen des Query Loop-Inhalts

Für unser sich derzeit in Arbeit befindendes ElmaStudio-Redesign und das kommende Aino Theme-Update habe ich in den letzten Tagen angefangen, mit dem Query-Block zu arbeiten. Mein erstes Ziel war es dabei mithilfe der neuen Blöcke ein bestimmte Anzahl neuester Blogbeiträge anzuzeigen. Mein Layout soll eine dreispaltige Gridansicht werden. Die Gesamtanzahl der Beiträge habe ich auf sechs begrenzt.

Query block Blogbeiträge
Der grobe Entwurf des Layouts für die neuesten Blogbeiträge auf der Elmastudio-Startseite.

Im inneren Query-Loop Block kann ich jetzt selbst bestimmen, welche Elemente eines Beitrags ich anzeigen möchte. Dafür werden weitere neue Blöcke angeboten. Derzeit sind das die Blöcke Post Title, Post Content, Post Date, Post Excerpt, Post Featured Image, Post Categories und Post Tags. Die Blöcke sind derzeit noch nicht ins Deutsche übersetzt.

Wenn ein Query Loop-Block angepasst wird, werden die andere Beiträge übrigens ebenfalls angepasst.

Wichtig ist es, sich zu merken, dass Änderungen an einem einzelnen Beitrag gesamtheitlich angepasst werden. Wenn du also das Beitragsbild eines Beitrags im Query-Block änderst, wird dieses neue Bild automatisch auch auf der Beitragseinzelseite genutzt.

In den einzelnen Unterblöcken kannst du übrigens auch Änderungen vornehmen. So kannst du zum Beispiel die Schriftgröße oder Farbe des Beitragstitels ändern. Probleme könnte es mit den richtigen Abständen zwischen den einzelnen Elementen geben. Wir sind da gerade noch dabei, eine möglichst flexible Lösung für unser Aino-Themesystem zu finden.

Wie kann der Query-Block eingesetzt werden

Wenn eine WordPress-Webseite zukünftig komplett aus Blöcken besteht, ist es mithilfe des Query-Blocks möglich, flexible Startseiten zum Beispiel für Magazin-Webseiten aufzubauen.

Hier wird dann die gestalterische Kreativität der Theme-Designer und WordPress-Nutzer gefragt sein. Zusätzlich kann man aber auch spannende Archivseiten aufbauen oder spezielle Themengebiete auf einer Startseite hervorheben. Es könnten zum Beispiel Rezepte-Beiträge nach Themen sortiert gezeigt werden.

Die Möglichkeiten scheinen endlos und die Flexibilität des Query-Blocks machen diesen zu einem der wichtigsten Blöcke auf dem Weg zu vollständigen Block-Themes. Was Block-Themes sind, werde ich übrigens im nächsten Beitrag erklären.

Fragen und Feedback

Hast du Fragen zum Query-Block? Du kannst die neuen Blöcke übrigens bereits testen, wenn du das Gutenberg-Plugin aktivierst hast. Hast du noch weitere Vorschläge, wie die neuen Blöcke kreativ eingesetzt werden könnten? Schreibe mir doch einfach einen Kommentar zum Beitrag. Ich freue mich, von dir zu hören.

Beteilige dich an der Diskussion

  1. Vielen Dank für die Aufarbeitung! Das ist eine spannende Entwicklung. Eine Frage habe ich allerdings: Kann der Query-Block auch Custom Post Types darstellen? Das wäre echt super – und das habe ich bei euren alten Startseiten-Widgets auch immer vermisst (wenn ich mich richtig erinnere, musste ich mir die Widgets immer etwas umständlich clonen und anpassen, um CPTs damit darzustellen).

    1. Hallo Alex,
      das ist eine gute Frage, ich weiß es momentan nicht. Ich werde noch einmal recherchieren, ich habe sowieso überlegt, dass ich das Thema Query-Block noch einmal in einem Video-Post zeigen sollte, da man so leichter sehen kann, wie es funktionieren wird.
      Viele Grüße,
      Ellen

  2. Hi Ellen,

    sieht spannend aus, bisher hat man dazu ja immer noch Plugins gebraucht. Du schreibst mit aktiviertem Gutenberg-Plugin kann man die Blöcke schon testen. Das hat mich etwas verwirrt, ich habe bei mir das Gutenberg-Plugin nicht aktiviert, habe aber trotzdem den Block-Editor. Erweitert das Gutenberg-Plugin den Block-Editor in irgendeiner Form noch zusätzlich? Oder was sind die Unterschiede wenn ich diese Plugin aktiviere?

    Danke für die Info, Martin

    1. Hallo Martin,
      oh, das tut mir leid, das ist ein Missverständnis. Ich habe damit die neuesten Blöcke gemeint, also den Query- und Query Loop Block und die dazugehörigen Post Blöcke. Diese sind meines Wissens momentan erst aktiv, wenn man das Gutenberg-Plugin aktiv hat oder das Beta-Tester und dort schon 5.8 läuft.
      Wenn das nicht so sein sollte, sag mir noch einmal Bescheid, dann schaue ich da nochmal nach.
      LG Ellen

  3. Liebe Ellen,
    ich habe vor ein-zwei Wochen Euer Theme-Bundle gekauft und tue mich wirklich schwer mich in WordPress zurechtzufinden.

    Ich selber habe seit 1998 viele kommerzielle „statische“ Websites per Hand gebaut (mit verwaltender Unterstützung von Golive und Dreamweaver und seit den 2000er Jahren mit immer mehr Handarbeit im Quellcode).

    Nun sehe ich aber, dass die Nutzung von dynamischen Inhalten nicht mehr zu verhindern ist. Da eine tiefere Einarbeitung in PHP und ein eigenes CMS nicht in Frage kommen, habe ich mich für WordPress entschieden.

    Aktuell arbeite ich noch mit dem WordPress-Theme „uncode“ von „undsgn“, da mir dort die Designmöglichkeiten und die Usability am besten gefallen.

    Allerdings ist mir uncode eigentlich zu proprietär, es nutzt zum größten Teil einen anderen Workflow als das klassische WordPress. Alles funktioniert mit „Blocks“ innerhalb eines eigenen Frameworks in uncode. Wenn in uncode die Website gebaut wurde, kann man mit den Inhalten der Datenbank nicht zu einem anderen Theme wechseln. Das finde ich in Bezug zu zukünftigen Entwicklungen bei WordPress eher nachteilig.
    Ich möchte mich ungern wieder an einen Anbieter binden. Deshalb suche ich eigentlich ein schnelles Theme mit umfangreichen Designmöglichkeiten, feinem Eye-Candy und einer logischen Usability.

    In uncode sind Blocks dynamische Elemente die (wie ich finde) in der Art von Widgets die Inhalte auf die Webseite bringen. Diese können dann sehr umfangreich jeweils individuell gestaltet werden und werden in den Grundeinstellungen des Themes den verschiedenen Seiten-Arten (Archiv, Single-Page, Search-Page …) zugeordnet. Blocks können z. B. auch Related-Results innerhalb von Beiträgen anzeigen (ähnliche Beiträge).

    Nun meine Fragen:
    1) werden die Query Blocks funktionell in die Richtung gehen wie die Blocks in uncode?
    2) hast Du einen Tipp für eine didaktisch gute grundlegende Einführung in das „aktuelle“ WordPress?

    Herzliche und sonnige Grüße von der Ostsee
    Mario

    1. Hallo Mario,
      ich kann super gut verstehen, dass du dich nicht von einem externen Anbieter abhängig machen möchtest. Da sind die neuen WordPress-Blöcke eigentlich ideal, da sie Theme-unabhängig genutzt werden können.

      Wir haben bei unserem neuesten Theme-Projekt die Blöcke auch vom Theme getrennt. Natürlich wird es immer so sein, dass bestimmte Designs nur mit Blöcken von einem Anbieter funktioneren.

      Wenn du das nicht möchtest, kannst du aber immer noch allein mit den in WordPress standardmäßig installierten Core-Blöcken arbeiten. Auch mit diesen kann man schon etliche Layouts bauen.

      Es gibt auch eine neue Block-Pattern Angebotsseite, diese Layouts sind alle nur mit den Standard-Patterns gebaut: https://wordpress.org/patterns/

      Der Query-Block ist auch ein Standard-Block, du kannst also grundlegend auf diesen setzten.

      Als erste Einführung könnte dir vielleicht die Gutenbergfibel helfen: https://gutenberg-fibel.de/

      Leider ist WordPress momentan stark im Umbruch und es ist schwierig eine gute Gestamtübersicht zu geben. Ich kann aber verstehen, dass dies sehr hilfreich werde. Ich werde mal schauen, ob ich da nicht eine kleine Blogbeitragsserie draus mache :)

      Herzliche Grüße,
      Ellen

  4. DANKE! Vielen Dank für diesen erhellenden Beitrag. Mir fehlt manchmal die Fantasie, um neue Blocks (oder Blöcke?) zu verstehen und sinnvoll einzusetzen. Dein Beitrag hat mir einen echten Kick verpasst; ich setze mich am Wochenende an meinen Blog und hübsche ihn auf… :-)

    1. Hallo Sanne,

      das freut mich total :) Herzlichen Dank für dein Feedback, das motiviert mich sehr weitere Beiträge dieser Art auf dem Elmastudio-Blog zu schreiben.
      Viel Spaß beim exzperimentieren mit dem Query-Block, sag Bescheid wenn Fragen auftauchen.
      LG Ellen

  5. Bisher streube ich mich noch davor mit dem Gutenberg-Editor zu arbeiten, aber je mehr Artikel ich über die verschiedenen Features lese, desto interessanter wird das Thema für mich. Nutzt du noch den klassischen Editor Ellen?

    1. Hallo Matt,

      der Editor hat sich wirklich extrem positiv weiterentwicklet, wenn du kannst, würde ich auf jeden Fall wechseln. Die alten Seiten und Beiträge werden dabei nicht verändert.

      Wir nutzen momentan noch den Classic Editor hier auf der Webseite (leider), aber das wird sich noch diesen Monat endlich ändern, wenn wir mit Elmastudio auf das Aino-Theme umziehen :)

      Viele Grüße,
      Ellen

  6. Als ich das erste mal von Query-Block und Query Loop-Block gelesen habe, stand ich komplett auf dem Schlauch und hab es einfach nicht verstehen wollen.

    Jetzt nachdem ich es verstanden haben kann ich es garnicht erwarten das diese Blöcke in WordPress Core kommen. Die Möglichkeiten die einem dann geboten werden, entfesseln richtig den Inhalt der in der Datenbank ist. Denn ab dann sind wirklich sehr einzigartige und personalisierte Designs möglich.

    Die Zukunft von WordPress besteht aus Blöcken und ich bin sehr optimistisch das dass super wird.

    1. Hallo Christopher, das ging mir ganz genauso so :) Ich denke der Name ist etwas schwierig, bin mal gespannt wie das in der deutschen Version gelöst wird. Da man aber ja auch Woo-Produkte oder Seiten filtern kann, ist es eben kein Beitrags-Loop allein.

      Ich denke auch, dass die jetzt kommenden Blöcke entscheidend sein werden. Bis Ende des Jahres wird alles schon etwas klarer sichtbar sein. Im Moment ist es eben leider ein Spagat zwischen den „alten“ WordPress PHP-Templates und den Blöcken. Es bleibt auf jeden Fall weiter spannend und auch viel Arbeit :)

      Lg Ellen

  7. Wie cool ist das denn? Wenn das alles so funktioniert, kann ich mir direkt mal 1 bis 2 weitere Plugins sparen, die ich bislang für solche Zwecke im Einsatz hatte. Sehr cool. Ich bin sehr gespannt! LG Jasmina

    1. Hallo Jasmina,
      das freut mich total, ich hoffe mein Beitrag hat dir weitergeholfen. Das Konzept ist etwas abstrakt und der Name Query-Block auch schwer verständlich. Aber so können wir wirklich anfangen sehr viel individuellere Seiten-Vorlagen zu bauen oder auch für Kunden anzubieten.

      Die klassischen, automatisch generierten WordPress-Seiten können so nach und nach ersetzt werden.

      LG Ellen

  8. Leider ist dieser Block weder besonders intuitiv zu nutzen, noch besonders komplett umgesetzt. Diese Umbruchphase ist durch das „Ship fast – iterate later“ ein Grauen. Wer *jetzt* so eine Funktion benötigt hat ein unfertiges, unvollständiges Konstrukt und wir zum Beta-Tester. Kann man machen, sollte einem nur bewusst sein.

    Ich bin sicher, dass dieser Block später mal gut nutzbar wird und mehr Funktionen hat, aber aktuell würde ich eher ein Plugin dafür nutzen. Dann aber hat man den Ärger, dass man das nur in Block-Sammlungen kriegt … und muss vielleicht doch irgendwann zum nativen Block zurück migrieren (z.B. wenn das Block-Plugin nicht weiterentwickelt wird oder der Core aufholt oder das Plugin verkauft wird oder oder oder …)

  9. Ui. Das klingt ja spannend. Ich hoffe das lässt sich gut nutzen. Bisher sehen meine eigenen Seiten nämlich eher Grotte aus ;) Ich hoffe das kann ich damit ändern. Eine Frage noch, wie bekommt man solche Features vor der Veröffentlichung mit und kann die testen? Gibt es da ein Beta Programm?
    Beste Grüße

  10. Ich muss Torsten leider recht geben: Intuitiv ist der Block leider (noch) nicht. Allerdings finde ich den Ansatz grandios! Ich bin sehr gespannt, wie sich das noch entwickelt. Danke für die Vorstellung. (Jetzt hab ich es auch verstanden :D ) Liebe Grüße

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.