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;
}

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

Wichtig: Ich habe dieses Snippets, hier in diesem Blog, getestet. Bei mir läuft es fehlerfrei. Ihr solltet, falls ihr meinen Code nutzt, trotzdem vorsichtig sein. Ich empfehle eine Sicherung der Datei, die ihr ändert und auch der gesamten Installation, bevor ihr den Code-Schnipsel bei euch einbaut.