Das Styling der Gutenberg-Spalten-Block

0
29

WordPress 5.0 ist schnell näher, und die neuen Gutenberg-editor kommt mit. Es wurde viel Diskussion in der WordPress-community über das, was genau das bedeutet für Anwender, Designer und Entwickler. Und während Gutenberg ist sicher zu verbessern, die Erfahrung zu schreiben, es kann dazu führen, ein bisschen Kopfschmerzen für Entwickler, die Sie jetzt brauchen, um sicherzustellen, dass Ihre plugins und themes aktualisiert und kompatibel.

Eine der klarsten Möglichkeiten, wie Sie sicherstellen können, dass Ihre theme ist kompatibel mit WordPress 5.0 und Gutenberg ist, fügen Sie einige grundlegende Stile für die neuen Blöcke, die Gutenberg eingeführt. Neben der grundlegenden HTML-Blöcke (wie Absätzen, überschriften, Listen und Bilder), die wahrscheinlich bereits über Stile, Sie haben jetzt einige komplexe Blöcke, die Sie wahrscheinlich noch nicht bilanziert, wie pull-quotes, cover-Bilder, Schaltflächen und Spalten. In diesem Artikel nehmen wir einen Blick auf einige styling Konventionen für die Gutenberg-Blöcke, und dann unsere eigenen Stile für die Gutenberg-Spalten-block.

Block Namenskonventionen

First things First: wie werden die Gutenberg-Blöcke genannt? Wenn Sie vertraut sind mit dem code-Inspektor können Sie öffnen, bis auf eine Seite mit dem block, den Sie wollen, um Stil, und überprüfen Sie es für sich selbst:

Die Gutenberg-Pull-Zitat-block hat eine Klasse der wp-block-pullquote.

Nun, es könnte umständlich zu tun, dass für jede und jeden block, den Sie wollen, um Stil, und zum Glück gibt es eine Methode, um den Wahnsinn. Gutenberg-Blöcke verwenden eine form der Block, Element, Modifier (BEM) naming convention. Der Hauptunterschied ist, dass die top-level für jeden der Blöcke ist die wp . So, für unsere pull nennen, der name ist wp-block-pullquote. Spalten wäre wp-block-Spalten, und so weiter. Sie können mehr darüber Lesen Sie in der WordPress-Entwicklung-Handbuch.

Klasse name VORBEHALT

Es gibt eine kleine Einschränkung hier, dass der block-name kann nicht die einzige Klasse, die Namen, die Sie zu tun. Im obigen Beispiel sehen wir, dass die Klasse alignright wird auch angewandt. Und Gutenberg kommt mit zwei neuen Klassen: alignfull und alignwide. Du wirst sehen, in die Spalten, dass es auch eine Klasse, um uns zu sagen, wie viele es sind. Aber dazu kommen wir bald.

Die Anwendung Ihrer eigenen Klasse Namen

Gutenberg-Blöcke geben uns auch eine Möglichkeit, unsere eigenen Klassen:

Die Klasse Hinzugefügt, um die Optionen-panel in der Gutenberg-editor (Links). Es wird auf das element angewendet, wie in den DevTools (rechts).

Das ist großartig, wenn Sie wollen, um einen gemeinsamen Satz von Klassen für die Blöcke über verschiedene Themen anwenden möchten, die bisher vorhandenen Klassen zu den Blöcken, wo es Sinn macht, oder wollen, haben Variationen über die Blöcke.

Ähnlich wie die aktuelle (oder “Klassisch”) WordPress-post-editor, Gutenberg macht, so wenige Entscheidungen wie möglich für das vordere Ende, so dass die meisten der schwerarbeit zu uns. Diese enthält die Spalten, die im Grunde nur genügend styles zu machen, Sie bilden Säulen. So müssen wir hinzufügen, die Polsterung, Ränder und ansprechende styles.

Styling Spalten

Zeit, um zum Kern der Sache: let ‘ s Stil einige Spalten! Das erste, was wir tun müssen, ist zu finden ein Thema, das wir verwenden können. Es gibt nicht allzu viele, die umfangreiche Gutenberg-Unterstützung noch nicht, aber das ist eigentlich gut in unserem Fall. Stattdessen verwenden wir ein Thema, die flexibel genug, um uns einen guten Ausgangspunkt: Astra.

Astra ist kostenlos im WordPress-Theme-Verzeichnis. (Quelle)

