Merge pull request #1126 from Automattic/fix/varia-footer-widget-area-location-name

Varia: Add missing output the footer menu.

varia/footer.php

@@ -17,6 +17,24 @@
 
 	<footer id="colophon" class="site-footer responsive-max-width">
 		<?php get_template_part( 'template-parts/footer/footer', 'widgets' ); ?>
+		<?php
+		if ( function_exists( 'the_privacy_policy_link' ) ) {
+			the_privacy_policy_link( '', '<span role="separator" aria-hidden="true"></span>' );
+		}
+		?>
+		<?php if ( has_nav_menu( 'menu-2' ) ) : ?>
+			<nav class="footer-navigation" aria-label="<?php esc_attr_e( 'Footer Menu', 'varia' ); ?>">
+				<?php
+				wp_nav_menu(
+					array(
+						'theme_location' => 'menu-2',
+						'menu_class'     => 'footer-menu',
+						'depth'          => 1,
+					)
+				);
+				?>
+			</nav><!-- .footer-navigation -->
+		<?php endif; ?>
 		<div class="site-info">
 			<?php $blog_info = get_bloginfo( 'name' ); ?>
 			<?php if ( ! empty( $blog_info ) ) : ?>
@@ -28,11 +46,6 @@
 				printf( __( 'proudly powered by %s.', 'varia' ), 'WordPress' );
 				?>
 			</a>
-			<?php
-			if ( function_exists( 'the_privacy_policy_link' ) ) {
-				the_privacy_policy_link( '', '<span role="separator" aria-hidden="true"></span>' );
-			}
-			?>
 		</div><!-- .site-info -->
 	</footer><!-- #colophon -->
 

varia/functions.php

@@ -57,7 +57,7 @@ if ( ! function_exists( 'varia_setup' ) ) :
 		register_nav_menus(
 			array(
 				'menu-1' => __( 'Primary', 'varia' ),
-				'footer' => __( 'Footer Menu', 'varia' ),
+				'menu-2' => __( 'Footer Menu', 'varia' ),
 				'social' => __( 'Social Links Menu', 'varia' ),
 			)
 		);

varia/sass/components/_imports.scss

@@ -14,4 +14,4 @@
 @import "pagination/next-previous";
 @import "comments/comments";
 
-// @import "widgets/widgets";
+@import "widgets/widgets";

varia/sass/components/footer/_footer-branding.scss

@@ -7,6 +7,13 @@
 	font-size: #{map-deep-get($config-footer, "font", "size")};
 	line-height: #{map-deep-get($config-footer, "font", "line-height")};
 
+	@include media(tablet) {
+		order: 1;
+		flex: 1 0 50%;
+		margin-top: 0;
+		margin-bottom: 0;
+	}
+
 	.site-name {
 		font-weight: bold;
 	}

varia/sass/components/footer/_footer-navigation.scss

@@ -2,19 +2,51 @@
 
 	display: inline;
 
+	@include media(tablet) {
+		flex: 1 0 50%;
+		order: 2;
+		margin-top: 0;
+		margin-bottom: 0;
+		text-align: right;
+	}
+
 	& > div {
 		display: inline;
 	}
 
 	.footer-menu {
 
-		display: inline;
+		color: #{map-deep-get($config-footer, "color", "text")};
 		padding-left: 0;
+		margin-left: -#{map-deep-get($config-global, "spacing", "unit")};
+		margin-right: -#{map-deep-get($config-global, "spacing", "unit")};
+
+		@include media(tablet) {
+			display: flex;
+			flex-wrap: wrap;
+			justify-content: flex-end;
+		}
 
 		li {
 			display: inline;
-			margin-right: #{map-deep-get($config-global, "spacing", "unit")}
 		}
-	}
 
-}
+		a {
+			font-family: #{map-deep-get($config-header, "main-nav", "font", "family")};
+			font-size: #{map-deep-get($config-global, "font", "size", "sm")};
+			font-weight: #{map-deep-get($config-header, "main-nav", "font", "weight")};
+			padding: #{map-deep-get($config-header, "main-nav", "link-padding")};
+
+			color: currentColor;
+
+			&:link,
+			&:visited {
+				color: currentColor;
+			}
+
+			&:hover {
+				color: #{map-deep-get($config-footer, "color", "link-hover")};
+			}
+		}
+	}
+}

varia/sass/components/footer/_footer.scss

@@ -1,2 +1,12 @@
+.site-footer {
+
+	@include media(tablet) {
+		align-items: flex-end;
+		display: flex;
+		flex-wrap: wrap;
+		justify-content: space-between;
+	}
+}
+
 @import "footer-branding";
 @import "footer-navigation";

varia/sass/components/widgets/_widgets.scss

