From bfef12572b33dafbb3e287777826a5f04649f096 Mon Sep 17 00:00:00 2001 From: Kelly Dwan Date: Tue, 27 Aug 2024 13:02:49 -0400 Subject: [PATCH 1/7] Header: Decrease global header height --- .../blocks/global-header-footer/postcss/header/header.pcss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 ea4354fa..1704ae76 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) { From 2d9bbc6a7638ce52189977ce65659d842b34315a Mon Sep 17 00:00:00 2001 From: Kelly Dwan Date: Tue, 27 Aug 2024 13:10:23 -0400 Subject: [PATCH 2/7] Fix alignment of "Get WordPress" --- .../postcss/header/get-wordpress.pcss | 9 +-------- 1 file changed, 1 insertion(+), 8 deletions(-) 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 34f3782a..ce754e70 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; From 2992b9ef3bf2842549ed101558a5809edccafeb6 Mon Sep 17 00:00:00 2001 From: Kelly Dwan Date: Tue, 27 Aug 2024 13:03:08 -0400 Subject: [PATCH 3/7] Update menu text styles --- .../global-header-footer/postcss/_common.pcss | 2 +- .../postcss/header/menu.pcss | 25 ++++++------------- 2 files changed, 9 insertions(+), 18 deletions(-) diff --git a/mu-plugins/blocks/global-header-footer/postcss/_common.pcss b/mu-plugins/blocks/global-header-footer/postcss/_common.pcss index 67f0f314..c1363e4c 100644 --- a/mu-plugins/blocks/global-header-footer/postcss/_common.pcss +++ b/mu-plugins/blocks/global-header-footer/postcss/_common.pcss @@ -137,7 +137,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/menu.pcss b/mu-plugins/blocks/global-header-footer/postcss/header/menu.pcss index 8556eb44..d59bcc6d 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; @@ -95,20 +95,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 +155,7 @@ } & .wp-block-navigation-submenu__toggle { + margin-bottom: calc(var(--wp--style--block-gap) / 4); @media (--tablet) { margin: 0; @@ -195,29 +191,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); } } From 4284bafb14dafe548fd63ef04ee604c7c7eb56da Mon Sep 17 00:00:00 2001 From: Kelly Dwan Date: Tue, 27 Aug 2024 13:18:32 -0400 Subject: [PATCH 4/7] Fix alignment of Rosetta site title --- .../global-header-footer/postcss/header/logos.pcss | 13 ++++--------- 1 file changed, 4 insertions(+), 9 deletions(-) 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 ab10851b..55e7efda 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) { From 2641317c424f18d49a546d743c644c50a5cb2f9f Mon Sep 17 00:00:00 2001 From: Kelly Dwan Date: Thu, 10 Oct 2024 17:08:22 -0400 Subject: [PATCH 5/7] 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 --- .../blocks/global-header-footer/js/view.js | 46 ++++++++----------- 1 file changed, 19 insertions(+), 27 deletions(-) diff --git a/mu-plugins/blocks/global-header-footer/js/view.js b/mu-plugins/blocks/global-header-footer/js/view.js index cafcbd6c..4fad0381 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' ); } ); } ); } ); From a7be650af03673f80442ef954b0ae902825c5068 Mon Sep 17 00:00:00 2001 From: Kelly Dwan Date: Thu, 10 Oct 2024 18:06:24 -0400 Subject: [PATCH 6/7] Make items full-width in the modal menu --- .../global-header-footer/postcss/header/menu.pcss | 10 ++++++++++ 1 file changed, 10 insertions(+) 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 d59bcc6d..2140de12 100644 --- a/mu-plugins/blocks/global-header-footer/postcss/header/menu.pcss +++ b/mu-plugins/blocks/global-header-footer/postcss/header/menu.pcss @@ -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 { From b23ed2220a05c75d97f4b37ed234b6e64623940b Mon Sep 17 00:00:00 2001 From: Kelly Dwan Date: Thu, 10 Oct 2024 18:07:03 -0400 Subject: [PATCH 7/7] Update dropdown toggles to be lighter color --- mu-plugins/blocks/global-header-footer/postcss/_common.pcss | 4 ++++ .../blocks/global-header-footer/postcss/header/menu.pcss | 4 ++++ 2 files changed, 8 insertions(+) diff --git a/mu-plugins/blocks/global-header-footer/postcss/_common.pcss b/mu-plugins/blocks/global-header-footer/postcss/_common.pcss index c1363e4c..c30ac861 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 { 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 2140de12..808e31d0 100644 --- a/mu-plugins/blocks/global-header-footer/postcss/header/menu.pcss +++ b/mu-plugins/blocks/global-header-footer/postcss/header/menu.pcss @@ -186,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 {