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.

Update vom 20. August 2020: Fabian Kägy hat in einem Kommentar zur englischen Version des Artikels ein Code-Beispiel geschrieben, mit dem die volle Breite auch für Core- und Dritt-Blocks umgesetzt werden kann 🎉 Ich habe den zweiten Teil entsprechend angepasst.

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).

Um das auch für Core- und Drittanbieter-Blocks umzusetzen, bei denen wir das registerBlockType()-Objekt nicht direkt verändern können, können wir den blocks.registerBlockType-Filter nutzen, wie in dem folgenden Code-Beispiel:

const modifyDefaultAlignment = ( settings, name ) => { if ( name !== 'core/media-text' ) { return settings; } const newSettings = { ...settings, attributes: { ...settings.attributes, align: { type: 'string', default: 'full' }, }, }; return newSettings; }; wp.hooks.addFilter( 'blocks.registerBlockType', 'textdomain/change-media-text-default-alignment', modifyDefaultAlignment, );

Der Code prüft auf den core/media-text-Block und fügt, wenn wir einen davon haben, den Einstellungen das align-Attribut mit dem Standardwert full hinzu. Das funktioniert nur, wenn das Theme den add_theme_support( 'align-wide' );-Aufruf enthält.

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

  1. 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?

Schreibe einen Kommentar

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