Vorgestellte Cover-Blöcke und die Zukunft der Bindung von Daten an generische WordPress-Blöcke – WP Tavern

7. April 2022
WordPress editor with a Cover block.  Highlighted in the toolbar is the "use featured image" toggle.

Im vergangenen Jahr war ich auf einer Mission. Ich habe gespannt auf jede Veröffentlichung des Gutenberg-Plugins gewartet, Tickets verfolgt und mich eingeschaltet, wenn ich konnte. Ich habe einen Funken Hoffnung für ein Feature im Besonderen hegt.

Ich wollte vorgestellte Bilder innerhalb eines Cover-Blocks verwenden. Dieser Tag ist endlich gekommen.

Insbesondere war es meine Mission, das folgende Layout vollständig aus dem WordPress-Editor zu erstellen - ohne Code:

Drei Blogbeiträge übereinander gestapelt, jeder mit dem vorgestellten Bild als Hintergrund.

Dies war ein Teil einer Reihe von Mustern, die ich für eine Faux Fotoportfolio im Jahr 2021. Das allgemeine Layout ist in WordPress längst über den Editor möglich. Es war jedoch nicht dynamisch, was bedeutete, dass jeder Cover-Block und sein Bild manuell hinzugefügt werden mussten, anstatt Post-Featured-Bilder zu laden.

Vor zwei Wochen war Andrei Draganescu Einen Pull Request hinzugefügt, der alles geändert hat. Es implementierte einen Schalter für den Cover-Block, der es ihm ermöglichte, das vorgestellte Bild des Beitrags anstelle eines statischen Bildes zu verwenden:

WordPress-Editor mit einem Cover-Block.  In der Symbolleiste ist die "Ausgewähltes Bild verwenden" umschalten.
Umschalten des Cover-Blocks, um das ausgewählte Bild zu verwenden.

Vor zwei Tagen wurde Erweiterung im Gutenberg-Plugin gelandet. Es wird erwartet, dass es nächste Woche mit der Version 13.0 ausgeliefert wird.

Ich bin mir nicht sicher, warum ich so besessen von diesem spezifischen Muster war. Es ist nicht übermäßig komplex. Tief im Inneren hatte vielleicht ein Teil von mir das Gefühl, dass, wenn WordPress den Punkt erreichte, an dem ich es aus dem Editor erstellen konnte, wir an einem Ort sein würden, an dem alles möglich war. In Wirklichkeit weiß ich, dass es viel mehr zu tun gibt und Funktionen implementiert werden müssen, aber dies fühlt sich immer noch wie ein bedeutender Meilenstein an, der nicht unbemerkt bleiben sollte.

Auch das Muster selbst ist über den Editor nicht ganz möglich. Wie im folgenden Screenshot gezeigt, gibt es Lücken zwischen den einzelnen Beiträgen:

Query Loop-Block im WordPress-Editor, der das vorgestellte Bild für Beiträge als Hintergrund eines Cover-Blocks anzeigt.
Unerwünschte Lücken zwischen Beiträgen im Block Abfrageschleife.

Ich musste ein bisschen schummeln und diese mit CSS zusammenklappen. Es gibt eine Ticket zum Mitbringen von Dimensionskontrollen zu den Blöcken Query Loop und/oder Post Template, aber es muss noch implementiert werden. Theme-Autoren müssen derzeit einen benutzerdefinierten "No Gap" -Blockstil hinzufügen, um den Mangel zu beheben, aber das Layout ist jetzt machbar.

Während ich mich vielleicht ausschließlich auf dieses spezielle Design konzentriere, eröffnet die Änderung den Theme-Autoren eine Welt voller Layout-Möglichkeiten. Ein Stil besteht darin, das vorgestellte Bild als Hintergrund hinter der Website und den Post-Headern zu verwenden, wie im folgenden Screenshot gezeigt:

Eine Single-Post-Ansicht am Frontend einer WordPress-Site.  Es hat ein Cover-Bild hinter dem Site-Header und den Post-Headern.
Decken Sie den Block mit dem Vorgestellten Bild des Beitrags ab, wenn Sie einen einzelnen Beitrag anzeigen.

