CARVIEW |
Navigation Menu
-
Notifications
You must be signed in to change notification settings - Fork 4.6k
Clean up LinkUI duplication for Add block and Create page flows #71499
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. Weβll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Conversation
- 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.
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
|
const dialogDescriptionId = useInstanceId( | ||
LinkUI, | ||
`link-ui-link-control__description` | ||
'link-ui-link-control__description' |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
What is the difference between backticks and single quotes in this context?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Just an error when I remove some interpolation from this string. Single quotes are preferred. Suprised the linter doesn't pick up on it!
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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!
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