Index: src/wp-content/themes/twentyseventeen/assets/js/customize-controls.js =================================================================== --- src/wp-content/themes/twentyseventeen/assets/js/customize-controls.js (revision 0) +++ src/wp-content/themes/twentyseventeen/assets/js/customize-controls.js (working copy) @@ -0,0 +1,34 @@ +/** + * Scripts within the customizer controls window. + * + * Contextually shows the color hue control and informs the preview + * when users open or close the front page sections section. + */ + +( function() { + wp.customize.bind( 'ready', function() { + + // Only show the color hue control when there's a custom color scheme. + wp.customize( 'colorscheme', function( setting ) { + wp.customize.control( 'colorscheme_hue', function( control ) { + var visibility = function() { + if ( 'custom' === setting.get() ) { + control.container.slideDown( 180 ); + } else { + control.container.slideUp( 180 ); + } + }; + + visibility(); + setting.bind( visibility ); + }); + }); + + // Detect when the front page sections section is expanded (or closed) so we can adjust the preview accordingly + wp.customize.section( 'theme_options' ).expanded.bind( function( isExpanding ) { + + // Value of isExpanding will = true if you're entering the section, false if you're leaving it + wp.customize.previewer.send( 'section-highlight', { expanded: isExpanding } ); + } ); + } ); +} )( jQuery ); Index: src/wp-content/themes/twentyseventeen/assets/js/customize-preview.js =================================================================== --- src/wp-content/themes/twentyseventeen/assets/js/customize-preview.js (revision 0) +++ src/wp-content/themes/twentyseventeen/assets/js/customize-preview.js (working copy) @@ -0,0 +1,105 @@ +/** + * File customize-preview.js. + * + * Instantly live-update customizer settings in the preview for improved user experience. + */ + +( function( $ ) { + + // Collect information from customize-controls.js about which panels are opening + wp.customize.bind( 'preview-ready', function() { + wp.customize.preview.bind( 'section-highlight', function( data ) { + + // Only on the front page. + if ( ! $( 'body' ).hasClass( 'twentyseventeen-front-page' ) ) { + return; + } + + // When the section is expanded, show and scroll to the content placeholders, exposing the edit links. + if ( true === data.expanded ) { + $( 'body' ).addClass( 'highlight-front-sections' ); + $( '.panel-placeholder' ).slideDown( 200, function() { + $.scrollTo( $( '#panel1' ), { + duration: 600, + offset: { 'top': -70 } // Account for sticky menu. + } ); + }); + + // If we've left the panel, hide the placeholders and scroll back to the top + } else { + $( 'body' ).removeClass( 'highlight-front-sections' ); + $( '.panel-placeholder' ).slideUp( 200 ); // Don't change scroll when leaving - it's likely to have unintended consequences. + } + } ); + } ); + + // Site title and description. + wp.customize( 'blogname', function( value ) { + value.bind( function( to ) { + $( '.site-title a' ).text( to ); + } ); + } ); + wp.customize( 'blogdescription', function( value ) { + value.bind( function( to ) { + $( '.site-description' ).text( to ); + } ); + } ); + + // Header text color. + wp.customize( 'header_textcolor', function( value ) { + value.bind( function( to ) { + if ( 'blank' === to ) { + $( '.site-title, .site-description' ).css( { + 'clip': 'rect(1px, 1px, 1px, 1px)', + 'position': 'absolute' + } ); + $( 'body' ).addClass( 'title-tagline-hidden' ); + } else { + $( '.site-title, .site-description' ).css( { + 'clip': 'auto', + 'position': 'relative' + } ); + $( '.site-branding, .site-branding a, .site-description, .site-description a' ).css( { + 'color': to + } ); + $( 'body' ).removeClass( 'title-tagline-hidden' ); + } + } ); + } ); + + // Color scheme. + wp.customize( 'colorscheme', function( value ) { + value.bind( function( to ) { + + // Update color body class. + $( 'body' ).removeClass( 'colors-light colors-dark colors-custom' ) + .addClass( 'colors-' + to ); + } ); + } ); + + // Custom color hue. + wp.customize( 'colorscheme_hue', function( value ) { + value.bind( function( to ) { + + // Update custom color CSS + var style = $( '#custom-theme-colors' ), + hue = style.data( 'hue' ), + css = style.html(); + + css = css.split( hue + ',' ).join( to + ',' ); // Equivalent to css.replaceAll, with hue followed by comma to prevent values with units from being changed. + style.html( css ) + .data( 'hue', to ); + } ); + } ); + + // Page layouts. + wp.customize( 'page_layout', function( value ) { + value.bind( function( to ) { + if ( 'one-column' === to ) { + $( 'body' ).addClass( 'page-one-column' ).removeClass( 'page-two-column' ); + } else { + $( 'body' ).removeClass( 'page-one-column' ).addClass( 'page-two-column' ); + } + } ); + } ); +} )( jQuery ); Index: src/wp-content/themes/twentyseventeen/assets/js/customizer.js =================================================================== --- src/wp-content/themes/twentyseventeen/assets/js/customizer.js (revision 38976) +++ src/wp-content/themes/twentyseventeen/assets/js/customizer.js (working copy) @@ -1,103 +0,0 @@ -/** - * File customizer.js. - * - * Theme Customizer enhancements for a better user experience. - * - * Contains handlers to make Theme Customizer preview reload changes asynchronously. - */ - -( function( $ ) { - - // Collect information from panel-customizer.js about which panels are opening - wp.customize.bind( 'preview-ready', function() { - wp.customize.preview.bind( 'section-highlight', function( data ) { - - // If there's an expanded panel section, scroll down to that panel & highlight in the preview - if ( true === data.expanded ) { - $.scrollTo( $( '.' + data.section ), { - duration: 600, - offset: { 'top': -40 } - } ); - $( '.' + data.section ).addClass( 'twentyseventeen-highlight' ); - - // If we've left the panel, remove the highlight and scroll back to the top - } else { - $.scrollTo( $( '#masthead' ), { - duration: 300, - offset: { 'top': 0 } - } ); - $( '.' + data.section ).removeClass( 'twentyseventeen-highlight' ); - } - } ); - } ); - - // Site title and description. - wp.customize( 'blogname', function( value ) { - value.bind( function( to ) { - $( '.site-title a' ).text( to ); - } ); - } ); - wp.customize( 'blogdescription', function( value ) { - value.bind( function( to ) { - $( '.site-description' ).text( to ); - } ); - } ); - - // Header text color. - wp.customize( 'header_textcolor', function( value ) { - value.bind( function( to ) { - if ( 'blank' === to ) { - $( '.site-title, .site-description' ).css( { - 'clip': 'rect(1px, 1px, 1px, 1px)', - 'position': 'absolute' - } ); - $( 'body' ).addClass( 'title-tagline-hidden' ); - } else { - $( '.site-title, .site-description' ).css( { - 'clip': 'auto', - 'position': 'relative' - } ); - $( '.site-branding, .site-branding a, .site-description, .site-description a' ).css( { - 'color': to - } ); - $( 'body' ).removeClass( 'title-tagline-hidden' ); - } - } ); - } ); - - // Color scheme. - wp.customize( 'colorscheme', function( value ) { - value.bind( function( to ) { - - // Update color body class. - $( 'body' ).removeClass( 'colors-light colors-dark colors-custom' ) - .addClass( 'colors-' + to ); - } ); - } ); - - // Custom color hue. - wp.customize( 'colorscheme_hue', function( value ) { - value.bind( function( to ) { - - // Update custom color CSS - var style = $( '#custom-theme-colors' ), - hue = style.data( 'hue' ), - css = style.html(); - - css = css.split( hue + ',' ).join( to + ',' ); // Equivalent to css.replaceAll, with hue followed by comma to prevent values with units from being changed. - style.html( css ) - .data( 'hue', to ); - } ); - } ); - - // Page layouts. - wp.customize( 'page_options', function( value ) { - value.bind( function( to ) { - if ( 'one-column' === to ) { - $( 'body' ).addClass( 'page-one-column' ).removeClass( 'page-two-column' ); - } else { - $( 'body' ).removeClass( 'page-one-column' ).addClass( 'page-two-column' ); - } - } ); - } ); -} )( jQuery ); Index: src/wp-content/themes/twentyseventeen/assets/js/panel-customizer.js =================================================================== --- src/wp-content/themes/twentyseventeen/assets/js/panel-customizer.js (revision 38976) +++ src/wp-content/themes/twentyseventeen/assets/js/panel-customizer.js (working copy) @@ -1,41 +0,0 @@ -/** - * Theme Customizer enhancements, specific to panels, for a better user experience. - * - * This allows us to detect when the user has opened specific sections within the Customizer, - * and adjust our preview pane accordingly. - */ - -( function() { - - wp.customize.bind( 'ready', function() { - - // Detect when the section for each panel is expanded (or closed) so we can adjust preview accordingly - wp.customize.section( 'panel_1' ).expanded.bind( function( isExpanding ) { - - // Value of isExpanding will = true if you're entering the section, false if you're leaving it - wp.customize.previewer.send( 'section-highlight', { section: 'twentyseventeen-panel1', expanded: isExpanding } ); - } ); - - // Detect when the section for each panel is expanded (or closed) so we can adjust preview accordingly - wp.customize.section( 'panel_2' ).expanded.bind( function( isExpanding ) { - - // Value of isExpanding = true if you're entering the section, false if you're leaving it - wp.customize.previewer.send( 'section-highlight', { section: 'twentyseventeen-panel2', expanded: isExpanding } ); - } ); - - // Detect when the section for each panel is expanded (or closed) so we can adjust preview accordingly - wp.customize.section( 'panel_3' ).expanded.bind( function( isExpanding ) { - - // Value of isExpanding will = true if you're entering the section, false if you're leaving it - wp.customize.previewer.send( 'section-highlight', { section: 'twentyseventeen-panel3', expanded: isExpanding } ); - } ); - - // Detect when the section for each panel is expanded (or closed) so we can adjust preview accordingly - wp.customize.section( 'panel_4' ).expanded.bind( function( isExpanding ) { - - // Value of isExpanding will = true if you're entering the section, false if you're leaving it - wp.customize.previewer.send( 'section-highlight', { section: 'twentyseventeen-panel4', expanded: isExpanding } ); - } ); - - } ); -} )( jQuery ); Index: src/wp-content/themes/twentyseventeen/front-page.php =================================================================== --- src/wp-content/themes/twentyseventeen/front-page.php (revision 38976) +++ src/wp-content/themes/twentyseventeen/front-page.php (working copy) @@ -28,37 +28,26 @@ - wp_reset_postdata(); - else : - // The output placeholder anchor. - echo '
' . sprintf( __( 'Panel %1$s Placeholder', 'twentyseventeen' ), esc_attr( $twentyseventeencounter ) ) . '
'; - endif; - - $twentyseventeencounter++; - endforeach; - ?> - - - Index: src/wp-content/themes/twentyseventeen/inc/color-patterns.php =================================================================== --- src/wp-content/themes/twentyseventeen/inc/color-patterns.php (revision 38976) +++ src/wp-content/themes/twentyseventeen/inc/color-patterns.php (working copy) @@ -312,7 +312,8 @@ .colors-custom .next.page-numbers:focus, .colors-custom .next.page-numbers:hover, .colors-custom .site-content .wp-playlist-light .wp-playlist-item:hover, -.colors-custom .site-content .wp-playlist-light .wp-playlist-item:focus { +.colors-custom .site-content .wp-playlist-light .wp-playlist-item:focus, +.colors-custom .customize-partial-edit-shortcut:before { background: hsl( ' . esc_attr( $hue ) . ', ' . esc_attr( $saturation ) . ', 46% ); /* base: #767676; */ } Index: src/wp-content/themes/twentyseventeen/inc/customizer.php =================================================================== --- src/wp-content/themes/twentyseventeen/inc/customizer.php (revision 38976) +++ src/wp-content/themes/twentyseventeen/inc/customizer.php (working copy) @@ -1,6 +1,6 @@ add_panel( 'options_panel', array( - 'title' => __( 'Theme Options', 'twentyseventeen' ), - 'description' => __( 'Configure your theme settings', 'twentyseventeen' ), + $wp_customize->add_section( 'theme_options', array( + 'title' => __( 'Theme Options', 'twentyseventeen' ), + 'priority' => 130, // Before Additional CSS. ) ); - // Page Options. - $wp_customize->add_section( 'page_options', array( - 'title' => __( 'Single Page Layout', 'twentyseventeen' ), - 'active_callback' => 'twentyseventeen_is_page', - 'panel' => 'options_panel', - ) ); - - $wp_customize->add_setting( 'page_options', array( + $wp_customize->add_setting( 'page_layout', array( 'default' => 'two-column', - 'sanitize_callback' => 'twentyseventeen_sanitize_layout', + 'sanitize_callback' => 'twentyseventeen_sanitize_page_layout', 'transport' => 'postMessage', ) ); - $wp_customize->add_control( 'page_options', array( + $wp_customize->add_control( 'page_layout', array( 'label' => __( 'Page Layout', 'twentyseventeen' ), - 'section' => 'page_options', + 'section' => 'theme_options', 'type' => 'radio', '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' ), 'choices' => array( @@ -89,90 +82,49 @@ 'one-column' => __( 'One Column', 'twentyseventeen' ), 'two-column' => __( 'Two Column', 'twentyseventeen' ), ), + 'active_callback' => 'twentyseventeen_is_page_without_sidebar', ) ); - // Panel 1. - $wp_customize->add_section( 'panel_1', array( - 'title' => __( 'Panel 1', 'twentyseventeen' ), - 'active_callback' => 'is_front_page', - 'panel' => 'options_panel', - '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' ), - ) ); + /** + * Filter number of front page sections in Twenty Seventeen. + * + * @since Twenty Seventeen 1.0 + * + * @param $num_sections integer + */ + $num_sections = apply_filters( 'twentyseventeen_front_page_sections', 4 ); - $wp_customize->add_setting( 'panel_1', array( - 'default' => false, - 'sanitize_callback' => 'absint', - ) ); + // Create a setting and control for each of the sections available in the theme. + for ( $i = 1; $i < ( 1 + $num_sections ); $i++ ) { + $wp_customize->add_setting( 'panel_' . $i, array( + 'default' => false, + 'sanitize_callback' => 'absint', + 'transport' => 'postMessage', + ) ); - $wp_customize->add_control( 'panel_1', array( - 'label' => __( 'Panel Content', 'twentyseventeen' ), - 'section' => 'panel_1', - 'type' => 'dropdown-pages', - ) ); + $wp_customize->add_control( 'panel_' . $i, array( + /* translators: %d is the front page section number */ + 'label' => sprintf( __( 'Front Page Section %d Content', 'twentyseventeen' ), $i ), + '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' ) ), + 'section' => 'theme_options', + 'type' => 'dropdown-pages', + 'allow_addition' => true, + 'active_callback' => 'twentyseventeen_is_static_front_page', + ) ); - // Panel 2. - $wp_customize->add_section( 'panel_2', array( - 'title' => __( 'Panel 2', 'twentyseventeen' ), - 'active_callback' => 'is_front_page', - 'panel' => 'options_panel', - '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' ), - ) ); - - $wp_customize->add_setting( 'panel_2', array( - 'default' => false, - 'sanitize_callback' => 'absint', - ) ); - - $wp_customize->add_control( 'panel_2', array( - 'label' => __( 'Panel Content', 'twentyseventeen' ), - 'section' => 'panel_2', - 'type' => 'dropdown-pages', - ) ); - - // Panel 3. - $wp_customize->add_section( 'panel_3', array( - 'title' => __( 'Panel 3', 'twentyseventeen' ), - 'active_callback' => 'is_front_page', - 'panel' => 'options_panel', - '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' ), - ) ); - - $wp_customize->add_setting( 'panel_3', array( - 'default' => false, - 'sanitize_callback' => 'absint', - ) ); - - $wp_customize->add_control( 'panel_3', array( - 'label' => __( 'Panel Content', 'twentyseventeen' ), - 'section' => 'panel_3', - 'type' => 'dropdown-pages', - ) ); - - // Panel 4. - $wp_customize->add_section( 'panel_4', array( - 'title' => __( 'Panel 4', 'twentyseventeen' ), - 'active_callback' => 'is_front_page', - 'panel' => 'options_panel', - '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' ), - ) ); - - $wp_customize->add_setting( 'panel_4', array( - 'default' => false, - 'sanitize_callback' => 'absint', - ) ); - - $wp_customize->add_control( 'panel_4', array( - 'label' => __( 'Panel Content', 'twentyseventeen' ), - 'section' => 'panel_4', - 'type' => 'dropdown-pages', - ) ); + $wp_customize->selective_refresh->add_partial( 'panel_' . $i, array( + 'selector' => '#panel' . $i, + 'render_callback' => 'twentyseventeen_front_page_section', + 'container_inclusive' => true, + ) ); + } } add_action( 'customize_register', 'twentyseventeen_customize_register' ); /** - * Sanitize a radio button. + * Sanitize the page layout options. */ -function twentyseventeen_sanitize_layout( $input ) { +function twentyseventeen_sanitize_page_layout( $input ) { $valid = array( 'one-column' => __( 'One Column', 'twentyseventeen' ), 'two-column' => __( 'Two Column', 'twentyseventeen' ), @@ -223,17 +175,31 @@ } /** - * Binds JS handlers to make Theme Customizer preview reload changes asynchronously. + * Return whether we're previewing the front page and it's a static page. */ +function twentyseventeen_is_static_front_page() { + return ( is_front_page() && ! is_home() ); +} + +/** + * Return whether we're previewing a page and there are no widgets in the sidebar. + */ +function twentyseventeen_is_page_without_sidebar() { + return ( is_page() && ! is_active_sidebar( 'sidebar-1' ) ); +} + +/** + * Bind JS handlers to instantly live-preview changes. + */ function twentyseventeen_customize_preview_js() { - wp_enqueue_script( 'twentyseventeen-customizer', get_theme_file_uri( '/assets/js/customizer.js' ), array( 'customize-preview' ), '1.0', true ); + wp_enqueue_script( 'twentyseventeen-customize-preview', get_theme_file_uri( '/assets/js/customize-preview.js' ), array( 'customize-preview' ), '1.0', true ); } add_action( 'customize_preview_init', 'twentyseventeen_customize_preview_js' ); /** - * Some extra JavaScript to improve the user experience in the Customizer for this theme. + * Load dynamic logic for the customizer controls area. */ function twentyseventeen_panels_js() { - wp_enqueue_script( 'twentyseventeen-panel-customizer', get_theme_file_uri( '/assets/js/panel-customizer.js' ), array(), '1.0', true ); + wp_enqueue_script( 'twentyseventeen-customize-controls', get_theme_file_uri( '/assets/js/customize-controls.js' ), array(), '1.0', true ); } add_action( 'customize_controls_enqueue_scripts', 'twentyseventeen_panels_js' ); Index: src/wp-content/themes/twentyseventeen/inc/template-functions.php =================================================================== --- src/wp-content/themes/twentyseventeen/inc/template-functions.php (revision 38976) +++ src/wp-content/themes/twentyseventeen/inc/template-functions.php (working copy) @@ -46,7 +46,7 @@ // Add class for one or two column page layouts. if ( is_page() ) { - if ( 'one-column' === get_theme_mod( 'page_options' ) ) { + if ( 'one-column' === get_theme_mod( 'page_layout' ) ) { $classes[] = 'page-one-column'; } else { $classes[] = 'page-two-column'; @@ -72,11 +72,21 @@ * Primarily used to see if we have any panels active, duh. */ function twentyseventeen_panel_count() { - $panels = array( '1', '2', '3', '4' ); + $panel_count = 0; - foreach ( $panels as $panel ) { - if ( get_theme_mod( 'panel_' . $panel ) ) { + /** + * Filter number of front page sections in Twenty Seventeen. + * + * @since Twenty Seventeen 1.0 + * + * @param $num_sections integer + */ + $num_sections = apply_filters( 'twentyseventeen_front_page_sections', 4 ); + + // Create a setting and control for each of the sections available in the theme. + for ( $i = 1; $i < ( 1 + $num_sections ); $i++ ) { + if ( get_theme_mod( 'panel_' . $i ) ) { $panel_count++; } } @@ -90,10 +100,3 @@ function twentyseventeen_is_frontpage() { return ( is_front_page() && ! is_home() ); } - -/** - * Custom Active Callback to check for page. - */ -function twentyseventeen_is_page() { - return ( is_page() ); -} Index: src/wp-content/themes/twentyseventeen/inc/template-tags.php =================================================================== --- src/wp-content/themes/twentyseventeen/inc/template-tags.php (revision 38976) +++ src/wp-content/themes/twentyseventeen/inc/template-tags.php (working copy) @@ -125,7 +125,36 @@ } endif; +/** + * Display a front page section. + * + * @param $partial WP_Customize_Partial Partial associated with a selective refresh request. + * @param $id integer Front page section to display. + */ +function twentyseventeen_front_page_section( $partial = null, $id = 0 ) { + if ( is_a( $partial, 'WP_Customize_Partial' ) ) { + // Find out the id and set it up during a selective refresh. + global $twentyseventeencounter; + $id = str_replace( 'panel_', '', $partial->id ); + $twentyseventeencounter = $id; + } + global $post; // Modify the global post object before setting up post data. + if ( get_theme_mod( 'panel_' . $id ) ) { + global $post; + $post = get_post( get_theme_mod( 'panel_' . $id ) ); + setup_postdata( $post ); + set_query_var( 'panel', $id ); + + get_template_part( 'template-parts/page/content', 'front-page-panels' ); + + wp_reset_postdata(); + } else { + // The output placeholder anchor. + echo '
' . sprintf( __( 'Panel %1$s Placeholder', 'twentyseventeen' ), $id ) . '
'; + } +} + /** * Returns true if a blog has more than 1 category. * Index: src/wp-content/themes/twentyseventeen/style.css =================================================================== --- src/wp-content/themes/twentyseventeen/style.css (revision 38976) +++ src/wp-content/themes/twentyseventeen/style.css (working copy) @@ -2903,17 +2903,12 @@ # Customizer --------------------------------------------------------------*/ -/* Hide this until we're in the Customizer */ - -.twentyseventeen-panel-title { +/* Hide placeholders until we're in the front page sections section */ +.panel-placeholder { display: none; } -.twentyseventeen-customizer.twentyseventeen-front-page .twentyseventeen-panel { - /* Colour-code all panels (add 1 to account for #twentyseventeen-hero, so 2 is actually panel 1)*/ -} - -.twentyseventeen-customizer.twentyseventeen-front-page .twentyseventeen-panel:after { +.highlight-front-sections.twentyseventeen-customizer.twentyseventeen-front-page .twentyseventeen-panel:after { border: 2px dashed; bottom: 1em; content: ""; @@ -2922,122 +2917,69 @@ position: absolute; right: 1em; top: 1em; + z-index: -1; /* Prevent :after from preventing interactions within the section */ } +/* Used for placeholder text */ .twentyseventeen-customizer.twentyseventeen-front-page .twentyseventeen-panel .twentyseventeen-panel-title { - color: #fff; - display: inline-block; + display: block; font-size: 14px; font-size: 0.875rem; font-weight: 700; letter-spacing: 1px; - padding: 5px 10px; - position: absolute; - right: 3.2em; + padding: 3em; text-transform: uppercase; - top: 3.2em; - -webkit-transform: translate(3px, -3px); - -ms-transform: translate(3px, -3px); - transform: translate(3px, -3px); - z-index: 3; + text-align: center; } -.twentyseventeen-customizer.twentyseventeen-front-page .twentyseventeen-panel:nth-of-type(1):after { +/* Show borders on the custom page panels only when the front page sections are being edited */ +.highlight-front-sections.twentyseventeen-customizer.twentyseventeen-front-page .twentyseventeen-panel:nth-of-type(1):after { border: none; } -.twentyseventeen-customizer.twentyseventeen-front-page .twentyseventeen-panel:nth-of-type(2) .twentyseventeen-panel-title { - background: #b569a2; -} - -.twentyseventeen-customizer.twentyseventeen-front-page .twentyseventeen-panel:nth-of-type(2):after { +.highlight-front-sections.twentyseventeen-customizer.twentyseventeen-front-page .twentyseventeen-panel:nth-of-type(2):after { border-color: #b569a2; color: #b569a2; } -.twentyseventeen-customizer.twentyseventeen-front-page .twentyseventeen-panel:nth-of-type(3) .twentyseventeen-panel-title { - background: #8f68bd; -} - -.twentyseventeen-customizer.twentyseventeen-front-page .twentyseventeen-panel:nth-of-type(3):after { +.highlight-front-sections.twentyseventeen-customizer.twentyseventeen-front-page .twentyseventeen-panel:nth-of-type(3):after { border-color: #8f68bd; color: #8f68bd; } -.twentyseventeen-customizer.twentyseventeen-front-page .twentyseventeen-panel:nth-of-type(4) .twentyseventeen-panel-title { - background: #575ebd; -} - -.twentyseventeen-customizer.twentyseventeen-front-page .twentyseventeen-panel:nth-of-type(4):after { +.highlight-front-sections.twentyseventeen-customizer.twentyseventeen-front-page .twentyseventeen-panel:nth-of-type(4):after { border-color: #575ebd; color: #575ebd; } -/* Add a highlight class to improve Customizer behaviour */ - -@-webkit-keyframes flash { - - 0%, - 20%, - 40%, - 60%, - 80%, - 100% { - opacity: 1; - } - - 10%, - 30%, - 50%, - 70%, - 90% { - opacity: 0; - } +.twentyseventeen-front-page.twentyseventeen-customizer #primary article.panel-placeholder { + border: 0; } -@keyframes flash { - - 0%, - 20%, - 40%, - 60%, - 80%, - 100% { - opacity: 1; - } - - 10%, - 30%, - 50%, - 70%, - 90% { - opacity: 0; - } +/* Add some space around the visual edit shortcut buttons. */ +.twentyseventeen-panel .customize-partial-edit-shortcut:before { + top: 30px; + left: 30px; } -article.panel-placeholder { - display: none; +/* Prevent color schemes from showing 1px dots everywhere. */ +.customize-partial-edit-shortcut { + background: transparent !important; } -.twentyseventeen-front-page.twentyseventeen-customizer #primary article.panel-placeholder { - border: 0; +/* Ensure that placeholder icons are visible. */ +.twentyseventeen-panel .customize-partial-edit-shortcut-hidden:before { + visibility: visible; } -.twentyseventeen-customizer .panel-placeholder.twentyseventeen-highlight { - display: block; - height: 112px; +/* Prevent icon colors from clashing with color schemes. */ +.colors-custom .customize-partial-edit-shortcut:before { + text-shadow: 0 -1px 1px rgba(0,0,0,.2), + 1px 0 1px rgba(0,0,0,.2), + 0 1px 1px rgba(0,0,0,.2), + -1px 0 1px rgba(0,0,0,.2); } -.twentyseventeen-highlight:after { - -webkit-animation-duration: 2s; - animation-duration: 2s; - -webkit-animation-name: flash; - animation-name: flash; - -webkit-animation-timing-function: ease-in-out; - animation-timing-function: ease-in-out; - -webkit-animation-fill-mode: both; - animation-fill-mode: both; -} /*-------------------------------------------------------------- ## SVGs Fallbacks Index: src/wp-content/themes/twentyseventeen/template-parts/page/content-front-page-panels.php =================================================================== --- src/wp-content/themes/twentyseventeen/template-parts/page/content-front-page-panels.php (revision 38976) +++ src/wp-content/themes/twentyseventeen/template-parts/page/content-front-page-panels.php (working copy) @@ -12,12 +12,8 @@ ?> -
> +
> - - - - ID ), 'twentyseventeen-featured-image' ); @@ -77,7 +73,7 @@ endwhile; wp_reset_postdata(); ?> - +