Guidelines: Add data-slug attribute to settings list items

[aagam-shah]

What?

Adds a data-slug attribute to each guideline section <li> in the Guidelines settings page list (routes/guidelines/stage.tsx).

Why?

The guideline section list items currently expose no stable way to identify an individual section from the markup:

• The content-guidelines__* class names were renamed to guidelines__*.
• The accordion was refactored to CollapsibleCard, whose header/trigger uses hashed CSS-module class names (e.g. _0625b55e82a0d93d__header-trigger) that change per build.
• The per-section element id (previously guidelines-${slug}) was removed in that refactor.

As a result there is no resilient selector for targeting a specific guideline section, which makes it hard for external code, extensions, automation, and e2e tests to reliably locate one. A data-slug attribute is stable across styling/markup refactors and matches the convention WordPress core already uses to identify list items in wp-admin (e.g. theme cards in the theme browser carry data-slug).

How?

Adds data-slug={ item.slug } to the list-item rendered from GUIDELINE_ITEMS in stage.tsx. The slug values are the existing section identifiers (site, copy, images, blocks, additional).

Testing Instructions

1. Enable the gutenberg-guidelines experiment.
2. Go to Settings → Guidelines.
3. Inspect the section list. Each <li class="guidelines__list-item"> now carries data-slug="<slug>".

There is no visual change.

Screenshots or screencast

N/A — markup-only change, no visual impact.

[aswasif007]

🎉

[github-actions]

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: aagam-shah <[email protected]>
Co-authored-by: aswasif007 <[email protected]>
Co-authored-by: t-hamano <[email protected]>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

[t-hamano]

I'm not blocking this PR, but we need to use the accessible selector in our e2e testing. The need for the data-slug attribute suggests that the Guideline page itself might not be accessible.

What problems are you currently experiencing?

[aagam-shah]

Thanks @t-hamano - agreed, e2e tests should use accessible selectors, and this isn't for that.

This is really about restoring compatibility. Each section used to have a stable per-section id (guidelines-${slug}), but it was dropped in the CollapsibleCard refactor. That left no stable way for code that adds UI to this page at runtime to tell the sections apart - the titles are translated, and the CollapsibleCard class names are hashed and change per build. data-slug just brings that stable hook back, using the slug the page already uses internally.

The page itself is accessible (each section has an <h2> heading) - this is only about restoring a stable key.

[t-hamano]

this is only about restoring a stable key.

What I want to know is why this key is necessary. Otherwise, this attribute could easily be lost during future refactoring of the Guidelines page.

[aagam-shah]

@t-hamano : We're exploring to build a plugin feature that extends this page, and it needs a stable way to identify each section to attach per-section UI. I proposed the proper SlotFill approach for this in #76338, but we held off since the feature is still experimental. data-slug is a simple interim hook until we revisit that.