Interactivity API: router with region-based client-side navigation #53733
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
|
Size Change: +413 B (0%) Total Size: 1.51 MB
ℹ️ View Unchanged
|
luisherranz
added
[Feature] Interactivity API
luisherranz
added
[Type] New API
This was referenced Aug 16, 2023
|
I think it's confusing to use If What do you think, @DAreRodz? |
Agree, and I think those names are easy to understand as well, so you have my +1 👍. |
|
Let's go with |
5 tasks
|
@luisherranz, I assume we need to add the |
No, let's keep the navigate logic inside actions instead of directives for now. |
|
I've just noticed a problem while working on Therefore, I think this should be an option of I also noticed that we are doing the What do you think? Do you see any problem or inconvenience? |
Thanks! I did see that right after I posted 🤦🏼♂️ Global state makes a lot of sense! |
|
I am not following this PR for now as it looks to still be under dev but please note the accessibility concerns around using JS this way. Dynamically rendering parts of the page comes with huge implications for people who can't see changes happening if not properly communicated. With great power comes great responsibility. This is still a problem in Gutenberg today so I am super hesitant to make this available to the front-end. Please ping me when this is ready for proper review. Thanks. |
|
Hi @alexstine. Yes, we're aware of the accessibility challenges, and we have plans to work on them. At this moment, we're only experimenting with this here and here, so my plan is to address the accessibility in those PRs. I was planning to ping you once that initial accessibility work was done so you can review it 🙂 Once we learn more, we can find ways to include accessibility on the underlying APIs to ensure people building on top of this make things right (the Interactivity API is still experimental so nobody should be using it in production yet). |
Hey @ajgagnon, I think we're going to add it manually first. Once we learn more, we can look into ways to make it globally accessible. Same for changing the scroll position and accessibility. So for now, we'll use something like this (simplified): store({
actions: {
core: {
query: {
navigate: async ({ ref, context }) => {
context.core.query.isLoading = true;
speak(state.core.query.loadingPageMessage);
await navigate(ref.href);
context.core.query.isLoading = false;
speak(state.core.query.pageLoadedMessage);
const firstFocusableItem = getFirstFocusableItem(ref);
firstFocusableItem.focus();
firstFocusableItem.scrollIntoView();
},
},
},
},
}); |
4 tasks
luisherranz
force-pushed
the
add/interactivity-api-regions-based-client-side-navigation
branch
from
9bac437 to
79ecdbb
Compare
3 tasks
…ide navigation (#53853) * Add failing test * Fix the test * Add changelog * Fix lint error
luisherranz
commented
Aug 22, 2023
* Add failing test * Fix test using key * Replace key with data-wp-key * Refactor test a bit * Add changelog * Add docs * Remove unnecessary paragraph * Fix lint error
…vigation (#53876) * Add failing test * Fix the test
|
Let's make the |
luisherranz
commented
Aug 24, 2023
DAreRodz
requested review from
kevin940726,
Mamaduka,
ntwb,
nerrad,
ajitbohra and
DAreRodz
as code owners
DAreRodz
approved these changes
Aug 28, 2023
|
Docs for the region-based router directives still need to be included. They'll be added in a subsequent PR. |
DAreRodz
deleted the
add/interactivity-api-regions-based-client-side-navigation
branch
10 tasks
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?
This PR adds support for region-based client-side navigation.
It works with a new directive called
data-wp-navigation-idwhich must be unique. Once those ids are in place, you can usenavigate(exported for now in@wordpress/interactivity) to navigate to another page. Only the regions marked withdata-wp-navigation-idwill be replaced.Why?
Because with the Interactivity API, we can replace regions of the DOM with server-generated content while maintaining the UI state.
Use cases include:
How?
Based on @DAreRodz's Woo PR: woocommerce/woocommerce-blocks#10200
Apart from that, I added new options to
navigateandprefetch:force: whentrue, it bypasses the client page cache.html: when it's a string, it doesn't fetch the URL and uses that HTML insteadreplace: when it'strue, it useshistory.replaceStateinstead ofhistory.pushState.Tasks
We decided to leave these tasks for a following PR: