Global header: Implement design updates (#657)

* Header: Decrease global header height * Fix alignment of "Get WordPress" * Update menu text styles * Fix alignment of Rosetta site title * Fix modal detection to close other modals when opening another This also simplifies the logic now that open and close buttons can be selected individually * Make items full-width in the modal menu * Update dropdown toggles to be lighter color
WordPress · Oct 14, 2024 · 3269f6d · 3269f6d
1 parent e2c61f7
commit 3269f6d
Show file tree

Hide file tree

Showing 6 changed files with 52 additions and 63 deletions.
diff --git a/mu-plugins/blocks/global-header-footer/js/view.js b/mu-plugins/blocks/global-header-footer/js/view.js
@@ -193,44 +193,36 @@
 			closeSearchButton.setAttribute( 'aria-label', labels.closeSearchLabel || 'Close Search' );
 		}
 
-		// Watch for the `has-modal-open` class to be removed, and remove the global class too.
-		// This works as a callback to be fired when the global header modals are closed, as
-		// they're attached when each modal opens.
-		const modalCloseObserver = new window.MutationObserver( ( mutationList, observer ) => {
-			for ( const mutation of mutationList ) {
-				const { attributeName, type, target } = mutation;
-				if ( type === 'attributes' && attributeName === 'class' ) {
-					if ( ! target.classList.contains( 'has-modal-open' ) ) {
-						target.classList.remove( 'has-global-modal-open' );
-					}
-				}
-			}
-			// Remove the observer to prevent recursion. This will be re-attached when the modal is opened.
-			observer.disconnect();
-		} );
-
-		const openButtons = document.querySelectorAll( '[data-micromodal-trigger]' );
+		const openButtons = document.querySelectorAll(
+			'.global-header__navigation [data-wp-on-async--click="actions.openMenuOnClick"],' +
+			'.global-header__search [data-wp-on-async--click="actions.openMenuOnClick"]'
+		);
 		openButtons.forEach( function ( button ) {
 			// When any open menu button is clicked, find any existing close buttons and click them.
 			button.addEventListener( 'click', function ( event ) {
-				const thisModal = event.target.getAttribute( 'data-micromodal-trigger' );
+				const thisModal = event.target.parentNode.querySelector( '[data-wp-class--has-modal-open]' ).id;
 				const closeButtons = Array.from(
-					document.querySelectorAll( 'button[data-micromodal-close]' )
+					document.querySelectorAll( '[data-wp-on-async--click="actions.closeMenuOnClick"]' )
 				).filter(
 					// Filter to find visible close buttons that are not for this modal.
 					( _button ) => _button.offsetWidth > 0 && null === _button.closest( `#${ thisModal }` )
 				);
 
 				closeButtons.forEach( ( _button ) => _button.click() );
 
-				// If this button opened the global search, add a class and trigger the close observer.
-				if (
-					button.parentNode.classList.contains( 'global-header__navigation' ) ||
-					button.parentNode.classList.contains( 'global-header__search' )
-				) {
-					document.documentElement.classList.add( 'has-global-modal-open' );
-					modalCloseObserver.observe( document.documentElement, { attributes: true } );
-				}
+				// Add a helper class when one of the global modals are open.
+				document.documentElement.classList.add( 'has-global-modal-open' );
+			} );
+		} );
+
+		const closeButtons = document.querySelectorAll(
+			'.global-header__navigation [data-wp-on-async--click="actions.closeMenuOnClick"],' +
+			'.global-header__search [data-wp-on-async--click="actions.closeMenuOnClick"]'
+		);
+		// When the global menus are closed (close button is clicked), remove the helper class.
+		closeButtons.forEach( function ( button ) {
+			button.addEventListener( 'click', function () {
+				document.documentElement.classList.remove( 'has-global-modal-open' );
 			} );
 		} );
 	} );

