Hinweis:
Diese Anleitung richtet sich an erfahrene Administratoren.
Für SBR-Websites ist der nachfolgend beschriebene Vorgang nicht erforderlich.
Die Änderungen sind im SBR-Theme ab Version 1.5 bereits enthalten.
Beim Bearbeiten oder Verschieben von Blöcken erwischt man bei tiefer Verschachtelung der Inhalte manchmal den falschen Block und muss dann den Fehler wieder rückgängig machen. Mit etwas CSS wird der Block beim Überfahren mit der Maus deutlich sichtbar (Hover-Effekt) und erleichtert somit das Handling.
Zunächst fügen wir diesen PHP-Code in der Datei „functions.php“ (in einem Child-Theme) am Ende hinzu. Sollte kein Child-Theme vorhanden sein, wird der Code in ein Snippet-Plugin wie z. B. „WPCode“ eingebaut und aktiviert:
/* Gutenberg Stylings im Backend */
function dwp_gutenberg_styles() {
wp_enqueue_style( 'gutenberg-css', get_theme_file_uri( '/gutenberg.css' ), false );
}
add_action( 'enqueue_block_editor_assets', 'dwp_gutenberg_styles' );
Danach erstellen wir im (Child-) Theme-Ordner eine leere Datei „gutenberg.css“ und fügen den nachfolgenden CSS-Code in die Datei ein:
/* Rahmen für Gutenberg-Blöcke */
.wp-block:hover {
box-shadow: 0 0 0 1.5px #550039;
}
Der ursprüngliche Farb-Code wurde zur besseren Sichtbarkeit durch „#550039“ ersetzt.
So hebt sich ein selektierter Block durch die kräftige Farbe hervor:
