From 5fd3eb12e1d637c82b866a4dce9c9ca7dcda1f48 Mon Sep 17 00:00:00 2001
From: Weston Ruter <weston@xwp.co>
Date: Sun, 11 Feb 2018 21:35:08 -0800
Subject: [PATCH] Allow header text and header nav background to be edited in
 customizer

---
 inc/custom-header.php |  4 ++--
 inc/customizer.php    | 30 ++++++++++++++++++++++++++++--
 js/customizer.js      | 25 ++++++++++++++++++++-----
 3 files changed, 50 insertions(+), 9 deletions(-)

diff --git a/inc/custom-header.php b/inc/custom-header.php
index ea7e993..08207a2 100644
--- a/inc/custom-header.php
+++ b/inc/custom-header.php
@@ -59,7 +59,7 @@ function ampconf_header_style() {
 		if ( ! display_header_text() ) :
 		?>
 			.site-title,
-			.site-description {
+			.site-header__description {
 				position: absolute;
 				clip: rect(1px, 1px, 1px, 1px);
 			}
@@ -68,7 +68,7 @@ function ampconf_header_style() {
 			else :
 		?>
 			.site-title a,
-			.site-description {
+			.site-header__description {
 				color: #<?php echo esc_attr( $header_text_color ); ?>;
 			}
 		<?php endif; ?>
diff --git a/inc/customizer.php b/inc/customizer.php
index 8a64d96..b036831 100644
--- a/inc/customizer.php
+++ b/inc/customizer.php
@@ -18,20 +18,46 @@ function ampconf_customize_register( $wp_customize ) {
 	if ( isset( $wp_customize->selective_refresh ) ) {
 		$wp_customize->selective_refresh->add_partial(
 			'blogname', array(
-				'selector'        => '.site-title a',
+				'selector'        => '.site-title a', // @todo .site-title is invalid.
 				'render_callback' => 'ampconf_customize_partial_blogname',
 			)
 		);
 		$wp_customize->selective_refresh->add_partial(
 			'blogdescription', array(
-				'selector'        => '.site-description',
+				'selector'        => '.site-header__description',
 				'render_callback' => 'ampconf_customize_partial_blogdescription',
 			)
 		);
 	}
+
+	$wp_customize->add_setting( 'header_nav_background_color', array(
+		'transport'         => 'postMessage',
+		'sanitize_callback' => 'sanitize_hex_color',
+		'default'           => '#000000',
+	) );
+
+	$wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'header_nav_background_color', array(
+		'label'   => __( 'Header Nav Background Color', 'ampconf' ),
+		'section' => 'colors',
+	) ) );
 }
 add_action( 'customize_register', 'ampconf_customize_register' );
 
+/**
+ * Display custom color CSS.
+ */
+function ampconf_custom_colors() {
+	?>
+	<style type="text/css">
+		.site-header__nav {
+			background-color: <?php echo esc_html( get_theme_mod( 'header_nav_background_color', '#000000' ) ); ?>;
+			box-shadow: 30vw 0 0 <?php echo esc_html( get_theme_mod( 'header_nav_background_color', '#000000' ) ); ?>, -30vw 0 0 <?php echo esc_html( get_theme_mod( 'header_nav_background_color', '#000000' ) ); ?>;
+		}
+	</style>
+	<?php
+}
+add_action( 'wp_head', 'ampconf_custom_colors', 20 );
+
 /**
  * Render the site title for the selective refresh partial.
  *
diff --git a/js/customizer.js b/js/customizer.js
index d7c4b57..742b4fd 100644
--- a/js/customizer.js
+++ b/js/customizer.js
@@ -12,12 +12,27 @@
 	// Site title and description.
 	wp.customize( 'blogname', function( value ) {
 		value.bind( function( to ) {
-			$( '.site-title a' ).text( to );
+			$( '.site-title a' ).text( to ); // @todo .site-title is invalid.
 		});
 	});
 	wp.customize( 'blogdescription', function( value ) {
 		value.bind( function( to ) {
-			$( '.site-description' ).text( to );
+			$( '.site-header__description' ).text( to );
+		});
+	});
+
+	wp.customize( 'blogdescription', function( value ) {
+		value.bind( function( to ) {
+			$( '.site-header__description' ).text( to );
+		});
+	});
+
+	wp.customize( 'header_nav_background_color', function( value ) {
+		value.bind( function( to ) {
+			$( '.site-header__nav' ).css({
+				'background-color': to,
+				'box-shadow': '30vw 0 0 ' + to + ', -30vw 0 0 ' + to
+			});
 		});
 	});
 
@@ -25,16 +40,16 @@
 	wp.customize( 'header_textcolor', function( value ) {
 		value.bind( function( to ) {
 			if ( 'blank' === to ) {
-				$( '.site-title, .site-description' ).css({
+				$( '.site-title, .site-header__description' ).css({ // @todo .site-title is invalid.
 					'clip': 'rect(1px, 1px, 1px, 1px)',
 					'position': 'absolute'
 				});
 			} else {
-				$( '.site-title, .site-description' ).css({
+				$( '.site-title, .site-header__description' ).css({ // @todo .site-title is invalid.
 					'clip': 'auto',
 					'position': 'relative'
 				});
-				$( '.site-title a, .site-description' ).css({
+				$( '.site-title a, .site-header__description' ).css({ // @todo .site-title is invalid.
 					'color': to
 				});
 			}