Merge pull request #358 from xwp/develop

Release 0.8.7

Author: westonruter

.travis.yml

@@ -1,3 +1,4 @@
+dist: precise
 sudo: false
 
 notifications:

composer.json

@@ -1,7 +1,7 @@
 {
 	"name": "xwp/wp-customize-posts",
 	"description": "Manage posts and postmeta via the Customizer.",
-	"version": "0.8.6",
+	"version": "0.8.7",
 	"type": "wordpress-plugin",
 	"keywords": [ "customizer", "customize", "posts", "postmeta", "preview", "featured-image", "page-template" ],
 	"homepage": "https://github.com/xwp/wp-customize-posts/",

customize-posts.php

@@ -3,7 +3,7 @@
  * Plugin Name: Customize Posts
  * Description: Manage posts and postmeta via the Customizer.
  * Plugin URI: https://github.com/xwp/wp-customize-posts/
- * Version: 0.8.6
+ * Version: 0.8.7
  * Author: XWP
  * Author URI: https://make.xwp.co/
  * License: GPLv2+

dev-lib

@@ -60,6 +60,23 @@
 			}
 		},
 
+		/**
+		 * Create and show the edit shortcut for a given partial placement container.
+		 *
+		 * Prevent multiple edit shortcuts from being created on the same placement.
+		 * This should probably be upstreamed to core.
+		 *
+		 * @param {Placement} placement The placement container element.
+		 * @returns {void}
+		 */
+		createEditShortcutForPlacement: function( placement ) {
+			var partial = this;
+			if ( placement.container && placement.container.find( '> .customize-partial-edit-shortcut:first-child' ).length ) {
+				return;
+			}
+			api.selectiveRefresh.Partial.prototype.createEditShortcutForPlacement.call( partial, placement );
+		},
+
 		/**
 		 * Request the new partial and render it into the placements.
 		 *

js/customize-deferred-partial.js

@@ -167,6 +167,26 @@
 			api.preview.send( 'focus-control', settingId + '[' + partial.params.field_id + ']' );
 		},
 
+		/**
+		 * Find all placements for this partial in the document.
+		 *
+		 * Fixes issue where selector can match too many elements when post loops are nested inside other posts.
+		 *
+		 * @return {Array.<Placement>} Placements.
+		 */
+		placements: function() {
+			var partial = this, placements;
+			placements = api.selectiveRefresh.partialConstructor.deferred.prototype.placements.call( this );
+
+			// Remove all placements whose closest .hentry is not for this post.
+			placements = _.filter( placements, function( placement ) {
+				var closestHentry = placement.container.closest( '.hentry' );
+				return ! closestHentry.length || closestHentry.hasClass( 'post-' + String( partial.params.post_id ) );
+			});
+
+			return placements;
+		},
+
 		/**
 		 * @inheritdoc
 		 */

js/customize-post-field-partial.js

@@ -20,6 +20,75 @@
 		}
 	} );
 
