Anchor-Support für dynamische Blöcke

Bei einigen Core-Gutenberg-Blöcken wie etwa der Überschrift können in der Block-Sidebar unter dem Punkt Erweitert nicht nur eigene CSS-Klassen eingefügt werden, sondern auch ein HTML-Anker. Damit wird das id-Attribut des Elements gesetzt, sodass mit einem Sprungmarkenlink darauf verwiesen werden kann.

Alles was dafür getan werden muss, ist bei der Block-Registrierung den folgenden Code anzugeben:

supports: { anchor: true, },
Code-Sprache: JavaScript (javascript)

Einfach, oder? Ja, es sei denn, es handelt sich bei dem Block um einen dynamischen Block, also einen der in der save-Methode null zurückgibt und sich in einer PHP-Funktion um das Rendering kümmert. In dem Fall wird zwar mit dem oben stehenden Schnipsel das Feld erzeugt, wir kommen aber nicht an den eingegebenen Wert dran, da er nicht als Attribut in der PHP-Funktion ankommt.

Ich habe einen nicht so schönen kleinen Umweg gefunden, um es trotzdem umzusetzen.

Ich gebe in der save-Funktion im JavaScript ein leeres div zurück, damit der id-Wert in das Markup gespeichert wird:

save: () => { return <div></div>; }
Code-Sprache: JavaScript (javascript)

Dadurch kommt in der PHP-Render-Funktion über den zweiten Parameter, der den Block-Content enthält, ein div mit dem eingegebenen Wert als id an. Dieser Wert kann über die folgende Codezeile in einer Variable gespeichert werden:

$anchor = preg_match( '/id="([^"]*)"/', $content, $matches );
Code-Sprache: PHP (php)

Und jetzt kann die ID dem Wrapper-Element des dynamischen Blocks zugewiesen werden.

Schreibe einen Kommentar

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