<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>[38986] trunk/src/wp-content/themes/twentyseventeen: Twenty Seventeen: Improve user and developer experience with the customizer integration</title>
</head>
<body>

<style type="text/css"><!--
#msg dl.meta { border: 1px #006 solid; background: #369; padding: 6px; color: #fff; }
#msg dl.meta dt { float: left; width: 6em; font-weight: bold; }
#msg dt:after { content:':';}
#msg dl, #msg dt, #msg ul, #msg li, #header, #footer, #logmsg { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt;  }
#msg dl a { font-weight: bold}
#msg dl a:link    { color:#fc3; }
#msg dl a:active  { color:#ff0; }
#msg dl a:visited { color:#cc6; }
h3 { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; font-weight: bold; }
#msg pre { overflow: auto; background: #ffc; border: 1px #fa0 solid; padding: 6px; }
#logmsg { background: #ffc; border: 1px #fa0 solid; padding: 1em 1em 0 1em; }
#logmsg p, #logmsg pre, #logmsg blockquote { margin: 0 0 1em 0; }
#logmsg p, #logmsg li, #logmsg dt, #logmsg dd { line-height: 14pt; }
#logmsg h1, #logmsg h2, #logmsg h3, #logmsg h4, #logmsg h5, #logmsg h6 { margin: .5em 0; }
#logmsg h1:first-child, #logmsg h2:first-child, #logmsg h3:first-child, #logmsg h4:first-child, #logmsg h5:first-child, #logmsg h6:first-child { margin-top: 0; }
#logmsg ul, #logmsg ol { padding: 0; list-style-position: inside; margin: 0 0 0 1em; }
#logmsg ul { text-indent: -1em; padding-left: 1em; }#logmsg ol { text-indent: -1.5em; padding-left: 1.5em; }
#logmsg > ul, #logmsg > ol { margin: 0 0 1em 0; }
#logmsg pre { background: #eee; padding: 1em; }
#logmsg blockquote { border: 1px solid #fa0; border-left-width: 10px; padding: 1em 1em 0 1em; background: white;}
#logmsg dl { margin: 0; }
#logmsg dt { font-weight: bold; }
#logmsg dd { margin: 0; padding: 0 0 0.5em 0; }
#logmsg dd:before { content:'\00bb';}
#logmsg table { border-spacing: 0px; border-collapse: collapse; border-top: 4px solid #fa0; border-bottom: 1px solid #fa0; background: #fff; }
#logmsg table th { text-align: left; font-weight: normal; padding: 0.2em 0.5em; border-top: 1px dotted #fa0; }
#logmsg table td { text-align: right; border-top: 1px dotted #fa0; padding: 0.2em 0.5em; }
#logmsg table thead th { text-align: center; border-bottom: 1px solid #fa0; }
#logmsg table th.Corner { text-align: left; }
#logmsg hr { border: none 0; border-top: 2px dashed #fa0; height: 1px; }
#header, #footer { color: #fff; background: #636; border: 1px #300 solid; padding: 6px; }
#patch { width: 100%; }
#patch h4 {font-family: verdana,arial,helvetica,sans-serif;font-size:10pt;padding:8px;background:#369;color:#fff;margin:0;}
#patch .propset h4, #patch .binary h4 {margin:0;}
#patch pre {padding:0;line-height:1.2em;margin:0;}
#patch .diff {width:100%;background:#eee;padding: 0 0 10px 0;overflow:auto;}
#patch .propset .diff, #patch .binary .diff  {padding:10px 0;}
#patch span {display:block;padding:0 10px;}
#patch .modfile, #patch .addfile, #patch .delfile, #patch .propset, #patch .binary, #patch .copfile {border:1px solid #ccc;margin:10px 0;}
#patch ins {background:#dfd;text-decoration:none;display:block;padding:0 10px;}
#patch del {background:#fdd;text-decoration:none;display:block;padding:0 10px;}
#patch .lines, .info {color:#888;background:#fff;}
--></style>
<div id="msg">
<dl class="meta" style="font-size: 105%">
<dt style="float: left; width: 6em; font-weight: bold">Revision</dt> <dd><a style="font-weight: bold" href="https://core.trac.wordpress.org/changeset/38986">38986</a><script type="application/ld+json">{"@context":"http://schema.org","@type":"EmailMessage","description":"Review this Commit","action":{"@type":"ViewAction","url":"https://core.trac.wordpress.org/changeset/38986","name":"Review Commit"}}</script></dd>
<dt style="float: left; width: 6em; font-weight: bold">Author</dt> <dd>davidakennedy</dd>
<dt style="float: left; width: 6em; font-weight: bold">Date</dt> <dd>2016-10-27 22:08:33 +0000 (Thu, 27 Oct 2016)</dd>
</dl>

