Lernen Gutenberg: Die Konstruktion Unserer Custom-Karte Sperren

0
18

Wir haben einige Basis-Kenntnisse, die wir gespielt haben, mit etwas zu Reagieren und jetzt haben wir unsere Projekt-tools einrichten. Lassen Sie uns Tauchen Sie ein in den Aufbau unserer benutzerdefinierten block.

Artikel-Serie:

  1. Serie Einführung
  2. Was ist Gutenberg, Eh?
  3. Eine Grundierung mit erstellen-guten-block
  4. Moderne JavaScript-Syntax
  5. Reagieren 101
  6. Einrichten einer Benutzerdefinierten webpack
  7. Eine Eigene “Karte” – Block (Dieser Beitrag)

Was wir bauen

Wir bauen eine eigene Karte block mit einem Bild, einem Titel und einer Zusammenfassung. Es ist eine wirklich gemeinsame Entwurfsmuster in der web-und auch lassen Sie uns einen Blick auf einige Kern-Gutenberg-Komponenten, zusammen mit core-WordPress-Elemente, wie die Medien-Bibliothek. Wir spielen auch mit einigen display-Logik mit JSX für die front-end-markup.

Unsere herrliche benutzerdefinierte Karte sperren!!

Unsere herrliche benutzerdefinierte Karte sperren!!

Wir konzentrieren uns ausschließlich auf das CMS Aspekt dieser block in diesem tutorial. Was es macht ist etwas schönes sauberes markup auf das front-end allerdings. Sie erweitern konnten diese block-Funktion-front-end-Stile zu, wenn Sie wollten.

Erste Schritte

Das erste, was wir tun werden, ist, eröffnen die block.js Datei, die wir im vorherigen Abschnitt erstellt haben. In Ihrer aktiven plugin-Ordner, dieser befindet sich auf blocks/src/block/block.js.

Wenn Sie aus der Datei-Struktur erstellt mit create-guten-block, möchten Sie vielleicht zu starten, indem Sie löschen alles in block.js und schreiben Sie Ihren code von Grund auf neu zusammen mit dem tutorial.

Gleich am Anfang dieser Datei Folgendes hinzu:

const { registerBlockType, RichText, MediaUpload, Klartext } = wp.Blöcke;
const { Taste } = wp.Komponenten;

Wir deckten destructuring assignments in Teil 3. Dies ist ein großartiges Beispiel für diejenigen, die Sie werden sehen, eine Menge in der Gutenberg-code. Hier wp.Bauteile, die mit mehr als Button, aber das ist alles, was wir wollen, so dass alles, was wir bekommen. Es ist ein tolles, weil es uns daran hindert, zu schreiben, Sachen wie wp.Komponenten.- Taste, das wird großartig für das halten unseren code schön und leicht.

Wir haben aufgeräumt, also wollen wir importieren unsere Sass-Dateien. Dies ist so, dass webpack erkennt.

import./Stil.scss’;
import./editor.scss’;

Lassen Sie uns nun mit dem schreiben beginnen die Komponente, die unsere Kräfte blockieren. Direkt unter diesen Zeilen, fügen Sie die folgenden:

registerBlockType (“Karte-sperren/main’, {
Titel: ‘Karte’,
Symbol: ‘Herz’,
Kategorie: ‘common’
});

Dieser code sagt Gutenberg, “Hey, ich habe einen block für Sie zu Ihrer Sammlung hinzuzufügen. Es nennt sich “Karte”, es hat ein “Herz” – Symbol und es sollte Leben in der ‘common’ – Kategorie.” Dies ist unsere Komponente grundlegende definition, also fügen wir etwas code.

