Ticket #29988: 29988.patch

src/wp-admin/js/customize-controls.js

@@ -170 +170 @@
                                         control.setting.set( false );
                                 }
                         });
+
+                        this.setting.bind( function ( value ) {
+                                picker.val( value );
+                                picker.wpColorPicker( 'color', value );
+                        });
                 }
         });
 

src/wp-content/themes/twentyfifteen/functions.php

@@ -87 +87 @@
                 'aside', 'image', 'video', 'quote', 'link', 'gallery', 'status', 'audio', 'chat'
         ) );
 
-        $color_scheme  = twentyfifteen_get_color_scheme();
-        $default_color = trim( $color_scheme[0], '#' );
-
-        // Setup the WordPress core custom background feature.
-        add_theme_support( 'custom-background', apply_filters( 'twentyfifteen_custom_background_args', array(
-                'default-color'      => $default_color,
-                'default-attachment' => 'fixed',
-        ) ) );
-
         /*
          * This theme styles the visual editor to resemble the theme style,
          * specifically font, colors, icons, and column width.
@@ -106 +97 @@
 add_action( 'after_setup_theme', 'twentyfifteen_setup' );
 
 /**
+ * Core adds the wp-head-callbacks for the custom header and background on the
+ * wp_head action at the default priority of 10. At the same time, Core by default
+ * adds wp_print_styles to the wp_head action at the priority of 8. For this reason
+ * the inline styles added in the head callback fail to get added in time to be
+ * output with any styles output by wp_print_styles. This is a workaround for that.
+ * Also, since we're using the wp_add_inline_styles() for the sake of faster
+ * style updates in the Customizer, we can add the callbacks to wp_enqueue_scripts
+ * instead of wp_head.
+ *
+ * @see _custom_header_background_just_in_time().
+ */
+function twentyfifteen_custom_header_background_just_in_even_more_time() {
+        $print_styles_priority = has_filter( 'wp_head', 'wp_print_styles' );
+
+        if ( current_theme_supports( 'custom-header' ) ) {
+                $args = get_theme_support( 'custom-header' );
+                $callback = $args[0]['wp-head-callback'];
+                if ( $callback ) {
+                        remove_action( 'wp_head', $callback, 10 );
+                        add_action( 'wp_enqueue_scripts', $callback, 11 );
+                }
+        }
+
+        if ( current_theme_supports( 'custom-background' ) ) {
+                $args = get_theme_support( 'custom-background' );
+                $callback = $args[0]['wp-head-callback'];
+                if ( $callback ) {
+                        remove_action( 'wp_head', $callback, 10 );
+                        add_action( 'wp_enqueue_scripts', $callback, 11 );
+                }
+        }
+}
+add_action( 'wp_loaded', 'twentyfifteen_custom_header_background_just_in_even_more_time', 11 );
+
+/**
  * Register widget area.
  *
  * @since Twenty Fifteen 1.0
@@ -318 +344 @@
 require get_template_directory() . '/inc/custom-header.php';
 
 /**
+ * Implement the Custom Background feature.
+ *
+ * @since Twenty Fifteen 1.0
+ */
+require get_template_directory() . '/inc/custom-background.php';
+
+/**
  * Custom template tags for this theme.
  *
  * @since Twenty Fifteen 1.0

new file src/wp-content/themes/twentyfifteen/inc/custom-background.php

@@ +1 @@
+<?php
+/**
+ * Implement Custom Background functionality for Twenty Fifteen.
+ *
+ * @package WordPress
+ * @subpackage Twenty_Fifteen
+ * @since Twenty Fifteen 1.0
+ */
+
+/**
+ * Set up the WordPress core custom header feature.
+ *
+ * @uses twentyfifteen_background_style()
+ */
+function twentyfifteen_custom_background_setup() {
+        $color_scheme  = twentyfifteen_get_color_scheme();
+        $default_color = trim( $color_scheme[0], '#' );
+
+        // Setup the WordPress core custom background feature.
+        add_theme_support( 'custom-background', apply_filters( 'twentyfifteen_custom_background_args', array(
+                'default-color'      => $default_color,
+                'default-attachment' => 'fixed',
+                'wp-head-callback'   => 'twentyfifteen_background_style',
+        ) ) );
+}
+add_action( 'after_setup_theme', 'twentyfifteen_custom_background_setup' );
+
+
+if ( ! function_exists( 'twentyfifteen_background_style' ) ) :
+        /**
+         * Styles the header image and text displayed on the blog.
+         *
+         * @since Twenty Fifteen 1.0
+         * @see twentyfifteen_custom_background_setup().
+         * @see _custom_background_cb()
+         */
+        function twentyfifteen_background_style() {
+
+                // $background is the saved custom image, or the default image.
+                $background = set_url_scheme( get_background_image() );
+
+                // $color is the saved custom color.
+                // A default has to be specified in style.css. It will not be printed here.
+                $color = get_background_color();
+
+                if ( $color === get_theme_support( 'custom-background', 'default-color' ) ) {
+                        $color = false;
+                }
+
+                if ( ! $background && ! $color ) {
+                        return;
+                }
+
+                $style = $color ? "background-color: #$color;" : '';
+
+                if ( $background ) {
+                        $image = " background-image: url('$background');";
+
+                        $repeat = get_theme_mod( 'background_repeat', get_theme_support( 'custom-background', 'default-repeat' ) );
+                        if ( ! in_array( $repeat, array( 'no-repeat', 'repeat-x', 'repeat-y', 'repeat' ) ) ) {
+                                $repeat = 'repeat';
+                        }
+                        $repeat = " background-repeat: $repeat;";
+
+                        $position = get_theme_mod( 'background_position_x', get_theme_support( 'custom-background', 'default-position-x' ) );
+                        if ( ! in_array( $position, array( 'center', 'right', 'left' ) ) ) {
+                                $position = 'left';
+                        }
+                        $position = " background-position: top $position;";
+
+                        $attachment = get_theme_mod( 'background_attachment', get_theme_support( 'custom-background', 'default-attachment' ) );
+                        if ( ! in_array( $attachment, array( 'fixed', 'scroll' ) ) ) {
+                                $attachment = 'scroll';
+                        }
+                        $attachment = " background-attachment: $attachment;";
+
+                        $style .= $image . $repeat . $position . $attachment;
+                }
+
+                if ( $style ) {
+                        $sheet = sprintf( 'body.custom-background { %s } ', trim( $style ) );
+                        wp_add_inline_style( 'twentyfifteen-style', $sheet );
+                }
+
+        }
+endif; // twentyfifteen_background_style

