From da36b38eeef698af8058e8f95e5a5f0760866d36 Mon Sep 17 00:00:00 2001
From: Bart <bartlomiej.kalisz@gmail.com>
Date: Tue, 21 Apr 2020 13:35:50 +0200
Subject: [PATCH 01/25] Clean up duplicated CSS variables

---
 extensions/blocks/podcast-player/style.scss | 28 ++++++++-------------
 1 file changed, 11 insertions(+), 17 deletions(-)

diff --git a/extensions/blocks/podcast-player/style.scss b/extensions/blocks/podcast-player/style.scss
index 7010c06e6e05..b116403dc13b 100644
--- a/extensions/blocks/podcast-player/style.scss
+++ b/extensions/blocks/podcast-player/style.scss
@@ -15,13 +15,7 @@ $track-status-icon-size: 22px;
 $jetpack-podcast-player-primary: $black;
 $jetpack-podcast-player-secondary: $dark-gray-300;
 $jetpack-podcast-player-background: $white;
-$text-color: $dark-gray-300; // Lightest gray that can be used for AA text contrast.
-$text-color-hover: $black;
-$text-color-active: $text-color-hover;
-$text-color-error: $alert-red;
-$block-bg-color: $white;
 $block-border-color: $dark-gray-100;
-$current-track-title-color: $black;
 $player-background: transparent;
 
 .jetpack-podcast-player--visually-hidden {
@@ -38,7 +32,7 @@ $player-background: transparent;
  */
 .wp-block-jetpack-podcast-player {
 	border: 1px solid $block-border-color;
-	background-color: $block-bg-color;
+	background-color: $jetpack-podcast-player-background;
 	overflow: hidden;
 
 	/**
@@ -133,13 +127,13 @@ $player-background: transparent;
 
 		// Apply default color if custom primary has not been set
 		&:not(.has-primary) {
-			color: $current-track-title-color;
+			color: $jetpack-podcast-player-primary;
 		}
 	}
 
 	.jetpack-podcast-player__podcast-title {
 		font-size: $podcast-title-font-size;
-		color: $text-color;
+		color: $jetpack-podcast-player-secondary;
 		margin: 0;
 	}
 
@@ -147,12 +141,12 @@ $player-background: transparent;
 		&,
 		&:active,
 		&:visited {
-			color: $text-color;
+			color: $jetpack-podcast-player-secondary;
 		}
 
 		&:hover,
 		&:focus {
-			color: $text-color-hover;
+			color: $jetpack-podcast-player-primary;
 		}
 	}
 
@@ -234,19 +228,19 @@ $player-background: transparent;
 
 		// Apply default colors only if custom ones are not defined.
 		&:not( .is-active ):not( .has-secondary ) {
-			color: $text-color;
+			color: $jetpack-podcast-player-secondary;
 
 			&:hover,
 			&:focus {
-				color: $text-color-hover;
+				color: $jetpack-podcast-player-primary;
 			}
 		}
 		&.is-active:not( .has-primary ) {
-			color: $text-color-active;
+			color: $jetpack-podcast-player-primary;
 
 			&:hover,
 			&:focus {
-				color: $text-color-active;
+				color: $jetpack-podcast-player-primary;
 			}
 		}
 	}
@@ -307,7 +301,7 @@ $player-background: transparent;
 		font-weight: normal;
 
 		& > span {
-			color: $text-color;
+			color: $jetpack-podcast-player-secondary;
 		}
 
 		& > span > a {
@@ -324,7 +318,7 @@ $player-background: transparent;
 	}
 
 	.jetpack-podcast-player__track-status-icon--error {
-		fill: $text-color-error;
+		fill: $alert-red;
 	}
 
 	.has-primary .jetpack-podcast-player__track-status-icon--error {

From ea5fdf856d11ecbf5ce5768805d526de6e178630 Mon Sep 17 00:00:00 2001
From: Bart <bartlomiej.kalisz@gmail.com>
Date: Tue, 21 Apr 2020 13:37:57 +0200
Subject: [PATCH 02/25] Don't use variable for ME background color

---
 extensions/blocks/podcast-player/style.scss | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/extensions/blocks/podcast-player/style.scss b/extensions/blocks/podcast-player/style.scss
index b116403dc13b..3ffc8e93dda1 100644
--- a/extensions/blocks/podcast-player/style.scss
+++ b/extensions/blocks/podcast-player/style.scss
@@ -12,11 +12,10 @@ $track-title-b-margin: 10px;
 $podcast-title-font-size: 16px;
 $description-font-size: 16px;
 $track-status-icon-size: 22px;
+$block-border-color: $dark-gray-100;
 $jetpack-podcast-player-primary: $black;
 $jetpack-podcast-player-secondary: $dark-gray-300;
 $jetpack-podcast-player-background: $white;
-$block-border-color: $dark-gray-100;
-$player-background: transparent;
 
 .jetpack-podcast-player--visually-hidden {
 	position: absolute !important;
@@ -362,7 +361,7 @@ $player-background: transparent;
 	.mejs-embed body,
 	.mejs-container .mejs-controls,
 	.mejs-mediaelement {
-		background-color: $player-background;
+		background-color: transparent;
 	}
 
 	.mejs-controls {

From 308c13bd1591d36085a377a9896a208bcb69ee24 Mon Sep 17 00:00:00 2001
From: Bart <bartlomiej.kalisz@gmail.com>
Date: Tue, 21 Apr 2020 13:46:31 +0200
Subject: [PATCH 03/25] Use editor variables for standard font sizes

---
 extensions/blocks/podcast-player/style.scss | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/extensions/blocks/podcast-player/style.scss b/extensions/blocks/podcast-player/style.scss
index 3ffc8e93dda1..06ee05b39fc0 100644
--- a/extensions/blocks/podcast-player/style.scss
+++ b/extensions/blocks/podcast-player/style.scss
@@ -9,8 +9,6 @@ $player-grid-spacing: 24px;
 $cover-image-size: 80px;
 $track-title-font-size: 24px;
 $track-title-b-margin: 10px;
-$podcast-title-font-size: 16px;
-$description-font-size: 16px;
 $track-status-icon-size: 22px;
 $block-border-color: $dark-gray-100;
 $jetpack-podcast-player-primary: $black;
@@ -131,7 +129,7 @@ $jetpack-podcast-player-background: $white;
 	}
 
 	.jetpack-podcast-player__podcast-title {
-		font-size: $podcast-title-font-size;
+		font-size: $editor-font-size;
 		color: $jetpack-podcast-player-secondary;
 		margin: 0;
 	}
@@ -181,7 +179,7 @@ $jetpack-podcast-player-background: $white;
 		order: 99; // high number to make it always appear after the audio player
 		padding: 0 $player-grid-spacing;
 		margin-bottom: $player-grid-spacing;
-		font-size: $description-font-size;
+		font-size: $editor-font-size;
 		line-height: 1.6;
 		color: $dark-gray-500;
 		//crop the description if too long

From fe61f2abfb90ed4d248b0afa7f5c881211237b56 Mon Sep 17 00:00:00 2001
From: Bart <bartlomiej.kalisz@gmail.com>
Date: Tue, 21 Apr 2020 13:56:17 +0200
Subject: [PATCH 04/25] Rename a few variables for clarity

---
 extensions/blocks/podcast-player/style.scss | 36 ++++++++++-----------
 1 file changed, 18 insertions(+), 18 deletions(-)

diff --git a/extensions/blocks/podcast-player/style.scss b/extensions/blocks/podcast-player/style.scss
index 06ee05b39fc0..c2dbcfbf731b 100644
--- a/extensions/blocks/podcast-player/style.scss
+++ b/extensions/blocks/podcast-player/style.scss
@@ -3,14 +3,14 @@
  */
 @import '../../shared/styles/gutenberg-base-styles.scss';
 
+$block-grid-gutter: 24px;
+$block-border-color: $dark-gray-100;
+$cover-image-size: 80px;
+$current-track-title-font-size: 24px;
+$current-track-title-bottom-margin: 10px;
 $track-v-padding: 15px;
 $track-h-padding: 10px;
-$player-grid-spacing: 24px;
-$cover-image-size: 80px;
-$track-title-font-size: 24px;
-$track-title-b-margin: 10px;
 $track-status-icon-size: 22px;
-$block-border-color: $dark-gray-100;
 $jetpack-podcast-player-primary: $black;
 $jetpack-podcast-player-secondary: $dark-gray-300;
 $jetpack-podcast-player-background: $white;
@@ -86,12 +86,12 @@ $jetpack-podcast-player-background: $white;
 
 	.jetpack-podcast-player__current-track-info {
 		display: flex;
-		padding: $player-grid-spacing;
+		padding: $block-grid-gutter;
 	}
 
 	.jetpack-podcast-player__cover {
 		width: $cover-image-size;
-		margin-right: $player-grid-spacing;
+		margin-right: $block-grid-gutter;
 		flex-shrink: 0;
 	}
 
@@ -119,8 +119,8 @@ $jetpack-podcast-player-background: $white;
 	}
 
 	.jetpack-podcast-player__current-track-title {
-		font-size: $track-title-font-size;
-		margin: 0 0 $track-title-b-margin;
+		font-size: $current-track-title-font-size;
+		margin: 0 0 $current-track-title-bottom-margin;
 
 		// Apply default color if custom primary has not been set
 		&:not(.has-primary) {
@@ -166,19 +166,19 @@ $jetpack-podcast-player-background: $white;
 
 	.jetpack-podcast-player__audio-player {
 		height: 40px; // mirroring .mejs-container
-		margin-bottom: $player-grid-spacing;
+		margin-bottom: $block-grid-gutter;
 	}
 
 	.jetpack-podcast-player--audio-player-loading {
 		height: 10px; // mirroring .mejs-time-total
 		background: $jetpack-podcast-player-secondary;
-		margin: 15px $player-grid-spacing; // simulating spacing of .mejs-container
+		margin: 15px $block-grid-gutter; // simulating spacing of .mejs-container
 	}
 
 	.jetpack-podcast-player__track-description {
 		order: 99; // high number to make it always appear after the audio player
-		padding: 0 $player-grid-spacing;
-		margin-bottom: $player-grid-spacing;
+		padding: 0 $block-grid-gutter;
+		margin-bottom: $block-grid-gutter;
 		font-size: $editor-font-size;
 		line-height: 1.6;
 		color: $dark-gray-500;
@@ -247,7 +247,7 @@ $jetpack-podcast-player-background: $white;
 		flex-flow: row nowrap;
 		justify-content: space-between;
 		// Adjustments on left padding to account for SVG sound icon spacing
-		padding: $track-h-padding $player-grid-spacing $track-h-padding $player-grid-spacing - 2px;
+		padding: $track-h-padding $block-grid-gutter $track-h-padding $block-grid-gutter - 2px;
 		transition: none;
 		color: inherit;
 
@@ -291,7 +291,7 @@ $jetpack-podcast-player-background: $white;
 	 */
 	.jetpack-podcast-player__track-error {
 		display: block;
-		margin-left: ($player-grid-spacing - 2px) + $track-status-icon-size + $track-v-padding; // has to be aligned with the track title
+		margin-left: ($block-grid-gutter - 2px) + $track-status-icon-size + $track-v-padding; // has to be aligned with the track title
 		margin-bottom: $track-h-padding;
 		color: $alert-red;
 		font-size: 0.8em;
@@ -326,7 +326,7 @@ $jetpack-podcast-player-background: $white;
 	 * Global error element, replaces the whole block with the error message.
 	 */
 	.jetpack-podcast-player__error {
-		padding: $player-grid-spacing;
+		padding: $block-grid-gutter;
 		margin: 0;
 		color: $alert-red;
 		font-size: 0.8em;
@@ -339,7 +339,7 @@ $jetpack-podcast-player-background: $white;
 	&.is-default {
 		.jetpack-podcast-player__track-title {
 			// Change padding to account for missing space for status-icon.
-			padding-left: $player-grid-spacing - $track-v-padding;
+			padding-left: $block-grid-gutter - $track-v-padding;
 		}
 
 		.jetpack-podcast-player__audio-player {
@@ -369,7 +369,7 @@ $jetpack-podcast-player-background: $white;
 		* Magic numbers are due to needing to line-up the player spacing with buttons
 		* and fixed widths inside of the mediaplayer.
 		*/
-		padding: 0 ( $player-grid-spacing - 6px ) 0 ( $player-grid-spacing - 9px );
+		padding: 0 ( $block-grid-gutter - 6px ) 0 ( $block-grid-gutter - 9px );
 	}
 
 	.mejs-time,

From aa9134bdcbf58f8558f3770b0e8815a59e35b094 Mon Sep 17 00:00:00 2001
From: Bart <bartlomiej.kalisz@gmail.com>
Date: Tue, 21 Apr 2020 13:58:11 +0200
Subject: [PATCH 05/25] Move state classes comment under proper class

---
 extensions/blocks/podcast-player/style.scss | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/extensions/blocks/podcast-player/style.scss b/extensions/blocks/podcast-player/style.scss
index c2dbcfbf731b..baf98c3f48e0 100644
--- a/extensions/blocks/podcast-player/style.scss
+++ b/extensions/blocks/podcast-player/style.scss
@@ -32,13 +32,6 @@ $jetpack-podcast-player-background: $white;
 	background-color: $jetpack-podcast-player-background;
 	overflow: hidden;
 
-	/**
-	 * Player's state classes added to this element:
-	 * &.is-playing {} // When audio starts playing.
-	 * &.is-paused {}  // When audio is paused.
-	 * &.is-error {}   // When playback error occured.
-	 */
-
 	audio {
 		display: none;
 	}
@@ -51,6 +44,13 @@ $jetpack-podcast-player-background: $white;
 		padding-top: 0;
 		padding-bottom: 0;
 
+		/**
+		 * Player's state classes added to this element:
+		 * &.is-playing {} // When audio starts playing.
+	 	 * &.is-paused {}  // When audio is paused.
+		 * &.is-error {}   // When playback error occured.
+		 */
+
 		/**
 		* Set default values for our CSS variables.
 		*/

From 9ba33ea0d07e32d9ee61051574205363ef6c3542 Mon Sep 17 00:00:00 2001
From: Bart <bartlomiej.kalisz@gmail.com>
Date: Tue, 21 Apr 2020 14:03:32 +0200
Subject: [PATCH 06/25] Move block background-color where it belongs

---
 extensions/blocks/podcast-player/style.scss | 20 ++++++++++++--------
 1 file changed, 12 insertions(+), 8 deletions(-)

diff --git a/extensions/blocks/podcast-player/style.scss b/extensions/blocks/podcast-player/style.scss
index baf98c3f48e0..0c703f23eadc 100644
--- a/extensions/blocks/podcast-player/style.scss
+++ b/extensions/blocks/podcast-player/style.scss
@@ -29,7 +29,6 @@ $jetpack-podcast-player-background: $white;
  */
 .wp-block-jetpack-podcast-player {
 	border: 1px solid $block-border-color;
-	background-color: $jetpack-podcast-player-background;
 	overflow: hidden;
 
 	audio {
@@ -41,8 +40,20 @@ $jetpack-podcast-player-background: $white;
 	 * For instance, Twenty-Twenty sets `padding: 8rem 0`.
 	 */
 	.jetpack-podcast-player {
+		/**
+		 * Set default values for our CSS variables.
+		 */
+		--jetpack-podcast-player-primary: #{$jetpack-podcast-player-primary};
+		--jetpack-podcast-player-secondary: #{$jetpack-podcast-player-secondary};
+		--jetpack-podcast-player-background: #{$jetpack-podcast-player-background};
+
 		padding-top: 0;
 		padding-bottom: 0;
+		background-color: var( --jetpack-podcast-player-background );
+
+		&:not(.has-background) {
+			background-color: $jetpack-podcast-player-background;
+		}
 
 		/**
 		 * Player's state classes added to this element:
@@ -51,13 +62,6 @@ $jetpack-podcast-player-background: $white;
 		 * &.is-error {}   // When playback error occured.
 		 */
 
-		/**
-		* Set default values for our CSS variables.
-		*/
-		--jetpack-podcast-player-primary: #{$jetpack-podcast-player-primary};
-		--jetpack-podcast-player-secondary: #{$jetpack-podcast-player-secondary};
-		--jetpack-podcast-player-background: #{$jetpack-podcast-player-background};
-
 		/**
 		 * Override to address themes using text-decoration or box-shadow underlines on links.
 		 */

From 8bff1149808f0a99f71a695b482a068dbdba73ad Mon Sep 17 00:00:00 2001
From: Bart <bartlomiej.kalisz@gmail.com>
Date: Tue, 21 Apr 2020 14:05:14 +0200
Subject: [PATCH 07/25] Move comment over related code

---
 extensions/blocks/podcast-player/style.scss | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/extensions/blocks/podcast-player/style.scss b/extensions/blocks/podcast-player/style.scss
index 0c703f23eadc..fa6dc06c625e 100644
--- a/extensions/blocks/podcast-player/style.scss
+++ b/extensions/blocks/podcast-player/style.scss
@@ -35,10 +35,6 @@ $jetpack-podcast-player-background: $white;
 		display: none;
 	}
 
-	/**
-	 * Reset vertical padding for <section /> elements.
-	 * For instance, Twenty-Twenty sets `padding: 8rem 0`.
-	 */
 	.jetpack-podcast-player {
 		/**
 		 * Set default values for our CSS variables.
@@ -47,6 +43,10 @@ $jetpack-podcast-player-background: $white;
 		--jetpack-podcast-player-secondary: #{$jetpack-podcast-player-secondary};
 		--jetpack-podcast-player-background: #{$jetpack-podcast-player-background};
 
+		/**
+		 * Reset vertical padding for <section /> elements.
+		 * For instance, Twenty-Twenty sets `padding: 8rem 0`.
+		 */
 		padding-top: 0;
 		padding-bottom: 0;
 		background-color: var( --jetpack-podcast-player-background );

From 1b0b0474800c57d3672460ef7b53fa74f60f69a3 Mon Sep 17 00:00:00 2001
From: Bart <bartlomiej.kalisz@gmail.com>
Date: Tue, 21 Apr 2020 19:26:23 +0200
Subject: [PATCH 08/25] Improve colors styling - Create link class to be sure
 all links look the same, - Make all links look the same, - Use correct
 default color for description instead of "$dark-gray-500", - Clean up and
 make colors styles more consistent and easy to follow

---
 .../podcast-player/components/header.js       |  35 ++---
 .../podcast-player/components/track-error.js  |  11 +-
 .../blocks/podcast-player/components/track.js |   6 +-
 extensions/blocks/podcast-player/style.scss   | 127 +++++++-----------
 4 files changed, 80 insertions(+), 99 deletions(-)

diff --git a/extensions/blocks/podcast-player/components/header.js b/extensions/blocks/podcast-player/components/header.js
index ce55ca564dc5..7f80e6389ef5 100644
--- a/extensions/blocks/podcast-player/components/header.js
+++ b/extensions/blocks/podcast-player/components/header.js
@@ -50,7 +50,11 @@ const Header = memo(
 			{ !! ( showEpisodeDescription && track && track.description ) && (
 				<div
 					id={ `${ playerId }__track-description` }
-					className="jetpack-podcast-player__track-description"
+					className={ classnames(
+						'jetpack-podcast-player__track-description',
+						colors.secondary.classes
+					) }
+					style={ { color: colors.secondary.custom } }
 				>
 					{ track.description }
 				</div>
@@ -103,21 +107,22 @@ const PodcastTitle = memo(
 			colors.secondary.classes
 		);
 
-		if ( link ) {
-			return (
-				<a
-					className={ className }
-					style={ { color: colors.secondary.custom } }
-					href={ link }
-					target="_blank"
-					rel="noopener noreferrer nofollow"
-				>
+		return (
+			<span className={ className } style={ { color: colors.secondary.custom } }>
+				{ link ? (
+					<a
+						className="jetpack-podcast-player__link"
+						href={ link }
+						target="_blank"
+						rel="noopener noreferrer nofollow"
+					>
+						{ title }
+					</a>
+				) : (
 					{ title }
-				</a>
-			);
-		}
-
-		return <span className={ className }>{ title }</span>;
+				) }
+			</span>
+		);
 	}
 );
 
diff --git a/extensions/blocks/podcast-player/components/track-error.js b/extensions/blocks/podcast-player/components/track-error.js
index 1d2fc1f164b8..dca60022450b 100644
--- a/extensions/blocks/podcast-player/components/track-error.js
+++ b/extensions/blocks/podcast-player/components/track-error.js
@@ -8,12 +8,17 @@
 import { memo } from '@wordpress/element';
 import { __, sprintf } from '@wordpress/i18n';
 
-const TrackError = memo( ( { link, title } ) => (
+const TrackError = memo( ( { link, title, colors } ) => (
 	<div className="jetpack-podcast-player__track-error">
 		{ __( 'Episode unavailable. ', 'jetpack' ) }
 		{ link && (
-			<span>
-				<a href={ link } rel="noopener noreferrer nofollow" target="_blank">
+			<span className={ colors.secondary.classes } style={ { color: colors.secondary.custom } }>
+				<a
+					className="jetpack-podcast-player__link"
+					href={ link }
+					rel="noopener noreferrer nofollow"
+					target="_blank"
+				>
 					<span className="jetpack-podcast-player--visually-hidden">
 						{ /* Intentional trailing space outside of the translated string. */ }
 						{ `${ sprintf(
diff --git a/extensions/blocks/podcast-player/components/track.js b/extensions/blocks/podcast-player/components/track.js
index f335d4d8447a..b34c83343cc6 100644
--- a/extensions/blocks/podcast-player/components/track.js
+++ b/extensions/blocks/podcast-player/components/track.js
@@ -59,7 +59,7 @@ const Track = memo(
 				style={ Object.keys( inlineStyle ).length ? inlineStyle : null }
 			>
 				<a
-					className="jetpack-podcast-player__track-link"
+					className="jetpack-podcast-player__link jetpack-podcast-player__track-link"
 					href={ track.link }
 					role="button"
 					aria-current={ ariaCurrent }
@@ -100,7 +100,9 @@ const Track = memo(
 						</time>
 					) }
 				</a>
-				{ isActive && isError && <TrackError link={ track.link } title={ track.title } /> }
+				{ isActive && isError && (
+					<TrackError link={ track.link } title={ track.title } colors={ colors } />
+				) }
 			</li>
 		);
 	}
diff --git a/extensions/blocks/podcast-player/style.scss b/extensions/blocks/podcast-player/style.scss
index fa6dc06c625e..153c3728a5de 100644
--- a/extensions/blocks/podcast-player/style.scss
+++ b/extensions/blocks/podcast-player/style.scss
@@ -51,7 +51,7 @@ $jetpack-podcast-player-background: $white;
 		padding-bottom: 0;
 		background-color: var( --jetpack-podcast-player-background );
 
-		&:not(.has-background) {
+		&:not( .has-background ) {
 			background-color: $jetpack-podcast-player-background;
 		}
 
@@ -79,6 +79,20 @@ $jetpack-podcast-player-background: $white;
 		}
 	}
 
+	a.jetpack-podcast-player__link {
+		&,
+		&:active,
+		&:visited {
+			color: inherit;
+		}
+
+		&:hover,
+		&:focus {
+			color: inherit;
+			color: var( --jetpack-podcast-player-primary );
+		}
+	}
+
 	/**
 	 * Header elements styles
 	 */
@@ -125,47 +139,22 @@ $jetpack-podcast-player-background: $white;
 	.jetpack-podcast-player__current-track-title {
 		font-size: $current-track-title-font-size;
 		margin: 0 0 $current-track-title-bottom-margin;
+		color: var( --jetpack-podcast-player-primary );
 
 		// Apply default color if custom primary has not been set
-		&:not(.has-primary) {
+		&:not( .has-primary ) {
 			color: $jetpack-podcast-player-primary;
 		}
 	}
 
 	.jetpack-podcast-player__podcast-title {
 		font-size: $editor-font-size;
-		color: $jetpack-podcast-player-secondary;
 		margin: 0;
-	}
+		color: var( --jetpack-podcast-player-secondary );
 
-	a.jetpack-podcast-player__podcast-title {
-		&,
-		&:active,
-		&:visited {
+		&:not( .has-secondary ) {
 			color: $jetpack-podcast-player-secondary;
 		}
-
-		&:hover,
-		&:focus {
-			color: $jetpack-podcast-player-primary;
-		}
-	}
-
-	// Apply `secondary` color to the podcast title.
-	.has-secondary {
-		.jetpack-podcast-player__podcast-title {
-			color: currentColor;
-		}
-
-		a.jetpack-podcast-player__podcast-title {
-			&,
-			&:hover,
-			&:focus,
-			&:active,
-			&:visited {
-				color: currentColor;
-			}
-		}
 	}
 
 	.jetpack-podcast-player__audio-player {
@@ -185,19 +174,16 @@ $jetpack-podcast-player-background: $white;
 		margin-bottom: $block-grid-gutter;
 		font-size: $editor-font-size;
 		line-height: 1.6;
-		color: $dark-gray-500;
 		//crop the description if too long
 		display: -webkit-box;
 		-webkit-line-clamp: 4;
 		-webkit-box-orient: vertical;
 		overflow: hidden;
 		max-height: 105px; //IE11 fallback
-	}
+		color: var( --jetpack-podcast-player-secondary );
 
-	// Apply `secondary` color to the track description.
-	.has-secondary {
-		.jetpack-podcast-player__track-description {
-			color: currentColor;
+		&:not( .has-secondary ) {
+			color: $jetpack-podcast-player-secondary;
 		}
 	}
 
@@ -217,6 +203,11 @@ $jetpack-podcast-player-background: $white;
 		margin: 0;
 		font-size: $editor-font-size;
 		line-height: $editor-line-height;
+		color: var( --jetpack-podcast-player-secondary );
+
+		&:not( .is-active ):not( .has-secondary ) {
+			color: $jetpack-podcast-player-secondary;
+		}
 
 		/**
 		 * When track "is-active", it means that it's been clicked by a user to
@@ -225,22 +216,9 @@ $jetpack-podcast-player-background: $white;
 		 */
 		&.is-active {
 			font-weight: bold;
-		}
-
-		// Apply default colors only if custom ones are not defined.
-		&:not( .is-active ):not( .has-secondary ) {
-			color: $jetpack-podcast-player-secondary;
+			color: var( --jetpack-podcast-player-primary );
 
-			&:hover,
-			&:focus {
-				color: $jetpack-podcast-player-primary;
-			}
-		}
-		&.is-active:not( .has-primary ) {
-			color: $jetpack-podcast-player-primary;
-
-			&:hover,
-			&:focus {
+			&:not( .has-primary ) {
 				color: $jetpack-podcast-player-primary;
 			}
 		}
@@ -253,13 +231,6 @@ $jetpack-podcast-player-background: $white;
 		// Adjustments on left padding to account for SVG sound icon spacing
 		padding: $track-h-padding $block-grid-gutter $track-h-padding $block-grid-gutter - 2px;
 		transition: none;
-		color: inherit;
-
-		&:visited,
-		&:hover,
-		&:focus {
-			color: inherit;
-		}
 	}
 
 	// Make space for the error element that will be appended.
@@ -269,17 +240,26 @@ $jetpack-podcast-player-background: $white;
 
 	.jetpack-podcast-player__track-status-icon {
 		flex: $track-status-icon-size 0 0;
-		fill: $jetpack-podcast-player-primary;
-		fill: var( --jetpack-podcast-player-primary );
+		fill: currentColor;
 
 		svg {
 			display: block;
 			width: $track-status-icon-size;
 			height: $track-status-icon-size;
 			margin-top: 3px; // center vertically
+			fill: inherit;
 		}
 	}
 
+	.jetpack-podcast-player__track-status-icon--error {
+		fill: $alert-red;
+	}
+
+	// Use primary color to prevent visual conflicts (i.e. with red bg color)
+	.jetpack-podcast-player__track.has-primary .jetpack-podcast-player__track-status-icon--error  {
+		fill: currentColor;
+	}
+
 	.jetpack-podcast-player__track-title {
 		flex-grow: 1;
 		padding: 0 $track-v-padding;
@@ -297,33 +277,22 @@ $jetpack-podcast-player-background: $white;
 		display: block;
 		margin-left: ($block-grid-gutter - 2px) + $track-status-icon-size + $track-v-padding; // has to be aligned with the track title
 		margin-bottom: $track-h-padding;
-		color: $alert-red;
 		font-size: 0.8em;
 		font-weight: normal;
-
-		& > span {
-			color: $jetpack-podcast-player-secondary;
-		}
-
-		& > span > a {
-			color: inherit;
-		}
-	}
-
-	.has-primary .jetpack-podcast-player__track-error {
-		color: currentColor;
+		color: $alert-red;
 
 		& > span {
 			color: var( --jetpack-podcast-player-secondary );
-		}
-	}
 
-	.jetpack-podcast-player__track-status-icon--error {
-		fill: $alert-red;
+			&:not( .has-secondary ) {
+				color: $jetpack-podcast-player-secondary;
+			}
+		}
 	}
 
-	.has-primary .jetpack-podcast-player__track-status-icon--error {
-		fill: currentColor;
+	// Use primary color to prevent visual conflicts (i.e. red background)
+	.jetpack-podcast-player__track.has-primary .jetpack-podcast-player__track-error {
+		color: inherit;
 	}
 
 	/**

From a2c109b09810d84ee83ff4693ea70c30206918c6 Mon Sep 17 00:00:00 2001
From: Bart <bartlomiej.kalisz@gmail.com>
Date: Tue, 21 Apr 2020 19:35:09 +0200
Subject: [PATCH 09/25] Spread some shorthands for clarity and lint styles.scss

---
 extensions/blocks/podcast-player/style.scss | 15 ++++++++++-----
 1 file changed, 10 insertions(+), 5 deletions(-)

diff --git a/extensions/blocks/podcast-player/style.scss b/extensions/blocks/podcast-player/style.scss
index 153c3728a5de..d932f8825c57 100644
--- a/extensions/blocks/podcast-player/style.scss
+++ b/extensions/blocks/podcast-player/style.scss
@@ -228,8 +228,10 @@ $jetpack-podcast-player-background: $white;
 		display: flex;
 		flex-flow: row nowrap;
 		justify-content: space-between;
-		// Adjustments on left padding to account for SVG sound icon spacing
-		padding: $track-h-padding $block-grid-gutter $track-h-padding $block-grid-gutter - 2px;
+		padding-top: $track-h-padding;
+		padding-bottom: $track-h-padding;
+		padding-left: $block-grid-gutter - 2px; // Adjustments on left padding to account for SVG sound icon spacing
+		padding-right: $block-grid-gutter;
 		transition: none;
 	}
 
@@ -256,7 +258,7 @@ $jetpack-podcast-player-background: $white;
 	}
 
 	// Use primary color to prevent visual conflicts (i.e. with red bg color)
-	.jetpack-podcast-player__track.has-primary .jetpack-podcast-player__track-status-icon--error  {
+	.jetpack-podcast-player__track.has-primary .jetpack-podcast-player__track-status-icon--error {
 		fill: currentColor;
 	}
 
@@ -275,7 +277,7 @@ $jetpack-podcast-player-background: $white;
 	 */
 	.jetpack-podcast-player__track-error {
 		display: block;
-		margin-left: ($block-grid-gutter - 2px) + $track-status-icon-size + $track-v-padding; // has to be aligned with the track title
+		margin-left: ( $block-grid-gutter - 2px ) + $track-status-icon-size + $track-v-padding; // has to be aligned with the track title
 		margin-bottom: $track-h-padding;
 		font-size: 0.8em;
 		font-weight: normal;
@@ -337,12 +339,15 @@ $jetpack-podcast-player-background: $white;
 
 	.mejs-controls {
 		position: static;
+		padding-top: 0;
+		padding-bottom: 0;
 		/**
 		* Lines up the mejs player padding with our wrapper spacing.
 		* Magic numbers are due to needing to line-up the player spacing with buttons
 		* and fixed widths inside of the mediaplayer.
 		*/
-		padding: 0 ( $block-grid-gutter - 6px ) 0 ( $block-grid-gutter - 9px );
+		padding-left: $block-grid-gutter - 9px;
+		padding-right: $block-grid-gutter - 6px;
 	}
 
 	.mejs-time,

From 65ff357d0841b1453f79a28cc4c9c836a6103b7f Mon Sep 17 00:00:00 2001
From: Jerry Jones <jones.jeremydavid@gmail.com>
Date: Tue, 21 Apr 2020 14:13:24 -0500
Subject: [PATCH 10/25] Reorganized .mejs wrapper classes for easier reading

---
 extensions/blocks/podcast-player/style.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/extensions/blocks/podcast-player/style.scss b/extensions/blocks/podcast-player/style.scss
index d932f8825c57..c375a772a08a 100644
--- a/extensions/blocks/podcast-player/style.scss
+++ b/extensions/blocks/podcast-player/style.scss
@@ -330,9 +330,9 @@ $jetpack-podcast-player-background: $white;
 	 * Style player by overriding mejs default styles
 	 */
 	.mejs-container,
+	.mejs-container .mejs-controls,
 	.mejs-embed,
 	.mejs-embed body,
-	.mejs-container .mejs-controls,
 	.mejs-mediaelement {
 		background-color: transparent;
 	}

From 174c2e230dd6bf35b135e2b28b210998605fc80f Mon Sep 17 00:00:00 2001
From: Bart <bartlomiej.kalisz@gmail.com>
Date: Wed, 22 Apr 2020 15:35:01 +0200
Subject: [PATCH 11/25] Move link class for specificity bump Varia also uses
 the `has-background` class which bumps its selectors specificity
 unintendedly. This makes our anchor styles more specific.

---
 extensions/blocks/podcast-player/style.scss | 25 +++++++++++----------
 1 file changed, 13 insertions(+), 12 deletions(-)

diff --git a/extensions/blocks/podcast-player/style.scss b/extensions/blocks/podcast-player/style.scss
index c375a772a08a..e671132ddf8b 100644
--- a/extensions/blocks/podcast-player/style.scss
+++ b/extensions/blocks/podcast-player/style.scss
@@ -63,7 +63,8 @@ $jetpack-podcast-player-background: $white;
 		 */
 
 		/**
-		 * Override to address themes using text-decoration or box-shadow underlines on links.
+		 * Override to address themes using text-decoration or box-shadow underlines
+		 * on links.
 		 */
 		a {
 			box-shadow: none;
@@ -77,19 +78,19 @@ $jetpack-podcast-player-background: $white;
 				border: none;
 			}
 		}
-	}
 
-	a.jetpack-podcast-player__link {
-		&,
-		&:active,
-		&:visited {
-			color: inherit;
-		}
+		a.jetpack-podcast-player__link {
+			&,
+			&:active,
+			&:visited {
+				color: inherit;
+			}
 
-		&:hover,
-		&:focus {
-			color: inherit;
-			color: var( --jetpack-podcast-player-primary );
+			&:hover,
+			&:focus {
+				color: inherit;
+				color: var( --jetpack-podcast-player-primary );
+			}
 		}
 	}
 

From 5d5b90b2d700051b7ff2b1b3a72ab26ddeafe62b Mon Sep 17 00:00:00 2001
From: Bart <bartlomiej.kalisz@gmail.com>
Date: Wed, 22 Apr 2020 15:38:29 +0200
Subject: [PATCH 12/25] Remove block border

---
 extensions/blocks/podcast-player/style.scss | 2 --
 1 file changed, 2 deletions(-)

diff --git a/extensions/blocks/podcast-player/style.scss b/extensions/blocks/podcast-player/style.scss
index e671132ddf8b..8c1de1eb14e0 100644
--- a/extensions/blocks/podcast-player/style.scss
+++ b/extensions/blocks/podcast-player/style.scss
@@ -4,7 +4,6 @@
 @import '../../shared/styles/gutenberg-base-styles.scss';
 
 $block-grid-gutter: 24px;
-$block-border-color: $dark-gray-100;
 $cover-image-size: 80px;
 $current-track-title-font-size: 24px;
 $current-track-title-bottom-margin: 10px;
@@ -28,7 +27,6 @@ $jetpack-podcast-player-background: $white;
  * Player's (block) parent element.
  */
 .wp-block-jetpack-podcast-player {
-	border: 1px solid $block-border-color;
 	overflow: hidden;
 
 	audio {

From 3da205329374c2ef56502ef6b700f57b76d2ddb4 Mon Sep 17 00:00:00 2001
From: Bart <bartlomiej.kalisz@gmail.com>
Date: Thu, 23 Apr 2020 12:31:08 +0200
Subject: [PATCH 13/25] Update header markup

---
 .../podcast-player/components/header.js       | 47 +++++++------------
 extensions/blocks/podcast-player/style.scss   | 18 ++++---
 .../templates/podcast-title.php               | 33 +++++++------
 3 files changed, 43 insertions(+), 55 deletions(-)

diff --git a/extensions/blocks/podcast-player/components/header.js b/extensions/blocks/podcast-player/components/header.js
index 7f80e6389ef5..e4164be32d52 100644
--- a/extensions/blocks/podcast-player/components/header.js
+++ b/extensions/blocks/podcast-player/components/header.js
@@ -50,11 +50,7 @@ const Header = memo(
 			{ !! ( showEpisodeDescription && track && track.description ) && (
 				<div
 					id={ `${ playerId }__track-description` }
-					className={ classnames(
-						'jetpack-podcast-player__track-description',
-						colors.secondary.classes
-					) }
-					style={ { color: colors.secondary.custom } }
+					className="jetpack-podcast-player__track-description"
 				>
 					{ track.description }
 				</div>
@@ -100,30 +96,21 @@ const Title = memo(
 	)
 );
 
-const PodcastTitle = memo(
-	( { title, link, colors = { secondary: { name: null, custom: null, classes: '' } } } ) => {
-		const className = classnames(
-			'jetpack-podcast-player__podcast-title',
-			colors.secondary.classes
-		);
-
-		return (
-			<span className={ className } style={ { color: colors.secondary.custom } }>
-				{ link ? (
-					<a
-						className="jetpack-podcast-player__link"
-						href={ link }
-						target="_blank"
-						rel="noopener noreferrer nofollow"
-					>
-						{ title }
-					</a>
-				) : (
-					{ title }
-				) }
-			</span>
-		);
-	}
-);
+const PodcastTitle = memo( ( { title, link } ) => (
+	<span className="jetpack-podcast-player__podcast-title">
+		{ link ? (
+			<a
+				className="jetpack-podcast-player__link"
+				href={ link }
+				target="_blank"
+				rel="noopener noreferrer nofollow"
+			>
+				{ title }
+			</a>
+		) : (
+			{ title }
+		) }
+	</span>
+) );
 
 export default Header;
diff --git a/extensions/blocks/podcast-player/style.scss b/extensions/blocks/podcast-player/style.scss
index 8c1de1eb14e0..003bf0c9f964 100644
--- a/extensions/blocks/podcast-player/style.scss
+++ b/extensions/blocks/podcast-player/style.scss
@@ -47,8 +47,13 @@ $jetpack-podcast-player-background: $white;
 		 */
 		padding-top: 0;
 		padding-bottom: 0;
+		color: var( --jetpack-podcast-player-secondary );
 		background-color: var( --jetpack-podcast-player-background );
 
+		&:not( .has-secondary ) {
+			color: $jetpack-podcast-player-secondary;
+		}
+
 		&:not( .has-background ) {
 			background-color: $jetpack-podcast-player-background;
 		}
@@ -128,6 +133,7 @@ $jetpack-podcast-player-background: $white;
 		padding: 0;
 		overflow: hidden;
 		letter-spacing: 0; // Fixes Twenty Twenty compressed text.
+		color: inherit;
 
 		&:before,
 		&:after {
@@ -149,11 +155,7 @@ $jetpack-podcast-player-background: $white;
 	.jetpack-podcast-player__podcast-title {
 		font-size: $editor-font-size;
 		margin: 0;
-		color: var( --jetpack-podcast-player-secondary );
-
-		&:not( .has-secondary ) {
-			color: $jetpack-podcast-player-secondary;
-		}
+		color: inherit;
 	}
 
 	.jetpack-podcast-player__audio-player {
@@ -179,11 +181,7 @@ $jetpack-podcast-player-background: $white;
 		-webkit-box-orient: vertical;
 		overflow: hidden;
 		max-height: 105px; //IE11 fallback
-		color: var( --jetpack-podcast-player-secondary );
-
-		&:not( .has-secondary ) {
-			color: $jetpack-podcast-player-secondary;
-		}
+		color: inherit;
 	}
 
 	/**
diff --git a/extensions/blocks/podcast-player/templates/podcast-title.php b/extensions/blocks/podcast-player/templates/podcast-title.php
index 07e76662bda5..be9ba324496c 100644
--- a/extensions/blocks/podcast-player/templates/podcast-title.php
+++ b/extensions/blocks/podcast-player/templates/podcast-title.php
@@ -18,19 +18,22 @@
 	return;
 }
 
-if ( ! empty( $link ) ) :
-	?>
-	<a
-		class="jetpack-podcast-player__podcast-title"
-		href="<?php echo esc_url( $link ); ?>"
-		target="_blank"
-		rel="noopener noreferrer nofollow"
-	>
-		<?php echo esc_html( $title ); ?>
-	</a>
-<?php else : ?>
-	<span class="jetpack-podcast-player__podcast-title">
-		<?php echo esc_html( $title ); ?>
-	</span>;
+?>
+<span class="jetpack-podcast-player__podcast-title">
 	<?php
-endif;
+	if ( ! empty( $link ) ) :
+		?>
+		<a
+			class="jetpack-podcast-player__link"
+			href="<?php echo esc_url( $link ); ?>"
+			target="_blank"
+			rel="noopener noreferrer nofollow"
+		>
+			<?php echo esc_html( $title ); ?>
+		</a>
+		<?php
+	else :
+		echo esc_html( $title );
+	endif;
+	?>
+</span>

From 0e6698c5f3f694ff0aaffe8a8834f5d552f3845f Mon Sep 17 00:00:00 2001
From: Bart <bartlomiej.kalisz@gmail.com>
Date: Thu, 23 Apr 2020 12:37:17 +0200
Subject: [PATCH 14/25] Add missing class to track link

---
 extensions/blocks/podcast-player/templates/playlist-track.php | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/extensions/blocks/podcast-player/templates/playlist-track.php b/extensions/blocks/podcast-player/templates/playlist-track.php
index 58bf284ed684..1e767723daa3 100644
--- a/extensions/blocks/podcast-player/templates/playlist-track.php
+++ b/extensions/blocks/podcast-player/templates/playlist-track.php
@@ -33,7 +33,7 @@ class="<?php echo esc_attr( trim( $class ) ); ?>"
 	style="<?php echo esc_attr( $style ); ?>"
 >
 	<a
-		class="jetpack-podcast-player__track-link"
+		class="jetpack-podcast-player__track-link jetpack-podcast-player__link"
 		href="<?php echo esc_url( $attachment['link'] ); ?>"
 		role="button"
 		<?php echo $is_active ? 'aria-current="track"' : ''; ?>

From fd729e9382bf2d7318dd9f5107a75c7005567c76 Mon Sep 17 00:00:00 2001
From: Bart <bartlomiej.kalisz@gmail.com>
Date: Thu, 23 Apr 2020 12:43:33 +0200
Subject: [PATCH 15/25] Correct track padding for no-js markup

---
 extensions/blocks/podcast-player/style.scss | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/extensions/blocks/podcast-player/style.scss b/extensions/blocks/podcast-player/style.scss
index 003bf0c9f964..cad31de7a2bc 100644
--- a/extensions/blocks/podcast-player/style.scss
+++ b/extensions/blocks/podcast-player/style.scss
@@ -306,12 +306,11 @@ $jetpack-podcast-player-background: $white;
 	}
 
 	/**
-	 * Style the block to hide dynamic UI and show just its default style.
+	 * Style the block to hide dynamic UI and show just its default style (no-js).
 	 */
 	&.is-default {
 		.jetpack-podcast-player__track-title {
-			// Change padding to account for missing space for status-icon.
-			padding-left: $block-grid-gutter - $track-v-padding;
+			padding-left: 0; // Account for missing space for status-icon.
 		}
 
 		.jetpack-podcast-player__audio-player {

From a3edfb97d7610aaac4435bb3b1547b4792ec4217 Mon Sep 17 00:00:00 2001
From: Bart <bartlomiej.kalisz@gmail.com>
Date: Thu, 23 Apr 2020 12:45:33 +0200
Subject: [PATCH 16/25] Move no-js styling to the bottom of the sheet

---
 extensions/blocks/podcast-player/style.scss | 31 ++++++++++-----------
 1 file changed, 14 insertions(+), 17 deletions(-)

diff --git a/extensions/blocks/podcast-player/style.scss b/extensions/blocks/podcast-player/style.scss
index cad31de7a2bc..49acb2a8c63c 100644
--- a/extensions/blocks/podcast-player/style.scss
+++ b/extensions/blocks/podcast-player/style.scss
@@ -305,23 +305,6 @@ $jetpack-podcast-player-background: $white;
 		font-weight: normal;
 	}
 
-	/**
-	 * Style the block to hide dynamic UI and show just its default style (no-js).
-	 */
-	&.is-default {
-		.jetpack-podcast-player__track-title {
-			padding-left: 0; // Account for missing space for status-icon.
-		}
-
-		.jetpack-podcast-player__audio-player {
-			display: none;
-		}
-
-		&.is-default .jetpack-podcast-player__track-status-icon {
-			display: none;
-		}
-	}
-
 	/**
 	 * Style player by overriding mejs default styles
 	 */
@@ -455,4 +438,18 @@ $jetpack-podcast-player-background: $white;
 			}
 		}
 	}
+
+	/**
+	 * Style the block to hide dynamic UI and show just its default style (no-js).
+	 */
+	&.is-default {
+		.jetpack-podcast-player__track-title {
+			padding-left: 0; // Account for missing space for status-icon.
+		}
+
+		.jetpack-podcast-player__audio-player,
+		.jetpack-podcast-player__track-status-icon {
+			display: none;
+		}
+	}
 }

From 491d687c99eb28d59d8cc0c781650825c87a11f4 Mon Sep 17 00:00:00 2001
From: Bart <bartlomiej.kalisz@gmail.com>
Date: Thu, 23 Apr 2020 12:52:24 +0200
Subject: [PATCH 17/25] Use bg color as text color for ME float element Using
 primary as background and secondary as text color can make the element
 unreadable. Primary vs background should always contrast.

---
 extensions/blocks/podcast-player/style.scss | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/extensions/blocks/podcast-player/style.scss b/extensions/blocks/podcast-player/style.scss
index 49acb2a8c63c..12472db060da 100644
--- a/extensions/blocks/podcast-player/style.scss
+++ b/extensions/blocks/podcast-player/style.scss
@@ -331,8 +331,8 @@ $jetpack-podcast-player-background: $white;
 
 	.mejs-time,
 	.mejs-time-float {
-		color: $jetpack-podcast-player-secondary;
-		color: var( --jetpack-podcast-player-secondary );
+		color: $jetpack-podcast-player-background;
+		color: var( --jetpack-podcast-player-background );
 	}
 
 	.mejs-time-float {

From ba25ffe8416307dd82076707d66908820d367764 Mon Sep 17 00:00:00 2001
From: Bart <bartlomiej.kalisz@gmail.com>
Date: Thu, 23 Apr 2020 16:09:39 +0200
Subject: [PATCH 18/25] Define generic gutters instead of cryptic paddings

---
 extensions/blocks/podcast-player/style.scss | 43 ++++++++++-----------
 1 file changed, 21 insertions(+), 22 deletions(-)

diff --git a/extensions/blocks/podcast-player/style.scss b/extensions/blocks/podcast-player/style.scss
index 12472db060da..6328b6062560 100644
--- a/extensions/blocks/podcast-player/style.scss
+++ b/extensions/blocks/podcast-player/style.scss
@@ -3,12 +3,11 @@
  */
 @import '../../shared/styles/gutenberg-base-styles.scss';
 
-$block-grid-gutter: 24px;
+$gutter-s: 10px;
+$gutter-m: 15px;
+$gutter-l: 24px;
 $cover-image-size: 80px;
 $current-track-title-font-size: 24px;
-$current-track-title-bottom-margin: 10px;
-$track-v-padding: 15px;
-$track-h-padding: 10px;
 $track-status-icon-size: 22px;
 $jetpack-podcast-player-primary: $black;
 $jetpack-podcast-player-secondary: $dark-gray-300;
@@ -108,12 +107,12 @@ $jetpack-podcast-player-background: $white;
 
 	.jetpack-podcast-player__current-track-info {
 		display: flex;
-		padding: $block-grid-gutter;
+		padding: $gutter-l;
 	}
 
 	.jetpack-podcast-player__cover {
 		width: $cover-image-size;
-		margin-right: $block-grid-gutter;
+		margin-right: $gutter-l;
 		flex-shrink: 0;
 	}
 
@@ -143,7 +142,7 @@ $jetpack-podcast-player-background: $white;
 
 	.jetpack-podcast-player__current-track-title {
 		font-size: $current-track-title-font-size;
-		margin: 0 0 $current-track-title-bottom-margin;
+		margin: 0 0 $gutter-s;
 		color: var( --jetpack-podcast-player-primary );
 
 		// Apply default color if custom primary has not been set
@@ -160,19 +159,19 @@ $jetpack-podcast-player-background: $white;
 
 	.jetpack-podcast-player__audio-player {
 		height: 40px; // mirroring .mejs-container
-		margin-bottom: $block-grid-gutter;
+		margin-bottom: $gutter-l;
 	}
 
 	.jetpack-podcast-player--audio-player-loading {
 		height: 10px; // mirroring .mejs-time-total
 		background: $jetpack-podcast-player-secondary;
-		margin: 15px $block-grid-gutter; // simulating spacing of .mejs-container
+		margin: 15px $gutter-l; // simulating spacing of .mejs-container
 	}
 
 	.jetpack-podcast-player__track-description {
 		order: 99; // high number to make it always appear after the audio player
-		padding: 0 $block-grid-gutter;
-		margin-bottom: $block-grid-gutter;
+		padding: 0 $gutter-l;
+		margin-bottom: $gutter-l;
 		font-size: $editor-font-size;
 		line-height: 1.6;
 		//crop the description if too long
@@ -193,7 +192,7 @@ $jetpack-podcast-player-background: $white;
 		display: flex;
 		flex-direction: column;
 		margin: 0;
-		padding: $track-v-padding 0;
+		padding: $gutter-m 0;
 	}
 
 	.jetpack-podcast-player__track {
@@ -225,10 +224,10 @@ $jetpack-podcast-player-background: $white;
 		display: flex;
 		flex-flow: row nowrap;
 		justify-content: space-between;
-		padding-top: $track-h-padding;
-		padding-bottom: $track-h-padding;
-		padding-left: $block-grid-gutter - 2px; // Adjustments on left padding to account for SVG sound icon spacing
-		padding-right: $block-grid-gutter;
+		padding-top: $gutter-s;
+		padding-bottom: $gutter-s;
+		padding-left: $gutter-l - 2px; // Adjustments on left padding to account for SVG sound icon spacing
+		padding-right: $gutter-l;
 		transition: none;
 	}
 
@@ -261,7 +260,7 @@ $jetpack-podcast-player-background: $white;
 
 	.jetpack-podcast-player__track-title {
 		flex-grow: 1;
-		padding: 0 $track-v-padding;
+		padding: 0 $gutter-m;
 	}
 
 	.jetpack-podcast-player__track-duration {
@@ -274,8 +273,8 @@ $jetpack-podcast-player-background: $white;
 	 */
 	.jetpack-podcast-player__track-error {
 		display: block;
-		margin-left: ( $block-grid-gutter - 2px ) + $track-status-icon-size + $track-v-padding; // has to be aligned with the track title
-		margin-bottom: $track-h-padding;
+		margin-left: ( $gutter-l - 2px ) + $track-status-icon-size + $gutter-m; // has to be aligned with the track title
+		margin-bottom: $gutter-s;
 		font-size: 0.8em;
 		font-weight: normal;
 		color: $alert-red;
@@ -298,7 +297,7 @@ $jetpack-podcast-player-background: $white;
 	 * Global error element, replaces the whole block with the error message.
 	 */
 	.jetpack-podcast-player__error {
-		padding: $block-grid-gutter;
+		padding: $gutter-l;
 		margin: 0;
 		color: $alert-red;
 		font-size: 0.8em;
@@ -325,8 +324,8 @@ $jetpack-podcast-player-background: $white;
 		* Magic numbers are due to needing to line-up the player spacing with buttons
 		* and fixed widths inside of the mediaplayer.
 		*/
-		padding-left: $block-grid-gutter - 9px;
-		padding-right: $block-grid-gutter - 6px;
+		padding-left: $gutter-l - 9px;
+		padding-right: $gutter-l - 6px;
 	}
 
 	.mejs-time,

From dbfb2d67a86771b8007f60de5e7c2434db7688cc Mon Sep 17 00:00:00 2001
From: Bart <bartlomiej.kalisz@gmail.com>
Date: Thu, 23 Apr 2020 16:12:51 +0200
Subject: [PATCH 19/25] Move error color to a local var

---
 extensions/blocks/podcast-player/style.scss | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/extensions/blocks/podcast-player/style.scss b/extensions/blocks/podcast-player/style.scss
index 6328b6062560..aa54f16f0edd 100644
--- a/extensions/blocks/podcast-player/style.scss
+++ b/extensions/blocks/podcast-player/style.scss
@@ -12,6 +12,7 @@ $track-status-icon-size: 22px;
 $jetpack-podcast-player-primary: $black;
 $jetpack-podcast-player-secondary: $dark-gray-300;
 $jetpack-podcast-player-background: $white;
+$jetpack-podcast-player-error: $alert-red;
 
 .jetpack-podcast-player--visually-hidden {
 	position: absolute !important;
@@ -250,7 +251,7 @@ $jetpack-podcast-player-background: $white;
 	}
 
 	.jetpack-podcast-player__track-status-icon--error {
-		fill: $alert-red;
+		fill: $jetpack-podcast-player-error;
 	}
 
 	// Use primary color to prevent visual conflicts (i.e. with red bg color)
@@ -277,7 +278,7 @@ $jetpack-podcast-player-background: $white;
 		margin-bottom: $gutter-s;
 		font-size: 0.8em;
 		font-weight: normal;
-		color: $alert-red;
+		color: $jetpack-podcast-player-error;
 
 		& > span {
 			color: var( --jetpack-podcast-player-secondary );
@@ -299,7 +300,7 @@ $jetpack-podcast-player-background: $white;
 	.jetpack-podcast-player__error {
 		padding: $gutter-l;
 		margin: 0;
-		color: $alert-red;
+		color: $jetpack-podcast-player-error;
 		font-size: 0.8em;
 		font-weight: normal;
 	}

From f6a18391d3338752b1736e77ff62f92211583a51 Mon Sep 17 00:00:00 2001
From: Bart <bartlomiej.kalisz@gmail.com>
Date: Thu, 23 Apr 2020 16:27:32 +0200
Subject: [PATCH 20/25] Use gutter-m instead of fixed value

---
 extensions/blocks/podcast-player/style.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/extensions/blocks/podcast-player/style.scss b/extensions/blocks/podcast-player/style.scss
index aa54f16f0edd..0e0c6a324bc3 100644
--- a/extensions/blocks/podcast-player/style.scss
+++ b/extensions/blocks/podcast-player/style.scss
@@ -166,7 +166,7 @@ $jetpack-podcast-player-error: $alert-red;
 	.jetpack-podcast-player--audio-player-loading {
 		height: 10px; // mirroring .mejs-time-total
 		background: $jetpack-podcast-player-secondary;
-		margin: 15px $gutter-l; // simulating spacing of .mejs-container
+		margin: $gutter-m $gutter-l; // simulating spacing of .mejs-container
 	}
 
 	.jetpack-podcast-player__track-description {

From 444590ce875e0a612f3d53fba08225e3a79c4a0c Mon Sep 17 00:00:00 2001
From: Bart <bartlomiej.kalisz@gmail.com>
Date: Thu, 23 Apr 2020 16:29:46 +0200
Subject: [PATCH 21/25] Use provided var for description line-height

---
 extensions/blocks/podcast-player/style.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/extensions/blocks/podcast-player/style.scss b/extensions/blocks/podcast-player/style.scss
index 0e0c6a324bc3..352dbf5e4d73 100644
--- a/extensions/blocks/podcast-player/style.scss
+++ b/extensions/blocks/podcast-player/style.scss
@@ -174,7 +174,7 @@ $jetpack-podcast-player-error: $alert-red;
 		padding: 0 $gutter-l;
 		margin-bottom: $gutter-l;
 		font-size: $editor-font-size;
-		line-height: 1.6;
+		line-height: $editor-line-height;
 		//crop the description if too long
 		display: -webkit-box;
 		-webkit-line-clamp: 4;

From 037cc6ea1c75b7e99dc17cc1ffd047a2d661a476 Mon Sep 17 00:00:00 2001
From: Bart <bartlomiej.kalisz@gmail.com>
Date: Thu, 23 Apr 2020 16:58:20 +0200
Subject: [PATCH 22/25] Wrap description text with <p>

---
 extensions/blocks/podcast-player/components/header.js | 4 ++--
 extensions/blocks/podcast-player/style.scss           | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/extensions/blocks/podcast-player/components/header.js b/extensions/blocks/podcast-player/components/header.js
index e4164be32d52..9bcd0e4f13b3 100644
--- a/extensions/blocks/podcast-player/components/header.js
+++ b/extensions/blocks/podcast-player/components/header.js
@@ -48,12 +48,12 @@ const Header = memo(
 			 * readers, then visually switching it with the audio player via flex.
 			 */ }
 			{ !! ( showEpisodeDescription && track && track.description ) && (
-				<div
+				<p
 					id={ `${ playerId }__track-description` }
 					className="jetpack-podcast-player__track-description"
 				>
 					{ track.description }
-				</div>
+				</p>
 			) }
 
 			{ /* children contains the audio player */ }
diff --git a/extensions/blocks/podcast-player/style.scss b/extensions/blocks/podcast-player/style.scss
index 352dbf5e4d73..d0dbf5edd4ab 100644
--- a/extensions/blocks/podcast-player/style.scss
+++ b/extensions/blocks/podcast-player/style.scss
@@ -172,7 +172,7 @@ $jetpack-podcast-player-error: $alert-red;
 	.jetpack-podcast-player__track-description {
 		order: 99; // high number to make it always appear after the audio player
 		padding: 0 $gutter-l;
-		margin-bottom: $gutter-l;
+		margin: 0 0 $gutter-l 0;
 		font-size: $editor-font-size;
 		line-height: $editor-line-height;
 		//crop the description if too long

From 21cf4953a67f03fb0a469b96d48041be5e3704e1 Mon Sep 17 00:00:00 2001
From: Bart <bartlomiej.kalisz@gmail.com>
Date: Thu, 23 Apr 2020 17:01:27 +0200
Subject: [PATCH 23/25] Do not add extra padding to the top of the list

---
 extensions/blocks/podcast-player/style.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/extensions/blocks/podcast-player/style.scss b/extensions/blocks/podcast-player/style.scss
index d0dbf5edd4ab..f31a6e694a3f 100644
--- a/extensions/blocks/podcast-player/style.scss
+++ b/extensions/blocks/podcast-player/style.scss
@@ -193,7 +193,7 @@ $jetpack-podcast-player-error: $alert-red;
 		display: flex;
 		flex-direction: column;
 		margin: 0;
-		padding: $gutter-m 0;
+		padding: 0 0 $gutter-m 0;
 	}
 
 	.jetpack-podcast-player__track {

From c0fb34ba96e1a57b4cef43219bc6205da5fb3cc0 Mon Sep 17 00:00:00 2001
From: Bart <bartlomiej.kalisz@gmail.com>
Date: Thu, 23 Apr 2020 17:05:00 +0200
Subject: [PATCH 24/25] Fix ME.js time element color Should not be the same as
 the floating tooltip

---
 extensions/blocks/podcast-player/style.scss | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/extensions/blocks/podcast-player/style.scss b/extensions/blocks/podcast-player/style.scss
index f31a6e694a3f..2c7d061c943f 100644
--- a/extensions/blocks/podcast-player/style.scss
+++ b/extensions/blocks/podcast-player/style.scss
@@ -329,7 +329,11 @@ $jetpack-podcast-player-error: $alert-red;
 		padding-right: $gutter-l - 6px;
 	}
 
-	.mejs-time,
+	.mejs-time {
+		color: $jetpack-podcast-player-secondary;
+		color: var( --jetpack-podcast-player-secondary );
+	}
+
 	.mejs-time-float {
 		color: $jetpack-podcast-player-background;
 		color: var( --jetpack-podcast-player-background );

From 66b4af6585a4180d1fdd8237217dfec639d3839c Mon Sep 17 00:00:00 2001
From: Jerry Jones <jones.jeremydavid@gmail.com>
Date: Thu, 23 Apr 2020 11:20:33 -0500
Subject: [PATCH 25/25] Removed unnecessary aria-live in SSR podcast header

---
 extensions/blocks/podcast-player/templates/podcast-header.php | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/extensions/blocks/podcast-player/templates/podcast-header.php b/extensions/blocks/podcast-player/templates/podcast-header.php
index 7f12cc83f042..ad709ce58dd2 100644
--- a/extensions/blocks/podcast-player/templates/podcast-header.php
+++ b/extensions/blocks/podcast-player/templates/podcast-header.php
@@ -30,7 +30,7 @@
 ?>
 
 <div class="jetpack-podcast-player__header">
-	<div class="jetpack-podcast-player__current-track-info" aria-live="polite">
+	<div class="jetpack-podcast-player__current-track-info">
 		<?php if ( $show_cover_art && isset( $cover ) ) : ?>
 			<div class="jetpack-podcast-player__cover">
 				<img class="jetpack-podcast-player__cover-image" src="<?php echo esc_url( $cover ); ?>" alt="" />