@automattic/jetpack-components 1.10.0 → 1.11.0

package/CHANGELOG.md

@@ -2,6 +2,22 @@
 
 ### This is a list detailing changes for the Jetpack RNA Components package releases.
 
+## [1.11.0] - 2026-05-11
+### Added
+- AdminPage: Add admin-page and jetpack-footer sub-path exports for use in wp-build dashboards. [#48510]
+- Gravatar: Add a component with hovercard support at the `./gravatar` subpath, shared across products that render subscriber or response avatars. [#48581]
+- Global Notices: Add global-notices sub-path export for use in wp-build dashboards. [#48586]
+
+### 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. [#48410]
+- Components: Use Link from `@wordpress/ui` instead of ExternalLink. [#48529]
+
+### Removed
+- Components: Remove Gridicon component. Use Icon and named icon exports from `@wordpress/icons` instead. [#48537]
+
+### 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. [#48410]
+
 ## [1.10.0] - 2026-05-04
 ### 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. [#48244]
@@ -1764,6 +1780,7 @@
 ### Changed
 - Update node version requirement to 14.16.1
 
+[1.11.0]: https://github.com/Automattic/jetpack-components/compare/1.10.0...1.11.0
 [1.10.0]: https://github.com/Automattic/jetpack-components/compare/1.9.0...1.10.0
 [1.9.0]: https://github.com/Automattic/jetpack-components/compare/1.8.3...1.9.0
 [1.8.3]: https://github.com/Automattic/jetpack-components/compare/1.8.2...1.8.3

package/build/components/admin-page/index.d.ts

@@ -1,4 +1,3 @@
-import '@wordpress/admin-ui/build-style/style.css';
 import type { AdminPageProps } from './types.ts';
 import type { FC } from 'react';
 /**

package/build/components/admin-page/index.js

@@ -1,9 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 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';
@@ -45,13 +42,9 @@ const AdminPage = ({ children, className, showHeader = true, showFooter = true,
             __('There was an error testing Jetpack. Error: %s', 'jetpack-components'), error.message));
         }
     }, []);
-    // 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 ? (_jsxs(HStack, { spacing: 2, justify: "left", children: [logo || _jsx(JetpackLogo, { showText: false, height: 20 }), _jsx("span", { children: title })
-        ] })) : undefined;
     // When title or breadcrumbs are provided, use admin-ui Page for the full page layout.
-    if (showHeader && (composedTitle || breadcrumbs)) {
-        return (_jsx("div", { className: rootClassName, children: _jsxs(Page, { ariaLabel: title, breadcrumbs: breadcrumbs, title: composedTitle, subTitle: subTitle, actions: actions, showSidebarToggle: false, children: [tabs, unwrapped ? (children) : (_jsx(Container, { fluid: true, horizontalSpacing: 0, children: _jsx(Col, { children: children }) })), showFooter && _jsx(JetpackFooter, { menu: optionalMenuItems })] }) }));
+    if (showHeader && (title || breadcrumbs)) {
+        return (_jsx("div", { className: rootClassName, children: _jsxs(Page, { className: "jp-admin-page__page", visual: logo || _jsx(JetpackLogo, { showText: false, height: 20 }), breadcrumbs: breadcrumbs, title: title, subTitle: subTitle, actions: actions, showSidebarToggle: false, children: [tabs, unwrapped ? (children) : (_jsx(Container, { fluid: true, horizontalSpacing: 0, children: _jsx(Col, { children: children }) })), showFooter && _jsx(JetpackFooter, { menu: optionalMenuItems })] }) }));
     }
     // Legacy path: no title provided, render the classic header.
     return (_jsxs("div", { className: rootClassName, children: [showHeader && (_jsx(Container, { horizontalSpacing: 5, children: _jsxs(Col, { className: clsx(styles['admin-page-header'], 'jp-admin-page-header'), children: [header ? header : _jsx(JetpackLogo, {}), sandboxedDomain && (_jsx("code", { className: styles['sandbox-domain-badge'], onClick: testConnection, onKeyDown: testConnection, 

package/build/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;

package/build/components/boost-score-bar/index.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { __ } from '@wordpress/i18n';
+import { Icon, desktop, mobile } from '@wordpress/icons';
 import clsx from 'clsx';
-import Gridicon from '../gridicon/index.js';
 import './style.scss';
 export const BoostScoreBar = ({ score, isLoading, showPrevScores, active, prevScore = 0, scoreBarType, noBoostScoreTooltip, }) => {
     if (!active) {
@@ -12,9 +12,9 @@ export const BoostScoreBar = ({ score, isLoading, showPrevScores, active, prevSc
     const mobileIconLabel = __('Mobile score', 'jetpack-components');
     const getIcon = () => {
         if (scoreBarType === 'desktop') {
-            return _jsx(Gridicon, { icon: "computer", size: 24 });
+            return _jsx(Icon, { icon: desktop, size: 24 });
         }
-        return _jsx(Gridicon, { icon: "phone", size: 24 });
+        return _jsx(Icon, { icon: mobile, size: 24 });
     };
     const getFillColor = () => {
         // This shows the loading color unless a score already exists.

package/build/components/gravatar/index.d.ts

@@ -0,0 +1,58 @@
+import '@gravatar-com/hovercards/dist/style.css';
+import './style.scss';
+/**
+ * Gravatar `defaultImage` styles, mirroring https://docs.gravatar.com/sdk/images/#default-image
+ */
+type DefaultImage = 'blank' | 'color' | 'identicon' | 'initials' | 'monsterid' | 'mp' | 'retro' | 'robohash' | 'wavatar';
+export type GravatarProps = {
+    /**
+     * Style of the placeholder image when the email has no Gravatar profile.
+     * @default 'initials'
+     */
+    defaultImage?: DefaultImage;
+    /**
+     * Display name for accessibility (used as `alt` text and the hovercard label).
+     */
+    displayName?: string;
+    /**
+     * Email address to look up on Gravatar.
+     */
+    email: string;
+    /**
+     * Rendered avatar size in pixels.
+     * @default 48
+     */
+    size?: number;
+    /**
+     * Optional class name forwarded to the underlying `<img>` element. The
+     * default `jetpack-components-gravatar` class is always applied so consumers
+     * can target it directly.
+     */
+    className?: string;
+    /**
+     * Whether to attach a Gravatar profile hovercard to the avatar.
+     * @default true
+     */
+    useHovercard?: boolean;
+};
+/**
+ * Renders a Gravatar profile image with an optional Gravatar profile hovercard.
+ *
+ * If the email has no Gravatar profile, the configured `defaultImage` style is
+ * used (initials by default).
+ *
+ * Long-term, this is the seam for switching to a core or Gravatar-shipped
+ * component (see https://github.com/WordPress/gutenberg/issues/76836); until
+ * then, Forms and Newsletter share this implementation.
+ *
+ * @param props              - The component props.
+ * @param props.defaultImage - Style of the placeholder image when the email has no Gravatar.
+ * @param props.displayName  - Display name used for `alt` text + hovercard label.
+ * @param props.email        - Email address to look up on Gravatar.
+ * @param props.size         - Rendered avatar size in pixels.
+ * @param props.className    - Optional class name forwarded to the underlying `<img>`.
+ * @param props.useHovercard - Whether to attach the Gravatar profile hovercard.
+ * @return The Gravatar avatar `<img>`, or null when no email is available.
+ */
+export default function Gravatar({ defaultImage, displayName, email, size, className, useHovercard }: GravatarProps): JSX.Element | null;
+export {};

package/build/components/gravatar/index.js

@@ -0,0 +1,68 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * External dependencies
+ */
+import { Hovercards } from '@gravatar-com/hovercards';
+import '@gravatar-com/hovercards/dist/style.css';
+import { useEffect, useRef } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import clsx from 'clsx';
+import { sha256 } from 'js-sha256';
+import './style.scss';
+/**
+ * Renders a Gravatar profile image with an optional Gravatar profile hovercard.
+ *
+ * If the email has no Gravatar profile, the configured `defaultImage` style is
+ * used (initials by default).
+ *
+ * Long-term, this is the seam for switching to a core or Gravatar-shipped
+ * component (see https://github.com/WordPress/gutenberg/issues/76836); until
+ * then, Forms and Newsletter share this implementation.
+ *
+ * @param props              - The component props.
+ * @param props.defaultImage - Style of the placeholder image when the email has no Gravatar.
+ * @param props.displayName  - Display name used for `alt` text + hovercard label.
+ * @param props.email        - Email address to look up on Gravatar.
+ * @param props.size         - Rendered avatar size in pixels.
+ * @param props.className    - Optional class name forwarded to the underlying `<img>`.
+ * @param props.useHovercard - Whether to attach the Gravatar profile hovercard.
+ * @return The Gravatar avatar `<img>`, or null when no email is available.
+ */
+export default function Gravatar({ defaultImage = 'initials', displayName, email, size = 48, className, useHovercard = true, }) {
+    const profileImageRef = useRef(null);
+    const hovercardRef = useRef(null);
+    useEffect(() => {
+        if (!useHovercard || !profileImageRef.current) {
+            return;
+        }
+        hovercardRef.current = new Hovercards({
+            // See https://github.com/Automattic/gravatar/tree/trunk/web/packages/hovercards#translations
+            i18n: {
+                'Edit your profile →': __('Edit your profile →', 'jetpack-components'),
+                'View profile →': __('View profile →', 'jetpack-components'),
+                Contact: __('Contact', 'jetpack-components'),
+                'Send money': __('Send money', 'jetpack-components'),
+                'Sorry, we are unable to load this Gravatar profile.': __('Sorry, we are unable to load this Gravatar profile.', 'jetpack-components'),
+                'Gravatar not found.': __('Gravatar not found.', 'jetpack-components'),
+                'This profile is private.': __('This profile is private.', 'jetpack-components'),
+                'Too Many Requests.': __('Too many requests.', 'jetpack-components'),
+                'Internal Server Error.': __('Internal server error.', 'jetpack-components'),
+                'Is this you?': __('Is this you?', 'jetpack-components'),
+                'Claim your free profile.': __('Claim your free profile.', 'jetpack-components'),
+                Email: __('Email', 'jetpack-components'),
+                'Home Phone': __('Home phone', 'jetpack-components'),
+                'Work Phone': __('Work phone', 'jetpack-components'),
+                'Cell Phone': __('Cell phone', 'jetpack-components'),
+                'Contact Form': __('Contact form', 'jetpack-components'),
+                Calendar: __('Calendar', 'jetpack-components'),
+            },
+        });
+        hovercardRef.current.attach(profileImageRef.current);
+    }, [useHovercard]);
+    if (!email) {
+        return null;
+    }
+    const hashedEmail = sha256(email);
+    const hovercardName = displayName ? `&name=${encodeURIComponent(displayName)}` : '';
+    return (_jsx("img", { ref: profileImageRef, className: clsx('jetpack-components-gravatar', className), alt: displayName || '', src: `https://secure.gravatar.com/avatar/${hashedEmail}?d=${defaultImage}${hovercardName}`, width: size, height: size, loading: "lazy" }));
+}

package/build/components/gravatar/style.scss

@@ -0,0 +1,7 @@
+.jetpack-components-gravatar {
+	background-color: var(--jp-gray-5, #dcdcde);
+	border-radius: 50%;
+	display: block;
+	flex-shrink: 0; // Prevent shrinking when Gravatar is inside flex containers.
+	overflow: hidden;
+}

package/build/components/icon-tooltip/index.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Popover } from '@wordpress/components';
+import { Icon, info } from '@wordpress/icons';
 import clsx from 'clsx';
 import { useCallback, useState } from 'react';
 import Button from '../button/index.js';
-import Gridicon from '../gridicon/index.js';
 import './style.scss';
 const placementsToPositions = (placement) => {
     const mapping = {
@@ -22,7 +22,7 @@ const placementsToPositions = (placement) => {
  * @param {IconTooltipProps} props - Props
  * @return {ReactElement} - JSX element
  */
-const IconTooltip = ({ className = '', iconClassName = '', placement = 'bottom-end', animate = true, iconCode = 'info-outline', iconSize = 18, offset = 10, title, children, popoverAnchorStyle = 'icon', forceShow = false, hoverShow = false, wide = false, inline = true, shift = false, }) => {
+const IconTooltip = ({ className = '', iconClassName = '', placement = 'bottom-end', animate = true, iconCode = info, iconSize = 18, offset = 10, title, children, popoverAnchorStyle = 'icon', forceShow = false, hoverShow = false, wide = false, inline = true, shift = false, }) => {
     const POPOVER_HELPER_WIDTH = 124;
     const [isVisible, setIsVisible] = useState(false);
     const [hoverTimeout, setHoverTimeout] = useState(null);
@@ -70,7 +70,7 @@ const IconTooltip = ({ className = '', iconClassName = '', placement = 'bottom-e
             setHoverTimeout(id);
         }
     }, [hoverShow]);
-    return (_jsxs("div", { className: wrapperClassNames, "data-testid": "icon-tooltip_wrapper", onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, children: [!isAnchorWrapper && (_jsx(Button, { variant: "link", onMouseDown: toggleTooltip, children: _jsx(Gridicon, { className: iconClassName, icon: iconCode, size: iconSize }) })), _jsx("div", { className: clsx('icon-tooltip-helper', { 'is-wide': wide }), style: iconShiftBySize, children: (isForcedToShow || isVisible) && (_jsx(Popover, { ...args, children: _jsxs("div", { children: [title && _jsx("div", { className: "icon-tooltip-title", children: title }), _jsx("div", { className: "icon-tooltip-content", children: children })
+    return (_jsxs("div", { className: wrapperClassNames, "data-testid": "icon-tooltip_wrapper", onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, children: [!isAnchorWrapper && (_jsx(Button, { variant: "link", onMouseDown: toggleTooltip, children: _jsx(Icon, { className: iconClassName, icon: iconCode, size: iconSize }) })), _jsx("div", { className: clsx('icon-tooltip-helper', { 'is-wide': wide }), style: iconShiftBySize, children: (isForcedToShow || isVisible) && (_jsx(Popover, { ...args, children: _jsxs("div", { children: [title && _jsx("div", { className: "icon-tooltip-title", children: title }), _jsx("div", { className: "icon-tooltip-content", children: children })
                         ] }) })) })
         ] }));
 };

package/build/components/icon-tooltip/types.d.ts

@@ -1,3 +1,4 @@
+import type { IconType } from '@wordpress/components';
 import type { ReactNode } from 'react';
 export type Placement = 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end';
 export type Position = 'top left' | 'top center' | 'top right' | 'bottom left' | 'bottom center' | 'bottom right';
@@ -7,7 +8,7 @@ export type IconTooltipProps = {
      */
     className?: string;
     /**
-     * The class name applied to Gridicon.
+     * The class name applied to the icon.
      */
     iconClassName?: string;
     /**
@@ -23,9 +24,9 @@ export type IconTooltipProps = {
      */
     animate?: boolean;
     /**
-     * The icon code for Gridicon.
+     * The icon to display. Accepts icon components from `@wordpress/icons`.
      */
-    iconCode?: string;
+    iconCode?: IconType;
     /**
      * The title of Popover.
      */

package/build/components/jetpack-footer/index.js

@@ -36,7 +36,7 @@ const JetpackFooter = ({ className, menu, ...otherProps }) => {
                     _jsx(JetpackLogo, { showText: false, height: 16, "aria-hidden": "true" }), _jsx(Text, { variant: "body-md", children: "Jetpack" })
                 ] }), _jsx(Stack, { render: _jsx("ul", {}), direction: "row", gap: "lg", wrap: "wrap", children: items.map(item => {
                     const isButton = item.role === 'button';
-                    return (_jsx("li", { children: _jsx(Text, { variant: "body-sm", className: "jetpack-footer__menu-item", render: isButton ? (_jsx(Link, { render: _jsx(Text, { variant: "body-md", render: _jsx("span", {}) }), tone: "neutral", variant: "default", role: item.role, tabIndex: 0, onClick: item.onClick || undefined, onKeyDown: item.onKeyDown || undefined })) : (_jsx(Link, { render: _jsx(Text, { variant: "body-md", render: _jsx("a", {}) }), tone: "neutral", variant: "default", href: item.href || '', title: item.title || '', role: item.role, onClick: item.onClick || undefined, onKeyDown: item.onKeyDown || undefined })), children: item.label }) }, item.label));
+                    return (_jsx("li", { children: _jsx(Text, { variant: "body-md", className: "jetpack-footer__menu-item", render: isButton ? (_jsx(Link, { render: _jsx("span", {}), tone: "neutral", variant: "default", role: item.role, tabIndex: 0, onClick: item.onClick || undefined, onKeyDown: item.onKeyDown || undefined })) : (_jsx(Link, { tone: "neutral", variant: "default", href: item.href || '', title: item.title || '', role: item.role, onClick: item.onClick || undefined, onKeyDown: item.onKeyDown || undefined })), children: item.label }) }, item.label));
                 }) }), _jsx("a", { className: "jetpack-footer__a8c", href: getRedirectUrl('a8c-about'), rel: "noopener noreferrer", target: "_blank", children: _jsx(AutomatticBylineLogo, { height: 8 }) })
         ] }));
 };

package/build/components/terms-of-service/index.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { ExternalLink } from '@wordpress/components';
 import { createInterpolateElement } from '@wordpress/element';
 import { __, sprintf } from '@wordpress/i18n';
+import { Link } from '@wordpress/ui';
 import clsx from 'clsx';
 import { getRedirectUrl } from '../../index.js';
 import Text from '../text/index.js';
@@ -24,25 +24,25 @@ const MultipleButtonsText = ({ multipleButtonsLabels }) => {
         /* translators: %1$s is button label 1 and %2$s is button label 2 */
         __('By clicking <strong>%1$s</strong> or <strong>%2$s</strong>, you agree to our <tosLink>Terms of Service</tosLink> and to <shareDetailsLink>sync your site‘s data</shareDetailsLink> with us.', 'jetpack-components'), multipleButtonsLabels[0], multipleButtonsLabels[1]), {
             strong: _jsx("strong", {}),
-            tosLink: _jsx(Link, { slug: "wpcom-tos" }),
-            shareDetailsLink: _jsx(Link, { slug: "jetpack-support-what-data-does-jetpack-sync" }),
+            tosLink: _jsx(TosLink, { slug: "wpcom-tos" }),
+            shareDetailsLink: _jsx(TosLink, { slug: "jetpack-support-what-data-does-jetpack-sync" }),
         });
     }
     return createInterpolateElement(__('By clicking the buttons above, you agree to our <tosLink>Terms of Service</tosLink> and to <shareDetailsLink>sync your site‘s data</shareDetailsLink> with us.', 'jetpack-components'), {
-        tosLink: _jsx(Link, { slug: "wpcom-tos" }),
-        shareDetailsLink: _jsx(Link, { slug: "jetpack-support-what-data-does-jetpack-sync" }),
+        tosLink: _jsx(TosLink, { slug: "wpcom-tos" }),
+        shareDetailsLink: _jsx(TosLink, { slug: "jetpack-support-what-data-does-jetpack-sync" }),
     });
 };
 const SingleButtonText = ({ agreeButtonLabel }) => createInterpolateElement(sprintf(
 /* translators: %s is a button label */
 __('By clicking <strong>%s</strong>, you agree to our <tosLink>Terms of Service</tosLink> and to <shareDetailsLink>sync your site‘s data</shareDetailsLink> with us.', 'jetpack-components'), agreeButtonLabel), {
     strong: _jsx("strong", {}),
-    tosLink: _jsx(Link, { slug: "wpcom-tos" }),
-    shareDetailsLink: _jsx(Link, { slug: "jetpack-support-what-data-does-jetpack-sync" }),
+    tosLink: _jsx(TosLink, { slug: "wpcom-tos" }),
+    shareDetailsLink: _jsx(TosLink, { slug: "jetpack-support-what-data-does-jetpack-sync" }),
 });
 const TermsOfServiceTextOnly = () => createInterpolateElement(__('By continuing you agree to our <tosLink>Terms of Service</tosLink> and to <shareDetailsLink>sync your site’s data</shareDetailsLink> with us. We’ll check if that email is linked to an existing WordPress.com account or create a new one instantly.', 'jetpack-components'), {
-    tosLink: _jsx(Link, { slug: "wpcom-tos" }),
-    shareDetailsLink: _jsx(Link, { slug: "jetpack-support-what-data-does-jetpack-sync" }),
+    tosLink: _jsx(TosLink, { slug: "wpcom-tos" }),
+    shareDetailsLink: _jsx(TosLink, { slug: "jetpack-support-what-data-does-jetpack-sync" }),
 });
-const Link = ({ slug, children }) => (_jsx(ExternalLink, { className: "terms-of-service__link", href: getRedirectUrl(slug), children: children }));
+const TosLink = ({ slug, children }) => (_jsx(Link, { openInNewTab: true, className: "terms-of-service__link", href: getRedirectUrl(slug), children: children }));
 export default TermsOfService;

package/build/components/testimonials/index.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState, useCallback } from '@wordpress/element';
-import Gridicon from '../gridicon/index.js';
+import { Icon, chevronLeft, chevronRight } from '@wordpress/icons';
 import { Testimonial } from './testimonial.js';
 const Testimonials = ({ testimonials }) => {
     const [currentTestimonialIndex, setcurrentTestimonialIndex] = useState(0);
@@ -13,6 +13,6 @@ const Testimonials = ({ testimonials }) => {
         setcurrentTestimonialIndex(newIndex);
     }, [currentTestimonialIndex, testimonials]);
     const shouldShowArrows = testimonials.length > 1;
-    return (_jsxs("div", { className: "testimonials", children: [shouldShowArrows && (_jsx("button", { "data-testid": "left-arrow", className: "testimonials__left-arrow", onClick: decrementTestimonial, children: _jsx(Gridicon, { icon: "chevron-left", size: 48 }) })), testimonials.map((testimonial, index) => (_jsx(Testimonial, { ...testimonial, hidden: currentTestimonialIndex !== index }, index))), shouldShowArrows && (_jsx("button", { "data-testid": "right-arrow", className: "testimonials__right-arrow", onClick: incrementTestimonial, children: _jsx(Gridicon, { icon: "chevron-right", size: 48 }) }))] }));
+    return (_jsxs("div", { className: "testimonials", children: [shouldShowArrows && (_jsx("button", { "data-testid": "left-arrow", className: "testimonials__left-arrow", onClick: decrementTestimonial, children: _jsx(Icon, { icon: chevronLeft, size: 48 }) })), testimonials.map((testimonial, index) => (_jsx(Testimonial, { ...testimonial, hidden: currentTestimonialIndex !== index }, index))), shouldShowArrows && (_jsx("button", { "data-testid": "right-arrow", className: "testimonials__right-arrow", onClick: incrementTestimonial, children: _jsx(Icon, { icon: chevronRight, size: 48 }) }))] }));
 };
 export default Testimonials;

package/build/index.d.ts

@@ -12,7 +12,8 @@ export { default as AutomatticForAgenciesLogo } from './components/automattic-fo
 export { default as JetpackFooter } from './components/jetpack-footer/index.tsx';
 /** @deprecated Use `Spinner` from `@wordpress/components` instead. */
 export { default as Spinner } from './components/spinner/index.tsx';
-export { default as Gridicon } from './components/gridicon/index.tsx';
+export { default as Gravatar } from './components/gravatar/index.tsx';
+export type { GravatarProps } from './components/gravatar/index.tsx';
 export { default as IconTooltip } from './components/icon-tooltip/index.tsx';
 export { default as ActionButton } from './components/action-button/index.tsx';
 export { default as PricingCard } from './components/pricing-card/index.tsx';

package/build/index.js

@@ -26,7 +26,7 @@ export { default as AutomatticForAgenciesLogo } from './components/automattic-fo
 export { default as JetpackFooter } from './components/jetpack-footer/index.js';
 /** @deprecated Use `Spinner` from `@wordpress/components` instead. */
 export { default as Spinner } from './components/spinner/index.js';
-export { default as Gridicon } from './components/gridicon/index.js';
+export { default as Gravatar } from './components/gravatar/index.js';
 export { default as IconTooltip } from './components/icon-tooltip/index.js';
 export { default as ActionButton } from './components/action-button/index.js';
 export { default as PricingCard } from './components/pricing-card/index.js';

package/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,15 @@ 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 }

package/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;

package/components/boost-score-bar/index.tsx

@@ -1,6 +1,6 @@
 import { __ } from '@wordpress/i18n';
+import { Icon, desktop, mobile } from '@wordpress/icons';
 import clsx from 'clsx';
-import Gridicon from '../gridicon/index.tsx';
 import type { BoostScoreBarProps } from './types.ts';
 import type { FunctionComponent } from 'react';
 
@@ -25,10 +25,10 @@ export const BoostScoreBar: FunctionComponent< BoostScoreBarProps > = ( {
 
 	const getIcon = () => {
 		if ( scoreBarType === 'desktop' ) {
-			return <Gridicon icon="computer" size={ 24 } />;
+			return <Icon icon={ desktop } size={ 24 } />;
 		}
 
-		return <Gridicon icon="phone" size={ 24 } />;
+		return <Icon icon={ mobile } size={ 24 } />;
 	};
 
 	const getFillColor = () => {