From abd7204495ce951167ee78a5e0e36372c245b0f8 Mon Sep 17 00:00:00 2001
From: John Hooks <bitmachina@outlook.com>
Date: Sun, 19 May 2024 08:24:01 -0700
Subject: [PATCH] feat: support custom colors for audio player

This commit adds block supports for color customization.

The block editor color palette is used to select the colors. The colors
are stored in the block attributes, though are applied using inline
styles of custom CSS properties. This allows the custom colors to be
applied to the shadow DOM of the `media-chrome` web components.

Fixes: #11
---
 docs/planning.md            |  5 +++++
 src/audio/block.json        |  5 +++++
 src/audio/edit.tsx          | 10 +++++++++-
 src/audio/player/player.tsx | 13 ++++++++++---
 src/audio/save.tsx          |  9 ++++++++-
 src/audio/style.scss        | 12 ++++++++++++
 src/audio/types.ts          | 16 ++++++++++++++++
 src/audio/use-style.ts      | 36 ++++++++++++++++++++++++++++++++++++
 8 files changed, 101 insertions(+), 5 deletions(-)
 create mode 100644 src/audio/use-style.ts

diff --git a/docs/planning.md b/docs/planning.md
index 8285374..10db64f 100644
--- a/docs/planning.md
+++ b/docs/planning.md
@@ -8,6 +8,11 @@ Replicate the functionality of the audio block. Using the `audio` element.
 
 Add a custom UI that replicates the features of the standard `audio` element.
 
