diff --git a/packages/block-library/CHANGELOG.md b/packages/block-library/CHANGELOG.md index 263891b6f4c018..84edcec6fd16e4 100644 --- a/packages/block-library/CHANGELOG.md +++ b/packages/block-library/CHANGELOG.md @@ -18,6 +18,7 @@ ### Bug Fixes - Footnotes: Treat unreadable `footnotes` post meta as no footnotes instead of throwing, so the block shows its placeholder rather than the block crash warning ([#81201](https://github.com/WordPress/gutenberg/pull/81201)). +- Playlist Track: Show the upload loading indicator inline with the track row. - Playlist: Improve handling of declarative waveform player configuration ([#81342](https://github.com/WordPress/gutenberg/pull/81342)). ### Internal diff --git a/packages/block-library/src/playlist-track/edit.js b/packages/block-library/src/playlist-track/edit.js index 5e333bb1147c16..c73e245347be32 100644 --- a/packages/block-library/src/playlist-track/edit.js +++ b/packages/block-library/src/playlist-track/edit.js @@ -251,7 +251,6 @@ const PlaylistTrackEdit = ( {
  • - { !! temporaryURL && } diff --git a/packages/block-library/src/playlist-track/style.scss b/packages/block-library/src/playlist-track/style.scss index 941ab8e4382df3..2be3078a97b2a5 100644 --- a/packages/block-library/src/playlist-track/style.scss +++ b/packages/block-library/src/playlist-track/style.scss @@ -43,6 +43,11 @@ object-fit: cover; } + .wp-block-playlist-track__spinner { + flex: 0 0 auto; + margin: 0; + } + .wp-block-playlist-track__content { flex: 1 1 0; min-width: 0; @@ -60,6 +65,9 @@ } .wp-block-playlist-track__length { + display: flex; + align-items: center; + justify-content: flex-end; margin-left: auto; font-size: 0.85em; opacity: 0.7; diff --git a/packages/block-library/src/playlist-track/test/edit.js b/packages/block-library/src/playlist-track/test/edit.js index 7a4d1dc0f9ecff..e0053bc0a16eaf 100644 --- a/packages/block-library/src/playlist-track/test/edit.js +++ b/packages/block-library/src/playlist-track/test/edit.js @@ -1,4 +1,4 @@ -import { fireEvent, render, screen } from '@testing-library/react'; +import { fireEvent, render, screen, within } from '@testing-library/react'; import { useDispatch } from '@wordpress/data'; import PlaylistTrackEdit from '../edit'; import { PlaylistContext } from '../../playlist/context'; @@ -169,6 +169,7 @@ describe( 'PlaylistTrackEdit', () => { renderEdit( { attributes: { blob: 'blob:https://example.com/temporary-track', + length: undefined, src: undefined, }, } ); @@ -178,6 +179,13 @@ describe( 'PlaylistTrackEdit', () => { url: 'blob:https://example.com/temporary-track', } ) ); + const trackButton = screen.getByRole( 'button', { + name: /Song One/, + } ); + + expect( + within( trackButton ).getByRole( 'presentation', { hidden: true } ) + ).toBeInTheDocument(); } ); it( 'preserves the current track source when a replacement upload fails', () => {