WordPress.org
Get WordPress

Make WordPress Core

Changeset 38986


Ignore:
Timestamp:
10/27/2016 10:08:33 PM (8 years ago)
Author:
davidakennedy
Message:

Twenty Seventeen: Improve user and developer experience with the customizer integration

  • Rename customizer JS files to customize-preview.js and customize-controls.js to align with the core file naming and make it clearer where each file runs.
  • Only show the colorscheme_hue control when there's a custom color scheme.
  • Update preview JS handling for revised front page section handling, see below.
  • Remove all references to "Theme Customizer" in code comments. It hasn't been called that since before 4.0.
  • Clarify the purpose of the JS files by updated the code comments in the file headers.
  • Improve code readability.
  • Make the arbitrary number of front page sections filterable, for UI registration and output.
  • Rename twentyseventeen_sanitize_layout to twentyseventeen_sanitize_page_layout to be clearer about what it sanitizes in case child themes or plugins consider reusing it.
  • Rename page_options setting/control to page_layout as that's more reflective of what that option does; and again, helps for potential extensions.
  • Make the page layout option contextual to pages and the sidebar being inactive, as the option only applies when there is no sidebar (per its description).
  • Condense options into a single section.
  • Add selective refresh for front page sections.
  • Locate active_callback functions within customizer.php so that they're easier to find when editing customizer registrations, similarly to sanitize callbacks.
  • Adjust the styling for placeholders for panels that aren't active.
  • Ensure that the new visible edit shortcuts don't have any issues.

Props celloexpressions.

Fixes #38426.

Location:
trunk/src/wp-content/themes/twentyseventeen
Files:
7 edited
2 moved

Legend:

