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. Nur bei mir funktioniert das nicht. Ich bin wohl zu doof das einzubauen. 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.

Titelfoto Werner Moser auf Pixabay