Benutzerdefiniertes Styling für WordPress-Gutenberg-Blöcke: Teil 1

Es ist eine aufregende Zeit als WordPress-Entwickler, denn die offizielle Veröffentlichung von Version 5.0 steht vor der Tür. Dies wird das Debüt eines neuen Editors mit dem Codenamen Gutenberg sein. Wenn Sie regelmäßig mit WordPress zu tun haben, sei es als Entwickler oder als Benutzer, dann verstehen Sie wahrscheinlich, warum das eine große Neuigkeit ist.

Allerdings freuen sich nicht alle auf die neue Version, da sie WordPress ein ganz anderes Bearbeitungserlebnis bietet. Es besteht eine gewisse Unsicherheit darüber, wie sich dies auf das breitere WordPress-Ökosystem auswirken wird. Der neue Editor hat jedoch das Potenzial, die Art und Weise, wie Sie Inhalte für Ihre WordPress-Site erstellen, zu revolutionieren. Auch wenn es insgesamt auf anfänglichen Widerstand stößt, denke ich, dass es letztendlich eine greifbarere Verbindung zu Ihren Inhalten herstellen kann, als es der klassische TinyMCE-Editor nicht kann

Sie können den neuen Editor vor der geplanten Veröffentlichung von WordPress 5.0 ausprobieren, indem Sie das Gutenberg-Plugin aus dem WordPress-Plugin-Repository installieren. Wenn Sie noch keine Gelegenheit hatten, es auszuprobieren, empfehle ich Ihnen dringend, dies zu tun, um eine Vorschau auf Ihr zukünftiges Bearbeitungserlebnis in WordPress zu erhalten!

Das Erstellen von Inhalten im neuen Editor basiert vollständig auf Blöcken. Jeder Inhalt, den Sie dem Editor hinzufügen, ist ein Block. Dazu gehören alle Ihre Lieblingselemente wie Schieberegler, Absätze, Schaltflächen, Listen, Bilder, Erfahrungsberichte und mehr. Nachdem Sie einen Block zum Editor hinzugefügt haben, können Sie Einstellungen konfigurieren, die sein Aussehen und Verhalten steuern. Diese können am Block selbst oder über das Inspektorfenster (auf der rechten Seite des Editorbildschirms) bearbeitet werden. Blockeinstellungen werden manchmal an zwei Stellen wiederholt, dies ist jedoch von Block zu Block unterschiedlich.

Allerdings bieten fast alle Blöcke im Inspektorfeld die Möglichkeit, manuell einen oder mehrere CSS-Klassennamen hinzuzufügen, um eine weitere Anpassung des Blocks zu ermöglichen. Dies kann nützlich sein, wenn Sie den Stil eines Kernblocks oder eines Drittanbieterblocks überschreiben möchten.

Obwohl dies gut funktioniert, wäre es von Vorteil, dieses Verhalten zu erweitern und das Hinzufügen von Blockanpassungsoptionen durch eine Reihe vordefinierter Stilauswahlen zu ermöglichen. Genau das bringen uns Blockstiländerungen, und wir werden uns in diesem Tutorial speziell darauf konzentrieren.

Voraussetzungen

Wir werden uns auch damit befassen, wie Sie Blockstilvarianten zu Ihren eigenen Blöcken hinzufügen und bestehende Blöcke erweitern. Um fortzufahren, müssen Sie also idealerweise mit den Grundlagen der WordPress-Plugin-Entwicklung und der Erstellung von Blöcken vertraut sein.

Aber keine Panik – wenn Sie einen Crashkurs benötigen, schauen Sie sich mein vierteiliges Tutorial zum Erstellen benutzerdefinierter Blöcke an. Es deckt so ziemlich alles ab, was Sie in diesem Tutorial wissen müssen – mit Ausnahme der Blockstiländerungen, die im Mittelpunkt dieses speziellen Tutorials stehen!

