Block widget has a wrong HTML markup

  • Resolved Garrett Reiniggen

    (@reiniggen)


    2 years, 1 month ago

    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

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Author Hector Cabrera

    (@hcabrera)

    Hi @reiniggen,

    Thanks for the suggestion, however this is a matter of personal opinion. I don’t see this HTML markup as “wrong”. It might not fit your particular use case, yes, but it’s not wrong per se IMHO.

    With that being said, even if I agreed with you changing the HTML markup now would likely mess up the popular lists for thousands of websites out there that are using the block as is and so I’m sorry but I don’t plan on making this change.

    Thread Starter Garrett Reiniggen

    (@reiniggen)

    Hi @hcabrera,

    the topic was discussed here a year ago and a new block “Widget Group” was added for the block editor of the widgets:
    https://github.com/WordPress/gutenberg/pull/33878#issuecomment-893292806
    https://github.com/WordPress/gutenberg/pull/33881

    The thousands of sites that use the widget as is – they either still use the legacy version (that’s how it was for me until today) or reactivate the old widget editor with the Classic Widgets plugin. I had to save a change in the legacy widget today for the first time in years and it stopped working. So I came up with the current block widget and added it to the block editor of the widgets following the new pattern. Your widget indicates that it is a block widget, but it still kept the structure from the legacy widget. It is possible that thousands of websites will eventually have a problem with this, since the block editor is now active by default on widgets.

    Plugin Author Hector Cabrera

    (@hcabrera)

    Not sure how that Github link is related to this discussion?

    Anyways, as stated above there are no plans to change the HTML markup of the plugin at this time for backwards compatibility.

    If this is something that you really, really want/need to change for your project the plugin is 100% open source (GPL2 licensed). Feel free to fork it and modify it so it fits your particular use case. Check the description page to find a link to its Github page or download a copy from www.remarpro.com if you prefer. Alternatively, as you suggested yourself, just use CSS to remove the extra margin.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Block widget has a wrong HTML markup’ is closed to new replies.

Tags