Add parent navigation support for the navigator component #47883
Conversation
This file contains 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
youknowriad
added
[Type] Enhancement
youknowriad
commented
Feb 8, 2023
|
Size Change: +232 B (0%) Total Size: 1.33 MB
ℹ️ View Unchanged
|
|
Thank you for working on this so quickly! For now, I focused my efforts on reviewing #47827. I should be able to take a look at this PR tomorrow. |
youknowriad
force-pushed
the
add/parent-navigation
branch
from
2855ee9
to
f5ac3ad
Compare
|
I've rebased this, it's still missing docs and changelog entry, but let's discuss implementation. |
youknowriad
commented
Feb 9, 2023
| }, [ screens ] ); | ||
| useEffect( () => { | ||
| currentLocationHistory.current = locationHistory; | ||
| }, [ locationHistory ] ); |
There was a problem hiding this comment.
I hate to do this kind of useEffect. This is basically the perfect use case for the React's proposed useEvent. I'm looking forward to using it.
|
Flaky tests detected in 92d7520. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/4146283866
|
ciampo
reviewed
Feb 9, 2023
There was a problem hiding this comment.
Thank you once more for working on this! I appreciate the thoughtfulness and the research of collaboration in the approach!
I gave a look at both Storybook and Global Styles, and the component seems to behave as expected 🎉
Out of curiosity, I checked current usages of Navigator outside of Gutenberg, and there's a bunch of plugins using it.
As discussed previously, the approach proposed in this PR seems the most reasonable in order to improve the component to fulfill product needs, without introducing breaking changes.
We'll need to make sure we update docs with clear explanations on how to use this component — mainly:
- using it chronologically (ie. using
goBack) or hierarchically (goToParent) - if using
goToParent,pathneeds to have a URL-like format, starting with/and using/to separate each path segment.
Finally, I hope I'll be able to merge #47910 soon (currently experiencing CI issues), in order to have the additional confidence boost given by extra unit tests
packages/components/src/navigator/navigator-provider/component.tsx
Outdated
Show resolved
Hide resolved
packages/edit-site/src/components/sidebar-navigation-screen/index.js
Outdated
Show resolved
Hide resolved
youknowriad
requested review from
ryanwelcher,
juanmaguitar and
fabiankaegy
as code owners
youknowriad
force-pushed
the
add/parent-navigation
branch
from
7498aec
to
f7b2918
Compare
youknowriad
force-pushed
the
add/parent-navigation
branch
from
cb92bcf
to
d350e54
Compare
I actually dove deeper into these results and it was interesting to note that all of them without exception use hierarchical paths. In other words, we could potentially decide to just replace goBack with goToParent and have no breakage. |
|
This PR should be ready for another round of review. |
ciampo
reviewed
Feb 10, 2023
packages/components/src/navigator/navigator-to-parent-button/README.md
Outdated
Show resolved
Hide resolved
ciampo
reviewed
Feb 10, 2023
packages/components/src/navigator/navigator-to-parent-button/component.tsx
Outdated
Show resolved
Hide resolved
ciampo
reviewed
Feb 10, 2023
ciampo
reviewed
Feb 10, 2023
There was a problem hiding this comment.
This PR should be ready for another round of review.
Tested in both Storybook and Site editor, and everything works as expected.
Apart from the inline comments, before merging we should also:
- Update the
navigatorobject docs
Suggested changes
diff --git a/packages/components/src/navigator/navigator-provider/README.md b/packages/components/src/navigator/navigator-provider/README.md
index 3afd84b559..47c2af4b9d 100644
--- a/packages/components/src/navigator/navigator-provider/README.md
+++ b/packages/components/src/navigator/navigator-provider/README.md
@@ -34,13 +34,17 @@ const MyNavigation = () => (
</NavigatorProvider>
);
```
+
**Important note**
-Parent/child navigation only works if the path you define are hierarchical. For example:
- - `/` is the root of all paths.
- - `/parent/child` is a child of `/parent`.
- - `/parent/child/grand-child` is a child of `/parent/child`.
- - `/parent/:param` is a child of `/parent` as well.
+Parent/child navigation only works if the path you define are hierarchical, following a URL-like scheme where each path segment is separated by the `/` character.
+
+For example:
+
+- `/` is the root of all paths. There should always be a screen with `path="/"`.
+- `/parent/child` is a child of `/parent`.
+- `/parent/child/grand-child` is a child of `/parent/child`.
+- `/parent/:param` is a child of `/parent` as well.
## Props
@@ -65,6 +69,15 @@ The `goTo` function allows navigating to a given path. The second argument can a
The available options are:
- `focusTargetSelector`: `string`. An optional property used to specify the CSS selector used to restore focus on the matching element when navigating back.
+- `isBack`: `boolean`. An optional property used to specify whether the navigation should be considered as backwards (thus enabling focus restoration when possible, and causing the animation to be backwards too)
+
+### `goToParent`: `() => void;`
+
+The `goToParent` function allows navigating to the parent screen.
+
+Parent/child navigation only works if the path you define are hierarchical (see note above).
+
+When a match is not found, the function will try to recursively navigate the path hierarchy until a matching screen (or the root `/`) are found.
### `goBack`: `() => void`- Ideally, add tests to
packages/components/src/navigator/test/index.tsxusing theNavigatorToParentButtoncomponent
I actually dove deeper into these results and it was interesting to note that all of them without exception use hierarchical paths. In other words, we could potentially decide to just replace goBack with goToParent and have no breakage.
That's an interesting reflection — it means that, until now, all consumers of Navigator are basically using it to browse a tree-like structure of screens by transition from parent to child, or from child to parent.
I still think that offering chronological goBack could prove useful for a consumer that doesn't necessarily navigate screens from parent to child (or from child to parent).
For example, imagine these scenarios
- we show the top menu (typography, blocks, ...) in a navigation bar that is always visible in every screen. A user could use that navigation bar "jump" across screens.
- a user is editing typography settings for a specific block. We could show a "go to global typography settings" button that takes them to the global typography button
In both scenarios, a "go to parent" button (i.e. go to home) and a "back" button (ie., back to whatever screen was visited previously) would both be useful for different reasons.
Co-authored-by: Marco Ciampini <marco.ciampo@gmail.com>
Co-authored-by: Marco Ciampini <marco.ciampo@gmail.com>
Co-authored-by: Marco Ciampini <marco.ciampo@gmail.com>
Co-authored-by: Marco Ciampini <marco.ciampo@gmail.com>
|
I think I've addressed all the feedback and applied all suggestions @ciampo That said, CI and types started failing randomly, not sure exactly what I did that triggered that? Maybe your eagle eye can spot anything here? |
|
Ok the type failures were due to the import of the button component in the test. It should be fixed now. |
ciampo
approved these changes
Feb 11, 2023
packages/components/src/navigator/navigator-provider/component.tsx
Outdated
Show resolved
Hide resolved
Co-authored-by: Marco Ciampini <marco.ciampo@gmail.com>
ntsekouras
pushed a commit
that referenced
this pull request
Feb 13, 2023
Co-authored-by: Marco Ciampini <marco.ciampo@gmail.com>
|
Cherry-picked this PR to the wp/6.2 branch. |
ntsekouras
removed
the
Backport to WP 6.7 Beta/RC
DaisyOlsen
added
the
[Feature] UI Components
ciampo
added
the
has dev note
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.
Builds on top of #47827 and addresses an issue raised in #47777
What and Why?
Parent or "back" navigation doesn't work as we expect it to work in Global Styles and Site editor. The reason is that
goBackbehaves like a browser history, it shows the previous screen that was visible. Sometimes navigation happens programmatically and sometimes the initial screen rendered is not the top level ones (like after reloading the page). For these situations, goBack doesn't work for us. What we really want is a child/parent relationship where the "back" button always goes back to the parent screen.This PR adds support for that to the Navigator components.
How?
There are two main ideas here. A user can define a "tree" of screens by relying on the paths:
/is the root screen/somethingis a child of root/:argumentis also a child of root/something/grandchildis a child of/somethingif defined, otherwise it fallback to/Basically to define the hierarchy you can split a path on the
/character and move up until you find a screen that available.The second idea of this PR is that
goToParentis equivalent togoToBackand should restore the focus in the same way if the path is the previous in location history.Testing Instructions
1- You can open the "nested navigator" story in storybook and check the behavior.
✍️ Dev Note
The
Navigatorcomponent from the@wordpress/componentspackage has been enhanced with two additional features:/product/:productId);goToParentfunction and theNavigatorToParentButtoncomponent.These two features assume that
NavigatorScreens are assigned paths that are hierarchical and follow a URL-like scheme, where each path segment is separated by the/character.