manzoorwanijk · Oct 23, 2026 · Oct 16, 2026 · Oct 17, 2026 · Oct 23, 2026 · Oct 23, 2026
diff --git a/packages/e2e-test-utils-playwright/CHANGELOG.md b/packages/e2e-test-utils-playwright/CHANGELOG.md
@@ -2,6 +2,10 @@
 
 ## Unreleased
 
+### Internal
+
+-   Convert the remaining viewport and widget utilities to TypeScript ([#84917](https://github.com/WordPress/gutenberg/pull/84917)).
+
 ## 3.1.0 (2026-10-20)
 
 ## 3.0.0 (2026-10-07)

diff --git a/packages/e2e-test-utils-playwright/src/page-utils/set-browser-viewport.js b/packages/e2e-test-utils-playwright/src/page-utils/set-browser-viewport.js
diff --git a/packages/e2e-test-utils-playwright/src/page-utils/set-browser-viewport.ts b/packages/e2e-test-utils-playwright/src/page-utils/set-browser-viewport.ts
@@ -0,0 +1,29 @@
+import type { PageUtils } from './';
+import type { DimensionsName, Viewport, ViewportDimensions } from './types';
+
+/**
+ * Predefined viewport dimensions to reference by name.
+ */
+const PREDEFINED_DIMENSIONS: Record< DimensionsName, ViewportDimensions > = {
+	large: { width: 960, height: 700 },
+	medium: { width: 768, height: 700 },
+	small: { width: 600, height: 700 },
+};
+
+/**
+ * Sets browser viewport to specified type.
+ *
+ * @param this     - The page utilities instance.
+ * @param viewport - Viewport name or dimensions object to assign.
+ */
+export async function setBrowserViewport(
+	this: PageUtils,
+	viewport: Viewport
+) {
+	const dimensions =
+		typeof viewport === 'string'
+			? PREDEFINED_DIMENSIONS[ viewport ]
+			: viewport;
+
+	await this.page.setViewportSize( dimensions );
+}
diff --git a/packages/e2e-test-utils-playwright/src/page-utils/types.ts b/packages/e2e-test-utils-playwright/src/page-utils/types.ts
@@ -0,0 +1,23 @@
+/**
+ * Named viewport options.
+ */
+export type DimensionsName = 'large' | 'medium' | 'small';
+
+/**
+ * Viewport dimensions object.
+ */
+export type ViewportDimensions = {
+	/**
+	 * Width, in pixels.
+	 */
+	width: number;
+	/**
+	 * Height, in pixels.
+	 */
+	height: number;
+};
+
+/**
+ * Valid argument type from which to derive viewport dimensions.
+ */
+export type Viewport = DimensionsName | ViewportDimensions;
diff --git a/packages/e2e-test-utils-playwright/src/request-utils/types.ts b/packages/e2e-test-utils-playwright/src/request-utils/types.ts
@@ -0,0 +1,14 @@
+/**
+ * Widget REST response fields used by the widget utilities.
+ */
+export interface Widget {
+	id: string;
+}
+
+/**
+ * Sidebar REST response fields used by the widget utilities.
+ */
+export interface Sidebar {
+	id: string;
+	widgets: string[];
+}
diff --git a/...s-playwright/src/request-utils/widgets.js → ...s-playwright/src/request-utils/widgets.ts b/...s-playwright/src/request-utils/widgets.js → ...s-playwright/src/request-utils/widgets.ts
@@ -1,12 +1,13 @@
+import type { RequestUtils } from './index';
+import type { Sidebar, Widget } from './types';
+
 /**
  * Delete all the widgets in the widgets screen.
- *
- * @this {import('./index').RequestUtils}
  */
-export async function deleteAllWidgets() {
+export async function deleteAllWidgets( this: RequestUtils ) {
 	const [ widgets, sidebars ] = await Promise.all( [
-		this.rest( { path: '/wp/v2/widgets' } ),
-		this.rest( { path: '/wp/v2/sidebars' } ),
+		this.rest< Widget[] >( { path: '/wp/v2/widgets' } ),
+		this.rest< Sidebar[] >( { path: '/wp/v2/sidebars' } ),
 	] );
 
 	await this.batchRest(
@@ -31,12 +32,16 @@ export async function deleteAllWidgets() {
 /**
  * Add a widget block to the widget area.
  *
- * @this {import('./index').RequestUtils}
- * @param {string} serializedBlock The serialized content of the inserted block HTML.
- * @param {string} widgetAreaId    The ID of the widget area.
+ * @param this            - The request utilities instance.
+ * @param serializedBlock - The serialized content of the inserted block HTML.
+ * @param widgetAreaId    - The ID of the widget area.
  */
-export async function addWidgetBlock( serializedBlock, widgetAreaId ) {
-	const { id: blockId } = await this.rest( {
+export async function addWidgetBlock(
+	this: RequestUtils,
+	serializedBlock: string,
+	widgetAreaId: string
+) {
+	const { id: blockId } = await this.rest< Widget >( {
 		method: 'POST',
 		path: '/wp/v2/widgets',
 		data: {
@@ -48,7 +53,7 @@ export async function addWidgetBlock( serializedBlock, widgetAreaId ) {
 		},
 	} );
 
-	const { widgets } = await this.rest( {
+	const { widgets } = await this.rest< Sidebar >( {
 		path: `/wp/v2/sidebars/${ widgetAreaId }`,
 	} );
 

diff --git a/packages/e2e-test-utils-playwright/tsconfig.json b/packages/e2e-test-utils-playwright/tsconfig.json
@@ -9,8 +9,6 @@
 		"noEmit": false,
 		"outDir": "build",
 		"sourceMap": true,
-		"emitDeclarationOnly": false,
-		"allowJs": true,
-		"checkJs": false
+		"emitDeclarationOnly": false
 	}
 }
diff --git a/tools/eslint/suppressions.json b/tools/eslint/suppressions.json
@@ -7057,16 +7057,6 @@
 			"count": 1
 		}
 	},
-	"packages/e2e-test-utils-playwright/src/page-utils/set-browser-viewport.js": {
-		"gutenberg/use-typescript": {
-			"count": 1
-		}
-	},
-	"packages/e2e-test-utils-playwright/src/request-utils/widgets.js": {
-		"gutenberg/use-typescript": {
-			"count": 1
-		}
-	},
 	"packages/edit-post/src/components/back-button/fullscreen-mode-close.jsx": {
 		"react/jsx-filename-extension": {
 			"count": 1