Podcast: add episode block (#48546)

* Add Podcast Episode block

* Podcast Episode: split ternary __() calls so i18n extractor can read string literals

* Podcast Episode: post-bound alternate (one source of truth for title/cover/excerpt)

Alternate model that drops the duplicating attributes (title, summary,
description, author, imageId, imageUrl, publishDate) and reads them from
the surrounding post instead.

- block.json: remove title/summary/description/author/imageId/imageUrl/
  publishDate attributes. Block keeps only audio + episode + Podcasting 2.0
  metadata.
- edit.js: useSelect from core/editor reads post title, excerpt, featured
  image, author. Sidebar collapses to three panels (Episode, Audio,
  Podcasting 2.0). Placeholder when block lives outside a post/page.
- podcast-episode.php: render_callback uses get_the_title(),
  get_the_excerpt(), get_the_post_thumbnail_url(), get_the_author(),
  get_the_date(). Guarded by is_singular() so the block stays inert in
  sidebars and template parts.
- save.js: drop title fallback in the noscript link.

Why: previously the block stored its own copy of the post title, featured
image, and excerpt. Authors edit the post, the block goes stale; or they
edit the block, the post stays out of date. RSS, Reader, the block, and
the post page can each show different copy of the same episode.
Substack and every episode-centric platform avoids this by treating the
post as the episode.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

* Podcast Episode: use block context, reuse convertSecondsToTimeCode, restore poster size

- Read post title/excerpt/featured image/author/date via useEntityProp
  with usesContext: ['postId', 'postType', 'queryId']. Same pattern as
  core's post-title/post-excerpt/post-featured-image blocks. Block now
  works inside Query Loops and site-editor singular templates, not just
  the post editor.
- Replace local formatSeconds() with convertSecondsToTimeCode from
  extensions/shared/components/media-player-control/utils.
- Render publish date in editor preview to match the frontend.
- Use medium_large (768px) for the poster image instead of large (1024px);
  the cover renders at 256-512px CSS.
- Hoist person-row inline style to a module const.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

* Podcast Episode: read post via block context, defer mejs lookup, tighten i18n + a11y

- render_block() now accepts \WP_Block and resolves the backing post from
  block context, falling back to the global loop. Drops the is_singular()
  guard so the block works inside Query Loops and feeds, and switches all
  template tags to post-aware variants (get_the_title($post), etc.) so the
  rendered episode matches the loop item, not whatever the global page
  query points at.
- utils.js (extensions/shared/components/media-player-control): wrap the
  mejs.Utils helpers in arrow functions so the lookup happens at call time.
  Reading them at module-evaluation time would throw ReferenceError if the
  importing block evaluates before mediaelement loads on the page.
- Editor: switch concatenated Season/Episode strings to
  sprintf( __( 'Season %d' ) ) so locales that reorder noun/number can
  translate cleanly. Drop `alt={ postTitle }` on the cover-art preview
  (the title is rendered immediately after as h3), use BaseControl
  .VisualLabel for the People section so the label does not point at a
  non-existent input id, gate the placeholder on both postId AND postType,
  and drop the redundant useBlockProps className argument.
- Cover-art alt also dropped on the frontend for the same a11y reason.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

* Podcast Episode: episode cover art override, drop excerpt/GUID UI

Cover art now falls back show -> episode override (Apple/Spotify hierarchy).
Featured image is no longer reused, so themes don't render the same image
twice. Show notes hint replaces the excerpt summary on the player card so
authors write notes once, in post content. GUID UI dropped - RSS layer
derives it from the permalink.

* Podcast Episode: fix CI lint/phpcs/phan/build errors

- Prettier: collapse multi-line help, VisualLabel children, ternary args.
- i18n: move translator comments inside sprintf so the rule reads them.
- i18n: split __() ternary so the extractor sees literal msgids.
- PHPCS: pass JSON encoding flags to wp_json_encode.
- Phan: cast post_author to int for get_the_author_meta.

* Potential fix for pull request finding

Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>

* Potential fix for pull request finding

Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>

* Potential fix for pull request finding

Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>

* Address PR review comments: coverArt guard, TRANSCRIPT_TYPE_OPTIONS i18n, PHPUnit tests

Agent-Logs-Url: https://github.com/Automattic/jetpack/sessions/fb9995d0-fe14-48cb-9045-c12c05d7b263

Co-authored-by: robertbpugh <52668747+robertbpugh@users.noreply.github.com>

* Podcast Episode: use get_block_wrapper_attributes for class+style output

* Podcast Episode: drop get_block_wrapper_attributes, fix PHPCS alignment

get_block_wrapper_attributes() depends on WP_Block_Supports::$block_to_render
state that is null when render_block is invoked directly from PHPUnit, so the
three coverArt-fallback tests crashed with "Trying to access array offset on
value of type null". Switch back to a plain class attribute escaped through
esc_attr(); production output is identical and the PHPCS escaper rule is
satisfied without an ignore comment.

Also fix PHPCS MultipleStatementAlignment warnings on the $original_post /
$GLOBALS['post'] pair in test_no_post_context_returns_empty_string.

* Podcast Episode: use null coalescing for $original_post (Phan)

* Podcast Episode: ship from jetpack-podcast package, gate behind untangle filter

* Podcast Episode: drop inline-data global, get_block_wrapper_attributes, TSX migration

* Podcast Episode: review nits (drop unused const, _x context, echo wrapper attrs)

* Podcast Episode: migrate remaining block utils + icons to TypeScript

* Podcast Episode: refresh wpcomsh composer.lock for new podcast deps

* Podcast Episode: address review feedback + mixed-content fix

- Drop unused mediaSize attribute from block.json, edit.tsx
- Richer author microdata (Schema.org Person with nested name)
- Include explicit flag in meta-line gate (was missing in PHP, matched JSX)
- Remove get_block_wrapper_attributes test-fallback; tests prime WP_Block_Supports::$block_to_render instead
- Add happy-path render tests: title/author/date, video vs audio, trailer/bonus/explicit badges, people list, transcript/chapters/location/license links
- Force admin scheme on the editor script URL to avoid mixed-content blocks on WPCOM sites whose mapped custom domain returns http via home_url()

* Podcast Episode: revert media-player-control hardening

The podcast package keeps the lazy-mejs lookup in its own local util/time-code.ts
copy, so this PR no longer needs to touch the Jetpack plugin's shared util.
Slim the Jetpack changelog to describe only the extensions/index.json
registration.

* Podcast Episode: mark dist/ as production-include in podcast package

Without this flag, jetpack rsync and CI mirror builds were skipping the
package's compiled editor JS (`dist/blocks/podcast-episode/editor.js`)
because dist/ is gitignored. Also production-exclude the source TS/SCSS
since the compiled versions are what ships.

* Podcast Episode: use script_loader_src filter for admin-scheme rewrite

* Refresh composer.lock for jetpack + mu-wpcom-plugin after podcast deps

* mu-wpcom-plugin: add changelog for podcast package bump

* Podcast Episode: add soundbite + alternateEnclosure attrs; slim local util copies

* Podcast Episode: render soundbites at startTime=0 (skip on missing key, not on zero)

* Podcast Episode: ship frontend CSS, inline chapters, cover-art picker refresh

- Split style.scss into its own webpack entry so the block's shared CSS
  ships on the public post page; register the frontend style handle via
  Assets::register_script and hand it to register_block_type via the
  `style` arg.
- Move script_loader_src filter registration into load_editor_scripts so
  it no longer fires on every front-end script load.
- Add is_array($person) guard in the people render loop to match the
  soundbites / alternateEnclosures patterns.
- Replace chaptersUrl (string) with a chapters array of
  { startTime, title } objects; add a ChaptersEditor in the Inspector,
  render an ordered chapter list (sorted by startTime) on the frontend,
  and remove the legacy "View chapters" link.
- Refresh the cover-art picker into a featured-image-style full-width
  clickable preview with Replace / Remove actions and an empty-state
  dashed button.
- Reorganize the Inspector: Audio panel hosts transcript + chapters,
  third panel renames to Metadata.
- Block_Test: construct a real WP_Block in block_ctx() so phan stops
  complaining about \stdClass vs \WP_Block at the render_block call
  sites; add a chapter render test and drop the obsolete chaptersUrl
  assertion.

* Podcast Episode: use schema.org contributor for people (not actor)

---------

Co-authored-by: Tony Arcangelini <tony@arcangelini.com>
Co-authored-by: Claude Opus 4.7 <noreply@anthropic.com>
Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>
Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>

Author: 5 people

pnpm-lock.yaml

@@ -5,13 +5,19 @@ package.json      export-ignore
 
 # Files to include in the mirror repo, but excluded via gitignore
 # Remember to end all directories with `/**` to properly tag every file.
-/build/**         production-include
+/build/**               production-include
+/dist/**                production-include
 
 # Files to exclude from the mirror repo, but included in the monorepo.
 # Remember to end all directories with `/**` to properly tag every file.
-.gitignore        production-exclude
-changelog/**      production-exclude
-.phpcs.dir.xml    production-exclude
-tests/**          production-exclude
-.phpcsignore      production-exclude
-routes/**/*.tsx   production-exclude
+.gitignore              production-exclude
+babel.config.js         production-exclude
+changelog/**            production-exclude
+.phpcs.dir.xml          production-exclude
+tests/**                production-exclude
+.phpcsignore            production-exclude
+routes/**/*.tsx         production-exclude
+webpack.config.blocks.js production-exclude
+/src/blocks/**/*.ts     production-exclude
+/src/blocks/**/*.tsx    production-exclude
+/src/blocks/**/*.scss   production-exclude

projects/packages/podcast/.gitattributes

@@ -2,4 +2,5 @@ vendor/
 node_modules/
 .cache/
 build/
+dist/
 composer.lock

projects/packages/podcast/.gitignore

@@ -0,0 +1,10 @@
+const config = {
+	presets: [
+		[
+			'@automattic/jetpack-webpack-config/babel/preset',
+			{ pluginReplaceTextdomain: { textdomain: 'jetpack-podcast' } },
+		],
+	],
+};
+
+export default config;

projects/packages/podcast/babel.config.js

@@ -0,0 +1,4 @@
+Significance: minor
+Type: added
+
+Add the Podcast Episode block. Embeds a single podcast episode from an audio or video file with Podcasting 2.0 metadata. Registration is gated behind the `jetpack_podcast_untangle` filter (default off).

projects/packages/podcast/changelog/add-podcast-episode-block

@@ -5,6 +5,8 @@
 	"license": "GPL-2.0-or-later",
 	"require": {
 		"php": ">=7.2",
+		"automattic/jetpack-assets": "@dev",
+		"automattic/jetpack-blocks": "@dev",
 		"automattic/jetpack-status": "@dev",
 		"automattic/jetpack-wp-build-polyfills": "@dev"
 	},

projects/packages/podcast/composer.json

@@ -1,3 +1,16 @@
-import { makeBaseConfig } from 'jetpack-js-tools/eslintrc/base.mjs';
+import { defineConfig, makeBaseConfig } from 'jetpack-js-tools/eslintrc/base.mjs';
 
-export default makeBaseConfig( import.meta.url );
+export default defineConfig( makeBaseConfig( import.meta.url ), {
+	// Block-editor sources follow the same conventions as the Jetpack
+	// plugin's `extensions/` directory: inline JSX handlers are common, and
+	// functional React components don't carry JSDoc.
+	files: [ 'src/blocks/**/*.{js,jsx,ts,tsx,mjs,cjs}' ],
+	rules: {
+		'react/jsx-no-bind': 'off',
+		'jsdoc/require-jsdoc': 'off',
+		'jsdoc/require-description': 'off',
+		'jsdoc/require-param-description': 'off',
+		'jsdoc/require-param-type': 'off',
+		'jsdoc/require-returns': 'off',
+	},
+} );

projects/packages/podcast/eslint.config.mjs

@@ -16,38 +16,55 @@
 	"author": "Automattic",
 	"type": "module",
 	"scripts": {
-		"build": "pnpm run clean && pnpm run build:wp-build && pnpm run build:boot-asset",
+		"build": "pnpm run clean && pnpm run build:blocks && pnpm run build:wp-build && pnpm run build:boot-asset",
+		"build:blocks": "webpack --config ./webpack.config.blocks.js",
 		"build:boot-asset": "provide-boot-asset-file",
 		"build:wp-build": "wp-build",
-		"build-production": "pnpm run clean && pnpm run build:wp-build && pnpm run build:boot-asset",
-		"clean": "rm -rf build/",
-		"watch": "wp-build --watch"
+		"build-production": "NODE_ENV=production BABEL_ENV=production pnpm run clean && pnpm run build:blocks && pnpm run build:wp-build && pnpm run build:boot-asset",
+		"clean": "rm -rf build/ dist/ .cache/",
+		"watch": "concurrently 'pnpm:build:blocks --watch' 'pnpm:watch:wp-build'",
+		"watch:wp-build": "wp-build --watch"
 	},
 	"browserslist": [
 		"extends @wordpress/browserslist-config"
 	],
 	"dependencies": {
+		"@automattic/babel-plugin-replace-textdomain": "workspace:*",
 		"@automattic/charts": "workspace:*",
 		"@automattic/jetpack-analytics": "workspace:*",
 		"@automattic/jetpack-components": "workspace:*",
 		"@automattic/jetpack-script-data": "workspace:*",
+		"@automattic/jetpack-shared-extension-utils": "workspace:*",
+		"@automattic/jetpack-webpack-config": "workspace:*",
 		"@automattic/number-formatters": "workspace:*",
 		"@wordpress/api-fetch": "7.44.0",
+		"@wordpress/block-editor": "15.17.0",
+		"@wordpress/blocks": "15.17.0",
 		"@wordpress/components": "32.6.0",
 		"@wordpress/compose": "7.44.0",
 		"@wordpress/core-data": "7.44.0",
 		"@wordpress/data": "10.44.0",
 		"@wordpress/dataviews": "14.1.0",
+		"@wordpress/date": "5.44.0",
+		"@wordpress/dependency-extraction-webpack-plugin": "6.44.0",
 		"@wordpress/element": "6.44.0",
+		"@wordpress/hooks": "4.44.0",
 		"@wordpress/html-entities": "4.44.0",
 		"@wordpress/i18n": "6.17.0",
 		"@wordpress/icons": "12.2.0",
 		"@wordpress/media-utils": "5.44.0",
 		"@wordpress/notices": "5.44.0",
+		"@wordpress/primitives": "4.44.0",
 		"@wordpress/route": "0.10.0",
 		"@wordpress/ui": "0.11.0",
 		"@wordpress/url": "4.44.0",
-		"canvas-confetti": "1.9.4"
+		"canvas-confetti": "1.9.4",
+		"clsx": "2.1.1",
+		"copy-webpack-plugin": "14.0.0",
+		"react": "18.3.1",
+		"react-dom": "18.3.1",
+		"webpack": "5.105.2",
+		"webpack-cli": "6.0.1"
 	},
 	"devDependencies": {
 		"@automattic/jetpack-base-styles": "workspace:*",
@@ -60,11 +77,10 @@
 		"@wordpress/browserslist-config": "6.44.0",
 		"@wordpress/build": "0.13.0",
 		"@wordpress/theme": "0.11.0",
-		"browserslist": "^4.24.0"
-	},
-	"optionalDependencies": {
-		"react": "18.3.1",
-		"react-dom": "18.3.1"
+		"browserslist": "^4.24.0",
+		"concurrently": "9.2.1",
+		"sass-embedded": "1.97.3",
+		"sass-loader": "16.0.5"
 	},
 	"wpPlugin": {
 		"name": "jetpack_podcast",

projects/packages/podcast/package.json

@@ -0,0 +1,112 @@
+{
+	"$schema": "https://schemas.wp.org/trunk/block.json",
+	"apiVersion": 3,
+	"name": "jetpack/podcast-episode",
+	"title": "Podcast Episode",
+	"description": "Embed a single podcast episode from an audio or video file, with Podcasting 2.0 metadata.",
+	"keywords": [ "audio", "podcast", "episode" ],
+	"version": "1.0.0",
+	"textdomain": "jetpack-podcast",
+	"category": "embed",
+	"icon": "<svg viewBox='0 0 24 24' width='24' height='24' xmlns='http://www.w3.org/2000/svg'><path d='M12 2a5 5 0 0 0-5 5v5a5 5 0 0 0 10 0V7a5 5 0 0 0-5-5zm0 2a3 3 0 0 1 3 3v5a3 3 0 0 1-6 0V7a3 3 0 0 1 3-3zm-7 8a1 1 0 0 1 1 1 6 6 0 0 0 12 0 1 1 0 1 1 2 0 8 8 0 0 1-7 7.93V22h3v2H8v-2h3v-1.07A8 8 0 0 1 4 13a1 1 0 0 1 1-1z'/></svg>",
+	"usesContext": [ "postId", "postType", "queryId" ],
+	"supports": {
+		"spacing": {
+			"padding": true,
+			"margin": true
+		},
+		"anchor": true,
+		"customClassName": true,
+		"className": true,
+		"html": false,
+		"multiple": true,
+		"reusable": true
+	},
+	"attributes": {
+		"mediaId": {
+			"type": "integer"
+		},
+		"mediaUrl": {
+			"type": "string"
+		},
+		"mediaType": {
+			"type": "string",
+			"enum": [ "audio", "video" ]
+		},
+		"mediaMimeType": {
+			"type": "string"
+		},
+		"episodeNumber": {
+			"type": "integer"
+		},
+		"seasonNumber": {
+			"type": "integer"
+		},
+		"episodeType": {
+			"type": "string",
+			"enum": [ "full", "trailer", "bonus" ],
+			"default": "full"
+		},
+		"explicit": {
+			"type": "boolean",
+			"default": false
+		},
+		"duration": {
+			"type": "string",
+			"default": ""
+		},
+		"transcriptUrl": {
+			"type": "string",
+			"default": ""
+		},
+		"transcriptType": {
+			"type": "string",
+			"enum": [ "text/vtt", "text/html", "application/srt", "application/json" ],
+			"default": "text/vtt"
+		},
+		"chapters": {
+			"type": "array",
+			"default": []
+		},
+		"locationName": {
+			"type": "string",
+			"default": ""
+		},
+		"license": {
+			"type": "string",
+			"default": ""
+		},
+		"licenseUrl": {
+			"type": "string",
+			"default": ""
+		},
+		"people": {
+			"type": "array",
+			"default": []
+		},
+		"showPoster": {
+			"type": "boolean",
+			"default": true
+		},
+		"coverArt": {
+			"type": "object",
+			"default": {}
+		},
+		"soundbites": {
+			"type": "array",
+			"default": []
+		},
+		"alternateEnclosures": {
+			"type": "array",
+			"default": []
+		}
+	},
+	"example": {
+		"attributes": {
+			"episodeNumber": 1,
+			"seasonNumber": 1,
+			"episodeType": "full",
+			"duration": "11:25"
+		}
+	}
+}