• Hi there

    The all-new “Details block” is good.

    is there a way to add Heading to the details block Summary? There are options to add headings to the hidden content.

    It will be nice if we can add a heading in the summary and show content in a hidden block.

    Thank you.

Viewing 2 replies - 1 through 2 (of 2 total)
  • Note that Details and Summary here are not mere text labels: they’re the actual semantic HTML elements used. Here’s a sample output:

    <details class="wp-block-details">
        <summary>System Requirements</summary>
        <p>
            Requires a computer running an operating system. The computer must have some
            memory and ideally some kind of long-term storage. An input device as well
            as some form of output device is recommended.
        </p>
    </details>

    From the technical specification (MDN):

    The <details> HTML element creates a disclosure widget in which information is visible only when the widget is toggled into an “open” state. A summary or label must be provided using the <summary> element.

    So changing the Summary to a Heading will make the code invalid.

    But what about the gazillion accordion plugins that have heading?

    Simple: they don’t use the semantically correct and simple <details> HTML tag. Instead, they use divs and JavaScript to create their own accordion effect.

    yleventhal

    (@yleventhal)

    A related, follow-up question: Is it possible to set different font weight for the summary and text sections (either in themes.json or in style.css)?

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Add Heading in Details Block’ is closed to new replies.