Skip to content

Commit

Permalink
Header/Footer: Rename classes to "global header" for clarity.
Browse files Browse the repository at this point in the history 
See WordPress/wporg-news-2021#41 (comment)
  • Loading branch information
@iandunn
iandunn committed Oct 25, 2021
1 parent fbd26ef commit a7db6ea
Show file tree
Hide file tree
Showing 11 changed files with 80 additions and 80 deletions.
34 changes: 17 additions & 17 deletions mu-plugins/blocks/global-header-footer/footer.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,11 +6,11 @@

?>

<!-- wp:group {"tagName":"footer","align":"full","className":"site-footer"} -->
<footer class="wp-block-group site-footer alignfull">
<!-- wp:group {"className":"site-footer__navigation-container"} -->
<div class="wp-block-group site-footer__navigation-container">
<!-- wp:navigation {"orientation":"vertical","className":"site-footer__navigation-important","isResponsive":false} -->
<!-- wp:group {"tagName":"footer","align":"full","className":"global-footer"} -->
<footer class="wp-block-group global-footer alignfull">
<!-- wp:group {"className":"global-footer__navigation-container"} -->
<div class="wp-block-group global-footer__navigation-container">
<!-- wp:navigation {"orientation":"vertical","className":"global-footer__navigation-important","isResponsive":false} -->
<!-- wp:navigation-link {"label":"About","url":"https://wordpress.org/about/","kind":"custom","isTopLevelLink":true} /-->
<!-- wp:navigation-link {"label":"Blog","url":"https://wordpress.org/news","kind":"custom","isTopLevelLink":true} /-->
<!-- wp:navigation-link {"label":"Hosting","url":"https://wordpress.org/hosting/","kind":"custom","isTopLevelLink":true} /-->
Expand All @@ -19,47 +19,47 @@
<!-- wp:navigation-link {"label":"Mobile","url":"https://wordpress.org/mobile/","kind":"custom","isTopLevelLink":true} /-->
<!-- /wp:navigation -->

<!-- wp:navigation {"orientation":"vertical","className":"site-footer__navigation-information","isResponsive":false} -->
<!-- wp:navigation {"orientation":"vertical","className":"global-footer__navigation-information","isResponsive":false} -->
<!-- wp:navigation-link {"label":"Support","url":"https://wordpress.org/support/","kind":"custom","isTopLevelLink":true} /-->
<!-- wp:navigation-link {"label":"Developers","url":"https://developer.wordpress.org/","kind":"custom","isTopLevelLink":true} /-->
<!-- wp:navigation-link {"label":"Get Involved","url":"https://make.wordpress.org/","kind":"custom","isTopLevelLink":true} /-->
<!-- wp:navigation-link {"label":"Learn","url":"https://learn.wordpress.org/","kind":"custom","isTopLevelLink":true} /-->
<!-- /wp:navigation -->

<!-- wp:navigation {"orientation":"vertical","className":"site-footer__navigation-resources","isResponsive":false} -->
<!-- wp:navigation {"orientation":"vertical","className":"global-footer__navigation-resources","isResponsive":false} -->
<!-- wp:navigation-link {"label":"Showcase","url":"https://wordpress.org/showcase/","kind":"custom","isTopLevelLink":true} /-->
<!-- wp:navigation-link {"label":"Plugins","url":"https://wordpress.org/plugins/","kind":"custom","isTopLevelLink":true} /-->
<!-- wp:navigation-link {"label":"Themes","url":"https://wordpress.org/themes/","kind":"custom","isTopLevelLink":true} /-->
<!-- wp:navigation-link {"label":"Patterns","url":"https://wordpress.org/patterns/","kind":"custom","isTopLevelLink":true} /-->
<!-- wp:navigation-link {"label":"Openverse","url":"https://wordpress.org/openverse/","kind":"custom","isTopLevelLink":true} /-->
<!-- /wp:navigation -->

<!-- wp:navigation {"orientation":"vertical","className":"site-footer__navigation-community","isResponsive":false} -->
<!-- wp:navigation {"orientation":"vertical","className":"global-footer__navigation-community","isResponsive":false} -->
<!-- wp:navigation-link {"label":"WordCamp","url":"https://central.wordcamp.org/","kind":"custom","isTopLevelLink":true} /-->
<!-- wp:navigation-link {"label":"WordPress.TV","url":"https://wordpress.tv/","kind":"custom","isTopLevelLink":true} /-->
<!-- wp:navigation-link {"label":"BuddyPress","url":"https://buddypress.org/","kind":"custom","isTopLevelLink":true} /-->
<!-- wp:navigation-link {"label":"bbPress","url":"https://bbpress.org/","kind":"custom","isTopLevelLink":true} /-->
<!-- /wp:navigation -->

