Overhaul playground preview links

Updates for latest query arguments and easier PR previews

Author: sirreal

html-api-debugger/interactivity.php

@@ -177,17 +177,37 @@ class="html-api-debugger-container html-api-debugger--grid"
 				<label>
 					<select id="htmlapi-wp-version">
 						<option value="latest">latest</option>
-						<option value="beta">beta</option>
 						<option value="nightly">nightly</option>
+						<option value="beta">beta</option>
+						<option value="6.7">6.7</option>
+						<option value="6.6">6.6</option>
+						<option value="6.5">6.5</option>
 					</select>
 				</label>
 				<button <?php wp_on_directive( 'click', 'handleCopyClick' ); ?> type="button">Copy shareable playground link</button><br>
 				<label>
-					<code>wordpress/develop</code> PR number:
-					<input type="number" min="1" <?php wp_on_directive( 'input', 'handleCopyPrInput' ); ?>>
+					<code>WordPress/develop</code> PR number:
+					<input type="number" min="1" <?php wp_on_directive( 'input', 'handleCopyCorePrInput' ); ?>>
+				</label>
+				<label>
+					<code>WordPress/gutenberg</code> PR number:
+					<input type="number" min="1" <?php wp_on_directive( 'input', 'handleCopyGbPrInput' ); ?>>
 				</label>
 				<button <?php wp_on_directive( 'click', 'handleCopyPrClick' ); ?>>Copy shareable playground link to PR</button>
-				<button <?php wp_on_directive( 'click', 'handleCheckPrClick' ); ?> data-wp-bind--disabled="state.checkingForPRPlaygroundLink">Check PR</button>
+				<span data-wp-bind--hidden="!state.previewCoreLink">
+					<a
+						data-wp-bind--href="state.previewCoreLink.href"
+						data-wp-text="state.previewCoreLink.text"
+						rel="noopener noreferrer"
+					></a>
+				</span>
+				<span data-wp-bind--hidden="!state.previewGutenbergLink">
+					<a
+						data-wp-bind--href="state.previewGutenbergLink.href"
+						data-wp-text="state.previewGutenbergLink.text"
+						rel="noopener noreferrer"
+					></a>
+				</span>
 			</p>
 			<details>
 				<summary>debug response</summary>

html-api-debugger/readme.txt

@@ -12,6 +12,7 @@ Add a page to wp-admin for debugging the HTML API.
 == Changelog ==
 
 = 1.9 =
+* Update WordPress Playground links to use current query args.
 
 = 1.8 =
 * Highlight spans in HTML input on hover.

html-api-debugger/view.js

@@ -22,6 +22,10 @@ let debounceInputAbortController = null;
 let mutationObserver = null;
 
 /**
+ * @typedef Link
+ * @property {string} href
+ * @property {string} text
+ *
  * @typedef DOM
  * @property {string|undefined} renderingMode
  * @property {string|undefined} doctypeName
@@ -65,7 +69,10 @@ let mutationObserver = null;
  * @property {boolean} showVirtual
  * @property {boolean} quirksMode
  * @property {boolean} fullParser
- * @property {number} previewPrNumber
+ * @property {number|null} previewCorePrNumber
+ * @property {number|null} previewGutenbergPrNumber
+ * @property {Link|null} previewCoreLink
+ * @property {Link|null} previewGutenbergLink
  * @property {boolean} checkingForPRPlaygroundLink
  *
  * @property {'breadcrumbs'|'insertionMode'} hoverInfo
@@ -113,6 +120,31 @@ const store = createStore(NS, {
 		quirksMode: Boolean(localStorage.getItem(`${NS}-quirksMode`)),
 		fullParser: Boolean(localStorage.getItem(`${NS}-fullParser`)),
 
+		previewCorePrNumber: null,
+		previewGutenbergPrNumber: null,
+
+		/** @type {Link|null} */
+		get previewCoreLink() {
+			if (!store.state.previewCorePrNumber) {
+				return null;
+			}
+			return {
+				href: `https://github.com/WordPress/wordpress-develop/pull/${store.state.previewCorePrNumber}`,
+				text: `wordpress-develop #${store.state.previewCorePrNumber}`,
+			};
+		},
+
+		/** @type {Link|null} */
+		get previewGutenbergLink() {
+			if (!store.state.previewGutenbergPrNumber) {
+				return null;
+			}
+			return {
+				href: `https://github.com/WordPress/gutenberg/pull/${store.state.previewGutenbergPrNumber}`,
+				text: `Gutenberg #${store.state.previewGutenbergPrNumber}`,
+			};
+		},
+
 		hoverInfo: /** @type {typeof store.state.hoverInfo} */ (
 			localStorage.getItem(`${NS}-hoverInfo`)
 		),
