From c88445c82d7ab50149dbc630a2c737e847c5493c Mon Sep 17 00:00:00 2001
From: Daryl Koopersmith <koop@git.wordpress.org>
Date: Fri, 25 May 2012 18:41:22 +0000
Subject: [PATCH] Theme Customizer: Improve default background property
 handling. see #20600, #19910.

If the custom background default wp-head-callback (_custom_background_cb) is used, we use postMessage for all custom background properties. Otherwise, we use full refreshes.

When using postMessage, the preview recalculates the custom background CSS block, allowing it to omit CSS values when they are not present and fall back on the original CSS.


git-svn-id: https://develop.svn.wordpress.org/trunk@20908 602fd350-edb4-49c9-b593-d223f7449a82
---
 wp-includes/class-wp-customize-manager.php |  9 +++++-
 wp-includes/js/customize-preview.dev.js    | 37 ++++++++++++++++++----
 wp-includes/theme.php                      |  2 +-
 3 files changed, 40 insertions(+), 8 deletions(-)

diff --git a/wp-includes/class-wp-customize-manager.php b/wp-includes/class-wp-customize-manager.php
index 86319753c1..207e442d7d 100644
--- a/wp-includes/class-wp-customize-manager.php
+++ b/wp-includes/class-wp-customize-manager.php
@@ -649,7 +649,6 @@ final class WP_Customize_Manager {
 			'default'           => get_theme_support( 'custom-background', 'default-color' ),
 			'sanitize_callback' => 'sanitize_hexcolor',
 			'theme_supports'    => 'custom-background',
-			'transport'         => 'postMessage',
 		) );
 
 		$this->add_control( new WP_Customize_Color_Control( $this, 'background_color', array(
@@ -716,6 +715,14 @@ final class WP_Customize_Manager {
 			),
 		) );
 
+		// If the theme is using the default background callback, we can update
+		// the background CSS using postMessage.
+		if ( get_theme_support( 'custom-background', 'wp-head-callback' ) === '_custom_background_cb' ) {
+			foreach ( array( 'color', 'image', 'position_x', 'repeat', 'attachment' ) as $prop ) {
+				$this->get_setting( 'background_' . $prop )->transport = 'postMessage';
+			}
+		}
+
 		/* Nav Menus */
 
 		$locations      = get_registered_nav_menus();
diff --git a/wp-includes/js/customize-preview.dev.js b/wp-includes/js/customize-preview.dev.js
index e6f8452daa..6d2540f90a 100644
--- a/wp-includes/js/customize-preview.dev.js
+++ b/wp-includes/js/customize-preview.dev.js
@@ -61,7 +61,7 @@
 		if ( ! api.settings )
 			return;
 
-		var preview, body;
+		var preview, bg;
 
 		preview = new api.Preview( window.location.href );
 
@@ -75,11 +75,36 @@
 				value.set.apply( value, args );
 		});
 
-		body = $(document.body);
-		// Auto update background color by default
-		api( 'background_color', function( value ) {
-			value.bind( function( to ) {
-				body.css( 'background-color', to ? '#' + to : '' );
+		/* Custom Backgrounds */
+		bg = $.map(['color', 'image', 'position_x', 'repeat', 'attachment'], function( prop ) {
+			return 'background_' + prop;
+		});
+
+		api.when.apply( api, bg ).done( function( color, image, position_x, repeat, attachment ) {
+			var style = $('#custom-background-css'),
+				update;
+
+			if ( ! style.length )
+				return;
+
+			update = function() {
+				var css = '';
+
+				if ( color() )
+					css += 'background-color: #' + color() + ';';
+
+				if ( image() ) {
+					css += 'background-image: url("' + image() + '");';
+					css += 'background-position: top ' + position_x() + ';';
+					css += 'background-repeat: ' + repeat() + ';';
+					css += 'background-position: top ' + attachment() + ';';
+				}
+
+				style.html( 'body.custom-background { ' + css + ' }' );
+			};
+
+			$.each( arguments, function() {
+				this.bind( update );
 			});
 		});
 	});
diff --git a/wp-includes/theme.php b/wp-includes/theme.php
index 8ca4290781..eae3f4e207 100644
--- a/wp-includes/theme.php
+++ b/wp-includes/theme.php
@@ -1130,7 +1130,7 @@ function _custom_background_cb() {
 		$style .= $image . $repeat . $position . $attachment;
 	}
 ?>
-<style type="text/css">
+<style type="text/css" id="custom-background-css">
 body.custom-background { <?php echo trim( $style ); ?> }
 </style>
 <?php