@wordpress/block-library 10.1.1-next.v.202607070741.0 → 10.3.0

package/src/template-part/index.php

@@ -150,24 +150,10 @@ function render_block_core_template_part( $attributes ) {
 	}
 
 	// Run through the actions that are typically taken on the_content.
-	$content                       = shortcode_unautop( $content );
-	$content                       = do_shortcode( $content );
-	$seen_ids[ $template_part_id ] = true;
-	$content                       = do_blocks( $content );
-	unset( $seen_ids[ $template_part_id ] );
-	$content = wptexturize( $content );
-	$content = convert_smilies( $content );
-	$content = wp_filter_content_tags( $content, "template_part_{$area}" );
+	$content = _wp_apply_block_content_filters( $content, "template_part_{$area}", $seen_ids, $template_part_id );
 
-	/**
-	 * Handle embeds for block template parts.
-	 *
-	 * @global WP_Embed $wp_embed WordPress Embed object.
-	 */
-	global $wp_embed;
-	$content = $wp_embed->autoembed( $content );
-
-	if ( empty( $attributes['tagName'] ) || tag_escape( $attributes['tagName'] ) !== $attributes['tagName'] ) {
+	$tag_name = $attributes['tagName'] ?? null;
+	if ( empty( $tag_name ) || ! is_string( $tag_name ) || tag_escape( $tag_name ) !== $tag_name ) {
 		$area_tag = 'div';
 		if ( $area_definition && isset( $area_definition['area_tag'] ) ) {
 			$area_tag = $area_definition['area_tag'];

package/src/term-name/README.md

@@ -15,7 +15,6 @@ _Defined via the [`attributes`](https://developer.wordpress.org/block-editor/ref
 
 | 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` | — | — |
@@ -35,6 +34,7 @@ _Defined via the [`supports`](https://developer.wordpress.org/block-editor/refer
 - [`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`
 

package/src/term-name/block.json

@@ -9,9 +9,6 @@
 	"textdomain": "default",
 	"usesContext": [ "termId", "taxonomy" ],
 	"attributes": {
-		"textAlign": {
-			"type": "string"
-		},
 		"level": {
 			"type": "number",
 			"default": 0
@@ -43,6 +40,7 @@
 		"typography": {
 			"fontSize": true,
 			"lineHeight": true,
+			"textAlign": true,
 			"__experimentalFontFamily": true,
 			"__experimentalFontWeight": true,
 			"__experimentalFontStyle": true,

package/src/term-name/deprecated.js

@@ -0,0 +1,74 @@
+/**
+ * Internal dependencies
+ */
+import migrateTextAlign from '../utils/migrate-text-align';
+
+const v1 = {
+	attributes: {
+		textAlign: {
+			type: 'string',
+		},
+		level: {
+			type: 'number',
+			default: 0,
+		},
+		isLink: {
+			type: 'boolean',
+			default: false,
+		},
+		levelOptions: {
+			type: 'array',
+		},
+	},
+	supports: {
+		anchor: true,
+		align: [ 'wide', 'full' ],
+		html: false,
+		color: {
+			gradients: true,
+			link: true,
+			__experimentalDefaultControls: {
+				background: true,
+				text: true,
+				link: true,
+			},
+		},
+		spacing: {
+			padding: true,
+		},
+		typography: {
+			fontSize: true,
+			lineHeight: true,
+			__experimentalFontFamily: true,
+			__experimentalFontWeight: true,
+			__experimentalFontStyle: true,
+			__experimentalTextTransform: true,
+			__experimentalTextDecoration: true,
+			__experimentalLetterSpacing: true,
+			__experimentalDefaultControls: {
+				fontSize: true,
+			},
+		},
+		interactivity: {
+			clientNavigation: true,
+		},
+		__experimentalBorder: {
+			radius: true,
+			color: true,
+			width: true,
+			style: true,
+			__experimentalDefaultControls: {
+				color: true,
+				width: true,
+				style: true,
+			},
+		},
+	},
+	migrate: migrateTextAlign,
+	isEligible( attributes ) {
+		return !! attributes.textAlign;
+	},
+	save: () => null,
+};
+
+export default [ v1 ];

package/src/term-name/edit.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import clsx from 'clsx';
-
 /**
  * WordPress dependencies
  */
@@ -10,7 +5,6 @@ import { __ } from '@wordpress/i18n';
 import {
 	useBlockProps,
 	BlockControls,
-	AlignmentControl,
 	InspectorControls,
 	HeadingLevelDropdown,
 } from '@wordpress/block-editor';
@@ -32,18 +26,14 @@ export default function TermNameEdit( {
 	setAttributes,
 	context: { termId, taxonomy },
 } ) {
-	const { textAlign, level = 0, isLink, levelOptions } = attributes;
+	const { level = 0, isLink, levelOptions } = attributes;
 	const { term } = useTermName( termId, taxonomy );
 
 	const termName = term?.name
 		? decodeEntities( term.name )
 		: __( 'Term Name' );
 
-	const blockProps = useBlockProps( {
-		className: clsx( {
-			[ `has-text-align-${ textAlign }` ]: textAlign,
-		} ),
-	} );
+	const blockProps = useBlockProps();
 
 	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
 
@@ -71,12 +61,6 @@ export default function TermNameEdit( {
 						setAttributes( { level: newLevel } );
 					} }
 				/>
-				<AlignmentControl
-					value={ textAlign }
-					onChange={ ( nextAlign ) => {
-						setAttributes( { textAlign: nextAlign } );
-					} }
-				/>
 			</BlockControls>
 			<InspectorControls>
 				<ToolsPanel

package/src/term-name/index.js

@@ -9,6 +9,7 @@ import { termName as icon } from '@wordpress/icons';
 import initBlock from '../utils/init-block';
 import metadata from './block.json';
 import edit from './edit';
+import deprecated from './deprecated';
 
 const { name } = metadata;
 export { metadata, name };
@@ -17,6 +18,7 @@ export const settings = {
 	icon,
 	example: {},
 	edit,
+	deprecated,
 };
 
 export const init = () => initBlock( { name, metadata, settings } );

package/src/utils/caption.js

@@ -104,10 +104,13 @@ export function Caption( {
 							setAttributes( { [ attributeKey ]: value } )
 						}
 						inlineToolbar
-						__unstableOnSplitAtEnd={ () =>
-							insertBlocksAfter(
-								createBlock( getDefaultBlockName() )
-							)
+						__unstableOnSplitAtEnd={
+							insertBlocksAfter
+								? () =>
+										insertBlocksAfter(
+											createBlock( getDefaultBlockName() )
+										)
+								: undefined
 						}
 						readOnly={ readOnly }
 						{ ...props }

package/src/utils/media-control.scss

@@ -16,7 +16,7 @@
 
 		button.components-button {
 			color: $gray-900;
-			box-shadow: inset 0 0 0 1px $gray-400;
+			border-color: $gray-400;
 			width: 100%;
 			display: block;
 			height: $grid-unit-50;
@@ -25,10 +25,6 @@
 			&:hover {
 				color: var(--wp-admin-theme-color);
 			}
-
-			&:focus {
-				box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
-			}
 		}
 	}
 }

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

@@ -8,10 +8,17 @@ import { act, render } from '@testing-library/react';
  * Internal dependencies
  */
 import { WaveformPlayer } from '../waveform-player';
-import { initWaveformPlayer } from '../waveform-utils';
+import {
+	applyWaveformPlayerStyles,
+	initWaveformPlayer,
+	setupPlayButtonArtwork,
+} from '../waveform-utils';
 
 jest.mock( '../waveform-utils', () => ( {
+	applyWaveformPlayerStyles: jest.fn(),
 	initWaveformPlayer: jest.fn(),
+	setupPlayButtonArtwork: jest.fn(),
+	updateSeekControlLabel: jest.fn(),
 } ) );
 
 /**
@@ -25,29 +32,72 @@ jest.mock( '../waveform-utils', () => ( {
 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;
+	// The artist and artwork elements only exist when the track had an
+	// artist/player artwork when the player was created, mirroring the library markup.
+	let artistEl = null;
 	if ( options.artist ) {
-		subtitleEl = document.createElement( 'span' );
-		subtitleEl.textContent = options.artist;
+		artistEl = document.createElement( 'span' );
+		artistEl.textContent = options.artist;
 	}
 	let artworkEl = null;
-	if ( options.image ) {
+	if ( options.image && ! options.showPlayButtonArtwork ) {
 		artworkEl = document.createElement( 'img' );
 		artworkEl.src = options.image;
+		artworkEl.alt = options.imageAlt || '';
 	}
 
 	element.append( titleEl );
-	if ( subtitleEl ) {
-		element.append( subtitleEl );
+	if ( artistEl ) {
+		element.append( artistEl );
 	}
 	if ( artworkEl ) {
 		element.append( artworkEl );
 	}
 
+	const instance = {
+		titleEl,
+		artistEl: artistEl || null,
+		artworkEl: artworkEl || null,
+		pause: jest.fn(),
+		syncArtist: jest.fn( ( artist ) => {
+			if ( ! artist ) {
+				instance.artistEl?.remove();
+				instance.artistEl = null;
+				return;
+			}
+			if ( ! instance.artistEl ) {
+				instance.artistEl = document.createElement( 'span' );
+				element.append( instance.artistEl );
+			}
+			instance.artistEl.textContent = artist;
+			instance.artistEl.style.display = '';
+		} ),
+		syncArtwork: jest.fn( ( image, imageAlt = '' ) => {
+			if ( ! image ) {
+				instance.artworkEl?.remove();
+				instance.artworkEl = null;
+				return;
+			}
+			if ( ! instance.artworkEl ) {
+				instance.artworkEl = document.createElement( 'img' );
+				element.append( instance.artworkEl );
+			}
+			instance.artworkEl.src = image;
+			instance.artworkEl.alt = imageAlt || '';
+		} ),
+		loadTrack: jest.fn( async ( src, title, artist, trackOptions ) => {
+			titleEl.textContent = title;
+			instance.syncArtist( artist );
+			instance.syncArtwork(
+				trackOptions.artwork,
+				trackOptions.artworkAlt
+			);
+		} ),
+	};
+
 	return {
-		instance: { titleEl, subtitleEl, artworkEl },
+		instance,
+		container: element,
 		destroy: jest.fn(),
 	};
 }
@@ -63,7 +113,9 @@ describe( 'WaveformPlayer', () => {
 	afterEach( () => {
 		jest.runOnlyPendingTimers();
 		jest.useRealTimers();
+		applyWaveformPlayerStyles.mockReset();
 		initWaveformPlayer.mockReset();
+		setupPlayButtonArtwork.mockReset();
 	} );
 
 	const baseProps = {
@@ -71,6 +123,7 @@ describe( 'WaveformPlayer', () => {
 		title: 'Original Title',
 		artist: 'Original Artist',
 		image: 'https://example.com/cover.jpg',
+		imageAlt: 'A bright abstract track image',
 		onEnded: () => {},
 	};
 
@@ -89,10 +142,95 @@ describe( 'WaveformPlayer', () => {
 				title: 'Original Title',
 				artist: 'Original Artist',
 				image: 'https://example.com/cover.jpg',
+				imageAlt: 'A bright abstract track image',
+				showPlayButtonArtwork: false,
 			} )
 		);
 	} );
 
+	it( 'passes the play button artwork option to the shared player', () => {
+		render( <WaveformPlayer { ...baseProps } showPlayButtonArtwork /> );
+
+		act( () => {
+			jest.advanceTimersByTime( 100 );
+		} );
+
+		expect( initWaveformPlayer ).toHaveBeenCalledWith(
+			expect.anything(),
+			expect.objectContaining( {
+				showPlayButtonArtwork: true,
+			} )
+		);
+	} );
+
+	it( 'initializes the player with custom color values', () => {
+		render(
+			<WaveformPlayer
+				{ ...baseProps }
+				color="#ff0000"
+				gradient="linear-gradient(90deg,#ff0000 0%,#0000ff 100%)"
+				backgroundColor="#ffeeaa"
+				backgroundGradient="linear-gradient(90deg,#ffeeaa 0%,#aabbcc 100%)"
+				textColor="#0000ff"
+			/>
+		);
+
+		act( () => {
+			jest.advanceTimersByTime( 100 );
+		} );
+
+		expect( initWaveformPlayer ).toHaveBeenCalledWith(
+			expect.anything(),
+			expect.objectContaining( {
+				waveformColor: '#ff0000',
+				waveformGradient:
+					'linear-gradient(90deg,#ff0000 0%,#0000ff 100%)',
+				backgroundColor: '#ffeeaa',
+				backgroundGradient:
+					'linear-gradient(90deg,#ffeeaa 0%,#aabbcc 100%)',
+				textColor: '#0000ff',
+			} )
+		);
+	} );
+
+	it( 'omits separate player artwork when play button artwork is enabled', () => {
+		render( <WaveformPlayer { ...baseProps } showPlayButtonArtwork /> );
+
+		act( () => {
+			jest.advanceTimersByTime( 100 );
+		} );
+
+		const player = initWaveformPlayer.mock.results[ 0 ].value;
+
+		expect( player.instance.artworkEl ).toBeNull();
+	} );
+
+	it( 'updates play button artwork when artwork metadata changes', () => {
+		const { rerender } = render(
+			<WaveformPlayer { ...baseProps } showPlayButtonArtwork />
+		);
+
+		act( () => {
+			jest.advanceTimersByTime( 100 );
+		} );
+
+		const player = initWaveformPlayer.mock.results[ 0 ].value;
+
+		rerender(
+			<WaveformPlayer
+				{ ...baseProps }
+				image="https://example.com/new.jpg"
+				showPlayButtonArtwork
+			/>
+		);
+
+		expect( setupPlayButtonArtwork ).toHaveBeenCalledWith(
+			player.container,
+			'https://example.com/new.jpg'
+		);
+		expect( player.instance.artworkEl ).toBeNull();
+	} );
+
 	it( 'updates metadata on the live player without recreating it', () => {
 		const { rerender } = render( <WaveformPlayer { ...baseProps } /> );
 
@@ -108,6 +246,7 @@ describe( 'WaveformPlayer', () => {
 				title="New Title"
 				artist="New Artist"
 				image="https://example.com/new.jpg"
+				imageAlt="A black and white portrait"
 			/>
 		);
 
@@ -115,14 +254,18 @@ describe( 'WaveformPlayer', () => {
 		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.artistEl ).toHaveTextContent( 'New Artist' );
 		expect( player.instance.artworkEl ).toHaveAttribute(
 			'src',
 			'https://example.com/new.jpg'
 		);
+		expect( player.instance.artworkEl ).toHaveAttribute(
+			'alt',
+			'A black and white portrait'
+		);
 	} );
 
-	it( 'recreates the player when the src changes', () => {
+	it( 'does not recreate the player when the src changes', () => {
 		const { rerender } = render( <WaveformPlayer { ...baseProps } /> );
 
 		act( () => {
@@ -142,11 +285,141 @@ describe( 'WaveformPlayer', () => {
 			jest.advanceTimersByTime( 100 );
 		} );
 
+		expect( player.destroy ).not.toHaveBeenCalled();
+		expect( initWaveformPlayer ).toHaveBeenCalledTimes( 1 );
+		expect( player.instance.loadTrack ).toHaveBeenCalledWith(
+			'https://example.com/other.mp3',
+			'Original Title',
+			'Original Artist',
+			{
+				artwork: 'https://example.com/cover.jpg',
+				artworkAlt: 'A bright abstract track image',
+			}
+		);
+	} );
+
+	it( 'recreates the player when play button artwork is toggled', () => {
+		const { rerender } = render(
+			<WaveformPlayer { ...baseProps } showPlayButtonArtwork={ false } />
+		);
+
+		act( () => {
+			jest.advanceTimersByTime( 100 );
+		} );
+
+		const player = initWaveformPlayer.mock.results[ 0 ].value;
+
+		rerender( <WaveformPlayer { ...baseProps } showPlayButtonArtwork /> );
+
+		act( () => {
+			jest.advanceTimersByTime( 100 );
+		} );
+
 		expect( player.destroy ).toHaveBeenCalledTimes( 1 );
 		expect( initWaveformPlayer ).toHaveBeenCalledTimes( 2 );
+		expect( initWaveformPlayer.mock.calls[ 1 ][ 1 ] ).toEqual(
+			expect.objectContaining( {
+				showPlayButtonArtwork: true,
+			} )
+		);
+		expect(
+			initWaveformPlayer.mock.results[ 1 ].value.instance.artworkEl
+		).toBeNull();
 	} );
 
-	it( 'recreates the player to show an image added to a track that had none', () => {
+	it( 'recreates the player when the waveform color changes', () => {
+		const { rerender } = render(
+			<WaveformPlayer { ...baseProps } color="#ff0000" />
+		);
+
+		act( () => {
+			jest.advanceTimersByTime( 100 );
+		} );
+
+		const player = initWaveformPlayer.mock.results[ 0 ].value;
+
+		rerender( <WaveformPlayer { ...baseProps } color="#0000ff" /> );
+
+		act( () => {
+			jest.advanceTimersByTime( 100 );
+		} );
+
+		expect( player.destroy ).toHaveBeenCalledTimes( 1 );
+		expect( initWaveformPlayer ).toHaveBeenCalledTimes( 2 );
+		expect( initWaveformPlayer ).toHaveBeenLastCalledWith(
+			expect.anything(),
+			expect.objectContaining( {
+				waveformColor: '#0000ff',
+			} )
+		);
+	} );
+
+	it( 'updates the waveform background color without recreating the player', () => {
+		const { rerender } = render(
+			<WaveformPlayer { ...baseProps } backgroundColor="#ffeeaa" />
+		);
+
+		act( () => {
+			jest.advanceTimersByTime( 100 );
+		} );
+
+		const player = initWaveformPlayer.mock.results[ 0 ].value;
+
+		rerender(
+			<WaveformPlayer { ...baseProps } backgroundColor="#aabbcc" />
+		);
+
+		expect( player.destroy ).not.toHaveBeenCalled();
+		expect( initWaveformPlayer ).toHaveBeenCalledTimes( 1 );
+		expect( applyWaveformPlayerStyles ).toHaveBeenCalledWith(
+			player.container,
+			{
+				backgroundColor: '#aabbcc',
+				backgroundGradient: undefined,
+				playButtonColor: undefined,
+				playButtonGradient: undefined,
+				textColor: undefined,
+			}
+		);
+	} );
+
+	it( 'recreates the player when the waveform gradient changes', () => {
+		const { rerender } = render(
+			<WaveformPlayer
+				{ ...baseProps }
+				gradient="linear-gradient(90deg,#ff0000 0%,#0000ff 100%)"
+			/>
+		);
+
+		act( () => {
+			jest.advanceTimersByTime( 100 );
+		} );
+
+		const player = initWaveformPlayer.mock.results[ 0 ].value;
+
+		rerender(
+			<WaveformPlayer
+				{ ...baseProps }
+				gradient="linear-gradient(90deg,#00ff00 0%,#0000ff 100%)"
+			/>
+		);
+
+		act( () => {
+			jest.advanceTimersByTime( 100 );
+		} );
+
+		expect( player.destroy ).toHaveBeenCalledTimes( 1 );
+		expect( initWaveformPlayer ).toHaveBeenCalledTimes( 2 );
+		expect( initWaveformPlayer ).toHaveBeenLastCalledWith(
+			expect.anything(),
+			expect.objectContaining( {
+				waveformGradient:
+					'linear-gradient(90deg,#00ff00 0%,#0000ff 100%)',
+			} )
+		);
+	} );
+
+	it( 'updates the player in place to show an image added to a track that had none', () => {
 		const { rerender } = render(
 			<WaveformPlayer { ...baseProps } image="" />
 		);
@@ -170,16 +443,15 @@ describe( 'WaveformPlayer', () => {
 			jest.advanceTimersByTime( 100 );
 		} );
 
-		expect( firstPlayer.destroy ).toHaveBeenCalledTimes( 1 );
-		expect( initWaveformPlayer ).toHaveBeenCalledTimes( 2 );
-		const secondPlayer = initWaveformPlayer.mock.results[ 1 ].value;
-		expect( secondPlayer.instance.artworkEl ).toHaveAttribute(
+		expect( firstPlayer.destroy ).not.toHaveBeenCalled();
+		expect( initWaveformPlayer ).toHaveBeenCalledTimes( 1 );
+		expect( firstPlayer.instance.artworkEl ).toHaveAttribute(
 			'src',
 			'https://example.com/added.jpg'
 		);
 	} );
 
-	it( 'recreates the player when the image is removed', () => {
+	it( 'updates the player in place when the image is removed', () => {
 		const { rerender } = render( <WaveformPlayer { ...baseProps } /> );
 
 		act( () => {
@@ -194,10 +466,9 @@ describe( 'WaveformPlayer', () => {
 			jest.advanceTimersByTime( 100 );
 		} );
 
-		expect( player.destroy ).toHaveBeenCalledTimes( 1 );
-		expect( initWaveformPlayer ).toHaveBeenCalledTimes( 2 );
-		const secondPlayer = initWaveformPlayer.mock.results[ 1 ].value;
-		expect( secondPlayer.instance.artworkEl ).toBeNull();
+		expect( player.destroy ).not.toHaveBeenCalled();
+		expect( initWaveformPlayer ).toHaveBeenCalledTimes( 1 );
+		expect( player.instance.artworkEl ).toBeNull();
 	} );
 
 	it( 'updates the player in place to show an artist added to a track that had none', () => {
@@ -210,21 +481,16 @@ describe( 'WaveformPlayer', () => {
 		} );
 
 		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',
-		} );
+		expect( firstPlayer.instance.artistEl ).toBeNull();
 
 		rerender( <WaveformPlayer { ...baseProps } artist="New Artist" /> );
 
 		expect( firstPlayer.destroy ).not.toHaveBeenCalled();
 		expect( initWaveformPlayer ).toHaveBeenCalledTimes( 1 );
-		expect( firstPlayer.instance.subtitleEl ).toHaveTextContent(
+		expect( firstPlayer.instance.artistEl ).toHaveTextContent(
 			'New Artist'
 		);
-		expect( firstPlayer.instance.subtitleEl ).not.toHaveStyle( {
+		expect( firstPlayer.instance.artistEl ).not.toHaveStyle( {
 			display: 'none',
 		} );
 	} );
@@ -242,9 +508,6 @@ describe( 'WaveformPlayer', () => {
 
 		expect( player.destroy ).not.toHaveBeenCalled();
 		expect( initWaveformPlayer ).toHaveBeenCalledTimes( 1 );
-		expect( player.instance.subtitleEl ).toHaveTextContent( '' );
-		expect( player.instance.subtitleEl ).toHaveStyle( {
-			display: 'none',
-		} );
+		expect( player.instance.artistEl ).toBeNull();
 	} );
 } );