Block: Social Icons

Mit dem Social-Icons-Block kannst du ganz unkompliziert Links zu deinen Profilen in den sozialen Netzwerken setzen. Diesen Block gibt es seit WordPress 5.4.

Die Block-Werkzeugleiste

Screenshot des Social-Icons-Block, nachdem er zum Inhalt hinzugefügt wurde. Beim WordPress-Icon ist bereits eine URL eingetragen, die anderen vorgeschlagenen Icons sind leicht durchsichtig.

Der Social-Icons-Block ist ein verschachtelter Block, d. h. neben dem Eltern-Element ist jedes Icon für sich ein Kind-Element innerhalb des Social-Icons-Blocks. Im obigen Screenshot ist die Block-Werkzeugleiste für das Eltern-Element zu sehen. Du kannst den Block linksbündig, zentriert und rechtsbündig ausrichten.

Screenshot eines ausgewähten, vorgeschlagenen Icons. Der Button zur Ausrichtung ist nicht mehr vorhanden. Unterhalb der Icons erscheint das Feld für die Eingabe der URL.

Wenn du ein einzelnes Icon auswählst, ändert sich die Block-Werkzeugleiste. Die Einstellung zur Ausrichtung verschwindet. Statt den gesamten Block nach oben oder unten zu verschieben, erscheinen Pfeile für nach links und rechts, um die Reihenfolge der einzelnen Icons zu ändern. Unterhalb der Icons erscheint dann das Feld zur Eingabe deiner Profil-URL für das jeweilige Netzwerk.

Die Einstellungen im weiterführenden Menü hinter den drei Punkten am Ende erklären wir dir auf der Übersichtsseite der Blöcke unter Die Block-Werkzeugleiste.

Die Einstellungen in der Seitenleiste

Screenshot des Eltern-Elements des Social-Icons-Block.

Beim Eltern-Element des Social-Icons-Block kannst du zwischen drei verschiedenen Stilen wählen: Standard (kreisrunde Form), nur Logos (farbige Logos ohne Hintergrundfarbe) und Pillenform (mit Hintergrundfarbe). Außerdem kannst du einen Standard-Stil setzen, wenn du diesen Block häufiger verwenden möchtest und nicht die kreisrunde Form nutzen möchtest.

Unter Erweitert kannst du einen HTML-Anker (seit WordPress 5.5) und zusätzliche CSS-Klassen definieren.

Bei den Einstellungen für ein einzelnes Icon kannst du nur ein Link-Label setzen. Dieses erscheint nicht als Text, ist aber für die Barrierefreiheit hilfreich und ermöglicht es z. B. Screenreadern, zu diesem Link ein Wort auszugeben.

Am einzelnen Icon-Block kannst du keinen Anker, sondern lediglich zusätzliche CSS-Klassen setzen.

Umwandeln in andere Blöcke

Du kannst einen Social-Icons-Block nicht in einen anderen Block umwandeln. Die Umwandlung in eine Gruppe bewirkt, dass der Social-Icons-Block in einen Gruppen-Block verschoben wird.