Skip to content

Commit

Permalink
Header/Footer: Refine header styles.
Browse files Browse the repository at this point in the history 
See WordPress/wporg-news-2021#6
  • Loading branch information
@iandunn
iandunn committed Sep 24, 2021
1 parent 5421e91 commit 827a9c9
Show file tree
Hide file tree
Showing 11 changed files with 355 additions and 89 deletions.
2 changes: 1 addition & 1 deletion mu-plugins/blocks/global-header-footer/footer.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@
<!-- 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-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} -->
Expand Down
141 changes: 100 additions & 41 deletions mu-plugins/blocks/global-header-footer/header.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,44 +13,103 @@

?>

<!-- wp:group {"tagName":"header","className":"site-header","layout":{"inherit":true}} -->
<header class="wp-block-group site-header"><!-- wp:image {"width":160,"height":24,"className":"site-header__wporg-logo"} -->
<figure class="wp-block-image is-resized site-header__wporg-logo"><img src="https://s.w.org/style/images/wporg-logo.svg?3" alt="" width="160" height="24"/></figure>
<!-- /wp:image -->

<!-- wp:navigation {"orientation":"horizontal","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} /-->

<!-- wp:navigation-link {"label":"OpenVerse","url":"https://wordpress.org/openverse/","kind":"custom","isTopLevelLink":true} /-->

<!-- wp:navigation-link {"label":"Learn","url":"https://learn.wordpress.org/","kind":"custom","isTopLevelLink":true} /-->

<!-- wp:navigation-link {"label":"Support","url":"https://wordpress.org/support/","kind":"custom","isTopLevelLink":true} /-->

<!-- wp:navigation-link {"label":"News","url":"https://wordpress.org/news","kind":"custom","isTopLevelLink":true} /-->

<!-- 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":"Showcase","url":"https://wordpress.org/showcase/","kind":"custom","isTopLevelLink":true} /-->

<!-- wp:navigation-link {"label":"Mobile","url":"https://wordpress.org/mobile/","kind":"custom","isTopLevelLink":true} /-->

<!-- wp:navigation-link {"label":"Hosting","url":"https://wordpress.org/hosting/","kind":"custom","isTopLevelLink":true} /-->
<!-- /wp:navigation -->

<!-- wp:buttons {"className":"site-header__action-buttons"} -->
<div class="wp-block-buttons site-header__action-buttons"><!-- wp:button {"className":"site-header__search"} -->
<div class="wp-block-button site-header__search"><a class="wp-block-button__link" href="https://wordpress.org/search/">Search</a></div>
<!-- /wp:button -->

<!-- wp:button {"className":"site-header__get_wordpress"} -->
<div class="wp-block-button site-header__get_wordpress"><a class="wp-block-button__link" href="https://wordpress.org/download/">Get WordPress</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></header>
<!-- /wp:group -->
<!-- wp:group {"tagName":"header","className":"site-header"} -->
<header class="wp-block-group site-header">
<!-- wp:image {"width":27,"height":27,"className":"site-header__wporg-logo-mark"} -->
<figure class="wp-block-image is-resized site-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">
<a href="https://wordpress.org/">
<img src="https://wordpress.org/style/images/wporg-logo.svg?3" alt="" width="160" height="24" />
</a>
</figure>
<!-- /wp:image -->

<!-- wp:group {"tagName":"div","className":"site-header__search-container"} -->
<div class="wp-block-group site-header__search-container">
<!-- wp:html -->
<a class="site-header__open-search" href="https://wordpress.org/search/">
<span class="screen-reader-text">Open Search</span>

<img
src="<?php echo esc_url( plugins_url( '/images/search.svg', __FILE__ ) ); ?>"
alt=""
width="18"
height="17"
/>
</a>

<button class="site-header__close-search">
<span class="screen-reader-text">Close Search</span>

<img
src="<?php echo esc_url( plugins_url( '/images/close.svg', __FILE__ ) ); ?>"
alt=""
width="21"
height="21"
/>
</button>
<!-- /wp:html -->

<!-- wp:search {"className":"site-header__search-form","label":"Search","placeholder":"Search WordPress.org...","buttonText":"Submit search"} /-->
</div> <!-- /wp:group -->

<!-- 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>
</div> <!-- /wp:group -->

<!-- wp:group {"className":"site-header__menu-container"} -->
<div class="site-header__menu-container">
<!-- wp:html -->
<button class="site-header__open-menu">
<span class="screen-reader-text">Open Navigation Menu</span>

<img
src="<?php echo esc_url( plugins_url( '/images/mobile-menu.svg', __FILE__ ) ); ?>"
alt=""
width="18"
height="15"
/>
</button>

<button class="site-header__close-menu">
<span class="screen-reader-text">Close Menu</span>

<img
src="<?php echo esc_url( plugins_url( '/images/close.svg', __FILE__ ) ); ?>"
alt=""
width="21"
height="21"
/>
</button>
<!-- /wp:html -->

<!-- wp:navigation {"orientation":"horizontal","className":"site-header__navigation"} -->
<!-- wp:navigation-link {"label":"Add-ons","url":"#","kind":"custom","isTopLevelLink":false} -->
<!-- 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":"Blocks","url":"https://wordpress.org/plugins/browse/blocks/","kind":"custom","isTopLevelLink":true} /-->
<!-- wp:navigation-link {"label":"Patterns","url":"https://wordpress.org/patterns/","kind":"custom","isTopLevelLink":true} /-->
<!-- wp:navigation-link {"label":"Images","url":"https://wordpress.org/openverse/","kind":"custom","isTopLevelLink":true} /-->
<!-- /wp:navigation-link -->
<!-- wp:navigation-link {"label":"Learn","url":"https://learn.wordpress.org/","kind":"custom","isTopLevelLink":true} /-->
<!-- wp:navigation-link {"label":"Support","url":"https://wordpress.org/support/","kind":"custom","isTopLevelLink":true} /-->
<!-- 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} /-->
<!-- wp:navigation-link {"label":"Get Involved","url":"https://make.wordpress.org/","kind":"custom","isTopLevelLink":true} /-->
<!-- wp:navigation-link {"label":"Showcase","url":"https://wordpress.org/showcase/","kind":"custom","isTopLevelLink":true} /-->
<!-- wp:navigation-link {"label":"Mobile","url":"https://wordpress.org/mobile/","kind":"custom","isTopLevelLink":true} /-->
<!-- wp:navigation-link {"label":"Hosting","url":"https://wordpress.org/hosting/","kind":"custom","isTopLevelLink":true} /-->
<!-- 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 -->
</div> <!-- /wp:group -->
</header> <!-- /wp:group -->
4 changes: 4 additions & 0 deletions mu-plugins/blocks/global-header-footer/images/close.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
5 changes: 5 additions & 0 deletions mu-plugins/blocks/global-header-footer/images/mobile-menu.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 4 additions & 0 deletions mu-plugins/blocks/global-header-footer/images/search.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
33 changes: 15 additions & 18 deletions mu-plugins/blocks/global-header-footer/postcss/common.pcss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,25 +7,30 @@