@@ -516,67 +548,41 @@ const store = createStore(NS, {
 	},
 
 	/** @param {InputEvent} e */
-	handleCopyPrInput(e) {
+	handleCopyCorePrInput(e) {
 		const val = /** @type {HTMLInputElement} */ (e.target).valueAsNumber;
 		if (Number.isFinite(val) && val > 0) {
-			store.state.previewPrNumber = val;
+			store.state.previewCorePrNumber = val;
 			return;
 		}
-		store.state.previewPrNumber = val;
+		store.state.previewCorePrNumber = null;
 	},
 
-	handleCopyPrClick: function* () {
-		const prNumber = store.state.previewPrNumber;
-		const playgroundLink = new URL(store.state.playgroundLink);
-		if (!prNumber) {
-			alert('Please enter a PR number.');
+	/** @param {InputEvent} e */
+	handleCopyGbPrInput(e) {
+		const val = /** @type {HTMLInputElement} */ (e.target).valueAsNumber;
+		if (Number.isFinite(val) && val > 0) {
+			store.state.previewGutenbergPrNumber = val;
 			return;
 		}
-		const url = new URL(
-			'https://playground.wordpress.net/plugin-proxy.php?org=WordPress&repo=wordpress-develop&workflow=Test%20Build%20Processes',
-		);
-		url.searchParams.set('artifact', `wordpress-build-${prNumber}`);
-		url.searchParams.set('pr', prNumber.toString(10));
-
-		try {
-			playgroundLink.searchParams.set('wp', url.href);
-			yield navigator.clipboard.writeText(playgroundLink.href);
-		} catch {
-			alert('Copy failed, make sure the browser window is focused.');
-		}
+		store.state.previewGutenbergPrNumber = null;
 	},
 
-	handleCheckPrClick: function* () {
-		if (store.state.checkingForPRPlaygroundLink) {
-			return;
-		}
+	handleCopyPrClick: function* () {
+		const corePrNumber = store.state.previewCorePrNumber;
+		const gbPrNumber = store.state.previewGutenbergPrNumber;
 
-		const prNumber = store.state.previewPrNumber;
-		if (!prNumber) {
-			alert('Please enter a PR number.');
-			return;
+		const playgroundLink = new URL(store.state.playgroundLink);
+		if (corePrNumber) {
+			playgroundLink.searchParams.set('core-pr', String(corePrNumber));
+		}
+		if (gbPrNumber) {
+			playgroundLink.searchParams.set('gutenberg-pr', String(gbPrNumber));
 		}
 
 		try {
-			store.state.checkingForPRPlaygroundLink = true;
-
-			const url = new URL(
-				'https://playground.wordpress.net/plugin-proxy.php?org=WordPress&repo=wordpress-develop&workflow=Test%20Build%20Processes',
-			);
-			url.searchParams.set('artifact', `wordpress-build-${prNumber}`);
-			url.searchParams.set('pr', prNumber.toString(10));
-			url.searchParams.set('verify_only', 'true');
-			/** @type {Response} */
-			const response = yield fetch(url.href, {
-				method: 'GET',
-			});
-			if (!response.ok) {
-				alert('The PR number is not valid or has not been built yet.');
-				return;
-			}
-			alert('The PR number looks good!');
-		} finally {
-			store.state.checkingForPRPlaygroundLink = false;
+			yield navigator.clipboard.writeText(playgroundLink.href);
+		} catch {
+			alert('Copy failed, make sure the browser window is focused.');
 		}
 	},
 });