Astra ist eine Kostenlose, schnelle und flexible Thema, das entworfen wurde, um die Arbeit mit den page-Builder. Das bedeutet, dass es kann geben uns ein wirklich guter Start Vorlage für die Spalten. Apropos, wir müssen einige Inhalte. Hier ist, was wir hier arbeiten Sie mit:

Unsere Säulen im inneren des Gutenberg-editor.

Wir haben ein drei-Spalten-layout mit Bildern, überschriften und text. Das Bild oben ist, was die Spalten Aussehen, wie in der Gutenberg-editor. Hier ist, was Sie sehen aus wie auf dem front-end:

Die Spalten auf dem front-end.

Sie können sehen, es gibt ein paar Unterschiede zwischen dem, was wir in den editor und was sehen wir auf dem front-end. Vor allem, es gibt keine Abstände zwischen den Säulen auf der Vorderseite. Das linke Ende der überschrift auf das vordere Ende ist auch angetreten mit dem linken Rand der ersten Spalte. Im editor ist es nicht, weil wir mit der alignfull Klasse.

Hinweis: aus Gründen der diesem tutorial, wir gehen zur Behandlung .alignfull, .alignwide, und keine Ausrichtung die gleiche ist, da die Astra-theme unterstützt nicht die neuen Klassen noch nicht.

Wie Gutenberg Spalten arbeiten

Nun, wir haben ein Thema, wir beantworten die Frage: “wie werden die Spalten in Gutenberg arbeiten?”

Bis vor kurzem waren Sie tatsächlich mithilfe von CSS-grid, aber wechselte dann zu flexbox. (Die Argumentation war, dass flexbox bietet erweiterte browser-Unterstützung.) Das heißt, die Modelle sind super leicht:

.wp-block-Spalten {
display: flex;
}

.wp-block-Spalte {
flex: 1;
}

Wir habe einen Stift mit den letzten Stilen, wenn Sie sehen wollen, das Ergebnis, das wir anstreben. Sie können sehen, dass es in Gutenberg ist nur die Definition des flexbox-und anschliessend jede Spalte sollte die gleiche Länge haben. Aber Sie werden auch bemerken, ein paar andere Dinge:

  • Der übergeordnete container ist wp-block-Spalten.
  • Es gibt auch die Klasse-3-Spalten, wobei die Anzahl von Spalten, für uns. Gutenberg-unterstützt überall von zwei bis sechs Spalten.
  • Die einzelnen Spalten haben die Klasse wp-block-Spalte.

Diese information ist genug für uns, um loszulegen.

Das Styling der Eltern

Da haben wir flexbox standardmäßig angewendet, ist die beste Aktion zu nehmen ist, stellen Sie sicher, dass diese Spalten sehen gut aus auf das vordere Ende in einem größeren Bildschirm Rahmen, wie wir früher gesehen haben.

In Erster Linie lassen Sie ‘ s fügen Sie einige Margen für diese, damit Sie nicht Ineinander verlaufen, oder anderen Elementen:

/* Fügen Sie vertikalen Raum zum atmen, um die vollständige Reihe von Spalten. */
.wp-block-Spalten {
margin: 20px 0;
}

/* Hinzufügen von horizontalen Raum zum atmen zwischen den einzelnen Spalten. */
.wp-block-Spalte {
margin: 0 20px;
}

Da ist es vernünftig, davon auszugehen, die Spalten werden nicht nur die Blöcke auf der Seite, haben wir die Ränder oben und unten auf das gesamte übergeordnete container, so gibt es einige Trennung zwischen den Spalten und andere Blöcke auf der Seite. Dann, so die Spalten laufen nicht gegeneinander, wir wenden die linken und rechten Ränder jeder einzelnen Spalte.

Spalten mit einigen Ränder Hinzugefügt.

Diese werden beginnt, sieht schon besser! Wenn Sie wollen, dass Sie Aussehen, mehr uniform, Sie können immer werfen text-align: justify; auf den Spalten zu.

Machen Sie die Spalten reaktionsschnell Weg

Das layout fällt auseinander, wenn wir uns bewegen, um kleinere Rasterweiten. Astra ist eine schöne Aufgabe mit der Verringerung der Schriftgrößen als wir nach unten verkleinern, aber wenn wir beginnen, um 764px, beginnen die Dinge ein wenig eng:

Unsere Säulen an 764px breit.

An diesem Punkt, da haben wir drei Spalten, können wir explizit Stil der Spalten mit Hilfe der .hat-3-Spalten-Klasse. Die einfachste Lösung wäre das entfernen flexbox insgesamt:

