Das Icon Block-Plugin wurde letzte Woche von Nick Diego zur Verfügung gestellt. Es ist nicht wie andere vergleichbare Blöcke auf eine Drittanbieterbibliothek angewiesen. Entwicklern und Heimwerkern wird es gefallen, dass jede SVG-Datei einfach in den Editor eingefügt werden kann.
Mit etwas mehr als einem Jahr hat Diego das Block Visibility-Plugin entwickelt , das schnell zu einem der beliebtesten in seinem Bereich wird. Im Sommer fügte er eine Pro-Version mit spezielleren Funktionen hinzu. Beim Blockeditor zeigt er die Bereitschaft, innovative Ideen zu entwickeln und dabei die Gesamtzufriedenheit des Endverbrauchers im Auge zu behalten. Es scheint, dass sein neuestes Plugin nicht anders ist.
Er wurde inspiriert, Icon Block zu erstellen, nachdem er die Preisseite für Block Visibility erstellt hatte. Er hatte eine lange Liste von Funktionen und kodierte die Symbole im HTML-Block manuell, um sie zu ergänzen.
Ein Screenshot der Preistabelle der Preisliste für Block Visibility. Eine Liste der Funktionen finden Sie auf der linken Seite des Bildschirms. Häkchen und "x"-Symbole finden Sie auf der rechten Seite des Bildschirms.
Erstellen Sie erstaunliche Websites
Mit dem besten kostenlosen Seite Builder Elementor
Jetzt anfangen
Die Verwendung von HTML-Blöcken für SVG-Symbole (und der Wunsch, keine Blockbibliothek zu verwenden) war für Diego zu einer Quelle der Irritation geworden, daher hat er diese schnelle Lösung eingeführt. „Mein Ziel war es, nur native WordPress-Komponenten zu verwenden, um einen einfachen SVG-Symbolblock zu erstellen. Und da dem Kern neue Funktionen hinzugefügt werden (wie Ränder und responsive Steuerelemente), werde ich diesen Block entsprechend aktualisieren.
Das Ergebnis war positiv. Für eine Icon-Lösung, die auf dem WordPress-Blocksystem basiert, überprüft diese alle richtigen Kriterien.
SVG-Code in einem Textfeld wird durch diese Funktion sowohl im Editor als auch im Frontend gerendert.
Es endet jedoch nicht dort. Um die Lösung abzurunden, nutzt sie sowohl Kernkomponenten als auch blockgestützte Funktionen. Es verfügt über Funktionen, die ein Muss sind, wie z. B. Unterstützung für Farben und Ausrichtung. Um zu einer beliebigen URL zu verlinken, können Benutzer die Größe, den Abstand und den Rahmenradius des Symbols ändern.
Eine Sache, die ich gerne sehen würde, ist die Möglichkeit, den Rahmenstil, die Breite und die Farbe anzupassen. Ein nettes Extra, aber für die meisten Menschen keine oberste Priorität.
Mit blauem Hintergrund und weißem Symbol ist das WordPress-Logo als Icon zu sehen.
Das Ändern von Farben, Größe, Abstand und Randradius des Symbols ist ein einfacher Vorgang.
Für eine Markteinführung wäre es ausreichend gewesen, die Unterstützung für Schlüsselkomponenten einzubeziehen, aber Diego ging noch einen Schritt weiter und fügte maßgeschneiderte Funktionen hinzu. Die Schaltfläche "Drehen" im Symbolblock ermöglicht es Benutzern, das Symbol um 90 Grad zu drehen. Das Symbol kann mit den Schaltflächen in der Symbolleiste horizontal oder vertikal gespiegelt werden.
Solche Icon-Plugins haben im WordPress-Editor vielfältige Anwendungsmöglichkeiten. Ein einfaches Kästchenraster mit einer Grafik oben ist ein typisches Design.
Mithilfe des Spaltenblocks im Symbolblock können benutzerdefinierte Symbole eingefügt und angepasst werden. Die Möglichkeiten sind jedoch nahezu endlos.
WordPress ist, wo die Komponenten fehlen. Es gibt derzeit nicht viele gute Optionen, um horizontale Layouts zu erstellen. In diesem Fall ist es schwierig, Symbole am Text auszurichten.
Großes Potenzial birgt die neu hinzugekommene Row-Variante des Group-Blocks. Symbole können im Editor neben Absätzen platziert werden, wie im beigefügten Screenshot gezeigt. Die von mir erstellte Preistabelle war einfach und enthielt Prüfsymbole.
Die Verwendung des Symbolblocks als Häkchen in einer Liste wird in dieser zweispaltigen Preistabelle veranschaulicht.
Zu diesem Zeitpunkt gibt es keine Schnittstellensteuerung zum Anpassen des Abstands zwischen Objekten. Idealerweise sollten die Icons so nah wie möglich am Text sein.
Außerdem sollte dies eine Liste anstelle einer Anweisung sein. Der Aufbau der Anordnung erfordert nicht die Verwendung anderer Blöcke. Benutzer können jedoch keine Blöcke im Listenblock verschachteln.
Am Icon Block-Plugin ist nichts auszusetzen; alles ist wie es sein soll. Es veranschaulicht lediglich ein Szenario, in dem WordPress nützlich wäre. Dies würde die Funktionalität von Plugins dieser Art erheblich verbessern.
Das Gutenberg-Plugin, das demnächst in WordPress integriert wird, unterstützt einen Icon-Block. Seit Gutenberg-Projektleiter Matas Ventura im Jahr 2019 ein Ticket dazu erstellt hat, gab es einige Diskussionen darüber, Benutzern zu erlauben, SVG-Dateien direkt in den Editor einzufügen. Es ist wahrscheinlicher, dass dies eine visuelle Entscheidung ist, die Endbenutzer daran hindert, benutzerdefinierten Code hinzuzufügen. Als alternative Methode mit größerer Flexibilität könnte der Block von Diego noch existieren.
Während die aktuelle Form des Plugins für viele in der WordPress-Community wunderbar sein mag, hat Diego Ambitionen, es noch besser zu machen. Benutzer, die keinen SVG-Code hinzufügen möchten, können eine Symbolauswahl verwenden, sagt er. Die integrierten WordPress-Symbole werden standardmäßig angezeigt. Er beabsichtigt jedoch, Drittanbietern zu ermöglichen, benutzerdefinierte "Icon Packs" zu erstellen, um die Funktionalität der App zu erweitern.
