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

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.