src/wp-content/themes/twentyfifteen/inc/custom-header.php

@@ -86 +86 @@
                 return;
         }
 
-        // If we get this far, we have custom styles. Let's do this.
-        ?>
-        <style type="text/css" id="twentyfifteen-header-css">
-        <?php
-                if ( ! empty( $header_image ) ) :
-        ?>
-                .site-header {
-                        background: url(<?php header_image(); ?>) no-repeat 50% 50%;
-                        -webkit-background-size: cover;
-                        -moz-background-size:    cover;
-                        -o-background-size:      cover;
-                        background-size:         cover;
-                }
+        $css = '';
 
-                @media screen and (min-width: 59.6875em) {
-                        body:before {
-                                background: url(<?php header_image(); ?>) no-repeat 100% 50%;
+        if ( ! empty( $header_image ) ) {
+                $css .= sprintf(
+                        '
+                        /* Header image */
+                        .site-header {
+                                background: url( %1$s ) no-repeat 50%% 50%%;
                                 -webkit-background-size: cover;
                                 -moz-background-size:    cover;
                                 -o-background-size:      cover;
                                 background-size:         cover;
-                                border-right: 0;
                         }
 
-                        .site-header {
-                                background: transparent;
+                        @media screen and (min-width: 59.6875em) {
+                                body:before {
+                                        background: url( %1$s ) no-repeat 100%% 50%%;
+                                        -webkit-background-size: cover;
+                                        -moz-background-size:    cover;
+                                        -o-background-size:      cover;
+                                        background-size:         cover;
+                                        border-right: 0;
+                                }
+
+                                .site-header {
+                                        background: transparent;
+                                }
                         }
-                }
-        <?php
-                endif;
-
-                // Has the text been hidden?
-                if ( ! display_header_text() ) :
-        ?>
-                .site-title,
-                .site-description {
-                        clip: rect(1px, 1px, 1px, 1px);
-                        position: absolute;
-                }
-        <?php
-                // If the user has set a custom color for the text use that
-                elseif ( $text_color != get_theme_support( 'custom-header', 'default-text-color' ) ) :
-        ?>
-                .site-title a,
-                .site-title a:hover,
-                .site-title a:focus,
-                .site-description {
-                        color: #<?php echo esc_attr( $text_color ); ?>;
-                }
-        <?php endif; ?>
-        </style>
-        <?php
+                        ',
+                        esc_url( $header_image )
+                );
+        }
+
+        if ( ! display_header_text() ) {
+                $css .= '
+                        /* Hide display header text */
+                        .site-title,
+                        .site-description {
+                                clip: rect(1px, 1px, 1px, 1px);
+                                position: absolute;
+                        }
+                ';
+        }
+
+        if ( $text_color != get_theme_support( 'custom-header', 'default-text-color' ) ) {
+                $css .= sprintf(
+                        '
+                        /* Header text color */
+                        .site-title a,
+                        .site-title a:hover,
+                        .site-title a:focus,
+                        .site-description {
+                                color: %1$s;
+                        }
+                        ',
+                        sanitize_hex_color( '#' . $text_color )
+                );
+        }
+
+        if ( $css ) {
+                wp_add_inline_style( 'twentyfifteen-style', $css );
+        }
+
 }
 endif; // twentyfifteen_header_style
 

src/wp-content/themes/twentyfifteen/inc/customizer.php

@@ -8 +8 @@
  */
 
 /**
+ * Get the settings which should be postMessage and which should trigger a
+ * refresh of the CSS via Ajax.
+ *
+ * @since Twenty Fifteen 1.0
+ *
+ * @return array
+ */
+function twentyfifteen_get_inline_style_settings() {
+        return array(
+                'header_image',
+                'header_image_data',
+                'header_textcolor',
+                'color_scheme',
+                'header_background_color',
+                'sidebar_textcolor',
+                'background_color',
+                'background_attachment',
+                'background_repeat',
+                'background_position_x',
+                'background_image',
+        );
+}
+
+/**
  * Add postMessage support for site title and description for the Customizer.
  *
  * @since Twenty Fifteen 1.0
@@ -17 +41 @@
 function twentyfifteen_customize_register( $wp_customize ) {
         $color_scheme = twentyfifteen_get_color_scheme();
 
-        $wp_customize->get_setting( 'blogname' )->transport         = 'postMessage';
-        $wp_customize->get_setting( 'blogdescription' )->transport  = 'postMessage';
-        $wp_customize->get_setting( 'background_color' )->transport = 'refresh';
-
         // Add color scheme setting and control.
         $wp_customize->add_setting( 'color_scheme', array(
                 'default'           => 'default',
@@ -55 +75 @@
                 'label'   => esc_html__( 'Header & Sidebar Background Color', 'twentyfifteen' ),
                 'section' => 'colors',
         ) ) );
+
+        $post_message_settings = array_merge(
+                array(
+                        'blogname',
+                        'blogdescription',
+                ),
+                twentyfifteen_get_inline_style_settings()
+        );
+
+        foreach ( $post_message_settings as $setting ) {
+                $wp_customize->get_setting( $setting )->transport = 'postMessage';
+        }
 }
 add_action( 'customize_register', 'twentyfifteen_customize_register', 11 );
 
@@ -650 +682 @@
 add_action( 'wp_enqueue_scripts', 'twentyfifteen_color_scheme_css' );
 
 /**
+ * Return the CSS via Ajax for the Customizer preview so that updates to the
+ * settings needn't require a full page refresh when a new color scheme is
+ * selected.
+ *
+ * @since Twenty Fifteen 1.0
+ */
+function twentyfifteen_ajax_inline_styles() {
+        /**
+         * @var WP_Styles $wp_styles
+         * @var WP_Customize_Manager $wp_customize
+         */
+        global $wp_styles, $wp_customize;
+
+        if ( empty( $wp_customize ) ) {
+                wp_send_json_error( 'customizer_required' );
+        }
+
+        $nonce_tick = check_ajax_referer( 'twentyfifteen_inline_styles' , 'nonce', false );
+        if ( ! $nonce_tick ) {
+                wp_send_json_error( 'bad_nonce' );
+        }
+
+        foreach ( $wp_customize->settings() as $setting ) {
+                if ( $setting->check_capabilities() ) {
+                        $setting->preview();
+                }
+        }
+
+        wp_enqueue_scripts();
+
+        $inline_styles = array();
+        foreach ( $wp_styles->queue as $handle ) {
+                $data = $wp_styles->get_data( $handle, 'after' );
+                if ( $data ) {
+                        $inline_styles[ $handle ] = implode( "\n", $data );
+                }
+        }
+
+        $data = array(
+                'inlineStyles' => $inline_styles,
+                'theme' => get_stylesheet(),
+        );
+        if ( 2 === $nonce_tick ) {
+                $data['nonce'] = wp_create_nonce( 'twentyfifteen_inline_styles' );
+        }
+
+        wp_send_json_success( $data );
+}
+add_action( 'wp_ajax_twentyfifteen_inline_styles', 'twentyfifteen_ajax_inline_styles' );
+
+/**
  * Binds JS handlers to make Customizer preview reload changes asynchronously.
  *
  * @since Twenty Fifteen 1.0
  */
 function twentyfifteen_customize_preview_js() {
-        wp_enqueue_script( 'twentyfifteen-customizer', get_template_directory_uri() . '/js/customizer.js', array( 'customize-preview' ), '20141005', true );
+        global $wp_scripts;
+
+        wp_enqueue_script( 'twentyfifteen-customizer', get_template_directory_uri() . '/js/customizer.js', array( 'customize-preview', 'wp-util', 'underscore' ), '20141005', true );
+
+        $exports = array(
+                'inlineStyleSettings' => twentyfifteen_get_inline_style_settings(),
+                'nonce' => wp_create_nonce( 'twentyfifteen_inline_styles' ),
+        );
+
+        /**
+         * @var WP_Scripts $wp_scripts
+         */
+        $wp_scripts->add_data(
+                'twentyfifteen-customizer',
+                'data',
+                sprintf( 'var _twentyfifteenCustomizerExports = %s;', json_encode( $exports ) )
+        );
 }
-add_action( 'customize_preview_init', 'twentyfifteen_customize_preview_js' );
- No newline at end of file
+add_action( 'customize_preview_init', 'twentyfifteen_customize_preview_js' );

src/wp-content/themes/twentyfifteen/js/color-scheme-control.js

@@ -5 +5 @@
  * Adds listener to Color Scheme control to update other color controls with new values/defaults
  */
 
-( function( wp ) {
-        wp.customize.controlConstructor.colorScheme = wp.customize.Control.extend( {
+( function( customize ) {
+        customize.controlConstructor.colorScheme = customize.Control.extend( {
                 ready: function() {
-                        var parentSection    = this.container.closest( '.control-section' ),
-                                headerTextColor  = parentSection.find( '#customize-control-header_textcolor .color-picker-hex' ),
-                                backgroundColor  = parentSection.find( '#customize-control-background_color .color-picker-hex' ),
-                                sidebarColor     = parentSection.find( '#customize-control-header_background_color .color-picker-hex' ),
-                                sidebarTextColor = parentSection.find( '#customize-control-sidebar_textcolor .color-picker-hex' );
 
                         this.setting.bind( 'change', function( value ) {
                                 // if Header Text is not hidden, update value
-                                if ( 'blank' !== wp.customize( 'header_textcolor' ).get() ) {
-                                        wp.customize( 'header_textcolor' ).set( colorScheme[value].colors[4] );
-                                        headerTextColor.val( colorScheme[value].colors[4] )
+                                if ( 'blank' !== customize( 'header_textcolor' ).get() ) {
+                                        customize( 'header_textcolor' ).set( colorScheme[value].colors[4] );
+                                        customize.control( 'header_textcolor' ).container.find( '.color-picker-hex' )
                                                 .data( 'data-default-color', colorScheme[value].colors[4] )
-                                                .wpColorPicker( 'color', colorScheme[value].colors[4] )
                                                 .wpColorPicker( 'defaultColor', colorScheme[value].colors[4] );
                                 }
 
                                 // update Background Color
-                                wp.customize( 'background_color' ).set( colorScheme[value].colors[0] );
-                                backgroundColor.val( colorScheme[value].colors[0] )
+                                customize( 'background_color' ).set( colorScheme[value].colors[0] );
+                                customize.control( 'background_color' ).container.find( '.color-picker-hex' )
                                         .data( 'data-default-color', colorScheme[value].colors[0] )
-                                        .wpColorPicker( 'color', colorScheme[value].colors[0] )
                                         .wpColorPicker( 'defaultColor', colorScheme[value].colors[0] );
 
                                 // update Header/Sidebar Background Color
-                                wp.customize( 'header_background_color' ).set( colorScheme[value].colors[1] );
-                                sidebarColor.val( colorScheme[value].colors[1] )
+                                customize( 'header_background_color' ).set( colorScheme[value].colors[1] );
+                                customize.control( 'header_background_color' ).container.find( '.color-picker-hex' )
                                         .data( 'data-default-color', colorScheme[value].colors[1] )
-                                        .wpColorPicker( 'color', colorScheme[value].colors[1] )
                                         .wpColorPicker( 'defaultColor', colorScheme[value].colors[1] );
 
                                 // update Sidebar Text Color
-                                wp.customize( 'sidebar_textcolor' ).set( colorScheme[value].colors[4] );
-                                sidebarTextColor.val( colorScheme[value].colors[4] )
+                                customize( 'sidebar_textcolor' ).set( colorScheme[value].colors[4] );
+                                customize.control( 'sidebar_textcolor' ).container.find( '.color-picker-hex' )
                                         .data( 'data-default-color', colorScheme[value].colors[4] )
-                                        .wpColorPicker( 'color', colorScheme[value].colors[4] )
                                         .wpColorPicker( 'defaultColor', colorScheme[value].colors[4] );
                         } );
                 }
         } );
-} )( this.wp );
- No newline at end of file
+} )( this.wp.customize );

src/wp-content/themes/twentyfifteen/js/customizer.js

@@ +1 @@
+/*global _twentyfifteenCustomizerExports */
+/*exported TwentyFifteenCustomizer */
+
 /**
  * Customizer enhancements for a better user experience.
  *
  * Contains handlers to make Customizer preview reload changes asynchronously.
  */
+var TwentyFifteenCustomizer = ( function( $ ) {
+        var self;
+
+        self = {
+                inlineStyleSettings: [],
+                nonce: '',
+                theme: '',
+                debounceDelay: 100
+        };
+        $.extend( self, _twentyfifteenCustomizerExports );
 
-( function( $ ) {
         // Site title and description.
         wp.customize( 'blogname', function( value ) {
                 value.bind( function( to ) {
@@ -16 +28 @@
                         $( '.site-description' ).text( to );
                 } );
         } );
-} )( jQuery );
- No newline at end of file
+
+        // Update inline styles
+        self.refreshCss = function () {
+                var customized = {};
+                $.each( self.inlineStyleSettings, function ( i, name ) {
+                        customized[ name ] = wp.customize( name ).get();
+                });
+
+                wp.ajax.send( 'twentyfifteen_inline_styles', {
+                        data: {
+                                wp_customize: 'on',
+                                customized: JSON.stringify( customized ),
+                                theme: self.theme,
+                                nonce: self.nonce
+                        },
+                        success: function ( data ) {
+                                $.each( data.inlineStyles, function ( handle, css ) {
+                                        var id = 'wp-inline-style-' + handle;
+                                        $( '#' + id ).text( css );
+                                } );
+
+                                if ( data.nonce ) {
+                                        self.nonce = data.nonce;
+                                }
+                        }
+                } );
+        };
+
+        self.refreshCss = _.debounce( self.refreshCss, self.debounceDelay );
+
+        $.each( self.inlineStyleSettings, function ( i, setting ) {
+                wp.customize( setting, function ( value ) {
+                        value.bind( self.refreshCss );
+                });
+        });
+
+        return self;
+} )( jQuery );

src/wp-includes/class.wp-styles.php

@@ -120 +120 @@
         }
 
         public function add_inline_style( $handle, $code ) {
-                if ( !$code )
+                if ( ! $code ) {
                         return false;
+                }
 
                 $after = $this->get_data( $handle, 'after' );
-                if ( !$after )
+                if ( ! $after ) {
                         $after = array();
+                }
 
                 $after[] = $code;
 
@@ -135 +137 @@
         public function print_inline_style( $handle, $echo = true ) {
                 $output = $this->get_data( $handle, 'after' );
 
-                if ( empty( $output ) )
+                if ( empty( $output ) ) {
                         return false;
+                }
 
                 $output = implode( "\n", $output );
 
-                if ( !$echo )
+                if ( ! $echo ) {
                         return $output;
+                }
 
-                echo "<style type='text/css'>\n";
+                echo "<style id='" . esc_attr( "wp-inline-style-$handle" ) . "' type='text/css'>\n";
                 echo "$output\n";
                 echo "</style>\n";