@automattic/jetpack-components 1.6.0 → 1.7.0

package/CHANGELOG.md

@@ -2,6 +2,20 @@
 
 ### This is a list detailing changes for the Jetpack RNA Components package releases.
 
+## [1.7.0] - 2026-03-30
+### Changed
+- Remove double heading wrapper from AdminPage title, fixing header title sizing across all Jetpack admin pages. [#47696]
+- Update legacy Node calls. [#47770]
+- Update package dependencies. [#47799]
+
+## [1.6.1] - 2026-03-23
+### Changed
+- Update package dependencies. [#47684] [#47719]
+
+### Fixed
+- Prevent content from overlapping the page header. [#47697]
+- Prevent horizontal scroll on narrow viewports. [#47490]
+
 ## [1.6.0] - 2026-03-16
 ### Added
 - Add support for X connection. [#47538]
@@ -1701,6 +1715,8 @@
 ### Changed
 - Update node version requirement to 14.16.1
 
+[1.7.0]: https://github.com/Automattic/jetpack-components/compare/1.6.1...1.7.0
+[1.6.1]: https://github.com/Automattic/jetpack-components/compare/1.6.0...1.6.1
 [1.6.0]: https://github.com/Automattic/jetpack-components/compare/1.5.0...1.6.0
 [1.5.0]: https://github.com/Automattic/jetpack-components/compare/1.4.16...1.5.0
 [1.4.16]: https://github.com/Automattic/jetpack-components/compare/1.4.15...1.4.16

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

@@ -2,8 +2,7 @@ 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 { __experimentalHeading as Heading, // eslint-disable-line @wordpress/no-unsafe-wp-apis
-__experimentalHStack as HStack, // eslint-disable-line @wordpress/no-unsafe-wp-apis
+import { __experimentalHStack as HStack, // eslint-disable-line @wordpress/no-unsafe-wp-apis
  } from '@wordpress/components';
 import { __, sprintf } from '@wordpress/i18n';
 import clsx from 'clsx';
@@ -44,12 +43,8 @@ const AdminPage = ({ children, className, moduleName = 'Jetpack' /** "Jetpack" i
         }
     }, []);
     // Compose the title with logo for the admin-ui Page header.
-    // Note: The inner Heading causes a double h2 wrapping because Page's Header
-    // also wraps title in a Heading. This is a known issue — the inner Heading is
-    // needed until https://github.com/WordPress/gutenberg/pull/75899 fixes
-    // non-string title rendering in admin-ui. Once that lands, remove the Heading
-    // here and pass the plain HStack with a string child.
-    const composedTitle = title ? (_jsxs(HStack, { spacing: 2, justify: "left", children: [logo || _jsx(JetpackLogo, { showText: false, height: 20 }), _jsx(Heading, { as: "h2", level: 3, weight: 500, truncate: true, children: title })
+    // 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;
     const footer = showFooter && (_jsx(Container, { className: styles['admin-page-footer'], horizontalSpacing: 5, children: _jsx(Col, { children: _jsx(JetpackFooter, { moduleName: moduleName, moduleNameHref: moduleNameHref, menu: optionalMenuItems, useInternalLinks: useInternalLinks }) }) }));
     // When title or breadcrumbs are provided, use admin-ui Page for the full page layout.

package/build/components/admin-page/style.module.scss

@@ -21,6 +21,7 @@
 	// JETPACK-1386
 	:global(.admin-ui-page__header) {
 		position: relative;
+		z-index: 1;
 	}
 
 	// Normalize admin headers: implementation of admin-ui needs to

package/build/components/admin-section/hero/style.module.scss

@@ -1,4 +1,5 @@
 .section-hero {
 	padding-top: 1px; // prevent margin collapse for interior sections
 	background: var(--jp-white-off);
+	overflow: hidden;
 }

package/components/admin-page/index.tsx

@@ -2,7 +2,6 @@ import restApi from '@automattic/jetpack-api';
 import { Page } from '@wordpress/admin-ui';
 import '@wordpress/admin-ui/build-style/style.css';
 import {
-	__experimentalHeading as Heading, // eslint-disable-line @wordpress/no-unsafe-wp-apis
 	__experimentalHStack as HStack, // eslint-disable-line @wordpress/no-unsafe-wp-apis
 } from '@wordpress/components';
 import { __, sprintf } from '@wordpress/i18n';
@@ -75,17 +74,11 @@ const AdminPage: FC< AdminPageProps > = ( {
 	}, [] );
 
 	// Compose the title with logo for the admin-ui Page header.
-	// Note: The inner Heading causes a double h2 wrapping because Page's Header
-	// also wraps title in a Heading. This is a known issue — the inner Heading is
-	// needed until https://github.com/WordPress/gutenberg/pull/75899 fixes
-	// non-string title rendering in admin-ui. Once that lands, remove the Heading
-	// here and pass the plain HStack with a string child.
+	// 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 } /> }
-			<Heading as="h2" level={ 3 } weight={ 500 } truncate>
-				{ title }
-			</Heading>
+			<span>{ title }</span>
 		</HStack>
 	) : undefined;
 

package/components/admin-page/style.module.scss

@@ -21,6 +21,7 @@
 	// JETPACK-1386
 	:global(.admin-ui-page__header) {
 		position: relative;
+		z-index: 1;
 	}
 
 	// Normalize admin headers: implementation of admin-ui needs to

package/components/admin-section/hero/style.module.scss

@@ -1,4 +1,5 @@
 .section-hero {
 	padding-top: 1px; // prevent margin collapse for interior sections
 	background: var(--jp-white-off);
+	overflow: hidden;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@automattic/jetpack-components",
-	"version": "1.6.0",
+	"version": "1.7.0",
 	"description": "Jetpack Components Package",
 	"homepage": "https://github.com/Automattic/jetpack/tree/HEAD/projects/js-packages/components/#readme",
 	"bugs": {
@@ -45,50 +45,51 @@
 	],
 	"dependencies": {
 		"@automattic/format-currency": "1.0.1",
-		"@automattic/jetpack-api": "^1.0.19",
-		"@automattic/jetpack-boost-score-api": "^1.0.33",
+		"@automattic/jetpack-api": "^1.0.21",
+		"@automattic/jetpack-boost-score-api": "^1.0.35",
 		"@automattic/jetpack-script-data": "^0.6.1",
-		"@automattic/number-formatters": "^1.1.2",
+		"@automattic/number-formatters": "^1.1.3",
 		"@babel/runtime": "^7",
-		"@wordpress/admin-ui": "1.9.0",
-		"@wordpress/browserslist-config": "6.41.0",
-		"@wordpress/components": "32.3.0",
-		"@wordpress/compose": "7.41.0",
-		"@wordpress/data": "10.41.0",
-		"@wordpress/date": "5.41.0",
-		"@wordpress/element": "6.41.0",
-		"@wordpress/i18n": "6.14.0",
-		"@wordpress/icons": "11.8.0",
-		"@wordpress/notices": "5.41.0",
+		"@wordpress/admin-ui": "1.10.0",
+		"@wordpress/browserslist-config": "6.42.0",
+		"@wordpress/components": "32.4.0",
+		"@wordpress/compose": "7.42.0",
+		"@wordpress/data": "10.42.0",
+		"@wordpress/date": "5.42.0",
+		"@wordpress/element": "6.42.0",
+		"@wordpress/i18n": "6.15.0",
+		"@wordpress/icons": "12.0.0",
+		"@wordpress/notices": "5.42.0",
 		"clsx": "2.1.1",
 		"prop-types": "^15.7.2",
 		"qrcode.react": "4.2.0",
 		"react-slider": "2.0.5",
-		"social-logos": "^3.3.11",
+		"social-logos": "^3.3.12",
 		"uplot": "1.6.31",
 		"uplot-react": "1.1.4"
 	},
 	"devDependencies": {
-		"@automattic/jetpack-base-styles": "^1.0.19",
+		"@automattic/jetpack-base-styles": "^1.0.20",
 		"@babel/core": "7.29.0",
 		"@babel/preset-react": "7.28.5",
-		"@jest/globals": "30.2.0",
-		"@storybook/addon-docs": "10.2.11",
-		"@storybook/react": "10.2.11",
+		"@jest/globals": "30.3.0",
+		"@storybook/addon-docs": "10.3.1",
+		"@storybook/react": "10.3.1",
 		"@testing-library/dom": "10.4.1",
-		"@testing-library/react": "16.3.0",
+		"@testing-library/react": "16.3.2",
 		"@testing-library/user-event": "14.6.1",
 		"@types/jest": "30.0.0",
 		"@types/react": "18.3.28",
 		"@types/react-dom": "18.3.7",
 		"@types/react-slider": "1.3.6",
 		"@typescript/native-preview": "7.0.0-dev.20260225.1",
-		"jest": "30.2.0",
+		"jest": "30.3.0",
 		"react": "18.3.1",
 		"react-dom": "18.3.1",
 		"require-from-string": "2.0.2",
-		"storybook": "10.2.11",
+		"storybook": "10.3.1",
 		"ts-dedent": "2.2.0",
+		"typescript": "5.9.3",
 		"webpack": "5.105.2",
 		"webpack-cli": "6.0.1"
 	},

package/tools/copy-scss-to-build.mjs

@@ -1,12 +1,8 @@
 import fs from 'node:fs/promises';
 import path from 'node:path';
-import { fileURLToPath } from 'node:url';
-
-const __filename = fileURLToPath( import.meta.url );
-const __dirname = path.dirname( __filename );
 
 // `tools/` -> package root.
-const packageRoot = path.resolve( __dirname, '..' );
+const packageRoot = path.resolve( import.meta.dirname, '..' );
 const buildRoot = path.join( packageRoot, 'build' );
 
 const IGNORED_DIRS = new Set( [ 'build', 'node_modules', '.git' ] );