Merge pull request #2782 from Automattic/varia/update-header

Varia/Alves/Hever/Morden align site logo with the menu

alves/sass/_extra-child-theme.scss

@@ -197,6 +197,12 @@ body:not(.fse-enabled) {
 			margin-bottom: 0;
 		}
 
+		&.has-logo:not(.has-title-and-tagline) {
+			grid-template-areas:
+				"site-logo main-navigation"
+				"site-logo social-navigation";
+		}
+
 		.site-logo {
 			grid-area: site-logo;
 			margin-bottom: #{map-deep-get($config-global, "spacing", "unit")};

alves/style-rtl.css

@@ -16,7 +16,7 @@ Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-me
 This theme, like WordPress, is licensed under the GPL.
 Use it to make something cool, have fun, and share what you've learned with others.
 
-Varia is based on Underscores https://underscores.me/, (C) 2012-2019 Automattic, Inc.
+Alves is a child theme of Varia which is based on Underscores https://underscores.me/, (C) 2012-2019 Automattic, Inc.
 Underscores is distributed under the terms of the GNU GPL v2 or later.
 
 Normalizing styles have been helped along thanks to the fine work of
@@ -4145,6 +4145,9 @@ body:not(.fse-enabled) #masthead {
 		margin-top: 0;
 		margin-bottom: 0;
 	}
+	.site-header.has-logo:not(.has-title-and-tagline) {
+		grid-template-areas: "site-logo main-navigation" "site-logo social-navigation";
+	}
 	.site-header .site-logo {
 		grid-area: site-logo;
 		margin-bottom: 16px;

alves/style.css

@@ -16,7 +16,7 @@ Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-me
 This theme, like WordPress, is licensed under the GPL.
 Use it to make something cool, have fun, and share what you've learned with others.
 
-Varia is based on Underscores https://underscores.me/, (C) 2012-2019 Automattic, Inc.
+Alves is a child theme of Varia which is based on Underscores https://underscores.me/, (C) 2012-2019 Automattic, Inc.
 Underscores is distributed under the terms of the GNU GPL v2 or later.
 
 Normalizing styles have been helped along thanks to the fine work of
@@ -4174,6 +4174,9 @@ body:not(.fse-enabled) #masthead {
 		margin-top: 0;
 		margin-bottom: 0;
 	}
