12.4.0

PWA Studio Release 12.4.0

NOTE:
This changelog only contains release notes for PWA Studio and Venia 12.4.0
For older release notes, see [PWA Studio releases][].

Highlights

The main focus of PWA Studio 12.4 is additional support for working with both system attributes and custom product attributes. While previously, this could be done, results were difficult to parse, with little ability for sorting and filtering. Now, system and custom product attributes are returned in their own object within the GraphQL response, which can be sorted and filtered.

Product attributes

• Products can now be sorted by the product attribute value on the product listing page. — [3761][]
• The Venia sample data has been updated to include product attributes. — [23][]
• Product attribute values can now be used to search for products. — [3747][]

Product Attributes on PDP

• The product detail page has dedicated slots for rendering product attributes values.
• The product detail page supports all content layout options available with Page Builder (full-width, full-bleed, contained).

Other highlights and fixes

• It is now possible to build a project using an older version of PWA studio by appending the version number to the `create` command.
• Updated the Tailwind preset file in the Venia theme package to extend the base Tailwind configuration and add Venia-specific custom values. - [3686][]
• PWA Studio now supports CSS breakpoints set within PageBuilder components. — [3673][]
• The ProductQuantity component has been removed from the codebase as it is not used anymore. It has been replaced with the QuantityStepper component. — [3717][]
• Cypress tests have been added to check for offline mode on the Home, Category, Product, and Search pages. — [3710][]
• Magento Community Edition (CE) has been rebranded as "Magento Open Source" and the Enterprise Edition (EE) is now "Adobe Commerce". — [3697][]
• Currency is now set properly when changing the currency in a PageBuilder product collection. Previously, when changing currency from the header dropdown, prices in PageBuilder product collections were not getting updated. — [3720][]
• Video background with parallax enabled on Safari browser should now behave as intended. — [3661][]
• Restored TTL support in BrowserPersistence. — [3729][]
• Resolved static build failure issues for venia-sample-data-modules repository. — [21][]
• The `product_url_suffix` value is now properly passed. Previously, it would return `null`. — [3666][]
• Fixed a bug that would throw a Javascript error when clicking on a configurable product where an option has been disabled on the backend. — [3740][]
• Replaced existing CSS values in UI components with equivalent Tailwind classes. - [3686][]

12.4.0 Lighthouse scores

With each new release of PWA Studio, we perform Lighthouse audits of four Venia page types, each representing a different level of complexity. Shown below are the Lighthouse scores for the 12.4.0 release of these pages on desktop and mobile devices.

	Home Page	Product Category	Product Details	Search Results
Venia Pages
Desktop Performance
Mobile Performance
Accessibility (same for both)
Best Practices (same for both)
SEO (same for both)
PWA

Type	Description	GitHub PR
Story	Add PageBuilder media query breakpoints support in PWA	[3673][]
Story	Make QuantityStepper @api and deprecate ProductQuantity	[3717][]
Story	[Cypress] Add tests for offline mode	[3710][]
Story	Update the Sample data with Product Attributes	[23][]
Story	Support new branding terms	[3697][]
Story	Filtering Product by the attribute value	[3747][]
Story	View Product Attributes values on PDP - Text input, Multi-select, Boolean, Date	[3761][]
Bug	[bug]: Page builder product collection's price+currency is not updating on currency changes.	[3720][]
Bug	upward-php latest develop not compatible with php 7.4 on cloud pro.	[8][]
Bug	[PB] Parallax video background is broken on Safari	[3661][]
Bug	Regression fix disabled TTL support in BrowserPersistence	[3729][]
Bug	Static build failures in magento-commerce/venia-sample-data-modules repo	[21][]
Bug	[bug]: product_url_suffix cloud be return as null from backend	[3666][]
Bug	Disabled product throw an exception cannot read properties of undefined	[3740][]
Bug	Deprecated field which could return incorrect discounted price is no longer returned	[3760][]
Bug	On mobile, the short description is now properly displayed below the image, rather than above.	[3808][]
Bug	A product with a discounted price now shows that price in the catalog, rather than the original price.	[24][]

Documentation updates

• Updated the GraphQL guide with latest changes to the magneto2-pwa module.
• Added instructions on how to build scaffolding with a specific version of PWA Studio.
• Added information about the PWA Studio UI Kit for Adobe XD

Upgrading from a previous version

Use the steps outlined in this section to update your scaffolded project from 12.3.0 to 12.4.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.4.0.

Note:
Your project may not depend on some of the packages listed in this table.

Package	Latest version
babel-preset-peregrine	1.2.1
create-pwa	2.3.0
upward-security-headers	1.0.8
venia-adobe-data-layer	1.0.5
venia-sample-backends	0.0.7
venia-sample-language-packs	0.0.8
venia-sample-payments-checkmo	0.0.6
pagebuilder	7.3.0
peregrine	12.4.0
pwa-buildpack	11.3.0
pwa-theme-venia	1.3.0
upward-js	5.3.1
upward-spec	5.2.1
venia-concept	12.4.0
venia-ui	9.4.0
magento2-pwa	0.2.1
magento2-pwa-commerce	0.0.2
magento-venia-sample-data-modules	0.0.3
magento-venia-sample-data-modules-ee	0.0.2
magento2-upward-connector	2.0.1
upward-php	2.0.1

12.3.0

PWA Studio Release 12.3.0

NOTE:
This changelog contains release notes for PWA Studio and Venia 12.3.0
For older release notes, see [PWA Studio releases][].

12.3.0 Highlights

Personalized content support

