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.