Make WordPress Core

Opened 8 weeks ago

Last modified 7 weeks ago

#61130 new defect (bug)

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

Reported by: strukturdoktor's profile strukturdoktor Owned by:
Milestone: Awaiting Review Priority: normal
Severity: normal Version: 6.5
Component: Bundled Theme Keywords: reporter-feedback needs-screenshots
Focuses: Cc:

Description (last modified by sabernhardt)

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

Attachments (4)

Bildschirmfoto 2024-05-02 um 21.15.45.png (204.6 KB) - added by strukturdoktor 8 weeks ago.
Bildschirmfoto 2024-05-02 um 21.17.01.png (91.3 KB) - added by strukturdoktor 8 weeks ago.
Bildschirmfoto 2024-05-09 um 10.36.07.png (81.8 KB) - added by strukturdoktor 7 weeks ago.
Bildschirmfoto 2024-05-09 um 10.36.20.png (83.6 KB) - added by strukturdoktor 7 weeks ago.

Download all attachments as: .zip

Change History (8)

#1 @poena
8 weeks ago

  • Component changed from Themes to Bundled Theme

#2 follow-up: @sabernhardt
7 weeks ago

  • Description modified (diff)
  • Keywords reporter-feedback needs-screenshots added

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.

#3 @SergeyBiryukov
7 weeks ago

  • Summary changed from WP 2024 Theme CSS Bug to Twenty Twenty-Four: Bullet points are outside the surrounding box

#4 in reply to: ↑ 2 @strukturdoktor
7 weeks ago

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.

Last edited 7 weeks ago by strukturdoktor (previous) (diff)
Note: See TracTickets for help on using tickets.