Wie die Galerie Block in Gutenberg verlängern?

Ich bin mit Gutenberg vor seiner Aufnahme in Kern zu spielen, und ich würde gerne wissen, wie der bestehende Galerie Block erweitert ihre Anzeige zu ändern. Anstelle eines Rasters mit Miniaturansichten möchte ich beispielsweise eine Diashow mit Bildern anzeigen. Ist es möglich? Wenn das so ist, wie? Jede Hilfe wäre dankbar.

Ok, ich habe ein wenig mit diesem gespielt und haben es geschafft, den Ausgang des Galerie-Block zu ändern, mit folgenden Einschränkungen:

• Die Vorschau nicht den Ausgang entsprechen. Ich denke, das ist möglich, aber scheint ein bisschen mehr beteiligt zu sein.
• Bestimmte Klassen und Markups sind in der Ausgabe erforderlich, damit der Block den Inhalt analysieren und bearbeitbar halten kann. Diese Klassen haben Front-End-Stil, die mit werden müssen behandelt. Ich bin mir derzeit nicht sicher, ob es eine Möglichkeit gibt, die Funktionsweise des Blocks zu filtern. Wenn es möglich wäre, wäre es möglicherweise keine gute Idee, wenn Gallery-Blöcke beschädigt werden, wenn ein Theme oder Plugin deaktiviert wird. Ein völlig neuer Block wäre wahrscheinlich der richtige Weg für Situationen, in denen dies erforderlich wäre.
• Ich bin mir nicht wirklich sicher, wie Bild Arbeit in diesem Stadium Größen.
• Das Verfahren von JavaScript verwendeten Haken nicht sein könnte relevant in der endgültigen Version. Gutenberg verwendet , @wordpress/hookswährend der Diskussion über das, was System Hooks in Kern zu verwenden ist noch nicht abgeschlossen .
• Da der Ausgang des Blockes als HTML gespeichert wird, nicht einen Shortcode oder meta, wird es nicht möglich sein, die Ausgabe von bestehenden Galerien zu ändern, ohne sie zu bearbeiten.

Als erstes müssen wir ein Skript registrieren. Dies geschieht mit wp_enqueue_scripts(), aber auf dem enqueue_block_editor_assetsHaken.

Das Skript sollte das wp-blocksSkript als Abhängigkeit haben. Es ist mit ziemlicher Sicherheit bereits in den Editor geladen, aber es eine Abhängigkeit vermutlich machen sichergestellt, bevor unser Skript geladen wird.

function wpse_298225_enqueue_block_assets() {
    wp_enqueue_script(
        'wpse-298225-gallery-block',
        get_theme_file_uri( 'block.js' ),
        ['wp-blocks']
    );
}
add_action( 'enqueue_block_editor_assets', 'wpse_298225_enqueue_block_assets' );

Der HTML - Code für eine Ausgabe des Blockes wird durch die behandelte save()Methode des Blockes. Sie können die Galerie-Blöcke in dieser Datei sehen .

Zu diesem Zeitpunkt (März 2018) Gutenberg unterstützt einen Filter auf der Speichermethode von Blöcken blocks.getSaveElement. Wir können diesen Haken in JavaScript wie folgt einfügen:

wp.hooks.addFilter(
    'blocks.getSaveElement',
    'wpse-298225',
    wpse298225GallerySaveElement
)

Das erste Argument ist der Haken Name, das zweite Argument ist - glaube ich - ein Namensraum, und das letzte Argument ist die Callback-Funktion.

Da wir die save()Methode des Blocks ersetzen , müssen wir ein neues Element zurückgeben. Dies ist jedoch kein normales HTML - Element , das wir zurückkommen müssen. Wir müssen zurückkehren ein Reagieren Element.

Wenn Sie sich die save()Methode des ursprünglichen Blocks ansehen , sehen Sie, dass es sich um JSX handelt. Reagieren, der Gutenberg unter der Motorhaube verwendet, unterstützt es für Elemente machen. In diesem Artikel erfahren Sie mehr darüber.