Wenn Sie dem Code folgen und ihn selbst ausprobieren möchten, benötigen Sie außerdem einen lokalen Entwicklungsserver zum Ausführen von WordPress (z. B. WAMP, MAMP usw.) und einen Code-Editor.

Hintergrund

Die Block Style Variants API wurde mit Plugin v3.2 in Project Gutenberg eingeführt und ermöglicht es Ihnen, alternative Blockstile direkt über die Editor-Oberfläche anzuwenden.

Um die gleichen Ergebnisse zu erhalten, bevor sich der Blockstil ändert, müssen Sie die benutzerdefinierte CSS-Klasse manuell in das Textfeld Andere CSS-Klassen im Blockinspektor-Bedienfeld eingeben, das sich im Abschnitt Erweitert befindet.

Wenn Sie am ursprünglichen Vorschlag für die Blockstiländerungen interessiert sind, können Sie die vollständigen Details im Pull-Request im offiziellen Gutenberg-Repository lesen.

Auf jede für einen Block definierte Stilvariante kann direkt in der Blocksymbolleiste zugegriffen werden. Wählen Sie den Block aus und klicken Sie auf das Symbol in der oberen linken Ecke der Symbolleiste, um den Bereich „Blockstile“ anzuzeigen.

Erinnern Sie sich vorhin, als ich sagte, dass auf bestimmte Blockeinstellungen

und

Inspektionsgruppen direkt im Block zugegriffen werden kann? Genau das passiert bei Blockstiländerungen! Stellen Sie sicher, dass der Block ausgewählt und im Inspektorfenster angezeigt wird.

Dies dient der Bequemlichkeit und Sie können die Stilvariante auswählen, die am besten zu Ihnen passt. Auf größeren Bildschirmen können Sie beispielsweise Blockstile über das Inspektorfenster ändern, da Sie dort mit einem Mausklick zwischen Stilen wechseln können. Auf kleineren Geräten möchten Sie jedoch möglicherweise das Inspektorfeld ausblenden und den Stil einfach über die Blocksymbolleiste ändern.

Core-Block-Unterstützung

Einige Kernblöcke unterstützen derzeit Blockstilvarianten, darunter:

Knopf

• Zitat ziehen
• Zitat
• Separator
• Tisch
Ich bin mir sicher, dass in Zukunft weitere Kernblöcke unterstützt werden, wenn diese Funktion immer häufiger angenommen wird. Es ist sehr flexibel und ich bin sicher, dass sich viele Benutzer darauf freuen werden, für die meisten Blöcke aus den vordefinierten Styling-Optionen auszuwählen. Sobald Sie Blockstilvarianten verwenden, ist es leicht zu erkennen, warum dies geschieht.

Natürlich können Sie Ihren eigenen Blöcken auch Variationen des Blockstils hinzufügen. Als nächstes werden wir die spezifischen Implementierungsdetails besprechen.

Änderungen des Blockstils implementieren

Es gibt zwei Möglichkeiten, benutzerdefinierte Blockstiländerungen zu implementieren. Wenn Sie Zugriff auf die Blockdefinition haben, können Sie Blockstilvarianten direkt innerhalb der registerBlockType()-Funktion über das Stilattribut angeben.

So sieht beispielsweise die Definition des Attributs „Button Core Block Style“ aus.

styles: [
	{ name: 'default', label: _x( 'Rounded', 'block style' ), isDefault: true },
	{ name: 'outline', label: __( 'Outline' ) },
	{ name: 'squared', label: _x( 'Squared', 'block style' ) },
],

Hier sind drei neue Blockstilvarianten registriert. Beachten Sie, dass der Stil „Abgerundete Ecken“ auch als Standardstil festgelegt ist. Wenn Sie jedoch keinen Zugriff auf den Quellcode des Blocks haben, können Sie einen anderen Ansatz wählen. In Gutenberg 3.4 wurden zwei neue Funktionen hinzugefügt, um Blockstilvarianten von außerhalb der Blockdefinition zu registrieren und die Registrierung aufzuheben.

