WordPress Block Theme: Abstand der Liste von linken Listen-Rand anpassen – so geht’s – Webdesign Oberwart – Vom Konzept bis zur fertigen Firmenwebseite

Dieser Beitrag zeigt eine Lösung für den zu großen Abstand der Liste vom linken Listen-Rand auf dem Handy – also in mobiler Ansicht. Wie du diesen Abstand selber einstellen kannst, für deine Vorlieben, das zeigt dir dieser Beitrag.

Zusammenfassung:

Sinn des Blogbeitrages: Abstand der Liste vom linken Listen-Rand

Es gibt beim Listen Block in WordPress zwei Klassen,

.wp-list-block
.wp-block-post-content ul

.wp-block-list macht das:

Im Bild links siehst du, dass der Abstand der Liste zum linken Listen -Rand zu groß ist.

Dieses Problem löse ich in diesem Beitrag.

.wp-block-post-content ul macht das:

Die Klasse macht genau dasselbe, nur mit einem Unterschied. Diese Klasse greift nur im Post Content.

Das heißt, wenn WordPress sonst noch irgendwo Listen reinhaut, dann bleibt das von diesem Style verschont.

👉Überall auf der Website = .wp-block-list

👉 Nur in den Beiträgen = .wp-block-post-content ul

Lösung: padding ist innerhalb vom rosa Rand. Margin wäre ausserhalb vom rosa Rand. Da ich aber will, dass die Liste innerhalb vom rosa Rand mehr nach links sich verschiebt, nehme ich padding.

Der Listen Block

Der Listen Block ist ein Block im WordPress Block Editor. Er wird eigentlich sehr viel verwendet, speziell auch von mir. Der Grund:

Übersichtlichkeit
Zusammenfassungen
die KI mag das sehr gerne 😂

Wo finde ich ihn ? Einfach direkt beim Schreiben, entweder im Absatz Block über /Slash – Liste oder über den Plus Button.

Beispiel Liste : ungeordnete Liste

Eine Liste
noch eine Liste
Noch eine Liste
- Noch eine Liste eingerückt
- noch eine Liste
  - Und noch eine weitere Einrückung
  - noch was
- ich gehe wieder raus
- noch mal
und ich bin wieder ganz drauseen

CSS:

ul {
  list-style-type: square; /* Ändert alle Aufzählungspunkte in Quadrate */
}

HTML:

<ul style="list-style-type: circle;">
  <li>Erster Punkt mit hohlem Kreis</li>
</ul>

Zusammenfassung der Werte

Form	CSS-Wert	Beschreibung
●	`disc`	Ein gefüllter Kreis (Standard).
○	`circle`	Ein nicht gefüllter (hohler) Kreis.
■	`square`	Ein gefülltes Quadrat.

/* Partial list of types */
list-style-type: disc;
list-style-type: circle;
list-style-type: square;

Beispiel Liste mit Zahlen – geordnete Liste

Das ist eine Liste
und noch eine Liste
und ncoh eine Liste
- das ist ein Einzug
- und noch ein Einzug
  - und noch ein Einzug
  - und noch ein Einzug
- es geht wieder raus
- und noch einmal raus
Ich bin wieder ganz draussen
und nochmal draussen

Von wo kommen die Styles ?

👉 Die Styles von diesen zwei Beispielen stammen direkt von WordPress Listen Block aus dem WordPress Core . Also die Bullets !

Bei der geordneten Liste das ist neu, bis vor kurzem war es noch so, das WordPress beim ersten Einzug wieder mit 1 angefangen hat, usw. Neu ist jetzt, dass der erste Einzug auch bei den geordneten Listen mit einem circle anfängt.

Das finde ich persönlich wirklich gut, weil wenn der Einzug wieder eine 1 hat und der zweite Einzug auch wieder einen 1, schaut das doch ein wenig komisch aus.

Mein privater Style:

Du siehst es ja, also ich habe einen

border-radius, also einen Rand
Hintergrundfarbe – diese is ein preset aus der theme.json von mir

Woher kommt der Style ?

theme.json – mein Custom Block Theme

Was steht jetzt in der theme.json ? Bei mir steht das drinnen was du darunter jetzt siehst: das heisst, der Style kommt nicht ! aus der theme.json 😅😂

Wie du siehst, habe ich zwar den border-radius angelegt, aber mit 0px belegt. Also nein von hier ist er nicht.

theme.json