Das ist jetzt direkt aus dem Site-Editor heraus möglich.

Ich konnte es in wenigen Minuten neu erstellen, indem ich die einzelne Vorlage meines aktiven Themas bearbeitete. Ich habe den Header-Vorlagenteil in ein Cover eingeschlossen, den Schalter für die vorgestellten Medien eingeschaltet und den Beitragstitel und die zugehörigen Blöcke hinzugefügt.

WordPress-Site-Editor mit der einzelnen Vorlage im Blick.  Die Bereiche
Coverhintergrund mit eingeschaltetem Bild.

Diese Änderung gibt ihnen die Freiheit, Themer zu blockieren, die sie seit dem Aufbau auf dem klassischen WordPress nicht mehr hatten. Benutzer können auch ihre eigenen Optimierungen an der Ausgabe vornehmen.

Diese Erweiterung ist ein Gewinn für Theme-Autoren und Benutzer. Es stellt jedoch auch eine weitere Verschiebung dar, die in Zukunft neue Möglichkeiten für Blöcke schaffen könnte.

WordPress hat ein Blockproblem. Diejenigen, die allein von Core hinzugefügt wurden, beginnen die Inserter-Benutzeroberfläche zu überfüllen, und wenn Sie ein paar Plugins in den Mix einfügen, können die Dinge unhandlich werden. Viele Blöcke sind im Wesentlichen Variationen von HTML-Basiselementen. Zum Beispiel ist Post Title lediglich eine Variation des <h*> -Element, und WordPress hat bereits einen Heading-Block.

Diese Variationen duplizieren den Entwickleraufwand, erstellen Szenarien, in denen jeder Block verschiedene Funktionen unterstützt, und vermüllen oft die Benutzeroberfläche.

Cory Vogelgesang eröffnete ein Ticket im Januar die versucht, dieses Problem anzugehen. Sein Lösungsvorschlag:

Anstatt Tonnen von einzelnen Blöcken für diese Art von Dingen zu erstellen, scheint es besser zu sein, Systeme für die Verwendung von site / post metad zu erstellenata innerhalb vorhandener generischer Blöcke.

Die Wiederverwendung des vorgestellten Bildes schien der offensichtlichste Ausgangspunkt zu sein. Theme-Autoren haben lange nach mehr Kontrolle über die Ausgabe gerufen, und der dedizierte Post Featured Image-Block war bestenfalls glanzlos. Es gibt Tickets, um die gleiche "Featured Cover" -Implementierung auf die Medien & Text und Gruppe Blöcke.

Mit der Landung von WordPress 6.0 im nächsten Monat werden wir keine vollständige Unterstützung für die Bindung dynamischer Daten an generischere Blöcke sehen. Es könnte jedoch Auswirkungen auf die Zukunft haben.

Was wäre, wenn Plugin-Autoren, anstatt einzelne Blöcke zu erstellen, lediglich einen Schalter anbieten könnten, um Inhalte über eine benutzerdefinierte Datenquelle anzuzeigen? Es gibt sicherlich einige Anwendungsfälle jenseits von Kern-WordPress, in denen dies praktisch sein könnte.

Zumindest im Moment werde ich wahrscheinlich den Rest des Tages damit verbringen, an vorgestellten Bildern und Cover-Blöcken zu basteln.

Quelle


Dieser Artikel ist im Original von wptavern.com und wurde übersetzt
https://wptavern.com/featured-cover-blocks-and-the-future-of-binding-data-to-generic-wordpress-blocks

Abonniere den RSS-Feed von unseren WP News und verpasse keine Meldung: https://die-mainagentur.de/feed/?post_type=wp-news

Alternativ kannst du unseren WP-Newsletter abonnieren

Mit dem Eintrag in den WP-Newsletter bekommst du per Mail über neue Artikel zugesendet. Du kannst den Newsletter jederzeit abbestellen.
Mehr dazu in der Datenschutzerklärung