WordPress.org
Get WordPress

Make WordPress Core

Ticket #38426: 38426.3.diff

File 38426.3.diff, 31.3 KB (added by celloexpressions, 8 years ago)

Merge the two theme sections into generic "theme options", tweak visual edit shortcuts.

  • 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( 'theme_options' ).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                        // Only on the front page.
     14                        if ( ! $( 'body' ).hasClass( 'twentyseventeen-front-page' ) ) {
     15                                return;
     16                        }
     17
     18                        // When the section is expanded, show and scroll to the content placeholders, exposing the edit links.
     19                        if ( true === data.expanded ) {
     20                                $( 'body' ).addClass( 'highlight-front-sections' );
     21                                $( '.panel-placeholder' ).slideDown( 200, function() {
     22                                        $.scrollTo( $( '#panel1' ), {
     23                                                duration: 600,
     24                                                offset: { 'top': -70 } // Account for sticky menu.
     25                                        } );
     26                                });
     27
     28                        // If we've left the panel, hide the placeholders and scroll back to the top
     29                        } else {
     30                                $( 'body' ).removeClass( 'highlight-front-sections' );
     31                                $( '.panel-placeholder' ).slideUp( 200 ); // Don't change scroll when leaving - it's likely to have unintended consequences.
     32                        }
     33                } );
     34        } );
     35
     36        // Site title and description.
     37        wp.customize( 'blogname', function( value ) {
     38                value.bind( function( to ) {
     39                        $( '.site-title a' ).text( to );
     40                } );
     41        } );
     42        wp.customize( 'blogdescription', function( value ) {
     43                value.bind( function( to ) {
     44                        $( '.site-description' ).text( to );
     45                } );
     46        } );
     47
     48        // Header text color.
     49        wp.customize( 'header_textcolor', function( value ) {
     50                value.bind( function( to ) {
     51                        if ( 'blank' === to ) {
     52                                $( '.site-title, .site-description' ).css( {
     53                                        'clip': 'rect(1px, 1px, 1px, 1px)',
     54                                        'position': 'absolute'
     55                                } );
     56                                $( 'body' ).addClass( 'title-tagline-hidden' );
     57                        } else {
     58                                $( '.site-title, .site-description' ).css( {
     59                                        'clip': 'auto',
     60                                        'position': 'relative'
     61                                } );
     62                                $( '.site-branding, .site-branding a, .site-description, .site-description a' ).css( {
     63                                        'color': to
     64                                } );
     65                                $( 'body' ).removeClass( 'title-tagline-hidden' );
     66                        }
     67                } );
     68        } );
     69
     70        // Color scheme.
     71        wp.customize( 'colorscheme', function( value ) {
     72                value.bind( function( to ) {
     73
     74                        // Update color body class.
     75                        $( 'body' ).removeClass( 'colors-light colors-dark colors-custom' )
     76                                   .addClass( 'colors-' + to );
     77                } );
     78        } );
     79
     80        // Custom color hue.
     81        wp.customize( 'colorscheme_hue', function( value ) {
     82                value.bind( function( to ) {
     83
     84                        // Update custom color CSS
     85                        var style = $( '#custom-theme-colors' ),
     86                            hue = style.data( 'hue' ),
     87                            css = style.html();
     88
     89                        css = css.split( hue + ',' ).join( to + ',' ); // Equivalent to css.replaceAll, with hue followed by comma to prevent values with units from being changed.
     90                        style.html( css )
     91                             .data( 'hue', to );
     92                } );
     93        } );
     94
     95        // Page layouts.
     96        wp.customize( 'page_layout', function( value ) {
     97                value.bind( function( to ) {
     98                        if ( 'one-column' === to ) {
     99                                $( 'body' ).addClass( 'page-one-column' ).removeClass( 'page-two-column' );
     100                        } else {
     101                                $( 'body' ).removeClass( 'page-one-column' ).addClass( 'page-two-column' );
     102                        }
     103                } );
     104        } );
     105} )( 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/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 template-parts/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( 'template-parts/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/inc/color-patterns.php

     
    312312.colors-custom .next.page-numbers:focus,
    313313.colors-custom .next.page-numbers:hover,
    314314.colors-custom .site-content .wp-playlist-light .wp-playlist-item:hover,
    315 .colors-custom .site-content .wp-playlist-light .wp-playlist-item:focus {
     315.colors-custom .site-content .wp-playlist-light .wp-playlist-item:focus,
     316.colors-custom .customize-partial-edit-shortcut:before {
    316317        background: hsl( ' . esc_attr( $hue ) . ', ' . esc_attr( $saturation ) . ', 46% ); /* base: #767676; */
    317318}
    318319

  • 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
    … …  
    6060        ) ) );
    6161
    6262        /**
    63          * Add the Theme Options section.
     63         * Theme options.
    6464         */
    65         $wp_customize->add_panel( 'options_panel', array(
    66                 'title'       => __( 'Theme Options', 'twentyseventeen' ),
    67                 'description' => __( 'Configure your theme settings', 'twentyseventeen' ),
     65        $wp_customize->add_section( 'theme_options', array(
     66                'title'    => __( 'Theme Options', 'twentyseventeen' ),
     67                'priority' => 130, // Before Additional CSS.
    6868        ) );
    6969
    70         // Page Options.
    71         $wp_customize->add_section( 'page_options', array(
    72                 'title'           => __( 'Single Page Layout', 'twentyseventeen' ),
    73                 'active_callback' => 'twentyseventeen_is_page',
    74                 'panel'           => 'options_panel',
    75         ) );
    76 
    77         $wp_customize->add_setting( 'page_options', array(
     70        $wp_customize->add_setting( 'page_layout', array(
    7871                'default'           => 'two-column',
    79                 'sanitize_callback' => 'twentyseventeen_sanitize_layout',
     72                'sanitize_callback' => 'twentyseventeen_sanitize_page_layout',
    8073                'transport'         => 'postMessage',
    8174        ) );
    8275
    83         $wp_customize->add_control( 'page_options', array(
     76        $wp_customize->add_control( 'page_layout', array(
    8477                'label'       => __( 'Page Layout', 'twentyseventeen' ),
    85                 'section'     => 'page_options',
     78                'section'     => 'theme_options',
    8679                'type'        => 'radio',
    8780                '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' ),
    8881                'choices'     => array(
    … …  
    8982                        'one-column' => __( 'One Column', 'twentyseventeen' ),
    9083                        'two-column' => __( 'Two Column', 'twentyseventeen' ),
    9184                ),
     85                'active_callback' => 'twentyseventeen_is_page_without_sidebar',
    9286        ) );
    9387
    94         // Panel 1.
    95         $wp_customize->add_section( 'panel_1', array(
    96                 'title'           => __( 'Panel 1', 'twentyseventeen' ),
    97                 'active_callback' => 'is_front_page',
    98                 'panel'           => 'options_panel',
    99                 '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' ),
    100         ) );
     88        /**
     89         * Filter number of front page sections in Twenty Seventeen.
     90         *
     91         * @since Twenty Seventeen 1.0
     92         *
     93         * @param $num_sections integer
     94         */
     95        $num_sections = apply_filters( 'twentyseventeen_front_page_sections', 4 );
    10196
    102         $wp_customize->add_setting( 'panel_1', array(
    103                 'default'           => false,
    104                 'sanitize_callback' => 'absint',
    105         ) );
     97        // Create a setting and control for each of the sections available in the theme.
     98        for ( $i = 1; $i < ( 1 + $num_sections ); $i++ ) {
     99                $wp_customize->add_setting( 'panel_' . $i, array(
     100                        'default'           => false,
     101                        'sanitize_callback' => 'absint',
     102                        'transport'         => 'postMessage',
     103                ) );
    106104
    107         $wp_customize->add_control( 'panel_1', array(
    108                 'label'   => __( 'Panel Content', 'twentyseventeen' ),
    109                 'section' => 'panel_1',
    110                 'type'    => 'dropdown-pages',
    111         ) );
     105                $wp_customize->add_control( 'panel_' . $i, array(
     106                        /* translators: %d is the front page section number */
     107                        'label'          => sprintf( __( 'Front Page Section %d Content', 'twentyseventeen' ), $i ),
     108                        'description'    => ( 1 !== $i ? '' : __( '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' ) ),
     109                        'section'        => 'theme_options',
     110                        'type'           => 'dropdown-pages',
     111                        'allow_addition' => true,
     112                        'active_callback' => 'twentyseventeen_is_static_front_page',
     113                ) );
    112114
    113         // Panel 2.
    114         $wp_customize->add_section( 'panel_2', array(
    115                 'title'           => __( 'Panel 2', 'twentyseventeen' ),
    116                 'active_callback' => 'is_front_page',
    117                 'panel'           => 'options_panel',
    118                 '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' ),
    119         ) );
    120 
    121         $wp_customize->add_setting( 'panel_2', array(
    122                 'default'           => false,
    123                 'sanitize_callback' => 'absint',
    124         ) );
    125 
    126         $wp_customize->add_control( 'panel_2', array(
    127                 'label'   => __( 'Panel Content', 'twentyseventeen' ),
    128                 'section' => 'panel_2',
    129                 'type'    => 'dropdown-pages',
    130         ) );
    131 
    132         // Panel 3.
    133         $wp_customize->add_section( 'panel_3', array(
    134                 'title'           => __( 'Panel 3', 'twentyseventeen' ),
    135                 'active_callback' => 'is_front_page',
    136                 'panel'           => 'options_panel',
    137                 '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' ),
    138         ) );
    139 
    140         $wp_customize->add_setting( 'panel_3', array(
    141                 'default'           => false,
    142                 'sanitize_callback' => 'absint',
    143         ) );
    144 
    145         $wp_customize->add_control( 'panel_3', array(
    146                 'label'   => __( 'Panel Content', 'twentyseventeen' ),
    147                 'section' => 'panel_3',
    148                 'type'    => 'dropdown-pages',
    149         ) );
    150 
    151         // Panel 4.
    152         $wp_customize->add_section( 'panel_4', array(
    153                 'title'           => __( 'Panel 4', 'twentyseventeen' ),
    154                 'active_callback' => 'is_front_page',
    155                 'panel'           => 'options_panel',
    156                 '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' ),
    157         ) );
    158 
    159         $wp_customize->add_setting( 'panel_4', array(
    160                 'default'           => false,
    161                 'sanitize_callback' => 'absint',
    162         ) );
    163 
    164         $wp_customize->add_control( 'panel_4', array(
    165                 'label'   => __( 'Panel Content', 'twentyseventeen' ),
    166                 'section' => 'panel_4',
    167                 'type'    => 'dropdown-pages',
    168         ) );
     115                $wp_customize->selective_refresh->add_partial( 'panel_' . $i, array(
     116                        'selector'            => '#panel' . $i,
     117                        'render_callback'     => 'twentyseventeen_front_page_section',
     118                        'container_inclusive' => true,
     119                ) );
     120        }
    169121}
    170122add_action( 'customize_register', 'twentyseventeen_customize_register' );
    171123
    172124/**
    173  * Sanitize a radio button.
     125 * Sanitize the page layout options.
    174126 */
    175 function twentyseventeen_sanitize_layout( $input ) {
     127function twentyseventeen_sanitize_page_layout( $input ) {
    176128        $valid = array(
    177129                'one-column' => __( 'One Column', 'twentyseventeen' ),
    178130                'two-column' => __( 'Two Column', 'twentyseventeen' ),
    … …  
    223175}
    224176
    225177/**
    226  * Binds JS handlers to make Theme Customizer preview reload changes asynchronously.
     178 * Return whether we're previewing the front page and it's a static page.
    227179 */
     180function twentyseventeen_is_static_front_page() {
     181        return ( is_front_page() && ! is_home() );
     182}
     183
     184/**
     185 * Return whether we're previewing a page and there are no widgets in the sidebar.
     186 */
     187function twentyseventeen_is_page_without_sidebar() {
     188        return ( is_page() && ! is_active_sidebar( 'sidebar-1' ) );
     189}
     190
     191/**
     192 * Bind JS handlers to instantly live-preview changes.
     193 */
    228194function twentyseventeen_customize_preview_js() {
    229         wp_enqueue_script( 'twentyseventeen-customizer', get_theme_file_uri( '/assets/js/customizer.js' ), array( 'customize-preview' ), '1.0', true );
     195        wp_enqueue_script( 'twentyseventeen-customize-preview', get_theme_file_uri( '/assets/js/customize-preview.js' ), array( 'customize-preview' ), '1.0', true );
    230196}
    231197add_action( 'customize_preview_init', 'twentyseventeen_customize_preview_js' );
    232198
    233199/**
    234  * Some extra JavaScript to improve the user experience in the Customizer for this theme.
     200 * Load dynamic logic for the customizer controls area.
    235201 */
    236202function twentyseventeen_panels_js() {
    237         wp_enqueue_script( 'twentyseventeen-panel-customizer', get_theme_file_uri( '/assets/js/panel-customizer.js' ), array(), '1.0', true );
     203        wp_enqueue_script( 'twentyseventeen-customize-controls', get_theme_file_uri( '/assets/js/customize-controls.js' ), array(), '1.0', true );
    238204}
    239205add_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

     
    125125}
    126126endif;
    127127
     128/**
     129 * Display a front page section.
     130 *
     131 * @param $partial WP_Customize_Partial Partial associated with a selective refresh request.
     132 * @param $id integer Front page section to display.
     133 */
     134function twentyseventeen_front_page_section( $partial = null, $id = 0 ) {
     135        if ( is_a( $partial, 'WP_Customize_Partial' ) ) {
     136                // Find out the id and set it up during a selective refresh.
     137                global $twentyseventeencounter;
     138                $id = str_replace( 'panel_', '', $partial->id );
     139                $twentyseventeencounter = $id;
     140        }
    128141
     142        global $post; // Modify the global post object before setting up post data.
     143        if ( get_theme_mod( 'panel_' . $id ) ) {
     144                global $post;
     145                $post = get_post( get_theme_mod( 'panel_' . $id ) );
     146                setup_postdata( $post );
     147                set_query_var( 'panel', $id );
     148
     149                get_template_part( 'template-parts/page/content', 'front-page-panels' );
     150
     151                wp_reset_postdata();
     152        } else {
     153                // The output placeholder anchor.
     154                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>';
     155        }
     156}
     157
    129158/**
    130159 * Returns true if a blog has more than 1 category.
    131160 *

  • src/wp-content/themes/twentyseventeen/style.css

     
    29032903# Customizer
    29042904--------------------------------------------------------------*/
    29052905
    2906 /* Hide this until we're in the Customizer */
    2907 
    2908 .twentyseventeen-panel-title {
     2906/* Hide placeholders until we're in the front page sections section */
     2907.panel-placeholder {
    29092908        display: none;
    29102909}
    29112910
    2912 .twentyseventeen-customizer.twentyseventeen-front-page .twentyseventeen-panel {
    2913         /* Colour-code all panels (add 1 to account for #twentyseventeen-hero, so 2 is actually panel 1)*/
    2914 }
    2915 
    2916 .twentyseventeen-customizer.twentyseventeen-front-page .twentyseventeen-panel:after {
     2911.highlight-front-sections.twentyseventeen-customizer.twentyseventeen-front-page .twentyseventeen-panel:after {
    29172912        border: 2px dashed;
    29182913        bottom: 1em;
    29192914        content: "";
    … …  
    29222917        position: absolute;
    29232918        right: 1em;
    29242919        top: 1em;
     2920        z-index: -1; /* Prevent :after from preventing interactions within the section */
    29252921}
    29262922
     2923/* Used for placeholder text */
    29272924.twentyseventeen-customizer.twentyseventeen-front-page .twentyseventeen-panel .twentyseventeen-panel-title {
    2928         color: #fff;
    2929         display: inline-block;
     2925        display: block;
    29302926        font-size: 14px;
    29312927        font-size: 0.875rem;
    29322928        font-weight: 700;
    29332929        letter-spacing: 1px;
    2934         padding: 5px 10px;
    2935         position: absolute;
    2936         right: 3.2em;
     2930        padding: 3em;
    29372931        text-transform: uppercase;
    2938         top: 3.2em;
    2939         -webkit-transform: translate(3px, -3px);
    2940         -ms-transform: translate(3px, -3px);
    2941         transform: translate(3px, -3px);
    2942         z-index: 3;
     2932        text-align: center;
    29432933}
    29442934
    2945 .twentyseventeen-customizer.twentyseventeen-front-page .twentyseventeen-panel:nth-of-type(1):after {
     2935/* Show borders on the custom page panels only when the front page sections are being edited */
     2936.highlight-front-sections.twentyseventeen-customizer.twentyseventeen-front-page .twentyseventeen-panel:nth-of-type(1):after {
    29462937        border: none;
    29472938}
    29482939
    2949 .twentyseventeen-customizer.twentyseventeen-front-page .twentyseventeen-panel:nth-of-type(2) .twentyseventeen-panel-title {
    2950         background: #b569a2;
    2951 }
    2952 
    2953 .twentyseventeen-customizer.twentyseventeen-front-page .twentyseventeen-panel:nth-of-type(2):after {
     2940.highlight-front-sections.twentyseventeen-customizer.twentyseventeen-front-page .twentyseventeen-panel:nth-of-type(2):after {
    29542941        border-color: #b569a2;
    29552942        color: #b569a2;
    29562943}
    29572944
    2958 .twentyseventeen-customizer.twentyseventeen-front-page .twentyseventeen-panel:nth-of-type(3) .twentyseventeen-panel-title {
    2959         background: #8f68bd;
    2960 }
    2961 
    2962 .twentyseventeen-customizer.twentyseventeen-front-page .twentyseventeen-panel:nth-of-type(3):after {
     2945.highlight-front-sections.twentyseventeen-customizer.twentyseventeen-front-page .twentyseventeen-panel:nth-of-type(3):after {
    29632946        border-color: #8f68bd;
    29642947        color: #8f68bd;
    29652948}
    29662949
    2967 .twentyseventeen-customizer.twentyseventeen-front-page .twentyseventeen-panel:nth-of-type(4) .twentyseventeen-panel-title {
    2968         background: #575ebd;
    2969 }
    2970 
    2971 .twentyseventeen-customizer.twentyseventeen-front-page .twentyseventeen-panel:nth-of-type(4):after {
     2950.highlight-front-sections.twentyseventeen-customizer.twentyseventeen-front-page .twentyseventeen-panel:nth-of-type(4):after {
    29722951        border-color: #575ebd;
    29732952        color: #575ebd;
    29742953}
    29752954
    2976 /* Add a highlight class to improve Customizer behaviour */
    2977 
    2978 @-webkit-keyframes flash {
    2979 
    2980         0%,
    2981         20%,
    2982         40%,
    2983         60%,
    2984         80%,
    2985         100% {
    2986                 opacity: 1;
    2987         }
    2988 
    2989         10%,
    2990         30%,
    2991         50%,
    2992         70%,
    2993         90% {
    2994                 opacity: 0;
    2995         }
     2955.twentyseventeen-front-page.twentyseventeen-customizer #primary article.panel-placeholder {
     2956        border: 0;
    29962957}
    29972958
    2998 @keyframes flash {
    2999 
    3000         0%,
    3001         20%,
    3002         40%,
    3003         60%,
    3004         80%,
    3005         100% {
    3006                 opacity: 1;
    3007         }
    3008 
    3009         10%,
    3010         30%,
    3011         50%,
    3012         70%,
    3013         90% {
    3014                 opacity: 0;
    3015         }
     2959/* Add some space around the visual edit shortcut buttons. */
     2960.twentyseventeen-panel .customize-partial-edit-shortcut:before {
     2961        top: 30px;
     2962        left: 30px;
    30162963}
    30172964
    3018 article.panel-placeholder {
    3019         display: none;
     2965/* Prevent color schemes from showing 1px dots everywhere. */
     2966.customize-partial-edit-shortcut {
     2967        background: transparent !important;
    30202968}
    30212969
    3022 .twentyseventeen-front-page.twentyseventeen-customizer #primary article.panel-placeholder {
    3023         border: 0;
     2970/* Ensure that placeholder icons are visible. */
     2971.twentyseventeen-panel .customize-partial-edit-shortcut-hidden:before {
     2972        visibility: visible;
    30242973}
    30252974
    3026 .twentyseventeen-customizer .panel-placeholder.twentyseventeen-highlight {
    3027         display: block;
    3028         height: 112px;
     2975/* Prevent icon colors from clashing with color schemes. */
     2976.colors-custom .customize-partial-edit-shortcut:before {
     2977        text-shadow: 0 -1px 1px rgba(0,0,0,.2),
     2978                     1px 0 1px rgba(0,0,0,.2),
     2979                     0 1px 1px rgba(0,0,0,.2),
     2980                    -1px 0 1px rgba(0,0,0,.2);
    30292981}
    30302982
    3031 .twentyseventeen-highlight:after {
    3032         -webkit-animation-duration: 2s;
    3033         animation-duration: 2s;
    3034         -webkit-animation-name: flash;
    3035         animation-name: flash;
    3036         -webkit-animation-timing-function: ease-in-out;
    3037         animation-timing-function: ease-in-out;
    3038         -webkit-animation-fill-mode: both;
    3039         animation-fill-mode: both;
    3040 }
    30412983
    30422984/*--------------------------------------------------------------
    30432985## SVGs Fallbacks

  • src/wp-content/themes/twentyseventeen/template-parts/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