• Added shimmer loaders for Dynamic blocks to avoid layout shift. Shimmer loaders are only rendered if minHeight is specified on the Row containing the Dynamic block. This implementation gives you a choice: You can set the Row's minHeight to render the shimmer or remove the minHeight to remove the shimmer. For Dynamic blocks that rarely render, we recommend removing the minHeight property from the Rows containing those Dynamic blocks. — [3713][]
• Added the new PersonalizedContentSampleDataVenia module that contains customer segments, dynamic blocks, and cart rule promotion sample data for personalized content. — [19][],[2][],[3670][]
• Shopping cart promotions are now properly displayed depending on customer segment. — [3609][]
• You can now make GraphQL queries for dynamic blocks. — [3587][],[2][]

ReCaptcha support

• You can now use ReCaptcha V3 on the Braintree payment form and the Place Order form. — [3691][],[24][]
• reCAPTCHA V3 validation is now available on the following customer forms:
  • Customer Login
  • Customer account creation
  • Customer information change (password) — [3702][]
  • Forgot Password form. — [3604][],[12][],[20][]

PageBuilder content optimization

• Shimmers are now loaded when rendering a Page Builder CMS page. This helps reduce CLS and increase load speed. — [3711][]
• Images from Page Builder content now include height and width dimensions. This helps reduce CLS when rendering the images. — [3712][]
• Store-view specific label and localization support has been added for product attributes. — [17][]
• PWA Studio can now retrieve image metadata from Page Builder. — [16][],[17][]

Other highlights

• In the Link component, prefetchType property has been renamed to shouldPrefetch. This helps to clarify that it is a boolean, rather a property that returns a type. prefetchType is deprecated but not removed. — [3646][]
• Refactored the reCaptcha to ensure it is backwards compatible with 12.2.0. — [3696][]
• The "Sign In" link has been removed from the 2nd stage of checkout. This ensures the cart configuration (guest or account holder) does not change in the middle of checkout. — [3672][]
• Dependency packages have been updated. See #3611 for more details about specific package versions. — [3611][]
• Reporting has been improved when running Cypress tests on a headless instance. — [3613][]
• Adobe Commerce users can now set gift options on the Order level. — [3540][]
• Long Wish List names no longer break the layout or force users to scroll in order to close modal dialogs. — [3706][]
• Products with configurable product variants are now properly added to Wish Lists. Previously, adding a configurable product threw an error. — [3703][]
• The virtual products extension has been removed. — [3612][]
• To increase performance, instances of the useMemo type have been changed to const in the productUrlSuffix talon. — [3660][]
• Added support that makes it easier to click-select tabs when they are displayed in a long list of Tab Items from Page Builder. — [3676][]

12.3.0 Lighthouse scores

With each new release of PWA Studio, we perform Lighthouse audits of four Venia page types, each representing a different level of complexity. Shown below are the Lighthouse scores for the 12.3.0 release of these pages on desktop and mobile devices.

	Home Page	Product Category	Product Details	Search Results
Venia Pages
Desktop Performance
Mobile Performance
Accessibility (same for both)
Best Practices (same for both)
SEO (same for both)
PWA

Stories and bug fixes

Type	Description	GitHub PR
Story	Shimmer Loader for Dynamic Blocks	[3713][]
Story	Query for available Dynamic Blocks	[3587][], [2][]
Story	CMS Page Shimmer Loader	[3711][]
Story	Update the Sample Data with Personalized content	[19][], [2][], [3670][]
Story	reFactored reCAPTCHA	[3696][]
Story	Add reCaptcha to the Checkout Forms	[3691][], [24][]
Story	Add reCaptcha to the Account Information Forms	[3702][]
Story	Add reCaptcha to the Forgot Password Form	[3604][], [12][], [20][]
Story	Rename Link's prefetchType prop	[3646][]
Story	Store view specific label/localization support for product attributes	[17][]
Story	Update Magento capability table	[3724][]
Story	Remove Sign-In link on 2nd step of checkout	[3672][]
Story	Images to include dimensions	[3703][]
Story	Validate Shopping Cart Promotions are displayed correctly	[3609][]
Story	Configurable images are not shown in Edit Cart Item menu	[3695][]
Story	Backend PageBuilder image metadata support	[16][], [17][]
Story	Update packages and dependencies	[3611][]
Story	Add cypress status reporting while running headless	[3613][]
Bug	Gift options on Order Level (Commerce only)	[3540][]
Bug	Parent product image thumbnail has been shown in mini cart instead of product itself	[3690][]
Bug	Long wishlist name length breaks layout	[3706][]
Bug	Change default sort order on Search page to 'Best Match'	[3698][] ...

12.2.0

Release 12.2.0

NOTE:
This changelog only contains release notes for PWA Studio and Venia 12.2.0
For older release notes, see [PWA Studio releases][].

Highlights

• New Venia CMS pages - Venia now ships with PWA versions of the Commerce and Magento Open Source default CMS pages: About Us, Contact Us, Customer Service, Newsletter Subscription. Out of the box, these pages are ready to use or customize as needed.

• Luma and Venia can now be deployed to the same cloud environment — This deployment option makes it easier for customers to deploy their PWA site alongside their existing Luma site while they migrate from Luma to Venia.

• Deprecated GraphQL fields removed from Venia — In this release, we removed the usage of all deprecated GraphQL fields in Venia.

• Venia Homepage is now the same for Adobe Commerce and Magento Open Source — Previously, the Venia Homepage rendered Page Builder content for Adobe Commerce sites and different content for Magento Open Source sites. But now that Page Builder is a part of Magento Open Source, the Venia Homepage renders the same content for both sites.

• Contact Us Block can be managed with Page Builder — You can now customize the Contact Us Block in the Admin UI using Page Builder. No development required.

