From 7c08559e8c6bc2a2e81fea4fcb22c90a4e27e2f3 Mon Sep 17 00:00:00 2001
From: desrosj <desrosj@git.wordpress.org>
Date: Mon, 21 Dec 2020 15:16:04 +0000
Subject: [PATCH] Twenty Twenty-One: Allow local anchor links to be used in
 primary navigation.

This adds some JavaScript to detect when an anchor link is clicked within the primary navigation on mobile devices and closes the menu before scrolling to the location on the page.

Props poena, macmanx, t-p.
Merges [49854] to the 5.6 branch.
Fixes #52006.
Built from https://develop.svn.wordpress.org/branches/5.6@49855


git-svn-id: http://core.svn.wordpress.org/branches/5.6@49574 1a063a9b-81f0-0310-95a4-ce76da25c4cd
---
 .../assets/js/primary-navigation.js             | 17 +++++++++++++++++
 wp-includes/version.php                         |  2 +-
 2 files changed, 18 insertions(+), 1 deletion(-)

diff --git a/wp-content/themes/twentytwentyone/assets/js/primary-navigation.js b/wp-content/themes/twentytwentyone/assets/js/primary-navigation.js
index 4f3fc3caa6..ec559619a1 100644
--- a/wp-content/themes/twentytwentyone/assets/js/primary-navigation.js
+++ b/wp-content/themes/twentytwentyone/assets/js/primary-navigation.js
@@ -150,6 +150,23 @@ function twentytwentyoneExpandSubMenu( el ) { // jshint ignore:line
 			}
 		} );
 
+		/**
+		 * Close menu and scroll to anchor when an anchor link is clicked.
+		 * Adapted from TwentyTwenty.
+		 */
+		document.addEventListener( 'click', function( event ) {
+			// If target onclick is <a> with # within the href attribute
+			if ( event.target.hash && event.target.hash.includes( '#' ) ) {
+				wrapper.classList.remove( id + '-navigation-open', 'lock-scrolling' );
+				twentytwentyoneToggleAriaExpanded( mobileButton );
+				// Wait 550 and scroll to the anchor.
+				setTimeout(function () {
+					var anchor = document.getElementById(event.target.hash.slice(1));
+					anchor.scrollIntoView();
+				}, 550);
+			}
+		} );
+
 		document.getElementById( 'site-navigation' ).querySelectorAll( '.menu-wrapper > .menu-item-has-children' ).forEach( function( li ) {
 			li.addEventListener( 'mouseenter', function() {
 				this.querySelector( '.sub-menu-toggle' ).setAttribute( 'aria-expanded', 'true' );
diff --git a/wp-includes/version.php b/wp-includes/version.php
index 37aa846423..23aca707ff 100644
--- a/wp-includes/version.php
+++ b/wp-includes/version.php
@@ -13,7 +13,7 @@
  *
  * @global string $wp_version
  */
-$wp_version = '5.6.1-alpha-49853';
+$wp_version = '5.6.1-alpha-49855';
 
 /**
  * Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.