[ad_1]
Hi,
Your block widget does this wrong HTML markup:
<div class="widget popular-posts">
<h2>Widget title</h2>
<ul class="wpp-list">
<li> <a href="https://example.com" class="wpp-post-title" target="_self">Post title</a> <span class="wpp-meta post-stats"></span></li>
</ul>
</div>The elements “h2” and “div” are not needed, because a block widget should have a flat structure:
<ul class="wpp-list">
<li> <a href="https://example.com/my-post" class="wpp-post-title" target="_self">Post title</a> <span class="wpp-meta post-stats"></span></li>
</ul>
The widget title and container are already included in the block element “widget group”.
A complete HTML markup of a block widget looks like this:
<aside id="block-3" class="widget inner-padding widget_block">
<h2 class="widget-title">Categories</h2>
<div class="wp-widget-group__inner-blocks">
<ul class="wp-block-categories-list wp-block-categories">
<li class="cat-item cat-item-7"><a href="https://example.com/category/abc/">Category title</a> (123)</li>
</ul>
</div>
</aside>Currently your block widget on my website makes a double margin:
40px from “aside” element with the CSS class “widget” + 40px from the “div” element with the CSS class “widget”.
I can fix this via CSS, but a clean solution would please me more.
Thanks and greetings
Garrett