+	.site-header.has-logo:not(.has-title-and-tagline) {
+		grid-template-areas: "site-logo main-navigation" "site-logo social-navigation";
+	}
 	.site-header .site-logo {
 		grid-area: site-logo;
 		margin-bottom: 16px;

hever/sass/_extra-child-theme.scss

@@ -82,6 +82,12 @@ body:not(.fse-enabled) {
 			margin-bottom: 0;
 		}
 
+		&.has-logo:not(.has-title-and-tagline) {
+			grid-template-areas:
+				"site-logo main-navigation"
+				"site-logo social-navigation";
+		}
+
 		.site-logo {
 			grid-area: site-logo;
 			margin-bottom: #{map-deep-get($config-global, "spacing", "unit")};

hever/style-rtl.css

@@ -16,7 +16,7 @@ Tags: full-site-editing, one-column, flexible-header, accessibility-ready, custo
 This theme, like WordPress, is licensed under the GPL.
 Use it to make something cool, have fun, and share what you've learned with others.
 
-Hever is based on Underscores https://underscores.me/, (C) 2012-2019 Automattic, Inc.
+Hever is a child theme of Varia which is based on Underscores https://underscores.me/, (C) 2012-2019 Automattic, Inc.
 Underscores is distributed under the terms of the GNU GPL v2 or later.
 
 Normalizing styles have been helped along thanks to the fine work of
@@ -4077,6 +4077,9 @@ body:not(.fse-enabled) #colophon {
 		margin-top: 0;
 		margin-bottom: 0;
 	}
+	.site-header.has-logo:not(.has-title-and-tagline) {
+		grid-template-areas: "site-logo main-navigation" "site-logo social-navigation";
+	}
 	.site-header .site-logo {
 		grid-area: site-logo;
 		margin-bottom: 16px;

hever/style.css

@@ -16,7 +16,7 @@ Tags: full-site-editing, one-column, flexible-header, accessibility-ready, custo
 This theme, like WordPress, is licensed under the GPL.
 Use it to make something cool, have fun, and share what you've learned with others.
 
-Hever is based on Underscores https://underscores.me/, (C) 2012-2019 Automattic, Inc.
+Hever is a child theme of Varia which is based on Underscores https://underscores.me/, (C) 2012-2019 Automattic, Inc.
 Underscores is distributed under the terms of the GNU GPL v2 or later.
 
 Normalizing styles have been helped along thanks to the fine work of
@@ -4106,6 +4106,9 @@ body:not(.fse-enabled) #colophon {
 		margin-top: 0;
 		margin-bottom: 0;
 	}
+	.site-header.has-logo:not(.has-title-and-tagline) {
+		grid-template-areas: "site-logo main-navigation" "site-logo social-navigation";
+	}
 	.site-header .site-logo {
 		grid-area: site-logo;
 		margin-bottom: 16px;

morden/header.php

@@ -10,6 +10,11 @@
  * @subpackage Varia
  * @since 1.0.0
  */
+$has_primary_nav = has_nav_menu( 'menu-1' );
+$header_classes  = 'site-header-wrap responsive-max-width';
+$header_classes .= has_custom_logo() ? ' has-logo' : '';
+$header_classes .= 1 === get_theme_mod( 'header_text', true ) ? ' has-title-and-tagline' : '';
+$header_classes .= $has_primary_nav ? ' has-menu' : '';
 ?><!doctype html>
 <html <?php language_attributes(); ?>>
 <head>
@@ -26,13 +31,13 @@
 		wp_body_open();
 	}
 ?>
-	
+
 <div id="page" class="site">
 	<a class="skip-link screen-reader-text" href="#content"><?php _e( 'Skip to content', 'varia' ); ?></a>
 
 	<?php if ( class_exists( 'A8C\FSE\WP_Template' ) ) : // If the FSE plugin is active, use the Header template for content. ?>
 
-		<header class="fse-template-part fse-header entry-content">
+		<header id="masthead" class="fse-template-part fse-header entry-content">
 			<?php
 				$template = new A8C\FSE\WP_Template();
 				$template->output_template_content( A8C\FSE\WP_Template::HEADER );
@@ -40,15 +45,13 @@
 		</header>
 
 	<?php else : // Otherwise we'll fallback to the default Varia header below. ?>
-
-		<header id="masthead" class="site-header">
-
-			<div class="site-header-wrap">
-
+		<header id="masthead" class="site-header" role="banner">
+			<div class="<?php echo $header_classes; ?>">
 				<?php get_template_part( 'template-parts/header/site', 'branding' ); ?>
 
-				<?php if ( has_nav_menu( 'menu-1' ) ) : ?>
+				<?php if ( $has_primary_nav ) : ?>
 					<nav id="site-navigation" class="main-navigation" aria-label="<?php esc_attr_e( 'Main Navigation', 'varia' ); ?>">
+
 						<input type="checkbox" role="button" aria-haspopup="true" id="toggle" class="hide-visually">
 						<label for="toggle" id="toggle-menu" class="button">
 							<?php _e( 'Menu', 'varia' ); ?>
@@ -57,6 +60,7 @@
 							<span class="hide-visually expanded-text"><?php _e( 'expanded', 'varia' ); ?></span>
 							<span class="hide-visually collapsed-text"><?php _e( 'collapsed', 'varia' ); ?></span>
 						</label>
+
 						<?php
 						wp_nav_menu(
 							array(
@@ -70,7 +74,7 @@
 				<?php endif; ?>
 
 				<?php if ( has_nav_menu( 'social' ) ) : ?>
-					<nav class="social-navigation" aria-label="<?php esc_attr_e( 'Social Links Menu', 'varia' ); ?>">
+					<nav class="social-navigation" role="navigation" aria-label="<?php esc_attr_e( 'Social Links Menu', 'varia' ); ?>">
 						<?php
 						wp_nav_menu(
 							array(
@@ -85,7 +89,7 @@
 					</nav><!-- .social-navigation -->
 				<?php endif; ?>
 
-			</div>
+			</div><!-- .site-header-wrap -->
 
 		</header><!-- #masthead -->
 

morden/sass/_extra-child-theme.scss

@@ -116,6 +116,12 @@ body {
 			margin-bottom: 0;
 		}
 
+		&.has-logo:not(.has-title-and-tagline) {
+			grid-template-areas:
+				"site-logo main-navigation"
+				"site-logo social-navigation";
+		}
+
 		.site-logo {
 			grid-area: site-logo;
 			margin-bottom: #{map-deep-get($config-global, "spacing", "unit")};

morden/style-rtl.css

@@ -16,7 +16,7 @@ Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-me
 This theme, like WordPress, is licensed under the GPL.
 Use it to make something cool, have fun, and share what you've learned with others.
 
-Varia is based on Underscores https://underscores.me/, (C) 2012-2019 Automattic, Inc.
+Morden is a child theme of Varia which is based on Underscores https://underscores.me/, (C) 2012-2019 Automattic, Inc.
 Underscores is distributed under the terms of the GNU GPL v2 or later.
 
 Normalizing styles have been helped along thanks to the fine work of
@@ -4105,6 +4105,9 @@ p:not(.site-title) a:hover {
 		margin-top: 0;
 		margin-bottom: 0;
 	}
+	.site-header-wrap.has-logo:not(.has-title-and-tagline) {
+		grid-template-areas: "site-logo main-navigation" "site-logo social-navigation";
+	}
 	.site-header-wrap .site-logo {
 		grid-area: site-logo;
 		margin-bottom: 16px;

morden/style.css

@@ -16,7 +16,7 @@ Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-me
 This theme, like WordPress, is licensed under the GPL.
 Use it to make something cool, have fun, and share what you've learned with others.
 
-Varia is based on Underscores https://underscores.me/, (C) 2012-2019 Automattic, Inc.
+Morden is a child theme of Varia which is based on Underscores https://underscores.me/, (C) 2012-2019 Automattic, Inc.
 Underscores is distributed under the terms of the GNU GPL v2 or later.
 
 Normalizing styles have been helped along thanks to the fine work of
@@ -4134,6 +4134,9 @@ p:not(.site-title) a:hover {
 		margin-top: 0;
 		margin-bottom: 0;
 	}
+	.site-header-wrap.has-logo:not(.has-title-and-tagline) {
+		grid-template-areas: "site-logo main-navigation" "site-logo social-navigation";
+	}
 	.site-header-wrap .site-logo {
 		grid-area: site-logo;
 		margin-bottom: 16px;

varia/header.php

@@ -10,6 +10,11 @@
  * @subpackage Varia
  * @since 1.0.0
  */
+$has_primary_nav = has_nav_menu( 'menu-1' );
+$header_classes  = 'site-header responsive-max-width';
+$header_classes .= has_custom_logo() ? ' has-logo' : '';
+$header_classes .= 1 === get_theme_mod( 'header_text', true ) ? ' has-title-and-tagline' : '';
+$header_classes .= $has_primary_nav ? ' has-menu' : '';
 ?><!doctype html>
 <html <?php language_attributes(); ?>>
 <head>
@@ -26,7 +31,7 @@
 		wp_body_open();
 	}
 ?>
-	
+
 <div id="page" class="site">
 	<a class="skip-link screen-reader-text" href="#content"><?php _e( 'Skip to content', 'varia' ); ?></a>
 
@@ -40,13 +45,12 @@
 		</header>
 
 	<?php else : // Otherwise we'll fallback to the default Varia header below. ?>
-
-		<header id="masthead" class="site-header responsive-max-width">
-
+		<header id="masthead" class="<?php echo $header_classes; ?>" role="banner">
 			<?php get_template_part( 'template-parts/header/site', 'branding' ); ?>
 
-			<?php if ( has_nav_menu( 'menu-1' ) ) : ?>
+			<?php if ( $has_primary_nav ) : ?>
 				<nav id="site-navigation" class="main-navigation" aria-label="<?php esc_attr_e( 'Main Navigation', 'varia' ); ?>">
+
 					<input type="checkbox" role="button" aria-haspopup="true" id="toggle" class="hide-visually">
 					<label for="toggle" id="toggle-menu" class="button">
 						<?php _e( 'Menu', 'varia' ); ?>
@@ -55,6 +59,7 @@
 						<span class="hide-visually expanded-text"><?php _e( 'expanded', 'varia' ); ?></span>
 						<span class="hide-visually collapsed-text"><?php _e( 'collapsed', 'varia' ); ?></span>
 					</label>
+
 					<?php
 					wp_nav_menu(
 						array(
@@ -68,7 +73,7 @@
 			<?php endif; ?>
 
 			<?php if ( has_nav_menu( 'social' ) ) : ?>
-				<nav class="social-navigation" aria-label="<?php esc_attr_e( 'Social Links Menu', 'varia' ); ?>">
+				<nav class="social-navigation" role="navigation" aria-label="<?php esc_attr_e( 'Social Links Menu', 'varia' ); ?>">
 					<?php
 					wp_nav_menu(
 						array(

varia/inc/wpcom.php

@@ -18,8 +18,8 @@ function varia_wpcom_setup() {
 	// Disable automatically generated color palettes.
 	add_theme_support( 'wpcom-colors', array(
 	        'only-featured-palettes' => true,
-	) );	
-	
+	) );
+
 	// Set theme colors for third party services.
 	if ( ! isset( $themecolors ) ) {
 		$themecolors = array(