• Updated Node version to 14 — All builds in PWA Studio, including the scaffolding CLI, now use Node 14.

• Added Venia Sample Data metapackage — This metapackage provides a new way to create your own sample data for your Venia-based PWA sites.

Summary of all changes

Type	Description	GitHub PR
Story	[Docs] Shimmer and UPWARD Inlining	[3548][]
Story	Add Cypress test coverage: Venia Filters, Search, Sort/Pagination	[3519][], [35][]
Story	Add Cypress test coverage: VeniaRemoveItemFromMiniCart	[3508][]
Story	Add Cypress test coverage: VeniaGuestIsAbleToAccessCategories.xml	[3507][]
Story	Add Cypress test coverage: VeniaCartPage*	[3509][], [34][]
Story	Add Cypress test coverage: VeniaCartPageGuestCheckoutRegionWithCC	[3505][], [31][]
Story	Add Cypress test coverage: VeniaCartPageGuestCheckout	[3504][], [29][]
Story	Update ConfigurableProductOptions GraphQL field from id to uid	[3588][]
Story	Update ProductInterface GraphQL field from id to uid	[3580][]
Story	Update Customer.id GraphQL field	[3594][]
Story	Update sample data on Venia Home Page	[9][]
Story	[Issue] Add newsletter in footer	[3486][]
Story	GQL returns parameters(metadata) that define custom attributes of a product product - specifically Select input	[3][]
Story	GQL returns product-specific values of custom product attribute (Select input)	[9][]
Story	GQL support for the reCaptcha API	[7][]
Story	Configuration Validation for reCaptcha v2	[8][]
Story	Streamline Cypress tests and create documentation	[3576][]
Story	Update StoreConfig fields	[3616][]
Story	Update StoreConfig.id GraphQL field to store_code	[3593][]
Story	Update CategoryTree.id GraphQL field to uid	[3598][]
Story	Update category GraphQL query to categories query	[3577][]
Story	Update urlResolver GraphQL usages to route	[3589][]
Story	Update SelectedConfigurableOption GraphQL fields	[3601][]
Story	Update CartItemInterface GraphQL field from id to uid	[3597][]
Story	Update ProductInterface.type_id GraphQL field to use __typename	[3586][]
Story	Added fade-in-out transition to the colour swatch checkmark	[3526][]
Story	UPWARD JS Computed resolver	[3533][]
Story	Add Cypress test coverage: VeniaCartPageEditCardAndCheckout	[3525][], [36][]
Story	Add Cypress test coverage: VeniaAnchorLinks	[3518][], [37][]
Story	Add Cypress test coverage: RegisteredUserCartPageCheckout	[3500][], [27][]
Story	Upgrade Apollo Client to 3.4.0	[3491][]
Story	About Us	[3483][], [11][]
Story	Customer Service	[3465][], [1][]
Story	Newsletter Subscription	[3521][]
Story	Contact Us Block	[3544][], [13][]
Story	Contact Us	[3538][]
Story	Guest Checkout: check if email is associated with the account	[3529][]
Story	Feature: Add ability to deploy Luma and Venia on single cloud env	[11][]
Story	Add cypress test for Mini cart	[3559][]
Story	Archive MFTF Repo	[39][]
Story	Homepage unification for CE and EE	[3564][]
Story	Improve Version banner	[3555][]
Story	Upgrade Node 14 and Scaffold Node 16	[3552][], [101][]
Story	Fail build when @magento/pwa metapackage is not installed	[3561][]
Story	Filtering Product by the custom product attribute with input type select	[15][]
Story	Do not show Ratings	[3654][]
Story	Viewing product attribute value in PDP	[3624][], [14][]
Story	Sorting product listing by custom attribute ...

12.1.0

Release 12.1.0

NOTE:
This changelog only contains release notes for PWA Studio and Venia 12.1.0
For older release notes, see PWA Studio releases.

New Features

• Added PWA Studio metapackage — This release includes the PWA Studio metapackage for Magento Open Source. The Metapackage provides a flexible way to add Open Source features to your PWA modules. PWA Studio now uses this package to add new features to the Open Source code base as needed. We used it in this release to extend our GraphQL schema to include a new mutation and new fields that provide more details when a cart item error occurs.

  UPDATES REQUIRED! This release depends on the Open Source metapackage, which requires you to install the metapackage in your PWA apps. See Install the Open Source metapackage for instructions.

• Added new PWA Tailwind theming to Venia Header — Refactored the Venia site Header component to use our new Tailwind theming framework. The Header component is the first component to use our theming framework. Other components will follow in the coming releases.

• Added a GraphQL mutation for submitting the Contact Us form. — You can now use the contactUs mutation to submit the Contact Us form data to the Open Source or Commerce backend.

• Added GraphQL storeConfig fields — Use the contact_enabled and newsletter_enabled fields in a storeConfig query to determine whether the Contact Us and Newsletter features are enabled.

• Added GraphQL schema to expose the error status of cart items — The CartItemInterface now contains the errors field, which uses the CartItemError data type to return an error code and message.

Summary of all changes

Type	Description	GitHub PR
Bug	Add to Cart flow for simple products on Home page is broken	3535
Bug	Cypress snapshots outdated with newsletter in footer	3506
Bug	Venia Mega nav is broken in scaffolded app on develop branch.	3513
Task	Repo Metadata Service Onboarding: UPWARD-PHP	magento-commerce PR
Bug	Cart remains active in browser memory on PWA site even after checkout	3495
Story	Parallelize Cypress tests on the CI	3460
Task	Add installation instructions to Venia Sample Data repo	magento-commerce PR
Task	Add local and Cloud installation instructions to meta packages	magento-commerce PR
Bug	Cart page out of stock crash	3447
Story	Update Item Quantities	3464
Bug	Improve Venia "create" scaffold script to stop relying on NPM log output	3463
Story	GQL Support for Contact Us & Newsletter	magento-commerce PR
Story	Refactor Site Header to use Tailwind Theme	3472

