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