21. Juli 2023

So kannst du den WordPress-Abstandhalter im Backend sichtbar machen

Der „Abstandhalter“ im WordPress-Gutenberg-Editor ist ein fantastisches Tool um Inhalte schnell und einfach zu gestalten, bzw. mit Whitespace zu versehen. Es gibt allerdings 2 Dinge, die mich stören:

1.: Der Abstandhalter ist im Backend, wenn er nicht ausgewählt ist, unsichtbar.

Und 2.: Der Abstandhalter ist immer gleich hoch und wegen des Inline-CSS nicht über das Stylesheet, z.B. für die mobile Ansicht, anpassbar.

Bis jetzt! 😉

Mit folgendem Code, kannst du diesen Umstand ändern.

Um Änderungen am Style des WordPress-Backends vorzunehmen, ergänze folgende Zeile in der functions.php deines Themes.

function ff_admin_style() {
    wp_enqueue_style('admin-styles', get_template_directory_uri().'/admin-styles.css'); 
}

add_action('admin_enqueue_scripts', 'ff_admin_style');Code-Sprache: JavaScript (javascript)

Erstelle jetzt die Datei „admin-styles.css“ im deinem Theme-Verzeichnis. Mit folgendem CSS wird der Abstandhalter im Backend sichtbar:

.wp-block-spacer{
background: repeating-linear-gradient(
    45deg,
    rgba(0, 0, 0, 0.05),
    rgba(0, 0, 0, 0.05) 10px,
    rgba(0, 0, 0, 0.1) 10px,
    rgba(0, 0, 0, 0.1) 20px
  )
}Code-Sprache: CSS (css)

Da WordPress die Höhe des Abstandhalters inline ausgibt, ist es nicht möglich die Höhe mit CSS anzupassen. Mit folgendem jQuery-Script in deinem (Frontend-)JS wird die Höhe des Abstandhalters in der mobilen Ansicht halbiert:

$(document).ready(function() {
    function checkScreenWidth() {
      if ($(window).width() <= 768) {
        $('.wp-block-spacer').css('height', function(index, currentValue) {
          var newHeight = parseInt(currentValue) / 2;
          return newHeight + 'px';
        });
      } 
    }
    checkScreenWidth();
    $(window).resize(checkScreenWidth);
});Code-Sprache: JavaScript (javascript)