Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Global header: Implement design updates #657

Merged
merged 7 commits into from
Oct 14, 2024
Merged

Global header: Implement design updates #657

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
bfef125
Header: Decrease global header height
ryelle Aug 27, 2024
2d9bbc6
Fix alignment of "Get WordPress"
ryelle Aug 27, 2024
2992b9e
Update menu text styles
ryelle Aug 27, 2024
4284baf
Fix alignment of Rosetta site title
ryelle Aug 27, 2024
2641317
Fix modal detection to close other modals when opening another
ryelle Oct 10, 2024
a7be650
Make items full-width in the modal menu
ryelle Oct 10, 2024
b23ed22
Update dropdown toggles to be lighter color
ryelle Oct 10, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
46 changes: 19 additions & 27 deletions mu-plugins/blocks/global-header-footer/js/view.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"],' +
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do we need to rely on the Interactivity API attributes? Is it fair to assume a button in the menu is a dropdown?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is a way to differentiate open and close buttons, if we went for just "button" it would catch both.

'.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' );
} );
} );
} );
Expand Down
6 changes: 5 additions & 1 deletion mu-plugins/blocks/global-header-footer/postcss/_common.pcss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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,
Expand All @@ -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);
Expand All @@ -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 {
Expand Down Expand Up @@ -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);
Expand Down
9 changes: 1 addition & 8 deletions mu-plugins/blocks/global-header-footer/postcss/header/get-wordpress.pcss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
2 changes: 1 addition & 1 deletion mu-plugins/blocks/global-header-footer/postcss/header/header.pcss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand Down
13 changes: 4 additions & 9 deletions mu-plugins/blocks/global-header-footer/postcss/header/logos.pcss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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) {
Expand Down
39 changes: 22 additions & 17 deletions mu-plugins/blocks/global-header-footer/postcss/header/menu.pcss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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 {
Expand Down Expand Up @@ -160,6 +165,7 @@
}

& .wp-block-navigation-submenu__toggle {
margin-bottom: calc(var(--wp--style--block-gap) / 4);

@media (--tablet) {
margin: 0;
Expand All @@ -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 {
Expand All @@ -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);
}
}
Expand Down
Loading