Skip to main content
GoodFirstPicks
DashboardIssuesReposLeaderboard

GoodFirstPicks by Leaveitblank © 2026

CreatorRequest a RepoPrivacy PolicyTerms of Service
UI: Define policy for exposing Base UI CSS variables and data attributes | GoodFirstPicks

UI: Define policy for exposing Base UI CSS variables and data attributes

WordPress/gutenberg 0 comments 10h ago
View on GitHub
mediumopenScope: somewhat clearSkill match: maybeWordPressJavaScriptReact

Why this is a good first issue

Documentation task requiring understanding of CSS variables and data attributes across components.

AI Summary

The issue involves documenting CSS custom properties and data attributes exposed by Base UI components in WordPress UI. Tasks include per-component documentation, package-level policy documentation, and auditing existing components. The main blocker is uncertainty about where and how to document these properties.

Issue Description

Context

From discussion on #76438: Base UI components expose public APIs beyond React props — specifically CSS custom properties (e.g. --available-height, --anchor-width, --transform-origin on the Positioner) and data attributes (e.g. data-open, data-side, data-starting-style).

Decision

We agreed to use Base UI's CSS custom properties and data attributes directly — no aliasing or namespacing with a --wp-ui-* prefix. Gating them adds maintenance overhead with no practical benefit, especially since data attributes can't be gated at all.

However, these APIs must be documented, since they are part of the effective public API of each component.

What needs to be done

1. Per-component documentation

Each @wordpress/ui component that exposes Base UI CSS variables or data attributes should document them. This includes:

  • CSS custom properties available on specific sub-components (e.g. --available-height, --anchor-width on Popover.Popup's positioner)
  • Data attributes that can be used for styling (e.g. data-open, data-side, data-starting-style)

Open question: where and how should this documentation live?

  • In the component's TypeScript types (JSDoc)?
  • In Storybook stories / docs pages?
  • In a dedicated section of the component's README?
  • Some combination of the above?

2. Package-level documentation

Add a section to the @wordpress/ui package documentation explaining the overall policy:

  • @wordpress/ui components are built on Base UI primitives
  • Base UI exposes CSS custom properties and data attributes as part of its component API
  • These are passed through directly (not aliased or namespaced)
  • Consumers can rely on them for styling, but should be aware they originate from Base UI and may change if the upstream library changes
  • Link to Base UI's documentation for each component as the authoritative reference

3. Audit existing components

Review all existing @wordpress/ui componen

GitHub Labels

[Package] UI

Want to work on this?

Claim this issue to let others know you're working on it. You'll earn 20 points when you complete it!

Risk Flags

  • requires understanding of Base UI and WordPress UI components
  • documentation strategy unclear
Loading labels...

Details

Points20 pts
Difficultymedium
Scopesomewhat clear
Skill Matchmaybe
Test Focusedno