Issue #841: Use wp_json_encode in 'on' attribute.

At Weston's suggestion.
This is easier to understand.

includes/embeds/class-amp-playlist-embed-handler.php

@@ -251,10 +251,10 @@ public function tracks( $type, $container_id ) {
 			foreach ( $this->data['tracks'] as $index => $track ) {
 				$title = $this->get_title( $track );
 				if ( 'audio' === $type ) {
-					$on         = 'tap:AMP.setState({' . $container_id . ': {selectedSlide: ' . $i . '}})';
+					$on         = 'tap:AMP.setState(' . wp_json_encode( array( $container_id => array( 'selectedSlide' => $i ) ) ) . ')';
 					$item_class = esc_attr( $i ) . ' == ' . esc_attr( $container_id ) . '.selectedSlide ? "wp-playlist-item wp-playlist-playing" : "wp-playlist-item"';
 				} elseif ( 'video' === $type ) {
-					$on         = 'tap:AMP.setState({' . $container_id . ': {currentVideo: ' . $index . '}})';
+					$on         = 'tap:AMP.setState(' . wp_json_encode( array( $container_id => array( 'currentVideo' => $index ) ) ) . ')';
 					$item_class = esc_attr( $index ) . ' == ' . esc_attr( $container_id ) . '.currentVideo ? "wp-playlist-item wp-playlist-playing" : "wp-playlist-item"';
 				}
 

tests/test-class-amp-playlist-embed-handler.php

@@ -135,7 +135,7 @@ public function test_video_playlist() {
 		$this->assertContains( $this->file_1, $playlist );
 		$this->assertContains( $this->file_2, $playlist );
 		$this->assertContains( '[src]="playlist0[playlist0.currentVideo].videoUrl"', $playlist );
-		$this->assertContains( 'on="tap:AMP.setState({playlist0: {currentVideo: 0}})"', $playlist );
+		$this->assertContains( 'on="tap:AMP.setState({"playlist0":{"currentVideo":0}})"', $playlist );
 	}
 
 	/**
@@ -192,7 +192,7 @@ public function test_audio_playlist() {
 		$this->assertContains( '<amp-audio', $playlist );
 		$this->assertContains( $this->file_1, $playlist );
 		$this->assertContains( $this->file_2, $playlist );
-		$this->assertContains( 'tap:AMP.setState({ampPlaylistCarousel0: {selectedSlide: 0}})"', $playlist );
+		$this->assertContains( 'tap:AMP.setState({&quot;ampPlaylistCarousel0&quot;:{&quot;selectedSlide&quot;:0}})"', $playlist );
 	}
 
 	/**
@@ -205,7 +205,7 @@ public function test_tracks() {
 		$attr                 = $this->get_attributes( $type );
 		$this->instance->data = $this->instance->get_data( $attr );
 		$container_id         = 'fooContainerId0';
-		$expected_on          = 'tap:AMP.setState({' . $container_id . ': {currentVideo: 0}})';
+		$expected_on          = 'tap:AMP.setState({&quot;' . $container_id . '&quot;:{&quot;currentVideo&quot;:0}})';
 
 		ob_start();
 		$this->instance->tracks( $type, $container_id );
@@ -217,7 +217,7 @@ public function test_tracks() {
 		$type                 = 'audio';
 		$attr                 = $this->get_attributes( $type );
 		$this->instance->data = $this->instance->get_data( $attr );
-		$expected_on          = 'tap:AMP.setState({' . $container_id . ': {selectedSlide: 0}})';
+		$expected_on          = 'tap:AMP.setState({&quot;' . $container_id . '&quot;:{&quot;selectedSlide&quot;:0}})';
 
 		ob_start();
 		$this->instance->tracks( $type, $container_id );