Podcast: simplify wp-build wiring per #48557 review

projects/packages/jetpack-mu-wpcom/changelog/arcangelini-podcast-make-it-better

@@ -0,0 +1,5 @@
+Significance: patch
+Type: changed
+Comment: Internal: rename the new Podcast slug to 'podcast' in the Jetpack submenu reorder list; legacy 'podcasting' entry untouched.
+
+

projects/packages/jetpack-mu-wpcom/src/features/wpcom-admin-menu/wpcom-admin-menu.php

@@ -466,7 +466,7 @@ function () {
 			'search',
 			'subscribers',
 			'newsletter',
-			'jetpack-podcast',
+			'podcast',
 			'podcasting',
 			'traffic',
 			'jetpack#/settings',

projects/packages/podcast/changelog/arcangelini-podcast-make-it-better

@@ -0,0 +1,4 @@
+Significance: patch
+Type: changed
+
+Slim down wp-build wiring to the Backup pattern: drop bridge_wp_build_enqueue and fix_boot_import_map_ordering, alias $screen->id via current_screen instead.

projects/packages/podcast/package.json

@@ -27,18 +27,21 @@
 		"extends @wordpress/browserslist-config"
 	],
 	"dependencies": {
-		"@wordpress/components": "32.6.0",
+		"@automattic/jetpack-components": "workspace:*",
 		"@wordpress/element": "6.44.0",
 		"@wordpress/i18n": "6.17.0",
 		"@wordpress/ui": "0.11.0"
 	},
 	"devDependencies": {
+		"@automattic/jetpack-base-styles": "workspace:*",
 		"@automattic/jetpack-wp-build-polyfills": "workspace:*",
 		"@babel/core": "7.29.0",
 		"@babel/runtime": "7.29.2",
 		"@types/react": "18.3.28",
+		"@wordpress/base-styles": "6.20.0",
 		"@wordpress/browserslist-config": "6.44.0",
 		"@wordpress/build": "0.13.0",
+		"@wordpress/theme": "0.11.0",
 		"browserslist": "^4.24.0"
 	},
 	"optionalDependencies": {

projects/packages/podcast/routes/dashboard/package.json

@@ -3,8 +3,8 @@
 	"version": "1.0.0",
 	"private": true,
 	"dependencies": {
+		"@automattic/jetpack-components": "workspace:*",
 		"@types/react": "18.3.28",
-		"@wordpress/components": "32.6.0",
 		"@wordpress/element": "6.44.0",
 		"@wordpress/i18n": "6.17.0",
 		"@wordpress/ui": "0.11.0"

projects/packages/podcast/routes/dashboard/route.scss

@@ -0,0 +1,6 @@
+@use "@automattic/jetpack-base-styles/admin-page-layout" as *;
+
+body.jetpack_page_jetpack-podcast {
+
+	@include jetpack-admin-page-layout;
+}

projects/packages/podcast/routes/dashboard/stage.tsx

@@ -1,14 +1,8 @@
-/**
- * Podcast dashboard stage: page chrome + tab navigation.
- *
- * Placeholder scaffolding only — each tab panel renders a stub. PR 4 in the
- * untangle train wires the full AdminPage + jetpack-components integration
- * along with the real tab contents.
- */
-
+import AdminPage from '@automattic/jetpack-components/admin-page';
 import { useState, useCallback } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { Tabs } from '@wordpress/ui';
+import './route.scss';
 
 const TAB_VALUES = [ 'settings', 'episodes', 'distribution', 'stats' ] as const;
 type TabName = ( typeof TAB_VALUES )[ number ];
@@ -26,19 +20,25 @@ const Stage = () => {
 	}, [] );
 
 	return (
-		<div className="wrap">
-			<h1>Podcast</h1>
-			<p>
-				{ __( 'Publish a podcast and reach your fans, anywhere they listen.', 'jetpack-podcast' ) }
-			</p>
-
-			<Tabs.Root value={ activeTab } onValueChange={ handleTabChange }>
-				<Tabs.List>
-					<Tabs.Tab value="settings">{ __( 'Settings', 'jetpack-podcast' ) }</Tabs.Tab>
-					<Tabs.Tab value="episodes">{ __( 'Episodes', 'jetpack-podcast' ) }</Tabs.Tab>
-					<Tabs.Tab value="distribution">{ __( 'Distribution', 'jetpack-podcast' ) }</Tabs.Tab>
-					<Tabs.Tab value="stats">{ __( 'Stats', 'jetpack-podcast' ) }</Tabs.Tab>
-				</Tabs.List>
+		<Tabs.Root value={ activeTab } onValueChange={ handleTabChange }>
+			<AdminPage
+				/* "Podcast" is a product name, do not translate. */
+				title="Podcast"
+				subTitle={ __(
+					'Publish a podcast and reach your fans, anywhere they listen.',
+					'jetpack-podcast'
+				) }
+				tabs={
+					<div className="jp-admin-page-tabs">
+						<Tabs.List>
+							<Tabs.Tab value="settings">{ __( 'Settings', 'jetpack-podcast' ) }</Tabs.Tab>
+							<Tabs.Tab value="episodes">{ __( 'Episodes', 'jetpack-podcast' ) }</Tabs.Tab>
+							<Tabs.Tab value="distribution">{ __( 'Distribution', 'jetpack-podcast' ) }</Tabs.Tab>
+							<Tabs.Tab value="stats">{ __( 'Stats', 'jetpack-podcast' ) }</Tabs.Tab>
+						</Tabs.List>
+					</div>
+				}
+			>
 				<Tabs.Panel value="settings">
 					<p>{ __( 'Settings — placeholder.', 'jetpack-podcast' ) }</p>
 				</Tabs.Panel>
@@ -51,8 +51,8 @@ const Stage = () => {
 				<Tabs.Panel value="stats">
 					<p>{ __( 'Stats — placeholder.', 'jetpack-podcast' ) }</p>
 				</Tabs.Panel>
-			</Tabs.Root>
-		</div>
+			</AdminPage>
+		</Tabs.Root>
 	);
 };