WordPress · youknowriad · Oct 7, 2025 · Oct 6, 2025 · Oct 7, 2025 · jameskoster
@@ -1427,6 +1427,12 @@
 		"markdown_source": "../packages/a11y/README.md",
 		"parent": "packages"
 	},
+	{
+		"title": "@wordpress/admin-ui",
+		"slug": "packages-admin-ui",
+		"markdown_source": "../packages/admin-ui/README.md",
+		"parent": "packages"
+	},
 	{
 		"title": "@wordpress/annotations",
 		"slug": "packages-annotations",

@@ -293,7 +293,6 @@ Private exports:
 - `ComplementaryAreaMoreMenuItem`
 - `FullscreenMode`
 - `InterfaceSkeleton`
-- `NavigableRegion`
 - `PinnedItems`
 
 ### `core/editor` store

diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/admin-ui/CHANGELOG.md b/packages/admin-ui/CHANGELOG.md
@@ -0,0 +1,3 @@
+<!-- Learn how to maintain this file at https://github.com/WordPress/gutenberg/tree/HEAD/packages#maintaining-changelogs. -->
+
+## Unreleased
diff --git a/packages/admin-ui/README.md b/packages/admin-ui/README.md
@@ -0,0 +1,33 @@
+# Admin UI
+
+Generic components to be used to build the Admin UI.
+
+## Installation
+
+Install the module
+
+```bash
+npm install @wordpress/admin-ui --save
+```
+
+## API
+
+<!-- START TOKEN(Autogenerated API docs) -->
+
+### NavigableRegion
+
+Undocumented declaration.
+
+### Page
+
+Undocumented declaration.
+
+<!-- END TOKEN(Autogenerated API docs) -->
+
+## Contributing to this package
+
+This is an individual package that's part of the Gutenberg project. The project is organized as a monorepo. It's made up of multiple self-contained software packages, each with a specific purpose. The packages in this monorepo are published to [npm](https://www.npmjs.com/) and used by [WordPress](https://make.wordpress.org/core/) as well as other software projects.
+
+To find out more about contributing to this package or Gutenberg as a whole, please read the project's main [contributor guide](https://github.com/WordPress/gutenberg/tree/HEAD/CONTRIBUTING.md).
+
+<br /><br /><p align="center"><img src="https://s.w.org/style/images/codeispoetry.png?1" alt="Code is Poetry." /></p>
diff --git a/packages/admin-ui/package.json b/packages/admin-ui/package.json
@@ -0,0 +1,39 @@
+{
+	"name": "@wordpress/admin-ui",
+	"version": "1.0.0",
+	"description": "Generic components to be used in the Admin UI.",
+	"author": "The WordPress Contributors",
+	"license": "GPL-2.0-or-later",
+	"keywords": [
+		"wordpress",
+		"admin",
+		"ui"
+	],
+	"homepage": "https://github.com/WordPress/gutenberg/tree/HEAD/packages/admin-ui/README.md",
+	"repository": {
+		"type": "git",
+		"url": "https://github.com/WordPress/gutenberg.git",
+		"directory": "packages/admin-ui"
+	},
+	"bugs": {
+		"url": "https://github.com/WordPress/gutenberg/issues"
+	},
+	"engines": {
+		"node": ">=18.12.0",
+		"npm": ">=8.19.2"
+	},
+	"main": "build/index.js",
+	"module": "build-module/index.js",
+	"react-native": "src/index",
+	"types": "build-types",
+	"sideEffects": false,
+	"dependencies": {
+		"@babel/runtime": "7.25.7",
+		"@wordpress/components": "file:../components",
+		"@wordpress/element": "file:../element",
+		"clsx": "^2.1.1"
+	},
+	"publishConfig": {
+		"access": "public"
+	}
+}
diff --git a/packages/admin-ui/src/index.ts b/packages/admin-ui/src/index.ts
@@ -0,0 +1,2 @@
+export { default as NavigableRegion } from './navigable-region';
+export { default as Page } from './page';
diff --git a/.../src/components/navigable-region/index.js → ...s/admin-ui/src/navigable-region/index.tsx b/.../src/components/navigable-region/index.js → ...s/admin-ui/src/navigable-region/index.tsx
@@ -1,19 +1,31 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+
 /**
  * WordPress dependencies
  */
 import { forwardRef } from '@wordpress/element';
 
 /**
- * External dependencies
+ * Type definitions
  */
-import clsx from 'clsx';
+type NavigableRegionProps = {
+	children: React.ReactNode;
+	className?: string;
+	ariaLabel: string;
+	as?: React.ElementType;
+	[ key: string ]: any;
+};
 
-const NavigableRegion = forwardRef(
+// This is a copy of the private `NavigableRegion` component from the '@wordpress/editor' private APIs.
+const NavigableRegion = forwardRef< HTMLElement, NavigableRegionProps >(
 	( { children, className, ariaLabel, as: Tag = 'div', ...props }, ref ) => {
 		return (
 			<Tag
 				ref={ ref }
-				className={ clsx( 'interface-navigable-region', className ) }
+				className={ clsx( 'admin-ui-navigable-region', className ) }
 				aria-label={ ariaLabel }
 				role="region"
 				tabIndex="-1"
@@ -26,4 +38,5 @@ const NavigableRegion = forwardRef(
 );
 
 NavigableRegion.displayName = 'NavigableRegion';
+
 export default NavigableRegion;
diff --git a/packages/admin-ui/src/page/header.tsx b/packages/admin-ui/src/page/header.tsx
@@ -0,0 +1,52 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	__experimentalHeading as Heading,
+	__experimentalHStack as HStack,
+	__experimentalVStack as VStack,
+} from '@wordpress/components';
+
+export default function Header( {
+	breadcrumbs,
+	badges,
+	title,
+	subTitle,
+	actions,
+}: {
+	breadcrumbs?: React.ReactNode;
+	badges?: React.ReactNode;
+	title?: React.ReactNode;
+	subTitle: React.ReactNode;
+	actions?: React.ReactNode;
+	showSidebarToggle?: boolean;
+} ) {
+	return (
+		<VStack className="admin-ui-page__header" as="header">
+			<HStack
+				className="admin-ui-page__header-title"
+				justify="space-between"
+				spacing={ 2 }
+			>
+				<HStack spacing={ 2 }>
+					{ title && (
+						<Heading as="h2" level={ 3 } weight={ 500 } truncate>
+							{ title }
+						</Heading>
+					) }
+					{ breadcrumbs }
+					{ badges }
+				</HStack>
+				<HStack
+					style={ { width: 'auto', flexShrink: 0 } }
+					spacing={ 2 }
+				>
+					{ actions }
+				</HStack>
+			</HStack>
+			{ subTitle && (
+				<p className="admin-ui-page__header-subtitle">{ subTitle }</p>
+			) }
+		</VStack>
+	);
+}
diff --git a/packages/admin-ui/src/page/index.tsx b/packages/admin-ui/src/page/index.tsx
@@ -0,0 +1,55 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+
+/**
+ * Internal dependencies
+ */
+import Header from './header';
+import NavigableRegion from '../navigable-region';
+
+function Page( {
+	breadcrumbs,
+	badges,
+	title,
+	subTitle,
+	children,
+	className,
+	actions,
+	hasPadding = true,
+}: {
+	breadcrumbs?: React.ReactNode;
+	badges?: React.ReactNode;
+	title?: React.ReactNode;
+	subTitle?: React.ReactNode;
+	children: React.ReactNode;
+	className?: string;
+	actions?: React.ReactNode;
+	hasPadding?: boolean;
+} ) {
+	const classes = clsx( 'admin-ui-page', className );
+
+	return (
+		<NavigableRegion className={ classes } ariaLabel={ title }>
+			{ ( title || breadcrumbs || badges ) && (
+				<Header
+					breadcrumbs={ breadcrumbs }
+					badges={ badges }
+					title={ title }
+					subTitle={ subTitle }
+					actions={ actions }
+				/>
+			) }
+			<div
+				className={ clsx( 'admin-ui-page__content', {
+					'has-padding': hasPadding,
+				} ) }
+			>
+				{ children }
+			</div>
+		</NavigableRegion>
+	);
+}
+
+export default Page;
diff --git a/packages/admin-ui/src/page/style.scss b/packages/admin-ui/src/page/style.scss
@@ -0,0 +1,43 @@
+.admin-ui-page {
+	height: 100%;
+	background: $white;
+	color: $gray-800;
+	container: admin-ui-page / inline-size;
+
+	@media not (prefers-reduced-motion) {
+		transition: width ease-out 0.2s;
+	}
+}
+
+.admin-ui-page__header {
+	padding: $grid-unit-20 $grid-unit-60;
+	border-bottom: 1px solid $gray-100;
+	background: $white;
+	position: sticky;
+	top: 0;
+
+	@container (max-width: 430px) {
+		padding: $grid-unit-20 $grid-unit-30;
+	}
+}
+
+.admin-ui-page__header-subtitle {
+	padding-block-end: $grid-unit-10;
+	color: $gray-700;
+	@include body-medium();
+	margin: 0;
+}
+
+.admin-ui-page__content {
+	flex-grow: 1;
+	overflow: auto;
+	display: flex;
+	flex-direction: column;
+
+	&.has-padding {
+		padding: $grid-unit-20 $grid-unit * 2.5;
+		@container (max-width: 430px) {
+			padding: $grid-unit-20 $grid-unit-30;
+		}
+	}
+}
diff --git a/packages/admin-ui/src/style.scss b/packages/admin-ui/src/style.scss
@@ -0,0 +1 @@
+@import "./page/style.scss";
diff --git a/packages/admin-ui/tsconfig.json b/packages/admin-ui/tsconfig.json
@@ -0,0 +1,5 @@
+{
+	"$schema": "https://json.schemastore.org/tsconfig.json",
+	"extends": "../../tsconfig.base.json",
+	"references": [ { "path": "../components" }, { "path": "../element" } ]
+}
diff --git a/packages/base-styles/_z-index.scss b/packages/base-styles/_z-index.scss
@@ -192,8 +192,6 @@ $z-layers: (
 	".customize-widgets__block-toolbar": 7,
 
 	// Site editor layout
-	".edit-site-page-header": 2,
-	".edit-site-page-content": 1,
 	".edit-site-templates__dataviews-list-pagination": 2,
 	".edit-site-layout__canvas-container": 2,
 	".edit-site-layout__sidebar": 1,

diff --git a/packages/dependency-extraction-webpack-plugin/lib/util.js b/packages/dependency-extraction-webpack-plugin/lib/util.js
@@ -4,6 +4,7 @@ const WORDPRESS_NAMESPACE = '@wordpress/';
 // This list must be kept in sync with the same list in tools/webpack/packages.js
 // !!
 const BUNDLED_PACKAGES = [
+	'@wordpress/admin-ui',
 	'@wordpress/dataviews',
 	'@wordpress/dataviews/wp',
 	'@wordpress/icons',

diff --git a/packages/edit-post/package.json b/packages/edit-post/package.json
@@ -30,6 +30,7 @@
 	"dependencies": {
 		"@babel/runtime": "7.25.7",
 		"@wordpress/a11y": "file:../a11y",
+		"@wordpress/admin-ui": "file:../admin-ui",
 		"@wordpress/api-fetch": "file:../api-fetch",
 		"@wordpress/block-editor": "file:../block-editor",
 		"@wordpress/block-library": "file:../block-library",
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		<!-- Learn how to maintain this file at https://github.com/WordPress/gutenberg/tree/HEAD/packages#maintaining-changelogs. -->

		## Unreleased
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		export { default as NavigableRegion } from './navigable-region';
		export { default as Page } from './page';