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

@@ -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();

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 );
 			});
 		});
 	});

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