<!-- wp:navigation {"orientation":"vertical","className":"site-footer__navigation-external","isResponsive":false} -->
<!-- wp:navigation {"orientation":"vertical","className":"global-footer__navigation-external","isResponsive":false} -->
<!-- wp:navigation-link {"label":"WordPress.com","url":"https://wordpress.com/?ref=wporg-footer","kind":"custom","isTopLevelLink":true} /-->
<!-- wp:navigation-link {"label":"Matt","url":"https://ma.tt/","kind":"custom","isTopLevelLink":true} /-->
<!-- wp:navigation-link {"label":"Privacy","url":"https://wordpress.org/about/privacy/","kind":"custom","isTopLevelLink":true} /-->
<!-- wp:navigation-link {"label":"Public Code","url":"https://publiccode.eu/","kind":"custom","isTopLevelLink":true} /-->
<!-- /wp:navigation -->
</div> <!-- /wp:group -->

<!-- wp:group {"className":"site-footer__logos-container"} -->
<div class="wp-block-group site-footer__logos-container">
<!-- wp:group {"className":"global-footer__logos-container"} -->
<div class="wp-block-group global-footer__logos-container">
<!-- The design calls for two logos, a small "mark" on mobile/tablet, and the full logo for desktops. -->
<!-- wp:image {"width":27,"height":27,"className":"site-footer__wporg-logo-mark"} -->
<figure class="wp-block-image is-resized site-footer__wporg-logo-mark">
<!-- wp:image {"width":27,"height":27,"className":"global-footer__wporg-logo-mark"} -->
<figure class="wp-block-image is-resized global-footer__wporg-logo-mark">
<img src="https://wordpress.org/style/images/w-mark.svg" alt="" width="27" height="27" />
</figure>
<!-- /wp:image -->

<!-- wp:image {"width":160,"height":24,"className":"site-footer__wporg-logo-full"} -->
<figure class="wp-block-image is-resized site-footer__wporg-logo-full">
<!-- wp:image {"width":160,"height":24,"className":"global-footer__wporg-logo-full"} -->
<figure class="wp-block-image is-resized global-footer__wporg-logo-full">
<img src="https://wordpress.org/style/images/wporg-logo.svg?3" alt="" width="160" height="24" />
</figure>
<!-- /wp:image -->
Expand All @@ -70,8 +70,8 @@
<!-- wp:social-link {"url":"https://twitter.com/WordPress","service":"twitter","label":"Visit our Twitter account"} /-->
</ul> <!-- /wp:social-links -->

<!-- wp:image {"width":188,"height":13,"className":"site-footer__code_is_poetry"} -->
<figure class="wp-block-image is-resized site-footer__code_is_poetry">
<!-- wp:image {"width":188,"height":13,"className":"global-footer__code_is_poetry"} -->
<figure class="wp-block-image is-resized global-footer__code_is_poetry">
<img
src="https://s.w.org/style/images/code-is-poetry-for-dark-bg.svg"
alt=""
Expand Down
40 changes: 20 additions & 20 deletions mu-plugins/blocks/global-header-footer/header.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,19 +13,19 @@

?>

<!-- wp:group {"tagName":"header","align":"full","className":"site-header"} -->
<header class="wp-block-group site-header alignfull">
<!-- wp:group {"tagName":"header","align":"full","className":"global-header"} -->
<header class="wp-block-group global-header alignfull">
<!-- The design calls for two logos, a small "mark" on mobile/tablet, and the full logo for desktops. -->
<!-- wp:image {"width":27,"height":27,"className":"site-header__wporg-logo-mark"} -->
<figure class="wp-block-image is-resized site-header__wporg-logo-mark">
<!-- wp:image {"width":27,"height":27,"className":"global-header__wporg-logo-mark"} -->
<figure class="wp-block-image is-resized global-header__wporg-logo-mark">
<a href="https://wordpress.org/">
<img src="https://wordpress.org/style/images/w-mark.svg" alt="" width="27" height="27" />
</a>
</figure>
<!-- /wp:image -->

