Ticket #38426: 38426.diff
File 38426.diff, 29.5 KB (added by , 8 years ago) |
---|
-
src/wp-content/themes/twentyseventeen/assets/js/customize-controls.js
1 /** 2 * Scripts within the customizer controls window. 3 * 4 * Contextually shows the color hue control and informs the preview 5 * when users open or close the front page sections section. 6 */ 7 8 ( function() { 9 wp.customize.bind( 'ready', function() { 10 11 // Only show the color hue control when there's a custom color scheme. 12 wp.customize( 'colorscheme', function( setting ) { 13 wp.customize.control( 'colorscheme_hue', function( control ) { 14 var visibility = function() { 15 if ( 'custom' === setting.get() ) { 16 control.container.slideDown( 180 ); 17 } else { 18 control.container.slideUp( 180 ); 19 } 20 }; 21 22 visibility(); 23 setting.bind( visibility ); 24 }); 25 }); 26 27 // Detect when the front page sections section is expanded (or closed) so we can adjust the preview accordingly 28 wp.customize.section( 'front_page_sections' ).expanded.bind( function( isExpanding ) { 29 30 // Value of isExpanding will = true if you're entering the section, false if you're leaving it 31 wp.customize.previewer.send( 'section-highlight', { expanded: isExpanding } ); 32 } ); 33 } ); 34 } )( jQuery ); -
src/wp-content/themes/twentyseventeen/assets/js/customize-preview.js
1 /** 2 * File customize-preview.js. 3 * 4 * Instantly live-update customizer settings in the preview for improved user experience. 5 */ 6 7 ( function( $ ) { 8 9 // Collect information from customize-controls.js about which panels are opening 10 wp.customize.bind( 'preview-ready', function() { 11 wp.customize.preview.bind( 'section-highlight', function( data ) { 12 13 // When the section is expanded, show and scroll to the content placeholders, exposing the edit links. 14 if ( true === data.expanded ) { 15 $.scrollTo( $( '#panel1' ), { 16 duration: 600, 17 offset: { 'top': -40 } 18 } ); 19 $( '.panel-placeholder' ).slideDown( 200 ); 20 21 // If we've left the panel, hide the placeholders and scroll back to the top 22 } else { 23 $.scrollTo( $( '#masthead' ), { 24 duration: 300, 25 offset: { 'top': 0 } 26 } ); 27 $( '.panel-placeholder' ).slideUp( 200 ); 28 } 29 } ); 30 } ); 31 32 // Site title and description. 33 wp.customize( 'blogname', function( value ) { 34 value.bind( function( to ) { 35 $( '.site-title a' ).text( to ); 36 } ); 37 } ); 38 wp.customize( 'blogdescription', function( value ) { 39 value.bind( function( to ) { 40 $( '.site-description' ).text( to ); 41 } ); 42 } ); 43 44 // Header text color. 45 wp.customize( 'header_textcolor', function( value ) { 46 value.bind( function( to ) { 47 if ( 'blank' === to ) { 48 $( '.site-title, .site-description' ).css( { 49 'clip': 'rect(1px, 1px, 1px, 1px)', 50 'position': 'absolute' 51 } ); 52 $( 'body' ).addClass( 'title-tagline-hidden' ); 53 } else { 54 $( '.site-title, .site-description' ).css( { 55 'clip': 'auto', 56 'position': 'relative' 57 } ); 58 $( '.site-branding, .site-branding a, .site-description, .site-description a' ).css( { 59 'color': to 60 } ); 61 $( 'body' ).removeClass( 'title-tagline-hidden' ); 62 } 63 } ); 64 } ); 65 66 // Color scheme. 67 wp.customize( 'colorscheme', function( value ) { 68 value.bind( function( to ) { 69 70 // Update color body class. 71 $( 'body' ).removeClass( 'colors-light colors-dark colors-custom' ) 72 .addClass( 'colors-' + to ); 73 } ); 74 } ); 75 76 // Custom color hue. 77 wp.customize( 'colorscheme_hue', function( value ) { 78 value.bind( function( to ) { 79 80 // Update custom color CSS 81 var style = $( '#custom-theme-colors' ), 82 hue = style.data( 'hue' ), 83 css = style.html(); 84 85 css = css.split( hue + ',' ).join( to + ',' ); // Equivalent to css.replaceAll, with hue followed by comma to prevent values with units from being changed. 86 style.html( css ) 87 .data( 'hue', to ); 88 } ); 89 } ); 90 91 // Page layouts. 92 wp.customize( 'page_layout', function( value ) { 93 value.bind( function( to ) { 94 if ( 'one-column' === to ) { 95 $( 'body' ).addClass( 'page-one-column' ).removeClass( 'page-two-column' ); 96 } else { 97 $( 'body' ).removeClass( 'page-one-column' ).addClass( 'page-two-column' ); 98 } 99 } ); 100 } ); 101 } )( jQuery ); -
src/wp-content/themes/twentyseventeen/assets/js/customizer.js
1 /**2 * File customizer.js.3 *4 * Theme Customizer enhancements for a better user experience.5 *6 * Contains handlers to make Theme Customizer preview reload changes asynchronously.7 */8 9 ( function( $ ) {10 11 // Collect information from panel-customizer.js about which panels are opening12 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 preview16 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 top24 } 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': to62 } );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 CSS83 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 accordingly13 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 it16 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 accordingly20 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 it23 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 accordingly27 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 it30 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 accordingly34 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 it37 wp.customize.previewer.send( 'section-highlight', { section: 'twentyseventeen-panel4', expanded: isExpanding } );38 } );39 40 } );41 } )( jQuery ); -
src/wp-content/themes/twentyseventeen/components/page/content-front-page-panels.php
12 12 13 13 ?> 14 14 15 <article id="p ost-<?php the_ID(); ?>" <?php post_class( 'twentyseventeen-panel ' ); ?> >15 <article id="panel<?php echo $twentyseventeencounter; ?>" <?php post_class( 'twentyseventeen-panel ' ); ?> > 16 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>20 21 17 <?php if ( has_post_thumbnail() ) : 22 18 $thumbnail = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'twentyseventeen-featured-image' ); 23 19 … … 77 73 endwhile; 78 74 wp_reset_postdata(); 79 75 ?> 80 </div><!-- . pique-recent-posts -->76 </div><!-- .recent-posts --> 81 77 <?php endif; ?> 82 78 <?php endif; ?> 83 79 -
src/wp-content/themes/twentyseventeen/front-page.php
28 28 29 29 <?php 30 30 // Get each of our panels and show the post data. 31 $panels = array( '1', '2', '3', '4' );32 $titles = array();33 34 global $twentyseventeencounter; // Used in components/page/content-front-page-panels.php file.35 36 31 if ( 0 !== twentyseventeen_panel_count() || is_customize_preview() ) : // If we have pages to show. 37 32 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; 39 42 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 } 45 48 46 $titles[] = get_the_title(); // Put page titles in an array for use in navigation. 47 get_template_part( 'components/page/content', 'front-page-panels' ); 49 endif; // The if ( 0 !== twentyseventeen_panel_count() ) ends here. ?> 48 50 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 62 51 </main><!-- #main --> 63 52 </div><!-- #primary --> 64 53 -
src/wp-content/themes/twentyseventeen/functions.php
94 94 'flex-width' => true, 95 95 ) ); 96 96 97 // Add theme support for selective refresh for widgets. 98 add_theme_support( 'customize-selective-refresh-widgets' ); 99 97 100 /* 98 101 * This theme styles the visual editor to resemble the theme style, 99 102 * specifically font, colors, and column width. -
src/wp-content/themes/twentyseventeen/inc/customizer.php
1 1 <?php 2 2 /** 3 * Twenty Seventeen: ThemeCustomizer3 * Twenty Seventeen: Customizer 4 4 * 5 5 * @package WordPress 6 6 * @subpackage Twenty_Seventeen … … 64 64 ) ); 65 65 66 66 /** 67 * Add the Theme Options section.67 * Layout options. 68 68 */ 69 $wp_customize->add_panel( 'options_panel', array( 70 'title' => __( 'Theme Options', 'twentyseventeen' ), 71 'description' => __( 'Configure your theme settings', 'twentyseventeen' ), 69 $wp_customize->add_section( 'layout', array( 70 'title' => __( 'Layout', 'twentyseventeen' ), 72 71 ) ); 73 72 74 // Page Options. 75 $wp_customize->add_section( 'page_options', array( 76 'title' => __( 'Single Page Layout', 'twentyseventeen' ), 77 'active_callback' => 'twentyseventeen_is_page', 78 'panel' => 'options_panel', 79 ) ); 80 81 $wp_customize->add_setting( 'page_options', array( 73 $wp_customize->add_setting( 'page_layout', array( 82 74 'default' => 'two-column', 83 'sanitize_callback' => 'twentyseventeen_sanitize_ layout',75 'sanitize_callback' => 'twentyseventeen_sanitize_page_layout', 84 76 'transport' => 'postMessage', 85 77 ) ); 86 78 87 $wp_customize->add_control( 'page_ options', array(79 $wp_customize->add_control( 'page_layout', array( 88 80 'label' => __( 'Page Layout', 'twentyseventeen' ), 89 'section' => ' page_options',81 'section' => 'layout', 90 82 'type' => 'radio', 91 83 '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' ), 92 84 'choices' => array( … … 93 85 'one-column' => __( 'One Column', 'twentyseventeen' ), 94 86 'two-column' => __( 'Two Column', 'twentyseventeen' ), 95 87 ), 88 'active_callback' => 'twentyseventeen_is_page_without_sidebar', 96 89 ) ); 97 90 98 // Panel 1. 99 $wp_customize->add_section( 'panel_1', array( 100 'title' => __( 'Panel 1', 'twentyseventeen' ), 101 'active_callback' => 'is_front_page', 102 'panel' => 'options_panel', 103 'description' => __( 'Add an image to your panel by setting a featured image in the page editor. If you don’t select a page, this panel will not be displayed.', 'twentyseventeen' ), 91 /** 92 * Front page sections. 93 */ 94 $wp_customize->add_section( 'front_page_sections', array( 95 'title' => __( 'Front Page Sections', 'twentyseventeen' ), 96 'active_callback' => 'twentyseventeen_is_static_front_page', 97 'description' => __( 'Select pages to feature in each area from the dropdowns. Add an image to a section by setting a featured image in the page editor. Empty sections will not be displayed.', 'twentyseventeen' ), 98 'priority' => 121, // Immediately after the static front page section. 104 99 ) ); 105 100 106 $wp_customize->add_setting( 'panel_1', array( 107 'default' => false, 108 'sanitize_callback' => 'absint', 109 ) ); 101 /** 102 * Filter number of front page sections in Twenty Seventeen. 103 * 104 * @since Twenty Seventeen 1.0 105 * 106 * @param $num_sections integer 107 */ 108 $num_sections = apply_filters( 'twentyseventeen_front_page_sections', 4 ); 110 109 111 $wp_customize->add_control( 'panel_1', array( 112 'label' => __( 'Panel Content', 'twentyseventeen' ), 113 'section' => 'panel_1', 114 'type' => 'dropdown-pages', 115 ) ); 110 // Create a setting and control for each of the sections available in the theme. 111 for ( $i = 1; $i < ( 1 + $num_sections ); $i++ ) { 112 $wp_customize->add_setting( 'panel_' . $i, array( 113 'default' => false, 114 'sanitize_callback' => 'absint', 115 'transport' => 'postMessage', 116 ) ); 116 117 117 // Panel 2.118 $wp_customize->add_section( 'panel_2', array(119 'title' => __( 'Panel 2', 'twentyseventeen'),120 'active_callback' => 'is_front_page',121 'panel' => 'options_panel',122 'description' => __( 'Add an image to your panel by setting a featured image in the page editor. If you don’t select a page, this panel will not be displayed.', 'twentyseventeen' ),123 ) );118 $wp_customize->add_control( 'panel_' . $i, array( 119 /* translators: %d is the front page section number */ 120 'label' => sprintf( __( 'Section %d Content', 'twentyseventeen' ), $i ), 121 'section' => 'front_page_sections', 122 'type' => 'dropdown-pages', 123 'add_new' => true, // @see https://core.trac.wordpress.org/ticket/38164. 124 ) ); 124 125 125 $wp_customize->add_setting( 'panel_2', array( 126 'default' => false, 127 'sanitize_callback' => 'absint', 128 ) ); 129 130 $wp_customize->add_control( 'panel_2', array( 131 'label' => __( 'Panel Content', 'twentyseventeen' ), 132 'section' => 'panel_2', 133 'type' => 'dropdown-pages', 134 ) ); 135 136 // Panel 3. 137 $wp_customize->add_section( 'panel_3', array( 138 'title' => __( 'Panel 3', 'twentyseventeen' ), 139 'active_callback' => 'is_front_page', 140 'panel' => 'options_panel', 141 'description' => __( 'Add an image to your panel by setting a featured image in the page editor. If you don’t select a page, this panel will not be displayed.', 'twentyseventeen' ), 142 ) ); 143 144 $wp_customize->add_setting( 'panel_3', array( 145 'default' => false, 146 'sanitize_callback' => 'absint', 147 ) ); 148 149 $wp_customize->add_control( 'panel_3', array( 150 'label' => __( 'Panel Content', 'twentyseventeen' ), 151 'section' => 'panel_3', 152 'type' => 'dropdown-pages', 153 ) ); 154 155 // Panel 4. 156 $wp_customize->add_section( 'panel_4', array( 157 'title' => __( 'Panel 4', 'twentyseventeen' ), 158 'active_callback' => 'is_front_page', 159 'panel' => 'options_panel', 160 'description' => __( 'Add an image to your panel by setting a featured image in the page editor. If you don’t select a page, this panel will not be displayed.', 'twentyseventeen' ), 161 ) ); 162 163 $wp_customize->add_setting( 'panel_4', array( 164 'default' => false, 165 'sanitize_callback' => 'absint', 166 ) ); 167 168 $wp_customize->add_control( 'panel_4', array( 169 'label' => __( 'Panel Content', 'twentyseventeen' ), 170 'section' => 'panel_4', 171 'type' => 'dropdown-pages', 172 ) ); 126 $wp_customize->selective_refresh->add_partial( 'panel_' . $i, array( 127 'selector' => '#panel' . $i, 128 'render_callback' => 'twentyseventeen_front_page_section', 129 'container_inclusive' => true, 130 )); 131 } 173 132 } 174 133 add_action( 'customize_register', 'twentyseventeen_customize_register' ); 175 134 176 135 /** 177 * Sanitize a radio button.136 * Sanitize the page layout options. 178 137 */ 179 function twentyseventeen_sanitize_ layout( $input ) {138 function twentyseventeen_sanitize_page_layout( $input ) { 180 139 $valid = array( 181 140 'one-column' => __( 'One Column', 'twentyseventeen' ), 182 141 'two-column' => __( 'Two Column', 'twentyseventeen' ), … … 203 162 } 204 163 205 164 /** 206 * Binds JS handlers to make Theme Customizer preview reload changes asynchronously.165 * Return whether we're previewing the front page and it's a static page. 207 166 */ 167 function twentyseventeen_is_static_front_page() { 168 return ( is_front_page() && ! is_home() ); 169 } 170 171 /** 172 * Return whether we're previewing a page and there are no widgets in the sidebar. 173 */ 174 function twentyseventeen_is_page_without_sidebar() { 175 return ( is_page() && ! is_active_sidebar( 'sidebar-1' ) ); 176 } 177 178 /** 179 * Bind JS handlers to instantly live-preview changes. 180 */ 208 181 function twentyseventeen_customize_preview_js() { 209 wp_enqueue_script( 'twentyseventeen-customize r', get_theme_file_uri( '/assets/js/customizer.js' ), array( 'customize-preview' ), '1.0', true );182 wp_enqueue_script( 'twentyseventeen-customize-preview', get_theme_file_uri( '/assets/js/customize-preview.js' ), array( 'customize-preview' ), '1.0', true ); 210 183 } 211 184 add_action( 'customize_preview_init', 'twentyseventeen_customize_preview_js' ); 212 185 213 186 /** 214 * Some extra JavaScript to improve the user experience in the Customizer for this theme.187 * Load dynamic logic for the customizer controls area. 215 188 */ 216 189 function twentyseventeen_panels_js() { 217 wp_enqueue_script( 'twentyseventeen- panel-customizer', get_theme_file_uri( '/assets/js/panel-customizer.js' ), array(), '1.0', true );190 wp_enqueue_script( 'twentyseventeen-customize-controls', get_theme_file_uri( '/assets/js/customize-controls.js' ), array(), '1.0', true ); 218 191 } 219 192 add_action( 'customize_controls_enqueue_scripts', 'twentyseventeen_panels_js' ); -
src/wp-content/themes/twentyseventeen/inc/template-functions.php
46 46 47 47 // Add class for one or two column page layouts. 48 48 if ( is_page() ) { 49 if ( 'one-column' === get_theme_mod( 'page_ options' ) ) {49 if ( 'one-column' === get_theme_mod( 'page_layout' ) ) { 50 50 $classes[] = 'page-one-column'; 51 51 } else { 52 52 $classes[] = 'page-two-column'; … … 72 72 * Primarily used to see if we have any panels active, duh. 73 73 */ 74 74 function twentyseventeen_panel_count() { 75 $panels = array( '1', '2', '3', '4' ); 75 76 76 $panel_count = 0; 77 77 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 ) ) { 80 90 $panel_count++; 81 91 } 82 92 } … … 90 100 function twentyseventeen_is_frontpage() { 91 101 return ( is_front_page() && ! is_home() ); 92 102 } 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
120 120 } 121 121 endif; 122 122 123 /** 124 * Display a front page section. 125 * 126 * @param $partial WP_Customize_Partial Partial associated with a selective refresh request. 127 * @param $id integer Front page section to display. 128 */ 129 function twentyseventeen_front_page_section( $partial = null, $id = 0 ) { 130 if ( is_a( $partial, 'WP_Customize_Partial' ) ) { 131 // Find out the id and set it up during a selective refresh. 132 global $twentyseventeencounter; 133 $id = str_replace( 'panel_', '', $partial->id ); 134 $twentyseventeencounter = $id; 135 } 123 136 137 global $post; // Modify the global post object before setting up post data. 138 if ( get_theme_mod( 'panel_' . $id ) ) { 139 global $post; 140 $post = get_post( get_theme_mod( 'panel_' . $id ) ); 141 setup_postdata( $post ); 142 set_query_var( 'panel', $id ); 143 144 get_template_part( 'components/page/content', 'front-page-panels' ); 145 146 wp_reset_postdata(); 147 } else { 148 // The output placeholder anchor. 149 echo '<article class="panel-placeholder panel twentyseventeen-panel twentyseventeen-panel' . $id . '" id="panel' . $id . '"><span class="twentyseventeen-panel-title">' . sprintf( __( 'Panel %1$s Placeholder', 'twentyseventeen' ), $id ) . '</span></article>'; 150 } 151 } 152 124 153 /** 125 154 * Returns true if a blog has more than 1 category. 126 155 * -
src/wp-content/themes/twentyseventeen/style.css
2895 2895 # Customizer 2896 2896 --------------------------------------------------------------*/ 2897 2897 2898 /* Hide this until we're in the Customizer */ 2899 2900 .twentyseventeen-panel-title { 2898 /* Hide placeholders until we're in the front page sections section */ 2899 .panel-placeholder { 2901 2900 display: none; 2902 2901 } 2903 2902 2904 .twentyseventeen-customizer.twentyseventeen-front-page .twentyseventeen-panel { 2905 /* Colour-code all panels (add 1 to account for #twentyseventeen-hero, so 2 is actually panel 1)*/ 2906 } 2907 2908 .twentyseventeen-customizer.twentyseventeen-front-page .twentyseventeen-panel:after { 2909 border: 2px dashed; 2910 bottom: 1em; 2911 content: ""; 2903 .twentyseventeen-customizer.twentyseventeen-front-page .twentyseventeen-panel .twentyseventeen-panel-title { 2912 2904 display: block; 2913 left: 1em;2914 position: absolute;2915 right: 1em;2916 top: 1em;2917 }2918 2919 .twentyseventeen-customizer.twentyseventeen-front-page .twentyseventeen-panel .twentyseventeen-panel-title {2920 color: #fff;2921 display: inline-block;2922 2905 font-size: 14px; 2923 2906 font-size: 0.875rem; 2924 2907 font-weight: 700; 2925 2908 letter-spacing: 1px; 2926 padding: 5px 10px; 2927 position: absolute; 2928 right: 3.2em; 2909 padding: 3em; 2929 2910 text-transform: uppercase; 2930 top: 3.2em; 2931 -webkit-transform: translate(3px, -3px); 2932 -ms-transform: translate(3px, -3px); 2933 transform: translate(3px, -3px); 2934 z-index: 3; 2911 text-align: center; 2935 2912 } 2936 2913 2937 .twentyseventeen-customizer.twentyseventeen-front-page .twentyseventeen-panel:nth-of-type(1):after {2938 border: none;2939 }2940 2941 .twentyseventeen-customizer.twentyseventeen-front-page .twentyseventeen-panel:nth-of-type(2) .twentyseventeen-panel-title {2942 background: #b569a2;2943 }2944 2945 .twentyseventeen-customizer.twentyseventeen-front-page .twentyseventeen-panel:nth-of-type(2):after {2946 border-color: #b569a2;2947 color: #b569a2;2948 }2949 2950 .twentyseventeen-customizer.twentyseventeen-front-page .twentyseventeen-panel:nth-of-type(3) .twentyseventeen-panel-title {2951 background: #8f68bd;2952 }2953 2954 .twentyseventeen-customizer.twentyseventeen-front-page .twentyseventeen-panel:nth-of-type(3):after {2955 border-color: #8f68bd;2956 color: #8f68bd;2957 }2958 2959 .twentyseventeen-customizer.twentyseventeen-front-page .twentyseventeen-panel:nth-of-type(4) .twentyseventeen-panel-title {2960 background: #575ebd;2961 }2962 2963 .twentyseventeen-customizer.twentyseventeen-front-page .twentyseventeen-panel:nth-of-type(4):after {2964 border-color: #575ebd;2965 color: #575ebd;2966 }2967 2968 /* Add a highlight class to improve Customizer behaviour */2969 2970 @-webkit-keyframes flash {2971 2972 0%,2973 20%,2974 40%,2975 60%,2976 80%,2977 100% {2978 opacity: 1;2979 }2980 2981 10%,2982 30%,2983 50%,2984 70%,2985 90% {2986 opacity: 0;2987 }2988 }2989 2990 @keyframes flash {2991 2992 0%,2993 20%,2994 40%,2995 60%,2996 80%,2997 100% {2998 opacity: 1;2999 }3000 3001 10%,3002 30%,3003 50%,3004 70%,3005 90% {3006 opacity: 0;3007 }3008 }3009 3010 article.panel-placeholder {3011 display: none;3012 }3013 3014 .twentyseventeen-front-page.twentyseventeen-customizer #primary article.panel-placeholder {3015 border: 0;3016 }3017 3018 .twentyseventeen-customizer .panel-placeholder.twentyseventeen-highlight {3019 display: block;3020 height: 112px;3021 }3022 3023 .twentyseventeen-highlight:after {3024 -webkit-animation-duration: 2s;3025 animation-duration: 2s;3026 -webkit-animation-name: flash;3027 animation-name: flash;3028 -webkit-animation-timing-function: ease-in-out;3029 animation-timing-function: ease-in-out;3030 -webkit-animation-fill-mode: both;3031 animation-fill-mode: both;3032 }3033 3034 2914 /*-------------------------------------------------------------- 3035 2915 ## SVGs Fallbacks 3036 2916 --------------------------------------------------------------*/