Eigene Styles auf der Webseite und im Gutenberg Editor

Eigene Styles im Blog und im Design entsprechend geänderte Blöcke im Gutenberg-Editor nutze ich schon eine ganze Weile. Jetzt bin ich auf der Webseite „Die Netzialisten“ auf den Artikel „Block-Styles für Gutenberg-Blöcke ergänzen“ gestoßen. Was dort steht hört sich gut an und ist klasse erklärt. Ich nutze hier jedoch eine Einfach-Variante, die ich hier vorstelle.

Alles was man für meine Variante braucht ist eine Child-Theme und die nachfolgende Funktion für die functions.php des Child-Themes. Die Funktion lädt ein eigenes Stylesheet, wenn man den Gutenberg-Editor im WordPress-Backend aufruft. In diesem Stylesheet werden dann die Design-Änderungen, die auch schon in der styles.css des Child-Themes zu finden sind festgehalten. Ergebnis: Die neuen Styles sind auch im Editor zu sehen.

// Gutenberg Stylesheet
function my_gutenberg_styles() {
  $harrison_gutenberg_theme_version = wp_get_theme('my-gutenberg')->get( 'Version' );

  wp_enqueue_style( 'my-gutenberg', get_theme_file_uri( 'gutenberg-editor-style.css' ), false, $harrison_gutenberg_theme_version );
}
add_action( 'enqueue_block_editor_assets', 'my_gutenberg_styles' );
// https://florianbrinkmann.com/editor-styles-gutenberg-5369

Allerdings ist diese Variante nicht so komfortabel wie bei den „Netzialisten“ vorgestellte Variante. Die produziert einen Eintrag in der Seitenleiste des Gutenberg-Editors. Bei mir muss die CSS-Klasse (ohne den Punkt) in der Seitenleiste unter „Erweitert“ => „Zusätzliche CSS-Klasse“ eingetragen werden. Hat man alles richtig gemacht. Sieht man diese Änderung auch sofort im Editor.

 .has-style-paragraph-box { /* Rahmen um Absatz */
  padding: 20px 30px;
  border: 1px solid black;
}

.has-black-link-color a { /* Linkfarbe wie Text */
  color: #000000 !important;
}

Hier erzeugt die CSS-Klasse .has-style-paragraph-box einen Rahmen um den Absatz. Und .has-black-link-color sorgt dafür, dass der eigentlich rote Link schwarz ist.

Vielleicht nehme ich doch noch mal ein Anlauf die komfortablere Variante hier einzubauen. Momentan bin ich mir meiner „Einfach-Variante“ zufrieden.