<!-- wp:image {"width":160,"height":24,"className":"site-header__wporg-logo-full"} -->
<figure class="wp-block-image is-resized site-header__wporg-logo-full">
<!-- wp:image {"width":160,"height":24,"className":"global-header__wporg-logo-full"} -->
<figure class="wp-block-image is-resized global-header__wporg-logo-full">
<a href="https://wordpress.org/">
<img src="https://wordpress.org/style/images/wporg-logo.svg?3" alt="" width="160" height="24" />
</a>
Expand All @@ -37,7 +37,7 @@
calls for. It also provides a consistent experience with the primary navigation menu, with respect to
keyboard navigation, ARIA states, etc. It also saves having to write custom code for all the interactions.
-->
<!-- wp:navigation {"orientation":"vertical","className":"site-header__search","isResponsive":true} -->
<!-- wp:navigation {"orientation":"vertical","className":"global-header__search","isResponsive":true} -->
<!-- wp:navigation-link {"label":"Search","url":"#","kind":"custom","isTopLevelLink":false} -->
<!-- wp:html -->
<!--
Expand All @@ -58,7 +58,7 @@
role="search"
method="get"
action="https://wordpress.org/search/do-search.php"
class="wp-block-search__button-outside wp-block-search__text-button site-header__search-form wp-block-search"
class="wp-block-search__button-outside wp-block-search__text-button global-header__search-form wp-block-search"
>
<label for="wp-block-search__input-99" class="wp-block-search__label">Search</label>
<div class="wp-block-search__inside-wrapper">
Expand All @@ -80,9 +80,9 @@ class="wp-block-search__input"

<!-- This is the first of two Get WordPress buttons; the other is in the navigation menu.
Two are needed because they have different DOM hierarchies at different breakpoints. -->
<!-- wp:group {"className":"site-header__desktop-get-wordpress-container"} -->
<div class="site-header__desktop-get-wordpress-container">
<a href="https://wordpress.org/download/" class="site-header__desktop-get-wordpress site-header__get-wordpress">Get WordPress</a>
<!-- wp:group {"className":"global-header__desktop-get-wordpress-container"} -->
<div class="global-header__desktop-get-wordpress-container">
<a href="https://wordpress.org/download/" class="global-header__desktop-get-wordpress global-header__get-wordpress">Get WordPress</a>
</div> <!-- /wp:group -->