@@ -1,81 +1,4 @@
-.widget {
-	margin: 0 0 #{$size__spacing-unit};
-
-	/* Make sure select elements fit in widgets. */
-	select {
-		max-width: 100%;
-	}
-
-	a {
-		color: $color__link;
-
-		&:hover {
-			color: $color__link-hover;
-		}
-	}
-}
-
-.widget_archive,
-.widget_categories,
-.widget_meta,
-.widget_nav_menu,
-.widget_pages,
-.widget_recent_comments,
-.widget_recent_entries,
-.widget_rss {
-
-	ul {
-		padding: 0;
-		list-style: none;
-
-		li {
-			color: $color__text-light;
-			@include font-family( $font__heading );
-			font-size: calc(#{$font__size_base} * #{$font__size-ratio});
-			font-weight: 700;
-			line-height: $font__line-height-heading;
-			margin-top: #{0.5 * $size__spacing-unit};
-			margin-bottom: #{0.5 * $size__spacing-unit};
-		}
-
-		@include nestedSubMenuPadding();
-	}
-}
-
-.widget_tag_cloud {
-
-	.tagcloud {
-		@include font-family( $font__heading );
-		font-weight: 700;
-	}
-}
-
-
-.widget_search {
-
-	.search-field {
-		width: 100%;
-
-		@include media(mobile) {
-			width: auto;
-		}
-	}
-
-	.search-submit {
-		display: block;
-		margin-top: $size__spacing-unit;
-	}
-}
-
-.widget_calendar .calendar_wrap {
-	text-align: center;
-
-	table td,
-	table th {
-		border: none;
-	}
-
-	a {
-		text-decoration: underline;
-	}
+.widget-area {
+	// Ignore flexbox
+	flex: 0 0 100%;
 }

varia/style-rtl.css

@@ -2279,12 +2279,30 @@ table th,
 	vertical-align: middle;
 }
 
+@media only screen and (min-width: 640px) {
+	.site-footer {
+		align-items: flex-end;
+		display: flex;
+		flex-wrap: wrap;
+		justify-content: space-between;
+	}
+}
+
 .site-info {
 	color: #767676;
 	font-family: sans-serif;
 	font-size: 0.83333rem;
 }
 
+@media only screen and (min-width: 640px) {
+	.site-info {
+		order: 1;
+		flex: 1 0 50%;
+		margin-top: 0;
+		margin-bottom: 0;
+	}
+}
+
 .site-info .site-name {
 	font-weight: bold;
 }
@@ -2305,18 +2323,53 @@ table th,
 	display: inline;
 }
 
+@media only screen and (min-width: 640px) {
+	.footer-navigation {
+		flex: 1 0 50%;
+		order: 2;
+		margin-top: 0;
+		margin-bottom: 0;
+		text-align: left;
+	}
+}
+
 .footer-navigation > div {
 	display: inline;
 }
 
 .footer-navigation .footer-menu {
-	display: inline;
+	color: #767676;
 	padding-right: 0;
+	margin-right: -16px;
+	margin-left: -16px;
+}
+
+@media only screen and (min-width: 640px) {
+	.footer-navigation .footer-menu {
+		display: flex;
+		flex-wrap: wrap;
+		justify-content: flex-end;
+	}
 }
 
 .footer-navigation .footer-menu li {
 	display: inline;
-	margin-left: 16px;
+}
+
+.footer-navigation .footer-menu a {
+	font-family: sans-serif;
+	font-size: 0.83333rem;
+	font-weight: bold;
+	padding: 16px;
+	color: currentColor;
+}
+
+.footer-navigation .footer-menu a:link, .footer-navigation .footer-menu a:visited {
+	color: currentColor;
+}
+
+.footer-navigation .footer-menu a:hover {
+	color: indigo;
 }
 
 .entry-title {
@@ -2753,6 +2806,10 @@ table th,
 	font-weight: 600;
 }
 
+.widget-area {
+	flex: 0 0 100%;
+}
+
 /**
  * Site Pages
  * - Page specific styles

varia/style.css

@@ -2284,12 +2284,30 @@ table th,
 	vertical-align: middle;
 }
 
+@media only screen and (min-width: 640px) {
+	.site-footer {
+		align-items: flex-end;
+		display: flex;
+		flex-wrap: wrap;
+		justify-content: space-between;
+	}
+}
+
 .site-info {
 	color: #767676;
 	font-family: sans-serif;
 	font-size: 0.83333rem;
 }
 
+@media only screen and (min-width: 640px) {
+	.site-info {
+		order: 1;
+		flex: 1 0 50%;
+		margin-top: 0;
+		margin-bottom: 0;
+	}
+}
+
 .site-info .site-name {
 	font-weight: bold;
 }
@@ -2310,18 +2328,53 @@ table th,
 	display: inline;
 }
 
+@media only screen and (min-width: 640px) {
+	.footer-navigation {
+		flex: 1 0 50%;
+		order: 2;
+		margin-top: 0;
+		margin-bottom: 0;
+		text-align: right;
+	}
+}
+
 .footer-navigation > div {
 	display: inline;
 }
 
 .footer-navigation .footer-menu {
-	display: inline;
+	color: #767676;
 	padding-left: 0;
+	margin-left: -16px;
+	margin-right: -16px;
+}
+
+@media only screen and (min-width: 640px) {
+	.footer-navigation .footer-menu {
+		display: flex;
+		flex-wrap: wrap;
+		justify-content: flex-end;
+	}
 }
 
 .footer-navigation .footer-menu li {
 	display: inline;
-	margin-right: 16px;
+}
+
+.footer-navigation .footer-menu a {
+	font-family: sans-serif;
+	font-size: 0.83333rem;
+	font-weight: bold;
+	padding: 16px;
+	color: currentColor;
+}
+
+.footer-navigation .footer-menu a:link, .footer-navigation .footer-menu a:visited {
+	color: currentColor;
+}
+
+.footer-navigation .footer-menu a:hover {
+	color: indigo;
 }
 
 .entry-title {
@@ -2758,6 +2811,10 @@ table th,
 	font-weight: 600;
 }
 
+.widget-area {
+	flex: 0 0 100%;
+}
+
 /**
  * Site Pages
  * - Page specific styles