Icon-Sammlungen in WordPress

Kategorie:

Es ist schon lange her, dass ich von einem neuen WordPress Feature richtig begeistert war. Bei meinem aktuellen Kundenprojekt habe ich aber ein neues Feature von WordPress 7.1 genutzt: Icon Sammlungen (engl. Icon Collections). Warum das so genial ist und wie man es benutzt erzähle ich hier.

Screenshot der Icon-Bibliothek im Block-Editor von WordPress. Links sieht man die Liste der Icon-Sammlungen mit der eigenen Sammlung, die ausgewählt ist. Rechts werden die vielen Icons der Sammlung gezeigt.

Was zuvor geschah…

Um im Block-Editor Icons einzufügen, gab es bisher hauptsächlich zwei Möglichkeiten:

  1. den Bild-Block benutzen und darin ein Bild aus der Mediathek verwenden. Wenn man allerdings ein SVG nutzen wollte, kam schon die nächste Hürde: der Upload von SVG-Dateien wird standardmäßig aus Sicherheitsgründen nicht erlaubt.
  2. eines der unzähligen Icon-Plugins installieren. Jedes davon bringt einen eigenen Block mit oder fügt Icons wieder ganz anders ein.

Beides nicht optimal.

Der Core-Block Icon

Mit WordPress 7.0 wurde dann der Icon-Block im WordPress Core eingeführt, ein einfacher Block, den man überall im Inhalt oder Template hinzufügen kann und der ein Icon aus der Icon-Bibliothek von WordPress anzeigt. Das Icon kann man sehr einfach auswählen und den Block kann man über die im Block-Editor üblichen Einstellungen anpassen. Endlich also eine Built-In Funktion für Icons.

Eigene Icon-Sammlungen in WordPress 7.1

Den nächsten Schritt macht WordPress 7.1. Man kann jetzt eigene Icon-Sammlungen registrieren, die dann automatisch in der Icon-Bibliothek landen und die im Icon-Block so dann auch direkt genutzt werden können. Zack, fertig. Garniert man das mit einem eigenen Block-Stil für den Icon-Block wird es richtig rund und macht noch mehr Spaß.

Ja man braucht zum Registrieren der eigenen Icons ein bisschen Code, aber man muss keinen eigenen Block mehr bauen und ich finde es so einfach sehr viel besser integriert. Ich mag die Lösung jetzt schon mehr als alle Plugins, die ich bisher ausprobiert hatte.

Icon-Sammlung registrieren

Zuerst lege ich eine Konstante für den Slug meiner Icon-Sammlung an. Das ist quasi der Gruppen-Name unter dem die Icons später eingefügt und referenziert werden. Er muss eindeutig sein und sollte nicht mehr geändert werden.

/**
 * Slug der Icon-Sammlung.
 *
 * Steckt im gespeicherten Block-Markup (`{"icon":"my-icons/check"}`)
 * und ist damit nicht mehr frei änderbar, sobald Inhalte ihn nutzen.
 */
define( 'MY_ICON_COLLECTION', 'my-icons' );

Als nächstes registrieren wir die Icon-Sammlung. Dazu nutzen wir den init-Hook und rufen die Funktion wp_register_icon_collection auf. Die Funktion braucht den zuvor definierten Slug der Sammlung als ersten Parameter und ein Array mit einem Namen und einer Beschreibung als zweiten.

function my_icons_register_icons() {
	wp_register_icon_collection(
        MY_ICON_COLLECTION,
		array(
			'label'       => __( 'Meine Icons', 'my-icons' ),
			'description' => __( 'Icons aus meinem Bestand.', 'my-icons' ),
		)
	);
	
	// hier später mehr
}
add_action( 'init', 'my_icons_register_icons' );

Und schon wird beim Icon-Block in der Icon-Bibliothek die eigene Sammlung angezeigt. Allerdings ist die Icon-Sammlung noch leer. Klar, wir haben ja auch noch keine Icons hinzugefügt.

Icons zur Sammlung hinzufügen

Jetzt müssen wir noch die ganzen Icons registrieren.

Ich habe die Liste der Icons ausgelagert in eine eigene Datei (bei mir icon-library-manifest.php). Das macht es für mich irgendwie übersichtlicher (im Kundenprojekt waren es fast 250 Icons), weil ich bei neuen Icons nur diese Datei ergänzen muss und nicht erst lange suchen brauch. Du kannst das aber natürlich machen, wie es für dich passt.

/**
 * Verzeichnis der Icons der Icon-Sammlung
 *
 * Slug => Label. Die SVG-Datei zu einem Slug ist immer
 * `assets/icons/<slug>.svg`.
 */

return array(
	'abspielen'            => 'Abspielen',
	'apfel'                => 'Apfel',
	'armbanduhr'           => 'Armbanduhr',
	// ... und ganz ganz viele andere ...
	'wuerfel'              => 'Würfel',
	'zahnrad'              => 'Zahnrad',
	'zaun'                 => 'Zaun',
);

