@wordpress/admin-ui 1.10.0 → 1.11.0

package/CHANGELOG.md

@@ -2,21 +2,28 @@
 
 ## Unreleased
 
+## 1.11.0 (2026-04-01)
+
+### Bug Fixes
+
+-   `Breadcrumbs`: throw a runtime error when non-last items are missing a `to` prop [#76493](https://github.com/WordPress/gutenberg/pull/76493/)
+-   Fix Page Header not rendering when only `actions` prop is provided. [#76695](https://github.com/WordPress/gutenberg/pull/76695)
+
 ## 1.10.0 (2026-03-18)
 
-- Update Title and Breadcrumbs font sizes. [#76452](https://github.com/WordPress/gutenberg/pull/76452)
+-   Update Title and Breadcrumbs font sizes. [#76452](https://github.com/WordPress/gutenberg/pull/76452)
 
 ## 1.9.0 (2026-03-04)
 
 ### Bug Fixes
 
-- Fix type mismatch between Page `title` (ReactNode) and NavigableRegion `ariaLabel` (string) by adding an optional `ariaLabel` prop to Page that falls back to `title` when it is a string. [#75899](https://github.com/WordPress/gutenberg/pull/75899/)
+-   Fix type mismatch between Page `title` (ReactNode) and NavigableRegion `ariaLabel` (string) by adding an optional `ariaLabel` prop to Page that falls back to `title` when it is a string. [#75899](https://github.com/WordPress/gutenberg/pull/75899/)
 
 ## 1.8.0 (2026-02-18)
 
 ### Enhancements
 
-- Apply `text-wrap: pretty` for more balanced text in Page component [#74907](https://github.com/WordPress/gutenberg/pull/74907)
+-   Apply `text-wrap: pretty` for more balanced text in Page component [#74907](https://github.com/WordPress/gutenberg/pull/74907)
 
 ## 1.7.0 (2026-01-29)
 

package/README.md

@@ -1,6 +1,8 @@
 # Admin UI
 
-Generic components to be used to build the Admin UI.
+UI components for building consistent admin page layouts.
+
+While `@wordpress/ui` provides low-level, generic UI components that can be composed in flexible arrangements for building admin features, the purpose of this package is to guarantee consistency in the common page structure of an admin page layout. This includes high-level abstractions for a page, its sidebar, header, navigation, and other standardized page layout elements. The goal of standardizing these layouts is to provide a cohesive and predictable experience for users.
 
 ## Installation
 
@@ -16,7 +18,26 @@ npm install @wordpress/admin-ui --save
 
 ### Breadcrumbs
 
-Undocumented declaration.
+Renders a breadcrumb navigation trail.
+
+All items except the last one must provide a `to` prop for navigation. In development mode, an error is thrown when a non-last item is missing `to`. The last item represents the current page and its `to` prop is optional. Only the last item (when it has no `to` prop) is rendered as an `h1`.
+
+_Usage_
+
+```jsx
+<Breadcrumbs
+	items={ [
+		{ label: 'Home', to: '/' },
+		{ label: 'Settings', to: '/settings' },
+		{ label: 'General' },
+	] }
+/>
+```
+
+_Parameters_
+
+-   _props_ `BreadcrumbsProps`:
+-   _props.items_ `BreadcrumbsProps[ 'items' ]`: The breadcrumb items to display.
 
 ### NavigableRegion
 

package/build/breadcrumbs/index.cjs

@@ -28,19 +28,21 @@ var import_route = require("@wordpress/route");
 var import_i18n = require("@wordpress/i18n");
 var import_components = require("@wordpress/components");
 var import_jsx_runtime = require("react/jsx-runtime");
-var BreadcrumbItem = ({
-  item: { label, to }
-}) => {
-  if (!to) {
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.__experimentalHeading, { level: 1, truncate: true, children: label }) });
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_route.Link, { to, children: label }) });
-};
 var Breadcrumbs = ({ items }) => {
   if (!items.length) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("nav", { "aria-label": (0, import_i18n.__)("Breadcrumbs"), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  const precedingItems = items.slice(0, -1);
+  const lastItem = items[items.length - 1];
+  if (process.env.NODE_ENV !== "production") {
+    const invalidItem = precedingItems.find((item) => !item.to);
+    if (invalidItem) {
+      throw new Error(
+        `Breadcrumbs: item "${invalidItem.label}" is missing a \`to\` prop. All items except the last one must have a \`to\` prop.`
+      );
+    }
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("nav", { "aria-label": (0, import_i18n.__)("Breadcrumbs"), children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
     import_components.__experimentalHStack,
     {
       as: "ul",
@@ -48,7 +50,10 @@ var Breadcrumbs = ({ items }) => {
       spacing: 0,
       justify: "flex-start",
       alignment: "center",
-      children: items.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(BreadcrumbItem, { item }, index))
+      children: [
+        precedingItems.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_route.Link, { to: item.to, children: item.label }) }, index)),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("li", { children: lastItem.to ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_route.Link, { to: lastItem.to, children: lastItem.label }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.__experimentalHeading, { level: 1, truncate: true, children: lastItem.label }) })
+      ]
     }
   ) });
 };