<!--
Expand All @@ -91,7 +91,7 @@ class="wp-block-search__input"
items should be moved to the top level (e.g., Five for the Future), to make them easier to see, and to
make the CSS simpler.
-->
<!-- wp:navigation {"orientation":"horizontal","className":"site-header__navigation","isResponsive":true} -->
<!-- wp:navigation {"orientation":"horizontal","className":"global-header__navigation","isResponsive":true} -->
<!-- wp:navigation-link {"label":"Plugins","url":"https://wordpress.org/plugins/","kind":"custom","isTopLevelLink":true} /-->
<!-- wp:navigation-link {"label":"Themes","url":"https://wordpress.org/themes/","kind":"custom","isTopLevelLink":true} /-->
<!-- wp:navigation-link {"label":"Patterns","url":"https://wordpress.org/patterns/","kind":"custom","isTopLevelLink":true} /-->
Expand All @@ -101,15 +101,15 @@ class="wp-block-search__input"
<!-- wp:navigation-link {"label":"Forums","url":"https://wordpress.org/support/forums/","kind":"custom","isTopLevelLink":true} /-->
<!-- /wp:navigation-link -->
<!-- wp:navigation-link {"label":"News","url":"https://wordpress.org/news","kind":"custom","isTopLevelLink":true,"className":"current-menu-item"} /-->
<!-- wp:navigation-link {"label":"About","url":"https://wordpress.org/about/","kind":"custom","isTopLevelLink":true,"className":"site-header__overflow-item"} /-->
<!-- wp:navigation-link {"label":"Get Involved","url":"https://make.wordpress.org/","kind":"custom","isTopLevelLink":false,"className":"site-header__overflow-item"} -->
<!-- wp:navigation-link {"label":"About","url":"https://wordpress.org/about/","kind":"custom","isTopLevelLink":true,"className":"global-header__overflow-item"} /-->
<!-- wp:navigation-link {"label":"Get Involved","url":"https://make.wordpress.org/","kind":"custom","isTopLevelLink":false,"className":"global-header__overflow-item"} -->
<!-- wp:navigation-link {"label":"Five for the Future","url":"https://wordpress.org/five-for-the-future/","kind":"custom","isTopLevelLink":true} /-->
<!-- /wp:navigation-link -->
<!-- wp:navigation-link {"label":"Showcase","url":"https://wordpress.org/showcase/","kind":"custom","isTopLevelLink":true,"className":"site-header__overflow-item"} /-->
<!-- wp:navigation-link {"label":"Mobile","url":"https://wordpress.org/mobile/","kind":"custom","isTopLevelLink":true,"className":"site-header__overflow-item"} /-->
<!-- wp:navigation-link {"label":"Hosting","url":"https://wordpress.org/hosting/","kind":"custom","isTopLevelLink":true,"className":"site-header__overflow-item"} /-->
<!-- wp:navigation-link {"label":"Openverse","url":"https://wordpress.org/openverse/","kind":"custom","isTopLevelLink":true,"className":"site-header__overflow-item"} /-->
<!-- wp:navigation-link {"label":"...","url":"#","kind":"custom","isTopLevelLink":false,"className":"site-header__overflow-menu"} -->
<!-- wp:navigation-link {"label":"Showcase","url":"https://wordpress.org/showcase/","kind":"custom","isTopLevelLink":true,"className":"global-header__overflow-item"} /-->
<!-- wp:navigation-link {"label":"Mobile","url":"https://wordpress.org/mobile/","kind":"custom","isTopLevelLink":true,"className":"global-header__overflow-item"} /-->
<!-- wp:navigation-link {"label":"Hosting","url":"https://wordpress.org/hosting/","kind":"custom","isTopLevelLink":true,"className":"global-header__overflow-item"} /-->
<!-- wp:navigation-link {"label":"Openverse","url":"https://wordpress.org/openverse/","kind":"custom","isTopLevelLink":true,"className":"global-header__overflow-item"} /-->
<!-- wp:navigation-link {"label":"...","url":"#","kind":"custom","isTopLevelLink":false,"className":"global-header__overflow-menu"} -->
<!-- wp:navigation-link {"label":"About","url":"https://wordpress.org/about/","kind":"custom","isTopLevelLink":true} /-->
<!-- wp:navigation-link {"label":"Get Involved","url":"https://make.wordpress.org/","kind":"custom","isTopLevelLink":true} /-->
<!-- wp:navigation-link {"label":"Five for the Future","url":"https://wordpress.org/five-for-the-future/","kind":"custom","isTopLevelLink":true} /-->
Expand All @@ -118,6 +118,6 @@ class="wp-block-search__input"
<!-- wp:navigation-link {"label":"Hosting","url":"https://wordpress.org/hosting/","kind":"custom","isTopLevelLink":true} /-->
<!-- wp:navigation-link {"label":"Openverse","url":"https://wordpress.org/openverse/","kind":"custom","isTopLevelLink":true} /-->
<!-- /wp:navigation-link -->
<!-- wp:navigation-link {"label":"Get WordPress","url":"https://wordpress.org/download/","kind":"custom","isTopLevelLink":true,"className":"site-header__mobile-get-wordpress site-header__get-wordpress"} /-->
<!-- wp:navigation-link {"label":"Get WordPress","url":"https://wordpress.org/download/","kind":"custom","isTopLevelLink":true,"className":"global-header__mobile-get-wordpress global-header__get-wordpress"} /-->
<!-- /wp:navigation -->
</header> <!-- /wp:group -->
28 changes: 14 additions & 14 deletions mu-plugins/blocks/global-header-footer/postcss/common.pcss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,8 +16,8 @@
/*
* Shared styles
*/
.wp-block-group.site-header,
.wp-block-group.site-footer {
.wp-block-group.global-header,
.wp-block-group.global-footer {
& .wp-block-image {
margin: 0;
}
Expand All @@ -28,15 +28,15 @@
}
}

.wp-block-group.site-header {
.wp-block-group.global-header {
& .wp-block-navigation__responsive-container-open[aria-expanded=true] {
visibility: hidden; /* Not needed when expanded, and behaves unintuitively. */
}
}

.wp-block-group.site-header,
.wp-block-group.site-footer,
.wp-block-group.site-header .wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container,
.wp-block-group.global-header,
.wp-block-group.global-footer,
.wp-block-group.global-header .wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container,
.wp-block-navigation:not(.has-background) .wp-block-navigation__submenu-container {
--active-menu-item-border-height: 4px;

Expand All @@ -48,8 +48,8 @@
}
}