Dies sollte Ihnen bekannt vorkommen—nicht vergessen, unsere Herausforderung in Teil 2 erstellen-guten-block? In den Fall, Sie brauchen, erinnern, überprüfen Sie es heraus hier. Die ersten sechs von diesen waren relativ einfach, und die beteiligten Zeichenfolgen ersetzen oder wenig HTML. Der siebte Eintrag, “Machen Sie den text des Absatzes bearbeitet werden,” viel komplizierter in der Umsetzung und soll man denken, ein bisschen. Die Zeit ist gekommen, aber, und wir werden in der Tat machen einige text editierbar in Gutenberg!

Sie können auch diese erkennen registerBlockType Funktion aus der PHP-register_block_type-Funktion, die wir in den letzten Artikel. Während die Funktion registriert einen block von der server-Seite von WordPress, das man registriert sich unser block in das ökosystem Reagieren auf die client-Seite. Beide sind notwendig, um einen block verwendet, zu Reagieren, und Ihren registrierten Namen, card-block/main müssen übereinstimmen.

Fügen Sie den folgenden code, aber stellen Sie sicher, Sie setzen Sie ein Komma nach dem “gemeinsamen”, also es sieht wie folgt aus: ‘Allgemeine’,.

Hier der code:

Attribute: {
Titel: {
Quelle: ‘text’,
selector: ‘.Karte__title’
},
Körper: {
Typ: ‘array’,
Quelle: “Kinder”,
selector: ‘.Karte__body’
},
imageAlt: {
Attribut: ‘alt’,
selector: ‘.Karte__ – Bild’
},
imageUrl: {
Attribut: ‘src’,
selector: ‘.Karte__ – Bild’
}
}

Hier definieren wir die editierbaren Attribute von unserem block und der DOM-Selektor, denen Sie zugeordnet sind. Dieses Attribut-Objekt funktioniert in einer sehr ähnlichen Art und Weise zu Reagieren die state-Objekt. Es hat sogar eine sehr ähnliche Update-Methode aufgerufen setAttributes. Dazu kommen wir später wenn.

An dieser Stelle lohnt es sich einen kurzen überblick über Status und Attribute, denn Sie stellen eine völlig neue Art des Denkens für WordPress-Entwickler. Mache ich für einen moment, um über Sie gehen.

Über Attribute und Zustand

Es mag vielleicht Aussehen wie ein einfaches JavaScript-Objekt, aber das Stück von Parametern führt eine ganze Schneise der neue Konzepte, um ein WordPress-theme developer ‘ s Gehirn, nicht zuletzt von denen ist – Zustand. Das Konzept der Staat hat eine lange Geschichte in der informatik und das Leben im Allgemeinen, wirklich. Fast alles hat einen Zustand. In welchem Zustand ist Ihre Tasse Kaffee jetzt? Leer, fast leer? Was ist mit Ihrer Kleidung? Sind deine Schuhe schmutzig oder neue? Wie Sie über Ihren Körper? Sind Sie müde oder hellwach?

Auf einem hohen Niveau, Zustand bezieht sich lediglich auf den gegenwärtigen Zustand einer Sache. In der informatik, das Ding ist ein computer-Programm, und das Programm kann viel, viel einfacher als das, was wir hier erstellen, auf der web. Nehmen Sie einen Automaten, zum Beispiel. Der Automat hat einen Zustand, der jedes mal aktualisiert, wenn Sie in eine Münze. Wenn der Zustand der Maschine erreicht einen vordefinierten Betrag, sagen wir $1.25, der die Maschine kennt, um Ihnen zu erlauben, um Ihren snack Wahl.

In Gutenberg, Attribute track den gegenwärtigen Zustand der Daten in einem block. Attribute sind die nächsten parallelen können wir ziehen, um benutzerdefinierte Felder in Gutenberg, aber Sie existieren nur im Kontext von Gutenberg und JavaScript. Nehmen wir das Attribut oben für den Titel, zum Beispiel:

Titel: {
Quelle: ‘text’,
selector: ‘Karte__title’
},

Wenn Gutenberg feuert bis es sagt, “ich brauche zu finden etwas text in den Selektor genannt .Karte__Titel, und füllen Sie den Wert für die Titel mit dem, was ich finde.”

