From 8e4d22a6a5286dcf42b9d706fa774b6754d867d7 Mon Sep 17 00:00:00 2001 From: Christian Gastrell Date: Wed, 20 May 2026 11:35:32 -0300 Subject: [PATCH 1/2] Base styles: Fix admin-page-layout header selector for admin-ui 2.1 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit @wordpress/admin-ui 2.1.0 (Gutenberg PR WordPress/gutenberg#78001) removed render={
} from the Page header's Stack, so the rendered element changed from
to
. The mixin's > header selectors silently stopped matching and the header was no longer pinned at the top of the flex column. Anchor to > :first-child instead — Page always renders its Header as the first child of the page wrapper, regardless of element type. Forward-compatible with 2.1+ and backward-compatible with 2.0. --- .../js-packages/base-styles/admin-page-layout.scss | 14 ++++++++++---- .../fix-admin-page-layout-header-selector | 4 ++++ 2 files changed, 14 insertions(+), 4 deletions(-) create mode 100644 projects/js-packages/base-styles/changelog/fix-admin-page-layout-header-selector diff --git a/projects/js-packages/base-styles/admin-page-layout.scss b/projects/js-packages/base-styles/admin-page-layout.scss index 5effd6e6bcce..ce60f50150b7 100644 --- a/projects/js-packages/base-styles/admin-page-layout.scss +++ b/projects/js-packages/base-styles/admin-page-layout.scss @@ -206,8 +206,14 @@ $jp-breakpoint-mobile: 782px; // 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 // ; admin-ui forwards it onto the page's outer node. The - // header is a stable `
` element directly inside that node, so - // we anchor to `> header` instead of a class. + // page's
is always rendered as the first child of that node, so + // we anchor structurally to `> :first-child` instead of a class. We used + // to target `> header`, but @wordpress/admin-ui 2.1.0 (Gutenberg PR + // WordPress/gutenberg#78001, "Fix nested landmark in header") removed + // `render={
}` from the page header's Stack so the rendered + // element changed from `
` to `
`. `:first-child` matches + // regardless of element type, keeping us forward-compatible with 2.1+ + // AND backward-compatible with 2.0's `
`. .jp-admin-page__page { flex: 1 1 auto; min-height: 0; @@ -216,7 +222,7 @@ $jp-breakpoint-mobile: 782px; flex-direction: column; } - .jp-admin-page__page > header { + .jp-admin-page__page > :first-child { flex-shrink: 0; // pinned at top of the flex column. } @@ -225,7 +231,7 @@ $jp-breakpoint-mobile: 782px; // strip's own hairline becomes the only divider between header and tab // content. Same `:has()` pattern used elsewhere in this mixin to react // to the page's content shape. - .jp-admin-page__page:has(.jp-admin-page-tabs) > header { + .jp-admin-page__page:has(.jp-admin-page-tabs) > :first-child { border-bottom: none; padding-bottom: 0; } diff --git a/projects/js-packages/base-styles/changelog/fix-admin-page-layout-header-selector b/projects/js-packages/base-styles/changelog/fix-admin-page-layout-header-selector new file mode 100644 index 000000000000..002a7e011c5b --- /dev/null +++ b/projects/js-packages/base-styles/changelog/fix-admin-page-layout-header-selector @@ -0,0 +1,4 @@ +Significance: patch +Type: fixed + +Base styles: Update admin-page-layout mixin's header selector from `> header` to `> :first-child` so it keeps matching after @wordpress/admin-ui 2.1 changed the page header element from `
` to `
`. From fdf4b9c145e8be32be80081898bd2bd144ccc963 Mon Sep 17 00:00:00 2001 From: Christian Gastrell Date: Wed, 20 May 2026 12:19:41 -0300 Subject: [PATCH 2/2] Base styles: extend admin-page-layout `:first-child` fix to the scrollable-middle selector MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Mirrors the selector change in 8e4d22a6 onto the `:not(header)` companion rule. Same upstream cause — admin-ui 2.1 renders the page header as a `
` instead of `
`, so position-based selectors are required to keep the scrollable-middle partition correct. --- projects/js-packages/base-styles/admin-page-layout.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/projects/js-packages/base-styles/admin-page-layout.scss b/projects/js-packages/base-styles/admin-page-layout.scss index ce60f50150b7..22454d7c2c0a 100644 --- a/projects/js-packages/base-styles/admin-page-layout.scss +++ b/projects/js-packages/base-styles/admin-page-layout.scss @@ -259,7 +259,7 @@ $jp-breakpoint-mobile: 782px; // fill their bounded slot. Form-style pages keep working: their // children stay content-sized (default `flex: 0 1 auto`) and any // overflow still falls back to Container's `overflow: auto`. - .jp-admin-page__page > :not(header):not(.jetpack-footer) { + .jp-admin-page__page > :not(:first-child):not(.jetpack-footer) { flex: 1 1 auto; min-height: 0; min-width: 0;