[wp-trac] [WordPress Trac] #64525: Twenty Sixteen: “summary” elements use “block” value instead of “list-item” for the “display” property (was: Twenty Sixteen Theme Using “block” value instead of “list-item” for the “display” property of “summary” elements.)

[WordPress Trac]

#64525: Twenty Sixteen: “summary” elements use “block” value instead of “list-item”
for the “display” property
---------------------------+------------------------------
 Reporter:  Photics        |       Owner:  (none)
     Type:  defect (bug)   |      Status:  new
 Priority:  normal         |   Milestone:  Awaiting Review
Component:  Bundled Theme  |     Version:  4.4
 Severity:  normal         |  Resolution:
 Keywords:                 |     Focuses:  css
---------------------------+------------------------------
Changes (by sabernhardt):

 * version:  6.9 => 4.4
 * component:  Themes => Bundled Theme


Old description:

> 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…
>
> https://core.trac.wordpress.org/browser/trunk/src/wp-
> content/themes/twentysixteen/style.css?#L85
>
> …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…
>
> [https://core.trac.wordpress.org/ticket/58915]
> [https://core.trac.wordpress.org/attachment/ticket/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…
>
> https://core.trac.wordpress.org/browser/trunk/src/wp-
> content/themes/twentythirteen/style.css#L78

New description:

 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…

 [https://core.trac.wordpress.org/browser/6.9/src/wp-
 content/themes/twentysixteen/style.css?#L85 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
 [https://core.trac.wordpress.org/attachment/ticket/58915/58915.patch
 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…

 [https://core.trac.wordpress.org/browser/6.9/src/wp-
 content/themes/twentythirteen/style.css#L78 style.css, line 78]

--

Comment:

 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
 [https://core.trac.wordpress.org/ticket/58915#comment:1 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.

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/64525#comment:1>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform