AdminPage: restore layout overrides for @wordpress/admin-ui 2.0.0

.phan/stubs/wpcom-stubs.php

@@ -4,7 +4,7 @@
  * `bin/teamcity-builds/jetpack-stubs/stub-defs.php` and regenerate the stubs
  * by triggering the Jetpack Staging → Update WPCOM Stubs job in TeamCity.
  *
- * Stubs automatically generated from WordPress.com commit b9cdd5655544ee93dbd0e64d835f467279c727e0.
+ * Stubs automatically generated from WordPress.com commit 0079ea4c26d955b4cfca4d3eb035a2ec06f0bd68.
  */
 
 namespace {
@@ -1701,6 +1701,14 @@ function get_blog_subscriptions_aggregate_count(?int $blog_id = null, $post_term
     function is_message_templates_enabled($blog_id = 0)
     {
     }
+    /**
+     * @param \WP_Post $post
+     * @param array<int, array{id?: string, network: string, message?: string, is_social_post?: bool}> $items
+     * @return array<int, array<string, mixed>>
+     */
+    function render_messages_for_networks(\WP_Post $post, array $items): array
+    {
+    }
     /**
      * @param \WP_Post $post
      * @param string $network

projects/js-packages/base-styles/admin-page-layout.scss

@@ -18,8 +18,19 @@
 //   <AdminPage> root:        .jp-admin-page   (added unconditionally by the
 //                                              <AdminPage> component from
 //                                              @automattic/jetpack-components)
-//   @wordpress/admin-ui:     .admin-ui-page, .admin-ui-page__header
+//   admin-ui's <Page>:       .jp-admin-page__page   (className passed through
+//                                                    by <AdminPage>; admin-ui
+//                                                    2.0.0 forwards it onto
+//                                                    the page's outer node)
+//   admin-ui's header:       <header> element rendered by admin-ui's <Page>
+//                            inside `.jp-admin-page__page` (no class hooks —
+//                            we anchor structurally to the HTML5 element)
 //   <JetpackFooter>:         .jetpack-footer
+//   Tabs wrapper convention: .jp-admin-page-tabs   (consumer-applied div that
+//                                                   wraps `@wordpress/ui`
+//                                                   `Tabs.List`; see the
+//                                                   "Tabs strip" section
+//                                                   below)
 
 // Implementation note — `postcss-custom-properties` with `preserve: false`:
 // several consumer packages in this monorepo (publicize, videopress, search,
@@ -172,31 +183,37 @@ $jp-breakpoint-mobile: 782px;
 	}
 
 	// ── admin-ui Page internals ───────────────────────────────────────
-	// admin-ui ships `.admin-ui-page` with `height: 100%`, which fills its
+	// admin-ui ships its page node with `height: 100%`, which fills its
 	// parent's computed height. Paired with our flex chain, the element
 	// becomes a viewport-fitted flex column.
-	.admin-ui-page {
+
+	// admin-ui 2.0.0 moved internals to CSS Modules (no `.admin-ui-page*`
+	// class hooks anymore). We pass `className="jp-admin-page__page"` from
+	// <AdminPage>; admin-ui forwards it onto the page's outer node. The
+	// header is a stable `<header>` element directly inside that node, so
+	// we anchor to `> header` instead of a class.
+	.jp-admin-page__page {
 		flex: 1 1 auto;
 		min-height: 0;
 		min-width: 0;
 		display: flex;
 		flex-direction: column;
 	}
 
-	.admin-ui-page__header {
+	.jp-admin-page__page > header {
 		flex-shrink: 0;              // pinned at top of the flex column.
 	}
 
 	// The scrollable middle. <AdminPage> does not pass `hasPadding` to
-	// admin-ui's <Page>, so `.admin-ui-page__content` is not rendered —
-	// children drop in as direct descendants of `.admin-ui-page`. Target
+	// admin-ui's <Page>, so admin-ui's content wrapper is not rendered —
+	// children drop in as direct descendants of the page node. Target
 	// anything that isn't the header or the footer.
 
 	// `overflow: auto` (both axes) lets any child wider than the column
 	// (dashboard grids with fixed column widths, wide tables, `100vw`
 	// descendants) scroll horizontally inside the middle instead of
 	// dragging the whole window into a horizontal scrollbar.
-	.admin-ui-page > :not(.admin-ui-page__header):not(.jetpack-footer) {
+	.jp-admin-page__page > :not(header):not(.jetpack-footer) {
 		flex: 1 1 auto;
 		min-height: 0;
 		min-width: 0;

projects/js-packages/base-styles/changelog/add-admin-page-tabs-mixin-rules

@@ -0,0 +1,4 @@
+Significance: minor
+Type: added
+
+admin-page-layout mixin: style hooks for `@wordpress/ui` Tabs hosted in an AdminPage (sticky `.jp-admin-page-tabs` wrapper, inline-padding alignment for tab buttons, header bottom-border/padding suppression when tabs are present).

projects/js-packages/base-styles/changelog/admin-page-layout-flex-children

@@ -0,0 +1,4 @@
+Significance: patch
+Type: changed
+
+admin-page-layout mixin: extend the flex chain into AdminPage's outer Container/Col so DataViews-style consumers can fill their bounded slot and let their own internal scroll handle the table body.

projects/js-packages/base-styles/changelog/jetpack-page-layout-admin-ui-2x

@@ -0,0 +1,4 @@
+Significance: patch
+Type: fixed
+
+admin-page-layout mixin: anchor selectors to the new `.jp-admin-page__page` className and the rendered `<header>` element, replacing the `.admin-ui-page*` global classes that admin-ui 2.0.0 dropped when it moved to CSS Modules. Restores the viewport-fitted scroll chain on every consumer (Boost, Protect, VideoPress, Search, Newsletter, Publicize, Backup, Jetpack network admin).

projects/js-packages/components/changelog/add-toggle-control-aria-label

@@ -0,0 +1,4 @@
+Significance: minor
+Type: added
+
+ToggleControl: forward the `aria-label` prop to the underlying checkbox so consumers can label toggles that have no visible label.

projects/js-packages/components/changelog/admin-page-add-unwrapped-prop

@@ -0,0 +1,4 @@
+Significance: minor
+Type: added
+
+AdminPage: add `unwrapped` prop to render children directly inside the admin-ui Page, skipping the default Container/Col grid wrap. Use for full-bleed pages (DataViews-based admin surfaces) that own their own scroll/layout model.

projects/js-packages/components/changelog/jetpack-page-layout-admin-ui-2x

@@ -0,0 +1,4 @@
+Significance: patch
+Type: fixed
+
+AdminPage: pass a stable `jp-admin-page__page` className to admin-ui's Page so layout overrides survive admin-ui 2.0.0's switch to CSS Modules; pin the header heading level to `<h2>` and center the new `visual` slot to keep the Jetpack logo aligned with the title.

projects/js-packages/components/changelog/update-admin-ui

@@ -0,0 +1,4 @@
+Significance: patch
+Type: changed
+
+AdminPage: Update to @wordpress/admin-ui 2.0.0 and use the new `visual` prop to render the Jetpack logo alongside the page title.

projects/js-packages/components/components/admin-page/index.tsx

@@ -1,9 +1,5 @@
 import restApi from '@automattic/jetpack-api';
 import { Page } from '@wordpress/admin-ui';
-import '@wordpress/admin-ui/build-style/style.css';
-import {
-	__experimentalHStack as HStack, // eslint-disable-line @wordpress/no-unsafe-wp-apis
-} from '@wordpress/components';
 import { __, sprintf } from '@wordpress/i18n';
 import clsx from 'clsx';
 import { useEffect, useCallback } from 'react';
@@ -41,6 +37,7 @@ const AdminPage: FC< AdminPageProps > = ( {
 	breadcrumbs,
 	tabs,
 	showBottomBorder = true,
+	unwrapped = false,
 } ) => {
 	useEffect( () => {
 		restApi.setApiRoot( apiRoot );
@@ -73,31 +70,27 @@ const AdminPage: FC< AdminPageProps > = ( {
 		}
 	}, [] );
 
-	// Compose the title with logo for the admin-ui Page header.
-	// Page's Header wraps this in an <h2> tag, so we just pass the content directly.
-	const composedTitle = title ? (
-		<HStack spacing={ 2 } justify="left">
-			{ logo || <JetpackLogo showText={ false } height={ 20 } /> }
-			<span>{ title }</span>
-		</HStack>
-	) : undefined;
-
 	// When title or breadcrumbs are provided, use admin-ui Page for the full page layout.
-	if ( showHeader && ( composedTitle || breadcrumbs ) ) {
+	if ( showHeader && ( title || breadcrumbs ) ) {
 		return (
 			<div className={ rootClassName }>
 				<Page
-					ariaLabel={ title }
+					className="jp-admin-page__page"
+					visual={ logo || <JetpackLogo showText={ false } height={ 20 } /> }
 					breadcrumbs={ breadcrumbs }
-					title={ composedTitle }
+					title={ title }
 					subTitle={ subTitle }
 					actions={ actions }
 					showSidebarToggle={ false }
 				>
 					{ tabs }
-					<Container fluid horizontalSpacing={ 0 }>
-						<Col>{ children }</Col>
-					</Container>
+					{ unwrapped ? (
+						children
+					) : (
+						<Container fluid horizontalSpacing={ 0 }>
+							<Col>{ children }</Col>
+						</Container>
+					) }
 					{ showFooter && <JetpackFooter menu={ optionalMenuItems } /> }
 				</Page>
 			</div>

projects/js-packages/components/components/admin-page/style.module.scss

@@ -13,23 +13,36 @@
 	// or when showBottomBorder is false.
 	// Ideally admin-ui would expose a prop or CSS custom property for this:
 	// https://github.com/WordPress/gutenberg/issues/75428
-	&.without-bottom-border :global(.admin-ui-page__header) {
+
+	// Anchor: `.jp-admin-page__page` is the className we pass to admin-ui's
+	// <Page>; admin-ui 2.0.0 renders the header as a stable <header> element
+	// directly inside that page node — no class hooks anymore.
+	&.without-bottom-border :global(.jp-admin-page__page > header) {
 		border-bottom: none;
 	}
 
 	// Disable sticky header until we make it work better across all pages.
 	// JETPACK-1386
-	:global(.admin-ui-page__header) {
+	:global(.jp-admin-page__page > header) {
 		position: relative;
 		z-index: 1;
 	}
 
 	// Normalize admin headers: implementation of admin-ui needs to
 	// comprehend old wp-admin floating containers, such as Hello Dolly.
-	:global(.admin-ui-page) {
+	:global(.jp-admin-page__page) {
 		clear: both;
 	}
 
+	// admin-ui 2.0.0's header `visual` slot is a 24px grid box but does not
+	// center its contents. Our JetpackLogo is 20px tall, so without this it
+	// pins to the top-left of the cell and looks misaligned vs. the title.
+	// admin-ui ships the slot as `<div aria-hidden="true">` in the header.
+	// TODO: remove once upstream centers contents in `.header-visual`.
+	:global(.jp-admin-page__page > header [aria-hidden="true"]) {
+		place-items: center;
+	}
+
 	.admin-page-header {
 		display: flex;
 		align-items: center;

projects/js-packages/components/components/admin-page/types.ts

@@ -94,4 +94,13 @@ export type AdminPageProps = {
 	 * Hidden when `tabs` is used.
 	 */
 	showBottomBorder?: boolean;
+
+	/**
+	 * Render `children` directly inside the admin-ui Page, skipping the
+	 * default `<Container fluid horizontalSpacing={0}><Col>{children}</Col></Container>`
+	 * wrap. Use for full-bleed pages (DataViews-based admin surfaces, full-app
+	 * dashboards) that own their own scroll/layout model and don't want the
+	 * outer Container's grid to break their flex chain. Defaults to `false`.
+	 */
+	unwrapped?: boolean;
 };

projects/js-packages/components/components/toggle-control/index.tsx

@@ -23,6 +23,9 @@ export interface ToggleControlProps {
 	/** The label for the toggle. */
 	label?: ReactNode;
 
+	/** Accessible name for the underlying checkbox. Use when no visible `label` is rendered. */
+	'aria-label'?: string;
+
 	/** The size of the toggle. */
 	size?: 'small' | 'normal';
 
@@ -37,6 +40,7 @@ const ToggleControl: FC< ToggleControlProps > = ( {
 	help,
 	toggling,
 	label,
+	'aria-label': ariaLabel,
 	size = 'normal',
 	onChange,
 } ) => {
@@ -67,6 +71,7 @@ const ToggleControl: FC< ToggleControlProps > = ( {
 			disabled={ disabled }
 			help={ help }
 			label={ label }
+			aria-label={ ariaLabel }
 			onChange={ handleOnChange }
 		/>
 	);

projects/js-packages/components/package.json

@@ -53,7 +53,7 @@
 		"@automattic/jetpack-script-data": "workspace:*",
 		"@automattic/number-formatters": "workspace:*",
 		"@babel/runtime": "^7",
-		"@wordpress/admin-ui": "1.12.0",
+		"@wordpress/admin-ui": "2.0.0",
 		"@wordpress/browserslist-config": "6.44.0",
 		"@wordpress/components": "32.6.0",
 		"@wordpress/compose": "7.44.0",

projects/js-packages/webpack-config/changelog/update-admin-ui

@@ -0,0 +1,4 @@
+Significance: patch
+Type: changed
+
+Remove the @wordpress/admin-ui CSS bundle workaround from the default request map.

projects/js-packages/webpack-config/src/webpack.js

@@ -115,12 +115,6 @@ const defaultRequestMap = {
 		external: 'JetpackConnection',
 		handle: 'jetpack-connection',
 	},
-	// Bundle admin-ui CSS with our assets. The JS side is already handled by the
-	// DependencyExtractionPlugin's BUNDLED_PACKAGES list, but the CSS subpath import
-	// doesn't match that exact-match check and would be incorrectly externalized.
-	'@wordpress/admin-ui/build-style/style.css': {
-		external: false,
-	},
 };
 
 const DependencyExtractionPlugin = ( { requestMap, ...options } = {} ) => {

projects/packages/activity-log/.gitattributes

@@ -0,0 +1,15 @@
+# Files not needed to be distributed.
+.babelrc         export-ignore
+.gitattributes   export-ignore
+.github/         export-ignore
+.gitignore       export-ignore
+
+# Files not needed in the production build.
+.phpcs.dir.xml   production-exclude
+/changelog/**    production-exclude
+/tests/**        production-exclude
+types.d.ts       production-exclude
+/src/js/**       production-exclude
+
+# Files needed in the production build.
+build/**         production-include

projects/packages/activity-log/.gitignore

@@ -0,0 +1,6 @@
+wordpress
+node_modules
+vendor
+jetpack_vendor
+.cache
+build

projects/packages/activity-log/.phan/config.php

@@ -0,0 +1,13 @@
+<?php
+/**
+ * This configuration will be read and overlaid on top of the
+ * default configuration. Command-line arguments will be applied
+ * after this file is read.
+ *
+ * @package automattic/jetpack-activity-log
+ */
+
+// Require base config.
+require __DIR__ . '/../../../../.phan/config.base.php';
+
+return make_phan_config( dirname( __DIR__ ) );

projects/packages/activity-log/.phpcs.dir.xml

@@ -0,0 +1,24 @@
+<?xml version="1.0"?>
+<ruleset>
+
+	<rule ref="WordPress.WP.I18n">
+		<properties>
+			<property name="text_domain" type="array">
+				<element value="jetpack-activity-log" />
+			</property>
+		</properties>
+	</rule>
+	<rule ref="Jetpack.Functions.I18n">
+		<properties>
+			<property name="text_domain" value="jetpack-activity-log" />
+		</properties>
+	</rule>
+
+	<rule ref="WordPress.Utils.I18nTextDomainFixer">
+		<properties>
+			<property name="old_text_domain" type="array" />
+			<property name="new_text_domain" value="jetpack-activity-log" />
+		</properties>
+	</rule>
+
+</ruleset>

projects/packages/activity-log/AGENTS.md

@@ -0,0 +1,33 @@
+# Activity Log
+
+## UI primitives
+
+When adding React UI in this package, prefer the WordPress Design System
+packages in this order:
+
+1. **`@wordpress/ui`** — foundational primitives. Check each component's
+   Storybook "Status" badge (anything other than "stable" is still in
+   flux); avoid experimental APIs here.
+2. **`@wordpress/components`** — general-purpose legacy library.
+   Predates the design system. Use only when `@wordpress/ui` doesn't
+   have a stable equivalent, and still check Status in Storybook.
+3. **`@wordpress/dataviews`** — higher-level data presentation (tables,
+   lists, grids). Already the backbone here. Extend via its
+   sub-components (`DataViews.Search`, `DataViews.FiltersToggle`,
+   `DataViews.Layout`, `DataViews.Footer`) before reaching for lower-
+   level primitives.
+4. **`@wordpress/admin-ui`** — page layout primitives, accessed via
+   `AdminPage` from `@automattic/jetpack-components` (which wraps
+   admin-ui's `Page`).
+
+Rationale: WordPress is moving new work to `@wordpress/ui`;
+`@wordpress/components` is being kept as a legacy fallback. Guidance
+from the WordPress Design System P2 (April 2026).
+
+## Design-system lookup
+
+A dedicated MCP server is wired into this project's local Claude Code
+config: `@wordpress/design-system-mcp`. It exposes the authoritative
+list of stable `@wordpress/ui` + `@wordpress/components` components and
+`--wpds-*` design tokens. Prefer querying it over spelunking through
+`node_modules/@wordpress/components/src/**` for component metadata.

projects/packages/activity-log/CHANGELOG.md

@@ -0,0 +1,10 @@
+# Changelog
+
+All notable changes to this project will be documented in this file.
+
+The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
+and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+
+## 0.1.0-alpha - unreleased
+
+Initial release.