<!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’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’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',
- ) );
</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>