In diesem Beitrag erfahren wir, wie wir die Symbolleisten von WordPress zu unserem Block hinzufügen, dh für die Ausrichtung und die Blockausrichtung. Wir werden auch lernen, unsere eigenen Symbolleisten mit unseren eigenen Schaltflächen für benutzerdefinierte Aktionen hinzuzufügen.
Symbolleisten hinzufügen
Um etwas zur Symbolleiste für unseren Block hinzuzufügen, müssen wir das, was wir wollen, in eine Komponente namens BlockControls(von wp.blockEditor) einpacken. Innerhalb dieser Komponente können wir entweder eine der WordPress-Komponenten für die Standard-Symbolleisten hinzufügen, die wir von anderen Blöcken kennen (z. B. Ausrichtung), oder wir können unsere eigene Symbolleiste hinzufügen.
Standardmäßig hat ein Block eine Symbolleiste, die nur das Symbol des Blocks enthält (für die Funktion Transformieren in) und das Blockmenü, um zB den Block zu entfernen. Wir können diese nicht entfernen, aber wir können unsere eigenen Schaltflächen und Symbolleisten dazwischen einfügen.
Einige bestimmte WordPress-Komponenten fügen jedoch von selbst ihre eigenen Symbolleisten hinzu. Ab sofort zeigt unser Block eine Symbolleiste für die Textformatierung, die aus der von RichTextuns hinzugefügten Komponente stammt.
Hinzufügen einer Blockausrichtungssymbolleiste
Die Symbolleiste für die Blockausrichtung existiert auf praktisch allen WordPress-Blocktypen, also fügen wir sie auch unserem Block hinzu. Hinter den Kulissen existiert eine Komponente BlockAlignmentToolbar, die wir hinzufügen könnten, aber ich empfehle es nicht. Wenn Sie es verwenden, müssen Sie die Klassen für die Blockausrichtung manuell handhaben und sicherstellen, dass der Block seine Breite im Editor erweitert, wenn Sie „Breite Breite” oder „Volle Breite” auswählen. Glücklicherweise hat WordPress es wirklich einfach gemacht, dies vollautomatisch zu implementieren.
PS: Das aktive Theme muss aktiv Theme-Unterstützung für diese beiden Blockausrichtungen hinzugefügt haben. Sie können Unterstützung für diese hinzufügen, indem Sie add_theme_support('align-wide')den after_setup_themeHaken haben.
Wir können unserer Objektkonfiguration in eine neue Eigenschaft registerBlockType()namens hinzufügen supports. Es gibt ein paar andere Funktionen, aber was uns hier interessiert, ist align. Wir können entweder festlegen align, truedass alle möglichen Ausrichtungen hinzugefügt werden, oder wir können ein Array bereitstellen, das genau angibt, welche Ausrichtungen wir für unseren Block zulassen.
Was uns das im Editor gibt:
Wenn Sie beispielsweise verhindern möchten, dass jemals jemand Wide Width oder Full Width verwendet, können Sie ein Array bereitstellen und diese beiden ausschließen. Die Namen der Blockausrichtungen lauten wie folgt: left, right, center, wide, und full.
supports: {
align: ['left', 'right', 'center']
},Benötigen Sie eine Standardausrichtung?
Standardmäßig erhält der Block keine Blockausrichtung. Wenn Sie möchten, können Sie einen Standard festlegen, indem Sie ein Attribut mit der Taste erstellen align, den Typ auf stringsetzen und dort den Standard festlegen. WordPress verbindet dieses Attribut automatisch mit der Blockausrichtung.
attributes: {
align: {
type: 'string',
default: 'center'
}
},
supports: {
align: true
},Damit ist die standardmäßige Blockausrichtung zentriert, wenn ein neuer Block unseres Typs erstellt wird.
Blockausrichtungs-Styling-Chaos? Nicht unsere Schuld
Hinweis: Das standardmäßige Block-Styling von WordPress wird den Fluss Ihrer Post-Inhalte durcheinander bringen, wenn Sie die linke und rechte Blockausrichtung verwenden. Das Gleiche passiert auch mit anderen Blocktypen von WordPress und ist nicht ausschließlich das Problem unseres Blocks. Dies wird durch das Hinzufügen von Float zum Element verursacht, wodurch das übergeordnete Element reduziert wird. Glauben Sie mir, ich habe versucht, den Block zu konstruieren, um dieses Problem zu vermeiden. Das einzige, was ich gefunden habe, um richtig zu funktionieren, ohne mit den anderen Blockausrichtungen herumzuspielen, ist das Hinzufügen von Stilen zum Editor und das Anpassen des Float-Stils.
Unabhängig davon hat WordPress es ziemlich einfach gemacht, die Blockausrichtung zu implementieren. Sehen wir uns nun andere Symbolleisten an, die wir verwenden können.
Hinzufügen einer Symbolleiste für die Textausrichtung
Wenn Sie die Symbolleiste lieber für die Textausrichtung wünschen, können Sie dies anstelle der Blockausrichtung tun – in dieser Symbolleiste haben wir nur linksbündig, zentriert und rechtsbündig. Tatsächlich können Sie sowohl die Textausrichtung als auch die Blockausrichtung zusammen verwenden – sie funktionieren separat. Um die Benutzer nicht zu verwirren, könnten Sie beispielsweise nur Unterstützung für die Blockausrichtung in Breite und voller Breite hinzufügen und die Symbolleiste für die Textausrichtung verwenden, um die linke, zentrierte oder rechte Ausrichtung zu steuern. Auf diese Weise vermeiden Sie das oben erwähnte Problem mit dem Blockfluss im Editor. Es liegt an Ihnen, wie Ihr Block funktionieren soll.
WordPress hat eine Komponente zur Ausgabe der Symbolleiste für die Textausrichtung, jedoch keine automatische Behandlung des Hinzufügens der richtigen Klassen, um den Inhalt tatsächlich auszurichten – sowohl innerhalb des Editors als auch im Frontend (soweit ich das zumindest gefunden habe!). Wir müssen ein Attribut für die Textausrichtung manuell hinzufügen und aktualisieren.
Hinzufügen BlockControlsundAlignmentToolbar
Lassen Sie uns endlich BlockControlsunsere editFunktion für unsere Ausgabe in der Symbolleiste hinzufügen. Die Komponente für die Textausrichtung stammt AlignmentToolbaraus dem wp.blockEditorPaket.
Beachten Sie, dass ich den Inhalt von allem, was wir im InspectorControlsvorherigen Schritt erstellt haben, ausgeschlossen habe, um den Code zu verkürzen.
Zwischen Zeile #37bis #42befindet sich der gesamte Inhalt unserer Symbolleiste (abgesehen von der automatisch von der Eigenschaft hinzugefügten Blockausrichtung und der von unseren Komponenten supportshinzugefügten Textformatierung ). RichTextWir verwenden BlockControls, um auf die Symbolleiste zuzugreifen, und darin fügen wir die AlignmentToolbarKomponente hinzu.
Wie wir es schon mehrmals mit Eingaben getan haben, stellen wir eine valueStütze zum Anzeigen des gespeicherten Werts und eine onChangeStütze zum Aktualisieren unseres Attributs für die AlignmentToolbarKomponente bereit. Das Attribut, das wir zum Speichern der gewählten Textausrichtung verwenden, ist definiert als textAlignmentund muss vom Typ sein string. Wie üblich können Sie ein defaultangeben, um sicherzustellen, dass neu erstellte Blöcke eine Standardausrichtung erhalten.
Um sicherzustellen, dass der Block sowohl die Ausrichtungsinformationen ausgibt als auch korrekt gestylt wird (so dass wir tatsächlich sehen, dass sich die Textausrichtung ändert), sowohl im Editor als auch im Frontend, müssen wir die richtige Klasse für das Wrapping-Div manuell einrichten. In both editund savedefiniere ich eine Variable, die prüft, ob attributes.textAlignmentgesetzt ist. Wenn dies der Fall ist, erstelle ich den Klassennamen gemäß den WordPress-Standards für Textausrichtungen, die „has-text-align-(left|center|right)” lauten. Mit dieser Klasse wendet WordPress sein Styling auf unseren Block an und stellt sicher, dass unser Block visuell korrekt ausgerichtet wird, sowohl im Editor als auch im Frontend.
Hinzufügen von benutzerdefinierten Symbolleisten mit unseren eigenen Schaltflächen
Sie können auch Ihre eigenen Schaltflächen in der Symbolleiste hinzufügen, um zu tun, was Sie wollen, wenn Sie darauf klicken. Dazu müssen Sie die Komponente hinzufügen Toolbarund innerhalb dieses Elements ein hinzufügen IconButton(beides im wp.componentsPaket). Alles BlockControlsnatürlich drinnen.
Hinweis: Laut WordPress ist das Änderungsprotokoll von Gutenberg IconButtonzugunsten der Verwendung von Button. Es scheint jedoch nicht möglich zu sein, dass mit der ButtonKomponente ein Symbol angezeigt wird, egal was ich tue, obwohl es dies unterstützen soll. Also verwende ich ab sofort IconButton.
Sie können offensichtlich mehrere Toolbar-Komponenten innerhalb von kombinieren BlockControls. Mit dem folgenden Code fügen wir die Symbolleiste für die Textausrichtung und unsere benutzerdefinierte Symbolleiste mit einer Schaltfläche dahinter hinzu.
Die IconButton-Komponente akzeptiert ein WordPress-Dashicon- Symbol oder ein SVG für die Prop icon. Wir können einige andere Requisiten wie classNameund bereitstellen label(wird im Tooltip angezeigt, wenn Sie mit der Maus über die Schaltfläche fahren). Die Requisite, an der wir am meisten interessiert sind, ist offensichtlich die onClickRequisite, die ausgelöst wird, wenn auf die Schaltfläche geklickt wird. Hier können wir eine Funktion bereitstellen und im Grunde tun, was wir wollen. Die Möglichkeiten sind endlos und hängen davon ab, was Sie tun möchten. Im obigen Code konsole ich einfach etwas, wenn auf die Schaltfläche geklickt wird. Im Laufe dieser Tutorial-Serie werden Sie wahrscheinlich einige Ideen bekommen, wie Sie Ihre benutzerdefinierte Schaltfläche so gestalten können, wie Sie es möchten.
Das haben wir bisher gemacht. Im nächsten Schritt der Serie werden wir uns mit fortgeschritteneren Dingen befassen und lernen, wie wir unsere eigenen Komponenten erstellen, um Status- und andere Vorteile zu nutzen.