<pre style='padding-left: 1em; margin: 2em 0; border-left: 2px solid #ccc; line-height: 1.25; font-size: 105%; font-family: sans-serif'>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 <a href="https://core.trac.wordpress.org/ticket/38426">#38426</a>.</pre>

<h3>Modified Paths</h3>
<ul>
<li><a href="#trunksrcwpcontentthemestwentyseventeenfrontpagephp">trunk/src/wp-content/themes/twentyseventeen/front-page.php</a></li>
<li><a href="#trunksrcwpcontentthemestwentyseventeeninccolorpatternsphp">trunk/src/wp-content/themes/twentyseventeen/inc/color-patterns.php</a></li>
<li><a href="#trunksrcwpcontentthemestwentyseventeeninccustomizerphp">trunk/src/wp-content/themes/twentyseventeen/inc/customizer.php</a></li>
<li><a href="#trunksrcwpcontentthemestwentyseventeeninctemplatefunctionsphp">trunk/src/wp-content/themes/twentyseventeen/inc/template-functions.php</a></li>
<li><a href="#trunksrcwpcontentthemestwentyseventeeninctemplatetagsphp">trunk/src/wp-content/themes/twentyseventeen/inc/template-tags.php</a></li>
<li><a href="#trunksrcwpcontentthemestwentyseventeenstylecss">trunk/src/wp-content/themes/twentyseventeen/style.css</a></li>
<li><a href="#trunksrcwpcontentthemestwentyseventeentemplatepartspagecontentfrontpagepanelsphp">trunk/src/wp-content/themes/twentyseventeen/template-parts/page/content-front-page-panels.php</a></li>
</ul>

<h3>Added Paths</h3>
<ul>
<li><a href="#trunksrcwpcontentthemestwentyseventeenassetsjscustomizecontrolsjs">trunk/src/wp-content/themes/twentyseventeen/assets/js/customize-controls.js</a></li>
<li><a href="#trunksrcwpcontentthemestwentyseventeenassetsjscustomizepreviewjs">trunk/src/wp-content/themes/twentyseventeen/assets/js/customize-preview.js</a></li>
</ul>

<h3>Removed Paths</h3>
<ul>
<li><a href="#trunksrcwpcontentthemestwentyseventeenassetsjscustomizerjs">trunk/src/wp-content/themes/twentyseventeen/assets/js/customizer.js</a></li>
<li><a href="#trunksrcwpcontentthemestwentyseventeenassetsjspanelcustomizerjs">trunk/src/wp-content/themes/twentyseventeen/assets/js/panel-customizer.js</a></li>
</ul>

