WordPress.org

Make WordPress Core

Ticket #38426: 38426.diff

File 38426.diff, 29.5 KB (added by celloexpressions, 3 years ago)

First pass, see forthcoming comment.

  • src/wp-content/themes/twentyseventeen/assets/js/customize-controls.js

     
     1/**
     2 * Scripts within the customizer controls window.
     3 *
     4 * Contextually shows the color hue control and informs the preview
     5 * when users open or close the front page sections section.
     6 */
     7
     8( function() {
     9        wp.customize.bind( 'ready', function() {
     10
     11                // Only show the color hue control when there's a custom color scheme.
     12                wp.customize( 'colorscheme', function( setting ) {
     13                        wp.customize.control( 'colorscheme_hue', function( control ) {
     14                                var visibility = function() {
     15                                        if ( 'custom' === setting.get() ) {
     16                                                control.container.slideDown( 180 );
     17                                        } else {
     18                                                control.container.slideUp( 180 );
     19                                        }
     20                                };
     21
     22                                visibility();
     23                                setting.bind( visibility );
     24                        });
     25                });
     26
     27                // Detect when the front page sections section is expanded (or closed) so we can adjust the preview accordingly
     28                wp.customize.section( 'front_page_sections' ).expanded.bind( function( isExpanding ) {
     29
     30                        // Value of isExpanding will = true if you're entering the section, false if you're leaving it
     31                        wp.customize.previewer.send( 'section-highlight', { expanded: isExpanding } );
     32                } );
     33        } );
     34} )( jQuery );
  • src/wp-content/themes/twentyseventeen/assets/js/customize-preview.js

     
     1/**
     2 * File customize-preview.js.
     3 *
     4 * Instantly live-update customizer settings in the preview for improved user experience.
     5 */
     6
     7( function( $ ) {
     8
     9        // Collect information from customize-controls.js about which panels are opening
     10        wp.customize.bind( 'preview-ready', function() {
     11                wp.customize.preview.bind( 'section-highlight', function( data ) {
     12
     13                        // When the section is expanded, show and scroll to the content placeholders, exposing the edit links.
     14                        if ( true === data.expanded ) {
     15                                $.scrollTo( $( '#panel1' ), {
     16                                        duration: 600,
     17                                        offset: { 'top': -40 }
     18                                } );
     19                                $( '.panel-placeholder' ).slideDown( 200 );
     20
     21                        // If we've left the panel, hide the placeholders and scroll back to the top
     22                        } else {
     23                                $.scrollTo( $( '#masthead' ), {
     24                                        duration: 300,
     25                                        offset: { 'top': 0 }
     26                                } );
     27                                $( '.panel-placeholder' ).slideUp( 200 );
     28                        }
     29                } );
     30        } );
     31
     32        // Site title and description.
     33        wp.customize( 'blogname', function( value ) {
     34                value.bind( function( to ) {
     35                        $( '.site-title a' ).text( to );
     36                } );
     37        } );
     38        wp.customize( 'blogdescription', function( value ) {
     39                value.bind( function( to ) {
     40                        $( '.site-description' ).text( to );
     41                } );
     42        } );
     43
     44        // Header text color.
     45        wp.customize( 'header_textcolor', function( value ) {
     46                value.bind( function( to ) {
     47                        if ( 'blank' === to ) {
     48                                $( '.site-title, .site-description' ).css( {
     49                                        'clip': 'rect(1px, 1px, 1px, 1px)',
     50                                        'position': 'absolute'
     51                                } );
     52                                $( 'body' ).addClass( 'title-tagline-hidden' );
     53                        } else {
     54                                $( '.site-title, .site-description' ).css( {
     55                                        'clip': 'auto',
     56                                        'position': 'relative'
     57                                } );
     58                                $( '.site-branding, .site-branding a, .site-description, .site-description a' ).css( {
     59                                        'color': to
     60                                } );
     61                                $( 'body' ).removeClass( 'title-tagline-hidden' );
     62                        }
     63                } );
     64        } );
     65
     66        // Color scheme.
     67        wp.customize( 'colorscheme', function( value ) {
     68                value.bind( function( to ) {
     69
     70                        // Update color body class.
     71                        $( 'body' ).removeClass( 'colors-light colors-dark colors-custom' )
     72                                   .addClass( 'colors-' + to );
     73                } );
     74        } );
     75
     76        // Custom color hue.
     77        wp.customize( 'colorscheme_hue', function( value ) {
     78                value.bind( function( to ) {
     79
     80                        // Update custom color CSS
     81                        var style = $( '#custom-theme-colors' ),
     82                            hue = style.data( 'hue' ),
     83                            css = style.html();
     84
     85                        css = css.split( hue + ',' ).join( to + ',' ); // Equivalent to css.replaceAll, with hue followed by comma to prevent values with units from being changed.
     86                        style.html( css )
     87                             .data( 'hue', to );
     88                } );
     89        } );
     90
     91        // Page layouts.
     92        wp.customize( 'page_layout', function( value ) {
     93                value.bind( function( to ) {
     94                        if ( 'one-column' === to ) {
     95                                $( 'body' ).addClass( 'page-one-column' ).removeClass( 'page-two-column' );
     96                        } else {
     97                                $( 'body' ).removeClass( 'page-one-column' ).addClass( 'page-two-column' );
     98                        }
     99                } );
     100        } );
     101} )( jQuery );
  • src/wp-content/themes/twentyseventeen/assets/js/customizer.js

     
    1 /**
    2  * File customizer.js.
    3  *
    4  * Theme Customizer enhancements for a better user experience.
    5  *
    6  * Contains handlers to make Theme Customizer preview reload changes asynchronously.
    7  */
    8 
    9 ( function( $ ) {
    10 
    11         // Collect information from panel-customizer.js about which panels are opening
    12         wp.customize.bind( 'preview-ready', function() {
    13                 wp.customize.preview.bind( 'section-highlight', function( data ) {
    14 
    15                         // If there's an expanded panel section, scroll down to that panel & highlight in the preview
    16                         if ( true === data.expanded ) {
    17                                 $.scrollTo( $( '.' + data.section ), {
    18                                         duration: 600,
    19                                         offset: { 'top': -40 }
    20                                 } );
    21                                 $( '.' + data.section ).addClass( 'twentyseventeen-highlight' );
    22 
    23                         // If we've left the panel, remove the highlight and scroll back to the top
    24                         } else {
    25                                 $.scrollTo( $( '#masthead' ), {
    26                                         duration: 300,
    27                                         offset: { 'top': 0 }
    28                                 } );
    29                                 $( '.' + data.section ).removeClass( 'twentyseventeen-highlight' );
    30                         }
    31                 } );
    32         } );
    33 
    34         // Site title and description.
    35         wp.customize( 'blogname', function( value ) {
    36                 value.bind( function( to ) {
    37                         $( '.site-title a' ).text( to );
    38                 } );
    39         } );
    40         wp.customize( 'blogdescription', function( value ) {
    41                 value.bind( function( to ) {
    42                         $( '.site-description' ).text( to );
    43                 } );
    44         } );
    45 
    46         // Header text color.
    47         wp.customize( 'header_textcolor', function( value ) {
    48                 value.bind( function( to ) {
    49                         if ( 'blank' === to ) {
    50                                 $( '.site-title, .site-description' ).css( {
    51                                         'clip': 'rect(1px, 1px, 1px, 1px)',
    52                                         'position': 'absolute'
    53                                 } );
    54                                 $( 'body' ).addClass( 'title-tagline-hidden' );
    55                         } else {
    56                                 $( '.site-title, .site-description' ).css( {
    57                                         'clip': 'auto',
    58                                         'position': 'relative'
    59                                 } );
    60                                 $( '.site-branding, .site-branding a, .site-description, .site-description a' ).css( {
    61                                         'color': to
    62                                 } );
    63                                 $( 'body' ).removeClass( 'title-tagline-hidden' );
    64                         }
    65                 } );
    66         } );
    67 
    68         // Color scheme.
    69         wp.customize( 'colorscheme', function( value ) {
    70                 value.bind( function( to ) {
    71 
    72                         // Update color body class.
    73                         $( 'body' ).removeClass( 'colors-light colors-dark colors-custom' )
    74                                 .addClass( 'colors-' + to );
    75                 } );
    76         } );
    77 
    78         // Custom color hue.
    79         wp.customize( 'colorscheme_hue', function( value ) {
    80                 value.bind( function( to ) {
    81 
    82                         // Update custom color CSS
    83                         var style = $( '#custom-theme-colors' ),
    84                             hue = style.data( 'hue' ),
    85                             css = style.html();
    86 
    87                         css = css.split( hue + ',' ).join( to + ',' ); // Equivalent to css.replaceAll, with hue followed by comma to prevent values with units from being changed.
    88                         style.html( css )
    89                              .data( 'hue', to );
    90                 } );
    91         } );
    92 
    93         // Page layouts.
    94         wp.customize( 'page_options', function( value ) {
    95                 value.bind( function( to ) {
    96                         if ( 'one-column' === to ) {
    97                                 $( 'body' ).addClass( 'page-one-column' ).removeClass( 'page-two-column' );
    98                         } else {
    99                                 $( 'body' ).removeClass( 'page-one-column' ).addClass( 'page-two-column' );
    100                         }
    101                 } );
    102         } );
    103 } )( jQuery );
  • src/wp-content/themes/twentyseventeen/assets/js/panel-customizer.js

     
    1 /**
    2  * Theme Customizer enhancements, specific to panels, for a better user experience.
    3  *
    4  * This allows us to detect when the user has opened specific sections within the Customizer,
    5  * and adjust our preview pane accordingly.
    6  */
    7 
    8 ( function() {
    9 
    10         wp.customize.bind( 'ready', function() {
    11 
    12                 // Detect when the section for each panel is expanded (or closed) so we can adjust preview accordingly
    13                 wp.customize.section( 'panel_1' ).expanded.bind( function( isExpanding ) {
    14 
    15                         // Value of isExpanding will = true if you're entering the section, false if you're leaving it
    16                         wp.customize.previewer.send( 'section-highlight', { section: 'twentyseventeen-panel1', expanded: isExpanding } );
    17                 } );
    18 
    19                 // Detect when the section for each panel is expanded (or closed) so we can adjust preview accordingly
    20                 wp.customize.section( 'panel_2' ).expanded.bind( function( isExpanding ) {
    21 
    22                         // Value of isExpanding = true if you're entering the section, false if you're leaving it
    23                         wp.customize.previewer.send( 'section-highlight', { section: 'twentyseventeen-panel2', expanded: isExpanding } );
    24                 } );
    25 
    26                 // Detect when the section for each panel is expanded (or closed) so we can adjust preview accordingly
    27                 wp.customize.section( 'panel_3' ).expanded.bind( function( isExpanding ) {
    28 
    29                         // Value of isExpanding will = true if you're entering the section, false if you're leaving it
    30                         wp.customize.previewer.send( 'section-highlight', { section: 'twentyseventeen-panel3', expanded: isExpanding } );
    31                 } );
    32 
    33                 // Detect when the section for each panel is expanded (or closed) so we can adjust preview accordingly
    34                 wp.customize.section( 'panel_4' ).expanded.bind( function( isExpanding ) {
    35 
    36                         // Value of isExpanding will = true if you're entering the section, false if you're leaving it
    37                         wp.customize.previewer.send( 'section-highlight', { section: 'twentyseventeen-panel4', expanded: isExpanding } );
    38                 } );
    39 
    40         } );
    41 } )( jQuery );
  • src/wp-content/themes/twentyseventeen/components/page/content-front-page-panels.php

     
    1212
    1313?>
    1414
    15 <article id="post-<?php the_ID(); ?>" <?php post_class( 'twentyseventeen-panel ' ); ?> >
     15<article id="panel<?php echo $twentyseventeencounter; ?>" <?php post_class( 'twentyseventeen-panel ' ); ?> >
    1616
    17         <span class="panel twentyseventeen-panel<?php echo esc_attr( $twentyseventeencounter ); ?>" id="panel<?php echo esc_attr( $twentyseventeencounter ); ?>">
    18                 <span class="twentyseventeen-panel-title"><?php printf( __( 'Panel %1$s', 'twentyseventeen' ), esc_attr( $twentyseventeencounter ) ); ?></span>
    19         </span>
    20 
    2117        <?php if ( has_post_thumbnail() ) :
    2218                $thumbnail = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'twentyseventeen-featured-image' );
    2319
     
    7773                                                endwhile;
    7874                                                wp_reset_postdata();
    7975                                                ?>
    80                                         </div><!-- .pique-recent-posts -->
     76                                        </div><!-- .recent-posts -->
    8177                                <?php endif; ?>
    8278                        <?php endif; ?>
    8379
  • src/wp-content/themes/twentyseventeen/front-page.php

     
    2828
    2929                <?php
    3030                // Get each of our panels and show the post data.
    31                 $panels = array( '1', '2', '3', '4' );
    32                 $titles = array();
    33 
    34                 global $twentyseventeencounter; // Used in components/page/content-front-page-panels.php file.
    35 
    3631                if ( 0 !== twentyseventeen_panel_count() || is_customize_preview() ) : // If we have pages to show.
    3732
    38                         $twentyseventeencounter = 1;
     33                        /**
     34                         * Filter number of front page sections in Twenty Seventeen.
     35                         *
     36                         * @since Twenty Seventeen 1.0
     37                         *
     38                         * @param $num_sections integer
     39                         */
     40                        $num_sections = apply_filters( 'twentyseventeen_front_page_sections', 4 );
     41                        global $twentyseventeencounter;
    3942
    40                         foreach ( $panels as $panel ) :
    41                                 if ( get_theme_mod( 'panel_' . $panel ) ) :
    42                                         $post = get_post( get_theme_mod( 'panel_' . $panel ) );
    43                                         setup_postdata( $post );
    44                                         set_query_var( 'panel', $panel );
     43                        // Create a setting and control for each of the sections available in the theme.
     44                        for ( $i = 1; $i < ( 1 + $num_sections ); $i++ ) {
     45                                $twentyseventeencounter = $i;
     46                                twentyseventeen_front_page_section( null, $i );
     47                        }
    4548
    46                                         $titles[] = get_the_title(); // Put page titles in an array for use in navigation.
    47                                         get_template_part( 'components/page/content', 'front-page-panels' );
     49        endif; // The if ( 0 !== twentyseventeen_panel_count() ) ends here. ?>
    4850
    49                                         wp_reset_postdata();
    50                                 else :
    51                                         // The output placeholder anchor.
    52                                         echo '<article class="panel-placeholder panel twentyseventeen-panel twentyseventeen-panel' . esc_attr( $twentyseventeencounter ) . '" id="panel' . esc_attr( $twentyseventeencounter ) . '"><span class="twentyseventeen-panel-title">' . sprintf( __( 'Panel %1$s Placeholder', 'twentyseventeen' ), esc_attr( $twentyseventeencounter ) ) . '</span></article>';
    53                                 endif;
    54 
    55                                 $twentyseventeencounter++;
    56                         endforeach;
    57                         ?>
    58 
    59         <?php endif; // The if ( 0 !== twentyseventeen_panel_count() ) ends here.
    60         ?>
    61 
    6251        </main><!-- #main -->
    6352</div><!-- #primary -->
    6453
  • src/wp-content/themes/twentyseventeen/functions.php

     
    9494                'flex-width'  => true,
    9595        ) );
    9696
     97        // Add theme support for selective refresh for widgets.
     98        add_theme_support( 'customize-selective-refresh-widgets' );
     99
    97100        /*
    98101         * This theme styles the visual editor to resemble the theme style,
    99102         * specifically font, colors, and column width.
  • src/wp-content/themes/twentyseventeen/inc/customizer.php

     
    11<?php
    22/**
    3  * Twenty Seventeen: Theme Customizer
     3 * Twenty Seventeen: Customizer
    44 *
    55 * @package WordPress
    66 * @subpackage Twenty_Seventeen
     
    6464        ) );
    6565
    6666        /**
    67          * Add the Theme Options section.
     67         * Layout options.
    6868         */
    69         $wp_customize->add_panel( 'options_panel', array(
    70                 'title'       => __( 'Theme Options', 'twentyseventeen' ),
    71                 'description' => __( 'Configure your theme settings', 'twentyseventeen' ),
     69        $wp_customize->add_section( 'layout', array(
     70                'title'           => __( 'Layout', 'twentyseventeen' ),
    7271        ) );
    7372
    74         // Page Options.
    75         $wp_customize->add_section( 'page_options', array(
    76                 'title'           => __( 'Single Page Layout', 'twentyseventeen' ),
    77                 'active_callback' => 'twentyseventeen_is_page',
    78                 'panel'           => 'options_panel',
    79         ) );
    80 
    81         $wp_customize->add_setting( 'page_options', array(
     73        $wp_customize->add_setting( 'page_layout', array(
    8274                'default'           => 'two-column',
    83                 'sanitize_callback' => 'twentyseventeen_sanitize_layout',
     75                'sanitize_callback' => 'twentyseventeen_sanitize_page_layout',
    8476                'transport'         => 'postMessage',
    8577        ) );
    8678
    87         $wp_customize->add_control( 'page_options', array(
     79        $wp_customize->add_control( 'page_layout', array(
    8880                'label'       => __( 'Page Layout', 'twentyseventeen' ),
    89                 'section'     => 'page_options',
     81                'section'     => 'layout',
    9082                'type'        => 'radio',
    9183                'description' => __( 'When no sidebar widgets are assigned, you can opt to display all pages with a one column or two column layout. When the two column layout is assigned, the page title is in one column and content is in the other.', 'twentyseventeen' ),
    9284                'choices'     => array(
     
    9385                        'one-column' => __( 'One Column', 'twentyseventeen' ),
    9486                        'two-column' => __( 'Two Column', 'twentyseventeen' ),
    9587                ),
     88                'active_callback' => 'twentyseventeen_is_page_without_sidebar',
    9689        ) );
    9790
    98         // Panel 1.
    99         $wp_customize->add_section( 'panel_1', array(
    100                 'title'           => __( 'Panel 1', 'twentyseventeen' ),
    101                 'active_callback' => 'is_front_page',
    102                 'panel'           => 'options_panel',
    103                 'description'     => __( 'Add an image to your panel by setting a featured image in the page editor. If you don&rsquo;t select a page, this panel will not be displayed.', 'twentyseventeen' ),
     91        /**
     92         * Front page sections.
     93         */
     94        $wp_customize->add_section( 'front_page_sections', array(
     95                'title'           => __( 'Front Page Sections', 'twentyseventeen' ),
     96                'active_callback' => 'twentyseventeen_is_static_front_page',
     97                'description'     => __( 'Select pages to feature in each area from the dropdowns. Add an image to a section by setting a featured image in the page editor. Empty sections will not be displayed.', 'twentyseventeen' ),
     98                'priority'        => 121, // Immediately after the static front page section.
    10499        ) );
    105100
    106         $wp_customize->add_setting( 'panel_1', array(
    107                 'default'           => false,
    108                 'sanitize_callback' => 'absint',
    109         ) );
     101        /**
     102         * Filter number of front page sections in Twenty Seventeen.
     103         *
     104         * @since Twenty Seventeen 1.0
     105         *
     106         * @param $num_sections integer
     107         */
     108        $num_sections = apply_filters( 'twentyseventeen_front_page_sections', 4 );
    110109
    111         $wp_customize->add_control( 'panel_1', array(
    112                 'label'   => __( 'Panel Content', 'twentyseventeen' ),
    113                 'section' => 'panel_1',
    114                 'type'    => 'dropdown-pages',
    115         ) );
     110        // Create a setting and control for each of the sections available in the theme.
     111        for ( $i = 1; $i < ( 1 + $num_sections ); $i++ ) {
     112                $wp_customize->add_setting( 'panel_' . $i, array(
     113                        'default'           => false,
     114                        'sanitize_callback' => 'absint',
     115                        'transport'         => 'postMessage',
     116                ) );
    116117
    117         // Panel 2.
    118         $wp_customize->add_section( 'panel_2', array(
    119                 'title'           => __( 'Panel 2', 'twentyseventeen' ),
    120                 'active_callback' => 'is_front_page',
    121                 'panel'           => 'options_panel',
    122                 'description'     => __( 'Add an image to your panel by setting a featured image in the page editor. If you don&rsquo;t select a page, this panel will not be displayed.', 'twentyseventeen' ),
    123         ) );
     118                $wp_customize->add_control( 'panel_' . $i, array(
     119                        /* translators: %d is the front page section number */
     120                        'label'   => sprintf( __( 'Section %d Content', 'twentyseventeen' ), $i ),
     121                        'section' => 'front_page_sections',
     122                        'type'    => 'dropdown-pages',
     123                        'add_new' => true, // @see https://core.trac.wordpress.org/ticket/38164.
     124                ) );
    124125
    125         $wp_customize->add_setting( 'panel_2', array(
    126                 'default'           => false,
    127                 'sanitize_callback' => 'absint',
    128         ) );
    129 
    130         $wp_customize->add_control( 'panel_2', array(
    131                 'label'   => __( 'Panel Content', 'twentyseventeen' ),
    132                 'section' => 'panel_2',
    133                 'type'    => 'dropdown-pages',
    134         ) );
    135 
    136         // Panel 3.
    137         $wp_customize->add_section( 'panel_3', array(
    138                 'title'           => __( 'Panel 3', 'twentyseventeen' ),
    139                 'active_callback' => 'is_front_page',
    140                 'panel'           => 'options_panel',
    141                 'description'     => __( 'Add an image to your panel by setting a featured image in the page editor. If you don&rsquo;t select a page, this panel will not be displayed.', 'twentyseventeen' ),
    142         ) );
    143 
    144         $wp_customize->add_setting( 'panel_3', array(
    145                 'default'           => false,
    146                 'sanitize_callback' => 'absint',
    147         ) );
    148 
    149         $wp_customize->add_control( 'panel_3', array(
    150                 'label'   => __( 'Panel Content', 'twentyseventeen' ),
    151                 'section' => 'panel_3',
    152                 'type'    => 'dropdown-pages',
    153         ) );
    154 
    155         // Panel 4.
    156         $wp_customize->add_section( 'panel_4', array(
    157                 'title'           => __( 'Panel 4', 'twentyseventeen' ),
    158                 'active_callback' => 'is_front_page',
    159                 'panel'           => 'options_panel',
    160                 'description'     => __( 'Add an image to your panel by setting a featured image in the page editor. If you don&rsquo;t select a page, this panel will not be displayed.', 'twentyseventeen' ),
    161         ) );
    162 
    163         $wp_customize->add_setting( 'panel_4', array(
    164                 'default'           => false,
    165                 'sanitize_callback' => 'absint',
    166         ) );
    167 
    168         $wp_customize->add_control( 'panel_4', array(
    169                 'label'   => __( 'Panel Content', 'twentyseventeen' ),
    170                 'section' => 'panel_4',
    171                 'type'    => 'dropdown-pages',
    172         ) );
     126                $wp_customize->selective_refresh->add_partial( 'panel_' . $i, array(
     127                        'selector'            => '#panel' . $i,
     128                        'render_callback'     => 'twentyseventeen_front_page_section',
     129                        'container_inclusive' => true,
     130                ));
     131        }
    173132}
    174133add_action( 'customize_register', 'twentyseventeen_customize_register' );
    175134
    176135/**
    177  * Sanitize a radio button.
     136 * Sanitize the page layout options.
    178137 */
    179 function twentyseventeen_sanitize_layout( $input ) {
     138function twentyseventeen_sanitize_page_layout( $input ) {
    180139        $valid = array(
    181140                'one-column' => __( 'One Column', 'twentyseventeen' ),
    182141                'two-column' => __( 'Two Column', 'twentyseventeen' ),
     
    203162}
    204163
    205164/**
    206  * Binds JS handlers to make Theme Customizer preview reload changes asynchronously.
     165 * Return whether we're previewing the front page and it's a static page.
    207166 */
     167function twentyseventeen_is_static_front_page() {
     168        return ( is_front_page() && ! is_home() );
     169}
     170
     171/**
     172 * Return whether we're previewing a page and there are no widgets in the sidebar.
     173 */
     174function twentyseventeen_is_page_without_sidebar() {
     175        return ( is_page() && ! is_active_sidebar( 'sidebar-1' ) );
     176}
     177
     178/**
     179 * Bind JS handlers to instantly live-preview changes.
     180 */
    208181function twentyseventeen_customize_preview_js() {
    209         wp_enqueue_script( 'twentyseventeen-customizer', get_theme_file_uri( '/assets/js/customizer.js' ), array( 'customize-preview' ), '1.0', true );
     182        wp_enqueue_script( 'twentyseventeen-customize-preview', get_theme_file_uri( '/assets/js/customize-preview.js' ), array( 'customize-preview' ), '1.0', true );
    210183}
    211184add_action( 'customize_preview_init', 'twentyseventeen_customize_preview_js' );
    212185
    213186/**
    214  * Some extra JavaScript to improve the user experience in the Customizer for this theme.
     187 * Load dynamic logic for the customizer controls area.
    215188 */
    216189function twentyseventeen_panels_js() {
    217         wp_enqueue_script( 'twentyseventeen-panel-customizer', get_theme_file_uri( '/assets/js/panel-customizer.js' ), array(), '1.0', true );
     190        wp_enqueue_script( 'twentyseventeen-customize-controls', get_theme_file_uri( '/assets/js/customize-controls.js' ), array(), '1.0', true );
    218191}
    219192add_action( 'customize_controls_enqueue_scripts', 'twentyseventeen_panels_js' );
  • src/wp-content/themes/twentyseventeen/inc/template-functions.php

     
    4646
    4747        // Add class for one or two column page layouts.
    4848        if ( is_page() ) {
    49                 if ( 'one-column' === get_theme_mod( 'page_options' ) ) {
     49                if ( 'one-column' === get_theme_mod( 'page_layout' ) ) {
    5050                        $classes[] = 'page-one-column';
    5151                } else {
    5252                        $classes[] = 'page-two-column';
     
    7272 * Primarily used to see if we have any panels active, duh.
    7373 */
    7474function twentyseventeen_panel_count() {
    75         $panels = array( '1', '2', '3', '4' );
     75
    7676        $panel_count = 0;
    7777
    78         foreach ( $panels as $panel ) {
    79                 if ( get_theme_mod( 'panel_' . $panel ) ) {
     78        /**
     79         * Filter number of front page sections in Twenty Seventeen.
     80         *
     81         * @since Twenty Seventeen 1.0
     82         *
     83         * @param $num_sections integer
     84         */
     85        $num_sections = apply_filters( 'twentyseventeen_front_page_sections', 4 );
     86
     87        // Create a setting and control for each of the sections available in the theme.
     88        for ( $i = 1; $i < ( 1 + $num_sections ); $i++ ) {
     89                if ( get_theme_mod( 'panel_' . $i ) ) {
    8090                        $panel_count++;
    8191                }
    8292        }
     
    90100function twentyseventeen_is_frontpage() {
    91101        return ( is_front_page() && ! is_home() );
    92102}
    93 
    94 /**
    95  * Custom Active Callback to check for page.
    96  */
    97 function twentyseventeen_is_page() {
    98         return ( is_page() );
    99 }
  • src/wp-content/themes/twentyseventeen/inc/template-tags.php

     
    120120}
    121121endif;
    122122
     123/**
     124 * Display a front page section.
     125 *
     126 * @param $partial WP_Customize_Partial Partial associated with a selective refresh request.
     127 * @param $id integer Front page section to display.
     128 */
     129function twentyseventeen_front_page_section( $partial = null, $id = 0 ) {
     130        if ( is_a( $partial, 'WP_Customize_Partial' ) ) {
     131                // Find out the id and set it up during a selective refresh.
     132                global $twentyseventeencounter;
     133                $id = str_replace( 'panel_', '', $partial->id );
     134                $twentyseventeencounter = $id;
     135        }
    123136
     137        global $post; // Modify the global post object before setting up post data.
     138        if ( get_theme_mod( 'panel_' . $id ) ) {
     139                global $post;
     140                $post = get_post( get_theme_mod( 'panel_' . $id ) );
     141                setup_postdata( $post );
     142                set_query_var( 'panel', $id );
     143
     144                get_template_part( 'components/page/content', 'front-page-panels' );
     145
     146                wp_reset_postdata();
     147        } else {
     148                // The output placeholder anchor.
     149                echo '<article class="panel-placeholder panel twentyseventeen-panel twentyseventeen-panel' . $id . '" id="panel' . $id . '"><span class="twentyseventeen-panel-title">' . sprintf( __( 'Panel %1$s Placeholder', 'twentyseventeen' ), $id ) . '</span></article>';
     150        }
     151}
     152
    124153/**
    125154 * Returns true if a blog has more than 1 category.
    126155 *
  • src/wp-content/themes/twentyseventeen/style.css

     
    28952895# Customizer
    28962896--------------------------------------------------------------*/
    28972897
    2898 /* Hide this until we're in the Customizer */
    2899 
    2900 .twentyseventeen-panel-title {
     2898/* Hide placeholders until we're in the front page sections section */
     2899.panel-placeholder {
    29012900        display: none;
    29022901}
    29032902
    2904 .twentyseventeen-customizer.twentyseventeen-front-page .twentyseventeen-panel {
    2905         /* Colour-code all panels (add 1 to account for #twentyseventeen-hero, so 2 is actually panel 1)*/
    2906 }
    2907 
    2908 .twentyseventeen-customizer.twentyseventeen-front-page .twentyseventeen-panel:after {
    2909         border: 2px dashed;
    2910         bottom: 1em;
    2911         content: "";
     2903.twentyseventeen-customizer.twentyseventeen-front-page .twentyseventeen-panel .twentyseventeen-panel-title {
    29122904        display: block;
    2913         left: 1em;
    2914         position: absolute;
    2915         right: 1em;
    2916         top: 1em;
    2917 }
    2918 
    2919 .twentyseventeen-customizer.twentyseventeen-front-page .twentyseventeen-panel .twentyseventeen-panel-title {
    2920         color: #fff;
    2921         display: inline-block;
    29222905        font-size: 14px;
    29232906        font-size: 0.875rem;
    29242907        font-weight: 700;
    29252908        letter-spacing: 1px;
    2926         padding: 5px 10px;
    2927         position: absolute;
    2928         right: 3.2em;
     2909        padding: 3em;
    29292910        text-transform: uppercase;
    2930         top: 3.2em;
    2931         -webkit-transform: translate(3px, -3px);
    2932         -ms-transform: translate(3px, -3px);
    2933         transform: translate(3px, -3px);
    2934         z-index: 3;
     2911        text-align: center;
    29352912}
    29362913
    2937 .twentyseventeen-customizer.twentyseventeen-front-page .twentyseventeen-panel:nth-of-type(1):after {
    2938         border: none;
    2939 }
    2940 
    2941 .twentyseventeen-customizer.twentyseventeen-front-page .twentyseventeen-panel:nth-of-type(2) .twentyseventeen-panel-title {
    2942         background: #b569a2;
    2943 }
    2944 
    2945 .twentyseventeen-customizer.twentyseventeen-front-page .twentyseventeen-panel:nth-of-type(2):after {
    2946         border-color: #b569a2;
    2947         color: #b569a2;
    2948 }
    2949 
    2950 .twentyseventeen-customizer.twentyseventeen-front-page .twentyseventeen-panel:nth-of-type(3) .twentyseventeen-panel-title {
    2951         background: #8f68bd;
    2952 }
    2953 
    2954 .twentyseventeen-customizer.twentyseventeen-front-page .twentyseventeen-panel:nth-of-type(3):after {
    2955         border-color: #8f68bd;
    2956         color: #8f68bd;
    2957 }
    2958 
    2959 .twentyseventeen-customizer.twentyseventeen-front-page .twentyseventeen-panel:nth-of-type(4) .twentyseventeen-panel-title {
    2960         background: #575ebd;
    2961 }
    2962 
    2963 .twentyseventeen-customizer.twentyseventeen-front-page .twentyseventeen-panel:nth-of-type(4):after {
    2964         border-color: #575ebd;
    2965         color: #575ebd;
    2966 }
    2967 
    2968 /* Add a highlight class to improve Customizer behaviour */
    2969 
    2970 @-webkit-keyframes flash {
    2971 
    2972         0%,
    2973         20%,
    2974         40%,
    2975         60%,
    2976         80%,
    2977         100% {
    2978                 opacity: 1;
    2979         }
    2980 
    2981         10%,
    2982         30%,
    2983         50%,
    2984         70%,
    2985         90% {
    2986                 opacity: 0;
    2987         }
    2988 }
    2989 
    2990 @keyframes flash {
    2991 
    2992         0%,
    2993         20%,
    2994         40%,
    2995         60%,
    2996         80%,
    2997         100% {
    2998                 opacity: 1;
    2999         }
    3000 
    3001         10%,
    3002         30%,
    3003         50%,
    3004         70%,
    3005         90% {
    3006                 opacity: 0;
    3007         }
    3008 }
    3009 
    3010 article.panel-placeholder {
    3011         display: none;
    3012 }
    3013 
    3014 .twentyseventeen-front-page.twentyseventeen-customizer #primary article.panel-placeholder {
    3015         border: 0;
    3016 }
    3017 
    3018 .twentyseventeen-customizer .panel-placeholder.twentyseventeen-highlight {
    3019         display: block;
    3020         height: 112px;
    3021 }
    3022 
    3023 .twentyseventeen-highlight:after {
    3024         -webkit-animation-duration: 2s;
    3025         animation-duration: 2s;
    3026         -webkit-animation-name: flash;
    3027         animation-name: flash;
    3028         -webkit-animation-timing-function: ease-in-out;
    3029         animation-timing-function: ease-in-out;
    3030         -webkit-animation-fill-mode: both;
    3031         animation-fill-mode: both;
    3032 }
    3033 
    30342914/*--------------------------------------------------------------
    30352915## SVGs Fallbacks
    30362916--------------------------------------------------------------*/