passt nicht in die kiste
,

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;
}

Bitte Kommentarfunktion nicht für Supportanfragen nutzen. Dem kann hier nicht entsprochen werden. Die Angabe einer E-Mail-Adresse und eines Namens ist nicht erforderlich. Einen (Spitz)-Namen zu nennen wäre aber doch nett.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Hinweis: Sowohl angegebener Name als auch E-Mail-Adresse (beides ist optional, dafür werden alle Kommentare vor Veröffentlichung geprüft) werden dauerhaft gespeichert. Du kannst jeder Zeit die Löschung Deiner Daten oder / und Kommentare einfordern, direkt über dieses Formular (wird nicht veröffentlicht, und im Anschluss gelöscht), und ich werde das umgehend erledigen. – Mit hinterlassenen Kommentaren hinterlegte IP-Adressen werden nach zwei Monaten automatisch gelöscht