Neuaufbau der Flywheel-Preistabelle als benutzerdefinierten Block (in ca. 10 Minuten)

Veröffentlicht: 2021-03-31

Der (Gutenberg-)Blockeditor ist zweifellos das Zentrum des modernen WordPress. Mit der vollständigen Seitenbearbeitung auf dem Weg zu WordPress Core sind Blöcke und alles, was sie versprechen, hier, um zu bleiben.

Blöcke tun jedoch nicht immer das, was wir wollen oder sehen so aus, wie wir es möchten. Wenn Sie Websites entwerfen und erstellen, um Ihren Lebensunterhalt zu verdienen, wissen Sie, dass Cookie-Cutter-Sachen im Web nur begrenzt reichen. Irgendwann brauchen wir diesen „Block“ auf der Seite, um auf eine ganz bestimmte Art und Weise auszusehen oder sich zu verhalten.

Benutzerdefinierte Blöcke sind hier die Lösung! Aber benutzerdefinierte Blöcke erfordern für viele Leute, die schon seit einiger Zeit in WordPress unterwegs sind, einen ganz anderen Ansatz für die Entwicklung.

Anders? Ja!

Schwer? Nein!

Ich werde Ihnen zeigen, wie Sie ganz einfach einen vollständig benutzerdefinierten Block erstellen können. Und es wird ungefähr 10 Minuten dauern. Für alle Freiberufler oder Agenturteams hier, die sich im Blockeditor weiterbilden möchten, denke ich, dass Ihnen das gefallen wird!

Der Block

Stellen wir uns vor, wir arbeiten an einem Projekt und ein Designer gibt uns ein süßes Design für eine E-Commerce-Website. Es verwendet das Beste von WordPress + WooCommerce, aber es gibt ein paar Teile, die einfach nicht von der Stange funktionieren. Eines davon ist das hier:

Holup ! Das kommt mir bekannt vor!

Ja, wir werden die Flywheel-Preistabelle als benutzerdefinierten Block neu erstellen. ? Es gibt Plug-and-Play-Preistabellenblöcke, aber unsere hier ist ziemlich einzigartig, also werden wir unsere eigenen rollen.

Die Einrichtung

Der Held dieser Geschichte ist ein Plugin namens Genesis Custom Blocks. Es ist kostenlos auf wordpress.org und es gibt eine Pro-Version, die einige coole erweiterte Funktionen bietet, darunter:

Frische WordPress-Installation – Komplimente von Local
Genesis Custom Blocks (kostenlos) installiert und aktiv
Ein Child-Theme für das Genesis-Block-Theme

Wichtiger Hinweis: Genesis Custom Blocks ist nicht vom Genesis Framework, dem oben genannten Genesis Block Theme oder anderen Plugins oder Themes abhängig.

Registrieren und Konfigurieren des Blocks

Das Schöne an diesem Plugin ist, dass wir im WordPress-Admin so viel tun können.

Gehen Sie im WordPress-Adminbereich im Menü auf der linken Seite zu Benutzerdefinierte Blöcke > Neu hinzufügen

Der Bildschirm, den wir jetzt sehen, ist der Block Builder, in dem wir eine Reihe von Dingen für unseren Block konfigurieren werden, einschließlich des Hinzufügens von Feldern.

Dieses Plugin funktioniert so, dass es benutzerdefinierte Blöcke erstellt, in die der Benutzer, der im Blockeditor arbeitet, Inhalte und Daten über Felder in einer formularähnlichen Oberfläche eingibt. Diese vereinfachte/meinungsstarke Schnittstelle ist eines der Dinge, die den Prozess der benutzerdefinierten Blockerstellung beschleunigen. Sie müssen die Eingabe-UI nicht herausfinden.

Die von uns hinzugefügten Blockdetails sind:

Name: Preistabelle
Slug: Preistabelle
Symbol: Genesis-Planet

Die Felder, die wir hinzufügen, sind:

Name	Schnecke	Feldtyp
Symbol	Symbol	Bild
Name	Name	Text
Beschreibung	Bezeichnung	Text
Preis	Preis	Anzahl
Schaltflächen-URL	Button-URL	URL
Site-Zählung	Site-Anzahl	Anzahl
Monatliche Besuche	monatliche Besuche	Anzahl
Festplattenplatz	Festplattenplatz	Anzahl
Bandbreite	Bandbreite	Anzahl

