it-swarm.com.de

Wie kann man den Galerieblock in Gutenberg erweitern?

Ich spiele mit Gutenberg, bevor es in den Kern aufgenommen wird, und möchte wissen, wie der vorhandene Galerieblock erweitert werden kann, um seine 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.

13
leemon

Ok, ich habe ein bisschen damit gespielt und es geschafft, die Ausgabe des Gallery-Blocks mit den folgenden Einschränkungen zu ändern:

  • Die Vorschau stimmt nicht mit der Ausgabe überein. Ich denke, das ist möglich, scheint aber etwas komplizierter 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-Stile, die behandelt werden müssen. 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 durch Deaktivieren eines Themes oder Plugins beschädigt werden. Ein völlig neuer Block wäre wahrscheinlich der richtige Weg für Situationen, in denen dies erforderlich wäre.
  • Ich bin mir nicht sicher, wie die Bildgrößen in dieser Phase funktionieren.
  • Die Methode der verwendeten JavaScript-Hooks ist in der endgültigen Version möglicherweise nicht relevant. Gutenberg verwendet @wordpress/hooks während die Diskussion darüber, welches Hook-System in Core verwendet werden soll läuft .
  • Da die Ausgabe von Blöcken als HTML, nicht als Shortcode oder Meta gespeichert wird, kann die Ausgabe vorhandener Galerien nicht geändert werden, ohne sie zu bearbeiten.

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

Das Skript sollte das wp-blocks-Skript als Abhängigkeit haben. Es ist mit ziemlicher Sicherheit bereits im Editor geladen, aber wenn Sie es zu einer Abhängigkeit machen, stellen Sie sicher, dass es vor unserem 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 die Ausgabe eines Blocks wird von der Methode save() des Blocks verarbeitet. Sie können den Galerie-Block in dieser Datei sehen.

Zu diesem Zeitpunkt (März 2018) unterstützt Gutenberg einen Filter für die 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 Hook-Name, das zweite Argument ist - glaube ich - ein Namespace und das letzte Argument ist die Callback-Funktion.

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

Wenn Sie sich die Methode save() des ursprünglichen Blocks ansehen, sehen Sie, dass es sich um JSX handelt. React, das Gutenberg unter der Haube einsetzt, unterstützt es beim Rendern von Elementen. Siehe diesen Artikel für mehr darüber.

Für JSX ist normalerweise ein Erstellungsschritt erforderlich. Da ich für dieses Beispiel keinen Erstellungsschritt einführe, benötigen wir eine Möglichkeit, ein Element ohne JSX zu erstellen. React liefert hierfür createElement(). WordPress bietet einen Wrapper für diese und andere Reaktionsfunktionen in Form von wp.element. Um also createElement() zu verwenden, verwenden wir wp.element.createElement().

In der Rückruffunktion für blocks.getSaveElement erhalten wir:

  • element Das ursprüngliche Element, das vom Block erstellt wurde.
  • blockType Ein Objekt, das den verwendeten Block darstellt.
  • attributes Die Eigenschaften der Blockinstanz. In unserem Beispiel enthält dies die Bilder in der Galerie und Einstellungen wie die Anzahl der Spalten.

Unsere Rückruffunktion muss also:

  • Gibt das ursprüngliche Element für nicht blockierte Galerien zurück.
  • Nehmen Sie die Attribute, insbesondere die Bilder, und erstellen Sie daraus ein neues React-Element, das die Galerie darstellt.

Hier ist ein vollständiges Beispiel, das einfach eine ul mit einer Klasse, my-gallery und lis für jedes Bild mit den Klassen my-gallery-item und und img ausgibt, wobei die src auf die Bild-URL gesetzt ist.

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 zur Kenntnis zu nehmen:

  • Der ursprüngliche Galerieblock findet Bilder, indem er nach ul.wp-block-gallery .blocks-gallery-item sucht. Daher sind dieses Markup und diese Klassen erforderlich, damit der Block bearbeitet werden kann. Dieses Markup wird auch für das Standard-Styling verwendet.
  • attributes.images.map durchläuft jedes Bild und gibt ein Array von untergeordneten Elementen als Inhalt für das Hauptelement zurück. In diesen Elementen befindet sich ein weiteres untergeordnetes Element für das Bild.
13
Jacob Peattie

Hier finden Sie eine aktualisierte Antwort. 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. Aus dem Beitrag in meinem Link oben:

wenn Sie den HTML-Code eines Blocks [durch Erweitern] ändern, wird dieser nicht als Originalblock erkannt. 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 Benutzer der Website Ihre spezielle angepasste Galerie verwenden, die überprüft wird, weil es definiert eine eigene HTML-Struktur.

Der obige Link verweist auch auf Das Plugin "Create-Guten_Block" , ein Befehlszeilentool, das alles generiert, was Sie für den Einstieg in die Blockerstellung benötigen. Das Tool ist sehr einfach zu bedienen und einfach einzurichten.

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

2
Jeff Wilkerson