From a5ee470df7d3aa04d981ffffb63220db3fa8bc06 Mon Sep 17 00:00:00 2001
From: koopersmith <koopersmith@1a063a9b-81f0-0310-95a4-ce76da25c4cd>
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: http://core.svn.wordpress.org/trunk@20908 1a063a9b-81f0-0310-95a4-ce76da25c4cd
---
 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