Ticket #38426: 38426.2.diff
File 38426.2.diff, 29.8 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 $( '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 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/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 template-parts/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( 'template-parts/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/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 … … 60 60 ) ); 61 61 62 62 /** 63 * Add the Theme Options section.63 * Layout options. 64 64 */ 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' ), 68 67 ) ); 69 68 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( 78 70 'default' => 'two-column', 79 'sanitize_callback' => 'twentyseventeen_sanitize_ layout',71 'sanitize_callback' => 'twentyseventeen_sanitize_page_layout', 80 72 'transport' => 'postMessage', 81 73 ) ); 82 74 83 $wp_customize->add_control( 'page_ options', array(75 $wp_customize->add_control( 'page_layout', array( 84 76 'label' => __( 'Page Layout', 'twentyseventeen' ), 85 'section' => ' page_options',77 'section' => 'layout', 86 78 'type' => 'radio', 87 79 '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' ), 88 80 'choices' => array( … … 89 81 'one-column' => __( 'One Column', 'twentyseventeen' ), 90 82 'two-column' => __( 'Two Column', 'twentyseventeen' ), 91 83 ), 84 'active_callback' => 'twentyseventeen_is_page_without_sidebar', 85 'priority' => 130, // Before Additional CSS. 92 86 ) ); 93 87 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’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. 100 96 ) ); 101 97 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 ); 106 106 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 ) ); 112 114 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’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 ) ); 120 122 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’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’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 } 169 129 } 170 130 add_action( 'customize_register', 'twentyseventeen_customize_register' ); 171 131 172 132 /** 173 * Sanitize a radio button.133 * Sanitize the page layout options. 174 134 */ 175 function twentyseventeen_sanitize_ layout( $input ) {135 function twentyseventeen_sanitize_page_layout( $input ) { 176 136 $valid = array( 177 137 'one-column' => __( 'One Column', 'twentyseventeen' ), 178 138 'two-column' => __( 'Two Column', 'twentyseventeen' ), … … 199 159 } 200 160 201 161 /** 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. 203 163 */ 164 function 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 */ 171 function 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 */ 204 178 function twentyseventeen_customize_preview_js() { 205 wp_enqueue_script( 'twentyseventeen-customize r', 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 ); 206 180 } 207 181 add_action( 'customize_preview_init', 'twentyseventeen_customize_preview_js' ); 208 182 209 183 /** 210 * Some extra JavaScript to improve the user experience in the Customizer for this theme.184 * Load dynamic logic for the customizer controls area. 211 185 */ 212 186 function 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 ); 214 188 } 215 189 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
125 125 } 126 126 endif; 127 127 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 */ 134 function 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 } 128 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 } 157 129 158 /** 130 159 * Returns true if a blog has more than 1 category. 131 160 * -
src/wp-content/themes/twentyseventeen/style.css
2876 2876 # Customizer 2877 2877 --------------------------------------------------------------*/ 2878 2878 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 { 2882 2881 display: none; 2883 2882 } 2884 2883 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 { 2890 2885 border: 2px dashed; 2891 2886 bottom: 1em; 2892 2887 content: ""; … … 2895 2890 position: absolute; 2896 2891 right: 1em; 2897 2892 top: 1em; 2893 z-index: -1; /* Prevent :after from preventing interactions within the section */ 2898 2894 } 2899 2895 2896 /* Used for placeholder text */ 2900 2897 .twentyseventeen-customizer.twentyseventeen-front-page .twentyseventeen-panel .twentyseventeen-panel-title { 2901 color: #fff; 2902 display: inline-block; 2898 display: block; 2903 2899 font-size: 14px; 2904 2900 font-size: 0.875rem; 2905 2901 font-weight: 700; 2906 2902 letter-spacing: 1px; 2907 padding: 5px 10px; 2908 position: absolute; 2909 right: 3.2em; 2903 padding: 3em; 2910 2904 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; 2916 2906 } 2917 2907 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 { 2919 2910 border: none; 2920 2911 } 2921 2912 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 { 2927 2914 border-color: #b569a2; 2928 2915 color: #b569a2; 2929 2916 } 2930 2917 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 { 2936 2919 border-color: #8f68bd; 2937 2920 color: #8f68bd; 2938 2921 } 2939 2922 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 { 2945 2924 border-color: #575ebd; 2946 2925 color: #575ebd; 2947 2926 } 2948 2927 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 2995 2928 .twentyseventeen-front-page.twentyseventeen-customizer #primary article.panel-placeholder { 2996 2929 border: 0; 2997 2930 } 2998 2931 2999 .twentyseventeen-customizer .panel-placeholder.twentyseventeen-highlight {3000 display: block;3001 height: 112px;3002 }3003 2932 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 3015 2933 /*-------------------------------------------------------------- 3016 2934 ## SVGs Fallbacks 3017 2935 --------------------------------------------------------------*/ -
src/wp-content/themes/twentyseventeen/template-parts/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