CARVIEW |
Navigation Menu
-
Notifications
You must be signed in to change notification settings - Fork 4.6k
Extract shared Controls component for Navigation Link and Submenu blocks #71994
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
β¦ubmenu blocks - Create shared/ directory in navigation-link block - Extract Controls component with identical functionality to original Navigation Link - Add comprehensive tests with pure mocking strategy - Update Navigation Link to use shared Controls component - Maintain all existing functionality including HTML stripping, URL encoding/decoding, and updateAttributes integration - Prepare foundation for Navigation Submenu integration This is step 1 of the DRY refactoring to support Dynamic URL functionality.
β¦ block - Replace duplicated ToolsPanel with shared Controls component - Remove unused imports (CheckboxControl, TextControl, TextareaControl, ToolsPanel, ToolsPanelItem) - Remove unused variables (rel, opensInNewTab) from destructuring - Maintain all existing functionality with simplified code - Complete DRY refactoring for inspector controls Both Navigation Link and Navigation Submenu now use the same shared Controls component.
β¦irection - Document why the shared directory exists - Explain current shared components and their usage - Outline future vision for unified Navigation Item block - Provide contributing guidelines for shared functionality - Note the balance between current practical solution and long-term architectural goals
β¦t Shared Components - Remove verbose Files section - Condense Current Shared Components to single bullet point per component - Make README more concise and focused
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: -152 B (-0.01%) Total Size: 1.95 MB
βΉοΈ View Unchanged
|
Flaky tests detected in 9f16ecb. π Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/18159553595
|
* @param {Function} props.setAttributes - Function to update block attributes | ||
* @param {Function} props.setIsEditingControl - Function to set editing state (optional) | ||
*/ | ||
export function Controls( { |
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.
There are a few differences between the components, so the refactor should deal with some bugs also, for example Navigation Link: sanitizes Text, decodes/encodes Link URLs, defers updateAttributes on blur, manages an editing state to stabilize focus/UX.
This change adds all those features to Navigation Submenu, which is good :)
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.
Yeh and it really proves the point and validates the need for this PR over and above the immediately utility for landing the Dynamic URLs piece.
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 is working well in my testing. Seems like a good opportunity to refactor in service of a larger goal.
What
This PR refactors the Navigation Link and Navigation Submenu blocks to reduce code duplication by extracting shared inspector controls functionality into a reusable component.
Supports #71630
Why
Supporting Dynamic URL Functionality
This refactoring is a prerequisite for integrating the Dynamic URL functionality developed in PR #71630. The Dynamic URL feature uses the Block Bindings API to make Navigation Link URLs dynamic when linking to entities (Pages, Posts, etc.), ensuring links don't break when permalinks change.
Code Quality Improvements
How
Created a shared
Controls
component that encapsulates the commonToolsPanel
functionality used by both navigation blocks. The component maintains all original functionality including URL handling, entity link management, and user interactions.Testing
1. Inspector Controls (Settings Panel)
2. Entity Link Handling
3. Frontend Verification
4. Cross-Block Testing
5. Regression Testing
Future Direction
This refactoring prepares the foundation for:
Backward Compatibility