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

Create link 'Remove setting,' which toggles to 'Restore setting' on click.
It also sets a hidden text field for each setting to be removed.
On saving, these appear in $_REQUEST[ 'customize_snapshot_remove_settings' ].
Filter post content  on 'content_save_pre,' when this is saved.
If $_REQUEST has settings to be removed, filter them out.
Also, add simple styling of this 'Remove setting' link.
It appears red when set to 'remove,' and blue when set to 'restore.'

css/customize-snapshots-admin.css

@@ -0,0 +1,12 @@
+details.cs-removed summary::-webkit-details-marker {
+	display:none;
+}
+details:not(.cs-removed) .cs-toggle-action {
+	color: #a00
+}
+details:not(.cs-removed) .cs-toggle-action:hover {
+	color: #f00
+}
+details .cs-toggle-action {
+	float: right;
+}

js/customize-snapshots-admin.js

@@ -0,0 +1,72 @@
+( function( $ ) {
+
+	$( function() {
+		var $link, linkText, linkActions, dataSlug, initializeLink;
+
+		$link = $( '.cs-toggle-action' );
+		linkText = [ 'Remove setting', 'Restore setting' ];
+		linkActions = [ 'remove', 'restore' ];
+		dataSlug = 'cs-action';
+
+		initializeLink = function() {
+			$link.text( linkText[ 0 ] )
+				.data( dataSlug, linkActions[ 0 ] );
+		};
+
+		initializeLink();
+
+		$link.on( 'click', function( event ) {
+			var $clickedLink, $settingDisplay, clickedLinkAction, settingId;
+
+			event.preventDefault();
+
+			$clickedLink = $( this );
+			$settingDisplay = $( this ).parents( 'details' );
+			clickedLinkAction = $( this ).data( dataSlug );
+			settingId = $( this ).attr( 'id' );
+
+			this.isLinkSetToRemoveSetting = function() {
+				return ( linkActions[ 0 ] === clickedLinkAction );
+			};
+
+			this.hideSettingAndChangeLinkText = function() {
+				$clickedLink.text( linkText[ 1 ] )
+					.data( dataSlug, linkActions[ 1 ] )
+					.after( this.constructHiddenInputWithValue( settingId ) );
+				$settingDisplay.removeAttr( 'open' )
+					.addClass( 'cs-removed' );
+			};
+
+			this.constructHiddenInputWithValue = function( settingId ) {
+				return $( '<input>' ).attr( {
+					'name': 'customize_snapshot_remove_settings[]',
+					'type': 'hidden'
+				})
+				.val( settingId );
+			};
+
+			this.isLinkSetToRestoreSetting = function() {
+				return ( linkActions[ 1 ] === clickedLinkAction );
+			};
+
+			this.showSettingAndChangeLinkText = function() {
+				$clickedLink.text( linkText[ 0 ] )
+					.data( dataSlug, linkActions[ 0 ] );
+				this.removeHiddenInputWithValue( settingId );
+				$settingDisplay.removeClass( 'cs-removed' );
+			};
+
+			this.removeHiddenInputWithValue = function( settingId ) {
+				$( 'input[value="' + settingId + '"]' ).remove();
+			};
+
+			if ( this.isLinkSetToRemoveSetting() ) {
+				this.hideSettingAndChangeLinkText();
+			} else if ( this.isLinkSetToRestoreSetting() ) {
+				this.showSettingAndChangeLinkText();
+			}
+
+		} );
+
+	} );
+}( 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' ) );
@@ -744,6 +745,21 @@ 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.
+	 */
+	public function enqueue_admin_scripts() {
+		global $post;
+		$handle = 'customize-snapshots-admin';
+		if ( 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,8 @@ 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 +363,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 ) . '" class="cs-toggle-action remove"></a>';
 
 			// Show error message when there was a publishing error.
 			if ( isset( $setting_params['publish_error'] ) ) {
@@ -675,4 +679,51 @@ 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 = (
+			( '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 ] )
+			&&
+			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( $post->post_content );
+		foreach ( $setting_ids_to_unset as $setting_id ) {
+			unset( $data->{ $setting_id } );
+		}
+		$content = Customize_Snapshot_Manager::encode_json( $data );
+
+		return $content;
+	}
 }