Um eine benutzerdefinierte Blockstilvariante zu registrieren, verwenden Sie die Funktion

wie folgt:

wp.blocks.registerBlockStyle( 'core/button', {
    name: 'custom-button-style',
    label: 'My Button Style'
} );

registerBlockStyle()Dadurch wird dem Kernschaltflächenblock eine neue Blockstilvariante namens hinzugefügt. Wenn Sie nun einen Schaltflächenblock in den Editor einfügen, werden Ihnen die neuen verfügbaren Blockstilvarianten angezeigt.

custom-button-style

Nach der Auswahl fügt die Blockstilvariante die

CSS-Klasse zum Textfeld

andere CSS-Klasseis-style-custom-将 Button-style im Blockinspektorfeld hinzu.

Dies wiederum löst eine Aktualisierung der Blockausgabe aus und die Klasse wird dem HTML-Markup hinzugefügt.

Sie fragen sich vielleicht, wo Sie die Funktion

in Ihren eigenen Code einfügen können. Keine Sorge, wir werden das vollständige Beispiel im nächsten Artikel behandeln und Sie können den endgültigen Plugin-Code herunterladen, damit Sie ihn selbst testen können.

registerBlockStyle()Eine kleine Frage!

Wenn Sie zum ersten Mal einen Block einfügen, der Blockstilvarianten unterstützt, sollten Sie beachten, dass dem Block-Tag keine CSS-Klassen hinzugefügt werden, bis Sie gezielt auf Blockstilvarianten klicken, selbst wenn eine davon als Standardauswahl angezeigt wird.

Probieren Sie es selbst aus.

Fügen Sie Ihren neuen Schaltflächenblock in den Editor ein und aktivieren Sie die Variationsoptionen für den Blockstil. Die Option „Abgerundete Ecken“ sollte standardmäßig ausgewählt sein. Wenn Sie den Abschnitt „Erweitert“ im Blockinspektor öffnen, wurde die CSS-Klasse nicht zum Textfeld hinzugefügt. Daher werden CSS-Klassen nicht in Block-Tags eingefügt. Sehen Sie sich die HTML-Ausgabe des Schaltflächenblocks im Editor an, um sich selbst zu überzeugen.

Gehen Sie nun zurück zu den Blockstilvarianten-Einstellungen des Schaltflächenblocks und klicken Sie auf die Standardoption (Ausgewählte Option) oder eine andere Blockstiloption. Sie werden sofort sehen, dass die CSS-Klasse zum Textfeld „Andere CSS-Klassen“ und zu den Block-Wrapper-Tags hinzugefügt wurde. Nach Auswahl einer Blockstilvariante werden auch alle für die benutzerdefinierte Klasse definierten benutzerdefinierten CSS-Regeln sofort angewendet. Dieses Verhalten ist auf den ersten Blick etwas verwirrend, da man intuitiv erwarten würde, dass CSS-Klassen automatisch für die standardmäßig ausgewählte Blockstilvariante hinzugefügt werden. Fazit

Wir haben erfahren, was Blockstilvarianten sind und warum sie eine nützliche Ergänzung zum Blockbearbeitungserlebnis darstellen. Ich demonstriere auch eine grundlegende Implementierung einer Blockstilvariante. Im nächsten Artikel erfahren Sie, wie Sie Ihre eigenen Blockstile registrieren und CSS über Plugins sowie Child-Themes anbinden.

Wir erfahren außerdem, wie Sie die Registrierung von Blockstilen aufheben und festlegen, welche Stilvariante standardmäßig ausgewählt wird, wenn ein Block zum ersten Mal in den Editor eingefügt wird.

Das obige ist der detaillierte Inhalt vonBenutzerdefiniertes Styling für WordPress-Gutenberg-Blöcke: Teil 1. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!