+	/**
+	 * Parse the class name for an .hentry element, that is for an element that uses post_class().
+	 *
+	 * @param {string} className Class name.
+	 * @returns {object|null} Object with postType and postId props, or null if no matches.
+	 */
+	api.previewPosts.parsePostClassName = function parsePostClassName( className ) {
+		var matches, postId, postType;
+		matches = className.match( /(\s|^)post-(\d+)(\s|$)/ );
+		if ( matches ) {
+			postId = parseInt( matches[2], 10 );
+		} else {
+			return null;
+		}
+		matches = className.match( /(\s|^)type-(\S+)(\s|$)/ );
+		if ( matches ) {
+			postType = matches[2];
+		} else {
+			return null;
+		}
+		return {
+			postId: postId,
+			postType: postType
+		};
+	};
+
+	// Add partials when the document is modified and new post hentry elements are added.
+	if ( 'undefined' !== typeof MutationObserver ) {
+		api.previewPosts.mutationObserver = new MutationObserver( function( mutations ) {
+			_.each( mutations, function( mutation ) {
+				var hentryElements, mutationTarget;
+				mutationTarget = $( mutation.target );
+				hentryElements = mutationTarget.find( '.hentry' );
+				if ( mutationTarget.is( '.hentry' ) ) {
+					hentryElements = hentryElements.add( mutationTarget );
+				}
+
+				hentryElements.each( function() {
+					var postInfo, settingId;
+					postInfo = api.previewPosts.parsePostClassName( $( this ).prop( 'className' ) );
+					if ( ! postInfo ) {
+						return;
+					}
+					settingId = 'post[' + postInfo.postType + '][' + String( postInfo.postId ) + ']';
+					api.previewPosts.ensurePartialsForPostSetting( settingId );
+
+					// Ensure edit shortcuts are added for all placements inside the mutation target.
+					_.each( api.previewPosts.partialSchema( settingId ), function( schema ) {
+						var partial;
+						partial = api.selectiveRefresh.partial( schema.id );
+						if ( ! partial ) {
+							return;
+						}
+						_.each( partial.placements(), function( placement ) { // eslint-disable-line max-nested-callbacks
+							if ( mutationTarget.is( placement.container ) || $.contains( mutation.target, placement.container[0] ) ) {
+								$( placement.container ).attr( 'title', api.selectiveRefresh.data.l10n.shiftClickToEdit );
+								partial.createEditShortcutForPlacement( placement );
+							}
+						});
+					});
+				});
+			});
+		});
+		api.previewPosts.mutationObserver.observe( document.documentElement, {
+			childList: true,
+			subtree: true
+		});
+	}
+
 	/**
 	 * Ensure that each post setting is added and has corresponding partials.
 	 *

js/customize-preview-posts.js

@@ -6,7 +6,7 @@
     "type": "git",
     "url": "https://github.com/xwp/wp-customize-posts.git"
   },
-  "version": "0.8.6",
+  "version": "0.8.7",
   "license": "GPL-2.0+",
   "private": true,
   "devDependencies": {

package.json

@@ -92,6 +92,7 @@ public function customize_preview_init() {
 		add_filter( 'customize_dynamic_partial_args', array( $this, 'filter_customize_dynamic_partial_args' ), 10, 2 );
 		add_filter( 'customize_dynamic_partial_class', array( $this, 'filter_customize_dynamic_partial_class' ), 10, 3 );
 		add_filter( 'the_posts', array( $this, 'filter_the_posts_to_tally_previewed_posts' ), 1000 );
+		add_action( 'the_post', array( $this, 'handle_the_post_to_tally_previewed_post' ) );
 		add_filter( 'the_posts', array( $this, 'filter_the_posts_to_tally_orderby_keys' ), 10, 2 );
 		add_action( 'wp_footer', array( $this, 'export_preview_data' ), 10 );
 		add_filter( 'get_edit_post_link', array( $this, 'filter_get_edit_post_link' ), 10, 2 );
@@ -250,6 +251,15 @@ public function filter_the_posts_to_tally_previewed_posts( array $posts ) {
 		return $posts;
 	}
 
+	/**
+	 * Tally the set-up post as being previewed in the page.
+	 *
+	 * @param WP_Post $post Post.
+	 */
+	public function handle_the_post_to_tally_previewed_post( $post ) {
+		$this->queried_post_ids[] = $post->ID;
+	}
+
 	/**
 	 * Override post data for previewed settings.
 	 *

php/class-wp-customize-posts-preview.php

@@ -28,6 +28,7 @@ class Customize_Posts_Twenty_Seventeen_Support extends Customize_Posts_Theme_Sup
 	 */
 	public function add_support() {
 		add_filter( 'customize_posts_partial_schema', array( $this, 'filter_partial_schema' ) );
+		add_action( 'wp_head', array( $this, 'print_preview_style' ), 200 );
 	}
 
 	/**
@@ -42,4 +43,34 @@ public function filter_partial_schema( $schema ) {
 		$schema['post_excerpt']['fallback_refresh'] = false; // Not needed because there are no has_excerpt() checks in the theme.
 		return $schema;
 	}
+
+	/**
+	 * Print style for preview.
+	 *
+	 * Due to lack of child selector in `.twentyseventeen-panel .customize-partial-edit-shortcut button`.
+	 * This won't be needed once WP Core #41557 is merged.
+	 *
+	 * @link https://core.trac.wordpress.org/ticket/41557
+	 * @link https://github.com/WordPress/wordpress-develop/blob/4.7.0/src/wp-content/themes/twentyseventeen/style.css#L3043-L3047
+	 */
+	public function print_preview_style() {
+		if ( ! is_customize_preview() ) {
+			return;
+		}
+		?>
+		<style>
+		.widget .customize-partial-edit-shortcut button,
+		.customize-partial-edit-shortcut button {
+			left: -30px !important;
+			top: 2px !important;
+		}
+
+		/* Add some space around the visual edit shortcut buttons. */
+		.twentyseventeen-panel > .customize-partial-edit-shortcut > button {
+			top: 30px !important;
+			left: 30px !important;
+		}
+		</style>
+		<?php
+	}
 }