diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 67f10f6ba2b9..b49c5622440f 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -558,8 +558,8 @@ importers: specifier: 0.16.0 version: 0.16.0 '@wordpress/admin-ui': - specifier: 2.0.0 - version: 2.0.0(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + specifier: 2.1.0 + version: 2.1.0(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) '@wordpress/browserslist-config': specifier: 6.46.0 version: 6.46.0 diff --git a/projects/js-packages/components/changelog/fix-admin-page-scss-header-selectors b/projects/js-packages/components/changelog/fix-admin-page-scss-header-selectors new file mode 100644 index 000000000000..19d855a61996 --- /dev/null +++ b/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 `
` to `
`. 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. diff --git a/projects/js-packages/components/components/admin-page/style.module.scss b/projects/js-packages/components/components/admin-page/style.module.scss index 0a58c92e8e5b..7e5b731b3c21 100644 --- a/projects/js-packages/components/components/admin-page/style.module.scss +++ b/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 - // ; admin-ui 2.0.0 renders the header as a stable
element - // directly inside that page node — no class hooks anymore. - &.without-bottom-border :global(.jp-admin-page__page > header) { + // ; admin-ui ≥ 2.1.0 renders the header as a `
` (was `
` + // 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 `