WordPress.org

Make WordPress Core

Changeset 20908


Ignore:
Timestamp:
05/25/2012 06:41:22 PM (8 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:
3 edited

Legend:

Unmodified
Added
Removed
  • trunk/wp-includes/class-wp-customize-manager.php

    r20863 r20908  
    650650            'sanitize_callback' => 'sanitize_hexcolor',
    651651            'theme_supports'    => 'custom-background',
    652             'transport'         => 'postMessage',
    653652        ) );
    654653
     
    717716        ) );
    718717
     718        // If the theme is using the default background callback, we can update
     719        // the background CSS using postMessage.
     720        if ( get_theme_support( 'custom-background', 'wp-head-callback' ) === '_custom_background_cb' ) {
     721            foreach ( array( 'color', 'image', 'position_x', 'repeat', 'attachment' ) as $prop ) {
     722                $this->get_setting( 'background_' . $prop )->transport = 'postMessage';
     723            }
     724        }
     725
    719726        /* Nav Menus */
    720727
  • trunk/wp-includes/js/customize-preview.dev.js

    r20833 r20908  
    6262            return;
    6363
    64         var preview, body;
     64        var preview, bg;
    6565
    6666        preview = new api.Preview( window.location.href );
     
    7676        });
    7777
    78         body = $(document.body);
    79         // Auto update background color by default
    80         api( 'background_color', function( value ) {
    81             value.bind( function( to ) {
    82                 body.css( 'background-color', to ? '#' + to : '' );
     78        /* Custom Backgrounds */
     79        bg = $.map(['color', 'image', 'position_x', 'repeat', 'attachment'], function( prop ) {
     80            return 'background_' + prop;
     81        });
     82
     83        api.when.apply( api, bg ).done( function( color, image, position_x, repeat, attachment ) {
     84            var style = $('#custom-background-css'),
     85                update;
     86
     87            if ( ! style.length )
     88                return;
     89
     90            update = function() {
     91                var css = '';
     92
     93                if ( color() )
     94                    css += 'background-color: #' + color() + ';';
     95
     96                if ( image() ) {
     97                    css += 'background-image: url("' + image() + '");';
     98                    css += 'background-position: top ' + position_x() + ';';
     99                    css += 'background-repeat: ' + repeat() + ';';
     100                    css += 'background-position: top ' + attachment() + ';';
     101                }
     102
     103                style.html( 'body.custom-background { ' + css + ' }' );
     104            };
     105
     106            $.each( arguments, function() {
     107                this.bind( update );
    83108            });
    84109        });
  • trunk/wp-includes/theme.php

    r20901 r20908  
    11311131    }
    11321132?>
    1133 <style type="text/css">
     1133<style type="text/css" id="custom-background-css">
    11341134body.custom-background { <?php echo trim( $style ); ?> }
    11351135</style>
Note: See TracChangeset for help on using the changeset viewer.