So richten Sie einen verschachtelten Gruppenblock mit teilweiser Breite über den WordPress-Editor aus – WP Tavern

16. April 2022
So richten Sie einen verschachtelten Gruppenblock mit teilweiser Breite über den WordPress-Editor aus - WP Tavern

Ich war letzte Woche etwas frustriert, als ich ein Tutorial zu einem Post-Header im Heldenstil. Ich hatte geplant, ein Layout mit einer linksbündigen Gruppe mit einer maximalen Breite zu erstellen, wie im folgenden Screenshot gezeigt:

Heldenabschnitt in voller Breite mit durchblutendem Bildhintergrund.  Auf der linken Seite befinden sich der Titel des Beitrags, die Byline und der Inhalt in einer Spalte.

Dadurch könnte der Brennpunkt des Hintergrundbildes rechts durchscheinen. Keine der beiden bekannten Techniken schien jedoch ideal zu sein.

Eine der gebräuchlichsten Methoden ist die Verwendung eines 50/50-Spalten-Blocks, bei dem die rechte Spalte leer bleibt. Dies war bei einigen Bildschirmgrößen unordentlich. Allerdings, als bemerkt von Andrew Starr Wenn Sie in den Kommentaren eine bestimmte Breite für die linke Spalte festlegen und die Breite für die rechte Spalte löschen, wird dieses Problem behoben. Huttipp an ihn, weil er einen Weg gefunden hat, innerhalb des Systems zu arbeiten. Dennoch ist es nicht die intuitivste Methode und hinterlässt eine leere <div> im HTML-Code ohne guten Grund. Es fühlt sich wie ein Hack an, den wir den Benutzern nicht beibringen sollten.

Mein Bauchgefühl sagte mir, dass meine bevorzugte Lösung die richtige war. Es war auch am einfachsten zu implementieren, ohne auf Hacking-Spalten zurückzugreifen. Es verwendet das Inhaltsausrichtungsmatrix-Steuerelement für den Cover-Block in Kombination mit einer festgelegten Breite auf einem inneren Gruppenblock. Ich stieß jedoch auf Probleme damit, verstand aber nicht warum. Das war, bis ich diese Woche wieder hineingetaucht bin (ich werde später dazu kommen). Außerdem bin ich stur genug, um immer wieder etwas auszuprobieren, bis es magisch funktioniert.

Deshalb ging ich zurück zum Zeichenbrett. Müde, mir das vorherige Design anzusehen, zog ich eine der ersten Musterideen hoch, die ich vor etwa einem Jahr hatte, und erstellte sie mit den neuesten Designwerkzeugen neu:

Großes Hintergrundbild mit einer Wüste in der Nacht.  Ein Zelt steht im Vordergrund des Bildes.  Auf der linken Seite befindet sich ein falscher Text für die Buchung einer Nacht unter den Sternen.

Ich wollte auch sicherstellen, dass diese Lösung auf jeder Bildschirmgröße gut funktioniert. Wenn Sie sich in Richtung kleinerer Ansichtsfenster bewegen, sollte der Inhalt mehr Platz einnehmen, bis er den Rand erreicht. Die Methode in diesem Lernprogramm behandelt dies wunderbar:

Mobile Ansicht einer nahen Wüste mit falschem Text für die Buchung eines Campingausflugs.

Dieser Eintrag in der Bauen mit Blöcken -Reihe erläutert, wie dieses Layout erstellt wird. Als Bonus werde ich auch zeigen, wie man es mit dem neuen Stack-Block in WordPress 6.0 für Fälle erreicht, in denen ein Cover-Container keinen Sinn ergibt.

Gebäude mit einem Deckstein

Für diese exemplarische Vorgehensweise verwende ich ein benutzerdefiniertes Design. Allerdings habe ich auch mit Archeo |, Avantgardeund Zweiundzwanzig Zweiundzwanzig. Es hat in der gesamten Gruppe konsequent funktioniert. Ich laufe auch WordPress 6.0 Beta 1 ohne dass das Gutenberg-Plugin aktiv ist.

Schritt 1: Coverblock hinzufügen

WordPress-Post-Editor mit einem Cover-Block, der in die Inhaltsleinwand eingefügt wurde. Das Ausrichtungssteuerelement ist in der Symbolleiste geöffnet.
Cover-Block mit linksbündigem Inhalt.

Fügen Sie für diesen Schritt einen neuen Cover-Block zusammen mit Ihrem bevorzugten Bild ein. Die meisten Einstellungen werden keine Rolle spielen. Ich habe die Optionen für volle Höhe und volle Breite umgeschaltet.

Der wichtigste Teil dieses Schritts besteht darin, eine Option aus dem Inhaltsausrichtungsmatrix-Steuerelement auszuwählen. In der Symbolleiste wird es ein Symbol mit neun winzigen Quadraten, fast Punkten, sein (siehe Screenshot). Um die Blöcke aus den nächsten Schritten in der linken Mitte des Containers auszurichten, wählen Sie den ersten "Punkt" in der zweiten Zeile aus. Natürlich können Sie gerne mit verschiedenen Optionen herumspielen.

Alles andere am Cover-Design liegt bei Ihnen.

Schritt 2: Hinzufügen einer Gruppe mit fester Breite

WordPress-Post-Editor mit einem Gruppenblock, der in einem Cover verschachtelt ist.  In der Seitenleiste hat die Gruppe eine eingestellte Breite von 40rem.
Hinzufügen eines Gruppenblocks mit einer bestimmten Breite.