Bug fixes

• 3464 — Cart: Fixed an issue that prevented users from updating item quantities and removing items from the cart when using Magento 2.4-develop and 2.4.3 backends.
• 3447 — Cart: Fixed a rendering issue where out-of-stock products in your cart could not be removed.
• 3495 — Cart: Fixed issues that occurred when accessing the same store from different browser tabs or windows. To fix the problem, we introduced a storage listener on the cart context that fires a page reload whenever the cartId changes from another tab. Reloading the page forces Redux to persist a new cartId in storage.
• 3535 — Cart: Fixed a regression issue (during 12.1.0 development) that prevented the Add to Cart button from working on simple products featured on the Venia Home page.
• 3513 — Mega Menu: Fixed broken Header style when using the develop branch in a scaffolded project.
• 3463 — Scaffolding CLI: Fixed the Venia _buildpack/create.js DEBUG_PROJECT_CREATION test flag that broke when using NPM versions >=7.23.

Metapackage introduction and updates

As mentioned above, we not only introduced the Magento Open Source metapackage in this release, we used it! Our fix for the cart rendering issue (3447) required new GraphQL fields that we added to the Open Source metapackage. These new fields require you to Install the Open Source metapackage into your PWA apps.

Documentation updates

• Metapackage Installation: Added instructions for installing the new Magento Open Source metapackage.

Known Issues

• Safari (macOS version) does not show toast messages or indicators when Venia switches between online and offline. This is an issue with Safari, not Venia. Safari always reports true for navigator.onLine — even when offline. We have submitted this issue to Apple. If you have an Apple account, you can search for the issue using this Feedback ID: FB9802994.

Test Updates

• 3460 — Added Docker parallelization for Cypress testing to cut testing times by 50%. When run synchronously, the whole suite of tests took about 30 minutes. Now it takes 13–15 minutes.

• 3506 - Fixed outdated snapshots for failing Page Builder tests on the develop branch. The tests started failing when the Newsletter form was added to the footer.

Upgrading from a previous version

Use the steps outlined in this section to update your scaffolded project from 12.0.0 to 12.1.0.
See Upgrading versions for more information about upgrading between PWA Studio versions.

Add the new metapackages to your project

As noted above, you need to add the Open Source metapackage to your projects using these instructions: Install the Open Source metapackage.

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.1.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 in this table.

Package	Latest version
babel-preset-peregrine	1.1.0
create-pwa	2.0.1
upward-security-headers	1.0.5
venia-adobe-data-layer	1.0.2
venia-sample-backends	0.0.4
venia-sample-language-packs	0.0.5
venia-sample-payments-checkmo	0.0.3
pagebuilder	7.0.1
peregrine	12.1.0
pwa-buildpack	11.0.0
pwa-theme-venia	1.1.0
upward-js	5.2.0
upward-spec	5.1.0
venia-concept	12.1.0
venia-ui	9.1.0
magento2-upward-connector	1.3.0
upward-php	1.2.0

v12.0.0

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 the Route or a Redirect to the sign-in page 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 with authed and redirectTo properties 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 ...

v11.0.0

Release 11.0.0

NOTE:
This changelog only contains release notes for PWA Studio and Venia 11.0.0.
For older release notes, see [PWA Studio releases][].

Table of contents

• What's new in 11.0.0
• Pull requests merged in this release
• Known issues
• Upgrading from a previous version

What's new in 11.0.0

PWA Studio 11.0.0 contains new features, refactors, bug fixes, and various improvements.
This version is compatible with Magento 2.4.3.

Wish List

Started in PWA Studio 9.0.0 with basic features and functionality, Wish List is feature complete in this release and implemented in the Venia storefront template.
This feature gives shoppers the ability to create and manage lists of items they may want to purchase in the future using Wish List specific components and logic.

The following Wish List features have been implemented in this release:

• Add an item to a wish list from the product page
• Add an item to a wish list from the category page
• Add an item to a wish list from the cart page
• Add an item to the cart from a wish list
• Support for multiple wish lists
• Edit the name and visibility of a wish list

Pull Requests

Description	PR
Removed the use of mock data for Wish List and connected to real GraphQL data	#3041
Implemented adding an item to a Wish List from the product page	#3048
Implemented the ability to edit a Wish List's name and visibility	#3049
Implemented adding an item to a Wish List from the category page	#3105
Fixed a Wish List bug that prevented you from removing a product if the Wish List had 2 or more products	#3121
Implemented adding an item to a Wish List from the cart	#3130
Implemented adding an item to the cart from a Wish List	#3170
Created a re-usable hook for Wish List logic for re-use in various components	#3182
Fixed a Wish List bug that allowed users to collapse the Wish List section when it only had a single entry	#3184
Implemented adding an item from the cart to multiple wishlists	#3207
Added message to display when the Wish List is empty	#3228
Fixed a Wish List bug in the Create Wish List dialog that prevented users from creating a new Wish List	#3242
Cleaned up Multi Wish List code	#3246
Created a single Wish List button component to use throughout the application	#3249

Virtual Product types

This release contains initial work to support Virtual Product types.
In this initial implementation, you can browse and view Virtual Product types in your storefront, but
you will not be able to add these types to the cart.

Pull Requests

Description	PR
Implemented ability to browse and view Virtual Products types	#3052

