Move AudioLayout to grid by frederickobrien · Pull Request #16133 · guardian/dotcom-rendering

frederickobrien · 2026-06-11T16:57:57Z

Following on from #15428 and #16119, this absorbs AudioLayout into the grid system. I've extracted the audio player into its own component to keep things tidy.

Open question: I started implementing it but thought it was worth asking the question. Why is the body wider for video articles than for audio ones? This only occurs at the wide breakpoint and to my mind seems needless. If we align their appearance both can be quite happily accommodated by the media grid layout.

Why?

Less code, fewer headaches, reduced existential dread.

Screenshots

Before	After

github-actions · 2026-06-11T17:07:14Z

Deploy build 28809 of `dotcom:rendering-all` to CODE

All deployment options

From guardian/actions-riff-raff.

github-actions · 2026-06-23T13:33:22Z

Deploy build 2083 of `dotcom:ab-testing` to CODE

All deployment options

From guardian/actions-riff-raff.

github-actions · 2026-06-23T13:46:07Z

Hello 👋! When you're ready to run Chromatic, please apply the run_chromatic label to this PR.

You will need to reapply the label each time you want to run Chromatic.

Click here to see the Chromatic project.

frederickobrien · 2026-06-28T20:44:05Z

-									ArticleDisplay[format.display]
-								}Layout`}
-							/>
+							{audioData ? (


Alternatively this fork could (should?) happen inside <MainMedia /> as the audio player here is just a different type of main media. As far as I can tell it's not used anywhere else.

I think that will ultimately mean the AudioBlockElement gets handled in renderElement along with most other kinds of element? Perhaps then we won't need the separate audio-data.ts file?

One caveat is that renderElement will also get used for body elements. I don't know if @oliverabrahams is aware of a reason we wanted to avoid this when implementing audio articles?

JamieB-gu · 2026-07-07T12:12:53Z

-									ArticleDisplay[format.display]
-								}Layout`}
-							/>
+							{audioData ? (


I think that will ultimately mean the AudioBlockElement gets handled in renderElement along with most other kinds of element? Perhaps then we won't need the separate audio-data.ts file?

One caveat is that renderElement will also get used for body elements. I don't know if @oliverabrahams is aware of a reason we wanted to avoid this when implementing audio articles?

JamieB-gu · 2026-07-07T12:28:18Z

+import { AudioPlayerWrapper } from './AudioPlayerWrapper.island';
+import { formatAudioDuration } from './ListenToArticle.island';
+
+export const AudioPlayer = ({


If I've understood this correctly, the component hierarchy now looks like this?

AudioPlayer.tsx AppsAudioPlayer.island.tsx (the apps version) AudioPlayerWrapper.island.tsx (the web version) AudioPlayer/AudioPlayer.tsx

Could this be considered a little confusing, and can we simplify it? I'm happy to discuss approaches if helpful.

Yeah fair shout. I've changed the top level one so it now essentially flows like this:

DecideAudioPlayer.tsx AppsAudioPlayer.island.tsx (the apps version) AudioPlayerWrapper.island.tsx (the web version) AudioPlayer/AudioPlayer.tsx

Beyond that I'm very happy to have a go at simplifying though I'd argue that opportunity predates this pull request and probably warrants its own, separate one?

I think prior to this change the apps/web components could have been refactored a bit, but this PR adds an additional wrapper component into the mix? But yeah, a separate PR sounds reasonable!

Ah what the hell, I've given it a go in 78810ec. With those changes the flow becomes:

AudioPlayer.tsx AudioPlayerApps.island.tsx (the apps version) AudioPlayerWeb.island.tsx (the web version)

Much tidier!

Happy to to move out into a separate PR if this one's starting to feel a bit involved but that's the crux of the change.

I've spun up a standalone PR with those changes to keep things tidy: #16339

frederickobrien · 2026-07-07T14:52:57Z

@copilot please rebase this PR and resolve conflicts

Copilot · 2026-07-07T15:03:30Z

@copilot please rebase this PR and resolve conflicts

I rebased and resolved the conflicts locally at 01d136b, but I couldn't publish the rewritten branch through the available push tool because it won't force-push a rebased PR branch and its fallback rebase against origin/move-audio-layout-to-grid hit conflicts. The local result is clean and validated; this branch needs a manual force-push (or equivalent) to update the PR.

frederickobrien self-assigned this Jun 11, 2026

frederickobrien added the maintenance Departmental tracking: maintenance work, not a fix or a feature label Jun 11, 2026

frederickobrien added this to the Interactives milestone Jun 11, 2026

frederickobrien force-pushed the move-audio-layout-to-grid branch from d8a8ce0 to 7ab3d37 Compare June 11, 2026 17:01

frederickobrien force-pushed the move-audio-layout-to-grid branch from bb701eb to 33da9a8 Compare June 23, 2026 13:30

frederickobrien marked this pull request as ready for review June 23, 2026 13:45

frederickobrien added the run_chromatic Runs chromatic when label is applied label Jun 23, 2026

github-actions Bot removed the run_chromatic Runs chromatic when label is applied label Jun 23, 2026

frederickobrien requested a review from a team June 23, 2026 16:05

frederickobrien mentioned this pull request Jun 24, 2026

Move PictureLayout to grid #16251

Open

frederickobrien force-pushed the move-audio-layout-to-grid branch from 44275d5 to 93243d7 Compare June 28, 2026 19:58

frederickobrien commented Jun 28, 2026

View reviewed changes

frederickobrien mentioned this pull request Jun 28, 2026

Use grid module for StandardLayout #15428

Merged

frederickobrien force-pushed the move-audio-layout-to-grid branch 2 times, most recently from 0bc3a39 to 76e769a Compare June 30, 2026 09:47

frederickobrien added the run_chromatic Runs chromatic when label is applied label Jun 30, 2026

github-actions Bot removed the run_chromatic Runs chromatic when label is applied label Jun 30, 2026

frederickobrien mentioned this pull request Jun 30, 2026

Move standard article grid into its own component #16300

Merged

frederickobrien force-pushed the move-audio-layout-to-grid branch 2 times, most recently from 961b98a to 546b54a Compare July 3, 2026 09:14

JamieB-gu reviewed Jul 7, 2026

View reviewed changes

frederickobrien force-pushed the move-audio-layout-to-grid branch from a1a3536 to b63fee8 Compare July 7, 2026 13:55

frederickobrien added the run_chromatic Runs chromatic when label is applied label Jul 7, 2026

frederickobrien force-pushed the move-audio-layout-to-grid branch 3 times, most recently from 60f41d3 to 1add331 Compare July 7, 2026 14:09

Copilot started work on behalf of frederickobrien July 7, 2026 14:53 View session

Copilot finished work on behalf of frederickobrien July 7, 2026 15:04

frederickobrien added 5 commits July 7, 2026 16:29

Move AudioLayout to grid

64bd4b9

Create AudioPlayer component

9fa7809

Review edits

1edc6a7

Tidy up audio player components

a2c6ceb

Rebase tidying

e027f30

frederickobrien force-pushed the move-audio-layout-to-grid branch from 78810ec to a2c6ceb Compare July 7, 2026 15:32

github-actions Bot removed the run_chromatic Runs chromatic when label is applied label Jul 7, 2026

frederickobrien mentioned this pull request Jul 7, 2026

Audio player tidying #16339

Open

Uh oh!

Conversation

frederickobrien commented Jun 11, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Why?

Screenshots

Uh oh!

github-actions Bot commented Jun 11, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions Bot commented Jun 23, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions Bot commented Jun 23, 2026

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

frederickobrien commented Jul 7, 2026

Uh oh!

Copilot AI commented Jul 7, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

frederickobrien commented Jun 11, 2026 •

edited

Loading

github-actions Bot commented Jun 11, 2026 •

edited

Loading

github-actions Bot commented Jun 23, 2026 •

edited

Loading