+### Color Supports
+
+-   [Block Supports - Color](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#color)
+-   [Theme Supports - Color Palettes](https://developer.wordpress.org/block-editor/how-to-guides/themes/theme-support/#block-color-palettes)
+
 ## Step Three
 
 Incrementally add features to expand the functionality.
diff --git a/src/audio/block.json b/src/audio/block.json
index d2d27d8..f7efabb 100644
--- a/src/audio/block.json
+++ b/src/audio/block.json
@@ -46,6 +46,11 @@
 	"supports": {
 		"anchor": true,
 		"align": true,
+		"color": {
+			"background": true,
+			"text": true,
+			"link": false
+		},
 		"spacing": {
 			"margin": true,
 			"padding": true
diff --git a/src/audio/edit.tsx b/src/audio/edit.tsx
index f9a8f70..e14d917 100644
--- a/src/audio/edit.tsx
+++ b/src/audio/edit.tsx
@@ -28,6 +28,7 @@ import './editor.scss';
 import Caption from './edit/caption.js';
 import { Player } from './player/index.js';
 import type { Attributes } from './types';
+import useStyle from './use-style.js';
 
 const ALLOWED_MEDIA_TYPES = ['audio'];
 
@@ -114,6 +115,8 @@ function VinylEdit({
 		className: classes,
 	});
 
+	const style = useStyle(attributes);
+
 	if (!src) {
 		return (
 			<div {...blockProps}>
@@ -196,7 +199,12 @@ function VinylEdit({
 				*/}
 
 				<Disabled isDisabled={!isSingleSelected}>
-					<Player loop={loop} preload={preload} src={src} />
+					<Player
+						loop={loop}
+						preload={preload}
+						src={src}
+						style={style}
+					/>
 				</Disabled>
 
 				{isTemporaryAudio && <Spinner />}
diff --git a/src/audio/player/player.tsx b/src/audio/player/player.tsx
index ba879f4..f640072 100644
--- a/src/audio/player/player.tsx
+++ b/src/audio/player/player.tsx
@@ -12,11 +12,18 @@ import {
 } from '../../react/index.js';
 import type { Attributes } from '../types';
 
-type Props = Omit<Attributes, 'caption' | 'id'>;
+type Props = Omit<Attributes, 'caption' | 'id'> & {
+	style?: React.CSSProperties;
+};
 
-export default function Player({ loop, preload, src }: Props) {
+export default function Player({ loop, preload, src, style }: Props) {
 	return (
-		<VinylController audio={true} autohide="-1" className="vinyl__player">
+		<VinylController
+			audio={true}
+			autohide="-1"
+			className="vinyl__player"
+			style={style}
+		>
 			<audio slot="media" src={src} preload={preload} loop={loop} />
 			<VinylControlBar className="vinyl__control-bar">
 				<div className="vinyl__media-controls">
diff --git a/src/audio/save.tsx b/src/audio/save.tsx
index 66790c3..ca1f3aa 100644
--- a/src/audio/save.tsx
+++ b/src/audio/save.tsx
@@ -15,17 +15,24 @@ import {
 } from '../react/index.js';
 
 import type { Attributes } from './types';
+import { computeStyle } from './use-style.js';
 
 export default function Save({ attributes }: BlockSaveProps<Attributes>) {
 	const { loop, preload, src } = attributes;
 
+	const blockProps = useBlockProps.save();
+
+	// Not using a hook here because the save function should be static.
+	const style = computeStyle(attributes);
+
 	return (
 		src && (
-			<figure {...useBlockProps.save()}>
+			<figure {...blockProps}>
 				<VinylController
 					audio={true}
 					autohide="-1"
 					className="vinyl__player"
+					style={style}
 				>
 					<audio
 						slot="media"
diff --git a/src/audio/style.scss b/src/audio/style.scss
index 157797c..6958da1 100644
--- a/src/audio/style.scss
+++ b/src/audio/style.scss
@@ -1,4 +1,7 @@
 .wp-block-vinyl-audio {
+	--vinyl-background-color: var(--wp--preset--color--base, transparent);
+	--vinyl-text-color: var(--wp--preset--color--contrast, #000);
+
 	/* This block has customizable padding, border-box makes that more predictable. */
 	box-sizing: border-box;
 
@@ -11,6 +14,15 @@
 		margin-top: 0.5em;
 	}
 
+	vinyl-controller {
+		--media-background-color: var(--vinyl-background-color);
+		--media-control-background: var(--vinyl-background-color);
+		--media-control-hover-background: transparent;
+
+		/* The primary color is used for --media-text-color and --media-icon-color. */
+		--media-primary-color: var(--vinyl-text-color);
+	}
+
 	/* Show full-width when not aligned. */
 	.vinyl__player {
 		width: 100%;
diff --git a/src/audio/types.ts b/src/audio/types.ts
index b434e36..5ee7455 100644
--- a/src/audio/types.ts
+++ b/src/audio/types.ts
@@ -1,4 +1,5 @@
 import type { Transform } from '@wordpress/blocks';
+import type { Style } from '@wordpress/style-engine/build-types/types';
 
 export interface Attributes {
 	caption?: string;
@@ -6,6 +7,21 @@ export interface Attributes {
 	loop?: boolean;
 	src?: string;
 	preload?: string;
+
+	/**
+	 * Set by the color block support, if a text color is set.
+	 */
+	textColor?: string;
+
+	/**
+	 * Set by the color block support, if a background color is set.
+	 */
+	backgroundColor?: string;
+
+	/**
+	 * The block's style settings.
+	 */
+	style?: Style;
 }
 
 /**
diff --git a/src/audio/use-style.ts b/src/audio/use-style.ts
new file mode 100644
index 0000000..590ded6
--- /dev/null
+++ b/src/audio/use-style.ts
@@ -0,0 +1,36 @@
+import { useMemo } from '@wordpress/element';
+
+import { Attributes } from './types';
+
+/**
+ * @param attributes The audio block attributes.
+ */
+export default function useStyle(attributes: Attributes): React.CSSProperties {
+	const style = useMemo(
+		() => computeStyle(attributes),
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+		[attributes.textColor, attributes.backgroundColor, attributes.style]
+	);
+
+	return style;
+}
+
+export function computeStyle(attributes: Attributes) {
+	const result: React.CSSProperties = {};
+
+	if (attributes.backgroundColor) {
+		result['--vinyl-background-color'] =
+			`var(--wp--preset--color--${attributes.backgroundColor})`;
+	} else if (attributes.style?.color?.background) {
+		result['--vinyl-background-color'] = attributes.style.color.background;
+	}
+
+	if (attributes.textColor) {
+		result['--vinyl-text-color'] =
+			`var(--wp--preset--color--${attributes.textColor})`;
+	} else if (attributes.style?.color?.text) {
+		result['--vinyl-text-color'] = attributes.style.color.text;
+	}
+
+	return result;
+}