diff --git a/mu-plugins/blocks/global-header-footer/postcss/_common.pcss b/mu-plugins/blocks/global-header-footer/postcss/_common.pcss
@@ -71,6 +71,7 @@ html {
 	--wp--preset--color--charcoal-2: #23282d;
 	--wp--preset--color--charcoal-3: #40464d; /* Used only in the admin bar. */
 	--wp--preset--color--charcoal-4: #656a71;
+	--wp--preset--color--charcoal-5: #979aa1;
 	--wp--preset--color--nero: #1c2024; /* Only used in the header (hovers), not in the parent/child themes. */
 	--wp--preset--color--white: #fff;
 	--wp--preset--color--deep-blueberry: #213fd4;
@@ -85,6 +86,7 @@ html {
 
 	--wp-global-header--link-color--active: var(--wp--preset--color--blueberry-2);
 	--wp-global-header--text-color: var(--wp--preset--color--white);
+	--wp-global-header--text-color--light: var(--wp--preset--color--charcoal-5);
 }
 
 .has-charcoal-0-color,
@@ -93,6 +95,7 @@ html {
 	--wp-global-header--link-color: var(--wp--preset--color--charcoal-2);
 	--wp-global-header--link-color--active: var(--wp--preset--color--deep-blueberry);
 	--wp-global-header--text-color: var(--wp--preset--color--charcoal-2);
+	--wp-global-header--text-color--light: var(--wp--preset--color--charcoal-4);
 
 	&.has-background[style*="background-color:"] {
 		--wp-global-header--background-color--hover: var(--wp--preset--color--light-grey-2);
@@ -103,6 +106,7 @@ html {
 	--wp-global-header--background-color: var(--wp--preset--color--blueberry-1);
 	--wp-global-header--background-color--hover: var(--wp--preset--color--deep-blueberry);
 	--wp-global-header--link-color--active: var(--wp--preset--color--white);
+	--wp-global-header--text-color--light: var(--wp--preset--color--white);
 }
 
 .has-charcoal-1-background-color {
@@ -137,7 +141,7 @@ html {
 .wp-block-group.global-header,
 .global-header__alert-banner,
 .wp-block-group.global-footer {
-	--active-menu-item-border-height: 4px;
+	--active-menu-item-border-height: 1px;
 
 	background-color: var(--wp-global-header--background-color);
 	color: var(--wp-global-header--text-color);

diff --git a/mu-plugins/blocks/global-header-footer/postcss/header/get-wordpress.pcss b/mu-plugins/blocks/global-header-footer/postcss/header/get-wordpress.pcss
@@ -37,19 +37,12 @@
 	/* Desktop - `div` containing `a` */
 	& .global-header__desktop-get-wordpress-container {
 		display: none;
-		padding-top: 27px;
-		padding-bottom: 27px;
-		padding-left: var(--wp--style--block-gap);
+		padding: calc((var(--wp-global-header-height) - 36px) / 2) var(--wp--style--block-gap);
 
 		@media (--tablet) {
 			display: inline;
 		}
 
-		@media (--short-screen) {
-			padding-top: 12px;
-			padding-bottom: 12px;
-		}
-
 		& a:hover,
 		& a:focus {
 			text-decoration: none;

diff --git a/mu-plugins/blocks/global-header-footer/postcss/header/header.pcss b/mu-plugins/blocks/global-header-footer/postcss/header/header.pcss
@@ -2,7 +2,7 @@ html {
 	--wp-global-header-height: 60px;
 
 	@media (--tablet) {
-		--wp-global-header-height: 90px;
+		--wp-global-header-height: 70px;
 	}
 
 	@media (--short-screen) {

diff --git a/mu-plugins/blocks/global-header-footer/postcss/header/logos.pcss b/mu-plugins/blocks/global-header-footer/postcss/header/logos.pcss
@@ -48,9 +48,11 @@
 	}
 
 	& .global-header__wporg-locale-title {
+
+		/* 1.35em = line height of element. */
+		padding-top: calc((var(--wp-global-header-height) - 1.35em) / 2);
+		padding-bottom: calc((var(--wp-global-header-height) - 1.35em) / 2);
 		padding-left: 0;
-		padding-bottom: 16px;
-		padding-top: 16px;
 		flex-basis: max-content;
 		flex-grow: 1;
 		flex-shrink: 1;
@@ -71,13 +73,6 @@
 			max-width: 15em;
 			flex-basis: min-content;
 			flex-shrink: 0;
-			padding-top: 31px;
-			padding-bottom: 32px;
-		}
-
-		@media (--short-screen) {
-			padding-bottom: 16px;
-			padding-top: 16px;
 		}
 
 		@media (--desktop-wide) {

diff --git a/mu-plugins/blocks/global-header-footer/postcss/header/menu.pcss b/mu-plugins/blocks/global-header-footer/postcss/header/menu.pcss
@@ -75,7 +75,7 @@
 
 	& .wp-block-navigation__container {
 		padding: 0 0 var(--wp--custom--margin--vertical) 0;
-		row-gap: 0;
+		row-gap: calc(var(--wp--style--block-gap) / 4);
 		column-gap: 0;
 		font-size: inherit;
 		line-height: 24px;
@@ -88,27 +88,32 @@
 			}
 		}
 
+
+		@media (max-width: 889px) {
+			.wp-block-navigation-item,
+			.wp-block-navigation-item:not(.global-header__mobile-get-wordpress) a,
+			.wp-block-navigation-submenu__toggle,
+			.wp-block-navigation-submenu {
+				width: 100%;
+			}
+		}
+
 		& .wp-block-navigation-item {
 			&:hover,
 			&:focus-within {
 				background-color: var(--wp-global-header--background-color--hover);
 			}
 
 			&.current-menu-item:not(.global-header__get-wordpress) {
-				border-left: var(--active-menu-item-border-height) solid var(--wp-global-header--link-color--active);
-				margin-left: calc((var(--wp--style--block-gap) / 2) * -1);
-				padding-left: calc(var(--wp--style--block-gap) / 2 - var(--active-menu-item-border-height));
 
 				@media (--tablet) {
-					margin-left: 0;
-					padding-left: 0;
 					border-bottom: var(--active-menu-item-border-height) solid var(--wp-global-header--link-color--active);
 					border-left: none;
 				}
 
 				& > a {
 					color: var(--wp-global-header--link-color--active);
-					font-weight: 700;
+					font-weight: 400;
 				}
 
 				& > button svg {
@@ -160,6 +165,7 @@
 		}
 
 		& .wp-block-navigation-submenu__toggle {
+			margin-bottom: calc(var(--wp--style--block-gap) / 4);
 
 			@media (--tablet) {
 				margin: 0;
@@ -180,6 +186,10 @@
 					background-color: var(--wp-global-header--text-color);
 				}
 			}
+
+			@media (max-width: 889px) {
+				color: var(--wp-global-header--text-color--light);
+			}
 		}
 
 		& .wp-block-navigation__submenu-icon {
@@ -195,29 +205,24 @@
 	}
 
 	& .wp-block-navigation__container .wp-block-navigation__submenu-container {
-		font-size: 15px;
-		gap: 0.5em;
-		padding-top: calc(var(--wp--style--block-gap) / 2);
-		padding-bottom: calc(var(--wp--style--block-gap) / 2);
+		gap: calc(var(--wp--style--block-gap) / 4) 0;
+		padding: 0 0 0 var(--wp--style--block-gap);
 		border: none;
 		white-space: nowrap;
 
 		@media (--tablet) {
 			font-size: inherit;
 			gap: inherit;
-			padding-top: 0;
+			padding-left: 0;
+			padding-bottom: calc(var(--wp--style--block-gap) / 2);
 			left: 0;
 
 			& a:hover,
 			& a:focus {
 				text-decoration: underline;
 			}
-		}
 
-		& .wp-block-navigation-item a {
-			padding: calc(var(--wp--style--block-gap) / 4);
-
-			@media (--tablet) {
+			& .wp-block-navigation-item a {
 				padding: calc(var(--wp--style--block-gap) / 2);
 			}
 		}