</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunksrcwpcontentthemestwentyseventeenassetsjscustomizecontrolsjsfromrev38982trunksrcwpcontentthemestwentyseventeenassetsjspanelcustomizerjs"></a>
<div class="copfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Copied: trunk/src/wp-content/themes/twentyseventeen/assets/js/customize-controls.js (from rev 38982, trunk/src/wp-content/themes/twentyseventeen/assets/js/panel-customizer.js)</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-content/themes/twentyseventeen/assets/js/customize-controls.js                               (rev 0)
+++ trunk/src/wp-content/themes/twentyseventeen/assets/js/customize-controls.js 2016-10-27 22:08:33 UTC (rev 38986)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -0,0 +1,34 @@
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+/**
+ * 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 );
</ins></span></pre></div>
<a id="trunksrcwpcontentthemestwentyseventeenassetsjscustomizepreviewjsfromrev38985trunksrcwpcontentthemestwentyseventeenassetsjscustomizerjs"></a>
<div class="copfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Copied: trunk/src/wp-content/themes/twentyseventeen/assets/js/customize-preview.js (from rev 38985, trunk/src/wp-content/themes/twentyseventeen/assets/js/customizer.js)</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-content/themes/twentyseventeen/assets/js/customize-preview.js                                (rev 0)
+++ trunk/src/wp-content/themes/twentyseventeen/assets/js/customize-preview.js  2016-10-27 22:08:33 UTC (rev 38986)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -0,0 +1,105 @@
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+/**
+ * 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 );
</ins></span></pre></div>
<a id="trunksrcwpcontentthemestwentyseventeenassetsjscustomizerjs"></a>
<div class="delfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Deleted: trunk/src/wp-content/themes/twentyseventeen/assets/js/customizer.js</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-content/themes/twentyseventeen/assets/js/customizer.js       2016-10-27 21:50:56 UTC (rev 38985)
+++ trunk/src/wp-content/themes/twentyseventeen/assets/js/customizer.js 2016-10-27 22:08:33 UTC (rev 38986)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1,103 +0,0 @@
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-/**
- * 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 );
</del></span></pre></div>
<a id="trunksrcwpcontentthemestwentyseventeenassetsjspanelcustomizerjs"></a>
<div class="delfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Deleted: trunk/src/wp-content/themes/twentyseventeen/assets/js/panel-customizer.js</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-content/themes/twentyseventeen/assets/js/panel-customizer.js 2016-10-27 21:50:56 UTC (rev 38985)
+++ trunk/src/wp-content/themes/twentyseventeen/assets/js/panel-customizer.js   2016-10-27 22:08:33 UTC (rev 38986)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1,41 +0,0 @@
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-/**
- * 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 );
</del></span></pre></div>
<a id="trunksrcwpcontentthemestwentyseventeenfrontpagephp"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/wp-content/themes/twentyseventeen/front-page.php</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-content/themes/twentyseventeen/front-page.php        2016-10-27 21:50:56 UTC (rev 38985)
+++ trunk/src/wp-content/themes/twentyseventeen/front-page.php  2016-10-27 22:08:33 UTC (rev 38986)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -28,37 +28,26 @@
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px">                <?php
</span><span class="cx" style="display: block; padding: 0 10px">                // Get each of our panels and show the post data.
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                $panels = array( '1', '2', '3', '4' );
-               $titles = array();
-
-               global $twentyseventeencounter; // Used in template-parts/page/content-front-page-panels.php file.
-
</del><span class="cx" style="display: block; padding: 0 10px">                 if ( 0 !== twentyseventeen_panel_count() || is_customize_preview() ) : // If we have pages to show.
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                        $twentyseventeencounter = 1;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                 /**
+                        * 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;
</ins><span class="cx" style="display: block; padding: 0 10px"> 
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                        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 );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                 // 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 );
+                       }
</ins><span class="cx" style="display: block; padding: 0 10px"> 
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                                        $titles[] = get_the_title(); // Put page titles in an array for use in navigation.
-                                       get_template_part( 'template-parts/page/content', 'front-page-panels' );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ endif; // The if ( 0 !== twentyseventeen_panel_count() ) ends here. ?>
</ins><span class="cx" style="display: block; padding: 0 10px"> 
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                                        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.
-       ?>
-
</del><span class="cx" style="display: block; padding: 0 10px">         </main><!-- #main -->
</span><span class="cx" style="display: block; padding: 0 10px"> </div><!-- #primary -->
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span></span></pre></div>
<a id="trunksrcwpcontentthemestwentyseventeeninccolorpatternsphp"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/wp-content/themes/twentyseventeen/inc/color-patterns.php</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-content/themes/twentyseventeen/inc/color-patterns.php        2016-10-27 21:50:56 UTC (rev 38985)
+++ trunk/src/wp-content/themes/twentyseventeen/inc/color-patterns.php  2016-10-27 22:08:33 UTC (rev 38986)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -312,7 +312,8 @@
</span><span class="cx" style="display: block; padding: 0 10px"> .colors-custom .next.page-numbers:focus,
</span><span class="cx" style="display: block; padding: 0 10px"> .colors-custom .next.page-numbers:hover,
</span><span class="cx" style="display: block; padding: 0 10px"> .colors-custom .site-content .wp-playlist-light .wp-playlist-item:hover,
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.colors-custom .site-content .wp-playlist-light .wp-playlist-item:focus {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.colors-custom .site-content .wp-playlist-light .wp-playlist-item:focus,
+.colors-custom .customize-partial-edit-shortcut:before {
</ins><span class="cx" style="display: block; padding: 0 10px">         background: hsl( ' . esc_attr( $hue ) . ', ' . esc_attr( $saturation ) . ', 46% ); /* base: #767676; */
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span></span></pre></div>
<a id="trunksrcwpcontentthemestwentyseventeeninccustomizerphp"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/wp-content/themes/twentyseventeen/inc/customizer.php</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-content/themes/twentyseventeen/inc/customizer.php    2016-10-27 21:50:56 UTC (rev 38985)
+++ trunk/src/wp-content/themes/twentyseventeen/inc/customizer.php      2016-10-27 22:08:33 UTC (rev 38986)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1,6 +1,6 @@
</span><span class="cx" style="display: block; padding: 0 10px"> <?php
</span><span class="cx" style="display: block; padding: 0 10px"> /**
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- * Twenty Seventeen: Theme Customizer
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ * Twenty Seventeen: Customizer
</ins><span class="cx" style="display: block; padding: 0 10px">  *
</span><span class="cx" style="display: block; padding: 0 10px">  * @package WordPress
</span><span class="cx" style="display: block; padding: 0 10px">  * @subpackage Twenty_Seventeen
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -62,119 +62,71 @@
</span><span class="cx" style="display: block; padding: 0 10px">        ) ) );
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px">        /**
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-         * Add the Theme Options section.
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+  * Theme options.
</ins><span class="cx" style="display: block; padding: 0 10px">          */
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-        $wp_customize->add_panel( 'options_panel', array(
-               'title'       => __( 'Theme Options', 'twentyseventeen' ),
-               'description' => __( 'Configure your theme settings', 'twentyseventeen' ),
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ $wp_customize->add_section( 'theme_options', array(
+               'title'    => __( 'Theme Options', 'twentyseventeen' ),
+               'priority' => 130, // Before Additional CSS.
</ins><span class="cx" style="display: block; padding: 0 10px">         ) );
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-        // 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(
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ $wp_customize->add_setting( 'page_layout', array(
</ins><span class="cx" style="display: block; padding: 0 10px">                 'default'           => 'two-column',
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                'sanitize_callback' => 'twentyseventeen_sanitize_layout',
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+         'sanitize_callback' => 'twentyseventeen_sanitize_page_layout',
</ins><span class="cx" style="display: block; padding: 0 10px">                 'transport'         => 'postMessage',
</span><span class="cx" style="display: block; padding: 0 10px">        ) );
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-        $wp_customize->add_control( 'page_options', array(
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ $wp_customize->add_control( 'page_layout', array(
</ins><span class="cx" style="display: block; padding: 0 10px">                 'label'       => __( 'Page Layout', 'twentyseventeen' ),
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                'section'     => 'page_options',
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+         'section'     => 'theme_options',
</ins><span class="cx" style="display: block; padding: 0 10px">                 'type'        => 'radio',
</span><span class="cx" style="display: block; padding: 0 10px">                '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' ),
</span><span class="cx" style="display: block; padding: 0 10px">                'choices'     => array(
</span><span class="cx" style="display: block; padding: 0 10px">                        'one-column' => __( 'One Column', 'twentyseventeen' ),
</span><span class="cx" style="display: block; padding: 0 10px">                        'two-column' => __( 'Two Column', 'twentyseventeen' ),
</span><span class="cx" style="display: block; padding: 0 10px">                ),
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                'active_callback' => 'twentyseventeen_is_page_without_sidebar',
</ins><span class="cx" style="display: block; padding: 0 10px">         ) );
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-        // 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&rsquo;t select a page, this panel will not be displayed.', 'twentyseventeen' ),
-       ) );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ /**
+        * 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 );
</ins><span class="cx" style="display: block; padding: 0 10px"> 
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-        $wp_customize->add_setting( 'panel_1', array(
-               'default'           => false,
-               'sanitize_callback' => 'absint',
-       ) );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ // 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',
+               ) );
</ins><span class="cx" style="display: block; padding: 0 10px"> 
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-        $wp_customize->add_control( 'panel_1', array(
-               'label'   => __( 'Panel Content', 'twentyseventeen' ),
-               'section' => 'panel_1',
-               'type'    => 'dropdown-pages',
-       ) );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+         $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',
+               ) );
</ins><span class="cx" style="display: block; padding: 0 10px"> 
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-        // 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&rsquo;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&rsquo;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&rsquo;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',
-       ) );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+         $wp_customize->selective_refresh->add_partial( 'panel_' . $i, array(
+                       'selector'            => '#panel' . $i,
+                       'render_callback'     => 'twentyseventeen_front_page_section',
+                       'container_inclusive' => true,
+               ) );
+       }
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> add_action( 'customize_register', 'twentyseventeen_customize_register' );
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px"> /**
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- * Sanitize a radio button.
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ * Sanitize the page layout options.
</ins><span class="cx" style="display: block; padding: 0 10px">  */
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-function twentyseventeen_sanitize_layout( $input ) {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+function twentyseventeen_sanitize_page_layout( $input ) {
</ins><span class="cx" style="display: block; padding: 0 10px">         $valid = array(
</span><span class="cx" style="display: block; padding: 0 10px">                'one-column' => __( 'One Column', 'twentyseventeen' ),
</span><span class="cx" style="display: block; padding: 0 10px">                'two-column' => __( 'Two Column', 'twentyseventeen' ),
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -225,17 +177,31 @@
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px"> /**
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- * Binds JS handlers to make Theme Customizer preview reload changes asynchronously.
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ * Return whether we're previewing the front page and it's a static page.
</ins><span class="cx" style="display: block; padding: 0 10px">  */
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+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.
+ */
</ins><span class="cx" style="display: block; padding: 0 10px"> function twentyseventeen_customize_preview_js() {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-        wp_enqueue_script( 'twentyseventeen-customizer', get_theme_file_uri( '/assets/js/customizer.js' ), array( 'customize-preview' ), '1.0', true );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ wp_enqueue_script( 'twentyseventeen-customize-preview', get_theme_file_uri( '/assets/js/customize-preview.js' ), array( 'customize-preview' ), '1.0', true );
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> add_action( 'customize_preview_init', 'twentyseventeen_customize_preview_js' );
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px"> /**
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- * Some extra JavaScript to improve the user experience in the Customizer for this theme.
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ * Load dynamic logic for the customizer controls area.
</ins><span class="cx" style="display: block; padding: 0 10px">  */
</span><span class="cx" style="display: block; padding: 0 10px"> function twentyseventeen_panels_js() {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-        wp_enqueue_script( 'twentyseventeen-panel-customizer', get_theme_file_uri( '/assets/js/panel-customizer.js' ), array(), '1.0', true );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ wp_enqueue_script( 'twentyseventeen-customize-controls', get_theme_file_uri( '/assets/js/customize-controls.js' ), array(), '1.0', true );
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> add_action( 'customize_controls_enqueue_scripts', 'twentyseventeen_panels_js' );
</span></span></pre></div>
<a id="trunksrcwpcontentthemestwentyseventeeninctemplatefunctionsphp"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/wp-content/themes/twentyseventeen/inc/template-functions.php</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-content/themes/twentyseventeen/inc/template-functions.php    2016-10-27 21:50:56 UTC (rev 38985)
+++ trunk/src/wp-content/themes/twentyseventeen/inc/template-functions.php      2016-10-27 22:08:33 UTC (rev 38986)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -46,7 +46,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px">        // Add class for one or two column page layouts.
</span><span class="cx" style="display: block; padding: 0 10px">        if ( is_page() ) {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                if ( 'one-column' === get_theme_mod( 'page_options' ) ) {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+         if ( 'one-column' === get_theme_mod( 'page_layout' ) ) {
</ins><span class="cx" style="display: block; padding: 0 10px">                         $classes[] = 'page-one-column';
</span><span class="cx" style="display: block; padding: 0 10px">                } else {
</span><span class="cx" style="display: block; padding: 0 10px">                        $classes[] = 'page-two-column';
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -72,11 +72,21 @@
</span><span class="cx" style="display: block; padding: 0 10px">  * Primarily used to see if we have any panels active, duh.
</span><span class="cx" style="display: block; padding: 0 10px">  */
</span><span class="cx" style="display: block; padding: 0 10px"> function twentyseventeen_panel_count() {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-        $panels = array( '1', '2', '3', '4' );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+
</ins><span class="cx" style="display: block; padding: 0 10px">         $panel_count = 0;
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-        foreach ( $panels as $panel ) {
-               if ( get_theme_mod( 'panel_' . $panel ) ) {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ /**
+        * 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 ) ) {
</ins><span class="cx" style="display: block; padding: 0 10px">                         $panel_count++;
</span><span class="cx" style="display: block; padding: 0 10px">                }
</span><span class="cx" style="display: block; padding: 0 10px">        }
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -90,10 +100,3 @@
</span><span class="cx" style="display: block; padding: 0 10px"> function twentyseventeen_is_frontpage() {
</span><span class="cx" style="display: block; padding: 0 10px">        return ( is_front_page() && ! is_home() );
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-
-/**
- * Custom Active Callback to check for page.
- */
-function twentyseventeen_is_page() {
-       return ( is_page() );
-}
</del></span></pre></div>
<a id="trunksrcwpcontentthemestwentyseventeeninctemplatetagsphp"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/wp-content/themes/twentyseventeen/inc/template-tags.php</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-content/themes/twentyseventeen/inc/template-tags.php 2016-10-27 21:50:56 UTC (rev 38985)
+++ trunk/src/wp-content/themes/twentyseventeen/inc/template-tags.php   2016-10-27 22:08:33 UTC (rev 38986)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -125,7 +125,36 @@
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> endif;
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+/**
+ * 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;
+       }
</ins><span class="cx" style="display: block; padding: 0 10px"> 
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+        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>';
+       }
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> /**
</span><span class="cx" style="display: block; padding: 0 10px">  * Returns true if a blog has more than 1 category.
</span><span class="cx" style="display: block; padding: 0 10px">  *
</span></span></pre></div>
<a id="trunksrcwpcontentthemestwentyseventeenstylecss"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/wp-content/themes/twentyseventeen/style.css</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-content/themes/twentyseventeen/style.css     2016-10-27 21:50:56 UTC (rev 38985)
+++ trunk/src/wp-content/themes/twentyseventeen/style.css       2016-10-27 22:08:33 UTC (rev 38986)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -2935,17 +2935,12 @@
</span><span class="cx" style="display: block; padding: 0 10px"> # Customizer
</span><span class="cx" style="display: block; padding: 0 10px"> --------------------------------------------------------------*/
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-/* Hide this until we're in the Customizer */
-
-.twentyseventeen-panel-title {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+/* Hide placeholders until we're in the front page sections section */
+.panel-placeholder {
</ins><span class="cx" style="display: block; padding: 0 10px">         display: none;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.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 {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.highlight-front-sections.twentyseventeen-customizer.twentyseventeen-front-page .twentyseventeen-panel:after {
</ins><span class="cx" style="display: block; padding: 0 10px">         border: 2px dashed;
</span><span class="cx" style="display: block; padding: 0 10px">        bottom: 1em;
</span><span class="cx" style="display: block; padding: 0 10px">        content: "";
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -2954,122 +2949,69 @@
</span><span class="cx" style="display: block; padding: 0 10px">        position: absolute;
</span><span class="cx" style="display: block; padding: 0 10px">        right: 1em;
</span><span class="cx" style="display: block; padding: 0 10px">        top: 1em;
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+        z-index: -1; /* Prevent :after from preventing interactions within the section */
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+/* Used for placeholder text */
</ins><span class="cx" style="display: block; padding: 0 10px"> .twentyseventeen-customizer.twentyseventeen-front-page .twentyseventeen-panel .twentyseventeen-panel-title {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-        color: #fff;
-       display: inline-block;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ display: block;
</ins><span class="cx" style="display: block; padding: 0 10px">         font-size: 14px;
</span><span class="cx" style="display: block; padding: 0 10px">        font-size: 0.875rem;
</span><span class="cx" style="display: block; padding: 0 10px">        font-weight: 700;
</span><span class="cx" style="display: block; padding: 0 10px">        letter-spacing: 1px;
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-        padding: 5px 10px;
-       position: absolute;
-       right: 3.2em;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ padding: 3em;
</ins><span class="cx" style="display: block; padding: 0 10px">         text-transform: uppercase;
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-        top: 3.2em;
-       -webkit-transform: translate(3px, -3px);
-       -ms-transform: translate(3px, -3px);
-       transform: translate(3px, -3px);
-       z-index: 3;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ text-align: center;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.twentyseventeen-customizer.twentyseventeen-front-page .twentyseventeen-panel:nth-of-type(1):after {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+/* 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 {
</ins><span class="cx" style="display: block; padding: 0 10px">         border: none;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.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 {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.highlight-front-sections.twentyseventeen-customizer.twentyseventeen-front-page .twentyseventeen-panel:nth-of-type(2):after {
</ins><span class="cx" style="display: block; padding: 0 10px">         border-color: #b569a2;
</span><span class="cx" style="display: block; padding: 0 10px">        color: #b569a2;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.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 {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.highlight-front-sections.twentyseventeen-customizer.twentyseventeen-front-page .twentyseventeen-panel:nth-of-type(3):after {
</ins><span class="cx" style="display: block; padding: 0 10px">         border-color: #8f68bd;
</span><span class="cx" style="display: block; padding: 0 10px">        color: #8f68bd;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.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 {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.highlight-front-sections.twentyseventeen-customizer.twentyseventeen-front-page .twentyseventeen-panel:nth-of-type(4):after {
</ins><span class="cx" style="display: block; padding: 0 10px">         border-color: #575ebd;
</span><span class="cx" style="display: block; padding: 0 10px">        color: #575ebd;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-/* 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;
-       }
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.twentyseventeen-front-page.twentyseventeen-customizer #primary article.panel-placeholder {
+       border: 0;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-@keyframes flash {
-
-       0%,
-       20%,
-       40%,
-       60%,
-       80%,
-       100% {
-               opacity: 1;
-       }
-
-       10%,
-       30%,
-       50%,
-       70%,
-       90% {
-               opacity: 0;
-       }
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+/* Add some space around the visual edit shortcut buttons. */
+.twentyseventeen-panel .customize-partial-edit-shortcut:before {
+       top: 30px;
+       left: 30px;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-article.panel-placeholder {
-       display: none;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+/* Prevent color schemes from showing 1px dots everywhere. */
+.customize-partial-edit-shortcut {
+       background: transparent !important;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.twentyseventeen-front-page.twentyseventeen-customizer #primary article.panel-placeholder {
-       border: 0;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+/* Ensure that placeholder icons are visible. */
+.twentyseventeen-panel .customize-partial-edit-shortcut-hidden:before {
+       visibility: visible;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.twentyseventeen-customizer .panel-placeholder.twentyseventeen-highlight {
-       display: block;
-       height: 112px;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+/* 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);
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.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;
-}
</del><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px"> /*--------------------------------------------------------------
</span><span class="cx" style="display: block; padding: 0 10px"> ## SVGs Fallbacks
</span></span></pre></div>
<a id="trunksrcwpcontentthemestwentyseventeentemplatepartspagecontentfrontpagepanelsphp"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/wp-content/themes/twentyseventeen/template-parts/page/content-front-page-panels.php</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-content/themes/twentyseventeen/template-parts/page/content-front-page-panels.php     2016-10-27 21:50:56 UTC (rev 38985)
+++ trunk/src/wp-content/themes/twentyseventeen/template-parts/page/content-front-page-panels.php       2016-10-27 22:08:33 UTC (rev 38986)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -12,12 +12,8 @@
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px"> ?>
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-<article id="post-<?php the_ID(); ?>" <?php post_class( 'twentyseventeen-panel ' ); ?> >
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+<article id="panel<?php echo $twentyseventeencounter; ?>" <?php post_class( 'twentyseventeen-panel ' ); ?> >
</ins><span class="cx" style="display: block; padding: 0 10px"> 
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-        <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>
-
</del><span class="cx" style="display: block; padding: 0 10px">         <?php if ( has_post_thumbnail() ) :
</span><span class="cx" style="display: block; padding: 0 10px">                $thumbnail = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'twentyseventeen-featured-image' );
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -77,7 +73,7 @@
</span><span class="cx" style="display: block; padding: 0 10px">                                                endwhile;
</span><span class="cx" style="display: block; padding: 0 10px">                                                wp_reset_postdata();
</span><span class="cx" style="display: block; padding: 0 10px">                                                ?>
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                                        </div><!-- .pique-recent-posts -->
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                                 </div><!-- .recent-posts -->
</ins><span class="cx" style="display: block; padding: 0 10px">                                 <?php endif; ?>
</span><span class="cx" style="display: block; padding: 0 10px">                        <?php endif; ?>
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span></span></pre>
</div>
</div>

</body>
</html>