Für JSX ist normalerweise ein Erstellungsschritt erforderlich. Da ich für dieses Beispiel jedoch keinen Erstellungsschritt einführe, benötigen wir eine Möglichkeit, ein Element ohne JSX zu erstellen. React bietet dies mit createElement(). Wordpress stellt einen Wrapper für diese und andere reagieren Funktionalität in Form wp.element. So verwenden createElement()wir verwenden wp.element.createElement().

In der Callback - Funktion für blocks.getSaveElementerhalten wir:

• element Das ursprüngliche Element durch den Block angelegt.
• blockType Ein Objekt, das den Block verwendet wird.
• attributesDie Eigenschaften der Blockinstanz. In unserem Beispiel beinhaltet dies die Bilder in der Galerie und Einstellungen wie die Anzahl der Spalten.

So ist unsere Callback-Funktion muss:

• Gibt das ursprüngliche Element für nicht blockierte Galerien zurück.
• Nehmen Sie die Attribute, insbesondere die Bilder, und erstellen Sie ein neues Element Reagieren aus ihnen die Galerie vertreten.

Hier ist ein komplettes Beispiel der einfach gibt eine ulmit einer Klasse, my-galleryund lis für jedes Bild mit der Klasse my-gallery-itemund und imgin jedem mit dem srcSatz zu der Bild - URL.

function wpse298225GallerySaveElement( element, blockType, attributes ) {
    if ( blockType.name !== 'core/gallery' ) {
        return element;
    }

    var newElement = wp.element.createElement(
        'ul',
        {
            'className': 'wp-block-gallery my-gallery',
        },
        attributes.images.map(
            function( image ) {
                return wp.element.createElement(
                    'li',
                    {
                        'className': 'blocks-gallery-item my-gallery-item',
                    },
                    wp.element.createElement(
                        'img',
                        {
                            'src': image.url,
                        }
                    )
                )
            }
        )
    )

    return newElement
}

Einige Dinge zu beachten:

• Der ursprüngliche Galerieblock sucht nach Bildern ul.wp-block-gallery .blocks-gallery-item, sodass dieses Markup und diese Klassen erforderlich sind, damit der Block bearbeitet werden kann. Dieses Markup ist auch für den Standardstil verwendet.
• attributes.images.mapdurchläuft jedes Bild und gibt ein Array von untergeordneten Elementen als Inhalt für das Hauptelement zurück. Innerhalb dieser Elemente ist es ein weiteres untergeordnetes Element für das Bild selbst.

Hier ist eine aktualisierte Antwort zu geben. Ich fand diesen Beitrag äußerst hilfreich bei der Beantwortung der Frage, wie der Gallery Block erweitert werden kann.

Kurz gesagt, es ist ratsam, nur einen neuen Block zu erstellen, anstatt einen vorhandenen zu erweitern. Von der Post in meinem obigen Link:

wenn Sie den HTML-Code eines Blocks [durch die Erweiterung] ändern, wird es nicht als Originalblock erkannt werden. Anstatt zu versuchen, einen Kernblock zu manipulieren, scheint es, als würde die Registrierung des Kernblocks aufgehoben und ein neuer Ersatzblock an seiner Stelle registriert. Auf diese Weise stellen Sie sicher, dass die Benutzer der Website Ihre spezielle angepasste Galerie verwenden, die überprüft wird, weil es definiert seine eigene HTML-Struktur.

Der Link oben bezieht sich auch auf die Create-Guten_Block Plugin , das ein Kommandozeilen - Tool ist , dass alles , was Sie brauchen generieren Sie mit Block - Erstellung gestartet. Das Tool ist sehr einfach zu bedienen, und einfache Einrichtung.

Mit diesen Ressourcen konnte ich in kurzer Zeit herausfinden, wie ein benutzerdefinierter Galerieblock entwickelt werden kann