package/build/breadcrumbs/index.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/breadcrumbs/index.tsx"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { Link } from '@wordpress/route';\nimport { __ } from '@wordpress/i18n';\nimport {\n\t__experimentalHeading as Heading,\n\t__experimentalHStack as HStack,\n} from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport type {\n\tBreadcrumbsProps,\n\tBreadcrumbItem as BreadcrumbItemType,\n} from './types';\n\nconst BreadcrumbItem = ( {\n\titem: { label, to },\n}: {\n\titem: BreadcrumbItemType;\n} ) => {\n\tif ( ! to ) {\n\t\treturn (\n\t\t\t<li>\n\t\t\t\t<Heading level={ 1 } truncate>\n\t\t\t\t\t{ label }\n\t\t\t\t</Heading>\n\t\t\t</li>\n\t\t);\n\t}\n\n\treturn (\n\t\t<li>\n\t\t\t<Link to={ to }>{ label }</Link>\n\t\t</li>\n\t);\n};\n\nexport const Breadcrumbs = ( { items }: BreadcrumbsProps ) => {\n\tif ( ! items.length ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<nav aria-label={ __( 'Breadcrumbs' ) }>\n\t\t\t<HStack\n\t\t\t\tas=\"ul\"\n\t\t\t\tclassName=\"admin-ui-breadcrumbs__list\"\n\t\t\t\tspacing={ 0 }\n\t\t\t\tjustify=\"flex-start\"\n\t\t\t\talignment=\"center\"\n\t\t\t>\n\t\t\t\t{ items.map( ( item, index ) => (\n\t\t\t\t\t<BreadcrumbItem key={ index } item={ item } />\n\t\t\t\t) ) }\n\t\t\t</HStack>\n\t\t</nav>\n\t);\n};\n\nexport default Breadcrumbs;\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,mBAAqB;AACrB,kBAAmB;AACnB,wBAGO;AAkBH;AARJ,IAAM,iBAAiB,CAAE;AAAA,EACxB,MAAM,EAAE,OAAO,GAAG;AACnB,MAEO;AACN,MAAK,CAAE,IAAK;AACX,WACC,4CAAC,QACA,sDAAC,kBAAAA,uBAAA,EAAQ,OAAQ,GAAI,UAAQ,MAC1B,iBACH,GACD;AAAA,EAEF;AAEA,SACC,4CAAC,QACA,sDAAC,qBAAK,IAAY,iBAAO,GAC1B;AAEF;AAEO,IAAM,cAAc,CAAE,EAAE,MAAM,MAAyB;AAC7D,MAAK,CAAE,MAAM,QAAS;AACrB,WAAO;AAAA,EACR;AAEA,SACC,4CAAC,SAAI,kBAAa,gBAAI,aAAc,GACnC;AAAA,IAAC,kBAAAC;AAAA,IAAA;AAAA,MACA,IAAG;AAAA,MACH,WAAU;AAAA,MACV,SAAU;AAAA,MACV,SAAQ;AAAA,MACR,WAAU;AAAA,MAER,gBAAM,IAAK,CAAE,MAAM,UACpB,4CAAC,kBAA6B,QAAR,KAAsB,CAC3C;AAAA;AAAA,EACH,GACD;AAEF;AAEA,IAAO,sBAAQ;",
-  "names": ["Heading", "HStack"]
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { Link } from '@wordpress/route';\nimport { __ } from '@wordpress/i18n';\nimport {\n\t__experimentalHeading as Heading,\n\t__experimentalHStack as HStack,\n} from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport type { BreadcrumbsProps } from './types';\n\n/**\n * Renders a breadcrumb navigation trail.\n *\n * All items except the last one must provide a `to` prop for navigation.\n * In development mode, an error is thrown when a non-last item is missing `to`.\n * The last item represents the current page and its `to` prop is optional.\n * Only the last item (when it has no `to` prop) is rendered as an `h1`.\n *\n * @param props\n * @param props.items The breadcrumb items to display.\n *\n * @example\n * ```jsx\n * <Breadcrumbs\n *   items={ [\n *     { label: 'Home', to: '/' },\n *     { label: 'Settings', to: '/settings' },\n *     { label: 'General' },\n *   ] }\n * />\n * ```\n */\nexport const Breadcrumbs = ( { items }: BreadcrumbsProps ) => {\n\tif ( ! items.length ) {\n\t\treturn null;\n\t}\n\n\tconst precedingItems = items.slice( 0, -1 );\n\tconst lastItem = items[ items.length - 1 ];\n\n\tif ( process.env.NODE_ENV !== 'production' ) {\n\t\tconst invalidItem = precedingItems.find( ( item ) => ! item.to );\n\t\tif ( invalidItem ) {\n\t\t\tthrow new Error(\n\t\t\t\t`Breadcrumbs: item \"${ invalidItem.label }\" is missing a \\`to\\` prop. All items except the last one must have a \\`to\\` prop.`\n\t\t\t);\n\t\t}\n\t}\n\n\treturn (\n\t\t<nav aria-label={ __( 'Breadcrumbs' ) }>\n\t\t\t<HStack\n\t\t\t\tas=\"ul\"\n\t\t\t\tclassName=\"admin-ui-breadcrumbs__list\"\n\t\t\t\tspacing={ 0 }\n\t\t\t\tjustify=\"flex-start\"\n\t\t\t\talignment=\"center\"\n\t\t\t>\n\t\t\t\t{ precedingItems.map( ( item, index ) => (\n\t\t\t\t\t<li key={ index }>\n\t\t\t\t\t\t<Link to={ item.to }>{ item.label }</Link>\n\t\t\t\t\t</li>\n\t\t\t\t) ) }\n\t\t\t\t<li>\n\t\t\t\t\t{ lastItem.to ? (\n\t\t\t\t\t\t<Link to={ lastItem.to }>{ lastItem.label }</Link>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<Heading level={ 1 } truncate>\n\t\t\t\t\t\t\t{ lastItem.label }\n\t\t\t\t\t\t</Heading>\n\t\t\t\t\t) }\n\t\t\t\t</li>\n\t\t\t</HStack>\n\t\t</nav>\n\t);\n};\n\nexport default Breadcrumbs;\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,mBAAqB;AACrB,kBAAmB;AACnB,wBAGO;AAgDJ;AAnBI,IAAM,cAAc,CAAE,EAAE,MAAM,MAAyB;AAC7D,MAAK,CAAE,MAAM,QAAS;AACrB,WAAO;AAAA,EACR;AAEA,QAAM,iBAAiB,MAAM,MAAO,GAAG,EAAG;AAC1C,QAAM,WAAW,MAAO,MAAM,SAAS,CAAE;AAEzC,MAAK,QAAQ,IAAI,aAAa,cAAe;AAC5C,UAAM,cAAc,eAAe,KAAM,CAAE,SAAU,CAAE,KAAK,EAAG;AAC/D,QAAK,aAAc;AAClB,YAAM,IAAI;AAAA,QACT,sBAAuB,YAAY,KAAM;AAAA,MAC1C;AAAA,IACD;AAAA,EACD;AAEA,SACC,4CAAC,SAAI,kBAAa,gBAAI,aAAc,GACnC;AAAA,IAAC,kBAAAA;AAAA,IAAA;AAAA,MACA,IAAG;AAAA,MACH,WAAU;AAAA,MACV,SAAU;AAAA,MACV,SAAQ;AAAA,MACR,WAAU;AAAA,MAER;AAAA,uBAAe,IAAK,CAAE,MAAM,UAC7B,4CAAC,QACA,sDAAC,qBAAK,IAAK,KAAK,IAAO,eAAK,OAAO,KAD1B,KAEV,CACC;AAAA,QACF,4CAAC,QACE,mBAAS,KACV,4CAAC,qBAAK,IAAK,SAAS,IAAO,mBAAS,OAAO,IAE3C,4CAAC,kBAAAC,uBAAA,EAAQ,OAAQ,GAAI,UAAQ,MAC1B,mBAAS,OACZ,GAEF;AAAA;AAAA;AAAA,EACD,GACD;AAEF;AAEA,IAAO,sBAAQ;",
+  "names": ["HStack", "Heading"]
 }

package/build/breadcrumbs/types.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/breadcrumbs/types.ts"],
-  "sourcesContent": ["export interface BreadcrumbItem {\n\t/**\n\t * The label text for the breadcrumb item.\n\t */\n\tlabel: string;\n\n\t/**\n\t * The router path that the breadcrumb item should link to.\n\t * It is optional because the current item does not have a link.\n\t */\n\tto?: string;\n}\n\nexport interface BreadcrumbsProps extends React.HTMLAttributes< HTMLElement > {\n\t/**\n\t * An array of items to display in the breadcrumb trail.\n\t * The last item is considered the current item.\n\t */\n\titems: BreadcrumbItem[];\n\t/**\n\t * A boolean to show/hide the current item in the trail.\n\t * Note that when `false` the current item is only visually hidden.\n\t */\n\tshowCurrentItem?: boolean;\n}\n"],
+  "sourcesContent": ["export interface BreadcrumbItem {\n\t/**\n\t * The label text for the breadcrumb item.\n\t */\n\tlabel: string;\n\n\t/**\n\t * The router path that the breadcrumb item should link to.\n\t * It is optional for the last item (the current page).\n\t * All preceding items should provide a `to` prop.\n\t */\n\tto?: string;\n}\n\nexport interface BreadcrumbsProps extends React.HTMLAttributes< HTMLElement > {\n\t/**\n\t * An array of items to display in the breadcrumb trail.\n\t * The last item is considered the current item and has an optional `to` prop.\n\t * All preceding items must have a `to` prop \u2014 in development mode,\n\t * an error is thrown when this requirement is not met.\n\t */\n\titems: BreadcrumbItem[];\n\t/**\n\t * A boolean to show/hide the current item in the trail.\n\t * Note that when `false` the current item is only visually hidden.\n\t */\n\tshowCurrentItem?: boolean;\n}\n"],
   "mappings": ";;;;;;;;;;;;;;;;AAAA;AAAA;",
   "names": []
 }

