diff --git a/mu-plugins/blocks/global-header-footer/js/view.js b/mu-plugins/blocks/global-header-footer/js/view.js index cafcbd6cf..4fad0381e 100644 --- a/mu-plugins/blocks/global-header-footer/js/view.js +++ b/mu-plugins/blocks/global-header-footer/js/view.js @@ -193,29 +193,16 @@ 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 }` ) @@ -223,14 +210,19 @@ 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 index 67f0f3145..c30ac8615 100644 --- 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 index 34f3782a8..ce754e70e 100644 --- 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 index ea4354fa8..1704ae76d 100644 --- 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 index ab10851bb..55e7efdaf 100644 --- 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 index 8556eb440..808e31d0a 100644 --- 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,6 +88,16 @@ } } + + @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 { @@ -95,20 +105,15 @@ } &.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); } }