Eigenen Block immer in voller Breite im Editor einfügen

Normalerweise werden Blöcke alle in derselben Standard-Breite in den Gutenberg-Editor eingefügt. Abhängig vom Block und davon, ob das Theme es unterstützt, gibt es noch die Möglichkeit eine weite oder die volle Breite zu aktivieren, damit der Block im Frontend über die normale Inhaltsbreite hinausgeht.

In einem Projekt hatte ich den Fall, dass ein eigener Block immer über die gesamte Breite gehen sollte, ohne Änderungsoption für den User. Im Frontend habe ich einfach entsprechend das Styling angepasst, aber im Backend sind ein paar weitere Anpassungen notwendig, da bei einem Full-Align-Block die Controls zum Umsortieren nicht links neben dem Block dargestellt werden, sondern darüber.

Um dieses Verhalten nachzustellen, habe ich dem Block das align-Attribut fest mit dem Wert full zugewiesen und dem Block-Container im Backend ein data-align="full" mitgegeben. Dafür ist der folgende Code im registerBlockType()-Objekt notwendig:

attributes: { align: { type: 'string', default: 'full', } }, getEditWrapperProps() { return { 'data-align': 'full', }; },

Das funktioniert so natürlich nur für selbst erstellte Blöcke (der alignfull-Klassenname für das Frontend wird hierbei nicht automatisch erzeugt).

Ich habe versucht, dasselbe Verhalten für Core-Blöcke über den Filter blocks.registerBlockType umzusetzen, allerdings hat das nur für das data-align-Attribut funktioniert. Das Setzen des Block-Attributs align scheint an sich zwar auch zu funktionieren, es wirkt sich aber nicht auf den Block aus. Mit dem Filter blocks.getBlockAttributes funktioniert es für Blöcke, die bereits im Editor sind, aber nicht beim Einfügen von neuen Blöcken 🤔

Falls da jemand einen Tipp hat, wie das auch für Blöcke aus dem Core oder aus anderen Plugins ginge, gerne her damit.

Das könnte auch interessant sein

2 Kommentare zu »Eigenen Block immer in voller Breite im Editor einfügen«

  1. Jessica

    Das ist ein echt spannender Use-Case. Leider hab ich keinen Tipp für dich für die Core-Blöcke, aber eine Frage: wie wirkt sich das aus, wenn das Theme die weite und volle Breite nicht unterstützt?

Schreib einen Kommentar

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