Issue #17 : Enable deleting settings in snapshot wp-admin/post page.

css/customize-snapshots-admin.css

@@ -0,0 +1,12 @@
+details.snapshot-setting-removed summary {
+	text-decoration: line-through;
+}
+details:not(.snapshot-setting-removed) .snapshot-toggle-setting-removal {
+	color: #a00
+}
+details:not(.snapshot-setting-removed) .snapshot-toggle-setting-removal:hover {
+	color: #f00
+}
+details .snapshot-toggle-setting-removal {
+	float: right;
+}

js/customize-snapshots-admin.js

@@ -0,0 +1,96 @@
+( function( $ ) {
+	'use strict';
+
+	$( function() {
+		var component, $linkToRemoveOrRestore, linkActions, dataSlug, inputName;
+
+		component = {};
+		$linkToRemoveOrRestore = $( '.snapshot-toggle-setting-removal' );
+		linkActions = [ 'remove', 'restore' ];
+		dataSlug = 'cs-action';
+		inputName = 'customize_snapshot_remove_settings[]';
+
+		component.initializeLink = function() {
+			$linkToRemoveOrRestore.data( dataSlug, linkActions[ 0 ] );
+		};
+
+		component.initializeLink();
+
+		component.isLinkSetToRemoveSetting = function( $link ) {
+			return linkActions[ 0 ] === component.getClickedLinkAction( $link );
+		};
+
+		component.isLinkSetToRestoreSetting = function( $link ) {
+			return linkActions[ 1 ] === component.getClickedLinkAction( $link );
+		};
+
+		component.getClickedLinkAction = function( $link ) {
+			return $link.data( dataSlug );
+		};
+
+		component.hideSettingAndChangeLinkText = function( $link ) {
+			var $settingDisplay, settingId;
+			$settingDisplay = component.getSettingDisplay( $link );
+			settingId = component.getSettingId( $link );
+
+			$link.data( dataSlug, linkActions[ 1 ] )
+				.after( component.constructHiddenInputWithValue( settingId ) );
+			component.changeLinkText( $link );
+			$settingDisplay.removeAttr( 'open' )
+				.addClass( 'snapshot-setting-removed' );
+		};
+
+		component.getSettingDisplay = function( $link ) {
+			return $link.parents( 'details' );
+		};
+
+		component.getSettingId = function( $link ) {
+			return $link.attr( 'id' );
+		};
+
+		component.constructHiddenInputWithValue = function( settingId ) {
+			return $( '<input>' ).attr( {
+				'name': inputName,
+				'type': 'hidden'
+			} )
+			.val( settingId );
+		};
+
+		component.changeLinkText = function( $link ) {
+			var oldLinkText, newLinkText;
+			oldLinkText = $link.text();
+			newLinkText = $link.data( 'text-restore' );
+
+			$link.data( 'text-restore', oldLinkText )
+				.text( newLinkText );
+		};
+
+		component.showSettingAndChangeLinkText = function( $link ) {
+			var $settingDisplay, settingId;
+			$settingDisplay = component.getSettingDisplay( $link );
+			settingId = component.getSettingId( $link );
+
+			$link.data( dataSlug, linkActions[ 0 ] );
+			component.changeLinkText( $link );
+			component.removeHiddenInputWithValue( settingId );
+			$settingDisplay.removeClass( 'snapshot-setting-removed' );
+		};
+
+		component.removeHiddenInputWithValue = function( settingId ) {
+			$( 'input[name="' + inputName + '"][value="' + settingId + '"]' ).remove();
+		};
+
+		$linkToRemoveOrRestore.on( 'click', function( event ) {
+			var $clickedLink = $( this );
+
+			event.preventDefault();
+
+			if ( component.isLinkSetToRemoveSetting( $clickedLink ) ) {
+				component.hideSettingAndChangeLinkText( $clickedLink );
+			} else if ( component.isLinkSetToRestoreSetting( $clickedLink ) ) {
+				component.showSettingAndChangeLinkText( $clickedLink );
+			}
+		} );
+
+	} );
+} )( jQuery );

php/class-customize-snapshot-manager.php

@@ -102,6 +102,7 @@ function init() {
 		add_action( 'customize_controls_enqueue_scripts', array( $this, 'enqueue_controls_scripts' ) );
 		add_action( 'customize_preview_init', array( $this, 'customize_preview_init' ) );
 		add_action( 'wp_enqueue_scripts', array( $this, 'enqueue_frontend_scripts' ) );
+		add_action( 'admin_enqueue_scripts', array( $this, 'enqueue_admin_scripts' ) );
 
 		add_action( 'customize_controls_init', array( $this, 'add_snapshot_uuid_to_return_url' ) );
 		add_action( 'customize_controls_print_footer_scripts', array( $this, 'render_templates' ) );
@@ -745,6 +746,23 @@ public function enqueue_frontend_scripts() {
 		);
 	}
 
