Make WordPress Core

Ticket #38426: 38426.2.diff

File 38426.2.diff, 29.8 KB (added by celloexpressions, 8 years ago)

Refresh for directory structure change, restore panel borders when editing sections, integrate with [38906].

  • 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                                $( 'body' ).addClass( 'highlight-front-sections' );
     16                                $( '.panel-placeholder' ).slideDown( 200, function() {
     17                                        $.scrollTo( $( '#panel1' ), {
     18                                                duration: 600,
     19                                                offset: { 'top': -70 } // Account for sticky menu.
     20                                        } );
     21                                });
     22
     23                        // If we've left the panel, hide the placeholders and scroll back to the top
     24                        } else {
     25                                $( 'body' ).removeClass( 'highlight-front-sections' );
     26                                $.scrollTo( $( '#masthead' ), {
     27                                        duration: 300,
     28                                        offset: { 'top': 0 }
     29                                } );
     30                                $( '.panel-placeholder' ).slideUp( 200 );
     31                        }
     32                } );
     33        } );
     34
     35        // Site title and description.
     36        wp.customize( 'blogname', function( value ) {
     37                value.bind( function( to ) {
     38                        $( '.site-title a' ).text( to );
     39                } );
     40        } );
     41        wp.customize( 'blogdescription', function( value ) {
     42                value.bind( function( to ) {
     43                        $( '.site-description' ).text( to );
     44                } );
     45        } );
     46
     47        // Header text color.
     48        wp.customize( 'header_textcolor', function( value ) {
     49                value.bind( function( to ) {
     50                        if ( 'blank' === to ) {
     51                                $( '.site-title, .site-description' ).css( {
     52                                        'clip': 'rect(1px, 1px, 1px, 1px)',
     53                                        'position': 'absolute'
     54                                } );
     55                                $( 'body' ).addClass( 'title-tagline-hidden' );
     56                        } else {
     57                                $( '.site-title, .site-description' ).css( {
     58                                        'clip': 'auto',
     59                                        'position': 'relative'
     60                                } );
     61                                $( '.site-branding, .site-branding a, .site-description, .site-description a' ).css( {
     62                                        'color': to
     63                                } );
     64                                $( 'body' ).removeClass( 'title-tagline-hidden' );
     65                        }
     66                } );
     67        } );
     68
     69        // Color scheme.
     70        wp.customize( 'colorscheme', function( value ) {
     71                value.bind( function( to ) {
     72
     73                        // Update color body class.
     74                        $( 'body' ).removeClass( 'colors-light colors-dark colors-custom' )
     75                                   .addClass( 'colors-' + to );
     76                } );
     77        } );
     78
     79        // Custom color hue.
     80        wp.customize( 'colorscheme_hue', function( value ) {
     81                value.bind( function( to ) {
     82
     83                        // Update custom color CSS
     84                        var style = $( '#custom-theme-colors' ),
     85                            hue = style.data( 'hue' ),
     86                            css = style.html();
     87
     88                        css = css.split( hue + ',' ).join( to + ',' ); // Equivalent to css.replaceAll, with hue followed by comma to prevent values with units from being changed.
     89                        style.html( css )
     90                             .data( 'hue', to );
     91                } );
     92        } );
     93
     94        // Page layouts.
     95        wp.customize( 'page_layout', function( value ) {
     96                value.bind( function( to ) {
     97                        if ( 'one-column' === to ) {
     98                                $( 'body' ).addClass( 'page-one-column' ).removeClass( 'page-two-column' );
     99                        } else {
     100                                $( 'body' ).removeClass( 'page-one-column' ).addClass( 'page-two-column' );
     101                        }
     102                } );
     103        } );
     104} )( 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/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         * Layout 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( 'layout', array(
     66                'title'           => __( 'Layout', 'twentyseventeen' ),
    6867        ) );
    6968
    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(
     69        $wp_customize->add_setting( 'page_layout', array(
    7870                'default'           => 'two-column',
    79                 'sanitize_callback' => 'twentyseventeen_sanitize_layout',
     71                'sanitize_callback' => 'twentyseventeen_sanitize_page_layout',
    8072                'transport'         => 'postMessage',
    8173        ) );
    8274
    83         $wp_customize->add_control( 'page_options', array(
     75        $wp_customize->add_control( 'page_layout', array(
    8476                'label'       => __( 'Page Layout', 'twentyseventeen' ),
    85                 'section'     => 'page_options',
     77                'section'     => 'layout',
    8678                'type'        => 'radio',
    8779                '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' ),
    8880                'choices'     => array(
     
    8981                        'one-column' => __( 'One Column', 'twentyseventeen' ),
    9082                        'two-column' => __( 'Two Column', 'twentyseventeen' ),
    9183                ),
     84                'active_callback' => 'twentyseventeen_is_page_without_sidebar',
     85                'priority'        => 130, // Before Additional CSS.
    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' ),
     88        /**
     89         * Front page sections.
     90         */
     91        $wp_customize->add_section( 'front_page_sections', array(
     92                'title'           => __( 'Front Page Sections', 'twentyseventeen' ),
     93                'active_callback' => 'twentyseventeen_is_static_front_page',
     94                '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' ),
     95                'priority'        => 121, // Immediately after the static front page section.
    10096        ) );
    10197
    102         $wp_customize->add_setting( 'panel_1', array(
    103                 'default'           => false,
    104                 'sanitize_callback' => 'absint',
    105         ) );
     98        /**
     99         * Filter number of front page sections in Twenty Seventeen.
     100         *
     101         * @since Twenty Seventeen 1.0
     102         *
     103         * @param $num_sections integer
     104         */
     105        $num_sections = apply_filters( 'twentyseventeen_front_page_sections', 4 );
    106106
    107         $wp_customize->add_control( 'panel_1', array(
    108                 'label'   => __( 'Panel Content', 'twentyseventeen' ),
    109                 'section' => 'panel_1',
    110                 'type'    => 'dropdown-pages',
    111         ) );
     107        // Create a setting and control for each of the sections available in the theme.
     108        for ( $i = 1; $i < ( 1 + $num_sections ); $i++ ) {
     109                $wp_customize->add_setting( 'panel_' . $i, array(
     110                        'default'           => false,
     111                        'sanitize_callback' => 'absint',
     112                        'transport'         => 'postMessage',
     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         ) );
     115                $wp_customize->add_control( 'panel_' . $i, array(
     116                        /* translators: %d is the front page section number */
     117                        'label'          => sprintf( __( 'Section %d Content', 'twentyseventeen' ), $i ),
     118                        'section'        => 'front_page_sections',
     119                        'type'           => 'dropdown-pages',
     120                        'allow_addition' => true,
     121                ) );
    120122
    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         ) );
     123                $wp_customize->selective_refresh->add_partial( 'panel_' . $i, array(
     124                        'selector'            => '#panel' . $i,
     125                        'render_callback'     => 'twentyseventeen_front_page_section',
     126                        'container_inclusive' => true,
     127                ));
     128        }
    169129}
    170130add_action( 'customize_register', 'twentyseventeen_customize_register' );
    171131
    172132/**
    173  * Sanitize a radio button.
     133 * Sanitize the page layout options.
    174134 */
    175 function twentyseventeen_sanitize_layout( $input ) {
     135function twentyseventeen_sanitize_page_layout( $input ) {
    176136        $valid = array(
    177137                'one-column' => __( 'One Column', 'twentyseventeen' ),
    178138                'two-column' => __( 'Two Column', 'twentyseventeen' ),
     
    199159}
    200160
    201161/**
    202  * Binds JS handlers to make Theme Customizer preview reload changes asynchronously.
     162 * Return whether we're previewing the front page and it's a static page.
    203163 */
     164function twentyseventeen_is_static_front_page() {
     165        return ( is_front_page() && ! is_home() );
     166}
     167
     168/**
     169 * Return whether we're previewing a page and there are no widgets in the sidebar.
     170 */
     171function twentyseventeen_is_page_without_sidebar() {
     172        return ( is_page() && ! is_active_sidebar( 'sidebar-1' ) );
     173}
     174
     175/**
     176 * Bind JS handlers to instantly live-preview changes.
     177 */
    204178function twentyseventeen_customize_preview_js() {
    205         wp_enqueue_script( 'twentyseventeen-customizer', get_theme_file_uri( '/assets/js/customizer.js' ), array( 'customize-preview' ), '1.0', true );
     179        wp_enqueue_script( 'twentyseventeen-customize-preview', get_theme_file_uri( '/assets/js/customize-preview.js' ), array( 'customize-preview' ), '1.0', true );
    206180}
    207181add_action( 'customize_preview_init', 'twentyseventeen_customize_preview_js' );
    208182
    209183/**
    210  * Some extra JavaScript to improve the user experience in the Customizer for this theme.
     184 * Load dynamic logic for the customizer controls area.
    211185 */
    212186function twentyseventeen_panels_js() {
    213         wp_enqueue_script( 'twentyseventeen-panel-customizer', get_theme_file_uri( '/assets/js/panel-customizer.js' ), array(), '1.0', true );
     187        wp_enqueue_script( 'twentyseventeen-customize-controls', get_theme_file_uri( '/assets/js/customize-controls.js' ), array(), '1.0', true );
    214188}
    215189add_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

     
    28762876# Customizer
    28772877--------------------------------------------------------------*/
    28782878
    2879 /* Hide this until we're in the Customizer */
    2880 
    2881 .twentyseventeen-panel-title {
     2879/* Hide placeholders until we're in the front page sections section */
     2880.panel-placeholder {
    28822881        display: none;
    28832882}
    28842883
    2885 .twentyseventeen-customizer.twentyseventeen-front-page .twentyseventeen-panel {
    2886         /* Colour-code all panels (add 1 to account for #twentyseventeen-hero, so 2 is actually panel 1)*/
    2887 }
    2888 
    2889 .twentyseventeen-customizer.twentyseventeen-front-page .twentyseventeen-panel:after {
     2884.highlight-front-sections.twentyseventeen-customizer.twentyseventeen-front-page .twentyseventeen-panel:after {
    28902885        border: 2px dashed;
    28912886        bottom: 1em;
    28922887        content: "";
     
    28952890        position: absolute;
    28962891        right: 1em;
    28972892        top: 1em;
     2893        z-index: -1; /* Prevent :after from preventing interactions within the section */
    28982894}
    28992895
     2896/* Used for placeholder text */
    29002897.twentyseventeen-customizer.twentyseventeen-front-page .twentyseventeen-panel .twentyseventeen-panel-title {
    2901         color: #fff;
    2902         display: inline-block;
     2898        display: block;
    29032899        font-size: 14px;
    29042900        font-size: 0.875rem;
    29052901        font-weight: 700;
    29062902        letter-spacing: 1px;
    2907         padding: 5px 10px;
    2908         position: absolute;
    2909         right: 3.2em;
     2903        padding: 3em;
    29102904        text-transform: uppercase;
    2911         top: 3.2em;
    2912         -webkit-transform: translate(3px, -3px);
    2913         -ms-transform: translate(3px, -3px);
    2914         transform: translate(3px, -3px);
    2915         z-index: 3;
     2905        text-align: center;
    29162906}
    29172907
    2918 .twentyseventeen-customizer.twentyseventeen-front-page .twentyseventeen-panel:nth-of-type(1):after {
     2908/* Show borders on the custom page panels only when the front page sections are being edited */
     2909.highlight-front-sections.twentyseventeen-customizer.twentyseventeen-front-page .twentyseventeen-panel:nth-of-type(1):after {
    29192910        border: none;
    29202911}
    29212912
    2922 .twentyseventeen-customizer.twentyseventeen-front-page .twentyseventeen-panel:nth-of-type(2) .twentyseventeen-panel-title {
    2923         background: #b569a2;
    2924 }
    2925 
    2926 .twentyseventeen-customizer.twentyseventeen-front-page .twentyseventeen-panel:nth-of-type(2):after {
     2913.highlight-front-sections.twentyseventeen-customizer.twentyseventeen-front-page .twentyseventeen-panel:nth-of-type(2):after {
    29272914        border-color: #b569a2;
    29282915        color: #b569a2;
    29292916}
    29302917
    2931 .twentyseventeen-customizer.twentyseventeen-front-page .twentyseventeen-panel:nth-of-type(3) .twentyseventeen-panel-title {
    2932         background: #8f68bd;
    2933 }
    2934 
    2935 .twentyseventeen-customizer.twentyseventeen-front-page .twentyseventeen-panel:nth-of-type(3):after {
     2918.highlight-front-sections.twentyseventeen-customizer.twentyseventeen-front-page .twentyseventeen-panel:nth-of-type(3):after {
    29362919        border-color: #8f68bd;
    29372920        color: #8f68bd;
    29382921}
    29392922
    2940 .twentyseventeen-customizer.twentyseventeen-front-page .twentyseventeen-panel:nth-of-type(4) .twentyseventeen-panel-title {
    2941         background: #575ebd;
    2942 }
    2943 
    2944 .twentyseventeen-customizer.twentyseventeen-front-page .twentyseventeen-panel:nth-of-type(4):after {
     2923.highlight-front-sections.twentyseventeen-customizer.twentyseventeen-front-page .twentyseventeen-panel:nth-of-type(4):after {
    29452924        border-color: #575ebd;
    29462925        color: #575ebd;
    29472926}
    29482927
    2949 /* Add a highlight class to improve Customizer behaviour */
    2950 
    2951 @-webkit-keyframes flash {
    2952 
    2953         0%,
    2954         20%,
    2955         40%,
    2956         60%,
    2957         80%,
    2958         100% {
    2959                 opacity: 1;
    2960         }
    2961 
    2962         10%,
    2963         30%,
    2964         50%,
    2965         70%,
    2966         90% {
    2967                 opacity: 0;
    2968         }
    2969 }
    2970 
    2971 @keyframes flash {
    2972 
    2973         0%,
    2974         20%,
    2975         40%,
    2976         60%,
    2977         80%,
    2978         100% {
    2979                 opacity: 1;
    2980         }
    2981 
    2982         10%,
    2983         30%,
    2984         50%,
    2985         70%,
    2986         90% {
    2987                 opacity: 0;
    2988         }
    2989 }
    2990 
    2991 article.panel-placeholder {
    2992         display: none;
    2993 }
    2994 
    29952928.twentyseventeen-front-page.twentyseventeen-customizer #primary article.panel-placeholder {
    29962929        border: 0;
    29972930}
    29982931
    2999 .twentyseventeen-customizer .panel-placeholder.twentyseventeen-highlight {
    3000         display: block;
    3001         height: 112px;
    3002 }
    30032932
    3004 .twentyseventeen-highlight:after {
    3005         -webkit-animation-duration: 2s;
    3006         animation-duration: 2s;
    3007         -webkit-animation-name: flash;
    3008         animation-name: flash;
    3009         -webkit-animation-timing-function: ease-in-out;
    3010         animation-timing-function: ease-in-out;
    3011         -webkit-animation-fill-mode: both;
    3012         animation-fill-mode: both;
    3013 }
    3014 
    30152933/*--------------------------------------------------------------
    30162934## SVGs Fallbacks
    30172935--------------------------------------------------------------*/
  • 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