Block-Variationen in Gutenberg erstellen

Mit WordPress 5.4 wird die Block Variations API in WordPress Einzug halten. Damit ist es möglich, Variationen von Blöcken zu erstellen, die dann auch als eigene Einträge im Block-Inserter angezeigt werden. Ein Beispiel aus dem Core sind die Social-Media-Buttons, die alle eine Variante des Social-Link-Blocks sind.

Eine Variation kann Attribute des Blocks vorbelegen, im Beispiel des Social-Link-Blocks definiert jede Variation das service-Attribut mit dem Bezeichner für das soziale Netzwerk.

Wie in dem Dev-Post auf WordPress.org gezeigt, weden Variationen wie folgt angelegt:

variations: [
    {
        name: 'wordpress',
        isDefault: true,
        title: __( 'WordPress' ),
        description: __( 'Code is poetry!' ),
        icon: WordPressIcon,
        attributes: { service: 'wordpress' },
    },
    {
        name: 'google',
        title: __( 'Google' ),
        icon: GoogleIcon,
        attributes: { service: 'google' },
    },
    {
        name: 'twitter',
        title: __( 'Twitter' ),
        icon: TwitterIcon,
        attributes: { service: 'twitter' },
    },
],
Code-Sprache: JavaScript (javascript)

variations ist ein Key in dem Objekt, das an registerBlockType() übergeben wird, wie title, edit, attributes, et cetera. Jede Variation bekommt einen Bezeichner name, sowie einen title, der dem User angezeigt wird.

Darüber hinaus kann ein Icon angegeben werden und über attributes der Wert für ein oder mehrere Block-Attribute. Mit isDefault wird die Standard-Variation definiert. Zusätzlich gibt es noch die Möglichkeit, über die Angabe innerBlocks eine InnerBlocks-Komponente des Blocks mit bestimmten Blöcken zu befüllen, das wird beispielsweise bei dem Spalten-Block genutzt, um die unterschiedlichen vordefinierten Spalten-Layouts umzusetzen.

Über scope lässt sich noch angeben, in welchem Bereich die Variation verfügbar sein soll, da habe ich aber noch nicht verstanden, was die beiden Optionen block und inserter genau machen. Wenn die Option weggelassen wird, werden beide Bereiche gesetzt.

Schade ist, dass die Variationen noch nicht in den Vorschlägen des /-Befehls auftauchen, ansonsten ist das aber eine sehr nützliche Sache.