.wp-block-group.site-header .site-header__navigation,
.wp-block-group.site-header .site-header__search {
.wp-block-group.global-header .global-header__navigation,
.wp-block-group.global-header .global-header__search {
& .wp-block-navigation__responsive-container:not(.is-menu-open) {
display: none; /* Gutenberg has the menu hardcoded to open at 600px, but we need it to wait until `--tablet`. */

Expand All @@ -73,11 +73,11 @@
* @link https://github.com/WordPress/gutenberg/issues/34716
* @link https://github.com/WordPress/wporg-news-2021/pull/30
*/
[class*="wp-container-"].site-header,
[class*="wp-container-"].site-footer,
[class*="wp-container-"].site-header > * + *,
[class*="wp-container-"].site-footer > * + *,
.site-header [class*="wp-container-"] > * + *,
.site-footer [class*="wp-container-"] > * + * {
[class*="wp-container-"].global-header,
[class*="wp-container-"].global-footer,
[class*="wp-container-"].global-header > * + *,
[class*="wp-container-"].global-footer > * + *,
.global-header [class*="wp-container-"] > * + *,
.global-footer [class*="wp-container-"] > * + * {
margin-top: initial;
}
4 changes: 2 additions & 2 deletions mu-plugins/blocks/global-header-footer/postcss/footer/footer.pcss
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
.wp-block-group.site-footer {
.wp-block-group.global-footer {
padding: 44px var(--wp--custom--alignment--edge-spacing);

@media (--tablet) {
padding-top: 69px;
padding-bottom: 58px;
}

& > .site-footer__navigation-container {
& > .global-footer__navigation-container {
max-width: 100%;
display: grid;
grid-gap: 20px;
Expand Down
8 changes: 4 additions & 4 deletions mu-plugins/blocks/global-header-footer/postcss/footer/logos.pcss
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
.wp-block-group.site-footer [class*="wp-container-"].site-footer__logos-container {
.wp-block-group.global-footer [class*="wp-container-"].global-footer__logos-container {
position: relative;
display: flex;
flex-wrap: wrap;
Expand All @@ -13,15 +13,15 @@
text-align: left;
}

& .site-footer__wporg-logo-mark {
& .global-footer__wporg-logo-mark {
flex-basis: 65%;

@media (--tablet) {
display: none;
}
}

& .site-footer__wporg-logo-full {
& .global-footer__wporg-logo-full {
display: none;

@media (--tablet) {
Expand All @@ -30,7 +30,7 @@
}
}

& .wp-block-image.site-footer__code_is_poetry {
& .wp-block-image.global-footer__code_is_poetry {
flex-basis: 100%;
margin-top: 9px;
margin-bottom: 0;
Expand Down
4 changes: 2 additions & 2 deletions mu-plugins/blocks/global-header-footer/postcss/footer/social-links.pcss
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
.wp-block-group.site-footer {
.wp-block-group.global-footer {
& .wp-block-social-links,
& .wp-block-social-links .wp-social-link.wp-social-link.wp-social-link,
& .wp-block-social-links .wp-social-link a {
Expand All @@ -9,7 +9,7 @@
}
}

.wp-block-group.site-footer .wp-block-social-links {
.wp-block-group.global-footer .wp-block-social-links {
position: relative;
top: -3px; /* Align with W logo. */
justify-content: flex-end;
Expand Down
8 changes: 4 additions & 4 deletions mu-plugins/blocks/global-header-footer/postcss/header/get-wordpress.pcss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,8 @@
* There are separate buttons for mobile and desktop; see `header.php` for more info.
*/

.wp-block-group.site-header {
& .site-header__get-wordpress {
.wp-block-group.global-header {
& .global-header__get-wordpress {
background-color: var(--wp--preset--color--blue-1) !important; /* Override Gutenberg's !important */
color: var(--wp--preset--color--white);
padding: 10px 19px;
Expand All @@ -13,7 +13,7 @@
}
}

& .site-header__desktop-get-wordpress-container {
& .global-header__desktop-get-wordpress-container {
display: none;
order: 4;
border-left: 1px solid var(--wp--preset--color--darker-grey);
Expand All @@ -24,7 +24,7 @@
}
}

& .wp-block-navigation__container .wp-block-navigation-item.site-header__mobile-get-wordpress {
& .wp-block-navigation__container .wp-block-navigation-item.global-header__mobile-get-wordpress {
padding: var(--wp--style--block-gap) 65px;
margin: 57px var(--wp--style--block-gap) 0 var(--wp--style--block-gap);
width: calc( 100% - var(--wp--style--block-gap) );
Expand Down
10 changes: 5 additions & 5 deletions mu-plugins/blocks/global-header-footer/postcss/header/header.pcss
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
.wp-block-group.site-header {
.wp-block-group.global-header {
display: flex;
align-items: center;
font-size: 21px;
Expand Down Expand Up @@ -27,14 +27,14 @@
border: none;
}

& .site-header__search-container,
& .site-header__menu-container {
& .global-header__search-container,
& .global-header__menu-container {
flex-basis: calc( 25px + ( var(--wp--style--block-gap) * 2 ) );
text-align: center;
}

& .site-header__close-search,
& .site-header__close-menu {
& .global-header__close-search,
& .global-header__close-menu {
display: none;
}
}
Loading

0 comments on commit a7db6ea

Please sign in to comment.