Message info
 
To:wp-svn@lists.automattic.com From:m@wordpress.org Subject:[wp-svn] [20908] trunk/wp-includes: Theme Customizer: Improve default background property handling. Date:Fri, 25 May 2012 18:41:22 +0000 (UTC)
 

Revision
20908
Author
koopersmith
Date
2012-05-25 18:41:22 +0000 (Fri, 25 May 2012)

Log Message

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.

Modified Paths

Diff

Modified: trunk/wp-includes/class-wp-customize-manager.php (20907 => 20908)


--- trunk/wp-includes/class-wp-customize-manager.php	2012-05-25 18:29:05 UTC (rev 20907)
+++ trunk/wp-includes/class-wp-customize-manager.php	2012-05-25 18:41:22 UTC (rev 20908)
@@ -649,7 +649,6 @@
 			'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 @@
 			),
 		) );
 
+		// 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();

Modified: trunk/wp-includes/js/customize-preview.dev.js (20907 => 20908)


--- trunk/wp-includes/js/customize-preview.dev.js	2012-05-25 18:29:05 UTC (rev 20907)
+++ trunk/wp-includes/js/customize-preview.dev.js	2012-05-25 18:41:22 UTC (rev 20908)
@@ -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 );
 			});
 		});
 	});

Modified: trunk/wp-includes/theme.php (20907 => 20908)


--- trunk/wp-includes/theme.php	2012-05-25 18:29:05 UTC (rev 20907)
+++ trunk/wp-includes/theme.php	2012-05-25 18:41:22 UTC (rev 20908)
@@ -1130,7 +1130,7 @@
 		$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