Und mit dieser Liste erweitere ich jetzt die Funktion, die ich schon habe.

Zuerst hole ich mir die Liste der Icons aus der Manifest-Datei und merke mir einmal den Pfad zum Directory (ja, wirklich den Pfad, nicht die URL), in dem ich die SVG-Dateien abgelegt habe. Anschließend läuft eine foreach-Schleife über die Icon-Liste und ruft für jedes Icon einmal wp_register_icon auf. Dabei werden der Slug des Icons mit dem Collection-Prefix und die Icon-Daten übergeben.

	wp_register_icon_collection(...);

	$icons     = require __DIR__ . '/icon-library-manifest.php';
	$directory = plugin_dir_path( __FILE__ ) . '/assets/icons/';

	foreach ( $icons as $slug => $label ) {
		wp_register_icon(
            MY_ICON_COLLECTION . '/' . $slug,
			array(
				'label'     => $label,
				'file_path' => $directory . $slug . '.svg',
			)
		);
	}

Du musst hier natürlich den Code ein bisschen anpassen: Passt der Pfad zu deinem Ablageort der Icons?

Du kannst das Icon auch mit content statt file_path registrieren. Da müsste dann der SVG-Content (inkl. svg-Tag) rein. Ich fand das eine Verzeichnis mit vielen Icon-Dateien praktischer.

Und schon haben wir in der Icon-Bibliothek unsere eigenen Icons und können die im Icon-Block nutzen. 🎉

Ein eigener Block-Stil

Und damit die Icons im Block-Editor jetzt auch noch schnell und einheitlich gestaltet werden können lege ich noch zwei Block-Stile für den Icon-Block an. Das schöne an Block-Stilen ist, dass sie beim Bearbeiten der Inhalte ganz einfach ausgewählt werden können und das Styling kann über den Site-Editor angepasst werden (Design › Editor › Stile › Blöcke › Icon › Stilvarianten).

Screenshot des Block-Editors in WordPress. Man sieht zwei Icon-Blöcke in unterschiedlichem Design. Einer der beiden ist ausgewählt. Rechts in der Sidebar ist die Auswahl der Icon-Stile sichtbar.

Ich registriere also eine neue Funktion für den init-Hook und rufe darin zwei mal register_block_style auf, ein großes Icon mit hervorgehobenem Hintergrund und ein kleineres Icon.

function my_icons_register_block_styles() {
    register_block_style(
        'core/icon',
        array(
            'name'       => 'icon-circle-primary',
            'label'      => __('Kreis (Akzent)', 'my-icons'),
            'style_data' => array(
                'color'      => array(
                    'background' => 'var(--wp--preset--color--accent-3)',
                    'text'       => 'var(--wp--preset--color--base)',
                ),
                'border'     => array('radius' => '50%'),
                'spacing'    => array(
                    'padding' => array(
                        'top'    => '0.75rem',
                        'right'  => '0.75rem',
                        'bottom' => '0.75rem',
                        'left'   => '0.75rem',
                    ),
                ),
                'dimensions' => array('width' => '3.75rem'),
            ),
        )
    );

    register_block_style(
        'core/icon',
        array(
            'name'       => 'icon-circle-small',
            'label'      => __('Kreis (klein)', 'my-icons'),
            'style_data' => array(
                'color'      => array(
                    'background' => 'var(--wp--preset--color--accent-1)',
                    'text'       => 'var(--wp--preset--color--contrast)',
                ),
                'border'     => array('radius' => '50%'),
                'spacing'    => array(
                    'padding' => array(
                        'top'    => '0.25rem',
                        'right'  => '0.25rem',
                        'bottom' => '0.25rem',
                        'left'   => '0.25rem',
                    ),
                ),
                'dimensions' => array('width' => '2.2rem'),
            ),
        )
    );
}
add_action('init', 'my_icons_register_block_styles');

Interessant an der Stelle: Die Farbe des Icons ist die color für den Text, kein fill: Der WordPress Core setzt als Style für den Icon-Block { fill: currentColor } und das ist eben die Textfarbe. Finde ich ganz clever, weil man so im Editor und beim Bearbeiten des Stils die vorhanden Attribute nutzen kann.

Fazit

Es ist recht einfach eine eigene Icon-Sammlung in die Icon-Bibliothek zu integrieren und einen Block-Stil für die Icons zu definieren. So kann man es den Editoren einfach machen, die vorhanden Icons flexibel einzusetzen. Und man kann den Icon-Block ja sogar in Vorlagen nutzen, die es den Editoren noch einfacher machen. Also wirklich eines meiner Highlights in letzter Zeit in WordPress, weil es eines der Standard-Probleme, die ich immer wieder habe, gut löst.