Twenty Sixteen: “summary” elements use “block” value instead of “list-item” for the “display” property

[Photics]

Hi! 🙋🏻‍♂️

I noticed that when I added details / summary elements to my WordPress page, the little triangle thingy was not there. It's an indicator to show if the details element is opened or closed. After some testing, I fixed the problem by adding the following style to the “Additional CSS” area…

summary {
display: list-item;
}

Here's an example… ​https://photics.com/data/farmside-guide/ …which I think looks nice! 🙂

Yet, this didn't seem like solving the problem, only covering it. So, I looked to see why the summary elements were having their default display value changed. I looked at the styling and it seems to trace back to here…

style.css, line 85

…which changes the display value of <summary> elements to block.

That seemed incorrect, so I searched this site to see if anyone reported the problem. It looks like the following links are related…

#58915
58915.patch

I was wondering, if this issue was addressed, why did I still see a problem? That's when I looked at the file being modified. It's the blocks.css file.

I use the “Classic Editor” plugin on my website, which disables Gutenberg. Additionally, the details and summary tags were being added to an article page. Essentially, I was building an FAQ page.

So, perhaps that means the style.css file should be updated too. It looks like “summary” should not be part of that CSS declaration. And since ticket #58915 mentioned the Twenty Thirteen theme, perhaps that style.css file needs to be fixed too…

style.css, line 78

[sabernhardt]

Hi and welcome to WordPress Core Trac!

I'm happy to reconsider the change for both themes, but I explained my reason for editing blocks.css instead of style.css in the first comment on 58915. I was more concerned with the possibility that some sites already depended on block display for their custom <summary> elements than the case of someone manually adding a <details> element later. The Details block needed a different display value, and the ticket only fixed that.

Other notes:

• The Classic Editor does not disable block-related styles, so your site still fetches the theme's blocks.css. You (and others) technically could add the class <details class="wp-block-details"> in the classic code view, but you wanted to add more CSS for the summary element than just the display property anyway.
• Having multiple details elements is not recommended for an FAQ-style section, which would fit the 'accordion' pattern better. See #60335.

[Photics]

Well, I hesitated to post this issue, as the Twenty Sixteen theme is over 10 years old. However, I looked at the element itself.

• Is the summary element supposed to be used outside of a details element?

• Should the indicator (list-style-type) completely hidden?

I think the answer to both of those questions is… no.

A <summary> element may only be used as the first child of a <details> element.
​https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/summary

You can remove the disclosure widget icon by setting list-style: none or set the content of the marker to none, but you should always include visual indicators to inform sighted users that the summary content toggles to show and hide content.
​https://web.dev/learn/html/details#toggle_the_summary_marker

So, if you take the legacy issue out of the equation, should the Twenty Sixteen theme be updated? The problem is that the theme page is showing 100,000+ installations. That is a valid concern.

[sabernhardt]

removes summary from Normalize section in both themes, restoring browser default

[sabernhardt]

I have used display: block with a custom ::after pseudo-element indicator, similar to ​SitePoint's border example. My styles also involved absolute position, but SitePoint's example uses flex. Articles on ​CSS-Tricks and ​web.dev do not suggest block display.

With Twenty Sixteen, I removed the selector in the child theme's stylesheet for one site, and for another site I specified inline-block with a custom ::after pseudo-element.

The possibility seems small now, but if anyone expects the block display to remain, that could give two indicators. Then again, if the themes would update to a more recent version of normalize.css, that would set display to list-item.
​https://github.com/necolas/normalize.css/commit/55ed05a79c0fd7a9a2c330c6925b982a7d5b307c
​https://github.com/necolas/normalize.css/issues/604

[devtanbir]

I tested this in Twenty Sixteen and can confirm that forcing summary {display: block;} breaks the native <details>/<summary> behavior by removing the default disclosure marker.

Before
​https://ibb.co.com/h1dnTz3v

After: (Removed Forced display: block;)
​https://ibb.co.com/qLw51J2P