Gutenberg: Core-Block mit Element umschließen

Veröffentlicht am

Gestern stand ich vor dem Problem, dass der Tabellen-Block in Gutenberg im Frontend nicht von einem div umschlossen wird, sondern direkt als table ausgegeben wird. An sich natürlich super, dass da kein überflüssiges Markup rauskommt – für meine Lösung, um die Tabelle responsive zu bekommen, brauche ich aber ein Wrapper-Element. Hier zeige ich, wie sich Core-Blöcke mit einem Element umschließen lassen.

Update vom 22. November 2018: Mario hat in seinem Kommentar eine alternative Lösung genannt, die zum Beispiel nützlich ist wenn bereits viele Blöcke des gewünschten Blocks in Beiträgen und Seiten eingesetzt sind. Mit dem render_block-Filter kann der Inhalt eines Blocks verändert werden.

Momentan ist das noch nicht Teil des Gutenberg-Plugins, sondern nur im WordPress-Trunk. Vielleicht wird das noch in das Plugin portiert, oder es kommt erst mit WordPress 5 – das hängt denke ich von der nächsten Entscheidung über den finalen Release-Termin ab.

Gutenberg kommt mit verschiedenen Filtern, die es ermöglichen, Dinge an den Core-Blöcken anzupassen. Einer davon ist blocks.getSaveElement, womit das Ergebnis der save-Funktion eines Blocks verändert werden kann.

Auf gut Glück habe ich einfach mal versucht, dieses Element für Tabellen-Blöcke innerhalb eines div zurückzugeben, und leicht überrascht musste ich feststellen: das funktioniert 🙂

So sieht der Code dafür aus:

wp.hooks.addFilter(
	'blocks.getSaveElement',
	'slug/modify-get-save-content-extra-props',
	modifyGetSaveContentExtraProps
);

/**
 * Wrap table block in div.
 * 
 * @param {object} element 
 * @param {object} blockType 
 * @param {object} attributes 
 * 
 * @return The element.
 */
function modifyGetSaveContentExtraProps( element, blockType, attributes  ) {
	// Check if that is not a table block.
	if (blockType.name !== 'core/table') {
		return element;
	}

	// Return the table block with div wrapper.
	return (
		<div className='table-wrapper'>
			{element}
		</div>
	);
}
Code-Sprache: JavaScript (javascript)

Zunächst hängen wir über wp.hooks.addFilter unsere Funktion modifyGetSaveContentExtraProps in den blocks.getSaveElement-Filter ein. Innerhalb der Funktion prüfen wir, ob wir etwas anderes als einen Tabellen-Block haben und geben für diese Fälle das element unverändert zurück.

Im Fall eines Tabellen-Blocks umschließen wir dieses Element innerhalb des return-Statements mit einem div und haben jetzt im Frontend ein Wrapper-div um Tabellen-Blöcke 🎉

Damit das funktioniert, muss das Skript natürlich so eingebunden werden, dass Gutenberg es mitbekommt. In einem Plugin kann das beispielsweise so aussehen:

add_action( 'enqueue_block_editor_assets', 'slug_enqueue_block_editor_assets' );

/**
 * Register the block.
 */
function slug_enqueue_block_editor_assets() {
	wp_enqueue_script(
		'slug-gutenberg-block-editor-script',
		plugins_url( 'assets/js/editor.blocks.js', __FILE__ ),
		[ 'wp-blocks', 'wp-element', 'wp-edit-post' ]
	);
}
Code-Sprache: PHP (php)

