Navigation Link: surface page creation functionality clearly in the LinkUI #71188
+254
−66
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
|
Size Change: +715 B (+0.04%) Total Size: 1.92 MB
ℹ️ View Unchanged
|
|
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 Unlinked AccountsThe following contributors have not linked their GitHub and WordPress.org accounts: @porg. Contributors, please read how to link your accounts to ensure your work is properly credited in WordPress releases. 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. |
scruffian
reviewed
Aug 13, 2025
| chevronLeftSmall, | ||
| chevronRightSmall, | ||
| plus, | ||
| addTemplate as page, |
There was a problem hiding this comment.
I think this is the wrong icon, but we may not have a suitable one :)
There was a problem hiding this comment.
Yup. Intended to draw designer opinion
scruffian
reviewed
Aug 13, 2025
| @@ -122,3 +122,20 @@ | |||
| gap: $grid-unit-10; | |||
| height: auto; | |||
| } | |||
|
|
|||
| .link-ui-page-creator { | |||
| // Match LinkControl width constraints for consistent UI sizing | |||
There was a problem hiding this comment.
Why aren't they automatically applied here?
There was a problem hiding this comment.
Because when you click through we are no longer rendering <LinkControl>.
There was a problem hiding this comment.
Maybe we should extract a common component that all these can share?
There was a problem hiding this comment.
Yes...in a follow up we should do that refactor. And other refactoring here to align Add block and Add page which now share the same UI. You can see how this iteration will lead us towards an agreed unified piece of UI which we can then optionally choose to commit back to the LinkControl if required.
scruffian
reviewed
Aug 13, 2025
| @@ -230,30 +214,7 @@ function UnforwardedLinkUI( props, ref ) { | |||
| hasRichPreviews | |||
| value={ link } | |||
| showInitialSuggestions | |||
| withCreateSuggestion={ permissions.canCreate } | |||
| createSuggestion={ handleCreate } | |||
| createSuggestionButtonText={ ( searchTerm ) => { | |||
There was a problem hiding this comment.
I think this is actually a useful pattern and I'm reluctant to lose it. Could the "Add page" option update to display the name of the page you searched for, if the search has no results? (Conscious that we don't want to make things overly complex though)
There was a problem hiding this comment.
The state of the LinkControl is not available to external consumers so we can't access what has been typed into the LinkControl. It's a partially controlled component.
If I were to rearchitect it now it'd be a full controlled component and we'd expose standard functions to handle managing the state. We can't really change that now though 😬
There was a problem hiding this comment.
We could expose limited amounts of the internal state via renderControlBottom. That way we could access it in these tools but it's nasty...
scruffian
reviewed
Aug 13, 2025
| } } | ||
| aria-haspopup={ blockInserterAriaRole } | ||
| > | ||
| { __( 'Add page' ) } |
There was a problem hiding this comment.
Suggested change
| { __( 'Add page' ) } | |
| { __( 'Create page' ) } |
I think "Create" makes more sense here - "Adding" is the process of putting the link into the navigation, "Creating" is the process of actually making the entity.
There was a problem hiding this comment.
I still think "Create" is the right language here.
There was a problem hiding this comment.
Oh man sorry I missed this. I'll follow up now.
|
It looks like we already have something very similar inside LinkControl, can we reuse it? |
|
Flaky tests detected in 405490a. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/17433154252
|
Yes that's a known factor. If we want to start working with the LinkControl itself this will be more involved. I was hoping we could explore the route in the relative safety of Nav Link block only and then if accepted as a UX pattern we could refactor to become part of the core control itself. |
|
Thanks for the PR. Whether reusing the one inside the link control or not, I'd say: use the regular plus button also for add page. I'm mulling over whether we need the "add block" there. I guess we do, otherwise we'd rewind back to past decisions, but we could decide simply to remove it, and any block insertion in the navigation would require using the big inserter. But we should arguably continue to mull that over and explore separately if need be. In write mode, however, we could definitely omit the "add block". |
We need it, because the [+] inserter at the moment defaults to a Page Link, so if we remove it there's no way to add other blocks. |
That's fine. We can tackle that separately 👍 Update: see #71213 |
6e54930 to
75bf69c
Compare
|
@jasmussen I've updated the icon. |
|
@scruffian What do you think about merging this one? |
- Add LinkUIPageCreator component for creating new pages - Integrate page creation as separate sub-view above Add Block button - Replace built-in LinkControl createSuggestion with custom UI - Add proper error handling and form validation - Maintain existing permissions and accessibility patterns - Add CSS styling for new page creator component This is a PoC to test moving page creation out of search results and into a dedicated interface below the link input.
- Remove useEffect and manual state management - Use data store selectors for tracking entity creation state - Follow WordPress data-basics patterns for create forms - Fix Rules of Hooks violations - Clean up unused imports and improve code organization
- Remove redundant hasFinishedSaving selector - Use only isSaving and lastError to determine when to look for new pages - Cleaner and more straightforward logic flow
…ntation - Remove complex hasResolved and entity resolution logic - Use saveEntityRecord return value directly as shown in docs - Eliminate unnecessary useSelect hooks and complex state tracking - Follow exact pattern from WordPress data-basics tutorial
- Add { throwOnError: true } to saveEntityRecord options
- This ensures await properly throws errors that can be caught
- Follows WordPress data-basics documentation pattern for error handling
- Add Cancel button alongside Create button for better UX - Fix spacing between form elements (title, checkbox, help text, buttons) - Improve button layout with proper spacing and right-alignment - Add accessibleWhenDisabled to maintain accessibility - Fix tight spacing that was making layout look broken
- Use exact same Button props: size='small', no variant, no __next40pxDefaultSize - Match CSS styling: margin-left and text-transform - Remove absolute positioning that was hiding the button - Remove unused VisuallyHidden import - Back button now matches the working Add block UI exactly
- Use VStack/HStack with proper spacing (4) instead of custom CSS margins - Match Add block UI CSS pattern: padding-top and margin-left only - Remove custom form spacing and rely on WordPress component defaults - Add required __nextHasNoMarginBottom props for proper component styling - Remove unused imports and variables - Form now has clean, consistent spacing matching the working Add block UI
- Add dedicated 'Create Page' button in LinkUI for better discoverability - Create PageCreator component with form for page creation - Allow users to choose between draft and published page creation - Restrict page creation to page variations and fresh navigation-link blocks - Match LinkControl width constraints for consistent UI sizing - Fix experimental component imports (VStack, HStack) - Add proper error handling and loading states
- Fix issue where both Add Page and Add Block buttons were getting focus - Ensure only the correct button is focused when returning from sub-views - Reset opposite focus flag when setting one to true in onBack handlers - Maintains proper focus state for accessibility and user experience
- Add useFocusOnMount hook to PageCreator component for consistent behavior - Ensure back button receives focus when PageCreator component mounts - Match the focus behavior of LinkUIBlockInserter component - Improves accessibility and user experience consistency
c51c52c to
2b19407
Compare
scruffian
approved these changes
Sep 3, 2025
tyxla
reviewed
Sep 3, 2025
| e.preventDefault(); | ||
| onBack(); | ||
| } } | ||
| size="small" |
There was a problem hiding this comment.
The small size of the back button felt odd. I wonder if we should just use the default size.
There was a problem hiding this comment.
I think its the same as in the Quick Inserter, so we probably want to change it in both places, but in a different PR
There was a problem hiding this comment.
Currently thats consistent with the Add block interface which was approved by Design. Happy to revisit in a follow up though.
getdave
added a commit
that referenced
this pull request
Sep 3, 2025
Follow-up to #71188 addressing review feedback from @scruffian. The button text is changed from 'Add page' to 'Create page' to better reflect the action being performed - creating a new page entity rather than just adding an existing page to the navigation.
scruffian
added a commit
that referenced
this pull request
Sep 3, 2025
Follow-up to #71188 addressing review feedback from @scruffian. The button text is changed from 'Add page' to 'Create page' to better reflect the action being performed - creating a new page entity rather than just adding an existing page to the navigation. Co-authored-by: getdave <get_dave@git.wordpress.org> Co-authored-by: scruffian <scruffian@git.wordpress.org>
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
Improves the page creation experience in the Navigation Link block's LinkUI by making it more discoverable and accessible. Currently, users can create pages through the search interface, but this flow is opaque and hard to discover. This PR adds a dedicated "Create Page" button that brings the page creation flow into view without requiring users to enter a search query.
Closes #66923
Why
The current LinkUI allows page creation through search results, but this creates several UX problems:
This PR makes page creation more accessible by providing a direct path to the feature, improving the overall navigation building experience.
How
Testing
Screenshots
Screen.Capture.on.2025-08-13.at.11-19-15.mp4
Breaking Changes
None - this is a new feature that enhances existing functionality without breaking changes.
Uncertain Elements