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.