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. git-svn-id: https://develop.svn.wordpress.org/trunk@38986 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
David A. Kennedy
parent
744f87dbb3
commit
42bb3f3789
@ -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 );
|
||||
@ -1,32 +1,34 @@
|
||||
/**
|
||||
* File customizer.js.
|
||||
* File customize-preview.js.
|
||||
*
|
||||
* Theme Customizer enhancements for a better user experience.
|
||||
*
|
||||
* Contains handlers to make Theme Customizer preview reload changes asynchronously.
|
||||
* Instantly live-update customizer settings in the preview for improved user experience.
|
||||
*/
|
||||
|
||||
( function( $ ) {
|
||||
|
||||
// Collect information from panel-customizer.js about which panels are opening
|
||||
// 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 ) {
|
||||
|
||||
// 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' );
|
||||
// Only on the front page.
|
||||
if ( ! $( 'body' ).hasClass( 'twentyseventeen-front-page' ) ) {
|
||||
return;
|
||||
}
|
||||
|
||||
// If we've left the panel, remove the highlight and scroll back to the top
|
||||
} else {
|
||||
$.scrollTo( $( '#masthead' ), {
|
||||
duration: 300,
|
||||
offset: { 'top': 0 }
|
||||
// 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.
|
||||
} );
|
||||
$( '.' + data.section ).removeClass( 'twentyseventeen-highlight' );
|
||||
});
|
||||
|
||||
// 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.
|
||||
}
|
||||
} );
|
||||
} );
|
||||
@ -91,7 +93,7 @@
|
||||
} );
|
||||
|
||||
// Page layouts.
|
||||
wp.customize( 'page_options', function( value ) {
|
||||
wp.customize( 'page_layout', function( value ) {
|
||||
value.bind( function( to ) {
|
||||
if ( 'one-column' === to ) {
|
||||
$( 'body' ).addClass( 'page-one-column' ).removeClass( 'page-two-column' );
|
||||
@ -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 );
|
||||
@ -28,36 +28,25 @@ get_header(); ?>
|
||||
|
||||
<?php
|
||||
// Get each of our panels and show the post data.
|
||||
$panels = array( '1', '2', '3', '4' );
|
||||
$titles = array();
|
||||
|
||||
global $twentyseventeencounter; // Used in template-parts/page/content-front-page-panels.php file.
|
||||
|
||||
if ( 0 !== twentyseventeen_panel_count() || is_customize_preview() ) : // If we have pages to show.
|
||||
|
||||
$twentyseventeencounter = 1;
|
||||
/**
|
||||
* 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 );
|
||||
global $twentyseventeencounter;
|
||||
|
||||
foreach ( $panels as $panel ) :
|
||||
if ( get_theme_mod( 'panel_' . $panel ) ) :
|
||||
$post = get_post( get_theme_mod( 'panel_' . $panel ) );
|
||||
setup_postdata( $post );
|
||||
set_query_var( 'panel', $panel );
|
||||
// Create a setting and control for each of the sections available in the theme.
|
||||
for ( $i = 1; $i < ( 1 + $num_sections ); $i++ ) {
|
||||
$twentyseventeencounter = $i;
|
||||
twentyseventeen_front_page_section( null, $i );
|
||||
}
|
||||
|
||||
$titles[] = get_the_title(); // Put page titles in an array for use in navigation.
|
||||
get_template_part( 'template-parts/page/content', 'front-page-panels' );
|
||||
|
||||
wp_reset_postdata();
|
||||
else :
|
||||
// The output placeholder anchor.
|
||||
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>';
|
||||
endif;
|
||||
|
||||
$twentyseventeencounter++;
|
||||
endforeach;
|
||||
?>
|
||||
|
||||
<?php endif; // The if ( 0 !== twentyseventeen_panel_count() ) ends here.
|
||||
?>
|
||||
endif; // The if ( 0 !== twentyseventeen_panel_count() ) ends here. ?>
|
||||
|
||||
</main><!-- #main -->
|
||||
</div><!-- #primary -->
|
||||
|
||||
@ -312,7 +312,8 @@ body.colors-custom,
|
||||
.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; */
|
||||
}
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<?php
|
||||
/**
|
||||
* Twenty Seventeen: Theme Customizer
|
||||
* Twenty Seventeen: Customizer
|
||||
*
|
||||
* @package WordPress
|
||||
* @subpackage Twenty_Seventeen
|
||||
@ -62,119 +62,71 @@ function twentyseventeen_customize_register( $wp_customize ) {
|
||||
) ) );
|
||||
|
||||
/**
|
||||
* Add the Theme Options section.
|
||||
* Theme options.
|
||||
*/
|
||||
$wp_customize->add_panel( 'options_panel', array(
|
||||
$wp_customize->add_section( 'theme_options', array(
|
||||
'title' => __( 'Theme Options', 'twentyseventeen' ),
|
||||
'description' => __( 'Configure your theme settings', '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(
|
||||
'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(
|
||||
// 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',
|
||||
$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' ),
|
||||
@ -225,17 +177,31 @@ function twentyseventeen_customize_partial_blogdescription() {
|
||||
}
|
||||
|
||||
/**
|
||||
* 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' );
|
||||
|
||||
@ -46,7 +46,7 @@ function twentyseventeen_body_classes( $classes ) {
|
||||
|
||||
// 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 @@ add_filter( 'body_class', 'twentyseventeen_body_classes' );
|
||||
* 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_panel_count() {
|
||||
function twentyseventeen_is_frontpage() {
|
||||
return ( is_front_page() && ! is_home() );
|
||||
}
|
||||
|
||||
/**
|
||||
* Custom Active Callback to check for page.
|
||||
*/
|
||||
function twentyseventeen_is_page() {
|
||||
return ( is_page() );
|
||||
}
|
||||
|
||||
@ -125,6 +125,35 @@ function twentyseventeen_edit_link() {
|
||||
}
|
||||
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 '<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>';
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns true if a blog has more than 1 category.
|
||||
|
||||
@ -2935,17 +2935,12 @@ object {
|
||||
# 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: "";
|
||||
@ -2954,123 +2949,70 @@ object {
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes flash {
|
||||
|
||||
0%,
|
||||
20%,
|
||||
40%,
|
||||
60%,
|
||||
80%,
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
10%,
|
||||
30%,
|
||||
50%,
|
||||
70%,
|
||||
90% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
article.panel-placeholder {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.twentyseventeen-front-page.twentyseventeen-customizer #primary article.panel-placeholder {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.twentyseventeen-customizer .panel-placeholder.twentyseventeen-highlight {
|
||||
display: block;
|
||||
height: 112px;
|
||||
/* Add some space around the visual edit shortcut buttons. */
|
||||
.twentyseventeen-panel .customize-partial-edit-shortcut:before {
|
||||
top: 30px;
|
||||
left: 30px;
|
||||
}
|
||||
|
||||
.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;
|
||||
/* Prevent color schemes from showing 1px dots everywhere. */
|
||||
.customize-partial-edit-shortcut {
|
||||
background: transparent !important;
|
||||
}
|
||||
|
||||
/* Ensure that placeholder icons are visible. */
|
||||
.twentyseventeen-panel .customize-partial-edit-shortcut-hidden:before {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
/* 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);
|
||||
}
|
||||
|
||||
|
||||
/*--------------------------------------------------------------
|
||||
## SVGs Fallbacks
|
||||
--------------------------------------------------------------*/
|
||||
|
||||
@ -12,11 +12,7 @@ global $twentyseventeencounter;
|
||||
|
||||
?>
|
||||
|
||||
<article id="post-<?php the_ID(); ?>" <?php post_class( 'twentyseventeen-panel ' ); ?> >
|
||||
|
||||
<span class="panel twentyseventeen-panel<?php echo esc_attr( $twentyseventeencounter ); ?>" id="panel<?php echo esc_attr( $twentyseventeencounter ); ?>">
|
||||
<span class="twentyseventeen-panel-title"><?php printf( __( 'Panel %1$s', 'twentyseventeen' ), esc_attr( $twentyseventeencounter ) ); ?></span>
|
||||
</span>
|
||||
<article id="panel<?php echo $twentyseventeencounter; ?>" <?php post_class( 'twentyseventeen-panel ' ); ?> >
|
||||
|
||||
<?php if ( has_post_thumbnail() ) :
|
||||
$thumbnail = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'twentyseventeen-featured-image' );
|
||||
@ -77,7 +73,7 @@ global $twentyseventeencounter;
|
||||
endwhile;
|
||||
wp_reset_postdata();
|
||||
?>
|
||||
</div><!-- .pique-recent-posts -->
|
||||
</div><!-- .recent-posts -->
|
||||
<?php endif; ?>
|
||||
<?php endif; ?>
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user