From e2cf08d8ad65f2c6e83dab6a087186fbf248940c Mon Sep 17 00:00:00 2001 From: Mikael Korpela Date: Thu, 30 Apr 2026 14:29:45 +0300 Subject: [PATCH 1/9] Update admin-ui package and use visual prop for Jetpack logo --- pnpm-lock.yaml | 238 +++++++++++++++++- .../components/admin-page/index.tsx | 19 +- projects/js-packages/components/package.json | 2 +- .../js-packages/webpack-config/src/webpack.js | 6 - projects/packages/forms/package.json | 2 +- .../packages/forms/routes/forms/package.json | 2 +- .../packages/forms/routes/forms/stage.tsx | 4 +- .../forms/routes/responses/package.json | 2 +- .../packages/forms/routes/responses/stage.tsx | 2 + projects/packages/forms/routes/shared.scss | 1 - .../src/dashboard/components/layout/index.tsx | 1 - .../hooks/use-page-header-details.tsx | 32 +-- .../forms/tools/webpack.config.dashboard.js | 10 - .../forms/tools/webpack.config.form-editor.js | 9 - .../packages/wp-build-polyfills/package.json | 2 +- 15 files changed, 255 insertions(+), 77 deletions(-) diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index bd08d9459f7c..4900e8ab7424 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: 1.12.0 - version: 1.12.0(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + 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) '@wordpress/browserslist-config': specifier: 6.44.0 version: 6.44.0 @@ -2538,8 +2538,8 @@ importers: specifier: 1.0.1 version: 1.0.1 '@wordpress/admin-ui': - specifier: 1.12.0 - version: 1.12.0(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + 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) '@wordpress/base-styles': specifier: 6.20.0 version: 6.20.0 @@ -4637,8 +4637,8 @@ importers: specifier: ^4.40.0 version: 4.44.0 '@wordpress/admin-ui': - specifier: ^1.9.0 - version: 1.12.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + specifier: 2.0.0 + version: 2.0.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1) '@wordpress/boot': specifier: ^0.11.0 version: 0.11.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1) @@ -10635,6 +10635,12 @@ packages: peerDependencies: react: ^18.0.0 + '@wordpress/admin-ui@2.0.0': + resolution: {integrity: sha512-ZX6qExEPkdVzkv8gSsfU1NJU9EXdNbWCaPfck1Qo2bMcJWhb1n4zoITkfT+zAPqj3N/Fd2q8a8NOYxh2e/7fDw==} + engines: {node: '>=18.12.0', npm: '>=8.19.2'} + peerDependencies: + react: ^18.0.0 + '@wordpress/annotations@3.44.0': resolution: {integrity: sha512-0ie+k+sdIMu+HjTevXNR9Y+5rOtOkjKkV0w7VovU7wVvxRlg4dBQclnpww0QMivuhJNoFFvwym+3NjBn+N/JsA==} engines: {node: '>=18.12.0', npm: '>=8.19.2'} @@ -10667,6 +10673,10 @@ packages: resolution: {integrity: sha512-Dsug4Zxz2xOFtK6CGThKYXwCqC9Yztw2STKQzwztrX4yW+o6iDbzkxpcwdDhsaVJs0Jt9A4LmJpZPh+pUozzLA==} engines: {node: '>=18.12.0', npm: '>=8.19.2'} + '@wordpress/base-styles@7.0.0': + resolution: {integrity: sha512-Q0BbZzfeYbQZKHnyNT4RF8RGVugN5jStGtpRKhBYQW7ut7sS61LbbpP7jR0D0sDPYoEEC8jKZQSZwSM23B4jow==} + engines: {node: '>=18.12.0', npm: '>=8.19.2'} + '@wordpress/blob@4.44.0': resolution: {integrity: sha512-MR5neg3nI4VNo7Oyd6XB0mh0AfWBuAkrQPSymQHayBQ1DEng8ZBo0EpuRV+f+Bf7yVW1KEmG+o9X1qg2gvTu6Q==} engines: {node: '>=18.12.0', npm: '>=8.19.2'} @@ -10743,6 +10753,13 @@ packages: react: ^18.0.0 react-dom: ^18.0.0 + '@wordpress/components@33.0.0': + resolution: {integrity: sha512-VeLDtfz8612bdRqgQiSMtIIEGDi4ZByj0XUvjT7E6RVLgczQyV9DTpGOPyL6PbTyAluIx6hjt9bzsaC+bM6G+w==} + engines: {node: '>=18.12.0', npm: '>=8.19.2'} + peerDependencies: + react: ^18.0.0 + react-dom: ^18.0.0 + '@wordpress/compose@7.44.0': resolution: {integrity: sha512-NlMSR+sqEkHppjUM3irJhB0PLaWYoAgWFa7BL6xb94ciWxr4C5CIB0pSCXW8B0WNBPgS7q/xCeJGKGSfLkBgIQ==} engines: {node: '>=18.12.0', npm: '>=8.19.2'} @@ -10774,6 +10791,12 @@ packages: peerDependencies: react: ^18.0.0 + '@wordpress/data@10.45.0': + resolution: {integrity: sha512-OR/uMpcEbCh1aBkbzateXffNrL829M+N92qtuD+Gt08Mey129WIEVR9kBC2Tf02VtXs644OKZD6cz77KlxH8XA==} + engines: {node: '>=18.12.0', npm: '>=8.19.2'} + peerDependencies: + react: ^18.0.0 + '@wordpress/dataviews@14.1.0': resolution: {integrity: sha512-RDnCbbgNEcTJiLscqn7pN0r9toEI3Pt3L2mvLHrMjMYR8aqdouYwPldM96Sa4j+DZLf+122hQ7wBvYwyn9C4Kw==} engines: {node: '>=18.12.0', npm: '>=8.19.2'} @@ -10784,6 +10807,10 @@ packages: resolution: {integrity: sha512-8TUnhQKqjnMyQij1dQgVtpiJ5luRueCgu9iXGUwfoYfS6YmTS8u7lACVxn+LtWwGuJNSeZS4Dghsq5DgeW6sUQ==} engines: {node: '>=18.12.0', npm: '>=8.19.2'} + '@wordpress/date@5.45.0': + resolution: {integrity: sha512-34v3hCxn68kYzWs8bhuAt8cfMxdFX9ukKn3a3FB+tAJXpxafnPCcZoWfJHn4I8hepCbreFrf3UiGdA+id2kQ4A==} + engines: {node: '>=18.12.0', npm: '>=8.19.2'} + '@wordpress/dependency-extraction-webpack-plugin@6.44.0': resolution: {integrity: sha512-bc6PfIUW//FxDu7DOuUoq2/oIQL2u8U33oDArFukTmyzf1fBWSIYKc2rpD3t3JMaWmnoiorlKgDpaFXfI6dCuA==} engines: {node: '>=18.12.0', npm: '>=8.19.2'} @@ -10916,6 +10943,10 @@ packages: resolution: {integrity: sha512-Vejleo4VvES7Ec4qX6p74DL8M6P15p0Law9+A8Wp4Vu8wg4TLtTNZE4Hfet1YoXwY9t6czty+KGISZpEG3Y7RA==} engines: {node: '>=18.12.0', npm: '>=8.19.2'} + '@wordpress/html-entities@4.45.0': + resolution: {integrity: sha512-7W95xaOv4UgMSWlEmyO7YkBsUae3QlQu3GKENVH7Pt/osbJGSPInAJ1ruO4oeUwGPygWOL7b7IzRsgTNP0M/Wg==} + engines: {node: '>=18.12.0', npm: '>=8.19.2'} + '@wordpress/i18n@6.17.0': resolution: {integrity: sha512-v1SLBweg7CRzQ+5+WSC1U93i8h9d3AoB0YBvMsd6gWI5vO8Zh4YKlEMexvrHQC++WN83egwqux84fWEdeU0MUA==} engines: {node: '>=18.12.0', npm: '>=8.19.2'} @@ -11091,6 +11122,12 @@ packages: peerDependencies: redux: '>=4' + '@wordpress/redux-routine@5.45.0': + resolution: {integrity: sha512-6ShpBns4jIBFXrYFBcKA5pnFm/kjr1SqFvLj5DwLgMV61eI3Rr9LyZwIzNR2BGg067ryxu4W172Uqjke/mZjcQ==} + engines: {node: '>=18.12.0', npm: '>=8.19.2'} + peerDependencies: + redux: '>=4' + '@wordpress/reusable-blocks@5.44.0': resolution: {integrity: sha512-9dpae0P0sZiCjsJz9Zk+MhjHIllURzD3e72XLzjnRh0r/tmoQt1OJKUyAfDZCM1YS7SgvMkTPlpCgiB+M9c3jw==} engines: {node: '>=18.12.0', npm: '>=8.19.2'} @@ -11104,12 +11141,24 @@ packages: peerDependencies: react: ^18.0.0 + '@wordpress/rich-text@7.45.0': + resolution: {integrity: sha512-C5+JQqNzA3fiQq0hN9pQPKsjcwO/fczouHqubq3847kAUrClROqqI1GJHE34WLl1Vp+/tWQuBkIjQ/95olKteA==} + engines: {node: '>=18.12.0', npm: '>=8.19.2'} + peerDependencies: + react: ^18.0.0 + '@wordpress/route@0.10.0': resolution: {integrity: sha512-rNXo4cq+yPlkFzC/bQjZW8qQpaNgh1nAeUVefc4Si079C79pC0JhnXKqPOq4Iy28oJZyRjfdLdFV1FdLhHfmzA==} engines: {node: '>=18.12.0', npm: '>=8.19.2'} peerDependencies: react: ^18.0.0 + '@wordpress/route@0.11.0': + resolution: {integrity: sha512-3P02OKhI6yTlxHo1mLg8l8QNGsKi+e63ICP0KkaMZl5aMumfjzpZr9/fH0+uyuRdS5m2uu3BVMVa0J4QG6gMyg==} + engines: {node: '>=18.12.0', npm: '>=8.19.2'} + peerDependencies: + react: ^18.0.0 + '@wordpress/router@1.44.0': resolution: {integrity: sha512-o7ksSoxHMhX+hHyTSHbJtr4jJep7fuwNU0jRwfmGTLNGWb8m1/wB7l+WcP/KNwcM/jomi2aa/ggsm9bT+yAypw==} engines: {node: '>=18.12.0', npm: '>=8.19.2'} @@ -18443,7 +18492,7 @@ snapshots: '@wordpress/primitives': 4.44.0(react@18.3.1) '@wordpress/react-i18n': 4.43.0 '@wordpress/url': 4.44.0 - '@wordpress/warning': 3.44.0 + '@wordpress/warning': 3.45.0 canvas-confetti: 1.9.4 clsx: 2.1.1 colord: 2.9.3 @@ -18482,7 +18531,7 @@ snapshots: '@wordpress/api-fetch': 7.44.0 '@wordpress/data': 10.44.0(react@18.3.1) '@wordpress/data-controls': 4.44.0(react@18.3.1) - '@wordpress/deprecated': 4.44.0 + '@wordpress/deprecated': 4.45.0 '@wordpress/element': 6.44.0 '@wordpress/i18n': 6.17.0 '@wordpress/primitives': 4.44.0(react@18.3.1) @@ -23564,6 +23613,40 @@ snapshots: - stylelint - supports-color + '@wordpress/admin-ui@2.0.0(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': + dependencies: + '@wordpress/components': 33.0.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + '@wordpress/element': 6.45.0 + '@wordpress/i18n': 6.18.0 + '@wordpress/private-apis': 1.45.0 + '@wordpress/route': 0.11.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + '@wordpress/ui': 0.12.0(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + clsx: 2.1.1 + react: 18.3.1 + transitivePeerDependencies: + - '@emotion/is-prop-valid' + - '@types/react' + - react-dom + - stylelint + - supports-color + + '@wordpress/admin-ui@2.0.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': + dependencies: + '@wordpress/components': 33.0.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + '@wordpress/element': 6.45.0 + '@wordpress/i18n': 6.18.0 + '@wordpress/private-apis': 1.45.0 + '@wordpress/route': 0.11.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + '@wordpress/ui': 0.12.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + clsx: 2.1.1 + react: 18.3.1 + transitivePeerDependencies: + - '@emotion/is-prop-valid' + - '@types/react' + - react-dom + - stylelint + - supports-color + '@wordpress/annotations@3.44.0(react@18.3.1)': dependencies: '@wordpress/data': 10.44.0(react@18.3.1) @@ -23604,6 +23687,8 @@ snapshots: '@wordpress/base-styles@6.20.0': {} + '@wordpress/base-styles@7.0.0': {} + '@wordpress/blob@4.44.0': {} '@wordpress/block-editor@15.17.0(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': @@ -24288,6 +24373,63 @@ snapshots: - '@emotion/is-prop-valid' - supports-color + '@wordpress/components@33.0.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': + dependencies: + '@ariakit/react': 0.4.25(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + '@date-fns/utc': 2.1.1 + '@emotion/cache': 11.14.0 + '@emotion/css': 11.13.5 + '@emotion/react': 11.14.0(@types/react@18.3.28)(react@18.3.1) + '@emotion/serialize': 1.3.3 + '@emotion/styled': 11.14.1(@emotion/react@11.14.0(@types/react@18.3.28)(react@18.3.1))(@types/react@18.3.28)(react@18.3.1) + '@emotion/utils': 1.4.2 + '@floating-ui/react-dom': 2.0.8(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + '@types/gradient-parser': 1.1.0 + '@types/highlight-words-core': 1.2.1 + '@types/react': 18.3.28 + '@use-gesture/react': 10.3.1(react@18.3.1) + '@wordpress/a11y': 4.45.0 + '@wordpress/base-styles': 7.0.0 + '@wordpress/compose': 7.45.0(react@18.3.1) + '@wordpress/date': 5.45.0 + '@wordpress/deprecated': 4.45.0 + '@wordpress/dom': 4.45.0 + '@wordpress/element': 6.45.0 + '@wordpress/escape-html': 3.45.0 + '@wordpress/hooks': 4.45.0 + '@wordpress/html-entities': 4.45.0 + '@wordpress/i18n': 6.18.0 + '@wordpress/icons': 13.0.0(react@18.3.1) + '@wordpress/is-shallow-equal': 5.45.0 + '@wordpress/keycodes': 4.45.0 + '@wordpress/primitives': 4.45.0(react@18.3.1) + '@wordpress/private-apis': 1.45.0 + '@wordpress/rich-text': 7.45.0(react@18.3.1) + '@wordpress/warning': 3.45.0 + change-case: 4.1.2 + clsx: 2.1.1 + colord: 2.9.3 + csstype: 3.2.3 + date-fns: 3.6.0 + deepmerge: 4.3.1 + fast-deep-equal: 3.1.3 + framer-motion: 11.18.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + gradient-parser: 1.1.1 + highlight-words-core: 1.2.3 + is-plain-object: 5.0.0 + memize: 2.1.1 + path-to-regexp: 6.3.0 + re-resizable: 6.11.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + react: 18.3.1 + react-colorful: 5.6.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + react-day-picker: 9.14.0(react@18.3.1) + react-dom: 18.3.1(react@18.3.1) + remove-accents: 0.5.0 + uuid: 9.0.1(patch_hash=87a713b75995ed86c0ecd0cadfd1b9f85092ca16fdff7132ff98b62fc3cf2db0) + transitivePeerDependencies: + - '@emotion/is-prop-valid' + - supports-color + '@wordpress/compose@7.44.0(react@18.3.1)': dependencies: '@types/mousetrap': 1.6.15 @@ -24439,6 +24581,24 @@ snapshots: rememo: 4.0.2 use-memo-one: 1.1.3(react@18.3.1) + '@wordpress/data@10.45.0(react@18.3.1)': + dependencies: + '@wordpress/compose': 7.45.0(react@18.3.1) + '@wordpress/deprecated': 4.45.0 + '@wordpress/element': 6.45.0 + '@wordpress/is-shallow-equal': 5.45.0 + '@wordpress/priority-queue': 3.45.0 + '@wordpress/private-apis': 1.45.0 + '@wordpress/redux-routine': 5.45.0(redux@5.0.1) + deepmerge: 4.3.1 + equivalent-key-map: 0.2.2 + is-plain-object: 5.0.0 + is-promise: 4.0.0 + react: 18.3.1 + redux: 5.0.1 + rememo: 4.0.2 + use-memo-one: 1.1.3(react@18.3.1) + '@wordpress/dataviews@14.1.0(@types/react@18.3.28)(react@18.3.1)': dependencies: '@ariakit/react': 0.4.25(react-dom@18.3.1(react@18.3.1))(react@18.3.1) @@ -24547,6 +24707,12 @@ snapshots: moment: 2.30.1 moment-timezone: 0.5.48 + '@wordpress/date@5.45.0': + dependencies: + '@wordpress/deprecated': 4.45.0 + moment: 2.30.1 + moment-timezone: 0.5.48 + '@wordpress/dependency-extraction-webpack-plugin@6.44.0(webpack@5.105.2)': dependencies: json2php: 0.0.7 @@ -25232,6 +25398,8 @@ snapshots: '@wordpress/html-entities@4.44.0': {} + '@wordpress/html-entities@4.45.0': {} + '@wordpress/i18n@6.17.0': dependencies: '@tannin/sprintf': 1.3.3 @@ -25766,6 +25934,13 @@ snapshots: redux: 5.0.1 rungen: 0.3.2 + '@wordpress/redux-routine@5.45.0(redux@5.0.1)': + dependencies: + is-plain-object: 5.0.0 + is-promise: 4.0.0 + redux: 5.0.1 + rungen: 0.3.2 + '@wordpress/reusable-blocks@5.44.0(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': dependencies: '@wordpress/base-styles': 6.20.0 @@ -25851,6 +26026,22 @@ snapshots: memize: 2.1.1 react: 18.3.1 + '@wordpress/rich-text@7.45.0(react@18.3.1)': + dependencies: + '@wordpress/a11y': 4.45.0 + '@wordpress/compose': 7.45.0(react@18.3.1) + '@wordpress/data': 10.45.0(react@18.3.1) + '@wordpress/deprecated': 4.45.0 + '@wordpress/dom': 4.45.0 + '@wordpress/element': 6.45.0 + '@wordpress/escape-html': 3.45.0 + '@wordpress/i18n': 6.18.0 + '@wordpress/keycodes': 4.45.0 + '@wordpress/private-apis': 1.45.0 + colord: 2.9.3 + memize: 2.1.1 + react: 18.3.1 + '@wordpress/route@0.10.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': dependencies: '@tanstack/history': 1.161.5 @@ -25860,6 +26051,15 @@ snapshots: transitivePeerDependencies: - react-dom + '@wordpress/route@0.11.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': + dependencies: + '@tanstack/history': 1.161.5 + '@tanstack/react-router': 1.167.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + '@wordpress/private-apis': 1.45.0 + react: 18.3.1 + transitivePeerDependencies: + - react-dom + '@wordpress/router@1.44.0(react@18.3.1)': dependencies: '@wordpress/compose': 7.44.0(react@18.3.1) @@ -26006,6 +26206,28 @@ snapshots: - '@types/react' - stylelint + '@wordpress/ui@0.12.0(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': + dependencies: + '@base-ui/react': 1.4.1(@date-fns/tz@1.4.1)(@types/react@18.3.28)(date-fns@4.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + '@date-fns/tz': 1.4.1 + '@wordpress/a11y': 4.45.0 + '@wordpress/compose': 7.45.0(react@18.3.1) + '@wordpress/element': 6.45.0 + '@wordpress/i18n': 6.18.0 + '@wordpress/icons': 13.0.0(react@18.3.1) + '@wordpress/keycodes': 4.45.0 + '@wordpress/primitives': 4.45.0(react@18.3.1) + '@wordpress/private-apis': 1.45.0 + '@wordpress/theme': 0.12.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + clsx: 2.1.1 + date-fns: 4.1.0 + react: 18.3.1 + react-dom: 18.3.1(react@18.3.1) + tabbable: 6.4.0 + transitivePeerDependencies: + - '@types/react' + - stylelint + '@wordpress/ui@0.12.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': dependencies: '@base-ui/react': 1.4.1(@date-fns/tz@1.4.1)(date-fns@4.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) diff --git a/projects/js-packages/components/components/admin-page/index.tsx b/projects/js-packages/components/components/admin-page/index.tsx index 17d5b7bef26f..e4204be86b9f 100644 --- a/projects/js-packages/components/components/admin-page/index.tsx +++ b/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'; @@ -74,23 +70,14 @@ const AdminPage: FC< AdminPageProps > = ( { } }, [] ); - // Compose the title with logo for the admin-ui Page header. - // Page's Header wraps this in an

tag, so we just pass the content directly. - const composedTitle = title ? ( - - { logo || } - { title } - - ) : 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 (
} breadcrumbs={ breadcrumbs } - title={ composedTitle } + title={ title } subTitle={ subTitle } actions={ actions } showSidebarToggle={ false } diff --git a/projects/js-packages/components/package.json b/projects/js-packages/components/package.json index 49e6c08fb960..7aba8ee8fb66 100644 --- a/projects/js-packages/components/package.json +++ b/projects/js-packages/components/package.json @@ -69,7 +69,7 @@ "@automattic/number-formatters": "workspace:*", "@babel/runtime": "^7", "@gravatar-com/hovercards": "0.16.0", - "@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", diff --git a/projects/js-packages/webpack-config/src/webpack.js b/projects/js-packages/webpack-config/src/webpack.js index c5f14d501b74..c47b89ae36b8 100644 --- a/projects/js-packages/webpack-config/src/webpack.js +++ b/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 } = {} ) => { diff --git a/projects/packages/forms/package.json b/projects/packages/forms/package.json index 59e080869f56..a5d17c973bac 100644 --- a/projects/packages/forms/package.json +++ b/projects/packages/forms/package.json @@ -50,7 +50,7 @@ "@automattic/jetpack-shared-extension-utils": "workspace:*", "@automattic/number-formatters": "workspace:*", "@automattic/request-external-access": "1.0.1", - "@wordpress/admin-ui": "1.12.0", + "@wordpress/admin-ui": "2.0.0", "@wordpress/base-styles": "6.20.0", "@wordpress/block-editor": "15.17.0", "@wordpress/blocks": "15.17.0", diff --git a/projects/packages/forms/routes/forms/package.json b/projects/packages/forms/routes/forms/package.json index 2276566b04cb..cbd3c12380d6 100644 --- a/projects/packages/forms/routes/forms/package.json +++ b/projects/packages/forms/routes/forms/package.json @@ -7,7 +7,7 @@ "@automattic/jetpack-components": "workspace:*", "@automattic/number-formatters": "workspace:*", "@types/react": "18.3.28", - "@wordpress/admin-ui": "1.12.0", + "@wordpress/admin-ui": "2.0.0", "@wordpress/api-fetch": "7.44.0", "@wordpress/components": "32.6.0", "@wordpress/core-data": "7.44.0", diff --git a/projects/packages/forms/routes/forms/stage.tsx b/projects/packages/forms/routes/forms/stage.tsx index 5f9c3c265549..4d5972334689 100644 --- a/projects/packages/forms/routes/forms/stage.tsx +++ b/projects/packages/forms/routes/forms/stage.tsx @@ -569,7 +569,7 @@ function StageInner() { const { title, - ariaLabel, + visual, breadcrumbs, subtitle, actions: headerActions, @@ -595,9 +595,9 @@ function StageInner() { return ( =1.120.5 <1.121.0", "@types/react": "18.3.28", - "@wordpress/admin-ui": "1.12.0", + "@wordpress/admin-ui": "2.0.0", "@wordpress/api-fetch": "7.44.0", "@wordpress/block-editor": "15.17.0", "@wordpress/blocks": "15.17.0", diff --git a/projects/packages/forms/routes/responses/stage.tsx b/projects/packages/forms/routes/responses/stage.tsx index 90acb7f98c84..60c48bcb348c 100644 --- a/projects/packages/forms/routes/responses/stage.tsx +++ b/projects/packages/forms/routes/responses/stage.tsx @@ -660,6 +660,7 @@ function StageInner() { badges, subtitle, title, + visual, actions: headerActions, } = usePageHeaderDetails( { screen: 'responses', @@ -682,6 +683,7 @@ function StageInner() { return ( { const location = useLocation(); diff --git a/projects/packages/forms/src/dashboard/wp-build/hooks/use-page-header-details.tsx b/projects/packages/forms/src/dashboard/wp-build/hooks/use-page-header-details.tsx index 78e38885ea56..8377eb34c051 100644 --- a/projects/packages/forms/src/dashboard/wp-build/hooks/use-page-header-details.tsx +++ b/projects/packages/forms/src/dashboard/wp-build/hooks/use-page-header-details.tsx @@ -18,7 +18,7 @@ import { __, sprintf } from '@wordpress/i18n'; import { moreVertical } from '@wordpress/icons'; import { store as noticesStore } from '@wordpress/notices'; import { useNavigate } from '@wordpress/route'; -import { Badge, Stack } from '@wordpress/ui'; +import { Badge } from '@wordpress/ui'; /** * Internal dependencies */ @@ -62,7 +62,8 @@ type UsePageHeaderDetailsProps = { type UsePageHeaderDetailsReturn = { ariaLabel: string; breadcrumbs: ReactNode; - title?: ReactNode; + title?: string; + visual: ReactNode; badges?: ReactNode; subtitle: ReactNode; actions?: ReactNode; @@ -458,12 +459,7 @@ export default function usePageHeaderDetails( trackAction, ] ); - const WrapWithJetpackLogo = ( { children }: { children: ReactNode } ) => ( - - - { children } - - ); + const visual = ; const ariaLabel = useMemo( () => { if ( isSingleFormScreen ) { @@ -475,10 +471,10 @@ export default function usePageHeaderDetails( const title = useMemo( () => { if ( isSingleFormScreen ) { - return null; + return undefined; } // "Forms" is a product name, do not translate. - return Forms; + return 'Forms'; }, [ isSingleFormScreen ] ); const breadcrumbs = useMemo( () => { @@ -487,14 +483,12 @@ export default function usePageHeaderDetails( } return ( - - - + ); }, [ isSingleFormScreen, formTitle ] ); @@ -884,5 +878,5 @@ export default function usePageHeaderDetails( trackExportClickResponsesList, ] ); - return { ariaLabel, breadcrumbs, title, badges, subtitle, actions }; + return { ariaLabel, breadcrumbs, title, visual, badges, subtitle, actions }; } diff --git a/projects/packages/forms/tools/webpack.config.dashboard.js b/projects/packages/forms/tools/webpack.config.dashboard.js index 19381b548cee..ac3a1715f6d1 100644 --- a/projects/packages/forms/tools/webpack.config.dashboard.js +++ b/projects/packages/forms/tools/webpack.config.dashboard.js @@ -26,15 +26,6 @@ export default { alias: { ...jetpackWebpackConfig.resolve.alias, fs: false, - '@wordpress/admin-ui/build-style/style.css': path.join( - __dirname, - '..', - 'node_modules', - '@wordpress', - 'admin-ui', - 'build-style', - 'style.css' - ), }, }, externals: { @@ -94,7 +85,6 @@ export default { requestMap: { // Bundle the package with our assets until WP core exposes wp-admin-ui. '@wordpress/admin-ui': { external: false }, - '@wordpress/admin-ui/build-style/style.css': { external: false }, // Bundle jetpack-connection since it's used by IntegrationsModal '@automattic/jetpack-connection': { external: false }, }, diff --git a/projects/packages/forms/tools/webpack.config.form-editor.js b/projects/packages/forms/tools/webpack.config.form-editor.js index 3af1e78d3585..44ec89f3001f 100644 --- a/projects/packages/forms/tools/webpack.config.form-editor.js +++ b/projects/packages/forms/tools/webpack.config.form-editor.js @@ -25,15 +25,6 @@ export default { alias: { ...jetpackWebpackConfig.resolve.alias, fs: false, - '@wordpress/admin-ui/build-style/style.css': path.join( - __dirname, - '..', - 'node_modules', - '@wordpress', - 'admin-ui', - 'build-style', - 'style.css' - ), }, }, externals: { diff --git a/projects/packages/wp-build-polyfills/package.json b/projects/packages/wp-build-polyfills/package.json index 205dac1a57dd..d01734841623 100644 --- a/projects/packages/wp-build-polyfills/package.json +++ b/projects/packages/wp-build-polyfills/package.json @@ -23,7 +23,7 @@ "devDependencies": { "@automattic/jetpack-webpack-config": "workspace:*", "@wordpress/a11y": "^4.40.0", - "@wordpress/admin-ui": "^1.9.0", + "@wordpress/admin-ui": "2.0.0", "@wordpress/boot": "^0.11.0", "@wordpress/icons": "^12.0.0", "@wordpress/lazy-editor": "^1.6.1", From d74ade9de953da9528e7f7794eab2d9ff52e4d52 Mon Sep 17 00:00:00 2001 From: Mikael Korpela Date: Thu, 30 Apr 2026 14:31:23 +0300 Subject: [PATCH 2/9] changelogs --- projects/js-packages/components/changelog/update-admin-ui | 4 ++++ projects/js-packages/webpack-config/changelog/update-admin-ui | 4 ++++ projects/packages/forms/changelog/update-admin-ui | 4 ++++ .../packages/wp-build-polyfills/changelog/update-admin-ui | 4 ++++ 4 files changed, 16 insertions(+) create mode 100644 projects/js-packages/components/changelog/update-admin-ui create mode 100644 projects/js-packages/webpack-config/changelog/update-admin-ui create mode 100644 projects/packages/forms/changelog/update-admin-ui create mode 100644 projects/packages/wp-build-polyfills/changelog/update-admin-ui diff --git a/projects/js-packages/components/changelog/update-admin-ui b/projects/js-packages/components/changelog/update-admin-ui new file mode 100644 index 000000000000..1f65e020eaef --- /dev/null +++ b/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. diff --git a/projects/js-packages/webpack-config/changelog/update-admin-ui b/projects/js-packages/webpack-config/changelog/update-admin-ui new file mode 100644 index 000000000000..4bb8a8af759a --- /dev/null +++ b/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. diff --git a/projects/packages/forms/changelog/update-admin-ui b/projects/packages/forms/changelog/update-admin-ui new file mode 100644 index 000000000000..4654ac631716 --- /dev/null +++ b/projects/packages/forms/changelog/update-admin-ui @@ -0,0 +1,4 @@ +Significance: patch +Type: changed + +Dashboard: Update to @wordpress/admin-ui 2.0.0 and use the Page component's new `visual` prop for the Jetpack logo. diff --git a/projects/packages/wp-build-polyfills/changelog/update-admin-ui b/projects/packages/wp-build-polyfills/changelog/update-admin-ui new file mode 100644 index 000000000000..8f06ed6ec849 --- /dev/null +++ b/projects/packages/wp-build-polyfills/changelog/update-admin-ui @@ -0,0 +1,4 @@ +Significance: patch +Type: changed + +Update @wordpress/admin-ui to 2.0.0. From 65e61bbcced2f4be42614da566030bc084a73583 Mon Sep 17 00:00:00 2001 From: Christian Gastrell Date: Thu, 30 Apr 2026 17:11:26 -0300 Subject: [PATCH 3/9] AdminPage: restore layout overrides for @wordpress/admin-ui 2.0.0 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit admin-ui 2.0.0 moved its internals to CSS Modules and dropped the `.admin-ui-page` / `.admin-ui-page__header` global class hooks our overrides were anchored to. Pass a stable `jp-admin-page__page` className through to admin-ui's Page (which forwards it onto the page node) and rewrite the selectors to anchor structurally — `.jp-admin-page__page > header` instead of `.admin-ui-page__header`. Restores the viewport-fitted scroll chain on every consumer of @automattic/jetpack-base-styles/admin-page-layout (Boost, Protect, VideoPress, Search, Newsletter, Publicize, Backup, Jetpack network admin) and the AdminPage mixin's own header tweaks (sticky z-index, tabs bottom-border, Hello Dolly clearfix). Pin headingLevel={2} to preserve existing heading semantics. Add a TODO-flagged local override centering the new `visual` slot until upstream centers `.header-visual` itself. Stacks on #48410. --- .../base-styles/admin-page-layout.scss | 40 ++++++++++++------- .../changelog/jetpack-page-layout-admin-ui-2x | 4 ++ .../changelog/jetpack-page-layout-admin-ui-2x | 4 ++ .../components/admin-page/index.tsx | 2 + .../components/admin-page/style.module.scss | 19 +++++++-- .../jetpack/_inc/client/settings/style.scss | 2 +- .../changelog/jetpack-page-layout-admin-ui-2x | 4 ++ 7 files changed, 57 insertions(+), 18 deletions(-) create mode 100644 projects/js-packages/base-styles/changelog/jetpack-page-layout-admin-ui-2x create mode 100644 projects/js-packages/components/changelog/jetpack-page-layout-admin-ui-2x create mode 100644 projects/plugins/jetpack/changelog/jetpack-page-layout-admin-ui-2x diff --git a/projects/js-packages/base-styles/admin-page-layout.scss b/projects/js-packages/base-styles/admin-page-layout.scss index fa9c42068727..a444749b20a2 100644 --- a/projects/js-packages/base-styles/admin-page-layout.scss +++ b/projects/js-packages/base-styles/admin-page-layout.scss @@ -18,7 +18,13 @@ // root: .jp-admin-page (added unconditionally by the // component from // @automattic/jetpack-components) -// @wordpress/admin-ui: .admin-ui-page, .admin-ui-page__header +// admin-ui's : .jp-admin-page__page (className passed through +// by ; admin-ui +// 2.0.0 forwards it onto +// the page's outer node) +// admin-ui's header:
element rendered by admin-ui's +// inside `.jp-admin-page__page` (no class hooks — +// we anchor structurally to the HTML5 element) // : .jetpack-footer // Tabs wrapper convention: .jp-admin-page-tabs (consumer-applied div that // wraps `@wordpress/ui` @@ -193,10 +199,16 @@ $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 + // ; 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. + .jp-admin-page__page { flex: 1 1 auto; min-height: 0; min-width: 0; @@ -204,7 +216,7 @@ $jp-breakpoint-mobile: 782px; flex-direction: column; } - .admin-ui-page__header { + .jp-admin-page__page > header { flex-shrink: 0; // pinned at top of the flex column. } @@ -213,14 +225,14 @@ $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. - .admin-ui-page:has(.jp-admin-page-tabs) .admin-ui-page__header { + .jp-admin-page__page:has(.jp-admin-page-tabs) > header { border-bottom: none; padding-bottom: 0; } // The scrollable middle. does not pass `hasPadding` to - // admin-ui's , so `.admin-ui-page__content` is not rendered — - // children drop in as direct descendants of `.admin-ui-page`. Target + // admin-ui's , 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 @@ -241,7 +253,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`. - .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; @@ -272,16 +284,16 @@ $jp-breakpoint-mobile: 782px; // width of the panel area, so the hairline spans the column. // `position: sticky` pins the strip to the top of the scrollable middle - // (`.admin-ui-page > :not(.admin-ui-page__header):not(.jetpack-footer)`), + // (`.jp-admin-page__page > :not(header):not(.jetpack-footer)`), // which is the local opt-in equivalent of admin-ui's native sticky // header — disabled globally by `` per JETPACK-1386. Pinning // the tabs strip here keeps cross-section navigation accessible while // content scrolls underneath. // Surface + hairline use the same `--wpds-*` design tokens that - // `@wordpress/admin-ui` applies to `.admin-ui-page__header`, so the - // tabs strip reads as a visual continuation of the page header and - // tracks any future token (theme/dark-mode) changes automatically. + // `@wordpress/admin-ui` applies to its page header, so the tabs strip + // reads as a visual continuation of the page header and tracks any + // future token (theme/dark-mode) changes automatically. .jp-admin-page-tabs { position: sticky; top: 0; @@ -290,8 +302,8 @@ $jp-breakpoint-mobile: 782px; border-bottom: var(--wpds-border-width-xs) solid var(--wpds-color-stroke-surface-neutral-weak); // Align tab buttons' inline padding with the page header's - // horizontal padding (admin-ui ships `.admin-ui-page__header` - // at `padding-inline: var(--wpds-dimension-padding-2xl)`). + // horizontal padding (admin-ui ships its page header at + // `padding-inline: var(--wpds-dimension-padding-2xl)`). // `@wordpress/ui` Tabs default the buttons to `padding-inline: // var(--wpds-dimension-padding-lg)`; bump them to 2xl so the // first tab's start edge lines up under the page title. diff --git a/projects/js-packages/base-styles/changelog/jetpack-page-layout-admin-ui-2x b/projects/js-packages/base-styles/changelog/jetpack-page-layout-admin-ui-2x new file mode 100644 index 000000000000..92437e5b3891 --- /dev/null +++ b/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 `
` 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). diff --git a/projects/js-packages/components/changelog/jetpack-page-layout-admin-ui-2x b/projects/js-packages/components/changelog/jetpack-page-layout-admin-ui-2x new file mode 100644 index 000000000000..8a45decc53b0 --- /dev/null +++ b/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 `

` and center the new `visual` slot to keep the Jetpack logo aligned with the title. diff --git a/projects/js-packages/components/components/admin-page/index.tsx b/projects/js-packages/components/components/admin-page/index.tsx index e4204be86b9f..5beb3fc695c1 100644 --- a/projects/js-packages/components/components/admin-page/index.tsx +++ b/projects/js-packages/components/components/admin-page/index.tsx @@ -75,6 +75,8 @@ const AdminPage: FC< AdminPageProps > = ( { return (
} breadcrumbs={ breadcrumbs } title={ title } 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 588fa35e4fe3..0a58c92e8e5b 100644 --- a/projects/js-packages/components/components/admin-page/style.module.scss +++ b/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 + // ; 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) { 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 `