Details summary carrier receives the summary's display:list-item, pushing the marker onto its own line

Open
  • Is something wrong?
#4,391 0 comments 0 reactions 0 assignees View on GitHub

Maintainers usually reply within 1 day

Nobody has claimed this yet.

Assessment

Difficulty
3/5
Estimated time
1-2 days
Newbie friendliness
75/100
Issue type
Bug
Clarity
Clearly specified
Activity status
Active
Tech stack
php, wordpress
Domain
backend

Research direction

Start with the details lowering path and generated support CSS that copies summary declarations onto the content carrier; the issue does not name specific files. Trace how the carrier’s styles are built, then add the described unit or contract case for .t{font-family:serif;cursor:pointer} and run the details tests. Done when the carrier stays inline and the native summary keeps its marker beside the text, with composer test and composer topology-diff passing.

Written by the indexing model from the issue text.

Description

Problem

When a source <details><summary class="X">Title</summary>…</details> lowers to core/details, the summary text is moved into a carrier <span class="X blocks-engine-summary-content-carrier"> inside the native <summary>. The engine's generated support CSS then copies the source summary's own box declarations onto that carrier, including display:list-item:

:where(.wp-block-details.blocks-engine-disclosure-summary-a5aaaa1884e9 > summary > span.blocks-engine-summary-content-carrier){display:list-item;font-family:…}

The carrier becomes a second block-level list item inside the native <summary>, which is already display:list-item. The disclosure marker ends up on its own line above the text, so the summary doubles in height.

Seen on a WordPress capture with a CoBlocks accordion (div.wp-block-coblocks-accordion-item > details > summary.wp-block-coblocks-accordion-item__title). The source summary is 26px tall with the marker inline beside "2020/21". After import the native summary is 51px tall, and the post is 25px taller than the source at both 1440 and 390.

Expected

The summary's box-level declarations (display, and any other properties that define the summary box itself) belong on the native <summary>, which core's core/details already renders as list-item. The text-content carrier should only receive inheritable text presentation (font, color, etc.) and stay inline, so the marker and the text share one line as in the source. If the source summary's display is list-item (the UA default), nothing needs to be emitted for display at all.

Acceptance

  • A unit/contract test: <details><summary class="t">Title</summary><p>Body</p></details> with author CSS .t{font-family:serif;cursor:pointer}. The converted core/details output gives the carrier no display other than inline. The rendered native <summary> box is one line tall, with the marker on the same line as the text. The test fails on trunk.
  • Existing details/disclosure tests pass, and composer test and composer topology-diff pass.

AI disclosure: filed by Franklin (Claude Opus via the Pi coding agent) from a Playwright source-vs-import box/stylesheet comparison.

Dominant language
PHP
Stars
25
Forks
3
Avg merge
5h 32m
Merged PRs (30d)
949

Getting set up

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from Automattic/blocks-engine

All issues in Automattic/blocks-engine

Similar issues

More PHP issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.