Extensible payment methods

Two new extensions points for the Venia UI package have been added in this release.
The editablePaymentTypes target lets you add new editable payment methods to your storefronts, and
the summaryPagePaymentTypes target lets you add a custom payment summary in the checkout summary page.

Pull Requests

Description	PR
Refactored payment methods and created new extension points	#3103

Accessibility

Keyboard focus and navigation now work as expected on the layered navigation UI feature.
With the Filter modal open, users can press the Tab key to navigate across filter items such as "Price" and "Color".
On filter items, the user can press Space to open and navigate through the options with Tab.
Options are toggled using the Space key.

Description	PR
Added keyboard focus and adjusted the way tab order should work	#3034

Layered Navigation

To help deliver a better customer experience, filtering products by their attributes on the product listing page has been optimized for desktop views.
The changes included in this release focuses on improving how the user interacts with the layered navigation feature when filtering products.
For example, filter options can be neatly collapsed and the product listing is automatically updated whenever the user selects a filter option.

Pull Requests

Description	PR
Optimized the layered navigation feature for the desktop	#3137

Performance and optimization updates

This release also contains a configuration change for UPWARD so that it can use the gzip content encoding for HTML requests.

Pull Requests

Description	PR
Configured UPWARD to use gzip content encoding for HTML requests	#3255

Documentation updates

Since the last release, the documentation site has published new topics and updated an existing topic.

New topics

• Upgrading versions
• Change static assets directory
• Extension development
• Modify code with Targetables
• Targetable API reference
  • TargetableModule
  • TargetableESModule
  • TargetableESModuleArray
  • TargetableESModuleObject
  • TargetableReactComponent
  • TargetableSet
  • SingleImportStatement

Updated topics

• PWA Studio Overview

Pull Requests