/*
* Variables, mixins, etc
*
* Breakpoints should be synced with `wporg-parent-2021` (or `wporg-news-2021` until parent exists).
*/
@custom-media --tablet (min-width: 876px);
/* Breakpoints should be synced with `wporg-parent-2021` (or `wporg-news-2021` until parent exists). */
@custom-media --tablet (min-width: 890px);
@custom-media --desktop (min-width: 1152px);
@custom-media --desktop-wide (min-width: 1320px);

:root {
--site-footer-nav-block-margin-bottom: 25px;
}
/*
* Shared styles
*/

.wp-block-group.site-header,
.wp-block-group.site-footer {
--active-menu-item-border-height: 4px;

background-color: var(--wp--preset--color--dark-grey);
}

/*
* Shared styles
*/
& .wp-block-image {
margin: 0;
}

& .wp-block-navigation-item {
color: var(--wp--preset--color--white);
}
}

/*
* Override Gutenberg's block gap, because it doesn't make sense for a header/footer.
Expand All @@ -41,11 +46,3 @@
.site-footer [class*="wp-container-"] > * + * {
margin-top: initial;
}

.wp-block-navigation.wp-block-navigation a {
color: var(--wp--preset--color--white);
}

.site-header__wporg-logo-full, .site-footer__wporg-logo-full {
display: none;
}
47 changes: 26 additions & 21 deletions mu-plugins/blocks/global-header-footer/postcss/footer.pcss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,36 +23,52 @@
}

& [class*="wp-container-"].site-footer__logos-container {
position: relative;
display: flex;
flex-wrap: wrap;
margin-top: calc(66px - var(--site-footer-nav-block-margin-bottom));
margin-top: calc(66px - var(--wp--style--block-gap));

@media (--tablet) {
justify-content: space-between;
flex-wrap: nowrap;
}
}

& .wp-block-image {
text-align: left;
}

& .site-footer__wporg-logo-mark {
flex-basis: 65%;
margin-bottom: 0;

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

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

@media (--tablet) {
display: inline;
flex-basis: 33%;
}
}

& .wp-block-social-links {
position: relative;
top: -3px; /* Align with W logo. */
justify-content: flex-end;
flex-basis: 35%;
column-gap: 0;
min-width: 100px;

@media (--tablet) {
top: -11px; /* Align with W logo. */
justify-content: flex-end;
flex-basis: 33%;
order: 3;
}
}

& .wp-block-social-links,
Expand All @@ -64,35 +80,24 @@
padding-bottom: 0;
}

& .wp-block-social-links .wp-social-link:last-child {
margin-right: 0;
}

& .wp-block-social-links .wp-social-link svg {
width: 29px;
height: 29px;
fill: var(--wp--preset--color--white);
}

& .wp-block-social-links {
@media (--tablet) {
justify-content: flex-end;
flex-basis: 33%;
order: 3;
}
}

& .wp-block-image.site-footer__code_is_poetry {
flex-basis: 100%;
margin-top: 9px;
margin-bottom: 0;

@media (--tablet) {
flex-basis: 33%;
order: 2;
text-align: right; /* Optical illusion to make this image look more centered. */
position: absolute;
top: 0;
left: calc( 50% - ( 188px / 2 ) ); /* Must match width of the image. */
width: 188px;
height: 13px;
margin-top: 3px;
}
}

& .wp-block-image {
text-align: left;
}
}
Loading

0 comments on commit 827a9c9

Please sign in to comment.