Skip to content

Replace experimental @wordpress/components APIs with @wordpress/ui - #8

Open
torounit wants to merge 1 commit into
mainfrom
chore/wordpress-ui
Open

Replace experimental @wordpress/components APIs with @wordpress/ui#8
torounit wants to merge 1 commit into
mainfrom
chore/wordpress-ui

Conversation

@torounit

Copy link
Copy Markdown
Owner

Summary

  • Replace __experimentalHStack / __experimentalHeading / __experimentalSpacer (from @wordpress/components) with @wordpress/ui's Stack and Text in the "Schedule Terms" popover header (src/editor/components/DatetimeControl.tsx).
  • Stack's justify="space-between" replaces the HStack + Spacer combo (no direct Spacer equivalent exists in @wordpress/ui).
  • Text is rendered as an <h2> via its render prop to preserve the original heading semantics.
  • Removes the eslint-disable @wordpress/no-unsafe-wp-apis block that was previously needed for this file.
  • Adds @wordpress/ui (^0.15.1) as a dependency. No extra theme/CSS setup is needed since this component renders inside the block editor, where @wordpress/ui's docs say styling is handled by the surrounding Gutenberg context.

Note: @wordpress/ui is still a 0.x package and its own README says it's "still experimental" (i.e. its API may have breaking changes across minor versions), even though it doesn't use the __experimental naming convention that the lint rule checks for.

Test plan

  • npm run lint:type passes
  • npm run lint-js passes (no more @wordpress/no-unsafe-wp-apis warnings)
  • npm run build succeeds
  • Verified visually in wp-env: opened the "Schedule Terms" panel's Attach/Detach dropdown on a post and confirmed the title and close button are laid out the same as before (title left, close button pushed to the right)

…imeControl

Swap __experimentalHStack / __experimentalHeading / __experimentalSpacer
from @wordpress/components for @wordpress/ui's Stack and Text, which
don't carry the __experimental prefix that @wordpress/no-unsafe-wp-apis
flags. Stack's justify="space-between" replaces the HStack+Spacer
combo, and Text renders as an <h2> via the render prop to keep the
popover header's heading semantics. Drop the eslint-disable block that
was suppressing the lint rule for this file.

No extra theme setup is needed since this renders inside the block
editor, where @wordpress/ui's styles are picked up from the
surrounding Gutenberg context per its own docs.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant