Allow filtering of inner component URL #5087
Merged
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
Building the app shell JS with webpack allows us to use third-party code (e.g. @WordPress packages) easily. We also take advantage of the code minification and babel transpilation. This is a step towards using @wordpress/hooks package in the app shell script.
The change to the inner component URL format introduced in 6054285 broke the app shell experience. While URL format (use an URL segment instead of a query parameter) was changed in the JS implementation, the back-end PHP handler was still expecting the old format. It resulted in loading 404 pages instead of actual inner components for requested pages. The follow up commit will allow altering of the URL format if a plugin integrator really needs to do so.
In some cases, the plugin integrator may need to alter the format of the
inner component URL.
While it is possible to change the way incoming requests for inner
components are handled on the back-end (PHP), there was no way to change
the URL format of the request on the front-end (JS).
This commit makes the inner component request URL filterable using
wp.hooks. Here's how you could filter the URL in your plugin or theme
so that instead of using a query parameter, a new segment is added to
the URL:
```
if ( ampAppShell && ampAppShell.hooks ) {
function filterInnerComponentUrl( url, baseUrl, componentQueryVar ) {
const filteredUrl = new URL( baseUrl );
const pathSuffix = '_' + componentQueryVar + '_inner';
filteredUrl.pathname = filteredUrl.pathname + pathSuffix;
return filteredUrl;
}
ampAppShell.hooks.addFilter( 'amp.appShell.innerComponentUrl', 'ampWpAppShell/filterInnerComponentUrl', filterInnerComponentUrl );
}
```
westonruter
approved these changes
Jul 23, 2020
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.
It's best to review this PR on a commit-by-commit basis (there are just 4 commits).
Since
amp-wp-app-shell.jshas been moved to thesrcfolder, it'd be easy to miss changes done in there.Please also note that each commit message contains additional context and information.
Summary
This PR introduces the following changes:
amp-wp-app-shell.jsto thesrcfolder and compile it as part of the webpack build process (6d6d2af).wp.hooksfilter that can be used to change the inner component URL format is needed (3b9e07b).amp-wp-app-shellafter moving it to thesrcfolder (c1cfd21). Due to high complexity, a few errors had to be suppressed and should be worked on as part of separate issues.Amends #1519
Checklist