editor.css und Seven für Drupal mit Gutenberg

Gutenberg in Drupal 8 – editor.css und Seven-Verwaltungstheme

Das Verwaltungstheme für Drupal 8 – Seven – ist zwar übersichtlich, aber die Schrift ist vielen Benutzern zu klein. Darum legen wir ein Subtheme von Seven an: sevenchild. sevenchild braucht zunächst nur zwei Dateien:

sevenchild.info.yml
sevenchild.libraries.yml

Dazu kommt die CSS-Datei

css/style.css

In sevenchild.info.yml

name: Sevenchild
type: theme
description: This is a sub theme of Seven
core: 8.x
# Defines the base theme
base theme: seven
# Defines libraries group in which we can add css/js.
libraries:
  - sevenchild/global-styling
# Regions
regions:
  pre_content: 'Pre-content'
  breadcrumb: Breadcrumb
  highlighted: Highlighted
  help: Help
  page_top: 'Page top'
  page_bottom: 'Page bottom'
regions_hidden:
  - sidebar_first

Und in sevenchild.libraries.yml

global-styling:
  css:
    component:
      css/style.css: {}

Minimales CSS z.B.

body {
   font-size: 1em;
   background: hsl(50,50%,97%)
}

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

Stile für den Gutenberg-Editor

CSS und Script werden in den Gutenberg-Editor mittels library-editor und [theme-name].gutenberg.yml eingebracht. Z.B.:

libraries-edit:
  - my-theme/editor

und dann

editor:
  css:
    theme:
      css/editor.css: {}
  js:
    js/my-theme-script.js

Externe Quellen

Add custom style and/or script to Gutenberg editor