Die richtige Inhaltsbreite für den Gutenberg Editor berechnen
Der WordPress Gutenberg Editor ermöglicht das Anpassen und Berarbeiten von Webseiteninhalten equivalent zum Frontend-Design. Das Ziel vom Gutenberg Editor ist es dabei, im Bearbeitungs-Modus das Aussehen der Webseite 1:1 wiederzugeben. Eine kleine Hürde stellt dabei die richtige Inhaltsbreite im Editor, welche je nach Option des Themes unterschiedlich ausfallen kann.
Zum Beispiel verändert sich die Inhaltsbreite je nachdem ob eine Sidebar angezeigt wird oder nicht. Oder dann wenn man verschiedene Breiten wie „Breit“, „Mittel“ oder „Schmal“ anbietet.
Was brauchen wir für die richtige Berechnung?
Je nachdem welche Design-Optionen ein Theme mitbringt, kann die Grundlage der Kalkulation einer Inhaltsbreite ganz unterschiedlich ausfallen. In meinem Beispiel sind folgende Punkte maßgeblich für die richtige Berechnung der Gutenberg-Editor Inhaltsbreite.
- Äußere Inhaltsbreite – Die Breite des gesamten Webseitenbereiches, welcher alle Elemente wie z.B. Header und Footer umschließt.
- Innere Inhaltsbreite – Die Breite des Textbereiches, welcher in meinen Themes „Breit“, „Mittel“ oder „Schmal“ sein kann.
- Seitenleistenbreite – Die Breite der Sidebar ist auch ein wesentlicher Teil, da sich die Inhaltsbreite dann unterscheidet, wenn sie ein- oder ausgeblendet wird.
- Innenabstände – Hinzu kommen diverse Innenabstände, zum Rand des Browserfensters, welche die Gesamtbreite etwas reduzieren.
Die Inhaltsbreite der Webseite kalkulieren
Die folgende Funktion berechnet die Inhaltsbreite auf Grundlage der zuvor genannten Faktoren und wird später dazu genutzt, die passende Breite für den Gutenberg-Editor zu nutzen.
Die Funktion calc_gutenberg_editor_content_width() gibt uns nun je nach Einstellung des Theme-Designs, die entsprechende Breite in einem numerischen Wert aus, welche wir für Angabe der richtigen Gutenberg-Editor Inhaltsbreite verwenden können.
Die Inhaltsbreite an den Gutenberg-Editor übergeben
Dazu nutzen wir die WordPress-Action enqueue_block_editor_assets mit der wir über Inline-CSS die passende Inhaltsbreite ausgeben. Der Dummy-Handler „block-editor-styles“ wird in diesem Fall benötigt, um den Inline-Style mit der Funktion wp_add_inline_style( 'block-editor-style', $inline_css ); anwenden zu können. Stattdessen kann natürlich auch ein anderer handler für die Ausgabe von wp_add_inline_style() verwendet werden.
Die WordPress Gutenberg-Editor Block Klasse .wp-block {...} ist der passende CSS-Selektor, welcher unsere Inhaltsbreite an die Blöcke übergibt. Mit dieser kleinen Funktion kannst du nun ganz einfach und abhängig von den Theme-Design Optionen, die richtige Inhaltsbreite für den WordPress Block-Editor berechnen.
