Clean up LinkUI duplication for Add block and Create page flows #71499
Conversation
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
- Create shared BackButton component to eliminate duplication - Replace duplicated back button implementations in LinkUIBlockInserter and LinkUIPageCreator - Standardize back button behavior and styling across components - Remove unused chevron icon imports from page-creator.js - Add proper JSDoc documentation for BackButton component This is the first phase of LinkUI duplication cleanup as discussed in PR #71163 follow-ups.
- Create useDialogIds hook to eliminate duplicated useInstanceId calls - Replace duplicated accessibility ID generation in LinkUIBlockInserter and UnforwardedLinkUI - Maintain correct component parameters (LinkControl vs LinkUI) for proper ID generation - Standardize dialog accessibility ID pattern across components - Export hook for potential reuse in other components This is the second phase of LinkUI duplication cleanup as discussed in PR #71163 follow-ups.
- Create shared DialogWrapper component that handles all dialog concerns internally - Eliminate useDialogIds hook by inlining useInstanceId calls directly in DialogWrapper - Derive component, componentName, and backButtonClassName from className prop - Move useFocusOnMount logic inside DialogWrapper for complete encapsulation - Replace duplicated dialog structures in LinkUIBlockInserter and LinkUIPageCreator - Fix useDialogIds reference error in main LinkUI component - Maintain all existing CSS styling and accessibility features - Fix nested ternary linting error with if/else statements This completes the major refactoring of LinkUI duplication cleanup as discussed in PR #71163 follow-ups.
…e BackButton - Extract LinkUIBlockInserter component to block-inserter.js for consistency with page-creator.js - Consolidate BackButton component into dialog-wrapper.js since it's only used there - Fix import issues with privateApis in block-inserter.js - Remove separate back-button.js file to reduce file count - Clean up unused imports in link-ui.js after component extraction - Fix JSDoc alignment in block-inserter.js - Maintain all existing functionality while improving file organization This completes the component extraction phase of the LinkUI duplication cleanup.
Use DialogWrapper as the component for useInstanceId instead of deriving it from className. This removes unnecessary complexity and unused imports.
getdave
changed the title
getdave
added
[Type] Code Quality
|
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. |
|
Size Change: +76 B (0%) Total Size: 1.93 MB
ℹ️ View Unchanged
|
scruffian
reviewed
Sep 5, 2025
| const dialogDescriptionId = useInstanceId( | ||
| LinkUI, | ||
| `link-ui-link-control__description` | ||
| 'link-ui-link-control__description' |
Contributor
There was a problem hiding this comment.
What is the difference between backticks and single quotes in this context?
Contributor
Author
There was a problem hiding this comment.
Just an error when I remove some interpolation from this string. Single quotes are preferred. Suprised the linter doesn't pick up on it!
scruffian
approved these changes
Sep 5, 2025
Contributor
scruffian
left a comment
scruffian
left a comment
There was a problem hiding this comment.
This works as advertised, thank you for working on it. One day it would be nice to see some of this being consolidated with the main Link UI component!
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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
Follow-up to PR #71163: Refactor to avoid the duplication that's growing in LinkUI to enable Add block and Create page flows.
Why
As mentioned in the follow-up comment from PR #71163, we're duplicating a lot of a11y focus handling and other componentry. This refactoring improves maintainability without over-engineering the solution into a design system component.
How
Testing
Verify the existing behavior on trunk is maintained:
Screenshots
No visual changes - this is a refactoring that maintains existing functionality.
Breaking Changes
None - this is a refactoring that maintains all existing APIs and behavior.
Uncertain Elements