Attribute in Gutenberg sind nicht direkt mit der Datenbank verbunden, wie benutzerdefinierte Felder verbunden sind post_meta. Die Einträge, die Quelle, und der Selektor, werden die Anweisungen für Gutenberg, die zum Auffüllen der Staat von jedem block. Wenn wir laden, bis der editor, es folgt diesen Anweisungen und weist ihm einen Wert zu Titel basierend auf dem markup in der Datenbank gespeichert, zwischen den HTML-Kommentare, die angeben, dass ein block dieses Typs. Wir sehen nicht den Wert der Titel in den Attributen, die wir registrieren, aber wenn ich access-Requisiten.Attribute.Titel, die ich bekommen würde, was auch immer text vorhanden ist .Karte__ – Titel.

Wir haben einige Grundlagen, so lassen Sie uns Tauchen Sie ein in unsere edit-Funktion. Dies ist, was heißt, wenn der block zugegriffen wird, der von der Gutenberg-editor im visuellen Modus. Die Benutzer finden das rich-Schnittstelle, anstatt den HTML-code, den es erzeugt. Das ist, was ich werde weiter.

Fügen Sie unsere edit-Funktion

Lassen Sie ‘ s fügen Sie einige code, in. Fügen Sie den folgenden nach der schließenden } der Attribute-Objekt. Wie vor, stellen Sie sicher Sie hinzufügen eine nachgestellte Komma, so wie es aussieht },.

Fügen Sie den folgenden code nach:

edit({ Attribute className, setAttributes }) {
return (
);
}

So, wir sind mit einem anderen destructuring assignment selektiv Holen unsere übergebenen Parameter auf der edit-Funktion. Sind die beiden wichtigsten Attribute und setAttributes. Die Attribute der parameter ist die gleiche wie die Attribute block, aber es ist die aktuelle, reaktive Zustand. Das heißt, wenn die Funktion setAttributes updates eines der Attribute Werte, wird es automatisch zu aktualisieren, überall, das darauf verweist, die der unseren ähnlich Reagieren Komponente von Teil 3.

Es gibt eine große ol’ return in dieser Funktion. Können Sie erraten, was Los ist? Yup! Wir kleben einige JSX drin. Fügen Sie den folgenden innerhalb der Rückkehr Klammern:

<div className=”container”>
<MediaUpload
onSelect={ Medien => { setAttributes({ imageAlt: Medien.alt, ” imageUrl: Medien.url }); } }
type=”image”
Wert={ Attribute.imageID }
render={ ({ offen }) => getImageButton(offen) }
/>
<PlainText
onChange={ content => setAttributes({ title: content }) }
Wert={ Attribute.title }
placeholder=”Ihre Karte Titel”
className=”überschrift”
/>
<RichText
onChange={ content => setAttributes({ body: Inhalt }) }
Wert={ Attribute.Körper }
multiline=”p”
placeholder=”Ihre Karte mit text”
/>
</div>

OK, es gibt eine Menge Los hier, aber es ist alles Sachen, die wir abgedeckt haben in den vorangegangenen teilen dieser Serie. Was wir hier haben ist ein container mit drei vorhandenen Gutenberg-Komponenten. Für jeden, wir setzen der entsprechenden Attribut als Wert, einen entsprechenden Platzhalter und ein onChange – /onSelect-handler. Wir sind auch die übergabe eines custom renderer <MediaUpload />, wir werden in Kürze cover.

Jedes onChange-handler ist eine handliche, wenig Ausdruck, übergibt die neuen Inhalte, die der Auslöser für den onChange-in der Funktion setAttributes, wo wir die Attribute-Objekt zu aktualisieren. Dieses update anschließend Kaskaden in jeder Referenz zu einem Attribut, wo der Inhalt wird aktualisiert, wie von Zauberhand. Die <MediaUpload / > – element verfügt über eine onSelect-Ereignis, das ausgelöst wird, wenn der Benutzer auswählt, oder lädt ein Element hoch auf die Medien-Bibliothek.

