VisuallyHidden: Recommend @wordpress/ui and migrate usages#77575
Merged
Conversation
|
Size Change: +12.7 kB (+0.16%) Total Size: 7.78 MB 📦 View Changed
ℹ️ View Unchanged
|
|
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 If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message. To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook. |
ciampo
reviewed
Apr 24, 2026
| <VisuallyHidden | ||
| as="label" | ||
| htmlFor={ `post-content-${ instanceId }` } | ||
| > |
Contributor
There was a problem hiding this comment.
This instance still needs to be migrated
Member
Author
There was a problem hiding this comment.
No type checking in some of these packages are going to be annoying with migrations. Agent migrations are missing spots even after multiple rounds 😞
# Conflicts: # packages/block-editor/src/components/block-mover/button.js
ciampo
approved these changes
Apr 24, 2026
| as="span" | ||
| className="dataviews-view-activity__item-field-label" | ||
| render={ | ||
| <span className="dataviews-view-activity__item-field-label" /> |
Contributor
There was a problem hiding this comment.
Nit: for consistency, should className always be applied on VisuallyHidden, or always on the rendered element? Currently we're doing both.
Member
Author
There was a problem hiding this comment.
Fixed, but I'm tempted to remove all those class names 😅 What is a class name doing on a visually hidden element?? Alas, out of scope.
|
Flaky tests detected in e8a9164. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/24888260974
|
Copilot AI
pushed a commit
that referenced
this pull request
Apr 24, 2026
* VisuallyHidden: Update guidance * Migrate instances * Add manifest tag * Migrate remaining VisuallyHidden instances * Switch over lint disable for test file * Add ui tsconfig references * Update stale snapshot * Fixup * Fix CI type errors * Fixup * Fix VisuallyHidden render props * Tweak * Fix missed spots * Add changelog * Keep `className` on host component Co-authored-by: mirka <0mirka00@git.wordpress.org> Co-authored-by: ciampo <mciampini@git.wordpress.org> Co-authored-by: simison <87168+simison@users.noreply.github.com>
Contributor
Member
Author
|
@talldan Thanks for reporting. Looks like we need some special handling for the iframes. I'll look into it. |
Member
Author
|
Fix for iframed styles in #77965 |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What?
Update the
VisuallyHiddenguidance to recommend@wordpress/ui, then migrate the remaining runtime usages over to that package.Why?
VisuallyHiddenis part of the migration away from legacy@wordpress/componentsexports. This branch aligns the lint rule, Storybook guidance, and package dependencies with that direction, while keeping one explicit legacy import in the DOM test for comparison coverage.How?
@wordpress/componentsVisuallyHiddenas not recommended and allow@wordpress/uiVisuallyHiddenin the recommended-components ruleVisuallyHiddenStorybook metadata so the@wordpress/uistory is manifested and the@wordpress/componentsstory points consumers to@wordpress/ui@wordpress/ui, add the required package dependencies, and keep the legacy import only in the targetedblock-editorDOM test with the lint exemption moved to that test pathTesting Instructions
npm run lint:js -- packages/block-editor/src/components packages/block-editor/src/utils/test/dom.js packages/block-library/src packages/block-directory/src packages/customize-widgets/src packages/dataviews/src packages/edit-post/src packages/edit-site/src packages/edit-widgets/src packages/editor/src packages/fields/src.rg "VisuallyHidden" packagesand confirm the only remaining@wordpress/componentsimport is the intentional one inpackages/block-editor/src/utils/test/dom.js.packages/ui/src/visually-hidden/stories/index.story.tsxis manifested andpackages/components/src/visually-hidden/stories/index.story.tsxis marked not recommended.Use of AI Tools
Cursor assisted with implementation, review prep, and PR drafting.