Make WordPress Core

Ticket #29988: 29988.patch

File 29988.patch, 20.0 KB (added by westonruter, 10 years ago)

https://github.com/xwpco/wordpress-develop/pull/31

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

    diff --git src/wp-admin/js/customize-controls.js src/wp-admin/js/customize-controls.js
    index fad223e..b1f2ebc 100644
     
    170170                                        control.setting.set( false );
    171171                                }
    172172                        });
     173
     174                        this.setting.bind( function ( value ) {
     175                                picker.val( value );
     176                                picker.wpColorPicker( 'color', value );
     177                        });
    173178                }
    174179        });
    175180
  • src/wp-content/themes/twentyfifteen/functions.php

    diff --git src/wp-content/themes/twentyfifteen/functions.php src/wp-content/themes/twentyfifteen/functions.php
    index fd49484..d287733 100644
    function twentyfifteen_setup() { 
    8787                'aside', 'image', 'video', 'quote', 'link', 'gallery', 'status', 'audio', 'chat'
    8888        ) );
    8989
    90         $color_scheme  = twentyfifteen_get_color_scheme();
    91         $default_color = trim( $color_scheme[0], '#' );
    92 
    93         // Setup the WordPress core custom background feature.
    94         add_theme_support( 'custom-background', apply_filters( 'twentyfifteen_custom_background_args', array(
    95                 'default-color'      => $default_color,
    96                 'default-attachment' => 'fixed',
    97         ) ) );
    98 
    9990        /*
    10091         * This theme styles the visual editor to resemble the theme style,
    10192         * specifically font, colors, icons, and column width.
    endif; // twentyfifteen_setup 
    10697add_action( 'after_setup_theme', 'twentyfifteen_setup' );
    10798
    10899/**
     100 * Core adds the wp-head-callbacks for the custom header and background on the
     101 * wp_head action at the default priority of 10. At the same time, Core by default
     102 * adds wp_print_styles to the wp_head action at the priority of 8. For this reason
     103 * the inline styles added in the head callback fail to get added in time to be
     104 * output with any styles output by wp_print_styles. This is a workaround for that.
     105 * Also, since we're using the wp_add_inline_styles() for the sake of faster
     106 * style updates in the Customizer, we can add the callbacks to wp_enqueue_scripts
     107 * instead of wp_head.
     108 *
     109 * @see _custom_header_background_just_in_time().
     110 */
     111function twentyfifteen_custom_header_background_just_in_even_more_time() {
     112        $print_styles_priority = has_filter( 'wp_head', 'wp_print_styles' );
     113
     114        if ( current_theme_supports( 'custom-header' ) ) {
     115                $args = get_theme_support( 'custom-header' );
     116                $callback = $args[0]['wp-head-callback'];
     117                if ( $callback ) {
     118                        remove_action( 'wp_head', $callback, 10 );
     119                        add_action( 'wp_enqueue_scripts', $callback, 11 );
     120                }
     121        }
     122
     123        if ( current_theme_supports( 'custom-background' ) ) {
     124                $args = get_theme_support( 'custom-background' );
     125                $callback = $args[0]['wp-head-callback'];
     126                if ( $callback ) {
     127                        remove_action( 'wp_head', $callback, 10 );
     128                        add_action( 'wp_enqueue_scripts', $callback, 11 );
     129                }
     130        }
     131}
     132add_action( 'wp_loaded', 'twentyfifteen_custom_header_background_just_in_even_more_time', 11 );
     133
     134/**
    109135 * Register widget area.
    110136 *
    111137 * @since Twenty Fifteen 1.0
    add_filter( 'walker_nav_menu_start_el', 'twentyfifteen_nav_description', 10, 4 ) 
    318344require get_template_directory() . '/inc/custom-header.php';
    319345
    320346/**
     347 * Implement the Custom Background feature.
     348 *
     349 * @since Twenty Fifteen 1.0
     350 */
     351require get_template_directory() . '/inc/custom-background.php';
     352
     353/**
    321354 * Custom template tags for this theme.
    322355 *
    323356 * @since Twenty Fifteen 1.0
  • new file src/wp-content/themes/twentyfifteen/inc/custom-background.php

    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
    - +  
     1<?php
     2/**
     3 * Implement Custom Background functionality for Twenty Fifteen.
     4 *
     5 * @package WordPress
     6 * @subpackage Twenty_Fifteen
     7 * @since Twenty Fifteen 1.0
     8 */
     9
     10/**
     11 * Set up the WordPress core custom header feature.
     12 *
     13 * @uses twentyfifteen_background_style()
     14 */
     15function twentyfifteen_custom_background_setup() {
     16        $color_scheme  = twentyfifteen_get_color_scheme();
     17        $default_color = trim( $color_scheme[0], '#' );
     18
     19        // Setup the WordPress core custom background feature.
     20        add_theme_support( 'custom-background', apply_filters( 'twentyfifteen_custom_background_args', array(
     21                'default-color'      => $default_color,
     22                'default-attachment' => 'fixed',
     23                'wp-head-callback'   => 'twentyfifteen_background_style',
     24        ) ) );
     25}
     26add_action( 'after_setup_theme', 'twentyfifteen_custom_background_setup' );
     27
     28
     29if ( ! function_exists( 'twentyfifteen_background_style' ) ) :
     30        /**
     31         * Styles the header image and text displayed on the blog.
     32         *
     33         * @since Twenty Fifteen 1.0
     34         * @see twentyfifteen_custom_background_setup().
     35         * @see _custom_background_cb()
     36         */
     37        function twentyfifteen_background_style() {
     38
     39                // $background is the saved custom image, or the default image.
     40                $background = set_url_scheme( get_background_image() );
     41
     42                // $color is the saved custom color.
     43                // A default has to be specified in style.css. It will not be printed here.
     44                $color = get_background_color();
     45
     46                if ( $color === get_theme_support( 'custom-background', 'default-color' ) ) {
     47                        $color = false;
     48                }
     49
     50                if ( ! $background && ! $color ) {
     51                        return;
     52                }
     53
     54                $style = $color ? "background-color: #$color;" : '';
     55
     56                if ( $background ) {
     57                        $image = " background-image: url('$background');";
     58
     59                        $repeat = get_theme_mod( 'background_repeat', get_theme_support( 'custom-background', 'default-repeat' ) );
     60                        if ( ! in_array( $repeat, array( 'no-repeat', 'repeat-x', 'repeat-y', 'repeat' ) ) ) {
     61                                $repeat = 'repeat';
     62                        }
     63                        $repeat = " background-repeat: $repeat;";
     64
     65                        $position = get_theme_mod( 'background_position_x', get_theme_support( 'custom-background', 'default-position-x' ) );
     66                        if ( ! in_array( $position, array( 'center', 'right', 'left' ) ) ) {
     67                                $position = 'left';
     68                        }
     69                        $position = " background-position: top $position;";
     70
     71                        $attachment = get_theme_mod( 'background_attachment', get_theme_support( 'custom-background', 'default-attachment' ) );
     72                        if ( ! in_array( $attachment, array( 'fixed', 'scroll' ) ) ) {
     73                                $attachment = 'scroll';
     74                        }
     75                        $attachment = " background-attachment: $attachment;";
     76
     77                        $style .= $image . $repeat . $position . $attachment;
     78                }
     79
     80                if ( $style ) {
     81                        $sheet = sprintf( 'body.custom-background { %s } ', trim( $style ) );
     82                        wp_add_inline_style( 'twentyfifteen-style', $sheet );
     83                }
     84
     85        }
     86endif; // twentyfifteen_background_style
  • src/wp-content/themes/twentyfifteen/inc/custom-header.php

    diff --git src/wp-content/themes/twentyfifteen/inc/custom-header.php src/wp-content/themes/twentyfifteen/inc/custom-header.php
    index bdcaef9..3664ef5 100644
    function twentyfifteen_header_style() { 
    8686                return;
    8787        }
    8888
    89         // If we get this far, we have custom styles. Let's do this.
    90         ?>
    91         <style type="text/css" id="twentyfifteen-header-css">
    92         <?php
    93                 if ( ! empty( $header_image ) ) :
    94         ?>
    95                 .site-header {
    96                         background: url(<?php header_image(); ?>) no-repeat 50% 50%;
    97                         -webkit-background-size: cover;
    98                         -moz-background-size:    cover;
    99                         -o-background-size:      cover;
    100                         background-size:         cover;
    101                 }
     89        $css = '';
    10290
    103                 @media screen and (min-width: 59.6875em) {
    104                         body:before {
    105                                 background: url(<?php header_image(); ?>) no-repeat 100% 50%;
     91        if ( ! empty( $header_image ) ) {
     92                $css .= sprintf(
     93                        '
     94                        /* Header image */
     95                        .site-header {
     96                                background: url( %1$s ) no-repeat 50%% 50%%;
    10697                                -webkit-background-size: cover;
    10798                                -moz-background-size:    cover;
    10899                                -o-background-size:      cover;
    109100                                background-size:         cover;
    110                                 border-right: 0;
    111101                        }
    112102
    113                         .site-header {
    114                                 background: transparent;
     103                        @media screen and (min-width: 59.6875em) {
     104                                body:before {
     105                                        background: url( %1$s ) no-repeat 100%% 50%%;
     106                                        -webkit-background-size: cover;
     107                                        -moz-background-size:    cover;
     108                                        -o-background-size:      cover;
     109                                        background-size:         cover;
     110                                        border-right: 0;
     111                                }
     112
     113                                .site-header {
     114                                        background: transparent;
     115                                }
    115116                        }
    116                 }
    117         <?php
    118                 endif;
    119 
    120                 // Has the text been hidden?
    121                 if ( ! display_header_text() ) :
    122         ?>
    123                 .site-title,
    124                 .site-description {
    125                         clip: rect(1px, 1px, 1px, 1px);
    126                         position: absolute;
    127                 }
    128         <?php
    129                 // If the user has set a custom color for the text use that
    130                 elseif ( $text_color != get_theme_support( 'custom-header', 'default-text-color' ) ) :
    131         ?>
    132                 .site-title a,
    133                 .site-title a:hover,
    134                 .site-title a:focus,
    135                 .site-description {
    136                         color: #<?php echo esc_attr( $text_color ); ?>;
    137                 }
    138         <?php endif; ?>
    139         </style>
    140         <?php
     117                        ',
     118                        esc_url( $header_image )
     119                );
     120        }
     121
     122        if ( ! display_header_text() ) {
     123                $css .= '
     124                        /* Hide display header text */
     125                        .site-title,
     126                        .site-description {
     127                                clip: rect(1px, 1px, 1px, 1px);
     128                                position: absolute;
     129                        }
     130                ';
     131        }
     132
     133        if ( $text_color != get_theme_support( 'custom-header', 'default-text-color' ) ) {
     134                $css .= sprintf(
     135                        '
     136                        /* Header text color */
     137                        .site-title a,
     138                        .site-title a:hover,
     139                        .site-title a:focus,
     140                        .site-description {
     141                                color: %1$s;
     142                        }
     143                        ',
     144                        sanitize_hex_color( '#' . $text_color )
     145                );
     146        }
     147
     148        if ( $css ) {
     149                wp_add_inline_style( 'twentyfifteen-style', $css );
     150        }
     151
    141152}
    142153endif; // twentyfifteen_header_style
    143154
  • src/wp-content/themes/twentyfifteen/inc/customizer.php

    diff --git src/wp-content/themes/twentyfifteen/inc/customizer.php src/wp-content/themes/twentyfifteen/inc/customizer.php
    index 2daee26..f7062b7 100644
     
    88 */
    99
    1010/**
     11 * Get the settings which should be postMessage and which should trigger a
     12 * refresh of the CSS via Ajax.
     13 *
     14 * @since Twenty Fifteen 1.0
     15 *
     16 * @return array
     17 */
     18function twentyfifteen_get_inline_style_settings() {
     19        return array(
     20                'header_image',
     21                'header_image_data',
     22                'header_textcolor',
     23                'color_scheme',
     24                'header_background_color',
     25                'sidebar_textcolor',
     26                'background_color',
     27                'background_attachment',
     28                'background_repeat',
     29                'background_position_x',
     30                'background_image',
     31        );
     32}
     33
     34/**
    1135 * Add postMessage support for site title and description for the Customizer.
    1236 *
    1337 * @since Twenty Fifteen 1.0
     
    1741function twentyfifteen_customize_register( $wp_customize ) {
    1842        $color_scheme = twentyfifteen_get_color_scheme();
    1943
    20         $wp_customize->get_setting( 'blogname' )->transport         = 'postMessage';
    21         $wp_customize->get_setting( 'blogdescription' )->transport  = 'postMessage';
    22         $wp_customize->get_setting( 'background_color' )->transport = 'refresh';
    23 
    2444        // Add color scheme setting and control.
    2545        $wp_customize->add_setting( 'color_scheme', array(
    2646                'default'           => 'default',
    function twentyfifteen_customize_register( $wp_customize ) { 
    5575                'label'   => esc_html__( 'Header & Sidebar Background Color', 'twentyfifteen' ),
    5676                'section' => 'colors',
    5777        ) ) );
     78
     79        $post_message_settings = array_merge(
     80                array(
     81                        'blogname',
     82                        'blogdescription',
     83                ),
     84                twentyfifteen_get_inline_style_settings()
     85        );
     86
     87        foreach ( $post_message_settings as $setting ) {
     88                $wp_customize->get_setting( $setting )->transport = 'postMessage';
     89        }
    5890}
    5991add_action( 'customize_register', 'twentyfifteen_customize_register', 11 );
    6092
    function twentyfifteen_color_scheme_css() { 
    650682add_action( 'wp_enqueue_scripts', 'twentyfifteen_color_scheme_css' );
    651683
    652684/**
     685 * Return the CSS via Ajax for the Customizer preview so that updates to the
     686 * settings needn't require a full page refresh when a new color scheme is
     687 * selected.
     688 *
     689 * @since Twenty Fifteen 1.0
     690 */
     691function twentyfifteen_ajax_inline_styles() {
     692        /**
     693         * @var WP_Styles $wp_styles
     694         * @var WP_Customize_Manager $wp_customize
     695         */
     696        global $wp_styles, $wp_customize;
     697
     698        if ( empty( $wp_customize ) ) {
     699                wp_send_json_error( 'customizer_required' );
     700        }
     701
     702        $nonce_tick = check_ajax_referer( 'twentyfifteen_inline_styles' , 'nonce', false );
     703        if ( ! $nonce_tick ) {
     704                wp_send_json_error( 'bad_nonce' );
     705        }
     706
     707        foreach ( $wp_customize->settings() as $setting ) {
     708                if ( $setting->check_capabilities() ) {
     709                        $setting->preview();
     710                }
     711        }
     712
     713        wp_enqueue_scripts();
     714
     715        $inline_styles = array();
     716        foreach ( $wp_styles->queue as $handle ) {
     717                $data = $wp_styles->get_data( $handle, 'after' );
     718                if ( $data ) {
     719                        $inline_styles[ $handle ] = implode( "\n", $data );
     720                }
     721        }
     722
     723        $data = array(
     724                'inlineStyles' => $inline_styles,
     725                'theme' => get_stylesheet(),
     726        );
     727        if ( 2 === $nonce_tick ) {
     728                $data['nonce'] = wp_create_nonce( 'twentyfifteen_inline_styles' );
     729        }
     730
     731        wp_send_json_success( $data );
     732}
     733add_action( 'wp_ajax_twentyfifteen_inline_styles', 'twentyfifteen_ajax_inline_styles' );
     734
     735/**
    653736 * Binds JS handlers to make Customizer preview reload changes asynchronously.
    654737 *
    655738 * @since Twenty Fifteen 1.0
    656739 */
    657740function twentyfifteen_customize_preview_js() {
    658         wp_enqueue_script( 'twentyfifteen-customizer', get_template_directory_uri() . '/js/customizer.js', array( 'customize-preview' ), '20141005', true );
     741        global $wp_scripts;
     742
     743        wp_enqueue_script( 'twentyfifteen-customizer', get_template_directory_uri() . '/js/customizer.js', array( 'customize-preview', 'wp-util', 'underscore' ), '20141005', true );
     744
     745        $exports = array(
     746                'inlineStyleSettings' => twentyfifteen_get_inline_style_settings(),
     747                'nonce' => wp_create_nonce( 'twentyfifteen_inline_styles' ),
     748        );
     749
     750        /**
     751         * @var WP_Scripts $wp_scripts
     752         */
     753        $wp_scripts->add_data(
     754                'twentyfifteen-customizer',
     755                'data',
     756                sprintf( 'var _twentyfifteenCustomizerExports = %s;', json_encode( $exports ) )
     757        );
    659758}
    660 add_action( 'customize_preview_init', 'twentyfifteen_customize_preview_js' );
    661  No newline at end of file
     759add_action( 'customize_preview_init', 'twentyfifteen_customize_preview_js' );
  • src/wp-content/themes/twentyfifteen/js/color-scheme-control.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
     
    55 * Adds listener to Color Scheme control to update other color controls with new values/defaults
    66 */
    77
    8 ( function( wp ) {
    9         wp.customize.controlConstructor.colorScheme = wp.customize.Control.extend( {
     8( function( customize ) {
     9        customize.controlConstructor.colorScheme = customize.Control.extend( {
    1010                ready: function() {
    11                         var parentSection    = this.container.closest( '.control-section' ),
    12                                 headerTextColor  = parentSection.find( '#customize-control-header_textcolor .color-picker-hex' ),
    13                                 backgroundColor  = parentSection.find( '#customize-control-background_color .color-picker-hex' ),
    14                                 sidebarColor     = parentSection.find( '#customize-control-header_background_color .color-picker-hex' ),
    15                                 sidebarTextColor = parentSection.find( '#customize-control-sidebar_textcolor .color-picker-hex' );
    1611
    1712                        this.setting.bind( 'change', function( value ) {
    1813                                // if Header Text is not hidden, update value
    19                                 if ( 'blank' !== wp.customize( 'header_textcolor' ).get() ) {
    20                                         wp.customize( 'header_textcolor' ).set( colorScheme[value].colors[4] );
    21                                         headerTextColor.val( colorScheme[value].colors[4] )
     14                                if ( 'blank' !== customize( 'header_textcolor' ).get() ) {
     15                                        customize( 'header_textcolor' ).set( colorScheme[value].colors[4] );
     16                                        customize.control( 'header_textcolor' ).container.find( '.color-picker-hex' )
    2217                                                .data( 'data-default-color', colorScheme[value].colors[4] )
    23                                                 .wpColorPicker( 'color', colorScheme[value].colors[4] )
    2418                                                .wpColorPicker( 'defaultColor', colorScheme[value].colors[4] );
    2519                                }
    2620
    2721                                // update Background Color
    28                                 wp.customize( 'background_color' ).set( colorScheme[value].colors[0] );
    29                                 backgroundColor.val( colorScheme[value].colors[0] )
     22                                customize( 'background_color' ).set( colorScheme[value].colors[0] );
     23                                customize.control( 'background_color' ).container.find( '.color-picker-hex' )
    3024                                        .data( 'data-default-color', colorScheme[value].colors[0] )
    31                                         .wpColorPicker( 'color', colorScheme[value].colors[0] )
    3225                                        .wpColorPicker( 'defaultColor', colorScheme[value].colors[0] );
    3326
    3427                                // update Header/Sidebar Background Color
    35                                 wp.customize( 'header_background_color' ).set( colorScheme[value].colors[1] );
    36                                 sidebarColor.val( colorScheme[value].colors[1] )
     28                                customize( 'header_background_color' ).set( colorScheme[value].colors[1] );
     29                                customize.control( 'header_background_color' ).container.find( '.color-picker-hex' )
    3730                                        .data( 'data-default-color', colorScheme[value].colors[1] )
    38                                         .wpColorPicker( 'color', colorScheme[value].colors[1] )
    3931                                        .wpColorPicker( 'defaultColor', colorScheme[value].colors[1] );
    4032
    4133                                // update Sidebar Text Color
    42                                 wp.customize( 'sidebar_textcolor' ).set( colorScheme[value].colors[4] );
    43                                 sidebarTextColor.val( colorScheme[value].colors[4] )
     34                                customize( 'sidebar_textcolor' ).set( colorScheme[value].colors[4] );
     35                                customize.control( 'sidebar_textcolor' ).container.find( '.color-picker-hex' )
    4436                                        .data( 'data-default-color', colorScheme[value].colors[4] )
    45                                         .wpColorPicker( 'color', colorScheme[value].colors[4] )
    4637                                        .wpColorPicker( 'defaultColor', colorScheme[value].colors[4] );
    4738                        } );
    4839                }
    4940        } );
    50 } )( this.wp );
    51  No newline at end of file
     41} )( this.wp.customize );
  • src/wp-content/themes/twentyfifteen/js/customizer.js

    diff --git src/wp-content/themes/twentyfifteen/js/customizer.js src/wp-content/themes/twentyfifteen/js/customizer.js
    index 0aa9728..e83e1f0 100644
     
     1/*global _twentyfifteenCustomizerExports */
     2/*exported TwentyFifteenCustomizer */
     3
    14/**
    25 * Customizer enhancements for a better user experience.
    36 *
    47 * Contains handlers to make Customizer preview reload changes asynchronously.
    58 */
     9var TwentyFifteenCustomizer = ( function( $ ) {
     10        var self;
     11
     12        self = {
     13                inlineStyleSettings: [],
     14                nonce: '',
     15                theme: '',
     16                debounceDelay: 100
     17        };
     18        $.extend( self, _twentyfifteenCustomizerExports );
    619
    7 ( function( $ ) {
    820        // Site title and description.
    921        wp.customize( 'blogname', function( value ) {
    1022                value.bind( function( to ) {
     
    1628                        $( '.site-description' ).text( to );
    1729                } );
    1830        } );
    19 } )( jQuery );
    20  No newline at end of file
     31
     32        // Update inline styles
     33        self.refreshCss = function () {
     34                var customized = {};
     35                $.each( self.inlineStyleSettings, function ( i, name ) {
     36                        customized[ name ] = wp.customize( name ).get();
     37                });
     38
     39                wp.ajax.send( 'twentyfifteen_inline_styles', {
     40                        data: {
     41                                wp_customize: 'on',
     42                                customized: JSON.stringify( customized ),
     43                                theme: self.theme,
     44                                nonce: self.nonce
     45                        },
     46                        success: function ( data ) {
     47                                $.each( data.inlineStyles, function ( handle, css ) {
     48                                        var id = 'wp-inline-style-' + handle;
     49                                        $( '#' + id ).text( css );
     50                                } );
     51
     52                                if ( data.nonce ) {
     53                                        self.nonce = data.nonce;
     54                                }
     55                        }
     56                } );
     57        };
     58
     59        self.refreshCss = _.debounce( self.refreshCss, self.debounceDelay );
     60
     61        $.each( self.inlineStyleSettings, function ( i, setting ) {
     62                wp.customize( setting, function ( value ) {
     63                        value.bind( self.refreshCss );
     64                });
     65        });
     66
     67        return self;
     68} )( jQuery );
  • src/wp-includes/class.wp-styles.php

    diff --git src/wp-includes/class.wp-styles.php src/wp-includes/class.wp-styles.php
    index 1a017ac..0de9051 100644
    class WP_Styles extends WP_Dependencies { 
    120120        }
    121121
    122122        public function add_inline_style( $handle, $code ) {
    123                 if ( !$code )
     123                if ( ! $code ) {
    124124                        return false;
     125                }
    125126
    126127                $after = $this->get_data( $handle, 'after' );
    127                 if ( !$after )
     128                if ( ! $after ) {
    128129                        $after = array();
     130                }
    129131
    130132                $after[] = $code;
    131133
    class WP_Styles extends WP_Dependencies { 
    135137        public function print_inline_style( $handle, $echo = true ) {
    136138                $output = $this->get_data( $handle, 'after' );
    137139
    138                 if ( empty( $output ) )
     140                if ( empty( $output ) ) {
    139141                        return false;
     142                }
    140143
    141144                $output = implode( "\n", $output );
    142145
    143                 if ( !$echo )
     146                if ( ! $echo ) {
    144147                        return $output;
     148                }
    145149
    146                 echo "<style type='text/css'>\n";
     150                echo "<style id='" . esc_attr( "wp-inline-style-$handle" ) . "' type='text/css'>\n";
    147151                echo "$output\n";
    148152                echo "</style>\n";
    149153