WP 6.2 Gutenberg ul.has-background sometimes appears and sometimes doesn’t

  • mr6yomtleepcg

    (@mr6yomtleepcg)


    1 year, 8 months ago

    In a site we are developing using Gutenberg blocks, with TT3 as the base theme, under WordPress 6.2, we have an oddity that we can’t quite figure out.

    The top navigation across the entire site is identical (we believe), looking at the source code for the navigation, all the pages appear to be the same. The pages that work and the pages that don’t work are using the same template. However, on some pages we see this CSS in web developer tools and on same pages we do not:

    ol.has-background, ul.has-background {
        padding: 1.25em 2.375em;
    }

    Doing a diff of the entire HTML navigation block between the good and bad page, shows no difference in the HTML.

    I read here https://wordpress.org/support/topic/why-does-adding-background-color-also-add-padding/ today that Gutenberg blocks are attempting to be helpful by automatically adding padding if there is a background colour, which is fine also. And that article shows how to add code to functions.php to stop that behaviour.

    I see no reason to completely stop this behaviour, but I would like to find out what is triggering the padding on same pages and not on others. Pretty certain after spending close to 2 hours today looking, that both pages have the same styling on the blocks.

    Obviously I am missing something and am not sure where to look.

    Any suggestions on what might be causing this discrepancy?

Viewing 10 replies - 1 through 10 (of 10 total)
  • Thread Starter mr6yomtleepcg

    (@mr6yomtleepcg)

    1 year, 8 months ago

    Possibly a bug in WordPress. I just discovered that pages with unordered lists on them add this CSS to the page:

    ol.has-background, ul.has-background {
        padding: 1.25em 2.375em;
    }

    Pages without unordered lists don’t have that. Since the CSS is vague, it negatively affects the top nav or any block that uses ordered lists.

    Can any one else confirm if this is a bug, and if it is, where do I report it.

    thelmachido a11n

    (@thelmachido)

    1 year, 8 months ago

    Possibly a bug in WordPress. I just discovered that pages with unordered lists on them add this CSS to the page:

    ol.has-background, ul.has-background {
        padding: 1.25em 2.375em;
    }

    Hi @mr6yomtleepcg are you able to share links to the pages on your site, the one with the padding and the one without?

    I am failing to see exactly the extra padding on my test site, hopefully, that will help to narrow down the issue.

    Ben Dunkle

    (@empireoflight)

    1 year, 4 months ago

    Seeing the same issue. If an unordered list is present on the page, the navigation block automatically gets that padding added to it. If it’s not a bug I don’t know what it is.

    crsleeth

    (@crsleeth)

    1 year, 3 months ago

    Seeing the same issue but you can resolve with Aditional CSS:

    ol.has-background, ul.has-background {
    padding: 0em;
}
    Mike Matenkosky

    (@hikinmike)

    1 year, 2 months ago

    @thelmachido I just stumbled across this thread. I can confirm as well. It does it on both TT2 & TT3. This only happens if you add a colored background in the navigation and if you have an ordered or unordered list on any page.

    ygirod

    (@ygirod)

    1 year, 1 month ago

    Hi,

    I think I understand what’s going on.

    When you add a bulleted list or an ordered list somewhere in the page, this inserts an “inline” CSS style which acts on all the “ol” and “li” elements of the page which have a background color. For example, the navigation menu.

    <style id='wp-block-list-inline-css'>
ol,ul{box-sizing:border-box}ol.has-background,ul.has-background{padding:1.25em 2.375em}
</style>

    Otherwise, this “inline” CSS style does not appear in the source code of the page, nor in an external CSS file.

    Corey Salzano

    (@salzano)

    8 months, 4 weeks ago

    I also encountered this bug.

    leeboone

    (@leeboone)

    7 months, 2 weeks ago

    I just ran into this as well.

    timfroling

    (@timfroling)

    6 months, 2 weeks ago

    Yes, it is still happening. It was doing my head in, thinking it was Spectra, but it appears it is a Gutenberg issue (thanks to this post). In the “additional CSS” field that Spectra offers I re-declared the padding to be 0 as a workaround.

    Windhamdavid

    (@windhamdavid)

    4 months, 2 weeks ago

    This issue is documented @ https://github.com/WordPress/gutenberg/issues/50486 and has been fixed in an upcoming release.

Viewing 10 replies - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.