Phi Phan startet einen Trennblock mit einer Symboloption – WP Tavern

20. April 2022
Phi Phan startet einen Trennblock mit einer Symboloption - WP Tavern

Weniger als eine Woche danach Starten von Blockverbesserungenhat Phi Phan ein weiteres Projekt veröffentlicht: Symboltrennzeichen. Es ist ein Block-Plugin zum Erstellen benutzerdefinierter Trennwände mit einem SVG-Symbol.

"Ich habe versucht, Symbole im Kern / Trennzeichen zu unterstützen", sagte Phan, als wir das letzte Mal über das Hinzufügen von Symbolen zu Kernblöcken sprachen. "Aber es erfordert das Ändern des Markups. Also kann ich einen neuen winzigen Block nur dafür erstellen." Jetzt hat er mindestens eine der vielen Ideen überprüft, die er von der To-Do-Liste erwähnt hat.

Plugins, die eine Sache tun und es gut machen, sind im Allgemeinen meine Lieblingsarten von Erweiterungen, und Icon Separator ist nicht anders. Es ist auch das Schöne am Blocksystem selbst. Es wurde so konzipiert, dass Benutzer kleine Komponenten überall anbringen können.

Wenn Sie den Icon Separator-Block zum ersten Mal einfügen, wird er wie jedes andere gewöhnliche Trennzeichen angezeigt. Es gibt eine einfache horizontale Linie über den Bildschirm aus:

Zwei Absätze im WordPress-Post-Editor, die durch eine einzige horizontale Zeile getrennt sind.
Standardausgabe des Icon Separator-Blocks.

Benutzer können es gerne in seinem Standardzustand verwenden, aber das würde nicht viel Spaß machen. In diesem Block dreht sich alles um das Symbol.

Das Plugin bündelt über 3.500 Symbole aus den WordPress-, Bootstrap- und Ionicons-Bibliotheken und bietet Benutzern eine große Auswahl. Es sieht so aus, als wäre es ein Übertrag aus Phans Block Enhancements Plugin -Es wäre sinnvoll, denselben Code wiederzuverwenden. Der Block ermöglicht es Benutzern auch, SVG-Code für benutzerdefinierte Symbole einzugeben.

Es dauerte nicht lange, ein Symbol auszuwählen und mit dem Anpassen der Trennzeichenausgabe im Editor zu beginnen:

Zwei Absätze im WordPress-Blockeditor, die durch eine orangefarbene horizontale Linie mit einem Sonnensymbol in der Mitte getrennt sind.
Anpassen des Symboltrennzeichenblocks.

Das Plugin hat viele Optionen, mit denen Benutzer es sich zu eigen machen können. Neben der Auswahl eines Symbols können sie die Füll- und Konturfarben, die Größe, den Abstand, die Position und die Ausrichtung anpassen.

Der Block verfügt auch über Optionen zum Anpassen der Trennlinie selbst, einschließlich durchgezogener, gestrichelter und gepunkteter Stile. Benutzer können die Ausrichtung, Breite, Farbe und mehr ändern.

Vier horizontale Trennzeichen im WordPress-Post-Editor.  Jeder hat eine andere Farbe und ein anderes Blumensymbol.  Die Linien sind durchgezogen, gestrichelt und gepunktet.
Verschiedene Symbole und Trennzeichenmodifikationen.

Dieser Block ist ein idealer Anwendungsfall für das wiederverwendbare Blocksystem in WordPress. Unter der Annahme, dass Benutzer das gleiche Trennzeichendesign auf ihrer gesamten Website verwenden möchten, wäre es sinnvoll, es einmal zu entwerfen und eine Kopie für die Verwendung überall dort zu speichern, wo es benötigt wird.

Ich bin etwas enttäuscht, dass das Plugin nicht die <hr> HTML-Element. Ich war aufgeregt, als ich das letzte Mal mit Phan sprach. Ich wollte sehen, wie jemand das Problem dieses Plugins angehen würde, aber ich erwartete, dass es mit der Semantik gelöst wird <hr>. Ein Teil davon war nur Neugier als Entwickler und Designer, der die Einschränkungen kannte, die es als generischen Block für die Verwendung mit jedem Theme-Design darstellen würde.

Phan nahm den weniger Kopfschmerz auslösenden Weg, einen Wrapper zu verwenden <div> und das Platzieren des Symbols <svg> Code in ihn hinein. Das eröffnete viel mehr Möglichkeiten, und der Block ist wahrscheinlich der bessere dafür.

Ich wollte jedoch darauf hinweisen, dass dieser Block nicht ideal für diejenigen ist, die eine richtige horizontale Regel in ihrem Inhalt verwenden müssen. Das <hr> -Element dient zum Markieren thematischer Pausen. In diesen Fällen ist es besser, sich an den Kernseparatorblock zu halten.

In Szenarien, in denen der Teiler ein Entwurfselement und kein Bruch im Inhalt ist, sollten Sie wild werden. Der Icon Separator-Block bietet viele Optionen.

Quelle


Dieser Artikel ist im Original von wptavern.com und wurde übersetzt
https://wptavern.com/phi-phan-launches-a-separator-block-with-an-icon-option

Abonniere den RSS-Feed von unseren WP News und verpasse keine Meldung: https://die-mainagentur.de/feed/?post_type=wp-news

Alternativ kannst du unseren WP-Newsletter abonnieren

Mit dem Eintrag in den WP-Newsletter bekommst du per Mail über neue Artikel zugesendet. Du kannst den Newsletter jederzeit abbestellen.
Mehr dazu in der Datenschutzerklärung