"core/list": {
				"border": {
					"radius": {
						"bottomLeft": "0px",
						"bottomRight": "0px",
						"topLeft": "0px",
						"topRight": "0px"
					}
				},
				"typography": {
					"fontFamily": "var(--wp--preset--font-family--literata)",
					"fontSize": "var(--wp--preset--font-size--medium)",
					"fontStyle": "normal",
					"fontWeight": "400"
				}

Listen Block Styling

Ich habe den Listen Block über die style.css Datei in meinem Custom Block Theme gestylt:

.wp-block-list {
   
    border-radius: 15px;
  overflow: hidden; /*   GANZ wichtig */
	
}

Ich hätte natürlich den Radius auch direkt in die theme.json schreiben können. Da ich aber das overflow:hidden unbedingt brauche, lasse ich es daweil so.

Die WordPress Klassen für den Listen Block

Die Klasse .wp-list-block ist neu hinzugekommen.

Früher war die Liste (<ul>, <ol>) kein eigenständiger Block mit eigener Klasse, sondern wurde oft nur als Kind-Element des Contents gestylt. Jetzt ist die Liste ein First-Class-Block. WordPress gibt dem äußersten Element der Liste automatisch die Klasse .wp-block-list.

Die Klasse .wp-block-post-content ul .wp-block-post-content ol :

Ist spezifischer . Er sagt : “ Die Liste innerhalb des Beitrags – Inhalts “ . Mit !important überschreibt er die theme.json oder auch .wp-block-list.

Warum ist das für mich wichtig ?

Für mich ist das wichtig, weil

ich den Listenstyle – blauer Hintergrund, border, nur im Post Content so haben möchte
ich im footer.html Template eine Navigation als vertikale Liste hinzugefügt habe, die dieses Styling nicht haben soll

Wo kommt jetzt der blaue Hintergrund her ?

.wp-block-post-content ul, .wp-block-post-content ol {

	 background: #E6EFF5!important;/**/

}

Dieser kommt jetzt genau aus der zweiten Klasse, welche ich oben beschrieben habe.

👉 Problem: `40px padding-left`

Wie du im Bild siehst, war mein Problem dieser linke Padding, der die Liste viel zu sehr nach rechts gerückt hat. Speziell mobil.

Interessanterweise habe ich auch beim TT5 Block Theme in der theme.json nachgesehen. Der linke Padding ist dort in Ordnung, ich finde ihn aber für mich sogar zu weit links. Na ja, auf jeden Fall habe ich nix gefunden, was mir hätte helfen können. 😅

Wie du im Bild siehst, ist der Einzug mobil viel zu gross. Und dann klebt der Text am linken Rand.

40px Einzug 👉

Die Ursache habe ich in den Chrome Dev Tools Gefunden. In den Dev Tools auf die Einstellung: Berechnet

👉Ursache: Voreingestellter Browser Abstand

User Agent Stylesheet

Das ist die häufigste Ursache für „geisterhafte“ Abstände. Der Browser (z. B. Chrome) bringt eigene Standard-Formatierungen mit, damit HTML-Elemente auch ohne CSS lesbar sind.

Typisches Beispiel: Listen (<ul> oder <ol>) haben im Chrome standardmäßig ein padding-inline-start: 40px (was als padding-left angezeigt werden kann).
Erkennungsmerkmal: In den DevTools steht rechts neben der Regel in grauer Schrift „user agent stylesheet“.

Auf jeden Fall, war in meinem Listenblock – mit Chrome Dev Tools – ein padding-left vorhanden. Hier ist der Übeltäter :👇😂

ul {        User-Agent-Stylesheet
    display: block;
    list-style-type: disc;
    margin-block-start: 1em;
    margin-block-end: 1em;
    padding-inline-start: 40px;
    unicode-bidi: isolate;
}

👉 Die Lösung: `padding-left` auf 0 setzen


.wp-block-post-content ul li,.wp-block-post-content ol li {
	
	
	   padding-left:0px !important;
}

Korrigiert: padding-left:0px !important;

Wozu brauche ich : `overflow: hidden;`

Wenn man in der Liste URL’s hinzufügt, kann es sein, dass auf dem Handy dann ein hässlicher horizontalen Scrollbalken sehen kann.

Man kann es natürlich auch direkt in den bodyTag setzen:



body{
  
	overflow-x:hidden;
	hyphens: auto;
			
} oder : 
html, body {
    max-width: 100%;
    overflow-x: hidden;
}

Allledings, das ja ein Block Theme die Layouts über die theme.json regelt, ist das ja eher nicht mehr nötig. Das max-width .

WordPress Custom Block Theme

Ich habe weitestgehend die style. css Datei ausgemistet, und alles was nötig ist in die theme.json Datei verschoben.

Siehe auch meine Beiträge dazu:

WordPress: CSS Styles in theme.json integrieren – #1 body und p

WordPress: CSS Styles in theme.json integrieren-#2 blockquote und pullquote + Stil Varianten

WordPress: CSS Styles in theme.json integrieren-#3 Tabellen Block im FSE Block Theme + Styling

Fazit:

Ich bin ziemlich glücklich, dass ich den Fehler mit dem störenden padding-left gelöst habe. Geichzeitig habe ich auch noch einen Fehler korrigiert: nämlich das mit overflow-hidden. Jetzt passt es auch am Handy wieder ohne diese lästigen horizontalen Scrollbalken.

WordPress Block Theme: Abstand der Liste von linken Listen-Rand anpassen – so geht’s

Veröffentlicht:

Aktualisiert:

Zusammenfassung:

Der Listen Block

Beispiel Liste : ungeordnete Liste

Beispiel Liste mit Zahlen – geordnete Liste

Von wo kommen die Styles ?

Mein privater Style:

Woher kommt der Style ?

theme.json – mein Custom Block Theme

theme.json

Listen Block Styling

Die WordPress Klassen für den Listen Block

👉 Problem: `40px padding-left`

40px Einzug 👉

👉Ursache: Voreingestellter Browser Abstand

👉 Die Lösung: `padding-left` auf 0 setzen

Wozu brauche ich : `overflow: hidden;`

WordPress Custom Block Theme

Fazit:

WordPress Block Theme: Abstand der Liste von linken Listen-Rand anpassen – so geht’s

Veröffentlicht:

Aktualisiert:

Zusammenfassung:

Der Listen Block

Beispiel Liste : ungeordnete Liste

Beispiel Liste mit Zahlen – geordnete Liste

Von wo kommen die Styles ?

Mein privater Style:

Woher kommt der Style ?

theme.json – mein Custom Block Theme

theme.json

Listen Block Styling

Die WordPress Klassen für den Listen Block

👉 Problem: 40px padding-left

40px Einzug 👉

👉Ursache: Voreingestellter Browser Abstand

👉 Die Lösung: padding-left auf 0 setzen

Wozu brauche ich : overflow: hidden;

WordPress Custom Block Theme

Fazit:

I llllll ike you :-)

👉 Problem: `40px padding-left`

👉 Die Lösung: `padding-left` auf 0 setzen

Wozu brauche ich : `overflow: hidden;`