Unmodified
Added
Removed

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

    r38982 r38986  
    11/**
    2  * Theme Customizer enhancements, specific to panels, for a better user experience.
     2 * Scripts within the customizer controls window.
    33 *
    4  * This allows us to detect when the user has opened specific sections within the Customizer,
    5  * and adjust our preview pane accordingly.
     4 * Contextually shows the color hue control and informs the preview
     5 * when users open or close the front page sections section.
    66 */
    77
    88( function() {
    9 
    109    wp.customize.bind( 'ready', function() {
    1110
    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 ) {
     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 ) {
    1429
    1530            // 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 } );
     31            wp.customize.previewer.send( 'section-highlight', { expanded: isExpanding } );
    1732        } );
    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 
    4033    } );
    4134} )( jQuery );

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

    r38985 r38986  
    11/**
    2  * File customizer.js.
     2 * File customize-preview.js.
    33 *
    4  * Theme Customizer enhancements for a better user experience.
    5  *
    6  * Contains handlers to make Theme Customizer preview reload changes asynchronously.
     4 * Instantly live-update customizer settings in the preview for improved user experience.
    75 */
    86
    97( function( $ ) {
    108
    11     // Collect information from panel-customizer.js about which panels are opening
     9    // Collect information from customize-controls.js about which panels are opening
    1210    wp.customize.bind( 'preview-ready', function() {
    1311        wp.customize.preview.bind( 'section-highlight', function( data ) {
    1412
    15             // If there's an expanded panel section, scroll down to that panel & highlight in the preview
     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.
    1619            if ( true === data.expanded ) {
    17                 $.scrollTo( $( '.' + data.section ), {
    18                     duration: 600,
    19                     offset: { 'top': -40 }
    20                 } );
    21                 $( '.' + data.section ).addClass( 'twentyseventeen-highlight' );
     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                });
    2227
    23             // If we've left the panel, remove the highlight and scroll back to the top
     28            // If we've left the panel, hide the placeholders and scroll back to the top
    2429            } else {
    25                 $.scrollTo( $( '#masthead' ), {
    26                     duration: 300,
    27                     offset: { 'top': 0 }
    28                 } );
    29                 $( '.' + data.section ).removeClass( 'twentyseventeen-highlight' );
     30                $( 'body' ).removeClass( 'highlight-front-sections' );
     31                $( '.panel-placeholder' ).slideUp( 200 ); // Don't change scroll when leaving - it's likely to have unintended consequences.
    3032            }
    3133        } );
    … …  
    7274            // Update color body class.
    7375            $( 'body' ).removeClass( 'colors-light colors-dark colors-custom' )
    74                 .addClass( 'colors-' + to );
     76                       .addClass( 'colors-' + to );
    7577        } );
    7678    } );
    … …  
    9294
    9395    // Page layouts.
    94     wp.customize( 'page_options', function( value ) {
     96    wp.customize( 'page_layout', function( value ) {
    9597        value.bind( function( to ) {
    9698            if ( 'one-column' === to ) {

  • trunk/src/wp-content/themes/twentyseventeen/front-page.php

    r38875 r38986  
    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' );
    48 
    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     ?>
     49    endif; // The if ( 0 !== twentyseventeen_panel_count() ) ends here. ?>
    6150
    6251    </main><!-- #main -->

  • trunk/src/wp-content/themes/twentyseventeen/inc/color-patterns.php

    r38918 r38986  
    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}

  • trunk/src/wp-content/themes/twentyseventeen/inc/customizer.php

    r38985 r38986  
    11<?php
    22/**
    3  * Twenty Seventeen: Theme Customizer
     3 * Twenty Seventeen: Customizer
    44 *
    55 * @package WordPress
    … …  
    6363
    6464    /**
    65      * Add the Theme Options section.
     65     * Theme options.
    6666     */
    67     $wp_customize->add_panel( 'options_panel', array(
    68         'title'       => __( 'Theme Options', 'twentyseventeen' ),
    69         'description' => __( 'Configure your theme settings', 'twentyseventeen' ),
    70     ) );
    71 
    72     // Page Options.
    73     $wp_customize->add_section( 'page_options', array(
    74         'title'           => __( 'Single Page Layout', 'twentyseventeen' ),
    75         'active_callback' => 'twentyseventeen_is_page',
    76         'panel'           => 'options_panel',
    77     ) );
    78 
    79     $wp_customize->add_setting( 'page_options', array(
     67    $wp_customize->add_section( 'theme_options', array(
     68        'title'    => __( 'Theme Options', 'twentyseventeen' ),
     69        'priority' => 130, // Before Additional CSS.
     70    ) );
     71
     72    $wp_customize->add_setting( 'page_layout', array(
    8073        'default'           => 'two-column',
    81         'sanitize_callback' => 'twentyseventeen_sanitize_layout',
     74        'sanitize_callback' => 'twentyseventeen_sanitize_page_layout',
    8275        'transport'         => 'postMessage',
    8376    ) );
    8477
    85     $wp_customize->add_control( 'page_options', array(
     78    $wp_customize->add_control( 'page_layout', array(
    8679        'label'       => __( 'Page Layout', 'twentyseventeen' ),
    87         'section'     => 'page_options',
     80        'section'     => 'theme_options',
    8881        'type'        => 'radio',
    8982        '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' ),
    … …  
    9285            'two-column' => __( 'Two Column', 'twentyseventeen' ),
    9386        ),
    94     ) );
    95 
    96     // Panel 1.
    97     $wp_customize->add_section( 'panel_1', array(
    98         'title'           => __( 'Panel 1', 'twentyseventeen' ),
    99         'active_callback' => 'is_front_page',
    100         'panel'           => 'options_panel',
    101         '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' ),
    102     ) );
    103 
    104     $wp_customize->add_setting( 'panel_1', array(
    105         'default'           => false,
    106         'sanitize_callback' => 'absint',
    107     ) );
    108 
    109     $wp_customize->add_control( 'panel_1', array(
    110         'label'   => __( 'Panel Content', 'twentyseventeen' ),
    111         'section' => 'panel_1',
    112         'type'    => 'dropdown-pages',
    113     ) );
    114 
    115     // Panel 2.
    116     $wp_customize->add_section( 'panel_2', array(
    117         'title'           => __( 'Panel 2', 'twentyseventeen' ),
    118         'active_callback' => 'is_front_page',
    119         'panel'           => 'options_panel',
    120         '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' ),
    121     ) );
    122 
    123     $wp_customize->add_setting( 'panel_2', array(
    124         'default'           => false,
    125         'sanitize_callback' => 'absint',
    126     ) );
    127 
    128     $wp_customize->add_control( 'panel_2', array(
    129         'label'   => __( 'Panel Content', 'twentyseventeen' ),
    130         'section' => 'panel_2',
    131         'type'    => 'dropdown-pages',
    132     ) );
    133 
    134     // Panel 3.
    135     $wp_customize->add_section( 'panel_3', array(
    136         'title'           => __( 'Panel 3', 'twentyseventeen' ),
    137         'active_callback' => 'is_front_page',
    138         'panel'           => 'options_panel',
    139         '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' ),
    140     ) );
    141 
    142     $wp_customize->add_setting( 'panel_3', array(
    143         'default'           => false,
    144         'sanitize_callback' => 'absint',
    145     ) );
    146 
    147     $wp_customize->add_control( 'panel_3', array(
    148         'label'   => __( 'Panel Content', 'twentyseventeen' ),
    149         'section' => 'panel_3',
    150         'type'    => 'dropdown-pages',
    151     ) );
    152 
    153     // Panel 4.
    154     $wp_customize->add_section( 'panel_4', array(
    155         'title'           => __( 'Panel 4', 'twentyseventeen' ),
    156         'active_callback' => 'is_front_page',
    157         'panel'           => 'options_panel',
    158         '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' ),
    159     ) );
    160 
    161     $wp_customize->add_setting( 'panel_4', array(
    162         'default'           => false,
    163         'sanitize_callback' => 'absint',
    164     ) );
    165 
    166     $wp_customize->add_control( 'panel_4', array(
    167         'label'   => __( 'Panel Content', 'twentyseventeen' ),
    168         'section' => 'panel_4',
    169         'type'    => 'dropdown-pages',
    170     ) );
     87        'active_callback' => 'twentyseventeen_is_page_without_sidebar',
     88    ) );
     89
     90    /**
     91     * Filter number of front page sections in Twenty Seventeen.
     92     *
     93     * @since Twenty Seventeen 1.0
     94     *
     95     * @param $num_sections integer
     96     */
     97    $num_sections = apply_filters( 'twentyseventeen_front_page_sections', 4 );
     98
     99    // Create a setting and control for each of the sections available in the theme.
     100    for ( $i = 1; $i < ( 1 + $num_sections ); $i++ ) {
     101        $wp_customize->add_setting( 'panel_' . $i, array(
     102            'default'           => false,
     103            'sanitize_callback' => 'absint',
     104            'transport'         => 'postMessage',
     105        ) );
     106
     107        $wp_customize->add_control( 'panel_' . $i, array(
     108            /* translators: %d is the front page section number */
     109            'label'          => sprintf( __( 'Front Page Section %d Content', 'twentyseventeen' ), $i ),
     110            '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' ) ),
     111            'section'        => 'theme_options',
     112            'type'           => 'dropdown-pages',
     113            'allow_addition' => true,
     114            'active_callback' => 'twentyseventeen_is_static_front_page',
     115        ) );
     116
     117        $wp_customize->selective_refresh->add_partial( 'panel_' . $i, array(
     118            'selector'            => '#panel' . $i,
     119            'render_callback'     => 'twentyseventeen_front_page_section',
     120            'container_inclusive' => true,
     121        ) );
     122    }
    171123}
    172124add_action( 'customize_register', 'twentyseventeen_customize_register' );
    173125
    174126/**
    175  * Sanitize a radio button.
    176  */
    177 function twentyseventeen_sanitize_layout( $input ) {
     127 * Sanitize the page layout options.
     128 */
     129function twentyseventeen_sanitize_page_layout( $input ) {
    178130    $valid = array(
    179131        'one-column' => __( 'One Column', 'twentyseventeen' ),
    … …  
    226178
    227179/**
    228  * Binds JS handlers to make Theme Customizer preview reload changes asynchronously.
     180 * Return whether we're previewing the front page and it's a static page.
     181 */
     182function twentyseventeen_is_static_front_page() {
     183    return ( is_front_page() && ! is_home() );
     184}
     185
     186/**
     187 * Return whether we're previewing a page and there are no widgets in the sidebar.
     188 */
     189function twentyseventeen_is_page_without_sidebar() {
     190    return ( is_page() && ! is_active_sidebar( 'sidebar-1' ) );
     191}
     192
     193/**
     194 * Bind JS handlers to instantly live-preview changes.
    229195 */
    230196function twentyseventeen_customize_preview_js() {
    231     wp_enqueue_script( 'twentyseventeen-customizer', get_theme_file_uri( '/assets/js/customizer.js' ), array( 'customize-preview' ), '1.0', true );
     197    wp_enqueue_script( 'twentyseventeen-customize-preview', get_theme_file_uri( '/assets/js/customize-preview.js' ), array( 'customize-preview' ), '1.0', true );
    232198}
    233199add_action( 'customize_preview_init', 'twentyseventeen_customize_preview_js' );
    234200
    235201/**
    236  * Some extra JavaScript to improve the user experience in the Customizer for this theme.
     202 * Load dynamic logic for the customizer controls area.
    237203 */
    238204function twentyseventeen_panels_js() {
    239     wp_enqueue_script( 'twentyseventeen-panel-customizer', get_theme_file_uri( '/assets/js/panel-customizer.js' ), array(), '1.0', true );
     205    wp_enqueue_script( 'twentyseventeen-customize-controls', get_theme_file_uri( '/assets/js/customize-controls.js' ), array(), '1.0', true );
    240206}
    241207add_action( 'customize_controls_enqueue_scripts', 'twentyseventeen_panels_js' );

  • trunk/src/wp-content/themes/twentyseventeen/inc/template-functions.php

    r38985 r38986  
    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 {
    … …  
    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        }
    … …  
    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 }

  • trunk/src/wp-content/themes/twentyseventeen/inc/template-tags.php

    r38885 r38986  
    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    }
     141
     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}
    128157
    129158/**

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

    r38985 r38986  
    29362936--------------------------------------------------------------*/
    29372937
    2938 /* Hide this until we're in the Customizer */
    2939 
    2940 .twentyseventeen-panel-title {
     2938/* Hide placeholders until we're in the front page sections section */
     2939.panel-placeholder {
    29412940    display: none;
    29422941}
    29432942
    2944 .twentyseventeen-customizer.twentyseventeen-front-page .twentyseventeen-panel {
    2945     /* Colour-code all panels (add 1 to account for #twentyseventeen-hero, so 2 is actually panel 1)*/
    2946 }
    2947 
    2948 .twentyseventeen-customizer.twentyseventeen-front-page .twentyseventeen-panel:after {
     2943.highlight-front-sections.twentyseventeen-customizer.twentyseventeen-front-page .twentyseventeen-panel:after {
    29492944    border: 2px dashed;
    29502945    bottom: 1em;
    … …  
    29552950    right: 1em;
    29562951    top: 1em;
    2957 }
    2958 
     2952    z-index: -1; /* Prevent :after from preventing interactions within the section */
     2953}
     2954
     2955/* Used for placeholder text */
    29592956.twentyseventeen-customizer.twentyseventeen-front-page .twentyseventeen-panel .twentyseventeen-panel-title {
    2960     color: #fff;
    2961     display: inline-block;
     2957    display: block;
    29622958    font-size: 14px;
    29632959    font-size: 0.875rem;
    29642960    font-weight: 700;
    29652961    letter-spacing: 1px;
    2966     padding: 5px 10px;
    2967     position: absolute;
    2968     right: 3.2em;
     2962    padding: 3em;
    29692963    text-transform: uppercase;
    2970     top: 3.2em;
    2971     -webkit-transform: translate(3px, -3px);
    2972     -ms-transform: translate(3px, -3px);
    2973     transform: translate(3px, -3px);
    2974     z-index: 3;
    2975 }
    2976 
    2977 .twentyseventeen-customizer.twentyseventeen-front-page .twentyseventeen-panel:nth-of-type(1):after {
     2964    text-align: center;
     2965}
     2966
     2967/* Show borders on the custom page panels only when the front page sections are being edited */
     2968.highlight-front-sections.twentyseventeen-customizer.twentyseventeen-front-page .twentyseventeen-panel:nth-of-type(1):after {
    29782969    border: none;
    29792970}
    29802971
    2981 .twentyseventeen-customizer.twentyseventeen-front-page .twentyseventeen-panel:nth-of-type(2) .twentyseventeen-panel-title {
    2982     background: #b569a2;
    2983 }
    2984 
    2985 .twentyseventeen-customizer.twentyseventeen-front-page .twentyseventeen-panel:nth-of-type(2):after {
     2972.highlight-front-sections.twentyseventeen-customizer.twentyseventeen-front-page .twentyseventeen-panel:nth-of-type(2):after {
    29862973    border-color: #b569a2;
    29872974    color: #b569a2;
    29882975}
    29892976
    2990 .twentyseventeen-customizer.twentyseventeen-front-page .twentyseventeen-panel:nth-of-type(3) .twentyseventeen-panel-title {
    2991     background: #8f68bd;
    2992 }
    2993 
    2994 .twentyseventeen-customizer.twentyseventeen-front-page .twentyseventeen-panel:nth-of-type(3):after {
     2977.highlight-front-sections.twentyseventeen-customizer.twentyseventeen-front-page .twentyseventeen-panel:nth-of-type(3):after {
    29952978    border-color: #8f68bd;
    29962979    color: #8f68bd;
    29972980}
    29982981
    2999 .twentyseventeen-customizer.twentyseventeen-front-page .twentyseventeen-panel:nth-of-type(4) .twentyseventeen-panel-title {
    3000     background: #575ebd;
    3001 }
    3002 
    3003 .twentyseventeen-customizer.twentyseventeen-front-page .twentyseventeen-panel:nth-of-type(4):after {
     2982.highlight-front-sections.twentyseventeen-customizer.twentyseventeen-front-page .twentyseventeen-panel:nth-of-type(4):after {
    30042983    border-color: #575ebd;
    30052984    color: #575ebd;
    30062985}
    30072986
    3008 /* Add a highlight class to improve Customizer behaviour */
    3009 
    3010 @-webkit-keyframes flash {
    3011 
    3012     0%,
    3013     20%,
    3014     40%,
    3015     60%,
    3016     80%,
    3017     100% {
    3018         opacity: 1;
    3019     }
    3020 
    3021     10%,
    3022     30%,
    3023     50%,
    3024     70%,
    3025     90% {
    3026         opacity: 0;
    3027     }
    3028 }
    3029 
    3030 @keyframes flash {
    3031 
    3032     0%,
    3033     20%,
    3034     40%,
    3035     60%,
    3036     80%,
    3037     100% {
    3038         opacity: 1;
    3039     }
    3040 
    3041     10%,
    3042     30%,
    3043     50%,
    3044     70%,
    3045     90% {
    3046         opacity: 0;
    3047     }
    3048 }
    3049 
    3050 article.panel-placeholder {
    3051     display: none;
    3052 }
    3053 
    30542987.twentyseventeen-front-page.twentyseventeen-customizer #primary article.panel-placeholder {
    30552988    border: 0;
    30562989}
    30572990
    3058 .twentyseventeen-customizer .panel-placeholder.twentyseventeen-highlight {
    3059     display: block;
    3060     height: 112px;
    3061 }
    3062 
    3063 .twentyseventeen-highlight:after {
    3064     -webkit-animation-duration: 2s;
    3065     animation-duration: 2s;
    3066     -webkit-animation-name: flash;
    3067     animation-name: flash;
    3068     -webkit-animation-timing-function: ease-in-out;
    3069     animation-timing-function: ease-in-out;
    3070     -webkit-animation-fill-mode: both;
    3071     animation-fill-mode: both;
    3072 }
     2991/* Add some space around the visual edit shortcut buttons. */
     2992.twentyseventeen-panel .customize-partial-edit-shortcut:before {
     2993    top: 30px;
     2994    left: 30px;
     2995}
     2996
     2997/* Prevent color schemes from showing 1px dots everywhere. */
     2998.customize-partial-edit-shortcut {
     2999    background: transparent !important;
     3000}
     3001
     3002/* Ensure that placeholder icons are visible. */
     3003.twentyseventeen-panel .customize-partial-edit-shortcut-hidden:before {
     3004    visibility: visible;
     3005}
     3006
     3007/* Prevent icon colors from clashing with color schemes. */
     3008.colors-custom .customize-partial-edit-shortcut:before {
     3009    text-shadow: 0 -1px 1px rgba(0,0,0,.2),
     3010                 1px 0 1px rgba(0,0,0,.2),
     3011                 0 1px 1px rgba(0,0,0,.2),
     3012                -1px 0 1px rgba(0,0,0,.2);
     3013}
     3014
    30733015
    30743016/*--------------------------------------------------------------

  • trunk/src/wp-content/themes/twentyseventeen/template-parts/page/content-front-page-panels.php

    r38875 r38986  
    1313?>
    1414
    15 <article id="post-<?php the_ID(); ?>" <?php post_class( 'twentyseventeen-panel ' ); ?> >
    16 
    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>
     15<article id="panel<?php echo $twentyseventeencounter; ?>" <?php post_class( 'twentyseventeen-panel ' ); ?> >
    2016
    2117    <?php if ( has_post_thumbnail() ) :
    … …  
    7874                        wp_reset_postdata();
    7975                        ?>
    80                     </div><!-- .pique-recent-posts -->
     76                    </div><!-- .recent-posts -->
    8177                <?php endif; ?>
    8278            <?php endif; ?>
Note: See TracChangeset for help on using the changeset viewer.