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. The changes here are built atop some general tidying/refactoring of how audio player components work in #16339.

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 29514 of `dotcom:rendering-all` to CODE

All deployment options

From guardian/actions-riff-raff.

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

Deploy build 2342 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?

Merging into MainMedia makes sense imo, the video play is handled there for video pages, right?

Yeah I'm with you - have had a stab in 01e8d98.

Edit: I get the impression there's a deeper discussion to be had about where best to house the audio player (something else handled by renderElement perhaps) though I'd argue that discussion and any subsequent changes are beyond the scope of this pull request and warrant their own

Yeah I'm with you - have had a stab in 01e8d98.

Edit: I get the impression there's a deeper discussion to be had about where best to house the audio player (something else handled by renderElement perhaps) though I'd argue that discussion and any subsequent changes are beyond the scope of this pull request and warrant their own

Right that's nicer already! But to expand on what Jamie said I think the AudioPlayer could be added here https://github.com/guardian/dotcom-rendering/blob/main/dotcom-rendering/src/lib/renderElement.tsx#L992, to let renderElement handle it and remove the separate handling for it altogether.

Very well. I've had a stab at it in 2dae763 and broken out the change into its own PR here as it feels like a separate (though complimentary) refactor to this grid business: #16456

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?

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

@copilot please rebase this PR and resolve conflicts

gu-prout · 2026-07-28T13:38:40Z

Seen on PROD (merged by @frederickobrien 12 minutes and 41 seconds ago) Please check your changes!

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

frederickobrien force-pushed the move-audio-layout-to-grid branch from c067d5e to 78b4938 Compare July 24, 2026 15:18

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

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

frederickobrien mentioned this pull request Jul 24, 2026

Handle AudioPlayer inside renderElement #16456

Merged

frederickobrien force-pushed the move-audio-layout-to-grid branch 2 times, most recently from d8133d0 to e49a970 Compare July 28, 2026 09:27

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

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

frederickobrien requested review from Jakeii and JamieB-gu July 28, 2026 11:31

Jakeii approved these changes Jul 28, 2026

View reviewed changes

frederickobrien added 8 commits July 28, 2026 14:04

Move AudioLayout to grid

1ed0c03

Create AudioPlayer component

7cc83c5

Review edits

87a6b30

Tidy up audio player components

b016ffc

Move AudioPlayer inside MainMedia

50314e7

Make isApps required prop for MainMedia

59847b9

Have renderElement handle AudioPlayer

40da4ed

Remove redundant ArticleDesign.Audio switch case

ad4d486

frederickobrien force-pushed the move-audio-layout-to-grid branch from 0af5484 to ad4d486 Compare July 28, 2026 13:04

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

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

frederickobrien added this pull request to the merge queue Jul 28, 2026

Merged via the queue into main with commit fe1edc3 Jul 28, 2026
31 checks passed

frederickobrien deleted the move-audio-layout-to-grid branch July 28, 2026 13:26

gu-prout Bot added Pending-on-PROD Seen-on-PROD and removed Pending-on-PROD labels Jul 28, 2026

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!

Deploy build 29514 of dotcom:rendering-all to CODE

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!

Deploy build 2342 of dotcom:ab-testing to CODE

Uh oh!

github-actions Bot commented Jun 23, 2026

Uh oh!

frederickobrien Jun 28, 2026

Choose a reason for hiding this comment

Uh oh!

JamieB-gu Jul 7, 2026

Choose a reason for hiding this comment

Uh oh!

Jakeii Jul 24, 2026

Choose a reason for hiding this comment

Uh oh!

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

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Jakeii Jul 24, 2026

Choose a reason for hiding this comment

Uh oh!

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

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

JamieB-gu Jul 7, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

frederickobrien commented Jul 7, 2026

Uh oh!

Uh oh!

gu-prout Bot commented Jul 28, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

frederickobrien commented Jun 11, 2026 •

edited

Loading

github-actions Bot commented Jun 11, 2026 •

edited

Loading

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

github-actions Bot commented Jun 23, 2026 •

edited

Loading

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

frederickobrien Jul 24, 2026 •

edited

Loading

frederickobrien Jul 24, 2026 •

edited

Loading