Description	PR
Published a new topic that provides guidance and best practices for upgrading to new versions	[#3231][]
Published a new tutorial that shows how you can change the static assets directory used in your project	[#3219][]
Reorganize and refactor the navigation for the Overview sections	[#2926][]
Published a new topic that provides general guidance for extension development ...

v10.0.0

Release 10.0.0

NOTE:
This changelog only contains release notes for PWA Studio and Venia 10.0.0.
For older release notes, see [PWA Studio releases][].

Table of contents

• What's new in 10.0.0
• Pull requests merged in this release
• Known issues
• Upgrading from a previous version

What's new in 10.0.0

PWA Studio 10.0.0 contains new features, refactors, bug fixes, and various improvements.
This version is compatible with Magento 2.4.2.

Build report tool

The build report tool is a Buildpack CLI command that returns information about a storefront setup and development environment.
This feature makes it easier to provide information when reporting issues or for general debugging purposes.

The following command is now available for newly scaffolded projects:

yarn build:report

Check or Money Order payments

A PWA Studio extension that allows check or money order payments is now available thanks to the contribution of community member Lars Roettig.
If the Magento backend has the Check or Money Order option enabled, this extension lets storefront customers use this payment option.

Storefront developers can install this extension to add the new payment feature instead of writing custom frontend code to support this feature.
Extension developers can view the extension's source code to learn how to implement their own payment methods extension.

NOTE:
Currently, the data for Make Check Payable to and Send Check to is static because data from the Admin is not available from the GraphQL endpoint in Magento 2.4.2.

Custom scaffolding template

The Buildpack scaffolding tool for creating new projects now lets you specify a custom template and version.
This feature lets you create a storefront project based on a non-Venia template or use a pre-release version of the Venia template.

MegaMenu component

A MegaMenu component is now available in the Venia UI library thanks to the contribution of community member Marcin Kwiatkowski.
This component displays product categories and subcategories defined in the Magento backend.

Store switcher

The Venia UI library now provides components that support multiple store views.
These components let customers switch between the different store views defined in the Magento backend.

These components also support grouped store views if available from Magento.

Improved performance

This release improves the performance of the Venia storefront and its underlying components.
These improvements include:

• Enabling text compression for the UPWARD-JS server
• Removing unused JavaScript in Venia
• Investigating and improving render blocking and response in Venia

Increased test coverage

Our continued commitment to stability and quality has seen an increase in overall unit test code coverage.

Coverage as reported by coveralls.io:

Current coverage (10.0.0): 85.685%

Previous coverage (9.0.1): 84.19%

Pull requests merged in this release

Venia (storefront and visual component library)

Description	Change type	PR
Added MegeMenu feature and components	Feature	[#2932][]
Added ability to lazy Load/trim unused bytes in main routes	Feature	[#2988][]
Implemented Check or Money Order payment feature	Feature	[#2969][]
Added support for Configurable Product Image setting in the backend	Feature	[#2958][]
Created Store Switcher Groups components	Feature	[#2956][]
Added ability to remove saved payment methods	Feature	[#2943][]
Created ErrorView components	Feature	[#2936][]
Created Debugging Reporter feature	Feature	[#2910][]
Added link click handler inside of GalleryItem	Feature	[#3053][]
Excluded venia-ui/lib/components/Checkout from Coverage Report	Update	[#3023][]
Increased test coverage for venia-ui/lib/components/CreateAccountPage	Update	[#3021][]
Increased test coverage in venia-ui/lib/components/CheckoutPage	Update	[#3018][]
Created Venia UI App related tests	Update	[#3015][]
Removed "Home Page" from Title	Update	[#3012][]
Increased test coverage in venia-ui/lib/components/MagentoRoute	Update	[#3006][]
Increased test coverage in venia-ui/lib/components/Main	Update	[#3004][]
Removed data from all persisted Apollo caches	Update	[#2992][]
Investigated and improved render/blocking in Venia	Update	[#2952][]
Fixed mini cart not updating when logged in user has the same simple product already added	Bugfix	[#2996][]
Fixed CMS header line height	Bugfix	[#3032][]
Fixed bug where default Toasts do not fall back to using the DEFAULT_TIMEOUT	Bugfix	[#2982][]
Fixed a bug where dialog component would not reset fields on close after submitting	Bugfix	[#2960][]
Set a fixed minimum height on the main page	Bugfix	[#2942][]
Added a page level error and disabled checkout button when there are no available payment methods	Bugfix	[#2873][]

Peregrine library

Description	Change type	PR
Added middleware to schedule sign-out	Feature	[#2904][]
Added support for Product URL and Category URL Settings	Feature	[#2895][]
Increased test coverage for packages/peregrine/lib/talons/CheckoutPage	Update	[#3024][]
Increase test coverage in peregrine/lib/talons/SignIn	Update	[#2998][]
Updated Media Url generation logic to use store code header with a default fallback value	Update	[#2941][]
Moved Price Summary GraphQL fragment into Peregrine	Refactor	[#3007][]
Refactor comment on cmsPage talon to reflect why we compare against default string	Refactor	[#3062][]
Cleaned up an invalid function reference in billing address	Refactor	[#3065][]

Build tools

Description	Change type	PR
Added ability to use custom template for scaffolding	Feature	[#3025][]
Added option to use custom https certificates with buildpack	Feature	[#2946][]
Updated compile time logic to fetch store name from the GraphQL server	Update	[#3019][]
Fixed command escaping in the create-pwa shell command	Bugfix	[#3022][]

UPWARD

Description	Change type	PR
Added support for express server compression middleware.	Feature	[#2980][]
Added ability to allow blob types for UPWARD security headers	Feature	[#2985][]
Added the xfwd option to the proxyMiddleware	Feature	[#2986][]

Extensions

| Description | Change type | PR |
| --...

v9.0.1

Release 9.0.1

NOTE:
This changelog only contains release notes for PWA Studio and Venia 9.0.1.
For older release notes, see PWA Studio releases.

Table of contents

• What's new in 9.0.1
• Pull requests merged in this release
• Known issues
• Upgrading from a previous version

What's new in 9.0.1

PWA Studio 9.0.1 contains the same features, refactors, and various improvements in the previous 9.0.0 release plus a hotfix for the create-pwa CLI tool.

Hotfix for create-pwa

This release fixes a bug that crashes the scaffolding tool whenever you run yarn create @magento/pwa or npx @magento/create-pwa.

Pull requests merged in this release

Build tools

Description	Change type	PR
Removed lodash from create-pwa	Bugfix	#3003
Added venia-concept as a dependency of create-pwa	Bugfix	#3008

Known issues

• If you are using Multi-Source Inventory(MSI), a GraphQL issue prevents users from adding a configurable product to the shopping cart on non-default store views.
• Prerender feature is unable to cache HTML on Fastly enabled environments.
• The yarn watch process may run out of memory if left running for an extended amount of time.
  If an error occurs because of this, restart the watcher.

Upgrading from a previous version

The method for updating to 9.0.1 from a previous version depends on how PWA Studio is incorporated into your project.
The following are common use cases we have identified and how to update the project code.

Scaffolded project

Using the scaffolding tool is the recommended method for starting a new storefront project.
This tool generates a copy of the storefront project defined in the Venia concept package.

Upgrade method: Update dependencies and manual merge

Since scaffolded projects consume PWA Studio libraries as dependencies, you just need to update your PWA Studio dependencies in your package.json file to use the released version.

After that, install the new dependencies using the install command:

yarn install

or

npm install

If you need to update other project files, such as configuration and build scripts,
you need to use a diff tool to compare your projects files with those of Venia concept.
This will help determine what changes you need to manually copy into your project files.

PWA Studio fork

Many PWA Studio users have forked the PWA Studio Git repository.
Even though their codebase may have diverged a great deal from the current codebase, there is still a Git relationship.

Upgrade method: Update using Git

Pull and Merge the changes from the upstream repository using Git.
Most of the conflicts will be in components that we have fully refactored.

We recommend merging the library code we changed and updating component calls with any new prop signatures introduced in this version.

Manual code copies

Some PWA Studio users have copied parts of the code into their own projects.
This is similar to the Git workflow, but without the merging tools Git provides.

Upgrade method: Manual copy updates

Updating this code involves manually copying updates for the code they use.
New code may also need to be copied over if the updated code depends on it.

This method can be a chore, and we hope that some of the features in 5.0.0+ will help these users migrate to a package management approach.

NPM packages

Some users have imported the PWA Studio libraries using NPM.
This is the easiest way to work with the released versions of PWA Studio.

Upgrade method: Update package.json

To upgrade to the latest version (currently 9.0.1), simply call yarn add on each of the @magento packages. This will both update package.json in your project, as well as install the latest versions.

Sample command:

yarn add @magento/eslint-config @magento/pagebuilder @magento/peregrine @magento/pwa-buildpack @magento/upward-js @magento/venia-ui

v9.0.0

Release 9.0.0

NOTE:
This changelog only contains release notes for PWA Studio and Venia 9.0.0.
For older release notes, see [PWA Studio releases][].

Table of contents

• What's new in 9.0.0
• Pull requests merged in this release
• Known issues
• Upgrading from a previous version

What's new in 9.0.0

PWA Studio 9.0.0 contains new features, refactors, and various improvements.

IMPORTANT:
Due to an issue with the scaffolding tool released in 9.0.0, we released 9.0.1 quickly to resolve this issue.

Extensibility framework improvements

This release adds several improvements to the extensibility framework in PWA Studio to make it easier for developers to customize their storefronts.
For an overview of this framework, check out the new Extensibility framework topic on the docs site.

In previous releases, Peregrine talons had limited Target coverage.
This release adds an automatic API generator to Peregrine that exposes all hooks and talons as Targets.
Now, existing and future hooks and talons in Peregrine automatically get their own Targets API that developers may use to modify or extend functionality.

This release also adds the Targetables feature to the extensibility framework.
These represent source files used in your PWA Studio project, and
they give developers the ability to change the source code during the build process.
With Targetables, developers no longer have to copy PWA Studio source code into their storefront projects to make minor modifications.

PWA Studio extensions

PWA Studio's extensibility framework lets developers create extensions and install them as project dependencies in their storefronts.
As part of the work on the new extensibility framework, we refactored and relocated existing Venia features into PWA Studio extensions.
We also developed new extensions that provide useful Venia features that developers can add to their projects.

The source code for these extensions are available under the packages/extensions directory in the PWA Studio repository.

upward-security-headers
: intercepts build targets to add security headers to UPWARD

venia-adobe-data-layer
: provides Adobe Client Data Layer support for your project

venia-sample-backends
: provides demo Magento backends and backend validation utilities for your project
(this extension should be removed prior to going live)

venia-sample-language-packs
: provides example translations to illustrate how new languages can be installed into your storefronts

Internationalization and localization

The internationalization(i18n) feature in PWA Studio lets developers localize their storefront content according to different regions and languages.
The Magento backend provides your storefront with this list of regions and languages and the I18n feature provides translated content using PWA Studio language pack extensions.

As part of the i18n feature work, we refactored Venia UI components and gave them the ability to display the correct translations for multi-language storefronts.

This release also gives developers the ability to develop and install PWA Studio language packages as NPM dependencies.
An example of a language pack extension is in the packages/extensions directory in the PWA Studio repository.

For more information, read the new topic on the Localization feature.

My Account

This release adds components that support My Account features for customers that create an account with a store.

My Account features included in this release:

• Wishlist
• Saved Payments
• Address Book
• Order History

Increased test coverage

Our continued commitment to stability and quality has seen an increase in overall unit test code coverage.

Coverage as reported by coveralls.io:

Current coverage (9.0.0)
: 84.19%

Previous coverage (8.0.0)
: 79.21%

Magento release support change

Previous releases of PWA Studio supported multiple versions of the Magento back-end.
To help us deliver value faster, we modified our support matrix.

Starting with PWA Studio & Venia 9.0.0, we will only support the most recent version of Magento.
For example, version 9.0.0 only supports Magento 2.4.2.
Minor versions of PWA Studio & Venia released between typical Magento releases will support the last publicly available release.

Pull requests merged in this release

Venia (storefront and visual component library)

Description	Change type	PR
Created UI skeleton for Saved Payments	Feature	[#2671][]
Created component for displaying account information	Feature	[#2672][]
Added ability for shoppers to change locale using a store view switcher	Feature	[#2686][]
Created the main view for Wishlist	Feature	[#2692][]
Added the expanded view in the order history table	Feature	[#2703][]
Created a currency switcher component	Feature	[#2728][]
Added USE_STORE_CODE_IN_URL environment variable configuration	Feature	[#2735][]
Created Wishlist UI	Feature	[#2766][]
Added ability to determine whether to unmount or just hide child components in the Dialog component	Feature	[#2767][]
Added ability to remove products from Wishlist	Feature	[#2793][]
Added a "maskable icon" to Venia for Google Lighthouse	Feature	[#2818][]
Created message to display when no allowed or configured payment methods are present	Feature	[#2855][]
Created the main view for Address Book in My Account	Feature	[#2857][]
Added ability to Add and Edit addresses in the Address Book	Feature	[#2879][]
Created the main view for Saved payment methods	Feature	[#2882][]
Added ability to delete Address from Address Book	Feature	[#2888][]
Created new Sign In view for Checkout flow	Feature	[#2889][]
Updated logic for routes handling to accept an array of paths	Feature	[#2893][]
Replaced hardcoded root category id with an actual value retrieved from a query	Feature	[#2902][]
Added search by order number feature to the order history page	Feature	[#2916][]
Added pagination for Order History	Feature	[#2928][]
Refactored Edit Payment to use Dialog component	Refactor	[#2806][]
Refactored Edit Product to use Dialog component	Refactor	[#2824][]
Refactored Payment feature to make it extendable	Refactor	[#2838][]
Added access to checkout's useOverview() talon	Update	[#2636][]
Updated the Search trigger button in the site header to behave like My Account and Cart trigger buttons	Update	[#2685][]
Replaced the ProductQuantity component on the Product page with a QuantityFields stepper component	Update	[#2690][]
Localized My Account and Signed In sidebar	Update	[#2721][]
Localized Mini Cart and Search	Update	[#2734][]
Localized Cart	Update	[#2740][]
Localized Checkout page	Update	[#2759][]
Localized CMS	Update	[#2764][]
Localized Category page	Update	[#2771][]
Localized Product page ...

v8.0.0

Release 8.0.0

NOTE:
This changelog only contains release notes for PWA Studio 8.0.0.
For older release notes, see [PWA Studio releases][].

Table of contents

• What's new in 8.0.0
• Pull requests merged in this release
• Known issues
• Upgrading from a previous version

What's new in 8.0.0

PWA Studio 8.0.0 contains new features, refactors, and various improvements.

Improved performance

A lot of work has been done in this release to improve storefront performance.
This means that any project using the latest PWA Studio components will benefit from these updates.

One of the bigger changes is the migration to Apollo Client 3.0.
This version of the Apollo Client provides better cache controls and better network fetching performance in general.

This release also includes various refactors and improvements on the GraphQL queries themselves to reduce the API request times from Magento.

Complete cart and checkout experience

This release finishes the full page cart and checkout features introduced in previous releases.
The complete cart and checkout workflow is based on research made by members of the UX team.

Storefront developers can use this streamlined process as implemented or they can use the different components to customize their own cart and checkout workflow.

Shopping Bag feature

In addition to the complete full page cart and checkout experience, this release introduces a new Mini-Cart/Shopping Bag feature.

This feature is a floating modal that appears when you click on the shopping bag icon.
It replaces the old MiniCart component, which previously appeared as a drawer from the right side of the app.

Instead of competing with the full page cart feature, it only contains a subset of actions, such as removing an item and checking out.
For additional modifications to cart products, it links to the cart page.

Developers can still use the old MiniCart component in their projects, but it has been renamed to LegacyMiniCart.

Branding updates

The UX team continues in their research to improve the look and feel of the Venia brand.
This release includes many style updates to give the Venia storefront a more modern and accessible experience.

Developers get all these improvements right away when they start their projects using this version of Venia as the base storefront or by upgrading their dependencies.

My Account code preview

This releases includes a sneak peak at features associated with My Account, such as Wishlist, Order History, and Address Book.
Even though the Communications Page is the only navigable page, curious developers can peek at the 8.0.0 release codebase to see the initial code for these features.

Targets reference documentation

During 8.0.0 development, the PWA Studio doc site has published reference documentation for extensibility targets in the different packages.
This documentation contains API descriptions and sample code to help developers discover the different PWA Studio extension points.

Pull requests merged in this release

Venia (storefront and visual component library)

Description	Change type	PR
Implemented initial code for the new MiniCart component	Feature	[#2494][]
Created new components for an account menu	Feature	[#2550][]
Created components for a Newsletter Subscription page	Feature	[#2571][]
Implemented initial code for an Order History page	Feature	[#2611][]
Implemented a way to access top/intermediate level categories through the left nav	Feature	[#2616][]
Implemented initial UX and workflow for a Forgot Password feature for My Account	Feature	[#2619][]
Implemented initial code for Wishlist	Feature	[#2620][]
Implemented the ability to translate Venia's header / footer	Feature	[#2643][]
Added ability to allow PWA Studio to use a different store to localize CMS Pages	Feature	[#2649][]
Implemented initial code for Address Book	Feature	[#2653][]
Implemented initial code for an Order History table	Feature	[#2660][]
Updated Venia's button style to match new design	Update	[#2496][]
Added product listing to the MiniCart	Update	[#2506][]
Added a header section to the MiniCart	Update	[#2509][]
Added a footer section to the MiniCart	Update	[#2511][]
Adjusted styles for the header, main page, and footer components	Update	[#2513][]
Update Gallery component to use item.id for key prop on GalleryItem	Update	[#2520][]
Added product link for each product in the MiniCart	Update	[#2549][]
Disabled the visibility of the MiniCart on the checkout page	Update	[#2554][]
Added product links to the product listings on the cart page	Update	[#2557][]
Updated Venia's filter modal styles to match the new design	Update	[#2559][]
Added CSS to handle multiple configurable options	Update	[#2577][]
Implemented consistent error state handling	Update	[#2588][]
Added a sign-in section to the new My Account trigger in the header	Update	[#2590][]
Enabled GET for GraphQL queries (but not mutations)	Update	[#2602][]
Added React Refresh to improve development server performance	Update	[#2609][]
Improved error handling when using the Sign-in dropdown	Update	[#2664][]
Updated static images to reflect new logo	Update	[#2693][]
Disabled account page routes for v8.0.0	Update	[#2709][]
Removed email from the reset password link	Update	[#2726][]
Refactored code to use tokens for color and weight	Refactor	[#2500][]
Refactored Venia's inputs to match new design	Refactor	[#2510][]
Refactored Venia's accordions to match the style guidelines	Refactor	[#2527][]
Refactored Venia's cards to match the style guidelines	Refactor	[#2545][]
Fixed a "Data Fetch Error" on the product page during offline mode	Bugfix	[#2490][]
Fixed a bug that made the product and category sorting component unavailable	Bugfix	[#2493][]
Resolved remaining issues with Buttons component implementation	Bugfix	[#2523][]
Fixed scroll lock page shifting	Bugfix	[#2543][]
Fixed MiniCart blocking page interactions	Bugfix	[#2547][]
Fixed a sticky sidebar on the checkout page overlapping the footer	Bugfix	[#2582][]
Fixed a bug that kept rendering the loading spinner on the page	Bugfix	[#2583][]
Fixed MiniCart bug that prevent guest users from adding a product to an expired cart	Bugfix	[#2612][]
Fixed button CSS to handle mobile view	Bugfix	[#2655][]
Fixed improper use of formatMessage()	Bugfix	[#2698][]
Fixed Storybook bug caused by i18n work	Bugfix	[#2705][]
Fixed Payment Information button to disable it while the Payment section loads	Bugfix	[#2723][]
Fixed an offline homepage error	Bugfix	[#2727][]

Peregrine library

Description	Change type	PR
Added access to the root component type for child components	Feature	[#2443][]
Enable URL redirects when set in the Magento backend	Feature	[#2504][]
Added Create Account functionality to the Sign-in trigger in the navigation menu	Feature	[#2657][]
Added support for an app-wide configurable URL suffix	Feature	[#...