diff --git src/wp-admin/js/customize-controls.js src/wp-admin/js/customize-controls.js index fad223e..b1f2ebc 100644 --- src/wp-admin/js/customize-controls.js +++ src/wp-admin/js/customize-controls.js @@ -170,6 +170,11 @@ control.setting.set( false ); } }); + + this.setting.bind( function ( value ) { + picker.val( value ); + picker.wpColorPicker( 'color', value ); + }); } }); diff --git src/wp-content/themes/twentyfifteen/functions.php src/wp-content/themes/twentyfifteen/functions.php index fd49484..d287733 100644 --- src/wp-content/themes/twentyfifteen/functions.php +++ src/wp-content/themes/twentyfifteen/functions.php @@ -87,15 +87,6 @@ function twentyfifteen_setup() { '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,6 +97,41 @@ endif; // twentyfifteen_setup 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,6 +344,13 @@ add_filter( 'walker_nav_menu_start_el', 'twentyfifteen_nav_description', 10, 4 ) 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 diff --git src/wp-content/themes/twentyfifteen/inc/custom-background.php src/wp-content/themes/twentyfifteen/inc/custom-background.php new file mode 100644 index 0000000..bde858a --- /dev/null +++ src/wp-content/themes/twentyfifteen/inc/custom-background.php @@ -0,0 +1,86 @@ + $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 diff --git src/wp-content/themes/twentyfifteen/inc/custom-header.php src/wp-content/themes/twentyfifteen/inc/custom-header.php index bdcaef9..3664ef5 100644 --- src/wp-content/themes/twentyfifteen/inc/custom-header.php +++ src/wp-content/themes/twentyfifteen/inc/custom-header.php @@ -86,58 +86,69 @@ function twentyfifteen_header_style() { return; } - // If we get this far, we have custom styles. Let's do this. - ?> - - 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,6 +75,18 @@ function twentyfifteen_customize_register( $wp_customize ) { '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,11 +682,78 @@ function twentyfifteen_color_scheme_css() { 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' ); diff --git src/wp-content/themes/twentyfifteen/js/color-scheme-control.js src/wp-content/themes/twentyfifteen/js/color-scheme-control.js index 4462f98..46f4a47 100644 --- src/wp-content/themes/twentyfifteen/js/color-scheme-control.js +++ src/wp-content/themes/twentyfifteen/js/color-scheme-control.js @@ -5,46 +5,37 @@ * 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 ); diff --git src/wp-content/themes/twentyfifteen/js/customizer.js src/wp-content/themes/twentyfifteen/js/customizer.js index 0aa9728..e83e1f0 100644 --- src/wp-content/themes/twentyfifteen/js/customizer.js +++ src/wp-content/themes/twentyfifteen/js/customizer.js @@ -1,10 +1,22 @@ +/*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,4 +28,41 @@ $( '.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 ); diff --git src/wp-includes/class.wp-styles.php src/wp-includes/class.wp-styles.php index 1a017ac..0de9051 100644 --- src/wp-includes/class.wp-styles.php +++ src/wp-includes/class.wp-styles.php @@ -120,12 +120,14 @@ class WP_Styles extends WP_Dependencies { } 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,15 +137,17 @@ class WP_Styles extends WP_Dependencies { 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 "\n";