+	/**
+	 * Enqueue admin scripts.
+	 *
+	 * These files control the behavior and styling of links to remove settings.
+	 * Published snapshots can't be edited, so these files are not needed on those pages.
+	 *
+	 * @param String $hook Current page in admin.
+	 */
+	public function enqueue_admin_scripts( $hook ) {
+		global $post;
+		$handle = 'customize-snapshots-admin';
+		if ( ( 'post.php' === $hook ) && isset( $post->post_type ) && ( Post_Type::SLUG === $post->post_type ) && ( 'publish' !== $post->post_status ) ) {
+			wp_enqueue_script( $handle );
+			wp_enqueue_style( $handle );
+		}
+	}
+
 	/**
 	 * Include the snapshot nonce in the Customizer nonces.
 	 *

php/class-plugin.php

@@ -82,6 +82,11 @@ public function register_scripts( \WP_Scripts $wp_scripts ) {
 		$src = $this->dir_url . 'js/customize-snapshots-frontend' . $min . '.js';
 		$deps = array( 'jquery', 'underscore' );
 		$wp_scripts->add( $handle, $src, $deps );
+
+		$handle = 'customize-snapshots-admin';
+		$src = $this->dir_url . 'js/customize-snapshots-admin' . $min . '.js';
+		$deps = array( 'jquery' );
+		$wp_scripts->add( $handle, $src, $deps );
 	}
 
 	/**
@@ -103,5 +108,9 @@ public function register_styles( \WP_Styles $wp_styles ) {
 		$src = $this->dir_url . 'css/customize-snapshots-preview' . $min . '.css';
 		$deps = array( 'customize-preview' );
 		$wp_styles->add( $handle, $src, $deps );
+
+		$handle = 'customize-snapshots-admin';
+		$src = $this->dir_url . 'css/customize-snapshots-admin' . $min . '.css';
+		$wp_styles->add( $handle, $src );
 	}
 }

php/class-post-type.php

@@ -114,6 +114,7 @@ public function register() {
 		add_filter( 'display_post_states', array( $this, 'display_post_states' ), 10, 2 );
 		add_action( 'admin_notices', array( $this, 'show_publish_error_admin_notice' ) );
 		add_action( 'post_submitbox_minor_actions', array( $this, 'hide_disabled_publishing_actions' ) );
+		add_filter( 'content_save_pre', array( $this, 'filter_out_settings_if_removed_in_metabox' ), 10 );
 		add_action( 'admin_print_scripts-revision.php', array( $this, 'disable_revision_ui_for_published_posts' ) );
 	}
 
@@ -351,6 +352,7 @@ public function render_data_metabox( $post ) {
 		echo '<hr>';
 
 		ksort( $snapshot_content );
+		wp_nonce_field( static::SLUG . '_settings', static::SLUG );
 		echo '<ul id="snapshot-settings">';
 		foreach ( $snapshot_content as $setting_id => $setting_params ) {
 			if ( ! isset( $setting_params['value'] ) && ! isset( $setting_params['publish_error'] ) ) {
@@ -360,6 +362,7 @@ public function render_data_metabox( $post ) {
 			echo '<li>';
 			echo '<details open>';
 			echo '<summary><code>' . esc_html( $setting_id ) . '</code> ';
+			echo '<a href="#" id="' . esc_attr( $setting_id ) . '" data-text-restore="' . esc_attr( 'Restore setting', 'customize-snapshots' ) . '" class="snapshot-toggle-setting-removal remove">' . esc_html( 'Remove setting', 'customize-snapshots' ) . '</a>';
 
 			// Show error message when there was a publishing error.
 			if ( isset( $setting_params['publish_error'] ) ) {
@@ -675,4 +678,55 @@ public function hide_disabled_publishing_actions( $post ) {
 		</style>
 		<?php
 	}
+
+	/**
+	 * Filter settings out of post content, if they were removed in the meta box.
+	 *
+	 * In each snapshot's edit page, there are JavaScript-controlled links to remove each setting.
+	 * On clicking a setting, the JS sets a hidden input field with that setting's ID.
+	 * And these settings appear in $_REQUEST as the array 'customize_snapshot_remove_settings.'
+	 * So look for these removed settings in that array, on saving.
+	 * And possibly filter out those settings from the post content.
+	 *
+	 * @param String $content Post content to filter.
+	 * @return String $content Post content, possibly filtered.
+	 */
+	public function filter_out_settings_if_removed_in_metabox( $content ) {
+		global $post;
+		$key_for_settings = static::SLUG . '_remove_settings';
+		$post_type_object = get_post_type_object( static::SLUG );
+
+		$should_filter_content = (
+			isset( $post->post_status )
+			&&
+			( 'publish' !== $post->post_status )
+			&&
+			current_user_can( $post_type_object->cap->edit_post, $post->ID )
+			&&
+			( static::SLUG === $post->post_type )
+			&&
+			! empty( $_REQUEST[ $key_for_settings ] )
+			&&
+			is_array( $_REQUEST[ $key_for_settings ] )
+			&&
+			isset( $_REQUEST[ static::SLUG ] )
+			&&
+			wp_verify_nonce( $_REQUEST[ static::SLUG ], static::SLUG . '_settings' )
+			&&
+			! ( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE )
+		);
+
+		if ( ! $should_filter_content ) {
+			return $content;
+		}
+
+		$setting_ids_to_unset = $_REQUEST[ $key_for_settings ];
+		$data = json_decode( wp_unslash( $content ), true );
+		foreach ( $setting_ids_to_unset as $setting_id ) {
+			unset( $data[ $setting_id ] );
+		}
+		$content = Customize_Snapshot_Manager::encode_json( $data );
+
+		return $content;
+	}
 }