@wordpress/block-library 9.47.0 → 9.48.1

package/src/term-description/README.md

@@ -0,0 +1,60 @@
+# Term Description
+
+<!-- START TOKEN(Autogenerated block API docs) -->
+Display the description of categories, tags and custom taxonomies when viewing an archive.
+
+- **Name:** `core/term-description`
+- **Category:** [theme](https://developer.wordpress.org/block-editor/reference-guides/core-blocks/core-blocks-theme/)
+- **API Version:** [3](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-api-versions/)
+- **Block Type:** [Dynamic](https://developer.wordpress.org/block-editor/getting-started/fundamentals/static-dynamic-rendering/) (server-rendered)
+
+## Attributes
+
+_Defined via the [`attributes`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-attributes/) property in block.json._
+
+_This block has no custom attributes._
+
+## Supports
+
+_Defined via the [`supports`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/) property in block.json._
+
+- [`anchor`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#anchor): `true`
+- [`align`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#align): `"wide"`, `"full"`
+- [`html`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#html): `false`
+- [`color`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#color):
+  - [`link`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#color-link): `true`
+- [`spacing`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#spacing):
+  - `padding`: `true`
+  - `margin`: `true`
+- [`typography`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#typography):
+  - [`fontSize`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#typography-fontsize): `true`
+  - [`lineHeight`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#typography-lineheight): `true`
+  - [`textAlign`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#typography-textalign): `true`
+- [`interactivity`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#interactivity):
+  - `clientNavigation`: `true`
+
+## Context
+
+_Defined via the [`usesContext` and `providesContext`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-context/) properties in block.json._
+
+**Uses context:**
+
+- `termId`
+- `taxonomy`
+
+## Block Markup
+
+This is a [**dynamic block**](https://developer.wordpress.org/block-editor/getting-started/fundamentals/static-dynamic-rendering/). It is rendered on the server and does not save HTML in post content.
+
+In post content, it is stored as a block comment:
+
+```html
+<!-- wp:term-description {"align":"full"} /-->
+```
+
+## Source
+
+- [block.json](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/term-description/block.json) ([reference](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-metadata/))
+- [Source directory](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/term-description/) — browse `edit.js`, `save.js`, `index.php`, and more.
+
+<!-- END TOKEN(Autogenerated block API docs) -->

package/src/term-name/README.md

@@ -0,0 +1,65 @@
+# Term Name
+
+<!-- START TOKEN(Autogenerated block API docs) -->
+Displays the name of a taxonomy term.
+
+- **Name:** `core/term-name`
+- **Category:** [theme](https://developer.wordpress.org/block-editor/reference-guides/core-blocks/core-blocks-theme/)
+- **API Version:** [3](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-api-versions/)
+- **Block Type:** [Dynamic](https://developer.wordpress.org/block-editor/getting-started/fundamentals/static-dynamic-rendering/) (server-rendered)
+- **Keywords:** `term title`
+
+## Attributes
+
+_Defined via the [`attributes`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-attributes/) property in block.json._
+
+| Attribute | [Type](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-attributes/#type-validation) | [Default](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-attributes/#default-value) | Description |
+|-----------|------|---------|-------------|
+| `textAlign` | `string` | — | — |
+| `level` | `number` | `0` | — |
+| `isLink` | `boolean` | `false` | — |
+| `levelOptions` | `array` | — | — |
+
+## Supports
+
+_Defined via the [`supports`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/) property in block.json._
+
+- [`anchor`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#anchor): `true`
+- [`align`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#align): `"wide"`, `"full"`
+- [`html`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#html): `false`
+- [`color`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#color):
+  - [`gradients`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#color-gradients): `true`
+  - [`link`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#color-link): `true`
+- [`spacing`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#spacing):
+  - `padding`: `true`
+- [`typography`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#typography):
+  - [`fontSize`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#typography-fontsize): `true`
+  - [`lineHeight`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#typography-lineheight): `true`
+- [`interactivity`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#interactivity):
+  - `clientNavigation`: `true`
+
+## Context
+
+_Defined via the [`usesContext` and `providesContext`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-context/) properties in block.json._
+
+**Uses context:**
+
+- `termId`
+- `taxonomy`
+
+## Block Markup
+
+This is a [**dynamic block**](https://developer.wordpress.org/block-editor/getting-started/fundamentals/static-dynamic-rendering/). It is rendered on the server and does not save HTML in post content.
+
+In post content, it is stored as a block comment:
+
+```html
+<!-- wp:term-name /-->
+```
+
+## Source
+
+- [block.json](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/term-name/block.json) ([reference](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-metadata/))
+- [Source directory](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/term-name/) — browse `edit.js`, `save.js`, `index.php`, and more.
+
+<!-- END TOKEN(Autogenerated block API docs) -->

package/src/term-template/README.md

@@ -0,0 +1,65 @@
+# Term Template
+
+<!-- START TOKEN(Autogenerated block API docs) -->
+Contains the block elements used to render a taxonomy term, like the name, description, and more.
+
+- **Name:** `core/term-template`
+- **Category:** [theme](https://developer.wordpress.org/block-editor/reference-guides/core-blocks/core-blocks-theme/)
+- **API Version:** [3](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-api-versions/)
+- **Block Type:** [Hybrid](https://developer.wordpress.org/block-editor/getting-started/fundamentals/static-dynamic-rendering/) (static save + server enhancements)
+
+## Block Relationships
+
+**[Ancestor](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-metadata/#ancestor) blocks:**
+- [`core/terms-query`](https://developer.wordpress.org/block-editor/reference-guides/core-blocks/core-blocks-theme/core-block-terms-query/)
+
+## Attributes
+
+_Defined via the [`attributes`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-attributes/) property in block.json._
+
+_This block has no custom attributes._
+
+## Supports
+
+_Defined via the [`supports`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/) property in block.json._
+
+- [`anchor`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#anchor): `true`
+- [`reusable`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#reusable): `false`
+- [`html`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#html): `false`
+- [`align`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#align): `"wide"`, `"full"`
+- [`layout`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#layout): `true`
+- [`color`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#color):
+  - [`gradients`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#color-gradients): `true`
+  - [`link`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#color-link): `true`
+- [`typography`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#typography):
+  - [`fontSize`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#typography-fontsize): `true`
+  - [`lineHeight`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#typography-lineheight): `true`
+- [`spacing`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#spacing):
+  - `margin`: `true`
+  - `padding`: `true`
+  - `blockGap`: `{"__experimentalDefault":"1.25em"}`
+- [`interactivity`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#interactivity):
+  - `clientNavigation`: `true`
+
+## Context
+
+_Defined via the [`usesContext` and `providesContext`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-context/) properties in block.json._
+
+**Uses context:**
+
+- `termQuery`
+
+## Block Markup
+
+This is a [**hybrid block**](https://developer.wordpress.org/block-editor/getting-started/fundamentals/static-dynamic-rendering/). It saves static markup that the server may enhance during rendering.
+
+```html
+<!-- wp:term-template /-->
+```
+
+## Source
+
+- [block.json](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/term-template/block.json) ([reference](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-metadata/))
+- [Source directory](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/term-template/) — browse `edit.js`, `save.js`, `index.php`, and more.
+
+<!-- END TOKEN(Autogenerated block API docs) -->

package/src/terms-query/README.md

@@ -0,0 +1,58 @@
+# Terms Query
+
+<!-- START TOKEN(Autogenerated block API docs) -->
+An advanced block that allows displaying taxonomy terms based on different query parameters and visual configurations.
+
+- **Name:** `core/terms-query`
+- **Category:** [theme](https://developer.wordpress.org/block-editor/reference-guides/core-blocks/core-blocks-theme/)
+- **API Version:** [3](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-api-versions/)
+- **Block Type:** [Static](https://developer.wordpress.org/block-editor/getting-started/fundamentals/static-dynamic-rendering/) (saved in post content)
+- **Keywords:** `terms`, `taxonomy`, `categories`, `tags`, `list`
+
+## Attributes
+
+_Defined via the [`attributes`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-attributes/) property in block.json._
+
+| Attribute | [Type](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-attributes/#type-validation) | [Default](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-attributes/#default-value) | Description |
+|-----------|------|---------|-------------|
+| `termQuery` | `object` | `{"perPage":10,"taxonomy":"category","order":"asc","orderBy":"name","include":[],"hideEmpty":true,"showNested":false,"inherit":false}` | — |
+| `tagName` | `string` | `"div"` | — |
+
+## Supports
+
+_Defined via the [`supports`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/) property in block.json._
+
+- [`anchor`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#anchor): `true`
+- [`align`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#align): `"wide"`, `"full"`
+- [`html`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#html): `false`
+- [`layout`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#layout): `true`
+- [`interactivity`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#interactivity): `true`
+
+## Context
+
+_Defined via the [`usesContext` and `providesContext`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-context/) properties in block.json._
+
+**Uses context:**
+
+- `templateSlug`
+
+**Provides context:**
+
+- `termQuery` → attribute `termQuery`
+
+## Block Markup
+
+This is a [**static block**](https://developer.wordpress.org/block-editor/getting-started/fundamentals/static-dynamic-rendering/). The markup is saved directly in the post content.
+
+```html
+<!-- wp:terms-query -->
+<div class="wp-block-terms-query"></div>
+<!-- /wp:terms-query -->
+```
+
+## Source
+
+- [block.json](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/terms-query/block.json) ([reference](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-metadata/))
+- [Source directory](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/terms-query/) — browse `edit.js`, `save.js`, `index.php`, and more.
+
+<!-- END TOKEN(Autogenerated block API docs) -->

package/src/text-columns/README.md

@@ -0,0 +1,51 @@
+# Text Columns (deprecated)
+
+<!-- START TOKEN(Autogenerated block API docs) -->
+<div class="callout callout-alert">This block is <strong>deprecated</strong> and should not be used in new content. Please use the Columns block instead.</div>
+
+- **Name:** `core/text-columns`
+- **Category:** [design](https://developer.wordpress.org/block-editor/reference-guides/core-blocks/core-blocks-design/)
+- **API Version:** [3](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-api-versions/)
+- **Block Type:** [Static](https://developer.wordpress.org/block-editor/getting-started/fundamentals/static-dynamic-rendering/) (saved in post content)
+
+## Attributes
+
+_Defined via the [`attributes`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-attributes/) property in block.json._
+
+| Attribute | [Type](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-attributes/#type-validation) | [Default](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-attributes/#default-value) | Description |
+|-----------|------|---------|-------------|
+| `content` | `array` | `[{},{}]` | [Source](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-attributes/#value-source): `query`. [Selector](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-attributes/#value-source): `p` |
+| `columns` | `number` | `2` | — |
+| `width` | `string` | — | — |
+
+## Supports
+
+_Defined via the [`supports`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/) property in block.json._
+
+- [`inserter`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#inserter): `false`
+- [`interactivity`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#interactivity):
+  - `clientNavigation`: `true`
+
+## Block Markup
+
+This is a [**static block**](https://developer.wordpress.org/block-editor/getting-started/fundamentals/static-dynamic-rendering/). The markup is saved directly in the post content.
+
+```html
+<!-- wp:core/text-columns {"width":"center"} -->
+<div class="wp-block-text-columns aligncenter columns-2">
+    <div class="wp-block-column">
+        <p>One</p>
+    </div>
+    <div class="wp-block-column">
+        <p>Two</p>
+    </div>
+</div>
+<!-- /wp:core/text-columns -->
+```
+
+## Source
+
+- [block.json](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/text-columns/block.json) ([reference](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-metadata/))
+- [Source directory](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/text-columns/) — browse `edit.js`, `save.js`, `index.php`, and more.
+
+<!-- END TOKEN(Autogenerated block API docs) -->

package/src/utils/test/waveform-player.js

@@ -0,0 +1,254 @@
+/**
+ * @jest-environment jsdom
+ */
+
+/**
+ * External dependencies
+ */
+import '@testing-library/jest-dom';
+import { act, render } from '@testing-library/react';
+
+/**
+ * Internal dependencies
+ */
+import { WaveformPlayer } from '../waveform-player';
+import { initWaveformPlayer } from '../waveform-utils';
+
+jest.mock( '../waveform-utils', () => ( {
+	initWaveformPlayer: jest.fn(),
+} ) );
+
+/**
+ * Create a fake player instance that mimics the parts of the waveform
+ * player instance the component manipulates.
+ *
+ * @param {Object}  options Options passed to initWaveformPlayer.
+ * @param {Element} element The element passed to initWaveformPlayer.
+ * @return {Object} The fake player.
+ */
+function createFakePlayer( options, element ) {
+	const titleEl = document.createElement( 'span' );
+	titleEl.textContent = options.title ?? '';
+	// The subtitle and artwork elements only exist when the track had an
+	// artist/image when the player was created, mirroring the library markup.
+	let subtitleEl = null;
+	if ( options.artist ) {
+		subtitleEl = document.createElement( 'span' );
+		subtitleEl.textContent = options.artist;
+	}
+	let artworkEl = null;
+	if ( options.image ) {
+		artworkEl = document.createElement( 'img' );
+		artworkEl.src = options.image;
+	}
+
+	element.append( titleEl );
+	if ( subtitleEl ) {
+		element.append( subtitleEl );
+	}
+	if ( artworkEl ) {
+		element.append( artworkEl );
+	}
+
+	return {
+		instance: { titleEl, subtitleEl, artworkEl },
+		destroy: jest.fn(),
+	};
+}
+
+describe( 'WaveformPlayer', () => {
+	beforeEach( () => {
+		jest.useFakeTimers();
+		initWaveformPlayer.mockImplementation( ( element, options ) =>
+			createFakePlayer( options, element )
+		);
+	} );
+
+	afterEach( () => {
+		jest.runOnlyPendingTimers();
+		jest.useRealTimers();
+		initWaveformPlayer.mockReset();
+	} );
+
+	const baseProps = {
+		src: 'https://example.com/song.mp3',
+		title: 'Original Title',
+		artist: 'Original Artist',
+		image: 'https://example.com/cover.jpg',
+		onEnded: () => {},
+	};
+
+	it( 'initializes the player once with the provided metadata', () => {
+		render( <WaveformPlayer { ...baseProps } /> );
+
+		act( () => {
+			jest.advanceTimersByTime( 100 );
+		} );
+
+		expect( initWaveformPlayer ).toHaveBeenCalledTimes( 1 );
+		expect( initWaveformPlayer ).toHaveBeenCalledWith(
+			expect.anything(),
+			expect.objectContaining( {
+				src: baseProps.src,
+				title: 'Original Title',
+				artist: 'Original Artist',
+				image: 'https://example.com/cover.jpg',
+			} )
+		);
+	} );
+
+	it( 'updates metadata on the live player without recreating it', () => {
+		const { rerender } = render( <WaveformPlayer { ...baseProps } /> );
+
+		act( () => {
+			jest.advanceTimersByTime( 100 );
+		} );
+
+		const player = initWaveformPlayer.mock.results[ 0 ].value;
+
+		rerender(
+			<WaveformPlayer
+				{ ...baseProps }
+				title="New Title"
+				artist="New Artist"
+				image="https://example.com/new.jpg"
+			/>
+		);
+
+		// The player is updated in place, not destroyed and recreated.
+		expect( initWaveformPlayer ).toHaveBeenCalledTimes( 1 );
+		expect( player.destroy ).not.toHaveBeenCalled();
+		expect( player.instance.titleEl ).toHaveTextContent( 'New Title' );
+		expect( player.instance.subtitleEl ).toHaveTextContent( 'New Artist' );
+		expect( player.instance.artworkEl ).toHaveAttribute(
+			'src',
+			'https://example.com/new.jpg'
+		);
+	} );
+
+	it( 'recreates the player when the src changes', () => {
+		const { rerender } = render( <WaveformPlayer { ...baseProps } /> );
+
+		act( () => {
+			jest.advanceTimersByTime( 100 );
+		} );
+
+		const player = initWaveformPlayer.mock.results[ 0 ].value;
+
+		rerender(
+			<WaveformPlayer
+				{ ...baseProps }
+				src="https://example.com/other.mp3"
+			/>
+		);
+
+		act( () => {
+			jest.advanceTimersByTime( 100 );
+		} );
+
+		expect( player.destroy ).toHaveBeenCalledTimes( 1 );
+		expect( initWaveformPlayer ).toHaveBeenCalledTimes( 2 );
+	} );
+
+	it( 'recreates the player to show an image added to a track that had none', () => {
+		const { rerender } = render(
+			<WaveformPlayer { ...baseProps } image="" />
+		);
+
+		act( () => {
+			jest.advanceTimersByTime( 100 );
+		} );
+
+		const firstPlayer = initWaveformPlayer.mock.results[ 0 ].value;
+		// No artwork element exists when the track started without an image.
+		expect( firstPlayer.instance.artworkEl ).toBeNull();
+
+		rerender(
+			<WaveformPlayer
+				{ ...baseProps }
+				image="https://example.com/added.jpg"
+			/>
+		);
+
+		act( () => {
+			jest.advanceTimersByTime( 100 );
+		} );
+
+		expect( firstPlayer.destroy ).toHaveBeenCalledTimes( 1 );
+		expect( initWaveformPlayer ).toHaveBeenCalledTimes( 2 );
+		const secondPlayer = initWaveformPlayer.mock.results[ 1 ].value;
+		expect( secondPlayer.instance.artworkEl ).toHaveAttribute(
+			'src',
+			'https://example.com/added.jpg'
+		);
+	} );
+
+	it( 'recreates the player when the image is removed', () => {
+		const { rerender } = render( <WaveformPlayer { ...baseProps } /> );
+
+		act( () => {
+			jest.advanceTimersByTime( 100 );
+		} );
+
+		const player = initWaveformPlayer.mock.results[ 0 ].value;
+
+		rerender( <WaveformPlayer { ...baseProps } image="" /> );
+
+		act( () => {
+			jest.advanceTimersByTime( 100 );
+		} );
+
+		expect( player.destroy ).toHaveBeenCalledTimes( 1 );
+		expect( initWaveformPlayer ).toHaveBeenCalledTimes( 2 );
+		const secondPlayer = initWaveformPlayer.mock.results[ 1 ].value;
+		expect( secondPlayer.instance.artworkEl ).toBeNull();
+	} );
+
+	it( 'updates the player in place to show an artist added to a track that had none', () => {
+		const { rerender } = render(
+			<WaveformPlayer { ...baseProps } artist="" />
+		);
+
+		act( () => {
+			jest.advanceTimersByTime( 100 );
+		} );
+
+		const firstPlayer = initWaveformPlayer.mock.results[ 0 ].value;
+		// The editor seeds a hidden subtitle element so artist edits can
+		// update in place.
+		expect( firstPlayer.instance.subtitleEl ).toHaveTextContent( '' );
+		expect( firstPlayer.instance.subtitleEl ).toHaveStyle( {
+			display: 'none',
+		} );
+
+		rerender( <WaveformPlayer { ...baseProps } artist="New Artist" /> );
+
+		expect( firstPlayer.destroy ).not.toHaveBeenCalled();
+		expect( initWaveformPlayer ).toHaveBeenCalledTimes( 1 );
+		expect( firstPlayer.instance.subtitleEl ).toHaveTextContent(
+			'New Artist'
+		);
+		expect( firstPlayer.instance.subtitleEl ).not.toHaveStyle( {
+			display: 'none',
+		} );
+	} );
+
+	it( 'updates the player in place when the artist is removed', () => {
+		const { rerender } = render( <WaveformPlayer { ...baseProps } /> );
+
+		act( () => {
+			jest.advanceTimersByTime( 100 );
+		} );
+
+		const player = initWaveformPlayer.mock.results[ 0 ].value;
+
+		rerender( <WaveformPlayer { ...baseProps } artist="" /> );
+
+		expect( player.destroy ).not.toHaveBeenCalled();
+		expect( initWaveformPlayer ).toHaveBeenCalledTimes( 1 );
+		expect( player.instance.subtitleEl ).toHaveTextContent( '' );
+		expect( player.instance.subtitleEl ).toHaveStyle( {
+			display: 'none',
+		} );
+	} );
+} );