12 Reaktionen zu »Gutenberg: Core-Block mit Element umschließen«

  1. Danke für diese Anleitung, hat super funktioniert bei mir.

    Das doofe an der Sache ist aber, dass es nicht für bestehende Beiträge funktioniert, da dieser Filter nur beim Bearbeiten eines Beitrags greift.

    Man kann also nicht bei einem Bestehenden Blog einfach ein Plugin "Responsive Tabelle" installieren um dann für alle bestehenden und zukünftigen Beiträge responsive Tabellen zu haben.

    Man muss jeden bestehenden Beitrag manuell öffnen und neu speichern.

    Das ist echt ein Problem. Es gibt aktuell keine Möglichkeit im Hintergrund für alle Beiträge das gespeicherte Markup neu zu laden.

    Meiner Meinung nach is das das Größte Problem an Gutenberg. Ich bin mit dem neuen Editor ansonsten super zufrieden, aber das ist echt nicht praktikabel.

    Wenn man einen Blog mit über 1000 (mehrsprachigen) Beiträgen hat kann man das vergessen.

    Antworten

    1. Hi Julian,

      freut mich, dass der Beitrag hilfreich war 🙂

      Zu deinem weiteren Kommentar: Jap, das sehe ich ähnlich. Man müsste sich ein schlankes Tool bauen, das einmal alle Beiträge durchläuft und speichert, das sollte eigentlich auch nicht so schwer sein 🤔 Mal gucken, ob ich dazu Zeit finde 😀

      Viele Grüße
      Florian

      Antworten

      1. Hallo!

        Danke auch von mir für den Beitrag. Ich habe bisher ebenfalls diese Variante verwendet, und mit denselben Problemen bzgl. bestehendem Inhalt gekämpft.

        Gerade die Lösung gefunden:
        In WP 5.0+ wird ein neuer Filter eingeführt: "render_block" - damit kann man einfach nur die Ausgabe eines Blocks beeinflussen. Somit wäre der Wrapper für "Responsive Tabellen" vom gespeicherten Block-Inhalt unabhängig 🙂

        Mehr Info:
        https://wordpress.stackexchange.com/a/319229
        und
        https://github.com/WordPress/gutenberg/issues/11523#issuecomment-437851918

        Antworten

  2. Danke für deine Aufklärungsarbeit zu Gutenberg. Ich finde ihn im Ansatz auch recht gut und in die richtige Richtung. Allerdings hat man viel zu viel bisher "vergessen" und um einen eigenen Block schreiben zu können, scheint man schon ein JS-Freak sein zu müssen. Blocks wrappen zu können, ist für mich eigentlich eine der wichtigsten Funktionen. Genau wie ein anständiges Grid-System (das ich jetzt zum Glück gefunden habe, aber auch wieder nur ein Plugin ist). Und glücklicherweise gibt es noch/schon die Möglichkeit mit ACF-Pro Beta eigene Blöcke zu kreieren, auch wenn das am Ende eben nicht Core ist.

    Könnte man auch einen Block mit einer bestimmten Class selektieren und diesen wrappen?

    Antworten

    1. Hi Marcus,

      freut mich, wenn es hilfreich ist 🙂

      Du meinst, dass du beispielsweise einem Absatz-Block eine bestimmte Klasse gibst und dieser im Frontend dann ein Wrapper-Element bekommen soll? Falls ja, sollte das über den render_block-Filter möglich sein. Darin müsste dann getestet werden, ob der Block vom gewünschten Typ (hier Absatz) ist und ob dieses Absatz-Element die Klasse hat.

      Viele Grüße
      Florian

      Antworten

        1. Achja ... der Link in der Mail zum Bestätigen des Kommentar-Abos funktioniert nicht. Da steht vor dem "https" noch ein "n" (nhttps). Und manuell fehlt angeblich ein Key.

          Antworten

          1. Danke für den Hinweis! Das Plugin hat irgendein Problem mit Umbrüchen in den Mails, ich muss mir das mal anschauen …

            »Genau das meinte ich 😉«

            Okay 🙂 Also ja, das sollte über den Filter machbar sein, allerdings mit Programmieraufwand verbunden.

            Antworten

  3. Hi, super Beitrag, mittlerweile ist auch alles gut dokumentiert mehr oder weniger 🙂
    Ich habe die blocks.registerBlockType und blocks.getSaveElement über den core/heading laufen gelassen.
    Mein Problem:
    Die Funktionen funktionieren beide alleine gut, aber nicht zusammen, da geht mir immer der Block kaputt. Ich habe versucht die Reihenfolgen der Filter zu ändern, aber es hat sich nichts getan.
    Gibt es da andere Lösungen?

    Hier die Meldung wenn die zusammen laufen:
    Content generated by `save` function:

    Über Uns

    Content retrieved from post body:

    Über Uns

    Antworten

    1. Hey Jonas,

      danke für deine Kommentare, freut mich, dass der Artikel hilfreich ist 🙂

      Ja, soweit ich weiß ist das Problem noch vorhanden, ich hatte das Issue nach einem weiteren Test dann auch wieder geöffnet.

      Ich habe mich damit jetzt aber einige Zeit nicht mehr beschäftigt, kann also nicht sagen ob es da ganz aktuell eventuell schon eine Lösung gibt, sorry.

      Bei dir ist auch genau das Problem, dass du einen Block-Stil hinzufügen möchtest und ein Wrapper-Element?

      Viele Grüße
      Florian

      Antworten

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert