Possible Conflict Between “List Block” and Submenu Formatting

  • Resolved ajwe

    (@ajwe)


    10 months, 2 weeks ago

    It seems that there might be a conflict between the HTML/CSS used on a List block (such as in a post listing various items) and the dropdown menu functionality in a submenu.

    The website I’m working on has a navigation menu in the header where one of the items has a submenu. This works just fine on every page on my site, except for the pages where I have a post that includes a bullet list. On those pages, the submenu is formatted wrong with extra padding that makes the text space too narrow.

    After much poking around with the html to try to figure out why my blog post page had different menu formatting than other pages on my site, I found that pages with List blocks in the post include the following:

    <style id='wp-block-list-inline-css'>
ol,ul{box-sizing:border-box}ol.has-background,ul.has-background{padding:1.25em 2.375em}
  ul.is-style-checkmark-list {
    list-style-type: "\2713";
  }

  ul.is-style-checkmark-list li {
    padding-inline-start: 1ch;
  }
  ol,ul{padding-left: var(--wp--preset--spacing--10);}
</style>

    If I save the HTML from this page in the browser and comment out just the bold-faced portion above, the problem goes away and the dropdown menu (i.e., submenu) is once again formatted normally. This seems to be coming from the stylesheets in wp-includes/blocks/list.

    (On my own site, I just modified the one post I had which used a bulleted list to instead be paragraphs and the problem went away.)

Viewing 3 replies - 1 through 3 (of 3 total)
  • Thread Starter ajwe

    (@ajwe)

    Because it might be hard to see what I’m describing, I created a clean install of WordPress that uses Twenty Twenty Four and was able to reproduce the issue. It turns out the dropdown menu needs to have a background color in order for the issue to show up. The attached image shows two different pages, one with a bullet list and one without, and how that manifests as the dropdown menu on one having messed up padding.

    View post on imgur.com
    Moderator jordesign

    (@jordesign)

    Hey @ajwe – thanks for reporting this. You’re correct this does happen at the moment – it’s a know issue with the editor – and is on the roadmap to be fixed.

    https://github.com/WordPress/gutenberg/issues/50486

    In the meantime – you can try adding this CSS to the site to work around it.

    /* unset padding on the navigation block */ 
.wp-block-navigation ul {
    padding: unset;
}
    Thread Starter ajwe

    (@ajwe)

    Ah, thanks for this information. I tried looking around to see if this was a known issue but I must have been looking in the wrong places. Appreciate the pointer & the workaround.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Possible Conflict Between “List Block” and Submenu Formatting’ is closed to new replies.