Apropos <MediaUpload / > – element, werden Sie feststellen, es gibt eine benutzerdefinierte render-Attribut verweist auf eine getImageButton Funktion. Schreiben wir das nächste. Über die Rückkehr in die Bearbeiten-Funktion fügen Sie die folgenden:

const getImageButton = (openEvent) => {
if(Attribute.imageUrl) {
return (
<img
src={ Attribute.imageUrl }
onClick={ openEvent }
className=”image”
/>
);
}
else {
return (
<div className=”button-container”>
<- Taste
onClick={ openEvent }
className=”button button-large”
>
Wählen Sie ein Bild
</Button>
</div>
);
}
};

Was diese Funktion tut, ist, die erkennt, ob es ein imageUrl im Attribute-Objekt. Wenn es heißt, es werde Rendern, <img / > – tag und lassen Sie sich ein Benutzer klicken Sie auf es, wählen Sie einen anderen. Wenn es kein Bild, werde es machen eine WordPress <Button /> in dem der Benutzer aufgefordert zu wählen ein Bild aus. Diese ruft die gleiche openEvent, wurde an die Funktion übergeben.

Um Dinge einfach zu halten in diesem Lernprogramm haben wir gebunden ein Klick auf das <img / > – element. Sie sollten darüber nachdenken, etwas ausgefallenes, das nutzt ein <button /> für Ihre Produktion-ready-Blöcke, für eine bessere Barrierefreiheit.

Rechts, das ist unser edit-Funktion getan. Nicht viel code es, zu überlegen, was Sie eigentlich macht, das ist toll!

Fügen Sie unsere save-Funktion

Wir haben unsere Gutenberg-editor-Ende des Blocks geschrieben jetzt, das ist der harte Teil. Alles was wir jetzt zu tun haben, zu erzählen, Gutenberg, was wir wollen, dass der block mit dem Gehalt zu tun. Mit der gleichen reaktiven Daten aus Parametern, können wir machen, unsere front-end-markup in Echtzeit, zu. Das bedeutet, dass, wenn jemand wechselt in den HTML-Bearbeiten-Modus auf den block, es wird auf dem neuesten Stand. Wenn Sie Sie Bearbeiten im HTML-Bearbeiten-Modus, der visuelle Modus wird auch aktuell gehalten werden. Super nützlich.

Lassen Sie uns in Graben dann. Nach unserer edit-Funktion, fügen Sie ein Komma, so wie es aussieht }, und fügen Sie dann den folgenden in einer neuen Zeile:

save({ Attribute }) {

const cardImage = (src, alt) => {
if(!src) return null;

wenn Sie(alt) {
return (
<img
className=”Karte – __ – Bild”
src= ” { src }
alt={ alt }
/>
);
}

// Ohne alt-Taste gesetzt, so lassen Sie es ausblenden von Bildschirm-Lesegeräte
return (
<img
className=”Karte – __ – Bild”
src= ” { src }
alt=””
aria-hidden=”true”
/>
);
};

return (
<div className=”Karte”>
{ cardImage(Parametern.imageUrl-Attribute.imageAlt) }
<div className=”Karte__content”>
<h3 className=”Karte__title”>{ Attribute.title }</h3>
<div className=”Karte__body”>
{ Attribute.Körper }
</div>
</div>
</div>
);
}

Sieht ziemlich ähnlich wie die edit-Funktion, richtig? Lassen Sie uns Schritt für Schritt durch.

Wir starten durch mit einem destructuring assignment zu ziehen, um die Attribute der übergebenen Parameter, wie die bisherigen edit-Funktion.