Das Hinzufügen von Feldern zu unserem benutzerdefinierten Block sieht folgendermaßen aus:

Nachdem wir alle unsere Felder hinzugefügt haben, sieht es so aus:

Wenn wir auf „Veröffentlichen“ klicken, erhalten wir eine Eingabeaufforderung, die uns auffordert, was als nächstes zu tun ist.

Dies führt uns zum nächsten Schritt:

Templatieren des Blocks

Der Block ist jetzt tatsächlich registriert und im Blockeditor verfügbar. Sie können zu einem neuen Beitrag/einer neuen Seite springen und den Block wie jeden anderen hinzufügen. Es würde aber (noch) nichts anzeigen. Hier kommt das Templating ins Spiel.

Mit Genesis Custom Blocks können WordPress-Entwickler viele der Templating-Praktiken nutzen, die wir in den letzten zehn Jahren verfeinert haben. Es ist super einfach und wird sich sehr vertraut anfühlen.

In unserem Child-Theme fügen wir ein paar neue Ordner und Dateien wie diese hinzu:

/genesis-block-child-theme
    /blocks
        /pricing-table
            block.php
            block.css

Was Sie hier beachten sollten:

Wir fügen unserem Theme (Child-Theme) einen blocks -Ordner hinzu.
Wir fügen einen Ordner hinzu, der spezifisch für den Block ist, an dem wir gerade arbeiten, und benennen ihn wie auch immer der Block-Slug ist, was in diesem Fall pricing-table ist.
Wir fügen eine PHP-Datei und eine CSS-Datei hinzu. Hier werden wir unseren Vorlagencode hinzufügen.

Beginnen wir mit unserer PHP-Datei und beginnen wir mit unseren grundlegenden HTML-Markup- und CSS-Klassen.

Das wird so aussehen:

<div class="fw-pricing-table">
    <img src="">
    <h3 class="fw-pricing-table__name"></h3>
    <p class="fw-pricing-table__description"></p>
    <div class="fw-pricing-table__price">
        <span>$</span>
        <span></span>
        <span>/mo</span>
    </div>
	<a class="fw-pricing-table__btn" href="">Get Started</a>
	<div class="fw-pricing-table__site-count">
		<span></span>
		<span>WordPress Site</span>
	</div>
	<div class="fw-pricing-table__resources">
		<div>
			<p><span> monthly visits</span></p>
			<progress value="" max="400000"></progress>
		</div>
		<div>
			<p><span>GB Disk</span></p>
			<progress value="" max="50"></progress>
		</div>
		<div>
			<p><<span>GB bandwidth</span></p>
			<progress value="" max="500"></progress>
		</div>
	</div>
</div>

Dinge zu beachten:

Wir haben eine Reihe von CSS-Klassen bereit. Hinweis: Sie können das CSS angehen, wie es für Sie sinnvoll ist.
Wir werden das HTML-Tag <progress> verwenden, um unsere Ressourcenleisten zu handhaben.

Jetzt werden wir mit einer einfachen PHP-Funktion arbeiten, die uns das Plugin zur Verfügung stellt. Es gibt eine Menge davon, aber Sie werden wahrscheinlich die meiste Zeit damit verbringen, diese 2 unten zu verwenden. Wir verwenden ausschließlich die erste in diesem Block.

Funktion	Was es macht
`block_field()`	Ruft die vom Benutzer in das Feld eingegebenen Daten ab und gibt sie aus, wenn der Block zu einer Seite/einem Beitrag hinzugefügt wird.
`block_value()`	Ruft die vom Benutzer in das Feld eingegebenen Daten ab, wenn der Block zu einer Seite/einem Beitrag hinzugefügt wird.

Mit diesen Funktionen sieht unsere PHP-Vorlagendatei nun so aus:

