Components: fix AdminPage SCSS module header selectors for admin-ui 2.1

projects/js-packages/components/changelog/fix-admin-page-scss-header-selectors

@@ -0,0 +1,4 @@
+Significance: patch
+Type: fixed
+
+Components: AdminPage SCSS module — replace `> header` selectors with `> :first-child` so they keep matching after `@wordpress/admin-ui` 2.1 changed the page header element from `<header>` to `<div>`. Mirrors the fix shipped in #49006 for the shared admin-page-layout mixin; together they resolve the publicize page header spacing regression flagged on PR #48404.

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

@@ -15,15 +15,16 @@
 	// https://github.com/WordPress/gutenberg/issues/75428
 
 	// 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) {
+	// <Page>; admin-ui ≥ 2.1.0 renders the header as a `<div>` (was `<header>`
+	// in 2.0). Target it positionally as `> :first-child` so we don't couple
+	// to the element tag or admin-ui's CSS-Modules-hashed class names.
+	&.without-bottom-border :global(.jp-admin-page__page > :first-child) {
 		border-bottom: none;
 	}
 
 	// Disable sticky header until we make it work better across all pages.
 	// JETPACK-1386
-	:global(.jp-admin-page__page > header) {
+	:global(.jp-admin-page__page > :first-child) {
 		position: relative;
 		z-index: 1;
 	}
@@ -34,12 +35,12 @@
 		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.
+	// admin-ui'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"]) {
+	:global(.jp-admin-page__page > :first-child [aria-hidden="true"]) {
 		place-items: center;
 	}
 

projects/js-packages/components/package.json

@@ -89,7 +89,7 @@
 		"@automattic/number-formatters": "workspace:*",
 		"@babel/runtime": "^7",
 		"@gravatar-com/hovercards": "0.16.0",
-		"@wordpress/admin-ui": "2.0.0",
+		"@wordpress/admin-ui": "2.1.0",
 		"@wordpress/browserslist-config": "6.46.0",
 		"@wordpress/components": "33.1.0",
 		"@wordpress/compose": "7.46.0",

projects/plugins/search/changelog/fix-search-e2e-admin-ui-2-1-header-locator

@@ -0,0 +1,3 @@
+Significance: patch
+Type: changed
+Comment: e2e: swap header-logo locator from `header` element to `.jp-admin-page__page > :first-child` for admin-ui 2.1 compatibility. Test-only.

projects/plugins/search/tests/e2e/specs/search-dashboard.test.ts

@@ -62,15 +62,22 @@ test.describe( 'Search Dashboard', () => {
 			await expect( instantSearchToggle, 'Instant search toggle should be visible' ).toBeVisible();
 
 			await expect(
-				// admin-ui 2.0's <Page> wraps the visual slot in an
+				// admin-ui's <Page> wraps the visual slot in an
 				// `aria-hidden="true"` decorative container, so the logo no
 				// longer surfaces in the accessibility tree by role.
 				// `includeHidden: true` keeps the role-based query, and
-				// scoping to `<header>` distinguishes the page logo from the
-				// JetpackFooter logo (which is also aria-hidden + named
-				// "Jetpack Logo"). `toBeVisible()` continues to verify it's
-				// actually painted, not hidden via display/opacity/visibility.
-				page.locator( 'header' ).getByRole( 'img', { name: 'Jetpack Logo', includeHidden: true } ),
+				// scoping to the page wrapper's first child distinguishes the
+				// page logo from the JetpackFooter logo (which is also
+				// aria-hidden + named "Jetpack Logo"). We use the positional
+				// `> :first-child` selector rather than the `<header>` element
+				// tag because admin-ui 2.1 renders the page header as a `<div>`
+				// (see WordPress/gutenberg#78001); `:first-child` matches both
+				// the old `<header>` and the new `<div>`. `toBeVisible()`
+				// continues to verify it's actually painted, not hidden via
+				// display/opacity/visibility.
+				page
+					.locator( '.jp-admin-page__page > :first-child' )
+					.getByRole( 'img', { name: 'Jetpack Logo', includeHidden: true } ),
 				'Jetpack header logo should be visible'
 			).toBeVisible();