Dann haben wir ein anderes image helper-Funktion, die zunächst erkennt, ob es ein Bild und gibt null zurück, wenn es nicht. Denken Sie daran: wir geben null zurück, in JSX, wenn wir wollen, dass es zu Rendern nichts. Das nächste, was dieser Helfer macht ist das Rendern einer leicht abgeänderten <img / > – tag, wenn es mit alt-text oder nicht. Für die letztere, es blendet es von einem screen-reader durch das hinzufügen von aria-hidden=”true” und setzen Sie ein leeres alt-Attribut.

Schließlich ist unsere Rückkehr spuckt eine schöne .Karte block mit sauberem, BEM-driven-markup, die Last auf dem front-end von unserem Thema.

Und das ist, dass für unsere save-Funktion. Wir sind so nahe mit einem abgeschlossenen block. Nur noch ein Schritt zu gehen!

Fügen Sie einige Stil

OK, wir haben diese wenig zu tun, und wir sind fertig. Die aufmerksamen unter Euch vielleicht bemerkt haben, einige Referenzen auf den Klassennamen verstreut. Diese verweisen auf unseren editor.scss Regeln, also fügen wir Sie ein.

Öffnen editor.scss, die wohnt im gleichen Verzeichnis wie block.js. Fügen Sie den folgenden:

@import “../common’;

.gutenberg {

.container {
border: 1px solid $gray;
Polsterung: 1rem;
}

.button-container {
text-align: center;
Polsterung: 22% 0;
hintergrund: $off-white;
border: 1px solid $gray;
border-radius: 2px;
margin: 0 0 1.2 rem 0;
}

.überschrift {
font-size: 1.5 rem;
font-weight: 600;
}

.Bild {
Höhe: 15.7 rem;
width: 100%;
object-fit: cover;
}
}

Dies ist ein paar lockere CSS, um unseren block eine Karte-Stil. Hinweis es ist alles verschachtelt in einem .gutenberg-Klasse? Dies ist die Schlacht, die Spezifität von einigen core-Stile. Im editor gibt es eine <div class=”gutenberg” gewickelt um den block-Bereich der post-editor-Bildschirm, so können wir sicherstellen, dass sich nur auf diejenigen Elemente, die mit dieser Schachtelung. Sie werden wahrscheinlich auch feststellen, dass wir das importieren eines anderen Sass-Datei, also lassen Sie uns füllen.

Öffnen common.scss, die Leben in das src-Verzeichnis, welches ist das übergeordnete Element des aktuellen block-Verzeichnis, das wir haben.

/*
* Gemeinsame SCSS enthalten kann, die Ihre gemeinsamen Variablen, die Helfer und Mixins in Verbindung
* das gemeinsame zwischen all den Blöcken.
*/

// Farben
$gray: #cccccc;
$off-weiß: #f1f1f1;

Trotzdem, erraten, was? Wir haben nur gegangen und erstellt eine custom-Karte sperren!!! Lass es auf einen test-drive.

Prüfen Sie zunächst, Ihr block ist alles gut. Dies ist, was die vollständige block.js die Datei sollte wie folgt Aussehen:

const { registerBlockType, RichText, MediaUpload, Klartext } = wp.Blöcke;
const { Taste } = wp.Komponenten;

// Importieren unsere CSS-Dateien
import./Stil.scss’;
import./editor.scss’;