@media (max-width: 764px) {
.wp-block-Spalten.hat-3-Spalten {
display: block;
}
}

Dies würde konvertiert automatisch die Spalten in Blöcke. Alle würden wir jetzt tun müssen ist, passen Sie die Polsterung und wir sind gut zu gehen — es ist nicht die schönste Lösung, aber es ist lesbar. Ich würde gerne ein wenig mehr Kreativität, wenn. Stattdessen machen wir die erste Spalte den breitesten, und dann die beiden anderen bleiben die Spalten unter die erste.

Dies wird nur funktionieren, je nach Inhalt. Ich denke, hier ist es verzeihlich zu geben, Yoda Priorität als die bekanntesten Jedi-Meister.

Mal sehen, wie das aussieht:

@media screen and (max-width: 764px) {
.wp-block-Spalten.hat-3-Spalten {
flex-flow: row wrap;
}

.hat-3-Spalten .wp-block-Spalte:first-child {
flex-basis: 100%;
}
}

In den ersten paar Zeilen, nachdem die Medien-Abfrage, wir sind targeting .hat-3-Spalten zum ändern der flex-flow-Zeile umbrochen wird. Dieser sagt dem browser zu erlauben, die Spalten zu füllen Sie den Behälter aber wickeln, wenn nötig.

Dann, wir haben das Ziel der ersten Spalte .wp-block-Spalte:erste Kind und sagen wir dem browser, um die flex-basis 100%. Dieser sagt, “in die erste Spalte alle verfügbaren Platz auszufüllen.” Und da wir gerade wickeln Spalten, die beiden anderen werden automatisch auf die nächste Zeile. Unser Resultat ist dieses:

Unsere neu responsive Spalten.

Das schöne an diesem layout ist, dass mit der Zeile, wickeln Sie die Spalten werden in voller Breite auf den kleinsten Bildschirmen. Noch, wie Sie beginnen zu bekommen, schwer zu Lesen, bevor, dass, sollten wir finden, ein guter Haltepunkt, und legen Sie die Stile selbst. Um 478px sollten gut tun:

@media (max-width: 478px) {
.wp-block-Spalten.hat-3-Spalten {
display: block;
}

.wp-block-Spalte {
margin: 20px 0;
}
}

Dies entfernt die flex-layout, und kehrt die Margen auf den einzelnen Spalten, die Aufrechterhaltung der Abstand zwischen Ihnen, wie Sie sich in einem gestapelten layout.

Unsere kleine Bildschirm-layout.

Wieder können Sie sehen, alle diese Konzepte gemeinsam in die folgende demo:

Finden Sie die Stift-Gutenberg-Spalten von Joe Casabona (@jcasabona) auf CodePen.

Wenn Sie möchten, um zu sehen, eine andere live-Beispiel finden Sie hier.

Zusammenfassung

So dort haben Sie es! In diesem tutorial werden wir geprüft, wie sich die Gutenberg-Spalten-block funktioniert, ist es Klasse Namenskonventionen, und dann angewendet, basic styles, um die Spalten achten Sie gut auf jedem Bildschirm Größe auf dem front-end. Von hier aus können Sie nehmen Sie diesen code und führen Sie mit ihm — wir haben kaum an der Oberfläche gekratzt, und Sie können Tonnen mehr mit CSS allein. Zum Beispiel, vor kurzem habe ich diese Preisgestaltung-Tabelle mit nur-Gutenberg-Spalten:

(Live Demo)

Und, natürlich, es gibt die anderen Blöcke. Gutenberg legt sehr viel macht in die Hände der Redakteure, aber noch mehr in die Hände der theme-Entwickler. Wir brauchen nicht mehr, um die Infrastruktur aufzubauen für mehr tun, komplexe layouts in WordPress-editor, und wir müssen nicht mehr für die Benutzer anweisen, einfügen Kurzwahlnummern oder HTML zu bekommen, was muss auf einer Seite. Wir können hinzufügen, ein wenig CSS, um unsere Themen und lassen Sie die content-Ersteller tun den rest.

Wenn Sie möchten, um mehr in die Tiefe, in die Vorbereitung Ihrer Thema für Gutenberg, die Sie heraus überprüfen können meinen Kurs, Theming mit Gutenberg. Wir gehen über, wie Sie Stil, viele verschiedene Blöcke, legen Sie benutzerdefinierte Farbpaletten, block-Vorlagen, und vieles mehr.