Listenelemente durch andere Elemente (wie Code-Element) erweitern

Ich behelfe mir mit einem Workaround, indem ich zunächst die Liste schreibe und dann nach einem Zeilensprung (zweimal Enter-Taste) einen Code-Block (1) einfüge:

Nun stimmt die Numerierung unterhalb des Code-Blocks nicht mehr. Das lässt sich aber korrigieren, indem ich den Anfangswert der Nummerierung ändere (2):

Der Code-Block verschachtelt das HTML-Tag <code> für Inline-Code im Block-Element <pre class="wp-block-code">. Es wäre zwar valides HTML, ein Block-Element in das Listenelement einzufügen, das ist aber im Block-Editor nicht vorgesehen.

Ein Workaround wäre, den Code als fortlaufenden Text eines Listenelements einzufügen und als Inline-Code zu formatieren:

Das sieht im Backend zunächst unschön aus. Mit einer eigenen CSS-Regel lässt sich das aber wenigsten im Frontend hübscher darstellen, sinngemäß:

li code {
  color: #777;
  background: #fff;
  border-radius: 20px;

  display: block;
  margin: 10px auto;
  padding: 10px;
}

Im Frontend sieht das so aus (oben Code-Block, unten mit Pfeil Inline-Code):

PS: Im Beispiel-Code hat sich ein Fehler eingeschlichen. Die Funktion müsste dann my_header_text() heißen. Ich wollte deshalb die Screenshots nicht neu machen.

Hallo @matze202
ich habe es gerade überflogen. Sieht gut aus, wobei ich auch kein Englisch-Experte bin und ich gerne auch deepl.com in solchen Fällen nutze. 😉
Aber die Übergangslösung, die @pixolin beschrieben hat, sieht an sich auch schon gut aus. 👍

Nachtrag: Übringens danke, dass du den Issue eingetragen hast. In dem meisten Fällen erleben wir, dass in solchen Fällen eher keine Antwort mehr kommt. Oder noch schlimmer … 😔

Viele Grüße
Hans-Gerd

… dass in solchen Fällen eher keine Antwort mehr kommt.

Wer will es Fragesteller/-innen verübeln, die meistens adhoc eine Lösung brauchen und nicht Monate warten können, bis sich ein Entwickler erbarmt und dem Issue eine Priorität eingeräumt hat. Aber ja, Danke fürs Posten auf GitHub.

Danke auch Dir für deine Anleitung, aber diese ist leider aus SEO-Sicht nicht zu empfehlen, weil die Liste damit unterbrochen wird.

Da hast du auch wieder recht. In dem Fall könntest du immer noch die Variante mit Inline-Code verwenden:

<li>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.<br>
<code>add_action( 'wp_head', 'my_header_text' );<br>
function my_header_text() {<br>
  echo '&lt;!-- Grüße vom WP Support --&gt;';<br>
}</code>
</li>