registerBlockType (“Karte-sperren/main’, {
Titel: ‘Karte’,
Symbol: ‘Herz’,
Kategorie: ‘Allgemeine’,
Attribute: {
Titel: {
Quelle: ‘text’,
selector: ‘.Karte__title’
},
Körper: {
Typ: ‘array’,
Quelle: “Kinder”,
selector: ‘.Karte__body’
},
imageAlt: {
Attribut: ‘alt’,
selector: ‘.Karte__ – Bild’
},
imageUrl: {
Attribut: ‘src’,
selector: ‘.Karte__ – Bild’
}
},
edit({ Attribute className, setAttributes }) {

const getImageButton = (openEvent) => {
if(Attribute.imageUrl) {
return (
<img
src={ Attribute.imageUrl }
onClick={ openEvent }
className=”image”
/>
);
}
else {
return (
<div className=”button-container”>
<- Taste
onClick={ openEvent }
className=”button button-large”
>
Wählen Sie ein Bild
</Button>
</div>
);
}
};

return (
<div className=”container”>
<MediaUpload
onSelect={ Medien => { setAttributes({ imageAlt: Medien.alt, ” imageUrl: Medien.url }); } }
type=”image”
Wert={ Attribute.imageID }
render={ ({ offen }) => getImageButton(offen) }
/>
<PlainText
onChange={ content => setAttributes({ title: content }) }
Wert={ Attribute.title }
placeholder=”Ihre Karte Titel”
className=”überschrift”
/>
<RichText
onChange={ content => setAttributes({ body: Inhalt }) }
Wert={ Attribute.Körper }
multiline=”p”
placeholder=”Ihre Karte mit text”
formattingControls={ [‘bold’, ‘italic’, ‘underline’] }
isSelected={ Attribute.isSelected }
/>
</div>
);

},

save({ Attribute }) {

const cardImage = (src, alt) => {
if(!src) return null;

wenn Sie(alt) {
return (
<img
className=”Karte – __ – Bild”
src= ” { src }
alt={ alt }
/>
);
}

// Ohne alt-Taste gesetzt, so lassen Sie es ausblenden von Bildschirm-Lesegeräte
return (
<img
className=”Karte – __ – Bild”
src= ” { src }
alt=””
aria-hidden=”true”
/>
);
};

return (
<div className=”Karte”>
{ cardImage(Parametern.imageUrl-Attribute.imageAlt) }
<div className=”Karte__content”>
<h3 className=”Karte__title”>{ Attribute.title }</h3>
<div className=”Karte__body”>
{ Attribute.Körper }
</div>
</div>
</div>
);
}
});

Wenn Sie zufrieden sind, lassen Sie das Feuer bis webpack. Während Sie in Ihrem aktuellen plugin-Verzeichnis im terminal ausführen:

npx webpack –Uhr

Dieses ist leicht unterschiedlich zum vorherigen Teil der Serie, da wir Hinzugefügt haben, wird –watch argument. Dies ist im Grunde hält ein Auge auf Ihre js-Dateien und re-runs webpack, wenn Sie sich ändern.

Starten Sie den editor!

Let ‘ s fire up-die Gutenberg-editor durch das laden eines Beitrags im WordPress-Backend. In der Gutenberg-editor, klicken Sie auf das kleine plus-Symbol und suchen Sie im “blocks” – Registerkarte, und da ist Sie: unsere neuen tollen Karte sperren!!

Gehen Sie voran und geben ihm eine Probefahrt und fügen Sie einige Inhalte drin. Fühlt sich gut an, richtig?

Hier ist ein kurzes video von dem, was Sie sehen werden, gerade jetzt, mit Ihrem schicken neuen Karte sperren:

Und mit, dass Sie fertig sind 🎉

Hier ist eine Sache, die Sie könnten denken: nicht die Blöcke eine Art Ersatz für die benutzerdefinierten Felder? Kann ich nun meine eigene Struktur der Inhalte direkt innerhalb von WordPress statt mit einem plugin wie Advanced Custom Fields? Nicht ganz…

Blöcke vs. Benutzerdefinierte Felder

Während Gutenberg nicht leisten, uns die Möglichkeit zur Anpassung der Struktur der Dateneingabe vom Benutzer Erfahrungen, die auf dem back-end ist es nicht anders als der aktuelle WYSIWYG-editor. Gespeicherten Daten von einem block ist Teil des post_content Spalte in der Datenbank-Tabelle wp_posts—es ist nicht separat gespeichert in wp_postmeta wie benutzerdefinierte Felder. Dies bedeutet, dass wir derzeit keinen Zugriff auf die Daten aus unserer Karte ein block von einem anderen post in der gleichen Art, wie wir könnten, wenn wir früher erstellte benutzerdefinierte Felder für Titel, Bild und Inhalt mit einem standard-Erweiterte Benutzerdefinierte Felder einrichten.