Um den Inhalt zu enthalten, den Sie in Schritt #3 hinzufügen, fügen Sie einen Gruppenblock in das Cover aus Schritt #1 ein.

Die Registerkarte "Layout" in der Blockseitenleiste enthält die einzigen notwendigen Optionen, die Sie einstellen müssen. Sie müssen den Inhalt und die breiten Optionen definieren.

Dies ist der Punkt, an dem ich in meinen früheren Tests auf eine Straßensperre gestoßen bin. Prozent (%) verhalten sich Einheiten anders als alle anderen. Bei Verwendung hat der Group-Block immer die volle Breite, und sein Inhalt ist immer zentriert. Keine anderen haben dieses Problem. Allerdings können nicht alle von ihnen für dieses spezielle Layout verwendet werden. Ansichtsfensterbreite (vw) und Viewport-Höhe (vh) Einheiten wird wie erwartet ausgerichtet, aber auf kleineren Geräten nicht über den Bildschirm erweitert.

Es ist wichtig, sich daran zu erinnern, einen festen Einheitentyp zu verwenden, z. B. px, emoder rem. Sie können auch "Standardlayout erben" auswählen, aber wie es sich verhält, hängt von Ihrem aktiven Design ab.

Ich habe sowohl die Inhalts- als auch die Breitenoptionen auf 40rem (Für diese Art von Design muss die Einstellung "Breit" nicht größer als "Inhalt" sein.) Technisch gesehen ist dies ein Wert für die maximale Breite und nicht eine feste Breite. Dadurch kann es sich an kleinere Bildschirmgrößen anpassen.

Schritt 3: Hinzufügen von Inhalten

WordPress-Post-Editor mit einem linksbündigen Überschriften-, Absatz- und Schaltflächenblock innerhalb einer Gruppe, die in einem Container verschachtelt ist.
Hinzufügen von benutzerdefiniertem Inhalt.

Für den letzten Schritt müssen Sie lediglich Ihre bevorzugten Inhalte aus Schritt #2 innerhalb der Gruppe hinzufügen. Ich habe mich für das Hinzufügen von Überschriften-, Absatz- und Schaltflächenblöcken entschieden. Dies kann alles sein, was Sie wollen - es gibt keine Regeln.

Bauen mit einem Stapelblock

WordPress 6.0 wird eine neue Stack-Variante des Gruppenblocks einführen. Anstelle des typischen Top-Down-Flows handelt es sich um ein vertikales Flex-Layout. Ich habe diesen neuen Block in der Gutenberg 13.0 Release-Beitrag diese Woche.

Um die folgende Technik zu testen, müssen Sie entweder WordPress 6.0 Beta 1 oder die neueste Version des Gutenberg-Plugins installieren. Die alternative Möglichkeit besteht darin, einige Wochen auf die allgemeine Veröffentlichung zu warten.

Schritt 1: Hinzufügen eines Stack-Blocks

WordPress-Post-Editor mit eingefügtem Stack-Block, der einen bunten Farbverlaufshintergrund hat.  Das Symbolleistensteuerelement für die Inhaltsausrichtung wird mit den Elementen links ausgewählt.
Hinzufügen eines Stacks und Ausrichten des Inhalts nach links.

Fügen Sie im ersten Schritt einen neuen Stack-Block in die Inhaltsanzeige ein. Sie können wählen, ob Sie ihm eine Hintergrundfarbe oder einen Farbverlauf geben möchten. Ich habe mich für Letzteres entschieden, damit die Dinge Spaß machen.

Im Gegensatz zum Group-Block verfügt Stack über Inhaltsbegründungssteuerelemente. Wenn Sie es durch den ersten Teil dieses Tutorials geschafft haben, sollten Sie wahrscheinlich bereits wissen, wohin ich damit gehe. In der Seitenleiste befindet sich ein "Justification"-Steuerelement zum Ausrichten verschachtelter Blöcke links, zentriert oder rechts. Eine Duplikatoption befindet sich ebenfalls in der Symbolleiste.

Wie beim Cover-Block können Sie gerne mit den Optionen herumspielen. Andernfalls setzen Sie es auf "links", um mitzumachen.

Schritt 2–3: Spülen und wiederholen

WordPress-Post-Editor mit Überschrift, Absatz und Schaltflächen, die in einem linksbündigen Gruppenblock innerhalb eines Stack-Blocks verschachtelt sind.
Gruppe mit fester Breite, die links innerhalb einer Stack-Variante ausgerichtet ist.

Die Schritte #2 und #3 sind buchstäblich die gleichen wie bei Verwendung des Cover-Blocks als Außencontainer. Daher müssen Sie nur den zuvor beschriebenen Vorgang wiederholen. Auch hier ist es am wichtigsten, eine feste Breite für den Gruppenblock zu definieren.


Dies war nach der Frustration, die ich letzte Woche hatte, überraschend einfach. Dies ist auch ein Beispiel dafür, wie mächtig der Blockeditor geworden ist und wie die Benutzererfahrung manchmal nicht den Erwartungen entsprechen kann. Wenn ich als jemand, der WordPress fast jeden wachen Moment lebt und atmet, auf Straßensperren stoße, stoßen andere Benutzer wahrscheinlich auf dieselben Probleme. Ich hoffe, dass ich in diesem Tutorial zumindest einen Aspekt des Layout-Aufbaus ein wenig beleuchtet habe.

Quelle


Dieser Artikel ist im Original von wptavern.com und wurde übersetzt
https://wptavern.com/how-to-align-a-nested-partial-width-group-block-via-the-wordpress-editor

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