Content“überlauf“ wenn das Label eines Kategoriedropdowns nicht angezeigt wird

Neulich habe ich damit angefangen, meine Website umzustellen und die Templates neu gemacht (FSE). Um das Stöbern zu erleichtern beschloss ich, im Blogbereich neben einer Suchfunktion auch ein Kategoriedropdown bereitzustellen. Kein Label, einfach nur zum Auswählen einer Kategorie. Der Kategorieblock befand sich in der ersten von 2 Spalten eines Spaltenblocks, der wiederum in einen farbig hinterlegten 100% breiten Gruppe eingefügt war und ihren Inhalt in Inhaltsbreite darstellte.

Bei der Durchsicht des Blogbereichs fiel mir auf, dass sich nun bei Chrome-basierten Browsern am unteren Browserrand eine horizontale Scrollleiste zeigte. Damit geriet man über den Seiteninhalt hinaus. Schnell war geklärt, der Abschnitt mit Kategorieauswahl und Suchfunktion enthielt die Ursache. Aber was genau konnte das bewirken?

Mit Hilfe des Browser-Inspektors untersuchte ich jedes Element und schaute was passiert, wenn ich es löschte. Schließlich verschwand der Balken nachdem ich die erste Spalte mit dem Kategoriedropdown gelöschte hatte. Den Übeltäter dingfest zu machen, war dann nur noch eine Frage von Sekunden.

Die Klasse screen-reader-text und die Formatierung des Labels passten nicht zusammen

Wenn ein Kategorielabel nicht angezeigt wird, ist es im Quellcode weiterhin vorhanden, doch versehen mit der CSS-Klasse screen-reader-text. Nun wird diese in WordPress allerdings nicht einfach auf „display:none“ gestellt, sondern um nicht gesehen zu werden mit diesem CSS „ausgeblendet“:

.screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    word-wrap: normal !important;
}

Dem entgegen allerdings stand folgendes inline-CSS (bei display:block; die Breite auf 100% zu setzen ist weitgehend sinnfrei), das vom Category-Block (unnötigerweise) generiert worden war (wp-block-categories-inline-css):

.wp-block-categories .wp-block-categories__label {
    display: block;
    width: 100%;
}

Wurde der Wert 100% bei „width“ deaktiviert, war die Leiste verschwunden. In diesem Fall war die Lösung einfach, indem im Theme CSS die Breite des Labels mit „auto“ definiert wird.

.wp-block-categories .wp-block-categories__label {
    width: auto;
}

Geziehlt nur für den Fall, dass das Label für das menschliche Auge unsichtbar sein soll, funktioniert dieses Snippet:

.wp-block-categories .wp-block-categories__label.screen-reader-text {
  width: 1px;
}