This could be fixed by applying the ::before
style to only the direct descendants of the list block that has a style, e.g.
:where(ul, ol).is-style-dashed > li::before { ... }
In the meantime, if anyone else runs into this, I’ve used the following to fix my “default” style list items:
:is(ul, ol)[class*="is-style"] .is-style-default > li {
list-style-type: disc !important;
}
:is(ul, ol)[class*="is-style"] .is-style-default > li::before {
display: none;
}
]]>Since the update to WordPress 6.5 I have noticed a strange problem with the group container and the list block. The left padding seems to be wrong, or the spacing is no longer correct.
Any suggestions?
Kind regards, MIke
]]>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.)
]]>I’m running into some bizarre behavior while using the “list block” with the twenty twenty-three theme. The CSS for the list block seems to be adding padding to all <ul> elements on the page. This is stretching the vertical height of our navigation bar on any page using a list block element. For page continuity I’m hoping to be able to control this behavior. Here are some links to two test pages to show examples of this behavior.
https://junejournal2.wpengine.com/2023/09/12/navigation-bar-without-list-block/ -Navigation bar height is properly sized
https://junejournal2.wpengine.com/2023/09/12/navigation-bar-with-a-list-block/ -Navigation bar is now stretched vertically
We would like to be able to use the list block on our pages without having this padding effect added to the navigation bar. Any help resolving this issue is very much appreciated!
]]>If I have a link block and select edit in HTML, it does display the HTML version. However it seems to be adding content, as per below. Further, if I click to another application (Word) I immediately see the dialog block:
This block contains unexpected or invalid content. “Attempt Block Recovery”
If I attempt the recovery, the block is restored.
The same thing occurs whether or not I edit the code once I return to Edit Visually.
I have taken a set of steps to see what is going on behind the scenes. Here is the HTML for 2 List Blocks, unordered and ordered, each with Item1, Item 2, Item 3 as their contents.
HTML before doing anything (from Preview>view source): (extra empty lines removed)
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
Select Edit in HTML, first list.
Shows in the WP editor:
<ul><!-- wp:list-item -->
<li>item 1</li>
<!-- /wp:list-item -->
<!-- wp:list-item -->
<li>item 2</li>
<!-- /wp:list-item -->
<!-- wp:list-item -->
<li>item 3</li>
<!-- /wp:list-item --></ul>
And generates the error announcement on my switching to Word:
This block contains unexpected or invalid content.
"Attempt Block Recovery"
Save draft and preview. Preview looks correct. HTML source: (extra blank lines removed)Note that the comments are not there.
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
Used Attempt Block Recovery. Save. Preview. Looks the same. HTML (extra blank lines removed):
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
If there is additional information I can provide that would be helpful, please let me know. This looks like a WP bug to me. I have not tried changing themes or disabling plugins, since this seems particular to List Blocks.
]]>When using the List Block it shows up on the backend as being indented appropriately, but when it is viewed on the front end the indent is almost in the centre of the page.
It happens on both clients websites. Is there some sort of work around or CSS I can put into the blocks so the indents are not so pronounced.
We are rebuilding their sites using only Gutenberg, but this will take a while, we are a two person shop, with only me doing the web sites, and one client has like 300 posts and pages. So I need a solution now.
Thanks
]]>It’s recently come to my attention that when using the styled list block, the words within the list do not get counted in WordPress’ total word count for the post (accessed by clicking on the “i” in the upper left of a post page).
Does this effect SEO?
Can Google and other search engines still read the keywords that may be inside the list?
Thank you!
]]>View this screen shot which shows the behaviour.
]]>