Das heißt, ich konnte sehen, einige wirklich interessante plugins auftauchen, die einen Weg zur port-Daten von einem block zum anderen Teile einer website. Mit dem WordPress-REST-API, die Möglichkeiten sind fast Grenzenlos! In unserem screencast, Andy und ich nahm einen Stich an, die ein API-Anforderung, die in unserer Karte sperren und das, obwohl die Dinge nicht so läuft, wie geplant, die Werkzeuge sind bereits vor Ort und Sie bekommen einen Eindruck davon, was möglich sein könnte, mit Gutenberg in die Zukunft. Die Zeit wird es zeigen!

Zusammenfassung und nächste Schritte

Was für eine Reise haben wir schon zusammen! Lassen Sie die Liste aus, was Sie gelernt haben, in dieser Serie:

  • Sie haben gelernt, einige zentrale, moderne JavaScript, indem Sie die Griffe mit ES6
  • Sie haben gelernt, die Grundlagen von JSX
  • Sie fand, dass neues wissen und ein Reagieren Komponente von Grund auf neu
  • Sie dann gelernt, wie webpack arbeiten und schrieb eine skalierbare config-Datei für die Gutenberg-block-Entwicklung
  • Schließlich, Sie gebaut benutzerdefinierte Gutenberg-Karten-block von Grund auf neu

Also, wo können Sie von hier aus gehen? Nun, du hast einige solide Basis von wissen aus dieser Serie, die Sie tun könnten, einige weitere lernen. Es gibt bereits fantastische Ressourcen für:

  • Schreiben des Ersten Blockes auf WordPress.org (Andy: das ist, wie ich gelernt, wie man Blöcke arbeiten)
  • Gutenberg-Kurse, die von Zac Gordon und Joe Casabona
  • Erstellen einer Benutzerdefinierten Gutenberg-Block von Pete Tasker
  • Anatomie einer Benutzerdefinierten Block von Morgan Kay
  • Tausend und eine Möglichkeiten, um Erweitern Gutenberg Heute von Riad Benguella
  • Gutenberg-Gespräche auf WordPress.tv

Einige interessante Fallbeispiele:

  • Die überwachung Ihrer WordPress-Plugin für Gutenberg
  • Gutenberg auf Humanmade.com
  • Moderne Stammes “Going Gutenberg”

Halten Sie ein Auge auf diese Ressourcen, um up to date bleiben mit dem Projekt:

  • Gutenberg-News
  • Gutenbergs Zeiten

Experimentelle Dinge mit Gutenberg:

  • Gutenberg-Benutzerdefinierte Felder plugin
  • Atomic-Blöcke, plugins und theme

Sobald Gutenberg wird Teil des WordPress-Kern in der version 5.0 (release date TBD), könnten Sie veröffentlichen auch eine nützliche benutzerdefinierte block in der WordPress-Plugin-Verzeichnis. Es ist definitiv Raum für einige praktische Komponenten wie die Karte sperren, Sie haben gerade gebaut.

Wir hoffen, Sie habe es genossen diese Serie, denn wir haben sicherlich genossen, es zu machen. Wir hoffen sehr, das dir hilft, zu Gutenberg und dass Sie bauen ein paar Coole Sachen. Sie sollten vollständig senden Sie uns die links der Sachen, die Sie gebaut haben, auch!

Artikel-Serie:

  1. Serie Einführung
  2. Was ist Gutenberg, Eh?
  3. Eine Grundierung mit erstellen-guten-block
  4. Moderne JavaScript-Syntax
  5. Reagieren 101
  6. Einrichten einer Benutzerdefinierten webpack
  7. Eine Eigene “Karte” – Block (Dieser Beitrag)