search

woocommerce / storefront

Official theme for WooCommerce
https://wordpress.org/themes/storefront/
972 stars 471 forks source link

Fix mobile nav menu in AMP Standard by using `nav_menu_toggle` #1992

Closed danielbachhuber closed 2 years ago

danielbachhuber commented 2 years ago

See https://github.com/Automattic/wp-calypso/issues/60240

Uses the nav_menu_toggle feature in the AMP plugin to fix the mobile nav menu. See https://amp-wp.org/documentation/playbooks/toggling-hamburger-menus/

How to test the changes in this Pull Request:

  1. Install and activate WooCommerce.
  2. Install and activate the Storefront Theme.
  3. Install and activate the latest version of the AMP plugin. It should default to "Reader" mode.
  4. View an individual blog post in Chrome Dev Tools with 'iPhone 12 Pro' as the device.
  5. Click on the mobile nav button and observe the mobile nav works as expected: https://user-images.githubusercontent.com/36432/173921911-5d00a0fb-31ed-4453-a694-5756159e0ea7.mp4
  6. Switch from "Reader" to "Standard" Template Mode in AMP Settings: https://user-images.githubusercontent.com/36432/173924098-b9d333a5-ca08-4de3-aa61-2593b7e258ca.png
  7. Refresh the individual blog post, verify AMP is running (a message will appear in the Console), and click on the mobile nav button to verify the mobile nav works as expected. https://user-images.githubusercontent.com/36432/173932496-03d729ef-66f0-4d0b-8191-21c8636d0342.mp4

Changelog

Fix – Mobile nav menu now toggles as expected in AMP Standard mode.