<div class="fw-pricing-table">
    <img src="<?php block_field( 'icon' ); ?>">
    <h3 class="fw-pricing-table__name"><?php block_field( 'name' ); ?></h3>
    <p class="fw-pricing-table__description"><?php block_field( 'description' ); ?></p>
    <div class="fw-pricing-table__price">
        <span>$</span>
        <span><?php block_field( 'price' ); ?></span>
        <span>/mo</span>
    </div>
	<a class="fw-pricing-table__btn" href="<?php block_field( 'url' ); ?>">Get Started</a>
	<div class="fw-pricing-table__site-count">
		<span><?php block_field( 'site-count' ); ?></span>
		<span>WordPress Site</span>
	</div>
	<div class="fw-pricing-table__resources">
		<div>
			<p><?php block_field( 'monthly-visits' ); ?><span> monthly visits</span></p>
			<progress value="<?php block_field( 'monthly-visits' ); ?>" max="400000"></progress>
		</div>
		<div>
			<p><?php block_field( 'disk-space' ); ?><span>GB Disk</span></p>
			<progress value="<?php block_field( 'disk-space' ); ?>" max="50"></progress>
		</div>
		<div>
			<p><?php block_field( 'bandwidth' ); ?><span>GB bandwidth</span></p>
			<progress value="<?php block_field( 'bandwidth' ); ?>" max="500"></progress>
		</div>
	</div>
</div>

Sie können sehen, wo wir diese Funktion block_field() verwendet haben, um die Daten abzurufen und auszugeben. Wir verwenden einfach den Slug des Feldes als Argument in der Funktion. ZB block_field( 'icon' ) . Da es sich um einen Bildfeldtyp handelt, gibt dies die URL für dieses Bild zurück.

Für unser CSS platzieren wir dies in der Vorlagendatei block.css. Auch hier kann CSS nach Belieben gedreht werden, und der spezifische Code, den ich geschrieben habe, ist für dieses Tutorial nicht besonders relevant, aber ich lasse ihn hier, damit Sie ihn überprüfen können.

