Neue Block-Kategorien für den Gutenberg Editor anlegen
WordPress Blöcke sind im Gutenberg-Editor in verschiedene Kategorien eingeteilt. Bspw. finden wir bei der Auswahl der Blöcke die Standard-Kategorien „Allgemeine Blöcke„, „Formatierung„, „Layout Elemente„, „Widgets“ und „Einbettungen„.
Darüber hinaus lassen sich aber auch weitere Blöcke zum Gutenberg-Editor hinzufügen. Etwa durch zusätzliche Plugins oder Blöcke die wir selbst entwickelt haben. Zusätzliche Blöcke lassen sich auch in die Standard-Kategorien einordnen. Aber nicht immer macht das Sinn.
Wie kann ich individuelle Block-Kategorien hinzufügen?
Bei sehr vielen unterschiedlichen Blöcken verliert man schnell die Übersicht. Daher macht es Sinn, neue Blöcke in eigenen Kategorien einzuordnen, um die Nutzer nicht zu verwirren und die Standard-Blöcke leichter von zusätzlichen Blöcken zu unterscheiden. Für diesen Anwendungsfall steht uns der WordPress-Filterblock_categories zur Seite. Das folgende Code-Beispiel zeigt wie sich über PHP neue Block Kategorien im Gutenberg-Editor hinzufügen lassen:
Neben der eindeutigen 'slug' => '' und dem 'title' => '' können wir auch ein Icon zur Gutenberg Block-Kategorie hinzufügen. Dazu fügen wir dem entsprechenden Array den Key 'icon' => '' hinzu. Leider ist es hier derzeit nur möglich, die WordPress eigenen Dashicons zu verwenden.
Ein individuelles Icon zur benutzerdefinierten Block-Kategorie hinzufügen
Wie ihr wahrscheinlich schon einmal gesehen habt, wird bei vielen Block-Kategorien, welche durch Plugins hinzugefügt wurden, ein spezielles Icon vorangestellt. Das hat den Vorteil, dass sich diese Kategorien leichter hervorheben lassen. Doch wie bekommen wir selbst so ein Icon in eine Block Kategorie?
Der WordPress-Filter block_categories bietet derzeit leider keine Möglichkeit, dies auf dem einfachen Weg zu tun. Momentan müssen wir für diesen Fall auf Javascript (jQuery) zurückgreifen. Das folgende Beispiel zeigt, wie ich ein SVG-Icon (wphave Logo) vor die wphave eigenen Block Kategorien gestellt habe:
