Improve Parent Page Select Dropdown by Adding Page ID When Searching

[nate-allen]

What?

This PR improves the Parent Page select dropdown in the block editor by adding the page ID next to the page title when performing a search. The hierarchical tree format is preserved when not searching, ensuring clarity in both scenarios.

Why?

When selecting a parent page in the block editor, pages are displayed hierarchically, making it easy to distinguish between pages with the same name. However, when a search is performed, this hierarchy is lost, and only page titles are shown, leading to confusion when multiple pages share the same title.

This PR addresses issue #65500.

How?

The PageAttributesParent component has been updated to append the page ID next to the page title when a search is performed. When not searching, the existing hierarchical structure is maintained, so there is no disruption to the current user experience.

Testing Instructions

1. Open the block editor and create or edit a page.
2. In the Page Attributes panel, open the Parent Page dropdown.
3. Without searching, observe that the parent pages are displayed in a hierarchical format.
4. Perform a search by typing part of a page name into the dropdown’s search field.
5. Observe that the page titles now include the page ID next to the title in parentheses, e.g., Consulting (ID: 42).
6. Select a parent page and save the page to ensure the selected parent is saved correctly.

Testing Instructions for Keyboard

1. Open the block editor and navigate to the Page Attributes panel using the keyboard.
2. Focus on the Parent Page dropdown.
3. Without searching, use the keyboard to navigate through the hierarchical structure.
4. Type in the search field to search for a page, and navigate through the results to observe that the IDs are displayed next to the page titles.
5. Use the keyboard to select a parent page and save the changes, ensuring that everything works as expected without requiring a mouse.

Screenshots or screencast

Before

After

[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: nate-allen <[email protected]>

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, @nate-allen! 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.