Gutenberg in Drupal 9^/ 10^ – editor.css

Um Layout und Typografie in Gutenberg so gut wie möglich in die Nähe der Frontansicht anzupassen, eine Datei my-theme.gutenberg.yml anlegen.

libraries-edit:
  - drinimal/editor

theme-support:
  colors:
    - slug: "black"
      name: "Black"
      color: "#000000"
    - slug: "white"
      name: "White"
      color: "#FFFFFF"
    - slug: "gainsboro"
      name: "Gainsboro"
      color: "gainsboro"
    …

  fontSizes:
    - name: "Small"
      size: 12px
      slug: "small"
    - name: "Medium"
      size: 14px
      slug: "medium"
    - name: "Large"
      size: 16px
      slug: "large"
    - name: "Huge"
      size: 18px
      slug: "huge"

Und in my-theme.libraries.yml auf die CSS/JavaScript-Datei verweisen:

editor:
  css:
    theme: 
      css/editor.css: {}
  js:
    js/settings.js: { defer: true }

Zugriff auf Elemente in editor.css er

.block-editor-block-list__layout {
  background: ivory;
  font-family: var(--font-family);
  line-height: var(--line-height);
  font-size: 1.15rem;
  font-weight: 300;
}
:where(.block-editor-block-list__layout) h1, h2, h3, h4, h5, h6 {
  font-weight: 400;
}

Eine Hintergrundfarbe, weil die Autoren mit dem zarten Gelb im Hintergrund schneller den Unterschied zwischen Vordergrund und Hintergrund sehen.

Externe Quellen

Add custom style and/or script to Gutenberg editor

Getting Started with Gutenberg (Block Editor) in Drupal (2024) von Web wash auf YouTube