Release 12.0.0
NOTE:
This changelog only contains release notes for PWA Studio and Venia 12.0.0.
For older release notes, see PWA Studio releases.
New Features
- Added Shimmer loading component to improve page loading
- Prepared PWA Studio for Theming with Tailwind CSS
- Added Add to Cart button for products displayed on category pages
- Added new route-authentication handling
- Improved Lighthouse scores
Add To Cart from product category pages
Shoppers can now add products to their cart directly from the product category pages, without going to the product detail page. Each product listed on the category page now has an Add to Cart button. If the product is out of stock, we either hide the button or disable the button and change its text to Out of Stock.
Pull Requests
| Description | PR |
|---|---|
| Add to Cart on Category Listing - Out of stock are not visible. | 3272 |
| Add to Cart on Category Listing - Out of stock is visible. | 3356 |
| Add to Cart on Search Results - Out of stock is visible. | 3361 |
| Add to Cart on CMS - Out of stock is visible. | 3433 |
Added Shimmer loader component
The Shimmer component is a loading indicator that takes the shape of the component being loaded. This gives users an idea of what content will be on the page before it's fully loaded, which improves the perceived loading performance and eliminates layout shift.
This loading improvement is most notable on product listing and product detail pages.
Pull Requests
| Description | PR |
|---|---|
| Improve loading perception while navigating between pages | 3308 |
| UPWARD PHP inlining and Shimmer enhancements | 3353 |
| Improved Loading Experience - Shimmer and Inlining | 3428 |
| PoC: Pre-fetching and Inlining with Upward Connector Module (PHP) | 3353 |
| Slider movement causing Cypress test failures | 3436 |
| Customizing shimmer loader | 3353 |
Prepared PWA Studio for Theming with Tailwind CSS
In preparation for our full theming implementation in the next release, we have added the Tailwind CSS framework and updated our CSS infrastructure to support a wider variety of custom theming approaches. Significant changes in this release include:
Pull Requests
| Description | PR |
|---|---|
| Added Tailwind to PWA Studio for Theme configuration. | 3341 |
| Created a Tailwind theme package in the monorepo. | 3400 |
Fixed PostCSS console errors and warnings during yarn build.
| 3394 |
Renamed our existing CSS files to match the standard CSS Module pattern: *.module.css. This limits the scope of CSS Modules to prevent it from reprocessing Tailwind CSS and your own .css files.
| 3414 |
Added new route-authentication handling
Guest users (users not signed-in to the site) are now redirected to a new /sign-in page when trying to access pages that require authentication, such as the /order-history page. To support the new routing authentication, we created several new components:
AuthRoute— New component that returns theRouteor aRedirectto thesign-inpage if the user is not signed-in.SignInPage— New component that returns a page with a sign-in form where users can sign-in to their existing account, create a new account, or reset their password.ForgotPasswordPage— New page that shows a form to reset user's password.RouteDefinition- Updated object withauthedandredirectToproperties to support route-based authentication handling.CreateAccountPage— Updated to work with the new route-authentication handling.
Pull Requests
| Description | PR |
|---|---|
| Route authentication handling | 3406 |
Improved Lighthouse scores
Google Lighthouse scores are now 100 for Best Practices, Accessibility, and SEO categories. Average scores for the Performance category have also improved.
Pull Requests
| Description | PR |
|---|---|
| Avoid an excessive DOM size from duplication of navigation | 3388 |
| Improved loading experience for PLP and PDP page types | 3353 |
| Page Builder Slider Keyboard nav improved | 3420 |
| Page Builder Banner and Slider content types load without layout shifts on the page. | 3328 |
| Markup updates to improve SEO and Accessibility | 3412 |
| Tap Targets size and Color Contrast | 3421 |
| Image placeholders updates to improve the Best Practices score | 3411 |
| Meta information for Category Meta Descriptions | 3471 |
Updates
| Description | PR |
|---|---|
Migrated magento-commerce/upward-php from Zend to Laminas.
| upward-php/3 |
Updated the service worker to cache more than just URLs with .html suffixes.
| 3448 |
| Updated the Venia splash image shown when JavaScript is disabled in the browser. | 3355 |
Moved all project CartPage/.../*.gql.js files from venia-ui to the peregrine/talons directory.
| 3457 |
Moved all project CheckoutPage/.../*.gql.js files from venia-ui to the peregrine/talons directory.
| 3441 |
Refactor all queries that use category or product url_suffix to use the storeConfig suffix.
| 3393 |
Added keyboard accessiblity to the MegaMenu component. Users can now navigate through all the MegaMenu links with their keyboards.
| 3319 |
Enabled trusted extension vendors to change code outside their namespace, namely within @magento/[packages].
| 3266 |
Enabled Page Builder Row appearances (Full Width, Full Bleed) to work as expected on the Venia storefront.
| 3221 |
| Implemented new GraphQL caching header that Venia and other storefronts must send to GraphQL. | 3278 |
Updated CSS Module source maps to make CSS className easy to find and change during development.
| 3407 |
Added extensibility point (new target) for new Page Builder content types: setContentTypeConfig
| 3307 |
Added two new status to Order History page: received (order submitted but not processed) and rejected (failure when placing order).
| 3431 |
Updated Workbox packages to version 6.2.4 to fix the backwards compatibility issue we had with our previous version 6.0.2.
| 3378 |
Bug fixes
| Description | PR |
|---|---|
| Fixed direct GraphQL errors displayed on Venia forms. Replaced with helpful, user-focused errors. | 3281 |
Fixed a checkout error that occurred when Braintree was enabled. Added missing import statement to BraintreeSummary component.
| 3470 |
| Fixed form issue with Region/State fields not clearing after user changes the Country field from US to UK or UK to US. | 3364 |
| Fixed Home page styling on scaffolded apps. | 3391 |
| Fixed an issue where editing items in the cart could remove the item after clicking the Update button. | 3279 |
Fixed issue where small images used in the Carousel component could expand into the description area.
| 3398 |
Fixed the useFieldState hook in the TextInput and QuantityFields components to prevent false console warnings. The hook checked their states before the fields rendered.
| 3399 |
| Fixed the region/state codes on billing forms (for countries like France) to display names instead of numbers. | 3335 |
Fixed the ProductImageCarousel to no longer duplicate thumbnails of the product's default variant.
| 3186 |
Fixed the Lighthouse warning: Avoid an excessive DOM size. This warning appeared after the implementation of #3115.
| 3388 |
| Fixed the WishList Edit dialog to remove errors that remained after closing and reopening the dialog. | 3405 |
Fixed the ErrorView component from throwing console warnings on pages with missing translations.
| 3236 |
| Fixed URL Rewrite to work properly for Venia. | 3309 |
| Fixed Page Builder products from showing "Out of Stock" message for products that are in stock. | 3336 |
| Fixed the Known Issue from v11.0.0 in which the URL for a suggested category contained two store codes (/default/default/) instead of one, creating a 404 error when selected. | 3344 |
Fixed dependency warnings displayed when scaffolding a new PWA app with yarn create @magento/pwa.
| 3380 |
Fixed CSS background-repeat property issue on Safari.
| 3348 |
| Fixed alignment of "Add to Favorites" icon on product category pages. | 3351 |
Fixed Page Builder product descriptions (Mobile only) from rendering with the wrong HTML tags. All descriptions now use the correct component: RichContent instead of RichText.
| 3409 |
Fixed image caching issue where the maxEntries setting on service workers was ignored. This caused the site to slow as the image cache grew with 100s of entries.
| 3452 |
Fixed error in SubmenuColumn component that occurred when a sub-category had no children (sub-catagories of its own).
| 3427 |
Fixed the InjectManifest build error that occurred when running (yarn run build) on scaffolded apps.
| 3454 |
| Fixed an Apollo cache issue in which checkout data was not cleared from cache if users switched store views before checkout. | 3482 |
Documentation Updates
| Description | PR |
|---|---|
| Added table to show which Adobe Commerce and Magento Open Source features PWA Studio supporst out of the box. | 3459 |
| Added additional guidelines for overriding Adapter. | 3395 |
| Updated wrappable talons documenation. | 3243 |
| Fixed example in TargetableReactComponent page. | 3259 |
| Completed migration to AdobeIO PWA Docs site. | 3480 |
| Added Commerce feature support table that PWA Studio provides out-of-the-box. | 3459 |
| Added a solution to a possible error during SASS loader installation. | 3269 |
| Updated Magento capability table. | 3467 |
| Fixed grammar in the Internationalization topic. | 3274 |
Breaking Changes
| Description | PR |
|---|---|
Removed Enzyme and @wojtekmaj/enzyme-adapter-react-17 packages. Update any tests that use the Enzyme or @wojtekmaj/enzyme-adapter-react-17 packages.
| 3393 |
Changed the UPWARD configuration to prevent a race condition that could prevent yarn build command from emmitting images. Overriden static asset configurations now only take the overriden value, instead of both.
| 3410 |
| Hundreds of CSS files have been renamed and their components updated to point to the new filenames. | 3414 |
| Page loading indicator component refactored/moved to LoadingIndicator. | 3308 |
makeRoutes has changed to also export a list of available routes.
| 3308 |
Any use of getUserConfirmation external of Venia must be updated as we are now using this functionality.
| 3308 |
Response from useMagentoRoute has changed for loading state. Wrappers should take account of this change.
| 3353 |
| Added exports to index.js files for Shimmers. | 3284 |
Changed content of categoryContent root component so targetables may change.
| 3284 |
Known Issues
Scaffolding projects using npm version 7 or above (npm init @magento/pwa) results in errors. While we investigate, you can use one of the following workarounds:
- Use
yarninstead:yarn create @magento/pwa. - When installing the scaffolded project, use the
--legacy-peer-depsflag to forcenpmto treat peer dependencies as it did in versions 4-6.
Test Updates
| Description | PR |
|---|---|
| New jest tests for Filters components. | 3372 |
| Extensibility — Trusted vendors can now modify dependency sources. | 3362 |
| Fixed product snaps after icon adjustment. | 3362 |
| Fixed local URL support for running Cypress tests with Docker. | 3422 |
New code build test that runs the create-pwa scaffolding app for PRs.
| pwa-studio-cicd/79 |
| New Cypress test to verify that Page Builder content types render and function correctly in the Venia storefront. | 3315 |
| New Cypress test for Page Builder Map. | 3346 |
| New Cypress test for Page Builder Dynamic Block. | 3326 |
| New Cypress test for Page Builder Divider. | 3313 |
| New Cypress test for Page Builder Products. | 3331 |
| New Cypress test for Page Builder Text. | 3321 |
| New Cypress test for Page Builder Video. | 3349 |
| New Cypress test for Page Builder Slider. | 3310 |
| New Cypress test for Page Builder Block. | 3317 |
| New Cypress test for Page Builder Column. | 3326 |
| New Cypress test for Page Builder Row. | 3333 |
| New Cypress test for Page Builder Tabs. | 3324 |
| MFTF Fix tests because of Mega Menu UI updates (Automate Mega menu) | pwa-tests/10 |
| Added Cypress tests to our CICD pipeline so that they will run on GitHub with every PR. | pwa-studio-cicd/87 |
| Updated Cypress tests to wait for network responses without relying on explicit waits. | 3343 |
| Updated Cypress single and multiple WishList tests. | 3257 |
Repo Maintenance Tasks
| Description | PR |
|---|---|
Updated pwa-studio repo dependencies to clear various GitHub security alerts.
| 3318 |
| Updated PR template. | 3280 |
| Fix CICD Scaffolding job. | 3318 |
| Update Community Contributor statistics. | 3489 |
Upgrading from a previous version
Use the steps outlined in this section to update your scaffolded project from 11.0.0 to 12.0.0.
See Upgrading versions for more information about upgrading between PWA Studio versions.
Update dependencies
Open your package.json file and update the PWA Studio package dependencies to the versions associated with this release.
The following table lists the latest versions of each package as of 12.0.0.
Versions that are in bold indicate a version change for this release.
Note:
Your project may not depend on some of the packages listed on this table.
| Package | Latest version |
|---|---|
babel-preset-peregrine
| 1.1.0 |
create-pwa
| 2.0.0 |
upward-security-headers
| 1.0.4 |
venia-adobe-data-layer
| 1.0.1 |
venia-sample-backends
| 0.0.4 |
venia-sample-language-packs
| 0.0.4 |
venia-sample-payments-checkmo
| 0.0.2 |
pagebuilder
| 7.0.0 |
peregrine
| 12.0.0 |
pwa-buildpack
| 10.0.0 |
upward-js
| 5.2.0 |
upward-spec
| 5.1.0 |
venia-concept
| 12.0.0 |
venia-ui
| 9.0.0 |
magento2-upward-connector
| 1.3.0 |
upward-php
| 1.2.0 |
Update template files
The following template files contain updates in 12.0.0:
- src/.storybook/config.js
- src/index.js
- src/ServiceWorker/registerRoutes.js
- src/ServiceWorker/setupWorkbox.js
- src/ServiceWorker/Utilities/ImageCacheHandler.js
- .graphqlconfig
- package.json
- template.html
- webpack.config.js
If you did not make any modifications to these files, you can copy and paste the new content over your old template files in your project.
If you made modifications to these files in your project, you will have to manually apply the changes by using git diff on the PWA Studio repository or by using a diff tool.
New template files
The following template files have been added in 12.0.0:
Add these files to your project as part of your project upgrade to 12.0.0.