Twenty Twenty-Four: Bullet points are outside the surrounding box

[strukturdoktor]

Hi there,

I use WP 2024 Version 6.5.2 an 2024 Theme Version 1.1. I use standard bullet points in the List element. The bullet points are left outside the surrounding box, and depending on the other elements below they disappear.

I used following code in the custom css:

ul li {
 list-style-position:inside;
}

Then, the bullet points are more or less in the right position, but then some errors occur:

• In the Block Editor the bullet point is on one line and the text is shown on the next line
• In normal view mode, the bullet points and text is shown properly, but if there is an automatic line break, the text starts at the beginning of the new line and is not indented correctly

[sabernhardt]

Hi and welcome to WordPress Core Trac!

The bullet points are left outside the surrounding box, and depending on the other elements below they disappear.

Could you share images and/or steps to reproduce your issues with the bullets disappearing (without any custom styles) in Twenty Twenty-Four?

if there is an automatic line break, the text starts at the beginning of the new line and is not indented correctly

When list items are set to ​list-style-position: inside, the text should wrap to the next line beneath the bullet point (list marker). If that is not the style you want, you probably would prefer increasing the padding on the list instead of editing list-style-position. For example, you could double the default indentation with something like this (specifically within the post content area, and not affecting nested lists):

.entry-content > ul {
  padding-left: 2rem;
}

In the Block Editor the bullet point is on one line and the text is shown on the next line

The editor has a rich text div element inside the List Item block, and that may need to retain the element's display: block default style. However, you could open an issue on the Gutenberg repository to consider changing that to display: inline for anyone else who might have the list marker's position set to inside.

[strukturdoktor]

Hi,

I tried your suggestion with the padding, but it had no effect. I inserted it that way:
with the inside command:

ul li {
 list-style:square;
 list-style-position:inside;
}

.entry-content > ul {
  padding-left: 2rem;
}

Please find attached the two images. Especially in the first image you can see, that the bullet points are at the left side of the page. In the second image you can see the bullet points slightly outside the box. That would be ok for me.

I took the screenshots in Gutenberg Editor mode, but it looks the same on the website.

[karmatosed]

I admit, I am struggling to replicate this. I do think this might be specific to your setup @strukturdoktor which absolutely doesn't mean there isn't an issue but I think @sabernhardt is correct in suggesting this might need exploring within the editor itself not the theme.

The editor has a rich text div element inside the List Item block, and that may need to retain the element's display: block default style. However, you could open an issue on the Gutenberg repository to consider changing that to display: inline for anyone else who might have the list marker's position set to inside.

For now, unless we can replicate on the theme outside your setup I would recommend this is closed and then we have an issue opened within the editor for this issue.

[karmatosed]

For now, I am going to close this. We can always reopen. Thank you everyone.