package/build/page/index.cjs

@@ -54,7 +54,7 @@ function Page({
   const classes = (0, import_clsx.default)("admin-ui-page", className);
   const effectiveAriaLabel = ariaLabel ?? (typeof title === "string" ? title : "");
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_navigable_region.default, { className: classes, ariaLabel: effectiveAriaLabel, children: [
-    (title || breadcrumbs || badges) && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    (title || breadcrumbs || badges || actions) && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       import_header.default,
       {
         headingLevel,

package/build/page/index.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/page/index.tsx"],
-  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * Internal dependencies\n */\nimport Header from './header';\nimport NavigableRegion from '../navigable-region';\nimport { SidebarToggleFill } from './sidebar-toggle-slot';\n\nfunction Page( {\n\theadingLevel,\n\tbreadcrumbs,\n\tbadges,\n\ttitle,\n\tsubTitle,\n\tchildren,\n\tclassName,\n\tactions,\n\tariaLabel,\n\thasPadding = false,\n\tshowSidebarToggle = true,\n}: {\n\theadingLevel?: 1 | 2 | 3 | 4 | 5 | 6;\n\tbreadcrumbs?: React.ReactNode;\n\tbadges?: React.ReactNode;\n\ttitle?: React.ReactNode;\n\tsubTitle?: React.ReactNode;\n\tchildren: React.ReactNode;\n\tclassName?: string;\n\tactions?: React.ReactNode;\n\tariaLabel?: string;\n\thasPadding?: boolean;\n\tshowSidebarToggle?: boolean;\n} ) {\n\tconst classes = clsx( 'admin-ui-page', className );\n\tconst effectiveAriaLabel =\n\t\tariaLabel ?? ( typeof title === 'string' ? title : '' );\n\n\treturn (\n\t\t<NavigableRegion className={ classes } ariaLabel={ effectiveAriaLabel }>\n\t\t\t{ ( title || breadcrumbs || badges ) && (\n\t\t\t\t<Header\n\t\t\t\t\theadingLevel={ headingLevel }\n\t\t\t\t\tbreadcrumbs={ breadcrumbs }\n\t\t\t\t\tbadges={ badges }\n\t\t\t\t\ttitle={ title }\n\t\t\t\t\tsubTitle={ subTitle }\n\t\t\t\t\tactions={ actions }\n\t\t\t\t\tshowSidebarToggle={ showSidebarToggle }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t{ hasPadding ? (\n\t\t\t\t<div className=\"admin-ui-page__content has-padding\">\n\t\t\t\t\t{ children }\n\t\t\t\t</div>\n\t\t\t) : (\n\t\t\t\tchildren\n\t\t\t) }\n\t\t</NavigableRegion>\n\t);\n}\n\nPage.SidebarToggleFill = SidebarToggleFill;\n\nexport default Page;\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,kBAAiB;AAKjB,oBAAmB;AACnB,8BAA4B;AAC5B,iCAAkC;AAgChC;AA9BF,SAAS,KAAM;AAAA,EACd;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,aAAa;AAAA,EACb,oBAAoB;AACrB,GAYI;AACH,QAAM,cAAU,YAAAA,SAAM,iBAAiB,SAAU;AACjD,QAAM,qBACL,cAAe,OAAO,UAAU,WAAW,QAAQ;AAEpD,SACC,6CAAC,wBAAAC,SAAA,EAAgB,WAAY,SAAU,WAAY,oBAC9C;AAAA,cAAS,eAAe,WAC3B;AAAA,MAAC,cAAAC;AAAA,MAAA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA;AAAA,IACD;AAAA,IAEC,aACD,4CAAC,SAAI,WAAU,sCACZ,UACH,IAEA;AAAA,KAEF;AAEF;AAEA,KAAK,oBAAoB;AAEzB,IAAO,eAAQ;",
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * Internal dependencies\n */\nimport Header from './header';\nimport NavigableRegion from '../navigable-region';\nimport { SidebarToggleFill } from './sidebar-toggle-slot';\n\nfunction Page( {\n\theadingLevel,\n\tbreadcrumbs,\n\tbadges,\n\ttitle,\n\tsubTitle,\n\tchildren,\n\tclassName,\n\tactions,\n\tariaLabel,\n\thasPadding = false,\n\tshowSidebarToggle = true,\n}: {\n\theadingLevel?: 1 | 2 | 3 | 4 | 5 | 6;\n\tbreadcrumbs?: React.ReactNode;\n\tbadges?: React.ReactNode;\n\ttitle?: React.ReactNode;\n\tsubTitle?: React.ReactNode;\n\tchildren: React.ReactNode;\n\tclassName?: string;\n\tactions?: React.ReactNode;\n\tariaLabel?: string;\n\thasPadding?: boolean;\n\tshowSidebarToggle?: boolean;\n} ) {\n\tconst classes = clsx( 'admin-ui-page', className );\n\tconst effectiveAriaLabel =\n\t\tariaLabel ?? ( typeof title === 'string' ? title : '' );\n\n\treturn (\n\t\t<NavigableRegion className={ classes } ariaLabel={ effectiveAriaLabel }>\n\t\t\t{ ( title || breadcrumbs || badges || actions ) && (\n\t\t\t\t<Header\n\t\t\t\t\theadingLevel={ headingLevel }\n\t\t\t\t\tbreadcrumbs={ breadcrumbs }\n\t\t\t\t\tbadges={ badges }\n\t\t\t\t\ttitle={ title }\n\t\t\t\t\tsubTitle={ subTitle }\n\t\t\t\t\tactions={ actions }\n\t\t\t\t\tshowSidebarToggle={ showSidebarToggle }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t{ hasPadding ? (\n\t\t\t\t<div className=\"admin-ui-page__content has-padding\">\n\t\t\t\t\t{ children }\n\t\t\t\t</div>\n\t\t\t) : (\n\t\t\t\tchildren\n\t\t\t) }\n\t\t</NavigableRegion>\n\t);\n}\n\nPage.SidebarToggleFill = SidebarToggleFill;\n\nexport default Page;\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,kBAAiB;AAKjB,oBAAmB;AACnB,8BAA4B;AAC5B,iCAAkC;AAgChC;AA9BF,SAAS,KAAM;AAAA,EACd;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,aAAa;AAAA,EACb,oBAAoB;AACrB,GAYI;AACH,QAAM,cAAU,YAAAA,SAAM,iBAAiB,SAAU;AACjD,QAAM,qBACL,cAAe,OAAO,UAAU,WAAW,QAAQ;AAEpD,SACC,6CAAC,wBAAAC,SAAA,EAAgB,WAAY,SAAU,WAAY,oBAC9C;AAAA,cAAS,eAAe,UAAU,YACrC;AAAA,MAAC,cAAAC;AAAA,MAAA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA;AAAA,IACD;AAAA,IAEC,aACD,4CAAC,SAAI,WAAU,sCACZ,UACH,IAEA;AAAA,KAEF;AAEF;AAEA,KAAK,oBAAoB;AAEzB,IAAO,eAAQ;",
   "names": ["clsx", "NavigableRegion", "Header"]
 }

package/build-module/breadcrumbs/index.mjs

@@ -5,20 +5,22 @@ import {
   __experimentalHeading as Heading,
   __experimentalHStack as HStack
 } from "@wordpress/components";
-import { jsx } from "react/jsx-runtime";
-var BreadcrumbItem = ({
-  item: { label, to }
-}) => {
-  if (!to) {
-    return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(Heading, { level: 1, truncate: true, children: label }) });
-  }
-  return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(Link, { to, children: label }) });
-};
+import { jsx, jsxs } from "react/jsx-runtime";
 var Breadcrumbs = ({ items }) => {
   if (!items.length) {
     return null;
   }
-  return /* @__PURE__ */ jsx("nav", { "aria-label": __("Breadcrumbs"), children: /* @__PURE__ */ jsx(
+  const precedingItems = items.slice(0, -1);
+  const lastItem = items[items.length - 1];
+  if (process.env.NODE_ENV !== "production") {
+    const invalidItem = precedingItems.find((item) => !item.to);
+    if (invalidItem) {
+      throw new Error(
+        `Breadcrumbs: item "${invalidItem.label}" is missing a \`to\` prop. All items except the last one must have a \`to\` prop.`
+      );
+    }
+  }
+  return /* @__PURE__ */ jsx("nav", { "aria-label": __("Breadcrumbs"), children: /* @__PURE__ */ jsxs(
     HStack,
     {
       as: "ul",
@@ -26,7 +28,10 @@ var Breadcrumbs = ({ items }) => {
       spacing: 0,
       justify: "flex-start",
       alignment: "center",
-      children: items.map((item, index) => /* @__PURE__ */ jsx(BreadcrumbItem, { item }, index))
+      children: [
+        precedingItems.map((item, index) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(Link, { to: item.to, children: item.label }) }, index)),
+        /* @__PURE__ */ jsx("li", { children: lastItem.to ? /* @__PURE__ */ jsx(Link, { to: lastItem.to, children: lastItem.label }) : /* @__PURE__ */ jsx(Heading, { level: 1, truncate: true, children: lastItem.label }) })
+      ]
     }
   ) });
 };

package/build-module/breadcrumbs/index.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/breadcrumbs/index.tsx"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { Link } from '@wordpress/route';\nimport { __ } from '@wordpress/i18n';\nimport {\n\t__experimentalHeading as Heading,\n\t__experimentalHStack as HStack,\n} from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport type {\n\tBreadcrumbsProps,\n\tBreadcrumbItem as BreadcrumbItemType,\n} from './types';\n\nconst BreadcrumbItem = ( {\n\titem: { label, to },\n}: {\n\titem: BreadcrumbItemType;\n} ) => {\n\tif ( ! to ) {\n\t\treturn (\n\t\t\t<li>\n\t\t\t\t<Heading level={ 1 } truncate>\n\t\t\t\t\t{ label }\n\t\t\t\t</Heading>\n\t\t\t</li>\n\t\t);\n\t}\n\n\treturn (\n\t\t<li>\n\t\t\t<Link to={ to }>{ label }</Link>\n\t\t</li>\n\t);\n};\n\nexport const Breadcrumbs = ( { items }: BreadcrumbsProps ) => {\n\tif ( ! items.length ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<nav aria-label={ __( 'Breadcrumbs' ) }>\n\t\t\t<HStack\n\t\t\t\tas=\"ul\"\n\t\t\t\tclassName=\"admin-ui-breadcrumbs__list\"\n\t\t\t\tspacing={ 0 }\n\t\t\t\tjustify=\"flex-start\"\n\t\t\t\talignment=\"center\"\n\t\t\t>\n\t\t\t\t{ items.map( ( item, index ) => (\n\t\t\t\t\t<BreadcrumbItem key={ index } item={ item } />\n\t\t\t\t) ) }\n\t\t\t</HStack>\n\t\t</nav>\n\t);\n};\n\nexport default Breadcrumbs;\n"],
-  "mappings": ";AAGA,SAAS,YAAY;AACrB,SAAS,UAAU;AACnB;AAAA,EACC,yBAAyB;AAAA,EACzB,wBAAwB;AAAA,OAClB;AAkBH;AARJ,IAAM,iBAAiB,CAAE;AAAA,EACxB,MAAM,EAAE,OAAO,GAAG;AACnB,MAEO;AACN,MAAK,CAAE,IAAK;AACX,WACC,oBAAC,QACA,8BAAC,WAAQ,OAAQ,GAAI,UAAQ,MAC1B,iBACH,GACD;AAAA,EAEF;AAEA,SACC,oBAAC,QACA,8BAAC,QAAK,IAAY,iBAAO,GAC1B;AAEF;AAEO,IAAM,cAAc,CAAE,EAAE,MAAM,MAAyB;AAC7D,MAAK,CAAE,MAAM,QAAS;AACrB,WAAO;AAAA,EACR;AAEA,SACC,oBAAC,SAAI,cAAa,GAAI,aAAc,GACnC;AAAA,IAAC;AAAA;AAAA,MACA,IAAG;AAAA,MACH,WAAU;AAAA,MACV,SAAU;AAAA,MACV,SAAQ;AAAA,MACR,WAAU;AAAA,MAER,gBAAM,IAAK,CAAE,MAAM,UACpB,oBAAC,kBAA6B,QAAR,KAAsB,CAC3C;AAAA;AAAA,EACH,GACD;AAEF;AAEA,IAAO,sBAAQ;",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { Link } from '@wordpress/route';\nimport { __ } from '@wordpress/i18n';\nimport {\n\t__experimentalHeading as Heading,\n\t__experimentalHStack as HStack,\n} from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport type { BreadcrumbsProps } from './types';\n\n/**\n * Renders a breadcrumb navigation trail.\n *\n * All items except the last one must provide a `to` prop for navigation.\n * In development mode, an error is thrown when a non-last item is missing `to`.\n * The last item represents the current page and its `to` prop is optional.\n * Only the last item (when it has no `to` prop) is rendered as an `h1`.\n *\n * @param props\n * @param props.items The breadcrumb items to display.\n *\n * @example\n * ```jsx\n * <Breadcrumbs\n *   items={ [\n *     { label: 'Home', to: '/' },\n *     { label: 'Settings', to: '/settings' },\n *     { label: 'General' },\n *   ] }\n * />\n * ```\n */\nexport const Breadcrumbs = ( { items }: BreadcrumbsProps ) => {\n\tif ( ! items.length ) {\n\t\treturn null;\n\t}\n\n\tconst precedingItems = items.slice( 0, -1 );\n\tconst lastItem = items[ items.length - 1 ];\n\n\tif ( process.env.NODE_ENV !== 'production' ) {\n\t\tconst invalidItem = precedingItems.find( ( item ) => ! item.to );\n\t\tif ( invalidItem ) {\n\t\t\tthrow new Error(\n\t\t\t\t`Breadcrumbs: item \"${ invalidItem.label }\" is missing a \\`to\\` prop. All items except the last one must have a \\`to\\` prop.`\n\t\t\t);\n\t\t}\n\t}\n\n\treturn (\n\t\t<nav aria-label={ __( 'Breadcrumbs' ) }>\n\t\t\t<HStack\n\t\t\t\tas=\"ul\"\n\t\t\t\tclassName=\"admin-ui-breadcrumbs__list\"\n\t\t\t\tspacing={ 0 }\n\t\t\t\tjustify=\"flex-start\"\n\t\t\t\talignment=\"center\"\n\t\t\t>\n\t\t\t\t{ precedingItems.map( ( item, index ) => (\n\t\t\t\t\t<li key={ index }>\n\t\t\t\t\t\t<Link to={ item.to }>{ item.label }</Link>\n\t\t\t\t\t</li>\n\t\t\t\t) ) }\n\t\t\t\t<li>\n\t\t\t\t\t{ lastItem.to ? (\n\t\t\t\t\t\t<Link to={ lastItem.to }>{ lastItem.label }</Link>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<Heading level={ 1 } truncate>\n\t\t\t\t\t\t\t{ lastItem.label }\n\t\t\t\t\t\t</Heading>\n\t\t\t\t\t) }\n\t\t\t\t</li>\n\t\t\t</HStack>\n\t\t</nav>\n\t);\n};\n\nexport default Breadcrumbs;\n"],
+  "mappings": ";AAGA,SAAS,YAAY;AACrB,SAAS,UAAU;AACnB;AAAA,EACC,yBAAyB;AAAA,EACzB,wBAAwB;AAAA,OAClB;AAgDJ,SASG,KATH;AAnBI,IAAM,cAAc,CAAE,EAAE,MAAM,MAAyB;AAC7D,MAAK,CAAE,MAAM,QAAS;AACrB,WAAO;AAAA,EACR;AAEA,QAAM,iBAAiB,MAAM,MAAO,GAAG,EAAG;AAC1C,QAAM,WAAW,MAAO,MAAM,SAAS,CAAE;AAEzC,MAAK,QAAQ,IAAI,aAAa,cAAe;AAC5C,UAAM,cAAc,eAAe,KAAM,CAAE,SAAU,CAAE,KAAK,EAAG;AAC/D,QAAK,aAAc;AAClB,YAAM,IAAI;AAAA,QACT,sBAAuB,YAAY,KAAM;AAAA,MAC1C;AAAA,IACD;AAAA,EACD;AAEA,SACC,oBAAC,SAAI,cAAa,GAAI,aAAc,GACnC;AAAA,IAAC;AAAA;AAAA,MACA,IAAG;AAAA,MACH,WAAU;AAAA,MACV,SAAU;AAAA,MACV,SAAQ;AAAA,MACR,WAAU;AAAA,MAER;AAAA,uBAAe,IAAK,CAAE,MAAM,UAC7B,oBAAC,QACA,8BAAC,QAAK,IAAK,KAAK,IAAO,eAAK,OAAO,KAD1B,KAEV,CACC;AAAA,QACF,oBAAC,QACE,mBAAS,KACV,oBAAC,QAAK,IAAK,SAAS,IAAO,mBAAS,OAAO,IAE3C,oBAAC,WAAQ,OAAQ,GAAI,UAAQ,MAC1B,mBAAS,OACZ,GAEF;AAAA;AAAA;AAAA,EACD,GACD;AAEF;AAEA,IAAO,sBAAQ;",
   "names": []
 }

package/build-module/page/index.mjs

@@ -20,7 +20,7 @@ function Page({
   const classes = clsx("admin-ui-page", className);
   const effectiveAriaLabel = ariaLabel ?? (typeof title === "string" ? title : "");
   return /* @__PURE__ */ jsxs(NavigableRegion, { className: classes, ariaLabel: effectiveAriaLabel, children: [
-    (title || breadcrumbs || badges) && /* @__PURE__ */ jsx(
+    (title || breadcrumbs || badges || actions) && /* @__PURE__ */ jsx(
       Header,
       {
         headingLevel,

package/build-module/page/index.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/page/index.tsx"],
-  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * Internal dependencies\n */\nimport Header from './header';\nimport NavigableRegion from '../navigable-region';\nimport { SidebarToggleFill } from './sidebar-toggle-slot';\n\nfunction Page( {\n\theadingLevel,\n\tbreadcrumbs,\n\tbadges,\n\ttitle,\n\tsubTitle,\n\tchildren,\n\tclassName,\n\tactions,\n\tariaLabel,\n\thasPadding = false,\n\tshowSidebarToggle = true,\n}: {\n\theadingLevel?: 1 | 2 | 3 | 4 | 5 | 6;\n\tbreadcrumbs?: React.ReactNode;\n\tbadges?: React.ReactNode;\n\ttitle?: React.ReactNode;\n\tsubTitle?: React.ReactNode;\n\tchildren: React.ReactNode;\n\tclassName?: string;\n\tactions?: React.ReactNode;\n\tariaLabel?: string;\n\thasPadding?: boolean;\n\tshowSidebarToggle?: boolean;\n} ) {\n\tconst classes = clsx( 'admin-ui-page', className );\n\tconst effectiveAriaLabel =\n\t\tariaLabel ?? ( typeof title === 'string' ? title : '' );\n\n\treturn (\n\t\t<NavigableRegion className={ classes } ariaLabel={ effectiveAriaLabel }>\n\t\t\t{ ( title || breadcrumbs || badges ) && (\n\t\t\t\t<Header\n\t\t\t\t\theadingLevel={ headingLevel }\n\t\t\t\t\tbreadcrumbs={ breadcrumbs }\n\t\t\t\t\tbadges={ badges }\n\t\t\t\t\ttitle={ title }\n\t\t\t\t\tsubTitle={ subTitle }\n\t\t\t\t\tactions={ actions }\n\t\t\t\t\tshowSidebarToggle={ showSidebarToggle }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t{ hasPadding ? (\n\t\t\t\t<div className=\"admin-ui-page__content has-padding\">\n\t\t\t\t\t{ children }\n\t\t\t\t</div>\n\t\t\t) : (\n\t\t\t\tchildren\n\t\t\t) }\n\t\t</NavigableRegion>\n\t);\n}\n\nPage.SidebarToggleFill = SidebarToggleFill;\n\nexport default Page;\n"],
-  "mappings": ";AAGA,OAAO,UAAU;AAKjB,OAAO,YAAY;AACnB,OAAO,qBAAqB;AAC5B,SAAS,yBAAyB;AAgChC,SAEE,KAFF;AA9BF,SAAS,KAAM;AAAA,EACd;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,aAAa;AAAA,EACb,oBAAoB;AACrB,GAYI;AACH,QAAM,UAAU,KAAM,iBAAiB,SAAU;AACjD,QAAM,qBACL,cAAe,OAAO,UAAU,WAAW,QAAQ;AAEpD,SACC,qBAAC,mBAAgB,WAAY,SAAU,WAAY,oBAC9C;AAAA,cAAS,eAAe,WAC3B;AAAA,MAAC;AAAA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA;AAAA,IACD;AAAA,IAEC,aACD,oBAAC,SAAI,WAAU,sCACZ,UACH,IAEA;AAAA,KAEF;AAEF;AAEA,KAAK,oBAAoB;AAEzB,IAAO,eAAQ;",
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * Internal dependencies\n */\nimport Header from './header';\nimport NavigableRegion from '../navigable-region';\nimport { SidebarToggleFill } from './sidebar-toggle-slot';\n\nfunction Page( {\n\theadingLevel,\n\tbreadcrumbs,\n\tbadges,\n\ttitle,\n\tsubTitle,\n\tchildren,\n\tclassName,\n\tactions,\n\tariaLabel,\n\thasPadding = false,\n\tshowSidebarToggle = true,\n}: {\n\theadingLevel?: 1 | 2 | 3 | 4 | 5 | 6;\n\tbreadcrumbs?: React.ReactNode;\n\tbadges?: React.ReactNode;\n\ttitle?: React.ReactNode;\n\tsubTitle?: React.ReactNode;\n\tchildren: React.ReactNode;\n\tclassName?: string;\n\tactions?: React.ReactNode;\n\tariaLabel?: string;\n\thasPadding?: boolean;\n\tshowSidebarToggle?: boolean;\n} ) {\n\tconst classes = clsx( 'admin-ui-page', className );\n\tconst effectiveAriaLabel =\n\t\tariaLabel ?? ( typeof title === 'string' ? title : '' );\n\n\treturn (\n\t\t<NavigableRegion className={ classes } ariaLabel={ effectiveAriaLabel }>\n\t\t\t{ ( title || breadcrumbs || badges || actions ) && (\n\t\t\t\t<Header\n\t\t\t\t\theadingLevel={ headingLevel }\n\t\t\t\t\tbreadcrumbs={ breadcrumbs }\n\t\t\t\t\tbadges={ badges }\n\t\t\t\t\ttitle={ title }\n\t\t\t\t\tsubTitle={ subTitle }\n\t\t\t\t\tactions={ actions }\n\t\t\t\t\tshowSidebarToggle={ showSidebarToggle }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t{ hasPadding ? (\n\t\t\t\t<div className=\"admin-ui-page__content has-padding\">\n\t\t\t\t\t{ children }\n\t\t\t\t</div>\n\t\t\t) : (\n\t\t\t\tchildren\n\t\t\t) }\n\t\t</NavigableRegion>\n\t);\n}\n\nPage.SidebarToggleFill = SidebarToggleFill;\n\nexport default Page;\n"],
+  "mappings": ";AAGA,OAAO,UAAU;AAKjB,OAAO,YAAY;AACnB,OAAO,qBAAqB;AAC5B,SAAS,yBAAyB;AAgChC,SAEE,KAFF;AA9BF,SAAS,KAAM;AAAA,EACd;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,aAAa;AAAA,EACb,oBAAoB;AACrB,GAYI;AACH,QAAM,UAAU,KAAM,iBAAiB,SAAU;AACjD,QAAM,qBACL,cAAe,OAAO,UAAU,WAAW,QAAQ;AAEpD,SACC,qBAAC,mBAAgB,WAAY,SAAU,WAAY,oBAC9C;AAAA,cAAS,eAAe,UAAU,YACrC;AAAA,MAAC;AAAA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA;AAAA,IACD;AAAA,IAEC,aACD,oBAAC,SAAI,WAAU,sCACZ,UACH,IAEA;AAAA,KAEF;AAEF;AAEA,KAAK,oBAAoB;AAEzB,IAAO,eAAQ;",
   "names": []
 }

package/build-types/breadcrumbs/index.d.ts

@@ -2,6 +2,28 @@
  * Internal dependencies
  */
 import type { BreadcrumbsProps } from './types';
+/**
+ * Renders a breadcrumb navigation trail.
+ *
+ * All items except the last one must provide a `to` prop for navigation.
+ * In development mode, an error is thrown when a non-last item is missing `to`.
+ * The last item represents the current page and its `to` prop is optional.
+ * Only the last item (when it has no `to` prop) is rendered as an `h1`.
+ *
+ * @param props
+ * @param props.items The breadcrumb items to display.
+ *
+ * @example
+ * ```jsx
+ * <Breadcrumbs
+ *   items={ [
+ *     { label: 'Home', to: '/' },
+ *     { label: 'Settings', to: '/settings' },
+ *     { label: 'General' },
+ *   ] }
+ * />
+ * ```
+ */
 export declare const Breadcrumbs: ({ items }: BreadcrumbsProps) => import("react").JSX.Element | null;
 export default Breadcrumbs;
 //# sourceMappingURL=index.d.ts.map

package/build-types/breadcrumbs/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/breadcrumbs/index.tsx"],"names":[],"mappings":"AAUA;;GAEG;AACH,OAAO,KAAK,EACX,gBAAgB,EAEhB,MAAM,SAAS,CAAC;AAwBjB,eAAO,MAAM,WAAW,GAAK,WAAW,gBAAgB,uCAoBvD,CAAC;AAEF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/breadcrumbs/index.tsx"],"names":[],"mappings":"AAUA;;GAEG;AACH,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAEhD;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,eAAO,MAAM,WAAW,GAAK,WAAW,gBAAgB,uCA2CvD,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/build-types/breadcrumbs/types.d.ts

@@ -5,14 +5,17 @@ export interface BreadcrumbItem {
     label: string;
     /**
      * The router path that the breadcrumb item should link to.
-     * It is optional because the current item does not have a link.
+     * It is optional for the last item (the current page).
+     * All preceding items should provide a `to` prop.
      */
     to?: string;
 }
 export interface BreadcrumbsProps extends React.HTMLAttributes<HTMLElement> {
     /**
      * An array of items to display in the breadcrumb trail.
-     * The last item is considered the current item.
+     * The last item is considered the current item and has an optional `to` prop.
+     * All preceding items must have a `to` prop — in development mode,
+     * an error is thrown when this requirement is not met.
      */
     items: BreadcrumbItem[];
     /**

package/build-types/breadcrumbs/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/breadcrumbs/types.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,cAAc;IAC9B;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;;OAGG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;CACZ;AAED,MAAM,WAAW,gBAAiB,SAAQ,KAAK,CAAC,cAAc,CAAE,WAAW,CAAE;IAC5E;;;OAGG;IACH,KAAK,EAAE,cAAc,EAAE,CAAC;IACxB;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;CAC1B"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/breadcrumbs/types.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,cAAc;IAC9B;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;;;OAIG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;CACZ;AAED,MAAM,WAAW,gBAAiB,SAAQ,KAAK,CAAC,cAAc,CAAE,WAAW,CAAE;IAC5E;;;;;OAKG;IACH,KAAK,EAAE,cAAc,EAAE,CAAC;IACxB;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;CAC1B"}

package/build-types/page/stories/index.story.d.ts

@@ -13,4 +13,9 @@ export declare const Default: Story;
 export declare const WithSubtitle: Story;
 export declare const WithBreadcrumbs: Story;
 export declare const WithBreadcrumbsAndSubtitle: Story;
+export declare const WithoutHeader: Story;
+export declare const WithTitleAndBadges: Story;
+export declare const WithBreadcrumbsAndBadges: Story;
+export declare const WithActions: Story;
+export declare const FullHeader: Story;
 //# sourceMappingURL=index.story.d.ts.map

package/build-types/page/stories/index.story.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.story.d.ts","sourceRoot":"","sources":["../../../src/page/stories/index.story.tsx"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAG5D;;GAEG;AACH,OAAO,IAAI,MAAM,IAAI,CAAC;AAItB,QAAA,MAAM,IAAI,EAAE,IAAI,CAAE,OAAO,IAAI,CAc5B,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAE,OAAO,IAAI,CAAE,CAAC;AAErC,eAAO,MAAM,OAAO,EAAE,KAOrB,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAQ1B,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAc7B,CAAC;AAEF,eAAO,MAAM,0BAA0B,EAAE,KAexC,CAAC"}
+{"version":3,"file":"index.story.d.ts","sourceRoot":"","sources":["../../../src/page/stories/index.story.tsx"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAI5D;;GAEG;AACH,OAAO,IAAI,MAAM,IAAI,CAAC;AAItB,QAAA,MAAM,IAAI,EAAE,IAAI,CAAE,OAAO,IAAI,CAc5B,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAE,OAAO,IAAI,CAAE,CAAC;AAErC,eAAO,MAAM,OAAO,EAAE,KAOrB,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAQ1B,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAc7B,CAAC;AAEF,eAAO,MAAM,0BAA0B,EAAE,KAexC,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAM3B,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,KAQhC,CAAC;AAEF,eAAO,MAAM,wBAAwB,EAAE,KAetC,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAiBzB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KA0BxB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/admin-ui",
-	"version": "1.10.0",
+	"version": "1.11.0",
 	"description": "Generic components to be used in the Admin UI.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -43,15 +43,18 @@
 	},
 	"react-native": "src/index",
 	"types": "build-types",
-	"sideEffects": false,
+	"sideEffects": [
+		"build-style/**",
+		"src/**/*.scss"
+	],
 	"dependencies": {
-		"@wordpress/base-styles": "^6.18.0",
-		"@wordpress/components": "^32.4.0",
-		"@wordpress/element": "^6.42.0",
-		"@wordpress/i18n": "^6.15.0",
-		"@wordpress/private-apis": "^1.42.0",
-		"@wordpress/route": "^0.8.0",
-		"@wordpress/ui": "^0.9.0",
+		"@wordpress/base-styles": "^6.19.0",
+		"@wordpress/components": "^32.5.0",
+		"@wordpress/element": "^6.43.0",
+		"@wordpress/i18n": "^6.16.0",
+		"@wordpress/private-apis": "^1.43.0",
+		"@wordpress/route": "^0.9.0",
+		"@wordpress/ui": "^0.10.0",
 		"clsx": "^2.1.1"
 	},
 	"peerDependencies": {
@@ -60,5 +63,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "c20787b1778ae64c2db65643b1c236309d68e6ba"
+	"gitHead": "2cea90674d11aa521ec3f71652fb3a6a4c383969"
 }

package/src/breadcrumbs/index.tsx

@@ -11,38 +11,47 @@ import {
 /**
  * Internal dependencies
  */
-import type {
-	BreadcrumbsProps,
-	BreadcrumbItem as BreadcrumbItemType,
-} from './types';
-
-const BreadcrumbItem = ( {
-	item: { label, to },
-}: {
-	item: BreadcrumbItemType;
-} ) => {
-	if ( ! to ) {
-		return (
-			<li>
-				<Heading level={ 1 } truncate>
-					{ label }
-				</Heading>
-			</li>
-		);
-	}
-
-	return (
-		<li>
-			<Link to={ to }>{ label }</Link>
-		</li>
-	);
-};
+import type { BreadcrumbsProps } from './types';
 
+/**
+ * Renders a breadcrumb navigation trail.
+ *
+ * All items except the last one must provide a `to` prop for navigation.
+ * In development mode, an error is thrown when a non-last item is missing `to`.
+ * The last item represents the current page and its `to` prop is optional.
+ * Only the last item (when it has no `to` prop) is rendered as an `h1`.
+ *
+ * @param props
+ * @param props.items The breadcrumb items to display.
+ *
+ * @example
+ * ```jsx
+ * <Breadcrumbs
+ *   items={ [
+ *     { label: 'Home', to: '/' },
+ *     { label: 'Settings', to: '/settings' },
+ *     { label: 'General' },
+ *   ] }
+ * />
+ * ```
+ */
 export const Breadcrumbs = ( { items }: BreadcrumbsProps ) => {
 	if ( ! items.length ) {
 		return null;
 	}
 
+	const precedingItems = items.slice( 0, -1 );
+	const lastItem = items[ items.length - 1 ];
+
+	if ( process.env.NODE_ENV !== 'production' ) {
+		const invalidItem = precedingItems.find( ( item ) => ! item.to );
+		if ( invalidItem ) {
+			throw new Error(
+				`Breadcrumbs: item "${ invalidItem.label }" is missing a \`to\` prop. All items except the last one must have a \`to\` prop.`
+			);
+		}
+	}
+
 	return (
 		<nav aria-label={ __( 'Breadcrumbs' ) }>
 			<HStack
@@ -52,9 +61,20 @@ export const Breadcrumbs = ( { items }: BreadcrumbsProps ) => {
 				justify="flex-start"
 				alignment="center"
 			>
-				{ items.map( ( item, index ) => (
-					<BreadcrumbItem key={ index } item={ item } />
+				{ precedingItems.map( ( item, index ) => (
+					<li key={ index }>
+						<Link to={ item.to }>{ item.label }</Link>
+					</li>
 				) ) }
+				<li>
+					{ lastItem.to ? (
+						<Link to={ lastItem.to }>{ lastItem.label }</Link>
+					) : (
+						<Heading level={ 1 } truncate>
+							{ lastItem.label }
+						</Heading>
+					) }
+				</li>
 			</HStack>
 		</nav>
 	);

package/src/breadcrumbs/test/index.test.tsx

@@ -0,0 +1,169 @@
+/**
+ * External dependencies
+ */
+import { render, screen } from '@testing-library/react';
+
+/**
+ * Internal dependencies
+ */
+import { Breadcrumbs } from '..';
+
+jest.mock( '@wordpress/route', () => ( {
+	Link: ( { to, children }: { to: string; children: React.ReactNode } ) => (
+		<a href={ to }>{ children }</a>
+	),
+} ) );
+
+describe( 'Breadcrumbs', () => {
+	describe( 'validation', () => {
+		it( 'should throw when a preceding item is missing `to`', () => {
+			expect( () =>
+				render(
+					<Breadcrumbs
+						items={ [
+							{ label: 'Home' },
+							{ label: 'Settings', to: '/settings' },
+							{ label: 'General' },
+						] }
+					/>
+				)
+			).toThrow( /item "Home" is missing a `to` prop/ );
+			expect( console ).toHaveErrored();
+		} );
+
+		it( 'should throw for the first preceding item missing `to`', () => {
+			expect( () =>
+				render(
+					<Breadcrumbs
+						items={ [
+							{ label: 'Home' },
+							{ label: 'Settings' },
+							{ label: 'General' },
+						] }
+					/>
+				)
+			).toThrow( /item "Home" is missing a `to` prop/ );
+			expect( console ).toHaveErrored();
+		} );
+
+		it( 'should not throw when all preceding items have `to`', () => {
+			expect( () =>
+				render(
+					<Breadcrumbs
+						items={ [
+							{ label: 'Home', to: '/' },
+							{ label: 'Settings', to: '/settings' },
+							{ label: 'General' },
+						] }
+					/>
+				)
+			).not.toThrow();
+		} );
+
+		it( 'should not throw when there is only one item without `to`', () => {
+			expect( () =>
+				render( <Breadcrumbs items={ [ { label: 'Dashboard' } ] } /> )
+			).not.toThrow();
+		} );
+
+		it( 'should not throw when items is empty', () => {
+			expect( () =>
+				render( <Breadcrumbs items={ [] } /> )
+			).not.toThrow();
+		} );
+	} );
+
+	describe( 'rendering', () => {
+		it( 'should render nothing when items is empty', () => {
+			const { container } = render( <Breadcrumbs items={ [] } /> );
+			expect( container ).toBeEmptyDOMElement();
+		} );
+
+		it( 'should render the last item as an h1 when it has no `to`', () => {
+			render(
+				<Breadcrumbs
+					items={ [
+						{ label: 'Home', to: '/' },
+						{ label: 'Current Page' },
+					] }
+				/>
+			);
+
+			expect(
+				screen.getByRole( 'heading', { level: 1 } )
+			).toHaveTextContent( 'Current Page' );
+		} );
+
+		it( 'should render the last item as a link when it has `to`', () => {
+			render(
+				<Breadcrumbs
+					items={ [
+						{ label: 'Home', to: '/' },
+						{ label: 'Settings', to: '/settings' },
+					] }
+				/>
+			);
+
+			expect(
+				screen.queryByRole( 'heading', { level: 1 } )
+			).not.toBeInTheDocument();
+
+			const links = screen.getAllByRole( 'link' );
+			expect( links ).toHaveLength( 2 );
+			expect( links[ 1 ] ).toHaveTextContent( 'Settings' );
+			expect( links[ 1 ] ).toHaveAttribute( 'href', '/settings' );
+		} );
+
+		it( 'should render preceding items as links', () => {
+			render(
+				<Breadcrumbs
+					items={ [
+						{ label: 'Home', to: '/' },
+						{ label: 'Settings', to: '/settings' },
+						{ label: 'General' },
+					] }
+				/>
+			);
+
+			const links = screen.getAllByRole( 'link' );
+			expect( links ).toHaveLength( 2 );
+			expect( links[ 0 ] ).toHaveTextContent( 'Home' );
+			expect( links[ 0 ] ).toHaveAttribute( 'href', '/' );
+			expect( links[ 1 ] ).toHaveTextContent( 'Settings' );
+			expect( links[ 1 ] ).toHaveAttribute( 'href', '/settings' );
+		} );
+
+		it( 'should never render preceding items as headings', () => {
+			render(
+				<Breadcrumbs
+					items={ [
+						{ label: 'Home', to: '/' },
+						{ label: 'Settings', to: '/settings' },
+						{ label: 'General' },
+					] }
+				/>
+			);
+
+			const headings = screen.getAllByRole( 'heading', { level: 1 } );
+			expect( headings ).toHaveLength( 1 );
+			expect( headings[ 0 ] ).toHaveTextContent( 'General' );
+		} );
+
+		it( 'should render a single item without `to` as an h1', () => {
+			render( <Breadcrumbs items={ [ { label: 'Dashboard' } ] } /> );
+
+			expect(
+				screen.getByRole( 'heading', { level: 1 } )
+			).toHaveTextContent( 'Dashboard' );
+			expect( screen.queryByRole( 'link' ) ).not.toBeInTheDocument();
+		} );
+
+		it( 'should render inside a nav with an accessible label', () => {
+			render( <Breadcrumbs items={ [ { label: 'Home', to: '/' } ] } /> );
+
+			expect(
+				screen.getByRole( 'navigation', { name: 'Breadcrumbs' } )
+			).toBeInTheDocument();
+		} );
+	} );
+} );

package/src/breadcrumbs/types.ts

@@ -6,7 +6,8 @@ export interface BreadcrumbItem {
 
 	/**
 	 * The router path that the breadcrumb item should link to.
-	 * It is optional because the current item does not have a link.
+	 * It is optional for the last item (the current page).
+	 * All preceding items should provide a `to` prop.
 	 */
 	to?: string;
 }
@@ -14,7 +15,9 @@ export interface BreadcrumbItem {
 export interface BreadcrumbsProps extends React.HTMLAttributes< HTMLElement > {
 	/**
 	 * An array of items to display in the breadcrumb trail.
-	 * The last item is considered the current item.
+	 * The last item is considered the current item and has an optional `to` prop.
+	 * All preceding items must have a `to` prop — in development mode,
+	 * an error is thrown when this requirement is not met.
 	 */
 	items: BreadcrumbItem[];
 	/**

package/src/page/index.tsx

@@ -41,7 +41,7 @@ function Page( {
 
 	return (
 		<NavigableRegion className={ classes } ariaLabel={ effectiveAriaLabel }>
-			{ ( title || breadcrumbs || badges ) && (
+			{ ( title || breadcrumbs || badges || actions ) && (
 				<Header
 					headingLevel={ headingLevel }
 					breadcrumbs={ breadcrumbs }

package/src/page/stories/index.story.tsx

@@ -2,7 +2,8 @@
  * External dependencies
  */
 import type { Meta, StoryObj } from '@storybook/react-vite';
-import { __experimentalText as Text } from '@wordpress/components';
+// eslint-disable-next-line @wordpress/use-recommended-components -- admin-ui is a bundled package that depends on @wordpress/ui
+import { Badge, Button, Text } from '@wordpress/ui';
 
 /**
  * Internal dependencies
@@ -82,3 +83,85 @@ export const WithBreadcrumbsAndSubtitle: Story = {
 		children: <Text>Page content here</Text>,
 	},
 };
+
+export const WithoutHeader: Story = {
+	args: {
+		showSidebarToggle: false,
+		hasPadding: true,
+		children: <Text>Page content here</Text>,
+	},
+};
+
+export const WithTitleAndBadges: Story = {
+	args: {
+		title: 'Page title',
+		badges: <Badge intent="informational">Status</Badge>,
+		showSidebarToggle: false,
+		hasPadding: true,
+		children: <Text>Page content here</Text>,
+	},
+};
+
+export const WithBreadcrumbsAndBadges: Story = {
+	args: {
+		showSidebarToggle: false,
+		breadcrumbs: (
+			<Breadcrumbs
+				items={ [
+					{ label: 'Root breadcrumb', to: '/connectors' },
+					{ label: 'Level 1 breadcrumb' },
+				] }
+			/>
+		),
+		badges: <Badge intent="none">Published</Badge>,
+		hasPadding: true,
+		children: <Text>Page content here</Text>,
+	},
+};
+
+export const WithActions: Story = {
+	args: {
+		title: 'Page title',
+		actions: (
+			<>
+				<Button size="compact" variant="outline">
+					Cancel
+				</Button>
+				<Button size="compact" variant="solid">
+					Save
+				</Button>
+			</>
+		),
+		showSidebarToggle: false,
+		hasPadding: true,
+		children: <Text>Page content here</Text>,
+	},
+};
+
+export const FullHeader: Story = {
+	args: {
+		subTitle: 'All of the subtitle text you need goes here.',
+		breadcrumbs: (
+			<Breadcrumbs
+				items={ [
+					{ label: 'Root breadcrumb', to: '/connectors' },
+					{ label: 'Level 1 breadcrumb' },
+				] }
+			/>
+		),
+		badges: <Badge intent="informational">Status</Badge>,
+		actions: (
+			<>
+				<Button size="compact" variant="outline">
+					Cancel
+				</Button>
+				<Button size="compact" variant="solid">
+					Save
+				</Button>
+			</>
+		),
+		showSidebarToggle: false,
+		hasPadding: true,
+		children: <Text>Page content here</Text>,
+	},
+};

package/src/page/style.scss

@@ -1,6 +1,10 @@
 .admin-ui-page {
 	display: flex;
 	height: 100%;
+	// @TODO: Revisit page background color. Consider using
+	// --wpds-color-bg-surface-neutral once existing pages (e.g. Styles)
+	// are updated to handle the contrast change.
+	// See https://github.com/WordPress/gutenberg/pull/76548
 	background-color: var(--wpds-color-bg-surface-neutral-strong);
 	color: var(--wpds-color-fg-content-neutral);
 	position: relative;