Components: Refactor NavigableContainer from class to function component

[rushikeshmore]

What?

Part of #22890

Refactors the NavigableContainer component (packages/components/src/navigable-container/container.tsx) from a class component to a function component with hooks.

Why?

The official WordPress recommendation is that all components should be implemented as function components using hooks. NavigableContainer was one of the remaining class components in @wordpress/components.

How?

• componentDidMount and componentWillUnmount replaced with a single useEffect that adds/removes the DOM keydown listener
• Instance variable this.container replaced with useRef
• Bound methods (this.onKeyDown.bind(this), etc.) replaced with closures and useCallback
• The forwardedRef prop pattern replaced with standard forwardRef (removed the prop from the type definition)
• All original comments and logic preserved exactly

Testing Instructions

1. Open the editor and insert a block with a toolbar (e.g., Paragraph block)
2. Use arrow keys to navigate between toolbar buttons
3. Verify focus moves correctly between items
4. Test with NavigableMenu (block toolbar) and TabbableContainer (settings panels)
5. Run existing unit tests: npm run test:unit -- --testPathPattern navigable-container

Testing Instructions for Keyboard

1. Focus a block toolbar using keyboard navigation
2. Use Left/Right arrow keys to move between toolbar buttons
3. Verify the focus cycles from last to first item and vice versa
4. Press Tab to move to the next tabbable region
5. Verify no regressions in keyboard navigation behavior

Use of AI Tools

Claude Code was used to assist with the refactoring. All changes were reviewed manually and tested against existing test suites to verify behavioral parity.

[github-actions]

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 props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: rushikeshmore <rushikeshmore@git.wordpress.org>
Co-authored-by: mirka <0mirka00@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

[github-actions]

👋 Thanks for your first Pull Request and for helping build the future of Gutenberg and WordPress, @rushikeshmore! In case you missed it, we'd love to have you join us in our Slack community.

If you want to learn more about WordPress development in general, check out the Core Handbook full of helpful information.

[mirka]

I think this introduces a small ref behavior regression.

The previous class version used a stable bindContainer method, but the refactor switches to an inline ref={ ( node ) => { ... } } callback. Because this callback is recreated on every render, React will detach and reattach the ref on updates, so callback refs now get null -> node on each rerender. That is observable behavior change and can cause unnecessary rerenders or side effects for consumers using callback refs.

I think this is worth fixing before merge. It would be safer to keep the merged ref stable, for example with useMergeRefs or a memoized callback, and it would also be good to add a small regression test for forwarded callback refs.

[rushikeshmore]

Good catch. Fixed in 6fe0612 — replaced the inline ref callback with useMergeRefs from @wordpress/compose, which keeps the merged ref stable across rerenders. Also added a regression test that verifies forwarded callback refs are only called once (not detached/reattached on rerender).

[mirka]

Looks good, thanks!