.fw-pricing-table {
    border-radius: 4px;
    transition: box-shadow .3s ease-in-out;
    border: 1px solid #e7e7e7;
    background-color: #fff;
    padding: 2rem 2em 4em;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.fw-pricing-table:hover {
    box-shadow: 0 5px 22px 0 rgb(0 0 0 / 10%);
}

.fw-pricing-table img {
    max-height: 100px;
    width: auto;
}

.fw-pricing-table__name {
    margin-top: 20px;
    font-weight: 400;
}

.fw-pricing-table__description {
    font-size: 16px;
    font-style: italic;
    font-family: serif;
    max-width: 160px;
}

.fw-pricing-table__price {
    color: #50c6db;
    display: flex;
    align-items: flex-start;
    font-size: 46px;
    font-weight: 500;
}

.fw-pricing-table__price span:last-child {
    font-size: 24px;
    margin-top: 6px;
}

.fw-pricing-table__btn {
    display: block;
    background-color: #338199;
    color: #fff;
    padding: 6px 20px;
    border-radius: 18px;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 500;
    margin-top: 10px;
}

.fw-pricing-table__btn:hover {
    background-color: #01516e;
    color: #fff;
}

.fw-pricing-table__site-count {
    font-size: 14px;
    margin-top: 24px;
    font-weight: 500;
    color: #50c6db;
    border-top: 1px solid #ddd;
    padding-top: 20px;
}

.fw-pricing-table__resources {
    margin-top: 8px;
}

.fw-pricing-table__resources>div {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.fw-pricing-table__resources p {
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 0;
    margin-top: 18px;
}

.fw-pricing-table__resources progress[value] {
    margin-top: 6px;
    -webkit-appearance: none;
    appearance: none;
    height: 6px;
    border: none;
    border-radius: 3px;
    overflow: hidden;
}

.fw-pricing-table__resources progress[value]::-webkit-progress-bar {
    background-color: #e7e7e7;
}

.fw-pricing-table__resources progress[value]::-webkit-progress-value {
    background-color: #50c6db;
    border-radius: 3px;
}

Der interessanteste Teil des CSS hier ist das Styling des <progress> -Tags. Etwas fummelig, aber so ist es. Sie könnten für diese zu einem verschachtelten div-Setup wechseln und festgelegte Breiten berechnen, wenn Sie <progress> vermeiden möchten.

Und das ist es! ?

Zusammenfassung:

Wir haben den Block im WP Admin hinzugefügt und konfiguriert
Wir haben eine PHP-Vorlagendatei mit schlappen 29 Zeilen grundlegendem HTML und einer einzigen PHP-Funktion erstellt
Wir haben für unser Styling etwas CSS in block.css .

Verwenden unseres benutzerdefinierten Blocks

Jetzt können wir also überspringen und einen neuen Beitrag oder eine neue Seite erstellen und den Block hinzufügen. Um diesen 4-Spalten-Stil für die Preisoptionen beizubehalten, fügen wir zuerst einen Spaltenblock hinzu und ziehen dann unseren benutzerdefinierten Preistabellenblock in jede Spalte.

Wenn Sie auf die Schaltfläche „Block hinzufügen“ klicken, können Sie hier sehen, dass unser Preistabellenblock einsatzbereit ist.

Das Folgende zeigt, wie ich vier Spalten habe und den benutzerdefinierten Block viermal hinzugefügt habe. Wenn ich einen einzelnen Block auswähle, können Sie sehen, wie er zur Formular-Benutzeroberfläche wechselt, die uns unsere Felder zum Einfügen von Inhalten gibt. Wenn Sie von der Formularansicht wegklicken, erhalten Sie die Vorschau.

Sieht im Blockeditor gut aus und sieht am Frontend genauso gut aus. Da wir auch den Spaltenblock nutzen, ist alles schön und reaktionsschnell.

Mit unseren Entwürfen, von denen aus wir arbeiten konnten und die uns auf den reaktionsschnellen Spaltenblock von Gutenberg stützen konnten, betrug die Gesamtbauzeit dieses Blocks für mich weniger als 10 Minuten.

Es gibt ein paar Dinge, die Sie tun könnten, um den Block noch weiter zu verbessern:

Es gibt ein paar Zeichenfolgen, die pluralisiert werden müssen. Das heißt, „WordPress Site“ sollte „WordPress Sites“ für Pläne mit mehr als 1 Site-Limit sein. Einige grundlegende Logik in der PHP-Vorlagendatei könnte dieses Problem lösen.
Sie könnten den Spaltenblock überspringen und stattdessen das Repeater-Feld (Pro-Funktion) verwenden und alle Pläne in einem einzigen Block enthalten.
Fügen Sie Kommas zu größeren Zahlen hinzu.
Die Fortschrittsbalken zeigen den genauen Wert für maximale Beziehungen. Das sieht etwas seltsam aus. Sie könnten zu etwas Konzeptuelleren der Werte wechseln.

Dinge einpacken

Wenn Sie diesen Block herunterladen und installieren möchten, können Sie die Dateien hier herunterladen. Eine Dokumentation zum Import benutzerdefinierter Blöcke finden Sie hier.

Weitere wichtige Links:

Das Plugin
Docs-Website
Genesis Slack-Community

Wenn Sie ein bisschen mehr von benutzerdefinierten Genesis-Blöcken in Aktion sehen möchten, habe ich kürzlich in einer Sitzung bei DE{CODE} vier separate benutzerdefinierte Blöcke (mit zunehmender Komplexität) in etwa 15 Minuten erstellt und demonstriert. Sehen Sie sich hier die On-Demand-Aufzeichnung an.

Ich hoffe, Sie fanden dies hilfreich und haben verstanden, wie einfach es ist, die Leistungsfähigkeit des Blockeditors für benutzerdefinierte Designs und Builds zu nutzen.

Beifall!

Erhalten Sie mit Flywheel kostenlosen Zugriff auf von Genesis entwickelte StudioPress-Designs!

Es ist wichtig, dass Ihr Hosting-Provider das Beste für Sie tut, und das geht über Leistung und Sicherheit hinaus! Mit Zugriff auf mehr als 35 von Genesis erstellte StudioPress-Designs ohne zusätzliche Kosten bietet Flywheel Ihnen eine schöne Bibliothek mit Designs, damit Sie Ihre Websites so erstellen oder neu konfigurieren können, wie es Ihren Website-Zielen entspricht! Erfahren Sie hier mehr über Schwungrad.