Changeset 20908

Timestamp:

05/25/2012 06:41:22 PM (14 years ago)

Author:

koopersmith

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.

Location:

trunk/wp-includes

Files:

• class-wp-customize-manager.php (modified) (2 diffs)
• js/customize-preview.dev.js (modified) (2 diffs)
• theme.php (modified) (1 diff)

trunk/wp-includes/class-wp-customize-manager.php

@@ -650 +650 @@
                         'sanitize_callback' => 'sanitize_hexcolor',
                         'theme_supports'    => 'custom-background',
-                        'transport'         => 'postMessage',
                 ) );
 
@@ -717 +716 @@
                 ) );
 
+                // 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 */
 

trunk/wp-includes/js/customize-preview.dev.js

@@ -62 +62 @@
                         return;
 
-                var preview, body;
+                var preview, bg;
 
                 preview = new api.Preview( window.location.href );
@@ -76 +76 @@
                 });
 
-                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 );
                         });
                 });

trunk/wp-includes/theme.php

@@ -1131 +1131 @@
         }
 ?>
-<style type="text/css">
+<style type="text/css" id="custom-background-css">
 body.custom-background { <?php echo trim( $style ); ?> }
 </style>